| | |
| | | </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> |
| | |
| | | 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: { |
| | |
| | | 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()) |
| | | |
| | |
| | | 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'), |
| | |
| | | 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; |
| | |
| | | //默认选择第一个气体 |
| | | state.tableData.listQuery.searchParams.gas = state.tableData.gasList[0].id; |
| | | markLines.value = state.tableData.gasList[0].threshold; |
| | | initInfoData(); |
| | | await initInfoData(); |
| | | |
| | | }else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | }); |
| | | } |
| | | }; |
| | | 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; |