设备预警监测及5.5首页风量监测修改提交

src/views/vent/home/colliery/components/wind-monitor.vue

@@ -8,292 +8,303 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-  import * as echarts from 'echarts';
-  const emit = defineEmits(['goDetail']);
+import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+const emit = defineEmits(['goDetail']);
 
-  let props = defineProps({
-    flList: Array,
-  });
+let props = defineProps({
+  flList: Array,
+});
 
-  //获取dom节点
-  let windBar = ref<any>();
-  //坐标轴最大值
-  let maxY = ref(0);
-  //echart数据
-  let echartData = reactive<any>({ ydata: [], xdata: [] });
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'windrect');
-  }
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(windBar.value);
-      let option = {
-        color: [
-          '#63caff',
-          '#49beff',
-          'rgba(74, 205, 255,.1)',
-          '#03387a',
-          '#03387a',
-          '#6c93ee',
-          '#a9abff',
-          '#f7a23f',
-          '#27bae7',
-          '#ff6d9d',
-          '#cb79ff',
-          '#f95b5a',
-          '#ccaf27',
-          '#38b99c',
-          '#93d0ff',
-          '#bd74e0',
-          '#fd77da',
-          '#dea700',
-        ],
-        grid: {
-          containLabel: true,
-          left: 30,
-          right: 30,
-          bottom: 10,
-          top: 40,
-        },
+//获取dom节点
+let windBar = ref<any>();
+//坐标轴最大值
+let maxY = ref(0);
+//echart数据
+let echartData = reactive<any>({ ydata: [], xdata: [] });
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'windrect');
+}
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(windBar.value);
+    let option = {
+      color: [
+        '#63caff',
+        '#49beff',
+        'rgba(74, 205, 255,.1)',
+        '#03387a',
+        '#03387a',
+        '#6c93ee',
+        '#a9abff',
+        '#f7a23f',
+        '#27bae7',
+        '#ff6d9d',
+        '#cb79ff',
+        '#f95b5a',
+        '#ccaf27',
+        '#38b99c',
+        '#93d0ff',
+        '#bd74e0',
+        '#fd77da',
+        '#dea700',
+      ],
+      grid: {
+        containLabel: true,
+        left: 30,
+        right: 30,
+        bottom: 30,
+        top: 40,
+      },
 
-        xAxis: {
-          type: 'category',
-          data: echartData.xdata,
-          axisLabel: {
-            formatter: function (params) {
-              var newParamsName = ''; // 最终拼接成的字符串
-              var paramsNameNumber = params.length; // 实际标签的个数
-              var provideNumber = 6; // 每行能显示的字的个数
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber > provideNumber) {
-                /** 循环每一行,p表示行 */
-                for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ''; // 表示每一次截取的字符串
-                  var start = p * provideNumber; // 开始截取的位置
-                  var end = start + provideNumber; // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p == rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber);
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n';
-                  }
-                  newParamsName += tempStr; // 最终拼成的字符串
+      xAxis: {
+        type: 'category',
+        data: echartData.xdata,
+        axisLabel: {
+          formatter: function (params) {
+            var newParamsName = ''; // 最终拼接成的字符串
+            var paramsNameNumber = params.length; // 实际标签的个数
+            var provideNumber = 6; // 每行能显示的字的个数
+            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
+            /**
+             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+             */
+            // 条件等同于rowNumber>1
+            if (paramsNameNumber > provideNumber) {
+              /** 循环每一行,p表示行 */
+              for (var p = 0; p < rowNumber; p++) {
+                var tempStr = ''; // 表示每一次截取的字符串
+                var start = p * provideNumber; // 开始截取的位置
+                var end = start + provideNumber; // 结束截取的位置
+                // 此处特殊处理最后一行的索引值
+                if (p == rowNumber - 1) {
+                  // 最后一次不换行
+                  tempStr = params.substring(start, paramsNameNumber);
+                } else {
+                  // 每一次拼接字符串并换行
+                  tempStr = params.substring(start, end) + '\n';
                 }
-              } else {
-                // 将旧标签的值赋给新标签
-                newParamsName = params;
+                newParamsName += tempStr; // 最终拼成的字符串
               }
-              //将最终的字符串返回
-              return newParamsName;
-            },
-            fontSize: 14,
-            margin: 15,
-            interval: 0,
-            textStyle: {
-              color: '#b3b8cc',
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164)',
-            },
+            } else {
+              // 将旧标签的值赋给新标签
+              newParamsName = params;
+            }
+            //将最终的字符串返回
+            return newParamsName;
           },
-          splitLine: {
-            show: false,
+          fontSize: 14,
+          margin: 15,
+          interval: 0,
+          textStyle: {
+            color: '#b3b8cc',
           },
-          axisTick: {
-            show: false,
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164)',
           },
         },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
 
-        yAxis: {
-          type: 'value',
-          name: '(m³/min)',
-          // max: maxY.value,
-          axisLabel: {
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
-            },
-          },
-          nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            lineHeight: 10,
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(62, 103, 164,.4)',
-            },
-          },
-          axisLine: {
-            show: false,
+      yAxis: {
+        type: 'value',
+        name: '(m³/min)',
+        // max: maxY.value,
+        axisLabel: {
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
           },
-          axisTick: {
-            show: false,
+        },
+        nameTextStyle: {
+          color: '#fff',
+          fontSize: 12,
+          lineHeight: 10,
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(62, 103, 164,.4)',
           },
         },
-        series: [
-          {
-            data: echartData.ydata,
-            type: 'bar',
-            barMaxWidth: 'auto',
-            barWidth: 25,
-            itemStyle: {
-              color: {
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                type: 'linear',
-                global: false,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: '#0b9eff',
-                  },
-                  {
-                    offset: 1,
-                    color: '#63caff',
-                  },
-                ],
-              },
-            },
-            label: {
-              show: true,
-              position: 'top',
-              distance: 10,
-              color: '#fff',
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          data: echartData.ydata,
+          type: 'bar',
+          barMaxWidth: 'auto',
+          barWidth: 25,
+          itemStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              type: 'linear',
+              global: false,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#0b9eff',
+                },
+                {
+                  offset: 1,
+                  color: '#63caff',
+                },
+              ],
             },
           },
