图表

pages/work/dtdc/index.vue

@@ -63,7 +63,17 @@
 				</uni-list-item>
 			</uni-list>
 		</view>
-		<chart ref="chart" :pageScrollTop="pageScrollTop" />
+		<uni-popup ref="popup" type="center" :animation="false" :mask-click="false" :is-mask-click="false"
+			@maskClick="maskClick">
+			<view class="chart-popup" v-if="showChart">
+				<uni-datetime-picker v-model="range" type="daterange" :end="end" rangeSeparator="至" @change="changeTime"
+					style="margin-bottom: 10px;" />
+				<view class="chart-container">
+					<qiun-data-charts type="line" :reload="showChart" :optsWatch='false' :opts="options"
+						:chartData="chartsData" :ontouch="true" :inScrollView="true" :pageScrollTop="pageScrollTop" />
+				</view>
+			</view>
+		</uni-popup>
 		<uni-popup ref="searchPopup" type="center">
 			<view class="uni-pa-5 search-container">
 				<uni-forms ref="form">
@@ -89,18 +99,19 @@
 </template>
 
 <script>
-	import Chart from './Chart.vue'
+	// import Chart from './Chart.vue'
 	import {
 		getStackNameList,
 		getClusterNameList,
 		getClusterDataInfoList,
+		getSingleBatteryData
 	} from '@/api/ems/site.js'
 	import {
 		mapState
 	} from 'vuex'
 	export default {
 		components: {
-			Chart
+			// Chart
 		},
 		computed: {
 			...mapState({
@@ -125,6 +136,28 @@
 				list: [],
 				siteId: '',
 				pageScrollTop: 0,
+				// ucharts数据
+				showChart: false,
+				chartSearchData: {
+
+				},
+				options: {
+					duration: 0,
+					animation: false,
+					dataLabel: false,
+					enableScroll: true,
+					xAxis: {
+						scrollShow: true,
+						itemCount: 3,
+						disableGrid: true
+					},
+				},
+				range: [],
+				end: Date.now(),
+				loading: false,
+				chartsData: {},
+				// ucharts数据结束
+
 			}
 		},
 		onPageScroll(e) {
@@ -138,6 +171,107 @@
 			this.getTableData()
 		},
 		methods: {
+			//ucharts方法
+			maskClick() {
+				this.showChart = false
+				this.$refs.popup.close()
+			},
+			chartOpen({
+				siteId,
+				clusterDeviceId,
+				deviceId
+			}, dataType) {
+				this.loading = false
+				this.range = []
+				this.chartSearchData = {
+					clusterDeviceId,
+					deviceId,
+					dataType
+				}
+				this.$refs.popup.open()
+				setTimeout(() => {
+					this.showChart = true
+					this.getChartData()
+				}, 100)
+			},
+			changeTime(val) {
+				this.range = val || []
+				this.getChartData()
+			},
+			getChartData() {
+				if (this.loading) return
+				this.loading = true;
+				const {
+					siteId,
+					chartSearchData: {
+						deviceId,
+						clusterDeviceId
+					},
+					range: [startDate = '', endDate = '']
+				} = this;
+				this.chartsData = {}
+				return getSingleBatteryData({
+					siteId,
+					deviceId,
+					clusterDeviceId,
+					startDate,
+					endDate
+				}).then(response => {
+					this.handledata(response?.data || [])
+				}).finally(() => {
+					this.loading = false;
+				})
+			},
+			handledata(data) {
+				let obj = {
+						voltage: '电压',
+						temperature: '温度',
+						soc: 'SOC',
+						soh: 'SOH',
+					},
+					categories = [],
+					dataTypeList = [],
+					{
+						dataType
+					} = this.chartSearchData
+				if (dataType) {
+					dataTypeList = [{
+						attr: dataType,
+						title: obj[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)
+			},
+			//ucharts方法结束
+
+
+
 			openSearch() {
 				this.$refs.searchPopup.open()
 			},
@@ -151,7 +285,8 @@
 				} = item, {
 					siteId
 				} = this
-				this.$refs.chart.open({
+				// this.$refs.chart.open({
+				this.chartOpen({
 					siteId,
 					clusterDeviceId,
 					deviceId
@@ -343,5 +478,25 @@
 				}
 			}
 		}
+
+		.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>