fix:监测数据添加折线图

src/views/wpm_bx/monitor_detail.vue

@@ -3,12 +3,12 @@
 	<el-drawer
 		title="监测数据"
 		v-model="visible"
-		:size="'65%'"
+		:size="'70%'"
 		destroy-on-close
 		@closed="$emit('closed')"
 	>
 		<div id="tableWap" style="height: 100%;">
-			<el-tabs v-model="activeName" @tab-click="handleClick">
+			<el-tabs v-model="activeName" @tab-change="handleClick">
 				<el-tab-pane  v-for="item in mpointList" :label="item.name" :name="item.name" :key="item.id" lazy>
 					<scTable
 						ref="table"
@@ -22,8 +22,12 @@
 						<el-table-column label="时间" prop="timex">
 						</el-table-column>
 						<el-table-column label="数值" prop="val_float">
+							<template #default="scope">
+								{{ scope.row.val_float.toFixed(2) }}
+							</template>
 						</el-table-column>
 					</scTable>
+					<scEcharts height="280px" :option="option"></scEcharts>
 				</el-tab-pane>
 			</el-tabs>
 		</div>
@@ -57,6 +61,38 @@ export default {
 			mpointList:[],
 			activeName: "",
 			tableHeight:300,
+			option: {
+				title: {
+					text: "",
+				},
+				tooltip: {
+					trigger: "axis",
+				},
+				grid: {
+					left: "3%",
+					right: "4%",
+					bottom: "3%",
+					containLabel: true,
+				},
+				// toolbox: {
+				// 	feature: {
+				// 		saveAsImage: {},
+				// 	},
+				// },
+				xAxis: {
+					type: "category",
+					boundaryGap: false,
+					data: [],
+				},
+				yAxis: {
+					type: "value",
+				},
+				series:{
+					name: "数据检测",
+					type: "line",
+					data: [],
+				}
+			}
 		};
 	},
 	mounted() {
@@ -69,6 +105,7 @@ export default {
 				that.activeName = res[0].name;
 				that.params.mpoint = res[0].id;
 				that.apiObj = that.$API.enm.mplogx;
+				that.handleClick();
 			}else{
 				that.$message.error("该设备没有监测点");
 			}
@@ -81,15 +118,32 @@ export default {
 			that.$nextTick(() => {
 				let height = document.getElementById("tableWap").clientHeight;
 				console.log('height',height)
-				that.tableHeight = height - 45;
+				that.tableHeight = height - 345;
 			})
 		},
 		handleClick(val){
+			console.log('handleClick',val)
 			let that = this;
 			that.mpointList.forEach(item=>{
 			    if(item.name == that.activeName){
+					console.log('item',item)
+					console.log('that.activeName',that.activeName)
 					that.query.mpoint = item.id;
 					that.query.page = 1;
+					that.option.title.text = that.activeName;
+					that.option.xAxis.data = [];
+					that.option.series.data = [];
+					let params = {};
+					params.mpoint = item.id;
+					params.timex__gte = that.startTime;
+					params.timex__lte = that.endTime;
+					params.page = 0;
+					that.$API.enm.mplogx.req(params).then((res) => {
+						res.forEach(item=>{
+							that.option.xAxis.data.push(item.timex);
+							that.option.series.data.push(item.val_float);
+						})
+					})
 				}
 			})
 		},