-          {
-            data: [1, 1, 1, 1, 1, 1, 1, 1],
-            type: 'pictorialBar',
-            barMaxWidth: '25',
-            symbol: 'diamond',
-            symbolOffset: [0, '50%'],
-            symbolSize: [25, 15],
-          },
-          {
-            data: echartData.ydata,
-            type: 'pictorialBar',
-            barMaxWidth: '25',
-            symbolPosition: 'end',
-            symbol: 'diamond',
-            symbolOffset: [0, '-50%'],
-            symbolSize: [25, 12],
-            zlevel: 2,
-          },
-          {
-            data: [741, 741, 741, 741, 741, 741, 741, 741],
-            type: 'bar',
-            barMaxWidth: 'auto',
-            barWidth: 25,
-            barGap: '-100%',
-            zlevel: -1,
-          },
-          {
-            data: [1, 1, 1, 1, 1, 1, 1, 1],
-            type: 'pictorialBar',
-            barMaxWidth: '25',
-            symbol: 'diamond',
-            symbolOffset: [0, '50%'],
-            symbolSize: [25, 15],
-            zlevel: -2,
-          },
-          {
-            data: [741, 741, 741, 741, 741, 741, 741, 741],
-            type: 'pictorialBar',
-            barMaxWidth: '25',
-            symbolPosition: 'end',
-            symbol: 'diamond',
-            symbolOffset: [0, '-50%'],
-            symbolSize: [25, 12],
-            zlevel: -1,
+          label: {
+            show: true,
+            position: 'top',
+            distance: 10,
+            color: '#fff',
           },
-        ],
-        tooltip: {
-          trigger: 'axis',
-          show: false,
         },
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+        {
+          data: [1, 1, 1, 1, 1, 1, 1, 1],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [25, 15],
+        },
+        {
+          data: echartData.ydata,
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbolPosition: 'end',
+          symbol: 'diamond',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [25, 12],
+          zlevel: 2,
+        },
+        {
+          data: [741, 741, 741, 741, 741, 741, 741, 741],
+          type: 'bar',
+          barMaxWidth: 'auto',
+          barWidth: 25,
+          barGap: '-100%',
+          zlevel: -1,
+        },
+        {
+          data: [1, 1, 1, 1, 1, 1, 1, 1],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbol: 'diamond',
+          symbolOffset: [0, '50%'],
+          symbolSize: [25, 15],
+          zlevel: -2,
+        },
+        {
+          data: [741, 741, 741, 741, 741, 741, 741, 741],
+          type: 'pictorialBar',
+          barMaxWidth: '25',
+          symbolPosition: 'end',
+          symbol: 'diamond',
+          symbolOffset: [0, '-50%'],
+          symbolSize: [25, 12],
+          zlevel: -1,
+        },
+      ],
+      dataZoom: [{ // 这部分是关键
+        type: 'slider', // 这里可以选择你需要的类型，例如 'inside'
+        start: 0, // 数据窗口范围的起始百分比
+        end: 75, // 数据窗口范围的结束百分比
+        height: 10, // 设置缩放条高度
+        left: 'center',
+        bottom: 25,
+        labelPrecision: 0, // 标签精度，默认为auto
+        showDetail: false, // 是否显示详情
+        showDataShadow: false, // 是否显示数据阴影
+      }],
+      tooltip: {
+        trigger: 'axis',
+        show: false,
+      },
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  function formatRoundNum(num) {
-    let interger = Math.ceil(num);
-    let leng = String(interger).length;
-    return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
-  }
+function formatRoundNum(num) {
+  let interger = Math.ceil(num);
+  let leng = String(interger).length;
+  return Math.ceil(interger / Math.pow(10, leng - 1)) * Math.pow(10, leng - 1);
+}
 
