|
@@ -1,19 +1,242 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
- </view>
|
|
|
+ <view class="monitoring">
|
|
|
+ <view class="monitoring-content">
|
|
|
+ <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
|
|
|
+ <view class="monitoring-listbody">
|
|
|
+ <!-- 列表无数据 -->
|
|
|
+ <template v-if="list_empty">
|
|
|
+ <view class="monitoring-listbody-nodata">
|
|
|
+ <text class="monitoring-listbody-nodata-text">暂无数据</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 列表有数据 -->
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ class="listbody-item"
|
|
|
+ v-for="monitoringItem in monitoringList"
|
|
|
+ :key="monitoringItem.id"
|
|
|
+ @click="handleMonitoringDetails(monitoringItem)"
|
|
|
+ >
|
|
|
+ <view class="item-container">
|
|
|
+ <view class="container-left">
|
|
|
+ <view class="left-title">{{ monitoringItem.artTitle }}</view>
|
|
|
+ <view class="left-releasetime">发布时间:{{ monitoringItem.artInTime }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="container-right">
|
|
|
+ <view class="right-content">
|
|
|
+ <template v-if="monitoringItem.artImage">
|
|
|
+ <image
|
|
|
+ :src="baseApiUrl + monitoringItem.artImage"
|
|
|
+ mode="scaleToFill"
|
|
|
+ class="right-content-image"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <image
|
|
|
+ src="@/static/agrcloud-images/agrcloud-empty-img.png"
|
|
|
+ mode="scaleToFill"
|
|
|
+ class="right-content-image"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="clear: both;"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 加载更多组件 -->
|
|
|
+ <uni-load-more :status="loadStatus" v-if="!list_empty"></uni-load-more>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
-
|
|
|
- };
|
|
|
- }
|
|
|
- }
|
|
|
+import {
|
|
|
+ monitoringListData
|
|
|
+} from '@/agrcloud-api/monitoring';
|
|
|
+import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'monitoring',
|
|
|
+ components: {
|
|
|
+ uniLoadMore
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loadStatus: 'more',
|
|
|
+ list_empty: false,
|
|
|
+ pageTotal: 0,
|
|
|
+ pageCount: 0,
|
|
|
+ pagination: {
|
|
|
+ artCategoryId: '2',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10
|
|
|
+ },
|
|
|
+ monitoringList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 初始化数据 */
|
|
|
+ initData() {
|
|
|
+ this.getMonitoringListData();
|
|
|
+ },
|
|
|
+ /** 获取政策法规之列表数据 */
|
|
|
+ getMonitoringListData() {
|
|
|
+ this.list_empty = false;
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+
|
|
|
+ monitoringListData(this.pagination).then(res => {
|
|
|
+ // 数据总条数
|
|
|
+ this.pageTotal = res.total || 0;
|
|
|
+
|
|
|
+ // 如果列表为第一页,返回列表数据清空
|
|
|
+ if (this.pagination.pageNum == 1) {
|
|
|
+ this.monitoringList = [];
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理返回结果
|
|
|
+ if ((res.rows || []).length <= 0) { // 返回结果没有数据
|
|
|
+ if ((this.monitoringList || []).length <= 0) {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ this.list_empty = true;
|
|
|
+ } else {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ }
|
|
|
+ } else { //返回结果有数据
|
|
|
+ this.list_empty = false;
|
|
|
+
|
|
|
+ // 获取列表数据分页数量
|
|
|
+ this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
|
|
|
+ if ((res.total || 0) % this.pagination.pageSize == 0) {
|
|
|
+ this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
|
|
|
+ if (this.pageCount == 1) {
|
|
|
+ this.pageCount--;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.pageCount--;
|
|
|
+ };
|
|
|
+
|
|
|
+ // 处理页面状态
|
|
|
+ if (this.pageCount === 0) {
|
|
|
+ this.loadStatus = 'noMores'
|
|
|
+ } else {
|
|
|
+ this.loadStatus = 'more'
|
|
|
+ }
|
|
|
+
|
|
|
+ // 组装返回数据
|
|
|
+ this.monitoringList.push.apply(this.monitoringList, res.rows || []);
|
|
|
+
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+
|
|
|
+ }).catch(err => {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleScrolltolower() {
|
|
|
+ this.loadStatus = 'loading';
|
|
|
+ if (this.pagination.pageNum - 1 >= this.pageCount) {
|
|
|
+ this.loadStatus = 'noMores';
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.pagination.pageNum++;
|
|
|
+ this.getMonitoringListData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 政策法规之详情数据操作 */
|
|
|
+ handleMonitoringDetails(param) {
|
|
|
+ this.$store.dispatch("SetMonitoringDetails", param).then(() => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/monitoring/details/index'
|
|
|
+ });
|
|
|
+ }).catch(() => {
|
|
|
+ this.$msgbox('访问数据异常!', 'none');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
+.monitoring {
|
|
|
+ padding-top: 25rpx;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .monitoring-content {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .scroll-Y {
|
|
|
+ height: calc(
|
|
|
+ 100vh - 88rpx - 100rpx - env(safe-area-inset-bottom) -
|
|
|
+ var(--status-bar-height)
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitoring-listbody {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .listbody-item {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 208rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+
|
|
|
+ .item-container {
|
|
|
+ padding: 24rpx;
|
|
|
+
|
|
|
+ .container-left {
|
|
|
+ float: left;
|
|
|
+ width: 478rpx;
|
|
|
+
|
|
|
+ .left-title {
|
|
|
+ height: 84rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-releasetime {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .container-right {
|
|
|
+ float: left;
|
|
|
+ margin-left: 24rpx;
|
|
|
+
|
|
|
+ .right-content {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+
|
|
|
+ .right-content-image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-nodata {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20rpx;
|
|
|
|
|
|
+ &-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #777777;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|