|
@@ -13,7 +13,8 @@
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :span="20">
|
|
<a-col :span="20">
|
|
<a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
|
|
<a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
|
|
- <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
|
|
|
|
|
|
+ <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px"
|
|
|
|
+ @click="getReset">重置</a-button>
|
|
<!-- <a-button type="primary" preIcon="ant-design:download-outlined" @click="downLoadFx">导出</a-button> -->
|
|
<!-- <a-button type="primary" preIcon="ant-design:download-outlined" @click="downLoadFx">导出</a-button> -->
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -21,7 +22,8 @@
|
|
<div class="table-area">
|
|
<div class="table-area">
|
|
<a-table :key="keyActive" :columns="columns"
|
|
<a-table :key="keyActive" :columns="columns"
|
|
:row-selection="{ selectedRowKeys: selectedRowKey, type: 'radio', onChange: onSelectChange }"
|
|
:row-selection="{ selectedRowKeys: selectedRowKey, type: 'radio', onChange: onSelectChange }"
|
|
- size="small" :data-source="tableData" :scroll="{ y: 470 }" class="tableW" :pagination="pagination" @change="pageChange">
|
|
|
|
|
|
+ size="small" :data-source="tableData" :scroll="{ y: 470 }" class="tableW" :pagination="pagination"
|
|
|
|
+ @change="pageChange">
|
|
<template #bodyCell="{ column, text }">
|
|
<template #bodyCell="{ column, text }">
|
|
<template v-if="column.dataIndex == 'bc'">
|
|
<template v-if="column.dataIndex == 'bc'">
|
|
<div :style="contentStyle">夜班</div>
|
|
<div :style="contentStyle">夜班</div>
|
|
@@ -57,30 +59,29 @@
|
|
<div>{{ text[5] }}</div>
|
|
<div>{{ text[5] }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- <template
|
|
|
|
- v-if="column.dataIndex == 'ljxq'">
|
|
|
|
|
|
+ <template v-if="column.dataIndex == 'ljxq'">
|
|
<div :style="contentStyle1">
|
|
<div :style="contentStyle1">
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[0]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[0]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[1]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[1]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :style="contentStyle1">
|
|
<div :style="contentStyle1">
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[2]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[2]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[3]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[3]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div :style="contentStyle1">
|
|
<div :style="contentStyle1">
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[4]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[4]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
- <div v-for="(item,index) in text[5]" :key="index">{{ item.address }}</div>
|
|
|
|
|
|
+ <div v-for="(item, index) in text[5]" :key="index">{{ item.address }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -91,18 +92,18 @@
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
<template #action="{ record }">
|
|
<template #action="{ record }">
|
|
- <a class="table-action-link" @click="downLoadFx(record)">导出</a>
|
|
|
|
-
|
|
|
|
- </template>
|
|
|
|
|
|
+ <a class="table-action-link" @click="downLoadFx(record)">导出</a>
|
|
|
|
+
|
|
|
|
+ </template>
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
<div class="echart-area">
|
|
<div class="echart-area">
|
|
- <div class="left-echart-area" v-if="yDataY.length!=0">
|
|
|
|
|
|
+ <div class="left-echart-area" v-if="yDataY.length != 0">
|
|
<echartBox :legendV="legendData" :xData="xData" :yData1="yDataY" :yData2="yDataN"
|
|
<echartBox :legendV="legendData" :xData="xData" :yData1="yDataY" :yData2="yDataN"
|
|
:datazoomShow="false">
|
|
:datazoomShow="false">
|
|
</echartBox>
|
|
</echartBox>
|
|
</div>
|
|
</div>
|
|
- <div class="right-echart-area" v-if="yDataL.length!=0">
|
|
|
|
|
|
+ <div class="right-echart-area" v-if="yDataL.length != 0">
|
|
<echartBox :legendV="legendData1" :xData="xData1" :yData1="yDataL" :datazoomShow="true"
|
|
<echartBox :legendV="legendData1" :xData="xData1" :yData1="yDataL" :datazoomShow="true"
|
|
:typeV="typeV">
|
|
:typeV="typeV">
|
|
</echartBox>
|
|
</echartBox>
|
|
@@ -118,10 +119,10 @@ import customHeader from '/@/components/vent/customHeader.vue';
|
|
import echartBox from './components/echartBox.vue'
|
|
import echartBox from './components/echartBox.vue'
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
import { columns, pagination, } from './gasAnalysis.data'
|
|
import { columns, pagination, } from './gasAnalysis.data'
|
|
-import { gasReportLogList,exportGasInsFx } from './gasAnalysis.api'
|
|
|
|
|
|
+import { gasReportLogList, exportGasInsFx } from './gasAnalysis.api'
|
|
import { message } from 'ant-design-vue';
|
|
import { message } from 'ant-design-vue';
|
|
|
|
|
|
-let keyActive=ref(0)
|
|
|
|
|
|
+let keyActive = ref(0)
|
|
let searchTime = ref(dayjs().format('YYYY-MM-DD'))//dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
let searchTime = ref(dayjs().format('YYYY-MM-DD'))//dayjs().format('YYYY-MM-DD HH:mm:ss')
|
|
let tableData = ref<any[]>([])
|
|
let tableData = ref<any[]>([])
|
|
let selectedRowKey = ref<any[]>(['1'])
|
|
let selectedRowKey = ref<any[]>(['1'])
|
|
@@ -156,18 +157,18 @@ let legendData1 = reactive({
|
|
let xData1 = ref<any[]>([])
|
|
let xData1 = ref<any[]>([])
|
|
let yDataL = ref<any[]>([])
|
|
let yDataL = ref<any[]>([])
|
|
let typeV = ref('line')
|
|
let typeV = ref('line')
|
|
-let styleNum=ref<any>(0)
|
|
|
|
|
|
+let styleNum = ref<any>(6)
|
|
|
|
|
|
-let contentStyle=computed(()=>{
|
|
|
|
- return {height:`${styleNum.value*8.5}px`,width:'100%',display:'flex','align-items':'center','justify-content':'center'}
|
|
|
|
|
|
+let contentStyle = computed(() => {
|
|
|
|
+ return { height: `${styleNum.value * 8.5}px`, width: '100%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }
|
|
})
|
|
})
|
|
-let contentStyle1=computed(()=>{
|
|
|
|
- return {height:`${styleNum.value*8.5}px`,display:'flex','flex-direction':'column', 'align-items':'center','justify-content':'space-around'}
|
|
|
|
|
|
+let contentStyle1 = computed(() => {
|
|
|
|
+ return { height: `${styleNum.value * 8.5}px`, display: 'flex', 'flex-direction': 'column', 'align-items': 'center', 'justify-content': 'space-around' }
|
|
})
|
|
})
|
|
//table选中数据切换
|
|
//table选中数据切换
|
|
let onSelectChange = (selectedRowKeys, selectedRows) => {
|
|
let onSelectChange = (selectedRowKeys, selectedRows) => {
|
|
console.log(`当前选中key: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
console.log(`当前选中key: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
- selectedRowKey.value=selectedRowKeys
|
|
|
|
|
|
+ selectedRowKey.value = selectedRowKeys
|
|
yDataY.value = selectedRows[0].yxjs
|
|
yDataY.value = selectedRows[0].yxjs
|
|
yDataN.value = selectedRows[0].wxjs
|
|
yDataN.value = selectedRows[0].wxjs
|
|
}
|
|
}
|
|
@@ -176,57 +177,56 @@ let onSelectChange = (selectedRowKeys, selectedRows) => {
|
|
async function gasReportLogLists() {
|
|
async function gasReportLogLists() {
|
|
let res = await gasReportLogList({ reportTime: searchTime.value, pageNo: pagination.current, pageSize: pagination.pageSize })
|
|
let res = await gasReportLogList({ reportTime: searchTime.value, pageNo: pagination.current, pageSize: pagination.pageSize })
|
|
console.log(res, '瓦斯巡检统计分析列表')
|
|
console.log(res, '瓦斯巡检统计分析列表')
|
|
- keyActive.value=new Date().getTime()
|
|
|
|
- if ( res.records.length != 0) {
|
|
|
|
|
|
+ keyActive.value = new Date().getTime()
|
|
|
|
+ if (res.records.length != 0) {
|
|
pagination.current = 1
|
|
pagination.current = 1
|
|
tableData.value = res.records.map(el => {
|
|
tableData.value = res.records.map(el => {
|
|
- el.key=el.id
|
|
|
|
|
|
+ el.key = el.id
|
|
el.bc = '3'
|
|
el.bc = '3'
|
|
el.insType = '2'
|
|
el.insType = '2'
|
|
el.xjzs = [el.totalNight1 || 0, el.totalNight2 || 0, el.totalEarly1 || 0, el.totalEarly2 || 0, el.totalNoon1 || 0, el.totalNoon2 || 0]
|
|
el.xjzs = [el.totalNight1 || 0, el.totalNight2 || 0, el.totalEarly1 || 0, el.totalEarly2 || 0, el.totalNoon1 || 0, el.totalNoon2 || 0]
|
|
el.yxjs = [el.finishNight1 || 0, el.finishNight2 || 0, el.finishEarly1 || 0, el.finishEarly2 || 0, el.finishNoon1 || 0, el.finishNoon2 || 0]
|
|
el.yxjs = [el.finishNight1 || 0, el.finishNight2 || 0, el.finishEarly1 || 0, el.finishEarly2 || 0, el.finishNoon1 || 0, el.finishNoon2 || 0]
|
|
el.wxjs = [el.missNight1 || 0, el.missNight2 || 0, el.missEarly1 || 0, el.missEarly2 || 0, el.missNoon1 || 0, el.missNoon2 || 0]
|
|
el.wxjs = [el.missNight1 || 0, el.missNight2 || 0, el.missEarly1 || 0, el.missEarly2 || 0, el.missNoon1 || 0, el.missNoon2 || 0]
|
|
el.ljv = [el.lossNight1 || 0, el.lossNight2 || 0, el.lossEarly1 || 0, el.lossEarly2 || 0, el.lossNoon1 || 0, el.lossNoon2 || 0]
|
|
el.ljv = [el.lossNight1 || 0, el.lossNight2 || 0, el.lossEarly1 || 0, el.lossEarly2 || 0, el.lossNoon1 || 0, el.lossNoon2 || 0]
|
|
- el.ljxq = [JSON.parse(el.detailsLossNight1) , JSON.parse(el.detailsLossNight2), JSON.parse(el.detailsLossEarly1), JSON.parse(el.detailsLossEarly2 ), JSON.parse(el.detailsLossNoon1), JSON.parse(el.detailsLossNoon2)]
|
|
|
|
|
|
+ el.ljxq = [JSON.parse(el.detailsLossNight1), JSON.parse(el.detailsLossNight2), JSON.parse(el.detailsLossEarly1), JSON.parse(el.detailsLossEarly2), JSON.parse(el.detailsLossNoon1), JSON.parse(el.detailsLossNoon2)]
|
|
el.bzljv = [el.totalLossNight || 0, el.totalLossEarly || 0, el.totalLossNoon || 0]
|
|
el.bzljv = [el.totalLossNight || 0, el.totalLossEarly || 0, el.totalLossNoon || 0]
|
|
- console.log(el.ljxq,'090')
|
|
|
|
- styleNum.value=[...JSON.parse(el.detailsLossNight1) , ...JSON.parse(el.detailsLossNight2), ...JSON.parse(el.detailsLossEarly1), ...JSON.parse(el.detailsLossEarly2 ), ...JSON.parse(el.detailsLossNoon1), ...JSON.parse(el.detailsLossNoon2)].length
|
|
|
|
|
|
+ // styleNum.value = [...JSON.parse(el.detailsLossNight1), ...JSON.parse(el.detailsLossNight2), ...JSON.parse(el.detailsLossEarly1), ...JSON.parse(el.detailsLossEarly2), ...JSON.parse(el.detailsLossNoon1), ...JSON.parse(el.detailsLossNoon2)].length
|
|
return el
|
|
return el
|
|
})
|
|
})
|
|
pagination.total = res.total
|
|
pagination.total = res.total
|
|
- selectedRowKey.value=[tableData.value[0].id]
|
|
|
|
|
|
+ selectedRowKey.value = [tableData.value[0].id]
|
|
yDataY.value = tableData.value[0].yxjs
|
|
yDataY.value = tableData.value[0].yxjs
|
|
yDataN.value = tableData.value[0].wxjs
|
|
yDataN.value = tableData.value[0].wxjs
|
|
- xData1.value=tableData.value.map(v=>v.reportTime)
|
|
|
|
- yDataL.value=tableData.value.map(m=>m.totalLossDay)
|
|
|
|
|
|
+ xData1.value = tableData.value.map(v => v.reportTime)
|
|
|
|
+ yDataL.value = tableData.value.map(m => m.totalLossDay)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//查询
|
|
//查询
|
|
let getSearch = () => {
|
|
let getSearch = () => {
|
|
- pagination.current=1
|
|
|
|
|
|
+ pagination.current = 1
|
|
gasReportLogLists()
|
|
gasReportLogLists()
|
|
}
|
|
}
|
|
//重置
|
|
//重置
|
|
let getReset = () => {
|
|
let getReset = () => {
|
|
- pagination.current=1
|
|
|
|
|
|
+ pagination.current = 1
|
|
searchTime.value = dayjs().format('YYYY-MM-DD')
|
|
searchTime.value = dayjs().format('YYYY-MM-DD')
|
|
gasReportLogLists()
|
|
gasReportLogLists()
|
|
}
|
|
}
|
|
//分页切换
|
|
//分页切换
|
|
-let pageChange=(val)=> {
|
|
|
|
|
|
+let pageChange = (val) => {
|
|
pagination.current = val.current;
|
|
pagination.current = val.current;
|
|
pagination.pageSize = val.pageSize;
|
|
pagination.pageSize = val.pageSize;
|
|
gasReportLogLists()
|
|
gasReportLogLists()
|
|
- }
|
|
|
|
|
|
+}
|
|
//导出
|
|
//导出
|
|
-async function downLoadFx(record){
|
|
|
|
- let res=await exportGasInsFx({id:record.id})
|
|
|
|
|
|
+async function downLoadFx(record) {
|
|
|
|
+ let res = await exportGasInsFx({ id: record.id })
|
|
if (res) {
|
|
if (res) {
|
|
- let filename = `${new Date().getTime()}.xlsx`;
|
|
|
|
- downFilePublic(res, filename);
|
|
|
|
- message.success('导出成功')
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
+ let filename = `${new Date().getTime()}.xlsx`;
|
|
|
|
+ downFilePublic(res, filename);
|
|
|
|
+ message.success('导出成功')
|
|
|
|
+ }
|
|
|
|
+}
|
|
// 下载公用方法
|
|
// 下载公用方法
|
|
function downFilePublic(content, fileName) {
|
|
function downFilePublic(content, fileName) {
|
|
const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|
|
const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
|