emsapp/pages/work/dtdc/index.vue

<template>
	<view class="container">
		<view class="search-icon" @click="openSearch">
			<uni-icons type="search" size="40" color="#fff"></uni-icons>
		</view>
		<view class="list-container">
			<view class="no-data" v-if="list.length === 0">暂无数据</view>
			<uni-list v-else>
				<uni-list-item v-for="(item,index) in list" :key="index+'dtdc'">
					<template v-slot:header>
						<view class="list-header">
							单体编号:{{item.deviceId}}
							<button type="primary" size="mini" class="charts" @click="toDetail(item)">图表</button>
						</view>
					</template>
					<template v-slot:body>
						<view class="list-body">
							<uni-row>
								<uni-col :span="8">
									<view>簇号</view>
								</uni-col>
								<uni-col :span="14">
									<view class="right">{{item.clusterDeviceId}}</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="8">
									<view>电压（V）</view>
								</uni-col>
								<uni-col :span="14">
									<view class="right color" @click="toDetail(item,'voltage')">{{item.voltage}}
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="8">
									<view>温度（℃）</view>
								</uni-col>
								<uni-col :span="14">
									<view class="right color" @click="toDetail(item,'temperature')">
										{{item.temperature}}
									</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="8">
									<view>SOC（%）</view>
								</uni-col>
								<uni-col :span="14">
									<view class="right color" @click="toDetail(item,'soc')">{{item.soc}}</view>
								</uni-col>
							</uni-row>
							<uni-row>
								<uni-col :span="8">
									<view>SOH（%）</view>
								</uni-col>
								<uni-col :span="14">
									<view class="right color" @click="toDetail(item,'soh')">{{item.soh}}</view>
								</uni-col>
							</uni-row>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<chart ref="chart" :pageScrollTop="pageScrollTop" />
		<uni-popup ref="searchPopup" type="center">
			<view class="uni-pa-5 search-container">
				<uni-forms ref="form">
					<uni-forms-item label="电池堆">
						<uni-data-select :clear="false" v-model="search.stackId" :localdata="stackOptions"
							@change="changeStackId"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="电池簇">
						<uni-data-select :clear="false" v-model="search.clusterId"
							:localdata="clusterOptions"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<view class="button-group" style="text-align: center;">
					<button type="default" size="mini" @click="onReset">重置</button>
					<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Chart from './Chart.vue'
	import {
		getStackNameList,
		getClusterNameList,
		getClusterDataInfoList,
	} from '@/api/ems/site.js'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			Chart
		},
		computed: {
			...mapState({
				workStatusOptions: (state) =>
					state.ems.workStatusOptions,
				communicationStatusOptions: (state) =>
					state.ems.communicationStatusOptions,
			})
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 20,
				total: 0,
				stackOptions: [],
				clusterOptions: [],
				search: {
					stackId: '',
					clusterId: ''
				},
				list: [],
				siteId: '',
				pageScrollTop: 0,
			}
		},
		onPageScroll(e) {
			this.pageScrollTop = e.scrollTop
		},
		onReachBottom() {
			console.log('触底了')
			if (this.list.length >= this.total) {
				return console.log('数据已经加载完成')
			}
			this.pageNum += 1 //每次搜索从1开始搜索
			this.getTableData()
		},
		methods: {
			openSearch() {
				this.$refs.searchPopup.open()
			},
			closeSearch() {
				this.$refs.searchPopup.close()
			},
			toDetail(item, dataType) {
				const {
					clusterDeviceId,
					deviceId
				} = item, {
					siteId
				} = this
				this.$refs.chart.open({
					siteId,
					clusterDeviceId,
					deviceId
				}, dataType)
			},
			// 搜索
			onSearch() {
				this.pageNum = 1 //每次搜索从1开始搜索
				this.getTableData(true)
				this.closeSearch()
			},
			// 重置
			// 清空搜索栏选中数据
			// 清空电池簇列表，保留电池堆列表
			onReset() {
				this.search = {
					stackId: '',
					clusterId: ''
				}
				this.clusterOptions = []
				this.pageNum = 1
				this.getTableData(true)
				this.closeSearch()
			},
			changeStackId(val) {
				if (val) {
					console.log('选择了电池堆，需要获取对应的电池簇', val, this.search.stackId)
					this.search.clusterId = ''
					this.getClusterList()
				}
			},
			getStackList() {
				getStackNameList({
					siteId: this.siteId
				}).then(response => {
					this.stackOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
						return {
							text: item.deviceName,
							value: item.id
						}
					})
				})
			},
			getClusterList() {
				getClusterNameList({
					stackDeviceId: this.search.stackId,
					siteId: this.siteId
				}).then(response => {
					this.clusterOptions = JSON.parse(JSON.stringify(response?.data || [])).map(item => {
						return {
							text: item.deviceName,
							value: item.id
						}
					})
				}).finally(() => {})
			},
			//表格数据
			getTableData(reset = false) {
				if (!reset && this.list.length === this.total) return
				uni.showLoading()
				if (reset) {
					this.list = []
					this.total = 0
				}
				const {
					stackId: stackDeviceId,
					clusterId: clusterDeviceId
				} = this.search
				const {
					siteId,
					pageNum,
					pageSize
				} = this
				getClusterDataInfoList({
					stackDeviceId,
					clusterDeviceId,
					siteId,
					pageNum,
					pageSize
				}).then(response => {
					this.list = this.list.concat(response?.rows || []);
					this.total = response?.total || 0
				}).finally(() => {
					uni.hideLoading()
				})
			},
		},
		mounted() {
			// uni.showLoading()
			this.siteId = this.$route.query.siteId || ''
			this.getStackList()
			this.getTableData(true)
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;

		// position: fixed;
		// width: 100%;
		// height: 100%;
		// overflow-y: auto;
		.search-icon {
			position: fixed;
			bottom: 20px;
			right: 20px;
			z-index: 1;
			height: 50px;
			width: 50px;
			background-color: #007aff;
			border-radius: 100%;
			line-height: 50px;
			text-align: center;
		}

		.search-container {
			background: #ffffff;
			width: 360px;
			padding: 15px 20px;
		}

		.list-container {
			// z-index: 10;
			padding-top: 20px;
			padding-bottom: 50px;
			background: #ffffff;

			::v-deep {
				.uni-list-item__container {
					display: block;
				}

				.uni-list--border-top,
				.uni-list--border-bottom,
				.uni-list--border::after {
					background-color: transparent;
				}
			}

			.list-header {
				background-color: #05AEA3;
				color: #fff;
				padding: 10px 15px;
				border-radius: 5px 5px 0 0;
				position: relative;

				.charts {
					position: absolute;
					top: 50%;
					right: 15px;
					transform: translateY(-50%);
					// background-color: #ff7300;
				}
			}

			.list-body {
				padding: 10px 15px;
				border: 1px solid #eee;
				border-top: none;
				border-radius: 0 0 5px 5px;
				font-size: 14px;
				color: #666;

				.right {
					color: #000;
				}

				.color {
					color: #007aff;
				}

				.uni-row {
					margin-bottom: 10px;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>