图表

pages/index.vue

@@ -102,6 +102,10 @@
 <style scoped lang="scss">
 	.container {
 		position: relative;
+
+		.no-data {
+			padding-top: 70px;
+		}
 	}
 
 	uni-button:after {

pages/work/dtdc/Chart.vue

@@ -1,5 +1,5 @@
 <template>
-	<uni-popup ref="popup" type="center" @maskClick="show = false">
+	<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;" />
@@ -8,8 +8,10 @@
 				<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" :optsWatch='false'
-					:inScrollView="true" :pageScrollTop="pageScrollTop" :opts="options" :ontouch="true" />
+				<!-- <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>
@@ -28,18 +30,25 @@
 		},
 		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
 					},
-					update: true,
 					duration: 0,
 					animation: false,
-					// enableScroll: true,
-					// padding: [10, 15, 10, 15]
 				},
 				show: false,
 				range: [],
@@ -66,10 +75,13 @@
 				this.deviceId = deviceId
 				this.dataType = dataType
 				this.range = []
-				setTimeout(() => {
+				this.$nextTick(() => {
 					this.show = true
 					this.getData()
-				}, 300)
+					// setTimeout(() => {
+
+					// }, 300)
+				})
 			},
 			changeTime(val) {
 				this.range = val || []
@@ -91,7 +103,7 @@
 					clusterDeviceId,
 					range: [startDate = '', endDate = '']
 				} = this;
-				this.chartsData?.series && (this.chartsData.series = [])
+				this.chartsData = {}
 				return getSingleBatteryData({
 					siteId,
 					deviceId,

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>

pages/work/index.vue

@@ -76,13 +76,14 @@
 				activeChartData: {},
 				pageScrollTop: 0,
 				options: {
+					dataLabel: false,
 					enableScroll: true,
 					xAxis: {
 						scrollShow: true,
 						itemCount: 7,
 						disableGrid: true
 					},
-					update: true,
+					// update: true,
 					// duration: 2,
 					// animation: false,
 					// enableScroll: true,

static/scss/global.scss

@@ -97,6 +97,5 @@
 	text-align: center;
 	line-height: 100px;
 	height: 100px;
-	background-color: #fff;
 	font-size: 18px;
 }