-  watch(
-    () => props.flList,
-    (val) => {
-      echartData.xdata.length = 0;
-      echartData.ydata.length = 0;
-      val.forEach((el: any) => {
-        if (el.readData.m3) {
-          echartData.xdata.push(el.strinstallpos);
-          echartData.ydata.push(el.readData.m3);
-        }
-      });
-      let max = echartData.ydata.reduce((acr, cur) => {
-        return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
-      });
-      maxY.value = formatRoundNum(max * 1.5);
-      getOption();
-    },
-    {
-      deep: true,
-    }
-  );
+watch(
+  () => props.flList,
+  (val) => {
+    echartData.xdata.length = 0;
+    echartData.ydata.length = 0;
+    val.forEach((el: any) => {
+      if (el.readData.m3) {
+        echartData.xdata.push(el.strinstallpos);
+        echartData.ydata.push(el.readData.m3);
+      }
+    });
+    let max = echartData.ydata.reduce((acr, cur) => {
+      return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
+    });
+    maxY.value = formatRoundNum(max * 1.5);
+    getOption();
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  .windMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
+.windMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
 
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
 
-      &:hover {
-        color: #66ffff;
-      }
+    &:hover {
+      color: #66ffff;
     }
+  }
 
-    .wind-contents {
-      position: absolute;
-      left: 0;
-      top: 36px;
-      width: 100%;
-      height: calc(100% - 36px);
+  .wind-contents {
+    position: absolute;
+    left: 0;
+    top: 36px;
+    width: 100%;
+    height: calc(100% - 36px);
 
-      .wind-bar {
-        width: 100%;
-        height: 100%;
-      }
+    .wind-bar {
+      width: 100%;
+      height: 100%;
     }
   }
+}
 </style>

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

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

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

@@ -1,19 +1,19 @@
 import { reactive, markRaw, defineAsyncComponent } from 'vue';
 
 export const 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: '' },
