瓦斯巡检统计分析

src/views/vent/gas/gasAnalysis/index.vue

@@ -13,7 +13,8 @@
                     </a-col>
                     <a-col :span="20">
                         <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-col>
                 </a-row>
@@ -21,7 +22,8 @@
             <div class="table-area">
                 <a-table :key="keyActive" :columns="columns"
                     :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 v-if="column.dataIndex == 'bc'">
                             <div :style="contentStyle">夜班</div>
@@ -57,30 +59,29 @@
                                 <div>{{ text[5] }}</div>
                             </div>
                         </template>
-                        <template
-                            v-if="column.dataIndex == 'ljxq'">
+                        <template v-if="column.dataIndex == 'ljxq'">
                             <div :style="contentStyle1">
                                 <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 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 :style="contentStyle1">
                                 <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 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 :style="contentStyle1">
                                 <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 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>
                         </template>
@@ -91,18 +92,18 @@
                         </template>
                     </template>
                     <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>
             </div>
             <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"
                         :datazoomShow="false">
                     </echartBox>
                 </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"
                         :typeV="typeV">
                     </echartBox>
@@ -118,10 +119,10 @@ import customHeader from '/@/components/vent/customHeader.vue';
 import echartBox from './components/echartBox.vue'
 import dayjs from 'dayjs';
 import { columns, pagination, } from './gasAnalysis.data'
-import { gasReportLogList,exportGasInsFx } from './gasAnalysis.api'
+import { gasReportLogList, exportGasInsFx } from './gasAnalysis.api'
 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 tableData = ref<any[]>([])
 let selectedRowKey = ref<any[]>(['1'])
@@ -156,18 +157,18 @@ let legendData1 = reactive({
 let xData1 = ref<any[]>([])
 let yDataL = ref<any[]>([])
 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选中数据切换
 let onSelectChange = (selectedRowKeys, selectedRows) => {
     console.log(`当前选中key: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-    selectedRowKey.value=selectedRowKeys
+    selectedRowKey.value = selectedRowKeys
     yDataY.value = selectedRows[0].yxjs
     yDataN.value = selectedRows[0].wxjs
 }
@@ -176,57 +177,56 @@ let onSelectChange = (selectedRowKeys, selectedRows) => {
 async function gasReportLogLists() {
     let res = await gasReportLogList({ reportTime: searchTime.value, pageNo: pagination.current, pageSize: pagination.pageSize })
     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
         tableData.value = res.records.map(el => {
-           el.key=el.id
+            el.key = el.id
             el.bc = '3'
             el.insType = '2'
             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.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.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]
-            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
         })
         pagination.total = res.total
-        selectedRowKey.value=[tableData.value[0].id]
+        selectedRowKey.value = [tableData.value[0].id]
         yDataY.value = tableData.value[0].yxjs
         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 = () => {
-    pagination.current=1
+    pagination.current = 1
     gasReportLogLists()
 }
 //重置
 let getReset = () => {
-    pagination.current=1
+    pagination.current = 1
     searchTime.value = dayjs().format('YYYY-MM-DD')
     gasReportLogLists()
 }
 //分页切换
-let pageChange=(val)=> {
+let pageChange = (val) => {
     pagination.current = val.current;
     pagination.pageSize = val.pageSize;
     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) {
-            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) {
     const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据