修改数据查询

reado-app/pages/reportForm/data-item.vue

@@ -39,14 +39,9 @@
 			<u-empty v-if="!service.length" class="empty" icon="../../static/data.png" text="暂无数据">
 			</u-empty>
 		</view>
-		<view class="webview_style">
-			<!-- #ifdef H5 -->
-			<web-view v-if="service.length" :src="src" style="border: none;width:100%;height:1000px;"
-				:fullscreen="false" :webview-styles="webviewStyles">
-			</web-view>
-			<!--  #endif -->
+		<view style="width: 100%;height: 400px;">
+			<l-echart ref="chartRef" @finished="initChart"></l-echart>
 		</view>
-
 	</view>
 </template>
 
@@ -58,18 +53,26 @@
 		getLast3Month,
 		getLast6Month
 	} from '@/utils/date.js'
-	var wv;
+	// nvue 不需要引入
+	// #ifdef VUE2
+	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
+	// #endif
+	// #ifdef VUE3
+	// #ifdef MP
+	// 由于vue3 使用vite 不支持umd格式的包，小程序依然可以使用，但需要使用require
+	const echarts = require('../../static/echarts.min');
+	// #endif
+	// #ifndef MP
+	// 由于 vue3 使用vite 不支持umd格式的包，故引入npm的包
+	import * as echarts from 'echarts/dist/echarts.esm';
+	// #endif
+	// #endif
 	export default {
 		components: {
 			zqsSelectVue
 		},
 		data() {
 			return {
-				webviewStyles: {
-					progress: {
-						color: '#FF3333'
-					}
-				},
 				// 查询参数
 				queryParams: {
 					idList: [],
@@ -110,7 +113,7 @@
 				selItem: [],
 				itemReadName: null,
 				src: '',
-				windowInfo: null
+				option: {}
 			}
 		},
 		watch: {
@@ -138,39 +141,11 @@
 		mounted() {
 			this.getUserData()
 			this.range = getLastWeek()
-			// this.src =
-			// 	`/static/webview/dataItem-wv.html?idList=[19366]&startTime=2024-10-24 15:00:00&endTime=2024-10-24 23:59:59`
-			uni.getSystemInfo({
-				success: (res) => {
-					this.windowInfo = res;
-					//this.createWvAndLoadUrl(this.src);
-				}
-			});
 		},
 		beforeDestroy() {
-			//关闭webview对象
-			if (wv) {
-				wv.close()
-			}
+
 		},
 		methods: {
-			createWvAndLoadUrl(url) {
-				// #ifdef APP-PLUS
-				wv = plus.webview.create(url, "webview", {
-					top: this.windowInfo.statusBarHeight + 150,
-					scalable: true,
-					height: this.windowInfo.windowHeight - this.windowInfo.statusBarHeight - 96
-				})
-				// console.log('--------------------------------------------')
-				// console.log(this.$parent.toJSON())
-				// console.log('--------------------------------------------')
-				var currentWebview = this.$parent.$scope.$getAppWebview();
-				currentWebview.append(wv);
-				setTimeout(function() {
-					console.log(wv.getStyle())
-				}, 1000);
-				// #endif 
-			},
 			// 打开筛选
 			openScreen() {
 				this.monthQuery = !this.monthQuery
@@ -227,6 +202,77 @@
 					}
 				})
 			},
+			getChartOption() {
+				let option = {
+					xAxis: {
+						type: 'category',
+						data: [],
+						axisLabel: {
+							formatter: function(value) {
+								return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join('')
+							}
+						}
+					},
+					yAxis: {
+						type: 'value'
+					},
+					legend: {
+						type: 'scroll',
+						top: 0
+					},
+					tooltip: {
+						trigger: 'axis',
+						axisPointer: {
+							type: 'cross',
+							lineStyle: {
+								type: 'dashed'
+							},
+							label: {
+								show: false
+							}
+						},
+						textStyle: {
+							color: '#ffffff'
+						},
+						confine: true,
+						extraCssText: 'white-space: normal; word-break: break-all;',
+						backgroundColor: 'rgba(108,106,120,0.9)',
+						position: 'inside',
+						// formatter: function(params) {
+						// 	let result = ''
+						// 	for (let i in params) {
+						// 		let value = '--'
+						// 		if (params[i].data !== null) {
+						// 			value = params[i].data
+						// 		}
+						// 		result += '<br>' + params[i].seriesName + '：' +
+						// 			value
+						// 	}
+						// 	return result
+						// }
+					},
+					dataZoom: [{
+							type: 'inside',
+							start: 90,
+							end: 100
+						},
+						{
+							type: 'slider',
+							show: true,
+							start: 90,
+							end: 100,
+							bottom: 10
+						}
+					],
+					series: []
+				};
+				return option
+			},
+			async initChart() {
+				console.log('initChart')
+				const chart = await this.$refs.chartRef.init(echarts)
+				chart.setOption(this.option)
+			},
 			//确认按钮查询
 			handelQuery() {
 				// 临时当前时间，需要改成选择时间----开始
@@ -256,32 +302,27 @@
 				uni.$http.get('/itemGroup/getItemListValue', this.queryParams).then(res => {
 					const data = res.data
 					if (data.code === 200) {
-						const {
-							idList,
-							startTime,
-							endTime
-						} = this.queryParams
-						//console.log(JSON.stringify(idList))
-						let id_List = idList.map(temp=>temp).join(',');
-						this.src =
-							`/static/webview/dataItem-wv.html?idList=${id_List}&startTime=${startTime}&endTime=${endTime}`
-						console.log(this.src)
-						this.createWvAndLoadUrl(this.src);
 						if (data.data) {
-							const {
-								valueList,
-								valueTimeList
-							} = data.data
-							const service = [{
-								// name: this.itemName,
-								name: this.itemReadName,
-								data: valueList
-							}]
+							let	valueList=[],valueTimeList=[];
+							valueTimeList = data.data[0].dataTimeList;
+							let service=[]
+							for(let dataList of data.data){
+								let seriesData = {
+									type:'line',
+									name:dataList.describe!=null ? dataList.describe:dataList.itemReadName,
+									data:dataList.dataValueList
+								}
+								service.push(seriesData)
+							}
 							this.service = service
-							this.serviceTime = valueTimeList
+							let optionData = this.getChartOption()
+							
+							optionData.xAxis.data = valueTimeList
+							optionData.series = this.service
+							this.option = optionData
+							this.initChart()
 						} else {
 							this.service = []
-							this.serviceTime = []
 						}
 					} else {
 						uni.showToast({
@@ -318,7 +359,7 @@
 			//重置按钮
 			reset() {
 				this.queryParams = {
-					idList: null,
+					idList: [],
 					startTime: null,
 					endTime: null,
 				}
@@ -341,6 +382,10 @@
 </script>
 
 <style lang="scss" scoped>
+	iframe {
+		border: none;
+	}
+
 	.webviewstyle {
 		height: 100%;
 		width: 100%;