初次提交

pages/home-page/device-detail/components/yx.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="warp" >
+		<zero-loading v-if="loading"></zero-loading>
+		<template  v-else>
+
+			<Search style="margin-bottom: 20rpx;" @search="search" />
+					<scroll-view style="height: calc(100% - 130rpx);" scroll-y="true" @scrolltolower="onReachScollBottom" v-if="total">
+
+			<view class="value-box" v-for="(item,index) in table_data" :key="index">
+				<view class="title" >
+					{{item.colName}}
+				</view>
+				<view class="value">
+					{{item.value}}
+				</view>
+			
+			</view>
+
+				<view v-if="total > 10">
+					<u-loadmore :status="status" icon-type="iconType" :load-text="loadText" v-if="loadmoreshow" />
+				</view>
+			</scroll-view>
+			
+			<view v-else style="height: 100%;">
+				<u-empty :text="this.$t('homePage.device.noData')" mode="list"></u-empty>
+			</view>
+			
+		</template >
+
+	</view>
+</template>
+
+<script>
+	import Search from '@/components/new-search/index.vue'
+	export default {
+		components: {
+			Search
+		},
+		data() {
+			return {
+				stationId: null,
+				loading: false,
+				srcId: null,
+				table_data: [],
+				value: '',
+				name:'',
+				type: 'text',
+				border: true,
+				status: "loadmore",
+				loadText: this.$t('homePage.device.loadText'),
+				loadmoreshow: true,
+				nodata:false,
+				pageNum:1,
+				pageSize:50,
+				total:0
+			}
+		},
+		computed: {
+			currentStation() {
+				return this.vuex_currentStation;
+			}
+		},
+		watch: {
+			currentStation: {
+				handler(val) {
+					this.stationId = val.id;
+				},
+				deep: true,
+				immediate: true
+			}
+		},
+		onReachBottom() { //与methods 同级
+		},
+		created(){
+			this.loading = true
+		},
+		methods: {
+			onReachScollBottom(){
+				if (this.table_data.length < this.total) {
+					// this.pageSize += 5
+					this.getData()
+				} else {
+					this.status = "nomore"
+				}
+			},
+			search(val) {
+			this.name = val
+			this.pageNum = 1
+			this.table_data = []
+			this.getData()
+			},
+			getData(srcId) {
+				const self = this
+				if (srcId) {
+					this.srcId = srcId
+				}
+				// this.loading = true
+				return new Promise((resolve, reject) => {
+					self.$u.api.deviceList
+						.GetPCSPoint({
+							stationId: this.stationId,
+							name:self.name,
+							pageNum: self.pageNum,
+							pageSize: self.pageSize,
+							sensType: 1,
+							srcId: self.srcId
+						})
+						.then((res) => {
+							// self.table_data = res.data.list
+							self.total = res.data.totalRows
+							self.table_data = self.table_data.concat(res.data.list)
+							if (self.total === 0) {
+								self.table_data = []	
+							};
+							if (self.total) {
+								self.nodata = false
+							} else {
+								self.nodata = true
+								self.loadmoreshow = false
+							}
+							if(res.data.totalPages > self.pageNum){
+								self.pageNum += 1
+							}
+							resolve(res);
+						})
+						.catch((err) => {
+							reject("错误");
+						}).finally(() => {
+							self.loading = false
+						})
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.warp {
+		height: 100% !important;
+		background-color: #f5f5f5;
+padding-bottom: 70rpx;
+		.value-box {
+			width: 100%;
+			height: 80rpx;
+			// border: 1px solid #000;
+			display: flex;
+			justify-content: space-between;
+			padding: 15rpx 30rpx 15rpx 30rpx;
+			margin-bottom:20rpx;
+			border-radius: 8rpx;
+			background-color: #fff;
+			align-items: center;
+			.title {
+				color: #282828;
+				font-size: 24rpx;
+			}
+
+			.value {
+				color: #282828;
+				font-size: 36rpx;
+			}
+		}
+
+	}
+</style>