公司端安全监测预警历史，瓦斯日报监测-导出瓦斯小票，瓦斯抽采泵配置-提交

src/hooks/system/useMethods.ts

@@ -57,50 +57,69 @@ export function useMethods() {
    * @param url
    */
   async function exportXlsPost(name, url, params, isXlsx = false) {
-    // message.loading({ content: 'Loading...', key });
 
-    // message
-    //   .loading('正在导出，请稍等..', 2.5)
-    //   .then(
-    //     () => message.success('Loading finished', 2.5),
-    //     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    //     () => {}
-    //   )
-    //   .then(() => message.info('Loading finished is finished', 2.5));
-    const key = 'updatable';
-    message.loading({ content: '正在导出，请稍等...', key });
-    defHttp
-      .post({ url: url, params: params, timeout: 1000 * 1000 }, { isTransformResponse: false })
-      .then((data) => {
-        debugger;
-        if (data.code == 200 && data.result) {
-          const messageArr = data.result.split('/');
-          const fileUrl = messageArr[messageArr.length - 1];
-          if (fileUrl) {
-            const baseApiUrl = glob.domainUrl;
-            // 下载文件
-            const a = document.createElement('a');
-            // 定义下载名称
-            a.download = name;
-            // 隐藏标签
-            a.style.display = 'none';
-            // 设置文件路径
-            a.href = `${baseApiUrl}/sys/common/static/${fileUrl}`;
-            // 将创建的标签插入dom
-            document.body.appendChild(a);
-            // 点击标签，执行下载
-            a.click();
-            // 将标签从dom移除
-            document.body.removeChild(a);
-            message.success({ content: '导出成功!', key, duration: 1 });
-          }
-        } else {
-          message.error({ content: '下载失败!', key, duration: 1 });
-        }
-      })
-      .catch(() => {
-        message.error({ content: '下载失败!', key, duration: 1 });
-      });
+    const data = await defHttp.post({ url: url, params: params, responseType: 'blob', timeout: 1000 * 1000 }, { isTransformResponse: false });
+    if (!data) {
+      createMessage.warning('文件下载失败');
+      return;
+    }
+    if (!name || typeof name != 'string') {
+      name = '导出文件';
+    }
+    const blobOptions = { type: 'application/vnd.ms-excel' };
+    let fileSuffix = '.xls';
+    if (isXlsx === true) {
+      blobOptions['type'] = XLSX_MIME_TYPE;
+      fileSuffix = XLSX_FILE_SUFFIX;
+    }
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+      window.navigator.msSaveBlob(new Blob([data], blobOptions), name + fileSuffix);
+    } else {
+      const url = window.URL.createObjectURL(new Blob([data], blobOptions));
+      const link = document.createElement('a');
+      link.style.display = 'none';
+      link.href = url;
+      link.setAttribute('download', name + fileSuffix);
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link); //下载完成移除元素
+      window.URL.revokeObjectURL(url); //释放掉blob对象
+    }
+   
+    // const key = 'updatable';
+    // message.loading({ content: '正在导出，请稍等...', key });
+    // defHttp
+    //   .post({ url: url, params: params, timeout: 1000 * 1000 }, { isTransformResponse: false })
+    //   .then((data) => {
+    //     debugger;
+    //     if (data.code == 200 && data.result) {
+    //       const messageArr = data.result.split('/');
+    //       const fileUrl = messageArr[messageArr.length - 1];
+    //       if (fileUrl) {
+    //         const baseApiUrl = glob.domainUrl;
+    //         // 下载文件
+    //         const a = document.createElement('a');
+    //         // 定义下载名称
+    //         a.download = name;
+    //         // 隐藏标签
+    //         a.style.display = 'none';
+    //         // 设置文件路径
+    //         a.href = `${baseApiUrl}/sys/common/static/${fileUrl}`;
+    //         // 将创建的标签插入dom
+    //         document.body.appendChild(a);
+    //         // 点击标签，执行下载
+    //         a.click();
+    //         // 将标签从dom移除
+    //         document.body.removeChild(a);
+    //         message.success({ content: '导出成功!', key, duration: 1 });
+    //       }
+    //     } else {
+    //       message.error({ content: '下载失败!', key, duration: 1 });
+    //     }
+    //   })
+    //   .catch(() => {
+    //     message.error({ content: '下载失败!', key, duration: 1 });
+    //   });
   }
 
   async function exportXlsPost1(name, url, params, isXlsx = false) {

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

@@ -8,6 +8,7 @@ enum Api {
   getIsReviewPass = '/safety/gasDayReport/getIsReviewPass',
   getAllUserInfo = '/safety/gasInsCard/getAllUserInfo',
   exportReportByPoi = '/safety/reportInfo/exportReportByPoi',
+ queryUserByRoleCode= '/safety/gasInsCard/queryUserByRoleCode',//通过角色编码查询角色下所有用户
 }
 /**
  * 获取瓦斯日报区队，检测地点下拉选项
@@ -40,3 +41,5 @@ export const getIsReviewPass = (params) => defHttp.post({ url: Api.getIsReviewPa
 export const getAllUserInfo = (params) => defHttp.get({ url: Api.getAllUserInfo, params });
 
 export const exportReportByPoi = (params) => defHttp.post({ url: Api.exportReportByPoi, params, responseType: 'blob' });
+
+export const queryUserByRoleCode = (params) => defHttp.get({ url: Api.queryUserByRoleCode, params });

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

@@ -156,7 +156,7 @@
 <script setup lang="ts">
   import { ref, onMounted, reactive } from 'vue';
   import { columns } from './gas-report.data';
-  import { getGasAddressList, getList, expComReportByParam, reviewPass, getIsReviewPass, getAllUserInfo, exportReportByPoi } from './gas-report.api';
+  import { getGasAddressList, getList, expComReportByParam, reviewPass, getIsReviewPass, getAllUserInfo, exportReportByPoi,queryUserByRoleCode } from './gas-report.api';
   import customHeader from '/@/components/vent/customHeader.vue';
   import { message } from 'ant-design-vue';
   import dayjs from 'dayjs';
@@ -420,7 +420,8 @@
         component: 'ApiSelect',
         required: true,
         componentProps: {
-          api: getAllUserInfo,
+          api: queryUserByRoleCode,
+            params: { roleCode: 'gasCheck' },
           labelField: 'realname',
           valueField: 'username',
           showSearch: true,
@@ -432,7 +433,8 @@
         component: 'ApiSelect',
         required: true,
         componentProps: {
-          api: getAllUserInfo,
+          api: queryUserByRoleCode,
+            params: { roleCode: 'gasCheck' },
           labelField: 'realname',
           valueField: 'username',
           showSearch: true,
@@ -449,7 +451,8 @@
         component: 'ApiSelect',
         required: true,
         componentProps: {
-          api: getAllUserInfo,
+          api: queryUserByRoleCode,
+            params: { roleCode: 'gasCheck' },
           labelField: 'realname',
           valueField: 'username',
           showSearch: true,

src/views/vent/monitorManager/gasPumpMonitor/components/gasPumpHomeCopy.vue

@@ -9,629 +9,932 @@
               <div class="value">{{ selectData[item.code] ? selectData[item.code] : '-' }}</div>
             </div>
           </template>
-        </fourBorderBg>
-      </div> -->
+</fourBorderBg>
+</div> -->
     </div>
     <!-- 布尔台新瓦斯泵模型上的数据 -->
     <div class="elementContent" style="position: absolute; display: none">
       <div v-for="(tag, index) in modelMonitorTags" :key="index" :id="tag.domId" class="modal-monitor-box">
         <div class="title">{{ tag.title }}</div>
-        <div
-          v-if="tag.type == 'sign'"
-          class="signal-round"
-          :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }"
-        ></div>
+        <div v-if="tag.type == 'sign'" class="signal-round"
+          :class="{ 'signal-round-gry': selectData[tag.code] != 1, 'signal-round-run': selectData[tag.code] == 1 }">
+        </div>
         <div v-else class="value">{{ selectData[tag.code] }}</div>
       </div>
     </div>
     <div v-if="selectData['netStatus'] == 0" class="device-state">网络断开</div>
-    <div class="lr left-box">
-      <div class="left-container">
-        <div class="monitor-box">
-          <ventBox1>
-            <template #title>
-              <div>瓦斯泵</div>
-            </template>
-            <template #container>
-              <div v-for="key in 2" :key="key">
-                <div class="parameter-title group-parameter-title">
-                  <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#瓦斯泵磁力启动器</span>
-                </div>
-                <div class="input-box">
-                  <div v-for="(item, index) in pumpMonitorData" class="input-item" :key="index">
-                    <div class="title">{{ item.title }}：</div>
-                    <template v-if="item.type !== 'sign' && item.type !== 'warning'">
-                      <div class="value">{{
-                        selectData && selectData[item.code.replace('Starter', `Starter${key + 4}`)]
-                          ? formatNum(selectData[item.code.replace('Starter', `Starter${key + 4}`)], 1)
-                          : '-'
-                      }}</div>
-                    </template>
-                    <template v-else>
-                      <div class="value">
-                        <span
-                          :class="{
-                            'signal-round': true,
-                            'signal-round-run': item.type === 'sign' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
-                            'signal-round-gry': selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '0',
-                            'signal-round-warning': item.type === 'warning' && selectData[item.code.replace('Starter', `Starter${key + 4}`)] == '1',
-                          }"
-                        ></span>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ventBox1>
-          <ventBox1 class="vent-margin-t-10">
-            <template #title>
-              <div>注水泵</div>
-            </template>
-            <template #container>
-              <div v-for="key in 2" :key="key">
-                <div class="parameter-title group-parameter-title">
-                  <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#注水泵</span>
-                </div>
-                <div class="input-box">
-                  <div v-for="(item, index) in waterPumpData" class="input-item" :key="index">
-                    <div class="title">{{ item.title }}：</div>
-                    <template v-if="item.type !== 'sign'">
-                      <div class="value">{{
-                        selectData && selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)]
-                          ? formatNum(selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)], 1)
-                          : '-'
-                      }}</div>
-                    </template>
-                    <template v-else>
-                      <div class="value">
-                        <span
-                          :class="{
-                            'signal-round': true,
-                            'signal-round-run': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)],
-                            'signal-round-gry': selectData[item.code.replace('WaterfloodPump', `WaterfloodPump${key}`)] == '0',
-                          }"
-                        ></span>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ventBox1>
-          <ventBox1 class="vent-margin-t-10">
-            <template #title>
-              <div>排水泵</div>
-            </template>
-            <template #container>
-              <div v-for="key in 2" :key="key">
-                <div class="parameter-title group-parameter-title">
-                  <SvgIcon class="icon" size="14" name="pulp-title" /><span>{{ key }}#排水泵</span>
-                </div>
-                <div class="input-box">
-                  <div v-for="(item, index) in dewateringPumpData" class="input-item" :key="index">
-                    <div class="title">{{ item.title }}：</div>
-                    <template v-if="item.type !== 'sign'">
-                      <div class="value">{{
-                        selectData && selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)]
-                          ? formatNum(selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)], 1)
-                          : '-'
-                      }}</div>
-                    </template>
-                    <template v-else>
-                      <div class="value">
-                        <span
-                          :class="{
-                            'signal-round': true,
-                            'signal-round-run': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)],
-                            'signal-round-gry': selectData[item.code.replace('DewateringPump', `DewateringPump${key}`)] == '0',
-                          }"
-                        ></span>
-                      </div>
-                    </template>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </ventBox1>
-        </div>
-      </div>
-    </div>
-    <div class="lr right-box">
-      <div class="item-box sensor-container">
-        <ventBox1 class="vent-margin-t-10">
-          <template #title>
-            <div>泵站远程集中控制</div>
-          </template>
-          <template #container>
-            <div class="top-btn">
-              <div class="btn-group">
-                <a-button class="btn-item" type="primary" @click="handlerFn('zfw')">总复位</a-button>
-                <a-button class="btn-item" type="default" disabled @click="handlerFn('change')">一键切换</a-button>
-              </div>
-              <div class="btn-group">
-                <a-button style="width: calc(100% - 16px); padding: 0 8px" type="primary" @click="openModal">瓦斯泵控制</a-button>
-              </div>
-              <div>
-                <div class="control-item">
-                  <div class="control-title">控制模式：</div>
-                  <div class="control-container">
-                    <a-radio-group v-model:value="selectData['ykjdqh']">
-                      <a-radio :value="'0'">就地</a-radio>
-                      <a-radio :value="'1'">远程</a-radio>
-                    </a-radio-group>
-                    <div class="btn-box">
-                      <div class="btn btn1" @click="changeCtr(0)">就地</div>
-                      <div class="btn btn1" @click="changeCtr(1)">远程</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="control-item">
-                  <div class="control-title">检修模式：</div>
-                  <div class="control-container">
-                    <a-radio-group v-model:value="selectData['jxmsqh']">
-                      <a-radio :value="'0'">关闭</a-radio>
-                      <a-radio :value="'1'">开启</a-radio>
-                    </a-radio-group>
-                    <div class="btn-box">
-                      <div class="btn btn1" @click="changeMode(0)">关闭</div>
-                      <div class="btn btn1" @click="changeMode(1)">开启</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-        </ventBox1>
-        <ventBox1 class="vent-margin-t-10">
-          <template #title>
-            <div>泵站监测详情</div>
-          </template>
-          <template #container>
-            <ListItem
-              v-for="(item, index) in modelMonitor"
-              :key="index"
-              class="w-100% mb-5px"
-              :value="selectData[item.code]"
-              :label="item.title"
-              label-width="250px"
-            />
-          </template>
-        </ventBox1>
-      </div>
-      <!-- <div class="item-box" >
-      <LivePlayer id="fm-player1" style="height: 250px;" ref="player1" :videoUrl="flvURL1()" muted live loading controls />
-    </div> -->
-    </div>
+  
+    <!-- 可配置模块 -->
+    <ModuleCommon v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-data="cfg.moduleData"
+      :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="selectData" :visible="true" />
+
+    <div class="lr left-box"></div>
+    <div class="lr right-box"></div>
     <div ref="playerRef" class="player-box"></div>
   </div>
-  <DetailModal @register="register" :device-type="deviceType" :device-id="deviceId" />
-  <PasswordModal
-    :modal-is-show="passwordModalIsShow"
-    modal-title="密码检验"
-    :modal-type="handlerType"
-    @handle-ok="handleOK"
-    @handle-cancel="handleCancel"
-  />
+  <PasswordModal :modal-is-show="passwordModalIsShow" modal-title="密码检验" :modal-type="handlerType" @handle-ok="handleOK"
+    @handle-cancel="handleCancel" />
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount } from 'vue';
-  import ventBox1 from '/@/components/vent/ventBox1.vue';
-  import { setModelType, playAnimate } from '../gasPump.threejs';
-  import ListItem from '@/views/vent/gas/components/list/listItem.vue';
-  import {
-    stateWarningHeader,
-    valveWarningState,
-    pumpMonitorData,
-    waterPumpData,
-    dewateringPumpData,
-    modelMonitor,
-    getModelMonitorTags,
-    valveCtrlType,
-  } from '../gasPump.data';
-  import { list } from '../gasPump.api';
-  import { SvgIcon } from '/@/components/Icon';
-  import { formatNum } from '/@/utils/ventutil';
-  import DetailModal from './DetailModal.vue';
-  import { useModal } from '/@/components/Modal';
-  import { deviceControlApi } from '/@/api/vent/index';
-  import PasswordModal from '../../comment/components/PasswordModal.vue';
-  import { message } from 'ant-design-vue';
-  import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
-  import { useCamera } from '/@/hooks/system/useCamera';
-
-  const globalConfig = inject('globalConfig');
-
-  const props = defineProps({
-    deviceId: {
-      type: String,
-      require: true,
-    },
-    deviceType: {
-      type: String,
-      require: true,
-    },
-  });
-  const [register, { openModal }] = useModal();
-  const modelMonitorTags = getModelMonitorTags();
-  const loading = ref(false);
-  const tabActiveKey = ref(1);
-  const passwordModalIsShow = ref(false);
-  const handlerType = ref('');
-  const playerRef = ref();
-
-  // 监测数据
-  const selectData = ref({
-    pump1: false,
-    pump2: false,
-    pump3: false,
-    pump4: false,
-    waterPump1: false,
-    waterPump2: false,
-    waterPump3: false,
-    waterPump4: false,
-    inValve1: false,
-    outValve1: false,
-    inValve2: false,
-    outValve2: false,
-    inValve3: false,
-    outValve3: false,
-    inValve4: false,
-    outValve4: false,
-    jxmsqh: '1',
-    ykjdqh: '1',
-    FlowSensor_InputFlux: '-',
-    deviceType: '',
-  });
-
-  const { getCamera, removeCamera } = useCamera();
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(flag?) {
-    if (Object.prototype.toString.call(timer) === '[object Null]') {
-      return new Promise((resolve) => {
-        timer = setTimeout(
-          async () => {
-            if (props.deviceId) {
-              const data = await getDataSource(props.deviceId);
-              selectData.value = data;
-              playAnimate(data);
-              // Object.assign(selectData, data);
-            }
-            if (timer) {
-              timer = null;
-            }
-            resolve(null);
-            await getMonitor();
-            loading.value = false;
-          },
-          flag ? 0 : 1000
-        );
-      });
-    }
+import { ref, onMounted, onUnmounted, reactive, defineProps, watch, inject, nextTick, onBeforeUnmount, computed } from 'vue';
+// import ventBox1 from '/@/components/vent/ventBox1.vue';
+import { setModelType, playAnimate } from '../gasPump.threejs';
+// import ListItem from '@/views/vent/gas/components/list/listItem.vue';
+import {
+  getModelMonitorTags,
+} from '../gasPump.data';
+import { list } from '../gasPump.api';
+import { deviceControlApi } from '/@/api/vent/index';
+import PasswordModal from '../../comment/components/PasswordModal.vue';
+import { message } from 'ant-design-vue';
+// import fourBorderBg from '/@/components/vent/fourBorderBg.vue';
+// import { useCamera } from '/@/hooks/system/useCamera';
+import { useInitConfigs } from '../../../home/configurable/hooks/useInit';
+ import ModuleCommon from '../../../home/configurable/components/ModuleCommon.vue';
+ import { set } from 'lodash-es';
+
+const globalConfig = inject<any>('globalConfig');
+
+const props = defineProps({
+  deviceId: {
+    type: String,
+    require: true,
+  },
+  deviceType: {
+    type: String,
+    require: true,
+  },
+});
+
+const { configs: rawConfigs, fetchConfigs } = useInitConfigs();
+const configs = computed(() => {
+  return rawConfigs.value.filter((c) => c.deviceType == props.deviceId);
+});
+
+// const [register, { openModal }] = useModal();
+const modelMonitorTags = getModelMonitorTags();
+const loading = ref(false);
+const passwordModalIsShow = ref(false);
+const handlerType = ref('');
+const playerRef = ref();
+
+// 监测数据
+const selectData = ref({});
+
+// const { getCamera, removeCamera } = useCamera();
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag?) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    return new Promise((resolve) => {
+      timer = setTimeout(
+        async () => {
+          if (props.deviceId) {
+            const data = await getDataSource();
+            selectData.value = data;
+            playAnimate(data);
+            // Object.assign(selectData, data);
+          }
+          if (timer) {
+            timer = null;
+          }
+          resolve(null);
+          await getMonitor();
+          loading.value = false;
+        },
+        flag ? 0 : 1000
+      );
+    });
   }
+}
+
+async function getDataSource() {
+    const res = await list({
+      devicetype: 'gasdrainage',
+      pagetype: 'normal',
+    });
+    const datalist = res.msgTxt[0]['datalist'];
 
-  async function getDataSource(systemID) {
-    const res = await list({ devicetype: props.deviceType, ids: systemID });
-    const result = res.msgTxt[0]['datalist'][0];
-    Object.assign(result, result['readData']);
+    const result = datalist.reduce((obj, e) => {
+      return set(obj, e.readData.id, e);
+    }, {});
     return result;
   }
 
-  function handler(passWord, paramcode) {
-    let value = '';
-    if (paramcode == 'ykjdqh') {
-      value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
-    }
-    if (paramcode == 'jxmsqh') {
-      value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
-    }
-    const data = {
-      deviceid: selectData.value['deviceID'],
-      devicetype: selectData.value['deviceType'],
-      paramcode: paramcode,
-      password: passWord,
-      value: value,
-    };
-    deviceControlApi(data)
-      .then((res) => {
-        if (globalConfig.History_Type == 'remote') {
-          message.success('指令已下发至生产管控平台成功！');
-        } else {
-          message.success('指令已下发成功！');
-        }
-      })
-      .catch((err) => {
-        message.success('控制异常');
-      });
+function handler(passWord, paramcode) {
+  let value = '';
+  if (paramcode == 'ykjdqh') {
+    value = selectData.value['ykjdqh'] == '1' ? '2' : '1';
   }
-
-  function changeCtr(e) {
-    if (e == 1) {
-      // 就地
-      handlerType.value = 'jxmsqh';
-    } else if (e == 2) {
-      // 远程
-      handlerType.value = 'jxmsqh';
-    }
-    passwordModalIsShow.value = true;
+  if (paramcode == 'jxmsqh') {
+    value = selectData.value['jxmsqh'] == '1' ? '2' : '1';
   }
+  const data = {
+    deviceid: selectData.value['deviceID'],
+    devicetype: selectData.value['deviceType'],
+    paramcode: paramcode,
+    password: passWord,
+    value: value,
+  };
+  deviceControlApi(data)
+    .then((res) => {
+      if (globalConfig.History_Type == 'remote') {
+        message.success('指令已下发至生产管控平台成功！');
+      } else {
+        message.success('指令已下发成功！');
+      }
+    })
+    .catch((err) => {
+      message.success('控制异常');
+    });
+}
 
-  function changeMode(e) {
-    if (e == 1) {
-      // 检修开
-      handlerType.value = 'ykjdqh';
-    } else if (e == 2) {
-      // 检修关
-      handlerType.value = 'ykjdqh';
-    }
-    passwordModalIsShow.value = true;
-  }
+// function changeCtr(e) {
+//   if (e == 1) {
+//     // 就地
+//     handlerType.value = 'jxmsqh';
+//   } else if (e == 2) {
+//     // 远程
+//     handlerType.value = 'jxmsqh';
+//   }
+//   passwordModalIsShow.value = true;
+// }
 
-  function handlerFn(paramcode) {
-    handlerType.value = paramcode;
-    passwordModalIsShow.value = true;
-  }
+// function changeMode(e) {
+//   if (e == 1) {
+//     // 检修开
+//     handlerType.value = 'ykjdqh';
+//   } else if (e == 2) {
+//     // 检修关
+//     handlerType.value = 'ykjdqh';
+//   }
+//   passwordModalIsShow.value = true;
+// }
 
-  function handleOK(passWord, handlerState) {
-    handler(passWord, handlerState);
-    passwordModalIsShow.value = false;
-    handlerType.value = '';
-  }
+// function handlerFn(paramcode) {
+//   handlerType.value = paramcode;
+//   passwordModalIsShow.value = true;
+// }
+
+function handleOK(passWord, handlerState) {
+  handler(passWord, handlerState);
+  passwordModalIsShow.value = false;
+  handlerType.value = '';
+}
 
-  function handleCancel() {
-    passwordModalIsShow.value = false;
-    handlerType.value = '';
+function handleCancel() {
+  passwordModalIsShow.value = false;
+  handlerType.value = '';
+}
+
+// 喷粉操作
+// function handlerDevice(code, data) { }
+
+watch(
+  () => props.deviceType,
+  () => {
+    // removeCamera();
+    nextTick(async () => {
+      if (props.deviceType == 'pump_over') {
+        setModelType('gasPump');
+      } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
+        setModelType('gasPumpUnder');
+      }
+    });
   }
+);
+// watch(
+//   () => props.deviceId,
+//   async (deviceID) => {
+//     removeCamera();
+//     if (deviceID) await getCamera(deviceID, playerRef.value);
+//   }
+// );
 
-  // 喷粉操作
-  function handlerDevice(code, data) {}
-
-  watch(
-    () => props.deviceType,
-    () => {
-      removeCamera();
-      nextTick(async () => {
-        if (props.deviceType == 'pump_over') {
-          setModelType('gasPump');
-        } else if (props.deviceType?.startsWith('pump_under') || props.deviceType == 'pump_n12m2pq') {
-          setModelType('gasPumpUnder');
-        }
-      });
-    }
-  );
-  watch(
-    () => props.deviceId,
-    async (deviceID) => {
-      removeCamera();
-      if (deviceID) await getCamera(deviceID, playerRef.value);
-    }
-  );
+onMounted(async () => {
+  timer = null;
+  await getMonitor(true);
+  fetchConfigs('gasPumpMonitor');
+  // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
+});
 
-  onMounted(async () => {
+// onBeforeUnmount(() => {
+//   removeCamera();
+// });
+
+onUnmounted(() => {
+  // removeCamera();
+  if (timer) {
+    clearTimeout(timer);
     timer = null;
-    await getMonitor(true);
-    // if (selectData && selectData['deviceID']) await getCamera(selectData['deviceID'], playerRef.value);
-  });
-
-  onBeforeUnmount(() => {
-    removeCamera();
-  });
-
-  onUnmounted(() => {
-    removeCamera();
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
-    }
-  });
+  }
+});
+ // const rawConfigs = ref<Config[]>([
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '瓦斯泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:300px;',
+  //       version: '原版',
+  //       position: 'top:30px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '注水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:340px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '排水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:550px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773229143920641',
+  //     moduleName: '泵站检测详情',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701001传感器的值',
+  //               value: '${701001.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:490px;',
+  //       version: '原版',
+  //       position: 'top:30px;right:0px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '瓦斯泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:300px;',
+  //       version: '原版',
+  //       position: 'top:30px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '注水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:340px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '排水泵',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:200px;',
+  //       version: '原版',
+  //       position: 'top:550px;left:10px;',
+  //     },
+  //   },
+  //   {
+  //     deviceType: '1709773300489031682',
+  //     moduleName: '泵站检测详情',
+  //     pageType: 'gasPumpMonitor',
+  //     moduleData: {
+  //       header: {
+  //         show: false,
+  //         readFrom: '',
+  //         selector: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //         slot: {
+  //           show: false,
+  //           value: '',
+  //         },
+  //       },
+  //       background: {
+  //         show: false,
+  //         type: 'image',
+  //         link: '',
+  //       },
+  //       layout: {
+  //         direction: 'column',
+  //         items: [
+  //           {
+  //             name: 'list',
+  //             basis: '100%',
+  //           },
+  //         ],
+  //       },
+  //       complex_list: [],
+  //       chart: [],
+  //       table: [],
+  //       gallery: [],
+  //       list: [
+  //         {
+  //           type: 'K',
+  //           readFrom: '',
+  //           items: [
+  //             {
+  //               label: '701004传感器的值',
+  //               value: '${701004.readData.value}',
+  //               color: 'blue',
+  //             },
+  //           ],
+  //         },
+  //       ],
+  //       gallery_list: [],
+  //       preset: [],
+  //       to: '',
+  //     },
+  //     showStyle: {
+  //       size: 'width:348px;height:490px;',
+  //       version: '原版',
+  //       position: 'top:30px;right:0px;',
+  //     },
+  //   },
+  // ]);
 </script>
 <style lang="less" scoped>
-  @import '/@/design/theme.less';
-  @import '/@/design/vent/modal.less';
-  @import '../../comment/less/workFace.less';
-  @ventSpace: zxm;
+@import '/@/design/theme.less';
+@import '/@/design/vent/modal.less';
+@import '../../comment/less/workFace.less';
+@ventSpace: zxm;
+
+.elementContent {
+  :deep(.main-container) {
+    display: flex;
+    flex-wrap: wrap;
+    width: 690px;
+    padding: 10px 12px 10px 15px;
+    border: 1px solid #d3e1ff33;
+    background-color: #061c2a55;
+    box-shadow: 0 0 15px #3b567f55;
+    background-color: #38383833;
 
-  .elementContent {
-    :deep(.main-container) {
+    .gas-monitor-row {
       display: flex;
+      flex-direction: row;
       flex-wrap: wrap;
-      width: 690px;
-      padding: 10px 12px 10px 15px;
-      border: 1px solid #d3e1ff33;
-      background-color: #061c2a55;
-      box-shadow: 0 0 15px #3b567f55;
-      background-color: #38383833;
-      .gas-monitor-row {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        color: #fff;
-        line-height: 32px;
-        .title {
-          width: 250px;
-          color: #baeaff;
-        }
-        .value {
-          width: 80px;
-          color: #efae05;
-        }
+      color: #fff;
+      line-height: 32px;
+
+      .title {
+        width: 250px;
+        color: #baeaff;
+      }
+
+      .value {
+        width: 80px;
+        color: #efae05;
       }
     }
   }
-  .modal-monitor-box {
-    background-color: #000;
-    color: #fff;
-    padding: 0 5px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .title {
-      margin-right: 5px;
-    }
-    .signal-round {
-      margin-left: 5px;
-    }
-    .value {
-      width: 30px;
-      color: #efae05;
-    }
+}
+
+.modal-monitor-box {
+  background-color: #000;
+  color: #fff;
+  padding: 0 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .title {
+    margin-right: 5px;
   }
-  .device-state {
-    width: 100%;
-    position: absolute;
-    top: 20px;
-    color: #e90000;
-    display: flex;
-    justify-content: center;
-    font-size: 20px;
+
+  .signal-round {
+    margin-left: 5px;
   }
 
-  .lr {
-    margin-top: 0 !important;
+  .value {
+    width: 30px;
+    color: #efae05;
   }
-  .left-box {
-    width: 360px !important;
-    direction: rtl;
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: calc(100% - 60px);
-    margin-top: 30px !important;
-
-    .left-container {
-      direction: ltr;
-    }
+}
+
+.device-state {
+  width: 100%;
+  position: absolute;
+  top: 20px;
+  color: #e90000;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+}
+
+.lr {
+  margin-top: 0 !important;
+}
+
+.left-box {
+  width: 360px !important;
+  direction: rtl;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: calc(100% - 60px);
+  margin-top: 30px !important;
+
+  .left-container {
+    direction: ltr;
   }
-  .right-box {
-    width: 350px !important;
-    overflow-y: auto;
-    overflow-x: hidden;
-    .environment-monitor {
-      .item {
-        flex: 1;
-        margin: 0 5px;
-        .title {
-          color: #7ae5ff;
-          text-align: center;
-          margin-bottom: 2px;
-        }
-        .num {
-          width: 100%;
-          height: 30px;
-          text-align: center;
-          border-top: 2px solid #50c8fc;
-          border-radius: 4px;
-          background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
-        }
+}
+
+.right-box {
+  width: 350px !important;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  .environment-monitor {
+    .item {
+      flex: 1;
+      margin: 0 5px;
+
+      .title {
+        color: #7ae5ff;
+        text-align: center;
+        margin-bottom: 2px;
       }
-    }
-    .pool-box {
-      width: 327px;
-      height: 65px;
-      padding: 0 5px;
-      background: url('/@/assets/images/vent/pump1.png') no-repeat;
-      background-size: cover;
-      background-origin: content-box;
-      margin-top: 2px;
+
       .num {
-        color: aqua;
-      }
-      .center {
-        padding-right: 5px;
+        width: 100%;
+        height: 30px;
+        text-align: center;
+        border-top: 2px solid #50c8fc;
+        border-radius: 4px;
+        background-image: linear-gradient(#2e4d5955, #3780b499, #2e465955);
       }
     }
   }
-  .player-box {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    padding: 0 20px 0 20px;
-    z-index: 9999;
-    display: flex;
-    align-items: end;
-    bottom: 80px;
-    :deep(#LivePlayerBox) {
-      display: flex;
-      justify-content: end;
+
+  .pool-box {
+    width: 327px;
+    height: 65px;
+    padding: 0 5px;
+    background: url('/@/assets/images/vent/pump1.png') no-repeat;
+    background-size: cover;
+    background-origin: content-box;
+    margin-top: 2px;
+
+    .num {
+      color: aqua;
+    }
+
+    .center {
+      padding-right: 5px;
     }
   }
+}
 
-  .input-box {
-    width: calc(100%);
+.player-box {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  padding: 0 20px 0 20px;
+  z-index: 9999;
+  display: flex;
+  align-items: end;
+  bottom: 80px;
+
+  :deep(#LivePlayerBox) {
     display: flex;
-    flex-direction: row !important;
-    flex-wrap: wrap !important;
-    .input-item {
-      width: calc(50% - 8px);
-      padding: 0 2px;
-
-      &:nth-child(2n) {
-        margin-left: 4px;
-      }
+    justify-content: end;
+  }
+}
+
+.input-box {
+  width: calc(100%);
+  display: flex;
+  flex-direction: row !important;
+  flex-wrap: wrap !important;
+
+  .input-item {
+    width: calc(50% - 8px);
+    padding: 0 2px;
+
+    &:nth-child(2n) {
+      margin-left: 4px;
     }
   }
+}
+
+.btn-group {
+  display: flex;
+  justify-content: space-around;
+
+  .btn-item {
+    width: 82px;
+    text-align: center;
+  }
+}
+
+.top-btn {
   .btn-group {
-    display: flex;
-    justify-content: space-around;
+    margin-bottom: 8px;
+
     .btn-item {
-      width: 82px;
-      text-align: center;
+      width: calc(50% - 16px);
+      margin: 0 4px;
     }
   }
-  .top-btn {
-    .btn-group {
-      margin-bottom: 8px;
-      .btn-item {
-        width: calc(50% - 16px);
-        margin: 0 4px;
-      }
-    }
-    .control-item {
-      margin-left: 10px;
-      margin-bottom: 8px;
-      display: flex;
-      .control-title {
-        width: 80px;
-        color: var(--vent-font-action-link);
-      }
-      .control-container {
-        display: flex;
-      }
-    }
-  }
-  .btn-box {
+
+  .control-item {
+    margin-left: 10px;
+    margin-bottom: 8px;
     display: flex;
-    .btn {
-      padding: 0 8px !important;
-      margin: 0 2px;
+
+    .control-title {
+      width: 80px;
+      color: var(--vent-font-action-link);
     }
-  }
-  .state-header {
-    display: flex;
-    color: var(--vent-font-action-link);
-    .header-item {
-      width: 25%;
-      text-align: center;
+
+    .control-container {
+      display: flex;
     }
   }
-  .device-row {
-    display: flex;
-    margin-top: 10px;
-    .state {
-      width: 25%;
-      text-align: center;
-      font-size: 13px;
-    }
+}
+
+.btn-box {
+  display: flex;
+
+  .btn {
+    padding: 0 8px !important;
+    margin: 0 2px;
   }
+}
+
+.state-header {
+  display: flex;
+  color: var(--vent-font-action-link);
 
-  :deep(.@{ventSpace}-tabs-tabpane-active) {
-    overflow: auto;
+  .header-item {
+    width: 25%;
+    text-align: center;
   }
-  :deep(.list-item__background) {
-    background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
-    line-height: 30px !important;
-    height: 30px !important;
+}
+
+.device-row {
+  display: flex;
+  margin-top: 10px;
+
+  .state {
+    width: 25%;
+    text-align: center;
+    font-size: 13px;
   }
+}
+
+:deep(.@{ventSpace}-tabs-tabpane-active) {
+  overflow: auto;
+}
+
+:deep(.list-item__background) {
+  background-image: linear-gradient(to right, #39deff15, #3977e500) !important;
+  line-height: 30px !important;
+  height: 30px !important;
+}
 </style>

src/views/vent/monitorManager/gasPumpMonitor/gasPump.data.ts

@@ -521,6 +521,7 @@ export function getComponent() {
     default:
       // gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHome.vue'));
        gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeCopy.vue'));
+        // gasPumpHome = defineAsyncComponent(() => import('./components/gasPumpHomeBD.vue'));
       return gasPumpHome;
   }
 }

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

@@ -1,5 +1,7 @@
-import { BasicColumn } from '/@/components/Table';
+import { BasicColumn, FormSchema } from '/@/components/Table';
 import { render } from '/@/utils/common/renderUtils';
+import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+ import dayjs from 'dayjs';
 
 export const manageAutoColumns: BasicColumn[] = [
   {
@@ -83,3 +85,314 @@ export const manageAutoColumns1: BasicColumn[] = [
     align: 'center',
   },
 ];
+
+//安全监控预警历史
+export const safetyColumns: BasicColumn[] = [
+  {
+    title: '地址',
+    dataIndex: 'devName',
+    align: 'center',
+  },
+  // {
+  //   title: '报警等级',
+  //   dataIndex: 'alarmLevel',
+  //   customRender: ({ record }) => {
+  //     return render.renderDict(record.alarmLevel, 'leveltype');
+  //   },
+  //   width: 100,
+  //   align: 'center',
+  // },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceKind',
+    align: 'center',
+  },
+  {
+    title: '报警类型',
+    dataIndex: 'warnLevel',
+    align: 'center',
+  },
+  {
+    title: '报警开始时间',
+    dataIndex: 'starttime',
+    align: 'center',
+  },
+  // {
+  //   title: '报警结束时间',
+  //   dataIndex: 'endtime',
+  //   align: 'center',
+  // },
+
+];
+export const unsafetySchema: FormSchema[] = [
+  {
+    label: '是否解决',
+    field: 'isOk',
+    defaultValue: false,
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '未解决',
+          value: false,
+        },
+        {
+          label: '已解决',
+          value: true,
+        },
+      ],
+    },
+    colProps: { span: 4 },
+  },
+  {
+    label: '系统',
+    field: 'systemType',
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: '通风',
+          value: 'ventS',
+        },
+        {
+          label: '防灭火',
+          value: 'fireS',
+        },
+        {
+          label: '防尘',
+          value: 'dustS',
+        },
+        {
+          label: '瓦斯',
+          value: 'gasS',
+        },
+      ],
+    },
+    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',
+        },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+
+  {
+    field: 'starttime',
+    label: '开始时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer: getAutoScrollContainer,
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+  {
+    field: 'endtime',
+    label: '结束时间',
+    component: 'DatePicker',
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer: getAutoScrollContainer,
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+]
+
+export const safetySchema: FormSchema[] = [
+  {
+    field: 'devName',
+    label: '地址',
+    component: 'Input',
+    colProps: { span: 3 },
+  },
+  {
+    label: '报警类型',
+    field: 'warnLevel',
+    defaultValue: false,
+    component: 'Select',
+     componentProps: () => {
+      return {
+        dictCode: 'aqjkAlarmType',
+      };
+    },
+    colProps: { span: 4 },
+  },
+  {
+    label: '设备类型',
+    field: 'deviceKind',
+    defaultValue: false,
+    component: 'Select',
+     componentProps: () => {
+      return {
+        dictCode: 'aqjkAlarmDevType',
+      };
+    },
+    colProps: { span: 4 },
+  },
+  {
+    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',
+        },
+      ],
+    },
+    colProps: { span: 3 },
+  },
+
+  {
+    field: 'starttime',
+    label: '开始时间',
+    component: 'DatePicker',
+      defaultValue: dayjs().startOf('date'),
+    componentProps: {
+      showTime: true,
+      valueFormat: 'YYYY-MM-DD HH:mm:ss',
+      getPopupContainer: getAutoScrollContainer,
+    },
+    colProps: {
+      span: 4,
+    },
+  },
+  // {
+  //   field: 'endtime',
+  //   label: '结束时间',
+  //   component: 'DatePicker',
+  //   componentProps: {
+  //     showTime: true,
+  //     valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  //     getPopupContainer: getAutoScrollContainer,
+  //   },
+  //   colProps: {
+  //     span: 4,
+  //   },
+  // },
+]
+

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

@@ -20,6 +20,7 @@
   <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
     <a-tab-pane tab="设备预警历史" key="device" />
     <a-tab-pane tab="联动预警历史" key="manageAuto" />
+    <a-tab-pane tab="安全监控预警历史" key="safety" />
   </a-tabs>
   <div class="alarm-history-table">
     <BasicTable v-if="activeKey == 'device'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
@@ -29,7 +30,8 @@
       <template #bodyCell="{ column, record }">
         <template v-if="column.dict">
           <!-- 除了 101（蓝色预警）其他都是红色字体 -->
-          <span v-if="column.dataIndex === 'nwartype'" :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+          <span v-if="column.dataIndex === 'nwartype'"
+            :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
             {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
           </span>
           <span v-else>
@@ -38,14 +40,33 @@
         </template>
       </template>
     </BasicTable>
-    <BasicTable v-if="activeKey == 'manageAuto'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
+    <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>
       <template #bodyCell="{ column, record }">
         <template v-if="column.dict">
           <!-- 除了 101（蓝色预警）其他都是红色字体 -->
-          <span v-if="column.dataIndex === 'nwartype'" :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+          <span v-if="column.dataIndex === 'nwartype'"
+            :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
+            {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
+          </span>
+          <span v-else>
+            {{ render.renderDictText(record[column.dataIndex], column.dict) || '-' }}
+          </span>
+        </template>
+      </template>
+    </BasicTable>
+    <BasicTable v-if="activeKey == 'safety'" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 350 }">
+      <template #form-onExportXls>
+        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXlsPost()"> 导出</a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dict">
+          <!-- 除了 101（蓝色预警）其他都是红色字体 -->
+          <span v-if="column.dataIndex === 'nwartype'"
+            :class="{ 'color-#ff3823': ['102', '103', '104', '201', '1001'].includes(record.nwartype) }">
             {{ render.renderDictText(record.nwartype, 'leveltype') || '-' }}
           </span>
           <span v-else>
@@ -58,456 +79,330 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-  //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';
-  import { render } from '/@/utils/common/renderUtils';
-  const props = defineProps({
+//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, safetyColumns, safetySchema, unsafetySchema } from './alarm.data';
+
+import { list, getEachMineWarnCountInfo,getExportUrl } from './warning.api';
+import { useRoute } from 'vue-router';
+import customHeader from '/@/components/vent/customHeader.vue';
+import { render } from '/@/utils/common/renderUtils';
+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<any>(deviceColumns);
+const searchFormSchema = ref<any>(safetySchema);
+const paramType = ref('alarmLog');
+
+
+
+
+function onChangeTab(tab) {
+  activeKey.value = tab
+  if (tab === 'device') {
+    paramType.value = 'alarmLog';
+    dataColumns.value = deviceColumns;
+    searchFormSchema.value = unsafetySchema
+  } else if (tab == 'manageAuto') {
+    paramType.value = 'autoLog';
+    dataColumns.value = manageAutoColumns1;
+    searchFormSchema.value = unsafetySchema
+  } else {
+    paramType.value = 'aqjkAlarmLog';
+    dataColumns.value = safetyColumns;
+    searchFormSchema.value = safetySchema
+  }
+}
+
+
+// 列表页面公共参数、方法
+const { tableContext, onExportXls,onExportXlsPost } = useListPage({
+  tableProps: {
+    api: list,
+    columns: dataColumns,
+    canResize: true,
+    showTableSetting: false,
+    showActionColumn: false,
+    showIndexColumn: true,
+    bordered: false,
+    size: 'small',
     formConfig: {
-      type: Object as PropType<FormProps> | undefined,
-      default: undefined,
+      labelAlign: 'left',
+      showAdvancedButton: false,
+      // autoAdvancedCol: 4,
+      // labelWidth:50,
+      schemas: searchFormSchema as any
     },
-  });
-  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,
-      showIndexColumn: true,
-      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,
-                },
-              ],
-            },
-            colProps: { span: 4 },
-          },
-          {
-            label: '系统',
-            field: 'systemType',
-            component: 'Select',
-            componentProps: {
-              options: [
-                {
-                  label: '通风',
-                  value: 'ventS',
-                },
-                {
-                  label: '防灭火',
-                  value: 'fireS',
-                },
-                {
-                  label: '防尘',
-                  value: 'dustS',
-                },
-                {
-                  label: '瓦斯',
-                  value: 'gasS',
-                },
-              ],
-            },
-            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',
-                },
-              ],
-            },
-            colProps: { span: 3 },
-          },
-
-          {
-            field: 'starttime',
-            label: '开始时间',
-            component: 'DatePicker',
-            componentProps: {
-              showTime: true,
-              valueFormat: 'YYYY-MM-DD HH:mm:ss',
-              getPopupContainer: getAutoScrollContainer,
-            },
-            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',
-      },
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '30', '50', '100'],
-      },
-      beforeFetch(params) {
-        params.type = paramType.value;
-        return params;
-      },
+    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;
-
-  function onChangeTab(tab) {
-    if (tab === 'device') {
-      paramType.value = 'alarmLog';
-      dataColumns.value = deviceColumns;
-    } else {
-      paramType.value = 'autoLog';
-      dataColumns.value = manageAutoColumns1;
-    }
-  }
+    beforeFetch(params) {
+      params.type = paramType.value;
+      return params;
+    },
+  },
+  exportConfig: {
+    name: '预警历史列表',
+    url: () => getExportUrl(activeKey.value)
+  },
+});
+//注册table数据
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
+
+
+
+
+//获取预警统计信息
+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 || '';
+}
+
+const orgname = ref<any>('');
+
+onMounted(async () => {
+  orgname.value = route.query.orgname;
+  getEachMineWarnCountInfoList();
+});
+
+defineExpose({ setLoading });
+</script>
 
-  //获取预警统计信息
-  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 || '';
-  }
+<style scoped lang="less">
+@import '/@/design/theme.less';
+@ventSpace: zxm;
 
-  const orgname = ref<any>('');
+:deep(.zxm-table-container) {
+  max-height: 720px !important;
+}
 
-  onMounted(async () => {
-    orgname.value = route.query.orgname;
-    getEachMineWarnCountInfoList();
-  });
+:deep(.ventSpace-table-body) {
+  height: auto !important;
+}
 
-  defineExpose({ setLoading });
-</script>
+:deep(.zxm-picker) {
+  height: 30px !important;
+}
 
-<style scoped lang="less">
-  @import '/@/design/theme.less';
-  @ventSpace: zxm;
+:deep(.@{ventSpace}-picker-dropdown) {
+  position: absolute !important;
+  top: 35px !important;
+  left: 0 !important;
+}
 
-  :deep(.zxm-table-container) {
-    max-height: 720px !important;
+@{theme-deepblue} {
+  .data-statistics {
+    --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
+    --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
+    --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
+    --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
+    --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
+    --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
   }
 
-  :deep(.ventSpace-table-body) {
-    height: auto !important;
+  .tab-box {
+    --table-border: #0eb3ff66;
+    --tab-bg: linear-gradient(#001325, #051f4a);
+    --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
+    --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
   }
+}
+
+.data-statistics {
+  --image-vent-tf: url('/@/assets/images/vent-tf.png');
+  --image-dust-fc: url('/@/assets/images/dust-fc.png');
+  --image-gas-ws: url('/@/assets/images/gas-ws.png');
+  --image-fire-fz: url('/@/assets/images/fire-fz.png');
+  --image-aqjc: url('/@/assets/images/aqjc.png');
+  --image-his-one: url('/@/assets/images/his-one.png');
+  height: 200px;
+  padding: 20px;
+  margin-top: 90px;
+  background-color: #0ebbff15;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .statistics-box {
+    display: flex;
+    flex: 1;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
 
-  :deep(.zxm-picker) {
-    height: 30px !important;
-  }
+    .left-box {
+      position: relative;
+      width: 138px;
+      height: 100%;
 
-  :deep(.@{ventSpace}-picker-dropdown) {
-    position: absolute !important;
-    top: 35px !important;
-    left: 0 !important;
-  }
+      .box-title {
+        position: absolute;
+        left: 50%;
+        bottom: 18px;
+        transform: translate(-50%, 0);
+        color: #fff;
+      }
+    }
 
-  @{theme-deepblue} {
-    .data-statistics {
-      --image-vent-tf: url('/@/assets/images/themify/deepblue/vent-tf.png');
-      --image-dust-fc: url('/@/assets/images/themify/deepblue/dust-fc.png');
-      --image-gas-ws: url('/@/assets/images/themify/deepblue/gas-ws.png');
-      --image-fire-fz: url('/@/assets/images/themify/deepblue/fire-fz.png');
-      --image-aqjc: url('/@/assets/images/themify/deepblue/aqjc.png');
-      --image-his-one: url('/@/assets/images/themify/deepblue/his-one.png');
+    &:nth-child(1) .left-box {
+      background: var(--image-vent-tf) no-repeat center;
+      background-size: 100% auto;
     }
 
-    .tab-box {
-      --table-border: #0eb3ff66;
-      --tab-bg: linear-gradient(#001325, #051f4a);
-      --image-top-btn: url('/@/assets/images/themify/deepblue/top-btn.png');
-      --image-top-btn-select: url('/@/assets/images/themify/deepblue/top-btn-select.png');
+    &:nth-child(2) .left-box {
+      background: var(--image-dust-fc) no-repeat center;
+      background-size: 100% auto;
     }
-  }
 
-  .data-statistics {
-    --image-vent-tf: url('/@/assets/images/vent-tf.png');
-    --image-dust-fc: url('/@/assets/images/dust-fc.png');
-    --image-gas-ws: url('/@/assets/images/gas-ws.png');
-    --image-fire-fz: url('/@/assets/images/fire-fz.png');
-    --image-aqjc: url('/@/assets/images/aqjc.png');
-    --image-his-one: url('/@/assets/images/his-one.png');
-    height: 200px;
-    padding: 20px;
-    margin-top: 90px;
-    background-color: #0ebbff15;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    &:nth-child(3) .left-box {
+      background: var(--image-gas-ws) no-repeat center;
+      background-size: 100% auto;
+    }
 
-    .statistics-box {
-      display: flex;
-      flex: 1;
+    &:nth-child(4) .left-box {
+      background: var(--image-fire-fz) no-repeat center;
+      background-size: 100% auto;
+    }
+
+    &:nth-child(5) .left-box {
+      background: var(--image-aqjc) no-repeat center;
+      background-size: 100% auto;
+    }
+
+    .right-box {
+      position: relative;
+      width: 215px;
       height: 100%;
-      justify-content: center;
+      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: var(--image-his-one) 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: var(--image-vent-tf) no-repeat center;
-        background-size: 100% auto;
-      }
-
-      &:nth-child(2) .left-box {
-        background: var(--image-dust-fc) no-repeat center;
-        background-size: 100% auto;
-      }
 
-      &:nth-child(3) .left-box {
-        background: var(--image-gas-ws) no-repeat center;
-        background-size: 100% auto;
-      }
-
-      &:nth-child(4) .left-box {
-        background: var(--image-fire-fz) no-repeat center;
-        background-size: 100% auto;
-      }
-
-      &:nth-child(5) .left-box {
-        background: var(--image-aqjc) 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;
-
-        .box-text {
-          position: relative;
-          width: 100%;
-          height: 40px;
-          color: #fff;
-          background: var(--image-his-one) 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%);
-            font-family: 'douyuFont';
-          }
+        .text-value {
+          position: absolute;
+          left: 130px;
+          top: 50%;
+          transform: translate(0, -50%);
+          font-family: 'douyuFont';
         }
+      }
 
-        .warning-state {
-          .text-value {
-            color: aqua !important;
-            font-family: 'douyuFont';
-          }
+      .warning-state {
+        .text-value {
+          color: aqua !important;
+          font-family: 'douyuFont';
         }
       }
     }
   }
+}
+
+.tab-box {
+  --table-border: #0efcff44;
+  --tab-bg: linear-gradient(#001325, #012e4f);
+  --image-top-btn: url('/@/assets/images/top-btn.png');
+  --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
+  display: flex;
+  color: #fff;
+  position: relative;
+  top: 11px;
+  background: var(--tab-bg);
+
+  :deep(.zxm-tabs-nav) {
+    margin: 0 !important;
+
+    .zxm-tabs-tab {
+      width: 180px;
+      height: 45px;
+      background: var(--image-top-btn) center no-repeat;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      font-size: 16px;
+    }
 
-  .tab-box {
-    --table-border: #0efcff44;
-    --tab-bg: linear-gradient(#001325, #012e4f);
-    --image-top-btn: url('/@/assets/images/top-btn.png');
-    --image-top-btn-select: url('/@/assets/images/top-btn-select.png');
-    display: flex;
-    color: #fff;
-    position: relative;
-    top: 11px;
-    background: var(--tab-bg);
-
-    :deep(.zxm-tabs-nav) {
-      margin: 0 !important;
-
-      .zxm-tabs-tab {
-        width: 180px;
-        height: 45px;
-        background: var(--image-top-btn) center no-repeat;
-        background-size: cover;
-        display: flex;
-        justify-content: center;
-        font-size: 16px;
-      }
-
-      .zxm-tabs-tab-active {
-        width: 180px;
-        position: relative;
-        background: var(--image-top-btn-select) center no-repeat;
-        background-size: cover;
-
-        .zxm-tabs-tab-btn {
-          color: #fff !important;
-        }
-      }
+    .zxm-tabs-tab-active {
+      width: 180px;
+      position: relative;
+      background: var(--image-top-btn-select) center no-repeat;
+      background-size: cover;
 
-      .zxm-tabs-ink-bar {
-        width: 0 !important;
+      .zxm-tabs-tab-btn {
+        color: #fff !important;
       }
+    }
 
-      .zxm-tabs-tab + .zxm-tabs-tab {
-        margin: 0 !important;
-      }
+    .zxm-tabs-ink-bar {
+      width: 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 var(--table-border);
+    .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 var(--table-border);
+  }
+}
 </style>

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

@@ -7,6 +7,8 @@ enum Api {
   getWarnCountInfo = '/monitor/groupCompany/getWarnCountInfo', // 获取矿端信息
   getAlarmLogList = '/monitor/groupCompany/getAlarmLogList', //获取各矿预警统计信息
   getManageAutoLogList = '/monitor/groupCompany/getManageAutoLogList', //获取各矿工作面智能管控预警信息
+  exportXls = '/safety/ventanalyAlarmLog/exportXls',//导出
+  exportSensorDayAlarmReport = '/ventanaly-company/company/index/exportSensorDayAlarmReport'//导出各矿传感器预警历史日统计报表
 }
 /**
  * 列表接口
@@ -22,3 +24,12 @@ export const getEachMineWarnCountInfo = (params) => defHttp.post({ url: Api.getE
 export const getWarnCountInfo = (params) => defHttp.post({ url: Api.getWarnCountInfo, params });
 export const getAlarmLogList = (params) => defHttp.post({ url: Api.getAlarmLogList, params });
 export const getManageAutoLogList = (params) => defHttp.post({ url: Api.getManageAutoLogList, params });
+
+export const getExportUrl = (active) => {
+  console.log(active, '999')
+  if (active == 'safety') {
+    return Api.exportSensorDayAlarmReport;
+  } else {
+    return Api.exportXls;
+  }
+};