emsapp/pages/work/dtdc/Chart.vue

<template>
	<uni-popup ref="popup" type="center" @maskClick="show = false" :animation="false">
		<view class="chart-popup">
			<uni-datetime-picker v-model="range" type="daterange" :end="end" rangeSeparator="至" @change="changeTime"
				style="margin-bottom: 10px;" />
			<!-- <view class="button-group" style="text-align: center;margin-top:20px;">
				<button type="default" size="mini" @click="onReset">重置</button>
				<button type="primary" size="mini" @click="onSearch" style="margin-left: 20px;">搜索</button>
			</view> -->
			<view class="chart-container">
				<!-- <qiun-data-charts type="line" :reload="show" :opts="options" :optsWatch='false'
					:inScrollView="true" :pageScrollTop="pageScrollTop" :ontouch="true" :chartData="chartsData" /> -->
				<qiun-data-charts type="line" :reshow="show" :optsWatch='false' :opts="options" :chartData="chartsData"
					:ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		getSingleBatteryData
	} from '@/api/ems/site.js'
	export default {
		props: {
			pageScrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// {update:true,enableScroll:true,xAxis:{scrollShow:true,itemCount:4,disableGrid:true,scrollAlign:'current'}}
				options: {
					// xAxis: {
					// 	scrollShow: true,
					// 	itemCount: 3,
					// 	disableGrid: true,
					// 	scrollAlign: 'current'
					// },
					// enableScroll: true,
					// update: true,
					dataLabel: false,
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 3,
						disableGrid: true
					},
					duration: 0,
					animation: false,
				},
				show: false,
				range: [],
				end: Date.now(),
				siteId: '',
				deviceId: '',
				clusterDeviceId: '',
				dataType: '', //展示的数据类型 空值展示所有数据
				loading: false,
				chartsData: {},
			}
		},

		methods: {
			open({
				siteId,
				clusterDeviceId,
				deviceId
			}, dataType) {
				this.$refs.popup.open()
				this.loading = false
				this.siteId = siteId
				this.clusterDeviceId = clusterDeviceId
				this.deviceId = deviceId
				this.dataType = dataType
				this.range = []
				this.$nextTick(() => {
					this.show = true
					this.getData()
					// setTimeout(() => {

					// }, 300)
				})
			},
			changeTime(val) {
				this.range = val || []
				this.getData()
			},
			onReset() {
				this.range = []
				this.getData()
			},
			onSearch() {
				this.getData()
			},
			getData() {
				if (this.loading) return
				this.loading = true;
				const {
					siteId,
					deviceId,
					clusterDeviceId,
					range: [startDate = '', endDate = '']
				} = this;
				this.chartsData = {}
				return getSingleBatteryData({
					siteId,
					deviceId,
					clusterDeviceId,
					startDate,
					endDate
				}).then(response => {
					console.log('单体电池图表返回数据', response.data)
					this.handledata(response?.data || [])
				}).finally(() => {
					this.loading = false;
				})
			},
			handledata(data) {
				let obj = {
						voltage: '电压',
						temperature: '温度',
						soc: 'SOC',
						soh: 'SOH',
					},
					categories = [],
					dataTypeList = []
				if (this.dataType) {
					dataTypeList = [{
						attr: this.dataType,
						title: obj[this.dataType],
						data: []
					}]
				} else {
					dataTypeList = Object.entries(obj).map(([key, value]) => {
						return {
							attr: key,
							title: value,
							data: []
						}
					})

				}
				data.forEach(item => {
					categories.push(item.dataTimestamp)
					dataTypeList.forEach(i => {
						i.data.push(item[i.attr] || undefined)
					})
				})
				const series = dataTypeList.map(item => {
					return {
						"name": item.title,
						"data": item.data
					}
				})
				this.chartsData = JSON.parse(JSON.stringify({
					categories,
					series
				}))
				console.log('this.chartsData', this.chartsData)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.chart-popup {
		width: 360px;
		background-color: #fff;
		padding: 10px 15px;

		.chart-container {
			width: 100%;
			height: 250px;
			margin-top: 20px;
		}

		::v-deep {
			uni-canvas {
				height: 250px;
				width: 100%;
			}
		}
	}
</style>