瓦斯日报，公司端预警历史监控，设备预警监测界面及功能修改-提交

src/views/vent/gas/gasReport/gas-report.data.ts

@@ -4,15 +4,15 @@ export const columns: BasicColumn[] = [
     title: '瓦斯日报',
     children: [
       {
-        title: '早班',
+        title: '夜班',
         children: [
           {
             title: '第一次',
             children: [
               {
                 title: '区队',
-                dataIndex: 'districtTeam_dictText',
-                key: 'districtTeam_dictText',
+                dataIndex: 'districtTeam',
+                key: 'districtTeam',
                 width: 100,
                 align: 'center',
               },
@@ -25,72 +25,72 @@ export const columns: BasicColumn[] = [
               },
               {
                 title: '检查工',
-                dataIndex: 'checkPersonEarly',
-                key: 'checkPersonEarly',
+                dataIndex: 'checkPersonNight',
+                key: 'checkPersonNight',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '检测时间',
-                dataIndex: 'timeEarly1',
-                key: 'timeEarly1',
+                dataIndex: 'timeNight1',
+                key: 'timeNight1',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tEarly1',
-                key: 'tEarly1',
+                dataIndex: 'tNight1',
+                key: 'tNight1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzEarly1',
-                key: 'bxySdzEarly1',
+                dataIndex: 'bxySdzNight1',
+                key: 'bxySdzNight1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzEarly1',
-                key: 'gwSdzEarly1',
+                dataIndex: 'gwSdzNight1',
+                key: 'gwSdzNight1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzEarly1',
-                key: 'jwSdzEarly1',
+                dataIndex: 'jwSdzNight1',
+                key: 'jwSdzNight1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Early1',
-                key: 'ch4Early1',
+                dataIndex: 'ch4Night1',
+                key: 'ch4Night1',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Early1',
-                key: 'co2Early1',
+                dataIndex: 'co2Night1',
+                key: 'co2Night1',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coEarly1',
-                key: 'coEarly1',
-                width: 65,
+                dataIndex: 'coNight1',
+                key: 'coNight1',
+                width: 60,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Early1',
-                key: 'o2Early1',
+                dataIndex: 'o2Night1',
+                key: 'o2Night1',
                 width: 60,
                 align: 'center',
               },
@@ -101,65 +101,65 @@ export const columns: BasicColumn[] = [
             children: [
               {
                 title: '检测时间',
-                dataIndex: 'timeEarly2',
-                key: 'timeEarly2',
+                dataIndex: 'timeNight2',
+                key: 'timeNight2',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tEarly2',
-                key: 'tEarly2',
+                dataIndex: 'tNight2',
+                key: 'tNight2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzEarly2',
-                key: 'bxySdzEarly2',
+                dataIndex: 'bxySdzNight2',
+                key: 'bxySdzNight2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzEarly2',
-                key: 'gwSdzEarly2',
+                dataIndex: 'gwSdzNight2',
+                key: 'gwSdzNight2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzEarly2',
-                key: 'jwSdzEarly2',
+                dataIndex: 'jwSdzNight2',
+                key: 'jwSdzNight2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Early2',
-                key: 'ch4Early2',
+                dataIndex: 'ch4Night2',
+                key: 'ch4Night2',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Early2',
-                key: 'co2Early2',
+                dataIndex: 'co2Night2',
+                key: 'co2Night2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coEarly2',
-                key: 'coEarly2',
+                dataIndex: 'coNight2',
+                key: 'coNight2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Early2',
-                key: 'o2Early2',
+                dataIndex: 'o2Night2',
+                key: 'o2Night2',
                 width: 60,
                 align: 'center',
               },
@@ -168,15 +168,15 @@ export const columns: BasicColumn[] = [
         ],
       },
       {
-        title: '午班',
+        title: '早班',
         children: [
           {
             title: '第一次',
             children: [
               {
                 title: '区队',
-                dataIndex: 'districtTeam',
-                key: 'districtTeam',
+                dataIndex: 'districtTeam_dictText',
+                key: 'districtTeam_dictText',
                 width: 100,
                 align: 'center',
               },
@@ -189,72 +189,72 @@ export const columns: BasicColumn[] = [
               },
               {
                 title: '检查工',
-                dataIndex: 'checkPersonNoon',
-                key: 'checkPersonNoon',
+                dataIndex: 'checkPersonEarly',
+                key: 'checkPersonEarly',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '检测时间',
-                dataIndex: 'timeNoon1',
-                key: 'timeNoon1',
+                dataIndex: 'timeEarly1',
+                key: 'timeEarly1',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tNoon1',
-                key: 'tNoon1',
+                dataIndex: 'tEarly1',
+                key: 'tEarly1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzNoon1',
-                key: 'bxySdzNoon1',
+                dataIndex: 'bxySdzEarly1',
+                key: 'bxySdzEarly1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzNoon1',
-                key: 'gwSdzNoon1',
+                dataIndex: 'gwSdzEarly1',
+                key: 'gwSdzEarly1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzNoon1',
-                key: 'jwSdzNoon1',
+                dataIndex: 'jwSdzEarly1',
+                key: 'jwSdzEarly1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Noon1',
-                key: 'ch4Noon1',
+                dataIndex: 'ch4Early1',
+                key: 'ch4Early1',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Noon1',
-                key: 'co2Noon1',
+                dataIndex: 'co2Early1',
+                key: 'co2Early1',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coNoon1',
-                key: 'coNoon1',
-                width: 60,
+                dataIndex: 'coEarly1',
+                key: 'coEarly1',
+                width: 65,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Noon1',
-                key: 'o2Noon1',
+                dataIndex: 'o2Early1',
+                key: 'o2Early1',
                 width: 60,
                 align: 'center',
               },
@@ -265,65 +265,65 @@ export const columns: BasicColumn[] = [
             children: [
               {
                 title: '检测时间',
-                dataIndex: 'timeNoon2',
-                key: 'timeNoon2',
+                dataIndex: 'timeEarly2',
+                key: 'timeEarly2',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tNoon2',
-                key: 'tNoon2',
+                dataIndex: 'tEarly2',
+                key: 'tEarly2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzNoon2',
-                key: 'bxySdzNoon2',
+                dataIndex: 'bxySdzEarly2',
+                key: 'bxySdzEarly2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzNoon2',
-                key: 'gwSdzNoon2',
+                dataIndex: 'gwSdzEarly2',
+                key: 'gwSdzEarly2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzNoon2',
-                key: 'jwSdzNoon2',
+                dataIndex: 'jwSdzEarly2',
+                key: 'jwSdzEarly2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Noon2',
-                key: 'ch4Noon2',
+                dataIndex: 'ch4Early2',
+                key: 'ch4Early2',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Noon2',
-                key: 'co2Noon2',
+                dataIndex: 'co2Early2',
+                key: 'co2Early2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coNoon2',
-                key: 'coNoon2',
+                dataIndex: 'coEarly2',
+                key: 'coEarly2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Noon2',
-                key: 'o2Noon2',
+                dataIndex: 'o2Early2',
+                key: 'o2Early2',
                 width: 60,
                 align: 'center',
               },
@@ -332,7 +332,7 @@ export const columns: BasicColumn[] = [
         ],
       },
       {
-        title: '晚班',
+        title: '中班',
         children: [
           {
             title: '第一次',
@@ -353,72 +353,72 @@ export const columns: BasicColumn[] = [
               },
               {
                 title: '检查工',
-                dataIndex: 'checkPersonNight',
-                key: 'checkPersonNight',
+                dataIndex: 'checkPersonNoon',
+                key: 'checkPersonNoon',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '检测时间',
-                dataIndex: 'timeNight1',
-                key: 'timeNight1',
+                dataIndex: 'timeNoon1',
+                key: 'timeNoon1',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tNight1',
-                key: 'tNight1',
+                dataIndex: 'tNoon1',
+                key: 'tNoon1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzNight1',
-                key: 'bxySdzNight1',
+                dataIndex: 'bxySdzNoon1',
+                key: 'bxySdzNoon1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzNight1',
-                key: 'gwSdzNight1',
+                dataIndex: 'gwSdzNoon1',
+                key: 'gwSdzNoon1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzNight1',
-                key: 'jwSdzNight1',
+                dataIndex: 'jwSdzNoon1',
+                key: 'jwSdzNoon1',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Night1',
-                key: 'ch4Night1',
+                dataIndex: 'ch4Noon1',
+                key: 'ch4Noon1',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Night1',
-                key: 'co2Night1',
+                dataIndex: 'co2Noon1',
+                key: 'co2Noon1',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coNight1',
-                key: 'coNight1',
+                dataIndex: 'coNoon1',
+                key: 'coNoon1',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Night1',
-                key: 'o2Night1',
+                dataIndex: 'o2Noon1',
+                key: 'o2Noon1',
                 width: 60,
                 align: 'center',
               },
@@ -429,65 +429,65 @@ export const columns: BasicColumn[] = [
             children: [
               {
                 title: '检测时间',
-                dataIndex: 'timeNight2',
-                key: 'timeNight2',
+                dataIndex: 'timeNoon2',
+                key: 'timeNoon2',
                 width: 100,
                 align: 'center',
               },
               {
                 title: '温度',
-                dataIndex: 'tNight2',
-                key: 'tNight2',
+                dataIndex: 'tNoon2',
+                key: 'tNoon2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '便携仪',
-                dataIndex: 'bxySdzNight2',
-                key: 'bxySdzNight2',
+                dataIndex: 'bxySdzNoon2',
+                key: 'bxySdzNoon2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '光瓦',
-                dataIndex: 'gwSdzNight2',
-                key: 'gwSdzNight2',
+                dataIndex: 'gwSdzNoon2',
+                key: 'gwSdzNoon2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: '甲烷传感器',
-                dataIndex: 'jwSdzNight2',
-                key: 'jwSdzNight2',
+                dataIndex: 'jwSdzNoon2',
+                key: 'jwSdzNoon2',
                 width: 80,
                 align: 'center',
               },
               {
                 title: 'CH4(%)',
-                dataIndex: 'ch4Night2',
-                key: 'ch4Night2',
+                dataIndex: 'ch4Noon2',
+                key: 'ch4Noon2',
                 width: 60,
                 align: 'center',
               },
 
               {
                 title: 'CO2(%)',
-                dataIndex: 'co2Night2',
-                key: 'co2Night2',
+                dataIndex: 'co2Noon2',
+                key: 'co2Noon2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'CO(ppm)',
-                dataIndex: 'coNight2',
-                key: 'coNight2',
+                dataIndex: 'coNoon2',
+                key: 'coNoon2',
                 width: 60,
                 align: 'center',
               },
               {
                 title: 'o2(%)',
-                dataIndex: 'o2Night2',
-                key: 'o2Night2',
+                dataIndex: 'o2Noon2',
+                key: 'o2Noon2',
                 width: 60,
                 align: 'center',
               },

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

@@ -4,41 +4,46 @@
     <div class="report-container">
       <div class="search-area">
         <a-row>
-          <a-col :span="5">
+          <a-col :span="4">
             <div class="area-item">
               <div class="item-text">填报日期：</div>
-              <a-date-picker style="width: 220px" v-model="searchData.reportTime" placeholder="请选择填报日期" @change="onChange" />
+              <a-date-picker style="width: 220px" :showTime="false" valueFormat="YYYY-MM-DD"
+                v-model:value="searchData.reportTime" placeholder="请选择填报日期" @change="onChange" />
             </div>
           </a-col>
-          <a-col :span="5">
+          <a-col :span="4">
             <div class="area-item">
               <div class="item-text">区队：</div>
               <a-select v-model:value="searchData.districtTeam" style="width: 220px" placeholder="请选择区队">
-                <a-select-option v-for="item in qdList" :key="item" :value="item.value">{{ item.label }}</a-select-option>
+                <a-select-option v-for="item in qdList" :key="item" :value="item.value">{{ item.label
+                  }}</a-select-option>
               </a-select>
             </div>
           </a-col>
-          <a-col :span="5">
+          <a-col :span="4">
             <div class="area-item">
               <div class="item-text">上报人：</div>
               <a-input style="width: 220px" v-model:value="searchData.sbr" placeholder="请输入上报人" />
             </div>
           </a-col>
-          <a-col :span="5">
+          <a-col :span="4">
             <div class="area-item">
               <div class="item-text">上报地点：</div>
               <a-select v-model:value="searchData.strInstallPos" style="width: 220px" placeholder="请选择上报地点">
-                <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{ item.label }}</a-select-option>
+                <a-select-option v-for="item in addressList" :key="item" :value="item.value">{{ item.label
+                  }}</a-select-option>
               </a-select>
             </div>
           </a-col>
 
           <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="onReset">重置</a-button>
-          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport">导出</a-button>
+          <a-button type="primary" preIcon="ant-design:download-outlined" @click="getExport">导出报表</a-button>
+          <a-button type="primary" preIcon="ant-design:download-outlined"  @click="getExport1" style="margin: 0px 15px">导出瓦斯三对照报表</a-button>
         </a-row>
       </div>
-      <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="pagination" @change="pageChange">
+      <a-table :columns="columns" :data-source="tableData" :scroll="{ y: 500 }" class="tableW" :pagination="pagination"
+        @change="pageChange">
         <template #bodyCell="{ column, text }"></template>
       </a-table>
     </div>
@@ -46,165 +51,177 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, computed, reactive } from 'vue';
-  import { columns } from './gas-report.data';
-  import { getGasAddressList, getList, expComReportByParam } from './gas-report.api';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  import { message } from 'ant-design-vue';
+import { ref, onMounted, computed, reactive } from 'vue';
+import { columns } from './gas-report.data';
+import { getGasAddressList, getList, expComReportByParam } from './gas-report.api';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
-  let searchData = reactive({
-    reportTime: '',
-    districtTeam: '',
-    sbr: '',
-    strInstallPos: '',
-  });
-  let qdList = reactive<any[]>([]); //区队下拉列表
-  let addressList = reactive<any[]>([]); //上报地点下拉列表
-  let pagination = reactive({
-    current: 1, // 当前页码
-    pageSize: 10, // 每页显示条数
-    total: 0, // 总条目数，后端返回
-    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
-    showSizeChanger: true, // 是否可改变每页显示条数
-    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
-  });
-  let tableData = ref<any[]>([]);
+let searchData = reactive({
+  reportTime: dayjs().format('YYYY-MM-DD'),
+  districtTeam: '',
+  sbr: '',
+  strInstallPos: '',
+});
+let qdList = reactive<any[]>([]); //区队下拉列表
+let addressList = reactive<any[]>([]); //上报地点下拉列表
+let pagination = reactive({
+  current: 1, // 当前页码
+  pageSize: 10, // 每页显示条数
+  total: 0, // 总条目数，后端返回
+  // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+  showSizeChanger: true, // 是否可改变每页显示条数
+  pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+});
+let tableData = ref<any[]>([]);
 
-  function onChange(val, time) {
-    searchData.reportTime = time;
-  }
-  //获取日报列表数据
-  async function getTableList() {
-    let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData });
-    console.log(res, '瓦斯日报列表数据-----------');
-    tableData.value = res.records;
-    pagination.total = res.total;
-  }
-  //查询
-  function getSearch() {
-    pagination.current = 1;
-    getTableList();
-  }
-  //重置
-  function onReset() {
-    pagination.current = 1;
-    searchData.districtTeam = '';
-    searchData.reportTime = '';
-    searchData.strInstallPos = '';
-    searchData.sbr = '';
-    getTableList();
-  }
-  //分页切换
-  function pageChange(val) {
-    pagination.current = val.current;
-    pagination.pageSize = val.pageSize;
-    getTableList();
-  }
-  function uniqueObjectsArray(arr) {
-    const map = new Map();
-    return arr.filter((item) => {
-      const key = JSON.stringify(item);
-      const isNew = !map.has(key);
-      map.set(key, item);
-      return isNew;
+function onChange(val, time) {
+  searchData.reportTime = time;
+}
+//获取日报列表数据
+async function getTableList() {
+  let res = await getList({ pageNo: pagination.current, pageSize: pagination.pageSize, ...searchData });
+  console.log(res, '瓦斯日报列表数据-----------');
+  tableData.value = res.records;
+  pagination.total = res.total;
+}
+//查询
+function getSearch() {
+  pagination.current = 1;
+  getTableList();
+}
+//重置
+function onReset() {
+  pagination.current = 1;
+  searchData.districtTeam = '';
+  searchData.reportTime = '';
+  searchData.strInstallPos = '';
+  searchData.sbr = '';
+  getTableList();
+}
+//分页切换
+function pageChange(val) {
+  pagination.current = val.current;
+  pagination.pageSize = val.pageSize;
+  getTableList();
+}
+function uniqueObjectsArray(arr) {
+  const map = new Map();
+  return arr.filter((item) => {
+    const key = JSON.stringify(item);
+    const isNew = !map.has(key);
+    map.set(key, item);
+    return isNew;
+  });
+}
+//获取安装位置下拉选项
+async function getSelectList() {
+  let res = await getGasAddressList({ devicekind: 'gasDayReport' });
+  console.log(res, '区队下拉选项--------');
+  qdList.length = 0;
+  addressList.length = 0;
+  if (res.length != 0) {
+    res.forEach((el) => {
+      qdList.push({ label: el.devgroup_dictText, value: el.devgroup_dictText });
+      addressList.push({ label: el.strinstallpos, value: el.strinstallpos });
     });
+    qdList = uniqueObjectsArray(qdList);
   }
-  //获取安装位置下拉选项
-  async function getSelectList() {
-    let res = await getGasAddressList({ devicekind: 'gasDayReport' });
-    console.log(res, '区队下拉选项--------');
-    qdList.length = 0;
-    addressList.length = 0;
-    if (res.length != 0) {
-      res.forEach((el) => {
-        qdList.push({ label: el.devgroup_dictText, value: el.devgroup_dictText });
-        addressList.push({ label: el.strinstallpos, value: el.strinstallpos });
-      });
-      qdList = uniqueObjectsArray(qdList);
-    }
+}
+//导出报表
+async function getExport() {
+  if (searchData.reportTime) {
+    let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime });
+    console.log(res, '导出------------');
+    let filename = searchData.reportTime + '.xlsx';
+    downFilePublic(res, filename);
+  } else {
+    message.warning('请选择需要导出数据的填报日期!');
   }
-  //导出
-  async function getExport() {
-    if (searchData.reportTime) {
-      let res = await expComReportByParam({ tempName: 'wsrb', reportTime: searchData.reportTime });
-      console.log(res, '导出------------');
-      let filename = searchData.reportTime + '.xlsx';
-      downFilePublic(res, filename);
-    } else {
-      message.warning('请选择需要导出数据的填报日期!');
-    }
+}
+//导出三对照报表
+async function getExport1() {
+  if (searchData.reportTime) {
+    let res = await expComReportByParam({ tempName: 'wssdz', reportTime: searchData.reportTime });
+    console.log(res, '导出------------');
+    let filename = searchData.reportTime + '.xlsx';
+    downFilePublic(res, filename);
+  } else {
+    message.warning('请选择需要导出数据的填报日期!');
   }
+}
 
-  // 下载公用方法
-  function downFilePublic(content, fileName) {
-    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-    // IE10以上支持blob但是依然不支持download
-    if ('download' in document.createElement('a')) {
-      // 支持a标签download的浏览器
-      const link = document.createElement('a'); // 创建a标签
-      link.download = fileName; // a标签添加属性
-      link.style.display = 'none';
-      link.href = URL.createObjectURL(blob);
-      document.body.appendChild(link);
-      link.click(); // 执行下载
-      URL.revokeObjectURL(link.href); // 释放url
-      document.body.removeChild(link); // 释放标签
-    } else {
-      // 其他浏览器
-      navigator.msSaveBlob(blob, fileName);
-    }
+// 下载公用方法
+function downFilePublic(content, fileName) {
+  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+  // IE10以上支持blob但是依然不支持download
+  if ('download' in document.createElement('a')) {
+    // 支持a标签download的浏览器
+    const link = document.createElement('a'); // 创建a标签
+    link.download = fileName; // a标签添加属性
+    link.style.display = 'none';
+    link.href = URL.createObjectURL(blob);
+    document.body.appendChild(link);
+    link.click(); // 执行下载
+    URL.revokeObjectURL(link.href); // 释放url
+    document.body.removeChild(link); // 释放标签
+  } else {
+    // 其他浏览器
+    navigator.msSaveBlob(blob, fileName);
   }
+}
 
-  onMounted(() => {
-    getSelectList();
-    getTableList();
-  });
+onMounted(() => {
+  getSelectList();
+  getTableList();
+});
 </script>
 
 <style lang="less" scoped>
-  .gasReport {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-    position: relative;
+.gasReport {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+  position: relative;
 
-    .search-area {
-      margin: 20px 0px;
+  .search-area {
+    margin: 20px 0px;
 
-      .area-item {
-        display: flex;
-        align-items: center;
+    .area-item {
+      display: flex;
+      align-items: center;
 
-        .item-text {
-          color: #fff;
-        }
+      .item-text {
+        color: #fff;
       }
     }
-
-    .zxm-picker,
-    .zxm-input {
-      border: 1px solid #3ad8ff77 !important;
-      background-color: #ffffff00 !important;
-      color: #fff !important;
-    }
-  }
-
-  :deep(.zxm-table-thead > tr > th:last-child) {
-    border-right: 1px solid #91e9fe !important;
-  }
-
-  :deep(.zxm-picker-input > input) {
-    color: #fff;
   }
 
-  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  .zxm-picker,
+  .zxm-input {
     border: 1px solid #3ad8ff77 !important;
     background-color: #ffffff00 !important;
-  }
-
-  :deep(.zxm-select-selection-item) {
     color: #fff !important;
   }
+}
+
+:deep(.zxm-table-thead > tr > th:last-child) {
+  border-right: 1px solid #91e9fe !important;
+}
+
+:deep(.zxm-picker-input > input) {
+  color: #fff;
+}
+
+:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+  border: 1px solid #3ad8ff77 !important;
+  background-color: #ffffff00 !important;
+}
+
+:deep(.zxm-select-selection-item) {
+  color: #fff !important;
+}
 </style>

src/views/vent/monitorManager/deviceMonitorWarn/deviceMonitorWarn.api.ts

@@ -0,0 +1,11 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  totalList = '/safety/ventanalyAlarmLog/total',
+  getAlarmLogList = '/ventanaly-device/monitor/groupCompany/getAlarmLogList', //获取各矿预警统计信息
+}
+
+
+//预警列表接口
+export const getTotalList = (params) => defHttp.get({ url: Api.totalList, params });
+export const getAlarmLogList = (params) => defHttp.post({ url: Api.getAlarmLogList, params });

src/views/vent/monitorManager/deviceMonitorWarn/index.vue

@@ -0,0 +1,523 @@
+<template>
+    <div class="deviceMonitorWarn">
+        <customHeader>设备监测预警</customHeader>
+        <div class="content">
+            <div class="left-box">
+                <div class="left-box-content">
+                    <div :class="activeIndex == index ? 'card-box1' : 'card-box'" v-for="(item, index) in cardList"
+                        :key="index" @click="cardClick(item, index)">
+                        <div class="card-item">
+                            <div class="item-title">
+                                {{ item.title }}
+                            </div>
+                            <div class="item-sum">
+                                <span>总数：</span>
+                                <span> {{ item.sumVal }}</span>
+                            </div>
+                            <div class="item-warn">
+                                <span>报警数：</span>
+                                <span> {{ item.warnVal }}</span>
+
+                            </div>
+                            <div class="item-close">
+                                <span>断开数：</span>
+                                <span> {{ item.closeVal }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right-box">
+                <div class="right-box-content">
+                    <div class="alarm-history-table">
+                        <BasicTable ref="alarmHistory" @register="registerTable"
+                            :scroll="{ x: 0, y: 590 }">
+                            <template #form-onExportXls>
+                                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()">
+                                    导出</a-button>
+                            </template>
+                        </BasicTable>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { getTotalList,getAlarmLogList } from './deviceMonitorWarn.api'
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+
+const props = defineProps({
+    formConfig: {
+        type: Object as PropType<FormProps> | undefined,
+        default: undefined,
+    },
+});
+
+let activeIndex = ref(0)
+let cardList = reactive<any[]>([
+    { name: 'fanmain', title: '主风机', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'fanlocal', title: '局部风机', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'gate', title: '风门', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'window', title: '风窗', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'windrect', title: '测风装置', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'forcFan', title: '压风装置', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'spray', title: '喷淋', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'dustdev', title: '喷粉', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'nitrogen', title: '注氮', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'pulping', title: '注浆', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'atomizing', title: '跟机喷雾', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'dustsensor', title: '除尘器', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'gas', title: '瓦斯抽采管路', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'pump', title: '瓦斯泵', sumVal: 0, warnVal: 0, closeVal: 0 },
+    { name: 'modelsensor', title: '传感器', sumVal: 0, warnVal: 0, closeVal: 0 },
+])
+const deviceColumns = getTableHeaderColumns('alarm_history') as [];
+const dataColumns = ref(deviceColumns);
+// 列表页面公共参数、方法
+const { tableContext, onExportXls } = useListPage({
+    tableProps: {
+      api: getAlarmLogList,
+      columns: dataColumns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        actionColOptions: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
+        schemas: [
+          {
+            label: '是否解决',
+            // field: 'isok',
+            field: 'isOk',
+            defaultValue: false,
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '未解决',
+                  value: false,
+                },
+                {
+                  label: '已解决',
+                  value: true,
+                },
+              ],
+            },
+            colProps: { span: 8, },
+          },
+          {
+            label: '所属系统',
+            // field: 'kindtype',systemType
+            field: 'systemType',
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '通风',
+                  value: 'ventS',
+                },
+                {
+                  label: '防灭火',
+                  value: 'fireS',
+                },
+                {
+                  label: '防尘',
+                  value: 'dustS',
+                },
+                {
+                  label: '瓦斯',
+                  value: 'gasS',
+                },
+              ],
+            },
+            colProps: { span: 8 },
+          },
+          {
+            label: '设备类型',
+            field: 'deviceKind',
+            component: 'MTreeSelect',
+            componentProps: {
+              virtual: false,
+            },
+            colProps: { span: 8 },
+          },
+          {
+            field: 'starttime',
+            label: '开始时间',
+            component: 'DatePicker',
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 8,
+            },
+          },
+          // {
+          //   field: 'endtime',
+          //   label: '结束时间',
+          //   component: 'DatePicker',
+          //   componentProps: {
+          //     showTime: true,
+          //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+          //     getPopupContainer: getAutoScrollContainer,
+          //   },
+          //   colProps: {
+          //     span: 4,
+          //   },
+          // },
+        ],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100'],
+      },
+      beforeFetch(params) {
+        if (!params['deviceKind']) {
+          params['deviceKind'] = null;
+        }
+        return params;
+      },
+    },
+    exportConfig: {
+      name: '预警历史列表',
+      url: '/safety/ventanalyAlarmLog/exportXls',
+    },
+  });
+  //注册table数据
+  const [registerTable, { reload, setLoading, getForm }] = tableContext;
+
+//选项切换
+function cardClick(item, index) {
+    activeIndex.value = index
+}
+//获取左侧选项数据
+async function getDeviceCard() {
+    let res = await getTotalList({})
+    console.log(res, '左侧选项数据----------')
+    cardList.forEach(el => {
+        if (res.info.devicekindInfo[el.name]) {
+            el.sumVal = res.info.devicekindInfo[el.name].totalcount || 0
+            el.warnVal = res.info.devicekindInfo[el.name].count || 0
+            el.closeVal = res.info.devicekindInfo[el.name].netstatus || 0
+        }
+    })
+}
+
+onMounted(() => {
+    getDeviceCard()
+})
+defineExpose({ setLoading });
+
+
+</script>
+
+<style lang="less" scoped>
+.deviceMonitorWarn {
+    width: calc(100% - 20px);
+    height: calc(100% - 90px);
+    position: relative;
+    margin: 80px 10px 10px 10px;
+
+    .content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .left-box {
+            width: 45%;
+            height: 100%;
+            // margin-right: 15px;
+            padding: 10px;
+            box-sizing: border-box;
+            // background: url('@/assets/images/fire/bj1.png') no-repeat center;
+            // background-size: 100% 100%;
+
+            .left-box-content {
+                height: 100%;
+                display: flex;
+                justify-content: flex-start;
+                align-items: flex-start;
+                flex-wrap: wrap;
+                overflow-y: auto;
+
+                .card-box {
+                    width: 265px;
+                    height: 112px;
+                    margin: 0px 5px;
+
+                    &:nth-child(1) {
+                        background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(2) {
+                        background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(3) {
+                        background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(4) {
+                        background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(5) {
+                        background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(6) {
+                        background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(7) {
+                        background: url('../../../../assets/images/device/penling.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(8) {
+                        background: url('../../../../assets/images/device/penfen.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(9) {
+                        background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(10) {
+                        background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(11) {
+                        background: url('../../../../assets/images/device/penwu.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(12) {
+                        background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(13) {
+                        background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(14) {
+                        background: url('../../../../assets/images/device/wsb.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(15) {
+                        background: url('../../../../assets/images/device/cgq.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    .card-item {
+                        position: relative;
+                        width: 100%;
+                        height: 100%;
+                        color: #fff;
+
+                        .item-title {
+                            position: absolute;
+                            left: 130px;
+                            top: 20px;
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #01fefc;
+                        }
+
+                        .item-sum {
+                            position: absolute;
+                            left: 130px;
+                            top: 40px;
+                        }
+
+                        .item-warn {
+                            position: absolute;
+                            left: 130px;
+                            top: 60px;
+                        }
+
+                        .item-close {
+                            position: absolute;
+                            left: 130px;
+                            top: 80px;
+                        }
+                    }
+                }
+
+                .card-box1 {
+                    width: 265px;
+                    height: 112px;
+                    margin: 0px 5px;
+
+                    &:nth-child(1) {
+                        background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(2) {
+                        background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(3) {
+                        background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(4) {
+                        background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(5) {
+                        background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(6) {
+                        background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(7) {
+                        background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(8) {
+                        background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(9) {
+                        background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(10) {
+                        background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(11) {
+                        background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(12) {
+                        background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(13) {
+                        background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(14) {
+                        background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    &:nth-child(15) {
+                        background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
+                        background-size: 100% 100%;
+                    }
+
+                    .card-item {
+                        position: relative;
+                        width: 100%;
+                        height: 100%;
+                        color: #fff;
+
+                        .item-title {
+                            position: absolute;
+                            left: 130px;
+                            top: 20px;
+                            font-size: 12px;
+                            font-family: 'douyuFont';
+                            color: #01fefc;
+                        }
+
+                        .item-sum {
+                            position: absolute;
+                            left: 130px;
+                            top: 40px;
+                        }
+
+                        .item-warn {
+                            position: absolute;
+                            left: 130px;
+                            top: 60px;
+                        }
+
+                        .item-close {
+                            position: absolute;
+                            left: 130px;
+                            top: 80px;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        .right-box {
+            width: 55%;
+            height: 100%;
+            background: url('../../../../assets/images/fire/border.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .right-box-content {
+                height: 100%;
+
+                .alarm-history-table {
+                    width: 100%;
+                    position: relative;
+
+                    &::after {
+                        position: absolute;
+                        content: '';
+                        width: calc(100% + 10px);
+                        height: 2px;
+                        top: 0px;
+                        left: -10px;
+                        border-bottom: 1px solid #0efcff44;
+                    }
+                }
+            }
+
+        }
+    }
+}
+</style>

src/views/vent/monitorManager/warningMonitor/alarm.data.ts

@@ -42,3 +42,44 @@ export const manageAutoColumns: BasicColumn[] = [
     align: 'center',
   },
 ];
+export const manageAutoColumns1: BasicColumn[] = [
+  {
+    title: '预警名称',
+    dataIndex: 'alarmName',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '报警等级',
+    dataIndex: 'alarmLevel',
+    customRender: ({ record }) => {
+      return render.renderDict(record.alarmLevel, 'leveltype');
+    },
+    width: 100,
+    align: 'center',
+  },
+   {
+    title: '报警描述',
+    dataIndex: 'autoContent',
+    width: 210,
+    align: 'center',
+  },
+  {
+    title: '报警开始时间',
+    dataIndex: 'starttime',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '报警结束时间',
+    dataIndex: 'endtime',
+    width: 100,
+    align: 'center',
+  },
+  {
+    title: '是否解决',
+    dataIndex: 'isok_dictText',
+    width: 50,
+    align: 'center',
+  },
+];

src/views/vent/monitorManager/warningMonitor/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <customHeader>预警历史监控系统</customHeader>
   <div class="data-statistics">
     <div class="statistics-box" v-for="(item, index) in statisticsList" :key="index">
       <div class="left-box">
@@ -9,15 +10,25 @@
           <div class="text-label">监测数量</div>
           <div class="text-value">{{ item.valueT }}</div>
         </div>
-        <div class="box-text">
+        <div class="warning-state box-text">
           <div class="text-label">预警状态</div>
           <div class="text-value">{{ item.valueB }}</div>
         </div>
       </div>
     </div>
   </div>
+  <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
+    <a-tab-pane tab="设备预警历史" key="device" />
+    <a-tab-pane tab="联动预警历史" key="manageAuto" />
+  </a-tabs>
   <div class="alarm-history-table">
-    <BasicTable ref="alarmHistory" @register="registerTable">
+    <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
+      <template #form-onExportXls>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+      </template>
+    </BasicTable>
+    <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable"
+      :scroll="{ x: 0, y: 350 }">
       <template #form-onExportXls>
         <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
       </template>
@@ -26,362 +37,421 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-  //ts语法
-  import { watch, ref, defineExpose, inject, onMounted, reactive } from 'vue';
-  import { BasicTable } from '/@/components/Table';
-  import { useListPage } from '/@/hooks/system/useListPage';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { defHttp } from '/@/utils/http/axios';
-  import dayjs from 'dayjs';
-  import { getAutoScrollContainer } from '/@/utils/common/compUtils';
-  import { list, getEachMineWarnCountInfo } from './warning.api';
-  import { useGlobSetting } from '/@/hooks/setting';
-  import { useRoute } from 'vue-router';
-
-  const props = defineProps({
-    deviceListApi: {
-      type: Function,
-    },
-    designScope: {
-      type: String,
-    },
-    sysId: {
-      type: String,
-    },
-    list: {
-      type: Function,
-      default: (params) => defHttp.post({ url: '/ventanaly-company/company/index/getEachMineWarnLogList', params }),
-    },
-  });
-  const route = useRoute();
-  let orgcode = '';
-  let statisticsList = reactive<any[]>([
-    { title: '通风', valueT: 0, valueB: '' },
-    { title: '粉尘', valueT: 0, valueB: '' },
-    { title: '瓦斯', valueT: 0, valueB: '' },
-    { title: '火灾', valueT: 0, valueB: '' },
-    { title: '安全监测', valueT: 0, valueB: '' },
-  ]);
-  const alarmHistory = ref();
-  const columns = getTableHeaderColumns('alarm_history');
-
-  // 列表页面公共参数、方法
-  const { tableContext, onExportXls } = useListPage({
-    tableProps: {
-      api: list,
-      columns: columns,
-      canResize: true,
-      showTableSetting: false,
-      showActionColumn: false,
-      bordered: false,
-      size: 'small',
-      formConfig: {
-        labelAlign: 'left',
-        showAdvancedButton: false,
-        // autoAdvancedCol: 2,
-        schemas: [
-          {
-            label: '是否解决',
-            // field: 'isok',
-            field: 'isOk',
-            component: 'Select',
-            componentProps: {
-              options: [
-                {
-                  label: '未解决',
-                  value: '0',
-                },
-                {
-                  label: '已解决',
-                  value: '1',
-                },
-              ],
-            },
-            colProps: { span: 4 },
+//ts语法
+import { watch, ref, defineExpose, onMounted, reactive } from 'vue';
+import { BasicTable } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+import { manageAutoColumns1 } from './alarm.data';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+import { list, getEachMineWarnCountInfo } from './warning.api';
+import { useRoute } from 'vue-router';
+import customHeader from '/@/components/vent/customHeader.vue';
+const props = defineProps({
+  formConfig: {
+    type: Object as PropType<FormProps> | undefined,
+    default: undefined,
+  },
+});
+const route = useRoute();
+let statisticsList = reactive<any[]>([
+  { title: '通风', valueT: 0, valueB: '' },
+  { title: '粉尘', valueT: 0, valueB: '' },
+  { title: '瓦斯', valueT: 0, valueB: '' },
+  { title: '火灾', valueT: 0, valueB: '' },
+  { title: '安全监测', valueT: 0, valueB: '' },
+]);
+const activeKey = ref('device');
+const alarmHistory = ref();
+const deviceColumns = getTableHeaderColumns('alarm_history') as [];
+const dataColumns = ref(deviceColumns);
+const paramType = ref('alarmLog')
+
+// 列表页面公共参数、方法
+const { tableContext, onExportXls } = useListPage({
+  tableProps: {
+    api: list,
+    columns: dataColumns,
+    canResize: true,
+    showTableSetting: false,
+    showActionColumn: false,
+    bordered: false,
+    size: 'small',
+    formConfig: {
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      // autoAdvancedCol: 4,
+      // labelWidth:50,
+      schemas: [
+        {
+          label: '是否解决',
+          field: 'isOk',
+          defaultValue: false,
+          component: 'Select',
+          componentProps: {
+            options: [
+              {
+                label: '未解决',
+                value: false,
+              },
+              {
+                label: '已解决',
+                value: true,
+              },
+            ],
           },
-          {
-            label: '所属系统',
-            // field: 'kindtype',systemType
-            field: 'systemType',
-            component: 'Select',
-            componentProps: {
-              options: [
-                {
-                  label: '通风',
-                  value: 'ventS',
-                },
-                {
-                  label: '防灭火',
-                  value: 'fireS',
-                },
-                {
-                  label: '防尘',
-                  value: 'dustS',
-                },
-                {
-                  label: '瓦斯',
-                  value: 'gasS',
-                },
-              ],
-            },
-            colProps: { span: 4 },
+          colProps: { span: 4 },
+        },
+        {
+          label: '系统',
+          field: 'systemType',
+          component: 'Select',
+          componentProps: {
+            options: [
+              {
+                label: '通风',
+                value: 'ventS',
+              },
+              {
+                label: '防灭火',
+                value: 'fireS',
+              },
+              {
+                label: '防尘',
+                value: 'dustS',
+              },
+              {
+                label: '瓦斯',
+                value: 'gasS',
+              },
+            ],
           },
-
-          {
-            field: 'starttime',
-            label: '开始时间',
-            component: 'DatePicker',
-            defaultValue: dayjs().add(-30, 'day').format('YYYY-MM-DD HH:mm:ss'),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
+          colProps: { span: 3 },
+        },
+        {
+          label: '矿编码',
+          field: 'orgcode',
+          component: 'Select',
+          defaultValue: 'sdmtjtbetmk',
+          componentProps: {
+            options: [
+            {
+                label: '布尔台煤矿',
+                value: 'sdmtjtbetmk',
+              },
+              {
+                label: '活鸡兔井',
+                value: 'sdmtjtdltmkhjtj',
+              },
+              {
+                label: '大柳塔井',
+                value: 'sdmtjtdltmk',
+              },
+              {
+                label: '补连塔煤矿',
+                value: 'sdmtjtbltmk',
+              },
+              {
+                label: '上湾煤矿',
+                value: 'sdmtjtswmk',
+              },
+              {
+                label: '锦界煤矿',
+                value: 'sdmtjtjjmk',
+              },
+              {
+                label: '哈拉沟煤矿',
+                value: 'sdmtjthlgmk',
+              },
+           
+              {
+                label: '柳塔煤矿',
+                value: 'sdmtjtltmk',
+              },
+              {
+                label: '石圪台煤矿',
+                value: 'sdmtjtsgtmk',
+              },
+              {
+                label: '保德煤矿',
+                value: 'sdmtjtbdmk',
+              },
+              {
+                label: '寸草塔煤矿',
+                value: 'sdmtjtcctmk',
+              },
+              {
+                label: '寸草塔二矿',
+                value: 'sdmtjtcctrk',
+              },
+              {
+                label: '榆家粱煤矿',
+                value: 'sdmtjtyjlmk',
+              },
+              {
+                label: '乌兰木伦煤矿',
+                value: 'sdmtjtwlmlmk',
+              },
+            ],
           },
-          {
-            field: 'endtime',
-            label: '结束时间',
-            component: 'DatePicker',
-            defaultValue: dayjs(),
-            required: true,
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            colProps: {
-              span: 4,
-            },
+          colProps: { span: 3 },
+        },
+       
+        {
+          field: 'starttime',
+          label: '开始时间',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
           },
-        ],
-      },
-      fetchSetting: {
-        listField: 'records',
-      },
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '30', '50', '100'],
-      },
-      beforeFetch(params) {
-        const { sysOrgCode } = useGlobSetting();
-        params.orgcode = orgcode ? orgcode : sysOrgCode;
-        params.type = 'alarmLog';
-        // params.devicetype = params.devicetype ? params.devicetype + '*' : '';
-        if (props.sysId) {
-          params.sysId = props.sysId;
-        }
-      },
+          colProps: {
+            span: 4,
+          },
+        },
+        {
+          field: 'endtime',
+          label: '结束时间',
+          component: 'DatePicker',
+          componentProps: {
+            showTime: true,
+            valueFormat: 'YYYY-MM-DD HH:mm:ss',
+            getPopupContainer: getAutoScrollContainer,
+          },
+          colProps: {
+            span: 4,
+          },
+        },
+      ],
+    },
+    fetchSetting: {
+      listField: 'records',
     },
-    exportConfig: {
-      name: '预警历史列表',
-      url: '/safety/ventanalyAlarmLog/exportXls',
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '30', '50', '100'],
     },
-  });
-  //注册table数据
-  const [registerTable, { reload, setLoading, getForm }] = tableContext;
-
-  //获取预警统计信息
-  async function getEachMineWarnCountInfoList() {
-    const { sysOrgCode } = useGlobSetting();
-    let res = await getEachMineWarnCountInfo({ orgcode: orgcode ? orgcode : sysOrgCode });
-    statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
-    statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
-    statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
-    statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
-    statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
-    statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
-    statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
-    statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
-    statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
-    statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
+    beforeFetch(params) {
+      params.type = paramType.value
+      return params;
+    },
+  },
+  exportConfig: {
+    name: '预警历史列表',
+    url: '/safety/ventanalyAlarmLog/exportXls',
+  },
+});
+//注册table数据
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
+
+function onChangeTab(tab) {
+  if (tab === 'device') {
+    paramType.value = 'alarmLog'
+    dataColumns.value = deviceColumns;
+  } else {
+    paramType.value = 'autoLog'
+    dataColumns.value = manageAutoColumns1;
   }
-  onMounted(async () => {
-    orgcode = route.query['orgcode'] as string;
-    getEachMineWarnCountInfoList();
-  });
+}
 
-  defineExpose({ setLoading });
+//获取预警统计信息
+async function getEachMineWarnCountInfoList() {
+  let res = await getEachMineWarnCountInfo({});
+  console.log(res, '监测数量预警状态------')
+  statisticsList[0].valueT = res.ventSWarnInfo.totalNum || 0;
+  statisticsList[0].valueB = res.ventSWarnInfo.maxWarnLevel || '';
+  statisticsList[1].valueT = res.dustSWarnInfo.totalNum || 0;
+  statisticsList[1].valueB = res.dustSWarnInfo.maxWarnLevel || '';
+  statisticsList[2].valueT = res.gasSWarnInfo.totalNum || 0;
+  statisticsList[2].valueB = res.gasSWarnInfo.maxWarnLevel || '';
+  statisticsList[3].valueT = res.fireSWarnInfo.totalNum || 0;
+  statisticsList[3].valueB = res.fireSWarnInfo.maxWarnLevel || '';
+  statisticsList[4].valueT = res.synthesizeSWarnInfo.totalNum || 0;
+  statisticsList[4].valueB = res.synthesizeSWarnInfo.maxWarnLevel || '';
+}
+onMounted(async () => {
+  getEachMineWarnCountInfoList();
+});
+
+defineExpose({ setLoading });
 </script>
 
 <style scoped lang="less">
-  @ventSpace: zxm;
+@ventSpace: zxm;
 
-  :deep(.zxm-table-container) {
-    max-height: 720px !important;
-  }
+:deep(.zxm-table-container) {
+  max-height: 720px !important;
+}
 
-  :deep(.ventSpace-table-body) {
-    height: auto !important;
-  }
+:deep(.ventSpace-table-body) {
+  height: auto !important;
+}
 
-  :deep(.zxm-picker) {
-    height: 30px !important;
-  }
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
 
-  :deep(.@{ventSpace}-picker-dropdown) {
-    position: absolute !important;
-    top: 35px !important;
-    left: 0 !important;
-  }
+:deep(.@{ventSpace}-picker-dropdown) {
+  position: absolute !important;
+  top: 35px !important;
+  left: 0 !important;
+}
+
+.data-statistics {
+  height: 200px;
+  padding: 20px;
+  margin-top: 90px;
+  background-color: #0ebbff15;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 
-  .data-statistics {
-    height: 200px;
-    padding: 20px;
-    margin-top: 20px;
-    background-color: #0ebbff15;
+  .statistics-box {
     display: flex;
-    justify-content: space-between;
+    flex: 1;
+    height: 100%;
+    justify-content: center;
     align-items: center;
 
-    .statistics-box {
-      display: flex;
-      flex: 1;
+    .left-box {
+      position: relative;
+      width: 138px;
       height: 100%;
-      justify-content: center;
+
+      .box-title {
+        position: absolute;
+        left: 50%;
+        bottom: 18px;
+        transform: translate(-50%, 0);
+        color: #fff;
+      }
+    }
+
+    &:nth-child(1) .left-box {
+      background: url('../../../../assets/images/vent-tf.png') no-repeat center;
+      background-size: 100% auto;
+    }
+
+    &:nth-child(2) .left-box {
+      background: url('../../../../assets/images/dust-fc.png') no-repeat center;
+      background-size: 100% auto;
+    }
+
+    &:nth-child(3) .left-box {
+      background: url('../../../../assets/images/gas-ws.png') no-repeat center;
+      background-size: 100% auto;
+    }
+
+    &:nth-child(4) .left-box {
+      background: url('../../../../assets/images/fire-fz.png') no-repeat center;
+      background-size: 100% auto;
+    }
+
+    &:nth-child(5) .left-box {
+      background: url('../../../../assets/images/aqjc.png') no-repeat center;
+      background-size: 100% auto;
+    }
+
+    .right-box {
+      position: relative;
+      width: 215px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
       align-items: center;
 
-      .left-box {
+      .box-text {
         position: relative;
-        width: 138px;
-        height: 100%;
+        width: 100%;
+        height: 40px;
+        color: #fff;
+        background: url('../../../../assets/images/his-one.png') no-repeat center;
+        background-size: 100% 100%;
 
-        .box-title {
+        .text-label {
           position: absolute;
-          left: 50%;
-          bottom: 18px;
-          transform: translate(-50%, 0);
-          color: #fff;
+          left: 20px;
+          top: 50%;
+          transform: translate(0, -50%);
         }
-      }
 
-      &:nth-child(1) .left-box {
-        background: url('../../../../assets/images/vent-tf.png') no-repeat center;
-        background-size: 100% auto;
+        .text-value {
+          position: absolute;
+          left: 130px;
+          top: 50%;
+          transform: translate(0, -50%);
+          font-family: 'douyuFont';
+        }
       }
 
-      &:nth-child(2) .left-box {
-        background: url('../../../../assets/images/dust-fc.png') no-repeat center;
-        background-size: 100% auto;
+      .warning-state {
+        .text-value {
+          color: aqua !important;
+          font-family: 'douyuFont';
+        }
       }
+    }
+  }
+}
 
-      &:nth-child(3) .left-box {
-        background: url('../../../../assets/images/gas-ws.png') no-repeat center;
-        background-size: 100% auto;
-      }
+.tab-box {
+  display: flex;
+  color: #fff;
+  position: relative;
+  top: 11px;
+  background: linear-gradient(#001325, #012e4f);
 
-      &:nth-child(4) .left-box {
-        background: url('../../../../assets/images/fire-fz.png') no-repeat center;
-        background-size: 100% auto;
-      }
+  :deep(.zxm-tabs-nav) {
+    margin: 0 !important;
 
-      &:nth-child(5) .left-box {
-        background: url('../../../../assets/images/aqjc.png') no-repeat center;
-        background-size: 100% auto;
-      }
+    .zxm-tabs-tab {
+      width: 180px;
+      height: 45px;
+      background: url('@/assets/images/top-btn.png') center no-repeat;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+    }
 
-      .right-box {
-        position: relative;
-        width: 215px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        align-items: center;
-
-        .box-text {
-          position: relative;
-          width: 100%;
-          height: 40px;
-          color: #fff;
-          background: url('../../../../assets/images/his-one.png') no-repeat center;
-          background-size: 100% 100%;
-
-          .text-label {
-            position: absolute;
-            left: 20px;
-            top: 50%;
-            transform: translate(0, -50%);
-          }
-
-          .text-value {
-            position: absolute;
-            left: 130px;
-            top: 50%;
-            transform: translate(0, -50%);
-          }
-        }
+    .zxm-tabs-tab-active {
+      width: 180px;
+      position: relative;
+      background: url('@/assets/images/top-btn-select.png') center no-repeat;
+      background-size: cover;
+
+      .zxm-tabs-tab-btn {
+        color: #fff !important;
       }
     }
-  }
 
-  // .tab-button-group {
-  //   // line-height: 60px;
-  //   margin-top: 16px;
-  //   display: flex;
-  //   pointer-events: auto;
-  //   position: relative;
-  //   &::after {
-  //     position: absolute;
-  //     content: '';
-  //     width: calc(100% + 10px);
-  //     height: 2px;
-  //     top: 44px;
-  //     left: -10px;
-  //     border-bottom: 1px solid #0efcff;
-  //   }
-  //   .tab-button {
-  //     padding: 10px 30px;
-  //     position: relative;
-  //     display: flex;
-  //     justify-content: center;
-  //     align-items: center;
-  //     font-size: 16px;
-  //     color: #fff;
-  //     cursor: pointer;
-  //     margin-right: 10px;
-  //     background-color: rgba(0, 103, 103, 0.253);
-  //     &::before {
-  //       content: '';
-  //       position: absolute;
-  //       top: 0;
-  //       right: 0;
-  //       bottom: 0;
-  //       left: 0;
-  //       border: 1px solid #2bb2c4;
-  //       // transform: skewX(-38deg);
-  //       // background-color: rgba(0, 77, 103, 85%);
-  //       z-index: 0;
-  //     }
-  //     &::after {
-  //       background-color: rgba(0, 77, 103, 85%);
-  //     }
-  //   }
-  //   .active {
-  //     &::before {
-  //       border-color: #46fcff;
-  //       box-shadow: 1px 1px 10px 2px #0efcff99 inset;
-  //     }
-  //   }
-  // }
-  .alarm-history-table {
-    width: 100%;
-    background-color: #0ebbff15;
-    position: relative;
-    margin-top: 10px;
-
-    &::after {
-      position: absolute;
-      content: '';
-      width: calc(100% + 10px);
-      height: 2px;
-      top: 0px;
-      left: -10px;
-      border-bottom: 1px solid #0efcff99;
+    .zxm-tabs-ink-bar {
+      width: 0 !important;
+    }
+
+    .zxm-tabs-tab+.zxm-tabs-tab {
+      margin: 0 !important;
     }
   }
+}
+
+.alarm-history-table {
+  width: 100%;
+  background-color: #0ebbff15;
+  position: relative;
+  margin-top: 10px;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: calc(100% + 10px);
+    height: 2px;
+    top: 0px;
+    left: -10px;
+    border-bottom: 1px solid #0efcff44;
+  }
+}
 </style>

src/views/vent/monitorManager/warningMonitor/warning.api.ts

@@ -2,8 +2,8 @@ import { defHttp } from '/@/utils/http/axios';
 
 enum Api {
   // list = '/safety/ventanalyAlarmLog/list',
-  list = '/ventanaly-company/company/index/getEachMineWarnLogList',
-  getEachMineWarnCountInfo = '/ventanaly-company/company/index/getEachMineWarnCountInfo',
+  list = '/ventanaly-company/company/index/getEachMineWarnLogList',//获取公司端列表
+  getEachMineWarnCountInfo = '/ventanaly-company/company/index/getEachMineWarnCountInfo',//获取公司端信息
   getWarnCountInfo = '/ventanaly-device/monitor/groupCompany/getWarnCountInfo', // 获取矿端信息
   getAlarmLogList = '/ventanaly-device/monitor/groupCompany/getAlarmLogList', //获取各矿预警统计信息
   getManageAutoLogList = '/ventanaly-device/monitor/groupCompany/getManageAutoLogList', //获取各矿工作面智能管控预警信息