emsapp/pages/work/dtdc/Chart.vue

<template>
	<uni-popup ref="popup" type="center" @maskClick="show = false">
		<view class="chart-popup">
			<uni-datetime-picker v-model="range" type="daterange" start="2000-01-01" :end="end" rangeSeparator="至"
				@change="changeTime" />
			<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" :chartData="chartsData" :canvas2d="true"
					canvasId="scrollcolumnid" :optsWatch='false' :inScrollView="true" :pageScrollTop="pageScrollTop"
					:opts="options" :ontouch="true" />
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import QiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import {
		getSingleBatteryData
	} from '@/api/ems/site.js'
	export default {
		components: {
			QiunDataCharts
		},
		props: {
			pageScrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				options: {
					enableScroll: true,
					xAxis: {
						scrollShow: true,
						itemCount: 4,
						disableGrid: true
					},
					update: true,
					duration: 0,
					animation: false,
					// enableScroll: true,
					// padding: [10, 15, 10, 15]
				},
				show: false,
				range: [],
				end: "",
				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 = []
				setTimeout(() => {
					this.show = true
					this.getData()
				}, 300)
			},
			changeTime(val) {
				this.range = val || []
			},
			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?.series && (this.chartsData.series = [])
				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)
			}
		},
		mounted() {
			const now = new Date(),
				year = now.getFullYear(),
				month = now.getMonth() + 1,
				day = now.getDate()
			this.end = year + '-' + month + '-' + day
		}
	}
</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>