From 4076c14a8eac96cd716522f2cb15dcda0eb4fcef Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 10 四月 2024 08:37:53 +0800 Subject: [PATCH] 新修改 --- src/views/monitorData/gasData/index.vue | 57 +++++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 47 insertions(+), 10 deletions(-) diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue index 043df7a..1d2d9ee 100644 --- a/src/views/monitorData/gasData/index.vue +++ b/src/views/monitorData/gasData/index.vue @@ -24,6 +24,17 @@ <el-option v-for="item in state.tableData.gasList" :key="item.id" :label="item.name" :value="item.id"></el-option> </el-select> </el-form-item> + <el-form-item label="方位:"> + <el-select + v-model="state.tableData.listQuery.searchParams.position" + class="w100" + style="max-width: 180px" + size="default" + > + <el-option v-for="item in state.tableData.positionList" :key="item.label" :label="item.value" :value="item.label"></el-option> + </el-select> + </el-form-item> + <el-button size="default" type="primary" class="ml10" @click="search()"> <el-icon> <ele-Search /> @@ -38,7 +49,7 @@ </el-button> </el-form> </div> - <div id="gasChart" style="height: 500px;width: auto"></div> + <div :id="gasChart" style="height: 500px;width: auto"></div> <el-table :data="state.tableData.data" style="width: 100%;margin-top: 20px" v-loading="loading"> <el-table-column type="index" label="序号" width="80" /> <el-table-column align="center" prop="time" label="采集时间"/> @@ -46,6 +57,7 @@ <el-table-column align="center" prop="windDirection" label="风向"/> <el-table-column align="center" prop="name" label="气体名称"/> <el-table-column align="center" prop="gasValue" label="气体浓度"/> + <el-table-column align="center" prop="position" label="方位"/> </el-table> <br /> <el-pagination @@ -87,12 +99,28 @@ startTime: '', endTime: '', time: [], - gas: '' + gas: '', + position: null } }, - gasList: [] + gasList: [], + positionList: [ + { + value: '方位1', + label: 1 + }, + { + value: '方位2', + label: 2 + }, + { + value: '方位3', + label: 3 + }, + ] } }); +const gasChart = ref("eChartgasN" + Date .now() + Math .random()) const chooseTime = (val: any) => { let sTime = Date.parse(new Date(val[0])); @@ -137,7 +165,8 @@ const chartParam = { startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss'), - gasName: state.tableData.listQuery.searchParams.gas + gasName: state.tableData.listQuery.searchParams.gas, + position: state.tableData.listQuery.searchParams.position } let resChart = await gasDataApi().getGasLineChart(chartParam); if(resChart.data.code == 100) { @@ -149,8 +178,6 @@ return item.gasValue; }) dataZoomEnd.value = xData.value.length > 25 ? 30 : 100; - markLines.value = 110; - }else { xData.value = []; yData.value = []; @@ -173,7 +200,8 @@ searchParams: { startTime: moment(state.tableData.listQuery.searchParams.time[0]).format('YYYY-MM-DD HH:mm:ss'), endTime: moment(state.tableData.listQuery.searchParams.time[1]).format('YYYY-MM-DD HH:mm:ss'), - gasName: state.tableData.listQuery.searchParams.gas + gasName: state.tableData.listQuery.searchParams.gas, + position: state.tableData.listQuery.searchParams.position } } let res = await gasDataApi().getGasLinePage(pageParam); @@ -195,7 +223,10 @@ let res = await gasManageApi().getGas({}); if(res.data.code == 100) { state.tableData.gasList = res.data.data; + console.log("气体",state.tableData.gasList) + //默认选择第一个气体 state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id; + markLines.value = state.tableData.gasList[0].threshold; initInfoData(); }else { ElMessage({ @@ -216,13 +247,18 @@ }; const search = () => { state.tableData.listQuery.pageIndex = 1; + const gasObj = state.tableData.gasList.filter(item => { + return item.id == state.tableData.listQuery.searchParams.gas + }); + markLines.value = gasObj[0].threshold; initInfoData(); - console.log("vla",state.tableData.listQuery.searchParams) } const reset = () => { getNowTime(); state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id; + markLines.value = state.tableData.gasList[0].threshold; state.tableData.listQuery.pageIndex = 1; + state.tableData.listQuery.searchParams.position = null; initInfoData(); } @@ -230,7 +266,7 @@ if (myChart.value != null && myChart.value != "" && myChart.value != undefined) { myChart.value.dispose(); } - myChart.value = echarts.init(document.getElementById('gasChart')); + myChart.value = echarts.init(document.getElementById(gasChart.value)); // 指定图表的配置项和数据 const option = { tooltip: { @@ -266,6 +302,7 @@ }, series: [ { + // name : '总计', data: yData.value, type: 'line', markLine: {//图表标线 @@ -283,7 +320,7 @@ } },],//type: 'average', 平均值, min最小值, max 最大值, median中位数 }, - } + }, ], dataZoom: [ { -- Gitblit v1.9.2