+  { 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,40 +1,32 @@
 <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
-    >
+    <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">
-          <div
-            :class="activeIndex == index ? 'card-box1' : 'card-box'"
-            v-for="(item, index) in cardList"
-            :key="index"
-            @click="cardClick(item, index)"
-          >
-            <div class="card-item">
-              <div class="item-title">
-                {{ item.title }}
-              </div>
-              <div class="item-sum">
-                <span>总数：</span>
-                <span> {{ item.sumVal }}</span>
-              </div>
-              <div class="item-warn">
-                <span>报警数：</span>
-                <span> {{ item.warnVal }}</span>
-              </div>
-              <div class="item-close">
-                <span>断开数：</span>
-                <span> {{ item.closeVal }}</span>
+          <div v-for="(item, index) in cardList" :key="index" @click="cardClick(item, index)">
+            <div v-if="item.title" :class="activeIndex == index ? 'card-box1' : 'card-box'">
+              <div class="card-item">
+                <div class="item-title">
+                  {{ item.title }}
+                </div>
+                <div class="item-sum">
+                  <span>总数：</span>
+                  <span> {{ item.sumVal }}</span>
+                </div>
+                <div class="item-warn">
+                  <span>报警数：</span>
+                  <span> {{ item.warnVal }}</span>
+                </div>
+                <div class="item-close">
+                  <span>断开数：</span>
+                  <span> {{ item.closeVal }}</span>
+                </div>
               </div>
             </div>
+
           </div>
         </div>
       </div>
@@ -54,458 +46,459 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
-  import customHeader from '/@/components/vent/customHeader.vue';
-  import { getTotalList, getAlarmLogList } from './deviceMonitorWarn.api';
-  import { 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({
+import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
+import customHeader from '/@/components/vent/customHeader.vue';
+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: {
+    type: Object as PropType<FormProps> | undefined,
+    default: undefined,
+  },
+});
+
+let router = useRouter();
+let activeIndex = ref(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,
+    showIndexColumn: true,
+    bordered: false,
+    size: 'small',
     formConfig: {
-      type: Object as PropType<FormProps> | undefined,
-      default: undefined,
-    },
-  });
-
-  let router = useRouter();
-  let activeIndex = ref(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,
-      showIndexColumn: true,
-      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 },
+      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,
+              },
+            ],
           },
-          {
-            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 },
+          colProps: { span: 8 },
+        },
+        {
+          label: '所属系统',
+          // field: 'kindtype',systemType
+          field: 'systemType',
+          component: 'Select',
+          componentProps: {
+            options: [
+              {
+                label: '通风',
+                value: 'ventS',
+              },
+              {
+                label: '防灭火',
+                value: 'fireS',
+              },
+              {
+                label: '防尘',
+                value: 'dustS',
+              },
+              {
+                label: '瓦斯',
+                value: 'gasS',
+              },
+            ],
           },
-          // {
-          //     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,
-            },
+          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,
           },
-        ],
-      },
-      fetchSetting: {
-        listField: 'records',
-      },
-      pagination: {
-        current: 1,
-        pageSize: 10,
-        pageSizeOptions: ['10', '30', '50', '100'],
-      },
-      beforeFetch(params) {
-        params['deviceKind'] = devicekindType.value;
-        return params;
-      },
+          colProps: {
+            span: 8,
+          },
+        },
+      ],
+    },
+    fetchSetting: {
+      listField: 'records',
+    },
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '30', '50', '100'],
     },
-    exportConfig: {
-      name: '预警历史列表',
-      url: '/safety/ventanalyAlarmLog/exportXls',
+    beforeFetch(params) {
+      params['deviceKind'] = devicekindType.value;
+      return params;
     },
+  },
+  exportConfig: {
+    name: '预警历史列表',
+    url: '/safety/ventanalyAlarmLog/exportXls',
+  },
+});
+//注册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() {
+  let res = await getTotalList();
+  console.log(res, '左侧选项数据----------');
+  cardList.forEach((el) => {
+    if (res.device[el.name]) {
+      el.sumVal = res.device[el.name].totalcount || 0;
+      el.warnVal = res.device[el.name].count || 0;
+      el.closeVal = res.device[el.name].netstatus || 0;
+      el.devicekind = res.device[el.name].code || '';
+      el.title= res.device[el.name].name || '';
+    }
   });
-  //注册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() {
-    let res = await getTotalList({});
-    console.log(res, '左侧选项数据----------');
-    cardList.forEach((el) => {
-      if (res.info.devicekindInfo[el.name]) {
-        el.sumVal = res.info.devicekindInfo[el.name].totalcount || 0;
-        el.warnVal = res.info.devicekindInfo[el.name].count || 0;
-        el.closeVal = res.info.devicekindInfo[el.name].netstatus || 0;
-        el.devicekind = res.info.devicekindInfo[el.name].code || '';
-      }
-    });
-  }
+}
 
-  onMounted(() => {
-    getDeviceCard();
-  });
-  defineExpose({ setLoading });
+onMounted(() => {
+  getDeviceCard();
+});
+defineExpose({ setLoading });
 </script>
 
 <style lang="less" scoped>
