设备预警监测修改-提交

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

@@ -395,7 +395,8 @@ function showModal(data) {
       router.push('/gas/warn/home');
       break;
     case 'sbyj':
-      router.push('/device/warn/home');
+      // router.push('/device/warn/home');
+      router.push('/monitorChannel/device-monitor/deviceHistory/home')
       break;
   }
 }

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

@@ -0,0 +1,19 @@
+import { reactive, markRaw, defineAsyncComponent } from 'vue';
+
+export let cardList = reactive<any[]>([
+    { name: 'modelsensor', title: '传感器', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'fanmain', title: '主风机', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'fanlocal', title: '局部风机', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'gate', title: '风门', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'window', title: '风窗', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'windrect', title: '测风装置', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'forcFan', title: '压风装置', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'spray', title: '喷淋', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'dustdev', title: '喷粉', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'nitrogen', title: '注氮', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'pulping', title: '注浆', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'atomizing', title: '跟机喷雾', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'dustsensor', title: '除尘器', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'gas', title: '瓦斯抽采管路', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+    { name: 'pump', title: '瓦斯泵', sumVal: 0, warnVal: 0, closeVal: 0, devicekind: '' },
+])

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

@@ -1,6 +1,8 @@
 <template>
     <div class="deviceMonitorWarn">
         <customHeader>设备监测预警</customHeader>
+        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
+            style="position: absolute; left: 15px; top: -66px; color: #fff" @click="getBack">返回</a-button>
         <div class="content">
             <div class="left-box">
                 <div class="left-box-content">
@@ -30,7 +32,7 @@
             <div class="right-box">
                 <div class="right-box-content">
                     <div class="alarm-history-table">
-                        <BasicTable ref="alarmHistory" @register="registerTable"
+                        <BasicTable :key="isShow" ref="alarmHistory" @register="registerTable"
                             :scroll="{ x: 0, y: 590 }">
                             <template #form-onExportXls>
                                 <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()">
@@ -47,11 +49,13 @@
 <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 { getTotalList, getAlarmLogList } from './deviceMonitorWarn.api'
+import {cardList} from './deviceMonitorWarn.data'
 import { BasicTable } from '/@/components/Table';
 import { useListPage } from '/@/hooks/system/useListPage';
 import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
 import { getAutoScrollContainer } from '/@/utils/common/compUtils';
+import { useRouter } from 'vue-router';
 
 const props = defineProps({
     formConfig: {
@@ -60,151 +64,129 @@ const props = defineProps({
     },
 });
 
+let router = useRouter();
 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 },
-])
+let devicekindType = ref('modelsensor')
+let isShow = ref(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: [
+        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: '通风',
-                  value: 'ventS',
+                    label: '是否解决',
+                    // field: 'isok',
+                    field: 'isOk',
+                    defaultValue: false,
+                    component: 'Select',
+                    componentProps: {
+                        options: [
+                            {
+                                label: '未解决',
+                                value: false,
+                            },
+                            {
+                                label: '已解决',
+                                value: true,
+                            },
+                        ],
+                    },
+                    colProps: { span: 8, },
                 },
                 {
-                  label: '防灭火',
-                  value: 'fireS',
+                    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 },
+                // },
                 {
-                  label: '防尘',
-                  value: 'dustS',
+                    field: 'starttime',
+                    label: '开始时间',
+                    component: 'DatePicker',
+                    componentProps: {
+                        showTime: true,
+                        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+                        getPopupContainer: getAutoScrollContainer,
+                    },
+                    colProps: {
+                        span: 8,
+                    },
                 },
-                {
-                  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;
-      },
+            ],
+        },
+        fetchSetting: {
+            listField: 'records',
+        },
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            pageSizeOptions: ['10', '30', '50', '100'],
+        },
+        beforeFetch(params) {
+            params['deviceKind'] = devicekindType.value;
+            return params;
+        },
     },
     exportConfig: {
-      name: '预警历史列表',
-      url: '/safety/ventanalyAlarmLog/exportXls',
+        name: '预警历史列表',
+        url: '/safety/ventanalyAlarmLog/exportXls',
     },
-  });
-  //注册table数据
-  const [registerTable, { reload, setLoading, getForm }] = tableContext;
+});
+//注册table数据
+const [registerTable, { reload, setLoading, getForm }] = tableContext;
 
+//返回上一级
+function getBack() {
+    router.push('/monitorChannel/monitor-alarm-home');
+}
 //选项切换
 function cardClick(item, index) {
     activeIndex.value = index
+    devicekindType.value = item.devicekind
+    isShow.value = new Date().getTime()
 }
 //获取左侧选项数据
 async function getDeviceCard() {
@@ -215,6 +197,7 @@ async function getDeviceCard() {
             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
+            el.devicekind = res.info.devicekindInfo[el.name].code || ''
         }
     })
 }
@@ -229,6 +212,7 @@ defineExpose({ setLoading });
 
 <style lang="less" scoped>
 .deviceMonitorWarn {
+    position: relative;
     width: calc(100% - 20px);
     height: calc(100% - 90px);
     position: relative;
@@ -265,77 +249,76 @@ defineExpose({ setLoading });
                     margin: 0px 5px;
 
                     &:nth-child(1) {
-                        background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
+                        background: url('../../../../assets/images/device/cgq.png') no-repeat center;
                         background-size: 100% 100%;
                     }
-
                     &:nth-child(2) {
-                        background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(3) {
-                        background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
+                        background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(4) {
-                        background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
+                        background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(5) {
-                        background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
+                        background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(6) {
-                        background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
+                        background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(7) {
-                        background: url('../../../../assets/images/device/penling.png') no-repeat center;
+                        background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(8) {
-                        background: url('../../../../assets/images/device/penfen.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penling.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(9) {
-                        background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penfen.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(10) {
-                        background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(11) {
-                        background: url('../../../../assets/images/device/penwu.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(12) {
-                        background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penwu.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(13) {
-                        background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
+                        background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(14) {
-                        background: url('../../../../assets/images/device/wsb.png') no-repeat center;
+                        background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(15) {
-                        background: url('../../../../assets/images/device/cgq.png') no-repeat center;
+                        background: url('../../../../assets/images/device/wsb.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
@@ -380,80 +363,78 @@ defineExpose({ setLoading });
                     margin: 0px 5px;
 
                     &:nth-child(1) {
-                        background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
-
                     &:nth-child(2) {
-                        background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(3) {
-                        background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(4) {
-                        background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(5) {
-                        background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(6) {
-                        background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(7) {
-                        background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(8) {
-                        background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(9) {
-                        background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(10) {
-                        background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(11) {
-                        background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(12) {
-                        background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(13) {
-                        background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(14) {
-                        background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
 
                     &:nth-child(15) {
-                        background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
+                        background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
                         background-size: 100% 100%;
                     }
-
                     .card-item {
                         position: relative;
                         width: 100%;