From 2441dbdac0141d643eec889f132dbdc8cfc84daa Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期二, 30 七月 2024 10:01:05 +0800 Subject: [PATCH] 新项目 --- src/views/monitorData/gasData/index.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 files changed, 105 insertions(+), 8 deletions(-) diff --git a/src/views/monitorData/gasData/index.vue b/src/views/monitorData/gasData/index.vue index fe4ad87..1baa150 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 /> @@ -36,6 +47,14 @@ </el-icon> 重置 </el-button> + <vue3-json-excel + class="ml10" + :json-data="state.tableData.excelData" + :fields="fields" + name="气体数据.xls" + > + <el-button type="primary" :icon="Download" size="default">导出</el-button> + </vue3-json-excel> </el-form> </div> <div :id="gasChart" style="height: 500px;width: auto"></div> @@ -46,6 +65,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 @@ -74,6 +94,7 @@ import { gasManageApi } from "/@/api/basicDataManage/gasManage"; import moment from "moment"; import {gasDataApi} from "/@/api/monitorData/gasData"; +import {Download} from "@element-plus/icons-vue"; const state = reactive<TableGasState>({ tableData: { @@ -87,11 +108,54 @@ startTime: '', endTime: '', time: [], - gas: '' + gas: '', + position: null } }, - gasList: [] + gasList: [], + positionList: [ + { + value: '方位1', + label: 1 + }, + { + value: '方位2', + label: 2 + }, + { + value: '方位3', + label: 3 + }, + ], + excelData: [] } +}); +const fields = ref({ + 'time':'dataReceivingTime', + '设备ID':'equipmentId', + '位置':'position', + '经度':'lng', + '纬度':'lat', + '角度': 'angle', + '温度': 'temp', + '湿度': 'humidity', + '风速':'windSpeed', + '风向':'windDirection', + '气压':'pressure', + '甲烷CH4':'gasName01', + 'gasValue01':'gasValue01', + '乙烷C2H6':'gasName02', + 'gasValue02':'gasValue02', + '丙烷C3H8':'gasName03', + 'gasValue03':'gasValue03', + '丁烷C4H10':'gasName04', + 'gasValue04':'gasValue04', + '硫化氢H2S':'gasName05', + 'gasValue05':'gasValue05', + '乙烯C2H4':'gasName06', + 'gasValue06':'gasValue06', + '异丁烷C4H10':'gasName07', + 'gasValue07':'gasValue07', }); const gasChart = ref("eChartgasN" + Date .now() + Math .random()) @@ -134,11 +198,13 @@ state.tableData.listQuery.searchParams.time = [sTime,eTime]; } const initInfoData = async () => { + await exportGasData(); //折线图 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) { @@ -172,13 +238,14 @@ 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); if(res.data.code == 100) { state.tableData.data = res.data.data; - state.tableData.total = res.data.total; + state.tableData.total = res.data.total == null ? 0 :res.data.total; state.tableData.listQuery.pageIndex = res.data.pageIndex; state.tableData.listQuery.pageSize = res.data.pageSize; loading.value = false; @@ -198,7 +265,8 @@ //默认选择第一个气体 state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id; markLines.value = state.tableData.gasList[0].threshold; - initInfoData(); + await initInfoData(); + }else { ElMessage({ type: 'warning', @@ -206,6 +274,34 @@ }); } }; +const exportGasData = async () => { + const pageParam = { + 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'), + ch4: state.tableData.listQuery.searchParams.gas == 1 ? 1 : 0, + c2h6: state.tableData.listQuery.searchParams.gas == 2 ? 1:0, + c3H8: state.tableData.listQuery.searchParams.gas == 3 ? 1:0, + c4h101: state.tableData.listQuery.searchParams.gas == 4 ? 1:0, + h2s: state.tableData.listQuery.searchParams.gas == 5 ? 1:0, + c2h4: state.tableData.listQuery.searchParams.gas == 6 ? 1:0, + c4h102: state.tableData.listQuery.searchParams.gas == 7 ? 1:0, + +// 发对应的编号,查询数据;null,不查询 + position1: state.tableData.listQuery.searchParams.position == 1 ? '1':null, + position2: state.tableData.listQuery.searchParams.position == 2 ? '2':null, + position3: state.tableData.listQuery.searchParams.position == 3 ? '3':null, + } + let res = await gasDataApi().exportGas(pageParam); + if(res.data.code == 200) { + state.tableData.excelData = res.data.data + console.log('excelData',state.tableData.excelData) + }else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } +} const onHandleSizeChange = (val: number) => { state.tableData.listQuery.pageSize = val; @@ -222,7 +318,6 @@ return item.id == state.tableData.listQuery.searchParams.gas }); markLines.value = gasObj[0].threshold; - initInfoData(); } const reset = () => { @@ -230,6 +325,7 @@ 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(); } @@ -273,6 +369,7 @@ }, series: [ { + // name : '总计', data: yData.value, type: 'line', markLine: {//图表标线 @@ -290,7 +387,7 @@ } },],//type: 'average', 平均值, min最小值, max 最大值, median中位数 }, - } + }, ], dataZoom: [ { -- Gitblit v1.9.2