-  .deviceMonitorWarn {
+.deviceMonitorWarn {
+  position: relative;
+  width: calc(100% - 20px);
+  height: calc(100% - 90px);
+  position: relative;
+  margin: 80px 10px 10px 10px;
+
+  .content {
     position: relative;
-    width: calc(100% - 20px);
-    height: calc(100% - 90px);
-    position: relative;
-    margin: 80px 10px 10px 10px;
-
-    .content {
-      position: relative;
-      width: 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left-box {
+      width: 45%;
       height: 100%;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
+      // margin-right: 15px;
+      padding: 10px;
+      box-sizing: border-box;
+      // background: url('@/assets/images/fire/bj1.png') no-repeat center;
+      // background-size: 100% 100%;
 
-      .left-box {
-        width: 45%;
+      .left-box-content {
         height: 100%;
-        // margin-right: 15px;
-        padding: 10px;
-        box-sizing: border-box;
-        // background: url('@/assets/images/fire/bj1.png') no-repeat center;
-        // background-size: 100% 100%;
-
-        .left-box-content {
-          height: 100%;
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-box {
-            width: 265px;
-            height: 112px;
-            margin: 0px 5px;
-
-            &:nth-child(1) {
-              background: url('../../../../assets/images/device/cgq.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
+
+        .card-box {
+          width: 265px;
+          height: 112px;
+          margin: 0px 5px;
+
+          &:nth-child(1) {
+            background: url('../../../../assets/images/device/cgq.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(2) {
-              background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(2) {
+            background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(3) {
-              background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(3) {
+            background: url('../../../../assets/images/device/jubufengji.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(4) {
-              background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(4) {
+            background: url('../../../../assets/images/device/fengmen.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(5) {
-              background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(5) {
+            background: url('../../../../assets/images/device/fengchuang.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(6) {
-              background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(6) {
+            background: url('../../../../assets/images/device/cefeng.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(7) {
-              background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(7) {
+            background: url('../../../../assets/images/device/yafeng.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(8) {
-              background: url('../../../../assets/images/device/penling.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(8) {
+            background: url('../../../../assets/images/device/penling.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(9) {
-              background: url('../../../../assets/images/device/penfen.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(9) {
+            background: url('../../../../assets/images/device/penfen.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(10) {
-              background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(10) {
+            background: url('../../../../assets/images/device/zhudan.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(11) {
-              background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(11) {
+            background: url('../../../../assets/images/device/zhujiang.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(12) {
-              background: url('../../../../assets/images/device/penwu.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(12) {
+            background: url('../../../../assets/images/device/penwu.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(13) {
+            background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(14) {
+            background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(15) {
+            background: url('../../../../assets/images/device/wsb.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          .card-item {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            color: #fff;
 
-            &:nth-child(13) {
-              background: url('../../../../assets/images/device/chuchen.png') no-repeat center;
-              background-size: 100% 100%;
+            .item-title {
+              position: absolute;
+              left: 130px;
+              top: 20px;
+              font-size: 12px;
+              font-family: 'douyuFont';
+              color: #01fefc;
             }
 
-            &:nth-child(14) {
-              background: url('../../../../assets/images/device/wsgl.png') no-repeat center;
-              background-size: 100% 100%;
+            .item-sum {
+              position: absolute;
+              left: 130px;
+              top: 40px;
             }
 
-            &:nth-child(15) {
-              background: url('../../../../assets/images/device/wsb.png') no-repeat center;
-              background-size: 100% 100%;
+            .item-warn {
+              position: absolute;
+              left: 130px;
+              top: 60px;
             }
 
-            .card-item {
-              position: relative;
-              width: 100%;
-              height: 100%;
-              color: #fff;
-
-              .item-title {
-                position: absolute;
-                left: 130px;
-                top: 20px;
-                font-size: 12px;
-                font-family: 'douyuFont';
-                color: #01fefc;
-              }
-
-              .item-sum {
-                position: absolute;
-                left: 130px;
-                top: 40px;
-              }
-
-              .item-warn {
-                position: absolute;
-                left: 130px;
-                top: 60px;
-              }
-
-              .item-close {
-                position: absolute;
-                left: 130px;
-                top: 80px;
-              }
+            .item-close {
+              position: absolute;
+              left: 130px;
+              top: 80px;
             }
           }
+        }
 
-          .card-box1 {
-            width: 265px;
-            height: 112px;
-            margin: 0px 5px;
+        .card-box1 {
+          width: 265px;
+          height: 112px;
+          margin: 0px 5px;
 
-            &:nth-child(1) {
-              background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(1) {
+            background: url('../../../../assets/images/device/cgq-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(2) {
-              background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(2) {
+            background: url('../../../../assets/images/device/zhufengji-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(3) {
-              background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(3) {
+            background: url('../../../../assets/images/device/jubufengji-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(4) {
-              background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(4) {
+            background: url('../../../../assets/images/device/fengmen-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(5) {
-              background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(5) {
+            background: url('../../../../assets/images/device/fengchuang-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(6) {
-              background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(6) {
+            background: url('../../../../assets/images/device/cefeng-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(7) {
-              background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(7) {
+            background: url('../../../../assets/images/device/yafeng-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(8) {
-              background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(8) {
+            background: url('../../../../assets/images/device/penling-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(9) {
-              background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(9) {
+            background: url('../../../../assets/images/device/penfen-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(10) {
-              background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(10) {
+            background: url('../../../../assets/images/device/zhudan-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(11) {
-              background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(11) {
+            background: url('../../../../assets/images/device/zhujiang-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(12) {
-              background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
-              background-size: 100% 100%;
-            }
+          &:nth-child(12) {
+            background: url('../../../../assets/images/device/penwu-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(13) {
+            background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          &:nth-child(14) {
+            background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
-            &:nth-child(13) {
-              background: url('../../../../assets/images/device/chuchen-1.png') no-repeat center;
-              background-size: 100% 100%;
+          &:nth-child(15) {
+            background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          .card-item {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            color: #fff;
+
+            .item-title {
+              position: absolute;
+              left: 130px;
+              top: 20px;
+              font-size: 12px;
+              font-family: 'douyuFont';
+              color: #01fefc;
             }
 
-            &:nth-child(14) {
-              background: url('../../../../assets/images/device/wsgl-1.png') no-repeat center;
-              background-size: 100% 100%;
+            .item-sum {
+              position: absolute;
+              left: 130px;
+              top: 40px;
             }
 
-            &:nth-child(15) {
-              background: url('../../../../assets/images/device/wsb-1.png') no-repeat center;
-              background-size: 100% 100%;
+            .item-warn {
+              position: absolute;
+              left: 130px;
+              top: 60px;
             }
 
-            .card-item {
-              position: relative;
-              width: 100%;
-              height: 100%;
-              color: #fff;
-
-              .item-title {
-                position: absolute;
-                left: 130px;
-                top: 20px;
-                font-size: 12px;
-                font-family: 'douyuFont';
-                color: #01fefc;
-              }
-
-              .item-sum {
-                position: absolute;
-                left: 130px;
-                top: 40px;
-              }
-
-              .item-warn {
-                position: absolute;
-                left: 130px;
-                top: 60px;
-              }
-
-              .item-close {
-                position: absolute;
-                left: 130px;
-                top: 80px;
-              }
+            .item-close {
+              position: absolute;
+              left: 130px;
+              top: 80px;
             }
           }
         }
       }
+    }
 
-      .right-box {
-        width: 55%;
-        height: 100%;
-        background: url('../../../../assets/images/fire/border.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .right-box-content {
-          height: 100%;
+    .right-box {
+      width: 55%;
+      height: 100%;
+      background: url('../../../../assets/images/fire/border.png') no-repeat center;
+      background-size: 100% 100%;
 
-          .alarm-history-table {
-            width: 100%;
-            position: relative;
+      .right-box-content {
+        height: 100%;
 
-            &::after {
-              position: absolute;
-              content: '';
-              width: calc(100% + 10px);
-              height: 2px;
-              top: 0px;
-              left: -10px;
-              border-bottom: 1px solid #0efcff44;
-            }
+        .alarm-history-table {
+          width: 100%;
+          position: relative;
+
+          &::after {
+            position: absolute;
+            content: '';
+            width: calc(100% + 10px);
+            height: 2px;
+            top: 0px;
+            left: -10px;
+            border-bottom: 1px solid #0efcff44;
           }
         }
       }
     }
   }
+}
 </style>