echarts最大值修改提交

src/views/vent/home/clique/dustComponents/measure-point.vue

@@ -105,6 +105,7 @@ function getOption() {
       yAxis: [
         {
           type: 'value',
+          max:40,
           splitLine: {
             lineStyle: {
               color: 'rgba(21,80,126,.3)',

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

@@ -352,7 +352,6 @@
   watch(
     () => props.maindata,
     (val) => {
-      console.log(val, '主风机数据-----------');
       mainList = val;
       mainTypeList.length = 0;
       mainList.forEach((el) => {

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

@@ -244,13 +244,6 @@ function getOption() {
     };
   });
 }
-
-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) => {
@@ -262,10 +255,14 @@ watch(
         echartData.ydata.push(el.readData.m3);
       }
     });
-    let max = echartData.ydata.reduce((acr, cur) => {
+    maxY.value = echartData.ydata.reduce((acr, cur) => {
       return parseFloat(acr) > parseFloat(cur) ? parseFloat(acr) : parseFloat(cur);
     });
-    maxY.value = formatRoundNum(max * 1.5);
+    if (maxY.value.toString().length == 2 && maxY.value.toString().indexOf('.') == -1) {
+      maxY.value = maxY.value + 20
+    } else if (maxY.value.toString().length == 3 && maxY.value.toString().indexOf('.') == -1) {
+      maxY.value = maxY.value + 100
+    }
     getOption();
   },
   {

src/views/vent/monitorManager/alarmMonitor/common/fireWork.vue

@@ -81,7 +81,7 @@ let props = defineProps({
 let selectSj = ref<any[]>([])
 let selectData = ref('')
 let selectList = reactive<any[]>([])
-let maxY = ref(2000);
+let maxY = ref(100);
 let echartDw = ref('(­°C)');
 //光钎测温-图表数据
 let echartDataGq = reactive({

src/views/vent/monitorManager/alarmMonitor/warn/dustWarn.vue

@@ -2,18 +2,12 @@
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 粉尘监测预警 </customHeader>
   <div class="dustWarn">
     <div class="top-dust">
-      <a-button
-        v-if="!hasPermission('dustWarn:return')"
-        preIcon="ant-design:rollback-outlined"
-        type="text"
-        size="small"
-        style="position: absolute; left: 15px; top: 15px; color: #fff"
-        @click="getBack"
-        >返回</a-button
-      >
+      <a-button v-if="!hasPermission('dustWarn:return')" preIcon="ant-design:rollback-outlined" type="text" size="small"
+        style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">返回</a-button>
       <div class="alarm-menu">
         <div class="card-btn">
-          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
+          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+            @click="cardClick(ind, item)">
             <div class="text">{{ item.name }}</div>
             <div class="warn">{{ item.warn }}</div>
           </div>
@@ -21,12 +15,8 @@
       </div>
       <div class="dust-content">
         <div class="content-left">
-          <div
-            :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
-            v-for="(item, index) in topAreaList"
-            :key="index"
-            @click="topAreaClick(index)"
-          >
+          <div :class="activeIndex == index ? 'content-left-item' : 'content-left-item1'"
+            v-for="(item, index) in topAreaList" :key="index" @click="topAreaClick(index)">
             <div class="content-title">{{ item.title }}</div>
             <div class="content-items" v-for="(ite, ind) in item.content" :key="ind">
               <span>{{ ite.label }}</span>
@@ -58,13 +48,10 @@
             <div class="item-r">
               <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                 <span>{{ `${items.label} : ` }}</span>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                  >{{ `${items.value}${items.dw}` }}</span
-                >
+                <span :class="{
+                  'status-f': items.value == 1,
+                  'status-l': items.value == 0,
+                }">{{ `${items.value}${items.dw}` }}</span>
               </div>
             </div>
           </div>
@@ -75,634 +62,637 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, onUnmounted } from 'vue';
-  import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
-  import echartLine from '../common/echartLine.vue';
-  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-  import { useRouter } from 'vue-router';
-  import CustomHeader from '/@/components/vent/customHeader.vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  const { hasPermission } = usePermission();
-  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-  //左侧数据列表
-  let menuList = reactive<any[]>([]);
-  //当前左侧激活菜单的索引
-  let activeIndex1 = ref(0);
-  //顶部区域激活选项
-  let activeIndex = ref(0);
-  //顶部区域数据
-  let topAreaList = reactive<any[]>([]);
-  let choiceData = reactive<any[]>([]);
-  //粉尘图表数据
-  let echartDataFc = reactive({
-    maxData: {
-      lengedData: '实时值(mg/m³)',
-      data: [],
-    },
-    minData: {
-      lengedData: '预测值(mg/m³)',
-      data: [],
-    },
-    aveValue: {
-      lengedData: '预警值(mg/m³)',
-      data: [],
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
+import echartLine from '../common/echartLine.vue';
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+
+const { hasPermission } = usePermission();
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+//左侧数据列表
+let menuList = reactive<any[]>([]);
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+//顶部区域激活选项
+let activeIndex = ref(0);
+//顶部区域数据
+let topAreaList = reactive<any[]>([]);
+let choiceData = reactive<any[]>([]);
+//粉尘图表数据
+let echartDataFc = reactive({
+  maxData: {
+    lengedData: '实时值(mg/m³)',
+    data: [],
+  },
+  minData: {
+    lengedData: '预测值(mg/m³)',
+    data: [],
+  },
+  aveValue: {
+    lengedData: '预警值(mg/m³)',
+    data: [],
+  },
+  xData: [],
+});
+let maxY = ref(0);
+let echartDw = ref('(mg/m³)');
+let gridV = reactive({
+  top: '12%',
+  left: '1%',
+  bottom: '5%',
+  right: '5%',
+  containLabel: true,
+});
+let cardListTf = reactive<any[]>([]);
+let router = useRouter();
+let echartNow = ref<any[]>([]);
+let echartYc = reactive<any[]>([]);
+let flag = ref(true);
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+  timer = setTimeout(
+    async () => {
+      await getSysWarnList(deviceID, 'dust');
+      if (timer) {
+        timer = null;
+      }
+      getMonitor(deviceID);
     },
-    xData: [],
-  });
-  let maxY = ref(0);
-  let echartDw = ref('(mg/m³)');
-  let gridV = reactive({
-    top: '12%',
-    left: '1%',
-    bottom: '5%',
-    right: '5%',
-    containLabel: true,
-  });
-  let cardListTf = reactive<any[]>([]);
-  let router = useRouter();
-  let echartNow = ref<any[]>([]);
-  let echartYc = reactive<any[]>([]);
-  let flag = ref(true);
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-      async () => {
-        await getSysWarnList(deviceID, 'dust');
-        if (timer) {
-          timer = null;
-        }
-        getMonitor(deviceID);
-      },
-      flag ? 0 : 3000
-    );
-  }
-  //返回首页
-  function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home');
+    flag ? 0 : 3000
+  );
+}
+//返回首页
+function getBack() {
+  router.push('/monitorChannel/monitor-alarm-home');
+}
+//菜单选项切换
+function cardClick(ind, item) {
+  activeIndex1.value = ind;
+  clearTimeout(timer);
+  getMonitor(item.deviceID, true);
+}
+//顶部区域选项切换
+function topAreaClick(index) {
+  activeIndex.value = index;
+  echartDataFc.maxData.data.length = 0;
+  echartDataFc.minData.data.length = 0;
+  echartDataFc.aveValue.data.length = 0;
+  echartDataFc.xData.length = 0;
+  echartYc.length = 0;
+  flag.value = true;
+  if (flag.value) {
+    echartNow.value = JSON.parse(choiceData[index].readData.expectInfo)['list'];
+    flag.value = false;
   }
-  //菜单选项切换
-  function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-  }
-  //顶部区域选项切换
-  function topAreaClick(index) {
-    activeIndex.value = index;
-    echartDataFc.maxData.data.length = 0;
-    echartDataFc.minData.data.length = 0;
-    echartDataFc.aveValue.data.length = 0;
-    echartDataFc.xData.length = 0;
-    echartYc.length = 0;
-    flag.value = true;
-    if (flag.value) {
-      echartNow.value = JSON.parse(choiceData[index].readData.expectInfo)['list'];
-      flag.value = false;
+  echartYc.push({
+    time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'],
+    value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'],
+  });
+  let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+  setData.forEach((el) => {
+    if (el.value && el.value != '0') {
+      echartDataFc.xData.push(el.time);
+      echartDataFc.maxData.data.push(el.value);
+      echartDataFc.minData.data.push(JSON.parse(choiceData[index].readData.expectInfo)['aveVal']);
+      echartDataFc.aveValue.data.push(
+        JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+          ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+          : 0
+      );
     }
-    echartYc.push({
-      time: JSON.parse(choiceData[index].readData.expectInfo)['nowTime'],
-      value: JSON.parse(choiceData[index].readData.expectInfo)['nowVal'],
-    });
-    let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-    setData.forEach((el) => {
-      if (el.value && el.value != '0') {
-        echartDataFc.xData.push(el.time);
-        echartDataFc.maxData.data.push(el.value);
-        echartDataFc.minData.data.push(JSON.parse(choiceData[index].readData.expectInfo)['aveVal']);
-        echartDataFc.aveValue.data.push(
-          JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-            ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-            : 0
-        );
-      }
+  });
+}
+//获取左侧菜单列表
+async function getMenuList() {
+  let res = await sysTypeWarnList({ type: 'dust' });
+  if (res.length != 0) {
+    menuList.length = 0;
+    res.forEach((el) => {
+      menuList.push({
+        name: el.systemname,
+        warn: '低风险',
+        deviceID: el.id,
+        strtype: el.strtype,
+      });
     });
+    getMonitor(menuList[0].deviceID, true);
   }
-  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);
-  }
-  //获取左侧菜单列表
-  async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'dust' });
-    if (res.length != 0) {
-      menuList.length = 0;
-      res.forEach((el) => {
-        menuList.push({
-          name: el.systemname,
-          warn: '低风险',
-          deviceID: el.id,
-          strtype: el.strtype,
+}
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+  sysWarn({ sysid: id, type: type }).then((res) => {
+    // listData.common = res;
+    topAreaList.length = 0;
+
+    if (JSON.stringify(res) != '{}') {
+      res.dust.forEach((el) => {
+        topAreaList.push({
+          title: el.strinstallpos,
+          content: [
+            { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
+            { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
+            { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
+            { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
+          ],
         });
       });
-      getMonitor(menuList[0].deviceID, true);
-    }
-  }
-  //获取预警详情弹窗右侧数据
-  function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-      // listData.common = res;
-      topAreaList.length = 0;
-
-      if (JSON.stringify(res) != '{}') {
-        res.dust.forEach((el) => {
-          topAreaList.push({
-            title: el.strinstallpos,
-            content: [
-              { ids: 0, label: '温度(°C)', value: el.readData.temperature || '--' },
-              { ids: 1, label: '粉尘浓度(mg/m³)', value: el.readData.dustval || '--' },
-              { ids: 2, label: '喷雾水压(MPa)', value: el.readData.waterPressure || '--' },
-              { ids: 3, label: '喷雾状态', value: el.readData.atomizingState || '--' },
-            ],
-          });
-        });
-        choiceData = res.dust;
+      choiceData = res.dust;
 
-        if (choiceData[activeIndex.value]) {
-          if (flag.value) {
-            echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
-            flag.value = false;
-          }
-          echartYc.push({
-            time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
-            value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
-          });
-          let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-          echartDataFc.maxData.data.length = 0;
-          echartDataFc.minData.data.length = 0;
-          echartDataFc.aveValue.data.length = 0;
-          echartDataFc.xData.length = 0;
-          setData.forEach((el) => {
-            if (el.value && el.value != '0') {
-              echartDataFc.xData.push(el.time);
-              echartDataFc.maxData.data.push(el.value);
-              echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
-              echartDataFc.aveValue.data.push(
-                JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-                  ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-                  : 0
-              );
-            }
-          });
-          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-            return acr > cur ? acr : cur;
-          });
-          maxY.value = formatRoundNum(max1 * 1.5);
-        } else {
-          activeIndex.value = 0;
-          if (flag.value) {
-            echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
-            flag.value = false;
+      if (choiceData[activeIndex.value]) {
+        if (flag.value) {
+          echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
+          flag.value = false;
+        }
+        echartYc.push({
+          time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
+          value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
+        });
+        let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+        echartDataFc.maxData.data.length = 0;
+        echartDataFc.minData.data.length = 0;
+        echartDataFc.aveValue.data.length = 0;
+        echartDataFc.xData.length = 0;
+        setData.forEach((el) => {
+          if (el.value && el.value != '0') {
+            echartDataFc.xData.push(el.time);
+            echartDataFc.maxData.data.push(el.value);
+            echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
+            echartDataFc.aveValue.data.push(
+              JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                : 0
+            );
           }
-          echartYc.push({
-            time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
-            value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
-          });
-          let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
-          echartDataFc.maxData.data.length = 0;
-          echartDataFc.minData.data.length = 0;
-          echartDataFc.aveValue.data.length = 0;
-          echartDataFc.xData.length = 0;
-          setData.forEach((el) => {
-            if (el.value && el.value != '0') {
-              echartDataFc.xData.push(el.time);
-              echartDataFc.maxData.data.push(el.value);
-              echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
-              echartDataFc.aveValue.data.push(
-                JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-                  ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
-                  : 0
-              );
-            }
-          });
-          let max1 = echartDataFc.maxData.data.reduce((acr, cur) => {
-            return acr > cur ? acr : cur;
-          });
-          maxY.value = formatRoundNum(max1 * 1.5);
+        });
+        maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
+          return acr > cur ? acr : cur;
+        });
+        if (maxY.value.toString().length == 2 && maxY.value.toString().indexOf('.') == -1) {
+          maxY.value = maxY.value + 20
+        } else if (maxY.value.toString().length == 3 && maxY.value.toString().indexOf('.') == -1) {
+          maxY.value = maxY.value + 100
         }
-      }
-    });
-  }
-  //获取粉尘监控测点信息
-  async function getWindDeviceList() {
-    cardListTf.length = 0;
-    let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
-    if (res && res.msgTxt[0]) {
-      let list = res.msgTxt[0].datalist || [];
-      if (list.length > 0) {
-        list.forEach((el: any) => {
-          const readData = el.readData;
-          el = Object.assign(el, readData);
-          cardListTf.push({
-            label: '通信状态',
-            value: el.netStatus == '0' ? '断开' : '连接',
-            listR: [
-              { id: 0, label: '安装位置', dw: '', value: el.strinstallpos || '-' },
-              { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval || '-' },
-              {
-                id: 2,
-                label: '巷道湿度',
-                dw: el.humidity && Number(el.humidity) < 1 ? '(RH)' : el.humidity && Number(el.humidity) > 1 ? '(%RH)' : '',
-                value: el.humidity || '-',
-              },
-              { id: 4, label: '巷道温度', dw: el.humidity ? '(℃)' : '', value: el.temperature || '-' },
-              {
-                id: 3,
-                label: '是否报警',
-                dw: '',
-                value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
-              },
-            ],
-          });
+      } else {
+        activeIndex.value = 0;
+        if (flag.value) {
+          echartNow.value = JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['list'];
+          flag.value = false;
+        }
+        echartYc.push({
+          time: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowTime'],
+          value: JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['nowVal'],
         });
+        let setData = [...echartNow.value, ...echartYc].sort((a, b) => Date.parse(new Date(a.time)) - Date.parse(new Date(b.time)));
+        echartDataFc.maxData.data.length = 0;
+        echartDataFc.minData.data.length = 0;
+        echartDataFc.aveValue.data.length = 0;
+        echartDataFc.xData.length = 0;
+        setData.forEach((el) => {
+          if (el.value && el.value != '0') {
+            echartDataFc.xData.push(el.time);
+            echartDataFc.maxData.data.push(el.value);
+            echartDataFc.minData.data.push(JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['aveVal']);
+            echartDataFc.aveValue.data.push(
+              JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                ? JSON.parse(choiceData[activeIndex.value].readData.expectInfo)['fmin']
+                : 0
+            );
+          }
+        });
+        maxY.value = echartDataFc.maxData.data.reduce((acr, cur) => {
+          return acr > cur ? acr : cur;
+        });
+        if (maxY.value.toString().length == 2 && maxY.value.toString().indexOf('.')==-1 ) {
+          maxY.value = maxY.value + 20
+        } else if (maxY.value.toString().length == 3 && maxY.value.toString().indexOf('.')==-1 ) {
+          maxY.value = maxY.value + 100
+        }
       }
     }
-  }
-  onMounted(() => {
-    getMenuList();
-    getWindDeviceList();
   });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
+}
+//获取粉尘监控测点信息
+async function getWindDeviceList() {
+  cardListTf.length = 0;
+  let res = await getDevice({ devicetype: 'dusting', pagetype: 'normal' });
+  if (res && res.msgTxt[0]) {
+    let list = res.msgTxt[0].datalist || [];
+    if (list.length > 0) {
+      list.forEach((el: any) => {
+        const readData = el.readData;
+        el = Object.assign(el, readData);
+        cardListTf.push({
+          label: '通信状态',
+          value: el.netStatus == '0' ? '断开' : '连接',
+          listR: [
+            { id: 0, label: '安装位置', dw: '', value: el.strinstallpos || '-' },
+            { id: 1, label: '粉尘浓度', dw: '(mg/m³)', value: el.dustval || '-' },
+            {
+              id: 2,
+              label: '巷道湿度',
+              dw: el.humidity && Number(el.humidity) < 1 ? '(RH)' : el.humidity && Number(el.humidity) > 1 ? '(%RH)' : '',
+              value: el.humidity || '-',
+            },
+            { id: 4, label: '巷道温度', dw: el.humidity ? '(℃)' : '', value: el.temperature || '-' },
+            {
+              id: 3,
+              label: '是否报警',
+              dw: '',
+              value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
+            },
+          ],
+        });
+      });
     }
-  });
+  }
+}
+onMounted(() => {
+  getMenuList();
+  getWindDeviceList();
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  .dustWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-
-    .top-dust {
-      display: flex;
-      justify-content: space-between;
-      height: 50%;
-      margin-bottom: 15px;
-      background: url('../../../../../assets/images/fire/border.png') no-repeat center;
-      background-size: 100% 100%;
+.dustWarn {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+
+  .top-dust {
+    display: flex;
+    justify-content: space-between;
+    height: 50%;
+    margin-bottom: 15px;
+    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .alarm-menu {
+      height: 100%;
+      width: 15%;
+      padding: 10px;
+      box-sizing: border-box;
 
-      .alarm-menu {
+      .card-btn {
+        width: 100%;
         height: 100%;
-        width: 15%;
-        padding: 10px;
-        box-sizing: border-box;
-
-        .card-btn {
-          width: 100%;
-          height: 100%;
-          overflow-y: auto;
-
-          .btn {
-            position: relative;
-            width: 81%;
-            height: 24%;
-            margin-bottom: 6%;
-            font-family: 'douyuFont';
-            background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 28px;
-              font-size: 14px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
-
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              bottom: 11px;
-              font-size: 12px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
+        overflow-y: auto;
+
+        .btn {
+          position: relative;
+          width: 81%;
+          height: 24%;
+          margin-bottom: 6%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 14px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-50%, 0);
           }
 
-          .btn1 {
-            position: relative;
+          .warn {
             width: 100%;
-            height: 24%;
-            margin-bottom: 6%;
-            font-family: 'douyuFont';
-            background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
+            position: absolute;
+            left: 50%;
+            bottom: 11px;
+            font-size: 12px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-50%, 0);
+          }
+        }
 
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 28px;
-              font-size: 14px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-62%, 0);
-            }
+        .btn1 {
+          position: relative;
+          width: 100%;
+          height: 24%;
+          margin-bottom: 6%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 14px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-62%, 0);
+          }
 
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              bottom: 11px;
-              font-size: 14px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-60%, 0);
-            }
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            bottom: 11px;
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-60%, 0);
           }
         }
       }
+    }
 
-      .dust-content {
-        display: flex;
-        justify-content: space-between;
+    .dust-content {
+      display: flex;
+      justify-content: space-between;
+      height: 100%;
+      width: 85%;
+      padding: 10px 0px;
+      box-sizing: border-box;
+
+      .content-left {
+        width: 280px;
         height: 100%;
-        width: 85%;
-        padding: 10px 0px;
-        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        // justify-content: space-around;
+        align-items: flex-start;
+        overflow-y: auto;
+        overflow-x: hidden;
+
+        .content-left-item {
+          position: relative;
+          width: 272px;
+          height: 173px;
+          flex-shrink: 0;
+          background: url('../../../../../assets/images/fire/dust-choice.png') no-repeat center;
+          background-size: 100% 100%;
+          margin: 5px 0px;
+
+          .content-title {
+            width: 85%;
+            position: absolute;
+            top: 2px;
+            left: 50%;
+            transform: translate(-55%, 0);
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+          }
 
-        .content-left {
-          width: 280px;
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          // justify-content: space-around;
-          align-items: flex-start;
-          overflow-y: auto;
-          overflow-x: hidden;
-
-          .content-left-item {
-            position: relative;
-            width: 272px;
-            height: 173px;
-            flex-shrink: 0;
-            background: url('../../../../../assets/images/fire/dust-choice.png') no-repeat center;
+          .content-items {
+            position: absolute;
+            left: 50%;
+            transform: translate(-54%, 0);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 240px;
+            height: 26px;
+            color: #fff;
+            font-size: 14px;
+            padding: 0px 5px;
+            box-sizing: border-box;
+            background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
             background-size: 100% 100%;
-            margin: 5px 0px;
 
-            .content-title {
-              width: 85%;
-              position: absolute;
-              top: 2px;
-              left: 50%;
-              transform: translate(-55%, 0);
-              font-size: 14px;
-              color: #fff;
-              text-align: center;
+            &:nth-child(2) {
+              top: 32px;
             }
 
-            .content-items {
-              position: absolute;
-              left: 50%;
-              transform: translate(-54%, 0);
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              width: 240px;
-              height: 26px;
-              color: #fff;
-              font-size: 14px;
-              padding: 0px 5px;
-              box-sizing: border-box;
-              background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
-              background-size: 100% 100%;
-
-              &:nth-child(2) {
-                top: 32px;
-              }
-
-              &:nth-child(3) {
-                top: 67px;
-              }
-
-              &:nth-child(4) {
-                top: 102px;
-              }
-
-              &:nth-child(5) {
-                top: 136px;
-              }
+            &:nth-child(3) {
+              top: 67px;
             }
-          }
-
-          .content-left-item1 {
-            position: relative;
-            width: 250px;
-            height: 173px;
-            flex-shrink: 0;
-            background: url('../../../../../assets/images/fire/dust-choice1.png') no-repeat center;
-            background-size: 100% 100%;
-            margin: 5px 0px;
 
-            .content-title {
-              width: 85%;
-              position: absolute;
-              top: 2px;
-              left: 50%;
-              transform: translate(-50%, 0);
-              font-size: 14px;
-              color: #fff;
-              text-align: center;
+            &:nth-child(4) {
+              top: 102px;
             }
 
-            .content-items {
-              position: absolute;
-              left: 50%;
-              transform: translate(-54%, 0);
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              width: 215px;
-              height: 26px;
-              color: #fff;
-              font-size: 14px;
-              padding: 0px 5px;
-              box-sizing: border-box;
-              background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
-              background-size: 100% 100%;
-
-              &:nth-child(2) {
-                top: 32px;
-              }
-
-              &:nth-child(3) {
-                top: 67px;
-              }
-
-              &:nth-child(4) {
-                top: 102px;
-              }
-
-              &:nth-child(5) {
-                top: 136px;
-              }
+            &:nth-child(5) {
+              top: 136px;
             }
           }
         }
 
-        .content-right {
-          width: calc(100% - 280px);
-          height: 100%;
+        .content-left-item1 {
+          position: relative;
+          width: 250px;
+          height: 173px;
+          flex-shrink: 0;
+          background: url('../../../../../assets/images/fire/dust-choice1.png') no-repeat center;
+          background-size: 100% 100%;
+          margin: 5px 0px;
+
+          .content-title {
+            width: 85%;
+            position: absolute;
+            top: 2px;
+            left: 50%;
+            transform: translate(-50%, 0);
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+          }
 
-          .title-t {
-            height: 30px;
-            margin-bottom: 10px;
+          .content-items {
+            position: absolute;
+            left: 50%;
+            transform: translate(-54%, 0);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            width: 215px;
+            height: 26px;
+            color: #fff;
+            font-size: 14px;
+            padding: 0px 5px;
+            box-sizing: border-box;
+            background: url('../../../../../assets/images/fire/dust-content.png') no-repeat center;
+            background-size: 100% 100%;
 
-            .text-t {
-              font-family: 'douyuFont';
-              font-size: 14px;
-              color: #fff;
+            &:nth-child(2) {
+              top: 32px;
             }
-          }
 
-          .echart-boxd {
-            width: 100%;
-            height: calc(100% - 40px);
+            &:nth-child(3) {
+              top: 67px;
+            }
+
+            &:nth-child(4) {
+              top: 102px;
+            }
+
+            &:nth-child(5) {
+              top: 136px;
+            }
           }
         }
       }
-    }
-
-    .bot-dust {
-      height: calc(50% - 15px);
-      background: url('../../../../../assets/images/fire/border.png') no-repeat center;
-      background-size: 100% 100%;
-      padding: 10px;
-      box-sizing: border-box;
 
-      .bot-area {
+      .content-right {
+        width: calc(100% - 280px);
         height: 100%;
-        padding: 10px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-        background-size: 100% 100%;
-        box-sizing: border-box;
 
-        .title-b {
+        .title-t {
           height: 30px;
           margin-bottom: 10px;
           display: flex;
           justify-content: space-between;
           align-items: center;
 
-          .text-b {
+          .text-t {
             font-family: 'douyuFont';
             font-size: 14px;
             color: #fff;
           }
         }
 
-        .content-b {
+        .echart-boxd {
+          width: 100%;
           height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
-            background-size: 100% 100%;
+        }
+      }
+    }
+  }
 
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: #fff;
-                font-size: 12px;
-                text-align: center;
-              }
+  .bot-dust {
+    height: calc(50% - 15px);
+    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 10px;
+    box-sizing: border-box;
 
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: #3df6ff;
-                text-align: center;
-              }
+    .bot-area {
+      height: 100%;
+      padding: 10px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
+
+        .card-b {
+          position: relative;
+          width: 24%;
+          height: 128px;
+          margin: 0px 9px 10px 9px;
+          background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
+          background-size: 100% 100%;
+
+          .item-l {
+            position: absolute;
+            left: 32px;
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              width: 100%;
+              position: absolute;
+              top: 7px;
+              color: #fff;
+              font-size: 12px;
+              text-align: center;
             }
 
-            .item-r {
+            .value-l {
+              width: 100%;
               position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
+              top: 50px;
+              font-family: 'douyuFont';
+              font-size: 14px;
+              color: #3df6ff;
+              text-align: center;
+            }
+          }
+
+          .item-r {
+            position: absolute;
+            left: 132px;
+            top: 50%;
+            transform: translate(0, -50%);
+            height: 128px;
+            padding: 5px 0px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            box-sizing: border-box;
+
+            .content-r {
               display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
-
-              .content-r {
-                display: flex;
-
-                span {
-                  font-size: 14px;
-                  color: #fff;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    color: #01fefc;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
-                }
 
-                .status-f {
-                  color: #ff0000;
+              span {
+                font-size: 14px;
+                color: #fff;
+
+                &:first-child {
+                  display: inline-block;
+                  width: 68px;
                 }
 
-                .status-l {
-                  color: #3df6ff;
+                &:last-child {
+                  display: inline-block;
+                  width: calc(100% - 68px);
+                  color: #01fefc;
+                  overflow: hidden;
+                  white-space: nowrap;
+                  /* 不换行 */
+
+                  /* 超出部分隐藏 */
+                  text-overflow: ellipsis;
+                  /* 使用省略符号 */
                 }
               }
+
+              .status-f {
+                color: #ff0000;
+              }
+
+              .status-l {
+                color: #3df6ff;
+              }
             }
           }
         }
       }
     }
   }
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/warn/fireWarn.vue

@@ -382,61 +382,4 @@
       background-size: 100% 100%;
     }
   }
-
-  // .fireWarn1 {
-  //     width: 100%;
-  //     height: 100%;
-  //     padding: 80px 10px 15px 10px;
-  //     box-sizing: border-box;
-
-  //     .alarm-menu {
-  //         width: 100%;
-
-  //         .type-btn {
-  //             width: 25%;
-  //             height: 36px;
-  //             line-height: 36px;
-  //             background-color: rgba(15, 55, 108, .8);
-  //             border: 2px solid #1b6eab;
-  //             border-radius: 5px;
-  //             box-sizing: border-box;
-  //             display: flex;
-  //             justify-content: space-between;
-
-  //             .btn {
-  //                 width: 33%;
-  //                 height: 32px;
-  //                 line-height: 32px;
-  //                 font-size: 14px;
-  //                 text-align: center;
-  //                 color: #fff;
-  //                 cursor: pointer;
-  //             }
-
-  //             .btn1 {
-  //                 width: 33%;
-  //                 height: 32px;
-  //                 line-height: 32px;
-  //                 font-size: 14px;
-  //                 color: #fff;
-  //                 text-align: center;
-  //                 border-radius: 2px;
-  //                 background: #209dfc;
-  //                 cursor: pointer;
-  //             }
-  //         }
-
-  //         .card-btn {
-  //             width: 100%;
-  //             height: calc(100% - 36px);
-  //             overflow-y: auto;
-  //             display: none;
-
-  //         }
-  //     }
-
-  //     .fire-content {
-  //         height: calc(100% - 30px)
-  //     }
-  // }
 </style>

src/views/vent/monitorManager/alarmMonitor/warn/ventilateWarn.vue

@@ -2,18 +2,12 @@
   <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
   <div class="ventilateWarn">
     <div class="ventilate-top">
-      <a-button
-        v-if="!hasPermission('ventilateWarn:return')"
-        preIcon="ant-design:rollback-outlined"
-        type="text"
-        size="small"
-        style="position: absolute; left: 15px; top: 15px; color: #fff"
-        @click="getBack"
-        >返回</a-button
-      >
+      <a-button v-if="!hasPermission('ventilateWarn:return')" preIcon="ant-design:rollback-outlined" type="text"
+        size="small" style="position: absolute; left: 15px; top: 15px; color: #fff" @click="getBack">返回</a-button>
       <div class="alarm-menu">
         <div class="card-btn">
-          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind" @click="cardClick(ind, item)">
+          <div :class="activeIndex1 == ind ? 'btn1' : 'btn'" v-for="(item, ind) in menuList" :key="ind"
+            @click="cardClick(ind, item)">
             <div class="text">{{ item.name }}</div>
             <div class="warn">{{ item.warn }}</div>
           </div>
@@ -27,12 +21,9 @@
               <span>{{ item.label }}</span>
               <span>{{ item.value }}</span>
             </div>
-            <div
-              :style="{ color: item.text == '正常' ? '#00d8ff' : '#ff2313' }"
-              style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold"
-              v-if="item.text"
-              >{{ item.text }}</div
-            >
+            <div :style="{ color: item.text == '正常' ? '#00d8ff' : '#ff2313' }"
+              style="width: 100%; padding: 0px 10px; text-align: center; font-weight: bold" v-if="item.text">{{
+                item.text }}</div>
             <div class="percent" v-if="item.list.length != 0">
               <div class="title">{{ item.label }}</div>
               <div class="value">
@@ -68,13 +59,10 @@
             <div class="item-r">
               <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                 <span>{{ `${items.label} : ` }}</span>
-                <span
-                  :class="{
-                    'status-f': items.value == 1,
-                    'status-l': items.value == 0,
-                  }"
-                  >{{ `${items.value}${items.dw}` }}</span
-                >
+                <span :class="{
+                  'status-f': items.value == 1,
+                  'status-l': items.value == 0,
+                }">{{ `${items.value}${items.dw}` }}</span>
               </div>
             </div>
           </div>
@@ -85,541 +73,541 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, reactive, onMounted, onUnmounted } from 'vue';
-  import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
-  import { useRouter } from 'vue-router';
-  import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
-  import { ventilateTopList } from '../common.data';
-  import CustomHeader from '/@/components/vent/customHeader.vue';
-  import echartLine from '../common/echartLine.vue';
-  import { usePermission } from '/@/hooks/web/usePermission';
-
-  const { hasPermission } = usePermission();
-  const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
-  let router = useRouter();
-  //左侧数据列表
-  let menuList = reactive<any[]>([]);
-  //当前左侧激活菜单的索引
-  let activeIndex1 = ref(0);
-  let maxY = ref(0);
-  let echartDw = ref('(m³/min)');
-  //通风图表数据
-  const echartDataFc1 = reactive({
-    maxData: {
-      lengedData: '进风量',
-      data: [],
-    },
-    minData: {
-      lengedData: '回风量',
-      data: [],
-    },
-    aveValue: {
-      lengedData: '需风量',
-      data: [],
+import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { useSystemSelect } from '/@/hooks/vent/useSystemSelect';
+import { useRouter } from 'vue-router';
+import { sysTypeWarnList, sysWarn, getDevice } from '../common.api';
+import { ventilateTopList } from '../common.data';
+import CustomHeader from '/@/components/vent/customHeader.vue';
+import echartLine from '../common/echartLine.vue';
+import { usePermission } from '/@/hooks/web/usePermission';
+
+const { hasPermission } = usePermission();
+const { options, optionValue, getSelectRow, getSysDataSource } = useSystemSelect('sys_surface_caimei'); // 参数为场景类型（设备类型管理中可以查询到）
+let router = useRouter();
+//左侧数据列表
+let menuList = reactive<any[]>([]);
+//当前左侧激活菜单的索引
+let activeIndex1 = ref(0);
+let maxY = ref(0);
+let echartDw = ref('(m³/min)');
+//通风图表数据
+const echartDataFc1 = reactive({
+  maxData: {
+    lengedData: '进风量',
+    data: [],
+  },
+  minData: {
+    lengedData: '回风量',
+    data: [],
+  },
+  aveValue: {
+    lengedData: '需风量',
+    data: [],
+  },
+  xData: [],
+});
+let cardListTf = reactive<any[]>([]);
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID, flag?) {
+  timer = setTimeout(
+    async () => {
+      await getSysWarnList(deviceID, 'vent');
+      if (timer) {
+        timer = null;
+      }
+      getMonitor(deviceID);
     },
-    xData: [],
-  });
-  let cardListTf = reactive<any[]>([]);
-
-  // https获取监测数据
-  let timer: null | NodeJS.Timeout = null;
-  function getMonitor(deviceID, flag?) {
-    timer = setTimeout(
-      async () => {
-        await getSysWarnList(deviceID, 'vent');
-        if (timer) {
-          timer = null;
-        }
-        getMonitor(deviceID);
-      },
-      flag ? 0 : 1000
-    );
-  }
-  //返回首页
-  function getBack() {
-    router.push('/monitorChannel/monitor-alarm-home');
-  }
-  //获取左侧数据列表
-  async function getMenuList() {
-    let res = await sysTypeWarnList({ type: 'vent' });
-    console.log(res, '通风预警监测左侧列表数据-------------');
-    if (res.length != 0) {
-      menuList.length = 0;
-      res.forEach((el) => {
-        menuList.push({
-          name: el.deviceName,
-          warn: '低风险',
-          deviceID: el.deviceID,
-          strtype: el.deviceType,
-        });
+    flag ? 0 : 1000
+  );
+}
+//返回首页
+function getBack() {
+  router.push('/monitorChannel/monitor-alarm-home');
+}
+//获取左侧数据列表
+async function getMenuList() {
+  let res = await sysTypeWarnList({ type: 'vent' });
+  console.log(res, '通风预警监测左侧列表数据-------------');
+  if (res.length != 0) {
+    menuList.length = 0;
+    res.forEach((el) => {
+      menuList.push({
+        name: el.deviceName,
+        warn: '低风险',
+        deviceID: el.deviceID,
+        strtype: el.deviceType,
       });
-      getMonitor(menuList[0].deviceID, true);
-    }
-  }
-  //菜单选项切换
-  function cardClick(ind, item) {
-    activeIndex1.value = ind;
-    clearTimeout(timer);
-    getMonitor(item.deviceID, true);
-  }
-  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);
+    });
+    getMonitor(menuList[0].deviceID, true);
   }
-  //获取预警详情弹窗右侧数据
-  function getSysWarnList(id, type) {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-      echartDataFc1.maxData.data.length = 0;
-      echartDataFc1.minData.data.length = 0;
-      echartDataFc1.aveValue.data.length = 0;
-      echartDataFc1.xData.length = 0;
-      if (JSON.stringify(res) != '{}') {
-        ventilateTopList[0].value = res.jin || '--';
-        ventilateTopList[1].value = res.hui || '--';
-        ventilateTopList[2].value = res.xufengliang || '--';
-        ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
-
-        if (res.history.length != 0) {
-          res.history.forEach((v) => {
-            echartDataFc1.maxData.data.push(parseFloat(v.jin));
-            echartDataFc1.minData.data.push(parseFloat(v.hui));
-            if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
-              echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
-            } else {
-              echartDataFc1.aveValue.data.push(0);
-            }
-
-            echartDataFc1.xData.push(v.time);
-          });
-        }
+}
+//菜单选项切换
+function cardClick(ind, item) {
+  activeIndex1.value = ind;
+  clearTimeout(timer);
+  getMonitor(item.deviceID, true);
+}
+//获取预警详情弹窗右侧数据
+function getSysWarnList(id, type) {
+  sysWarn({ sysid: id, type: type }).then((res) => {
+    echartDataFc1.maxData.data.length = 0;
+    echartDataFc1.minData.data.length = 0;
+    echartDataFc1.aveValue.data.length = 0;
+    echartDataFc1.xData.length = 0;
+    if (JSON.stringify(res) != '{}') {
+      ventilateTopList[0].value = res.jin || '--';
+      ventilateTopList[1].value = res.hui || '--';
+      ventilateTopList[2].value = res.xufengliang || '--';
+      ventilateTopList[3].text = res.warnFlag ? res.warnDes : '正常';
+
+      if (res.history.length != 0) {
+        res.history.forEach((v) => {
+          echartDataFc1.maxData.data.push(parseFloat(v.jin));
+          echartDataFc1.minData.data.push(parseFloat(v.hui));
+          if (ventilateTopList[2].value && ventilateTopList[2].value != '--') {
+            echartDataFc1.aveValue.data.push(ventilateTopList[2].value);
+          } else {
+            echartDataFc1.aveValue.data.push(0);
+          }
 
-        let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
-          return acr > cur ? acr : cur;
+          echartDataFc1.xData.push(v.time);
         });
-        let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
-          return acr1 > cur1 ? acr1 : cur1;
-        });
-        maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2);
       }
-    });
-  }
-  //获取通风监控测点信息
-  async function getWindDeviceList() {
-    cardListTf.length = 0;
-    let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
-    if (res && res.msgTxt[0]) {
-      let list = res.msgTxt[0].datalist || [];
-      if (list.length > 0) {
-        list.forEach((el: any) => {
-          const readData = el.readData;
-          el = Object.assign(el, readData);
-          cardListTf.push({
-            label: '通信状态',
-            value: el.netStatus == '0' ? '断开' : '连接',
-            listR: [
-              { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
-              { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
-              { id: 2, label: '风速', dw: '(m/s)', value: el.va },
-              { id: 4, label: '时间', dw: '', value: el.readTime },
-              {
-                id: 3,
-                label: '是否报警',
-                dw: '',
-                value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
-              },
-            ],
-          });
-        });
+
+      let max1 = echartDataFc1.maxData.data.reduce((acr, cur) => {
+        return acr > cur ? acr : cur;
+      });
+      let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
+        return acr1 > cur1 ? acr1 : cur1;
+      });
+      maxY.value = max1 >= max2 ? max1 : max2;
+      if (maxY.value.toString().length == 2 && maxY.value.toString().indexOf('.')==-1 ) {
+        maxY.value = maxY.value + 20
+      } else if (maxY.value.toString().length == 3 && maxY.value.toString().indexOf('.')==-1) {
+        maxY.value = maxY.value + 100
       }
     }
-  }
-  onMounted(() => {
-    getMenuList();
-    getWindDeviceList();
   });
-  onUnmounted(() => {
-    if (timer) {
-      clearTimeout(timer);
-      timer = undefined;
+}
+//获取通风监控测点信息
+async function getWindDeviceList() {
+  cardListTf.length = 0;
+  let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' });
+  if (res && res.msgTxt[0]) {
+    let list = res.msgTxt[0].datalist || [];
+    if (list.length > 0) {
+      list.forEach((el: any) => {
+        const readData = el.readData;
+        el = Object.assign(el, readData);
+        cardListTf.push({
+          label: '通信状态',
+          value: el.netStatus == '0' ? '断开' : '连接',
+          listR: [
+            { id: 0, label: '安装位置', dw: '', value: el.strinstallpos },
+            { id: 1, label: '风量', dw: '(m³/min)', value: el.m3 },
+            { id: 2, label: '风速', dw: '(m/s)', value: el.va },
+            { id: 4, label: '时间', dw: '', value: el.readTime },
+            {
+              id: 3,
+              label: '是否报警',
+              dw: '',
+              value: el.warnFlag == '0' ? '正常' : el.warnFlag == 1 ? '报警' : el.warnFlag == 2 ? '断开' : '未监测',
+            },
+          ],
+        });
+      });
     }
-  });
+  }
+}
+onMounted(() => {
+  getMenuList();
+  getWindDeviceList();
+});
+onUnmounted(() => {
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
+});
 </script>
 
 <style lang="less" scoped>
-  .ventilateWarn {
-    width: 100%;
-    height: 100%;
-    padding: 80px 10px 15px 10px;
-    box-sizing: border-box;
-
-    .ventilate-top {
-      display: flex;
-      justify-content: space-between;
-      height: 50%;
-      margin-bottom: 15px;
-      background: url('../../../../../assets/images/fire/border.png') no-repeat center;
-      background-size: 100% 100%;
+.ventilateWarn {
+  width: 100%;
+  height: 100%;
+  padding: 80px 10px 15px 10px;
+  box-sizing: border-box;
+
+  .ventilate-top {
+    display: flex;
+    justify-content: space-between;
+    height: 50%;
+    margin-bottom: 15px;
+    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+    background-size: 100% 100%;
+
+    .alarm-menu {
+      height: 100%;
+      width: 15%;
+      padding: 10px;
+      box-sizing: border-box;
 
-      .alarm-menu {
+      .card-btn {
+        width: 100%;
         height: 100%;
-        width: 15%;
-        padding: 10px;
-        box-sizing: border-box;
-
-        .card-btn {
-          width: 100%;
-          height: 100%;
-          overflow-y: auto;
-
-          .btn {
-            position: relative;
-            width: 81%;
-            height: 24%;
-            margin-bottom: 6%;
-            font-family: 'douyuFont';
-            background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 28px;
-              font-size: 14px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
+        overflow-y: auto;
+
+        .btn {
+          position: relative;
+          width: 81%;
+          height: 24%;
+          margin-bottom: 6%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/no-choice.png') no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
 
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              bottom: 11px;
-              font-size: 12px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-50%, 0);
-            }
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 14px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-50%, 0);
           }
 
-          .btn1 {
-            position: relative;
+          .warn {
             width: 100%;
-            height: 24%;
-            margin-bottom: 6%;
-            font-family: 'douyuFont';
-            background: url('../../../../../assets/images/fire/choice.png') no-repeat;
-            background-size: 100% 100%;
-            cursor: pointer;
-
-            .text {
-              width: 80%;
-              position: absolute;
-              left: 50%;
-              top: 28px;
-              font-size: 14px;
-              color: #01fefc;
-              text-align: center;
-              transform: translate(-62%, 0);
-            }
-
-            .warn {
-              width: 100%;
-              position: absolute;
-              left: 50%;
-              bottom: 11px;
-              font-size: 14px;
-              color: #fff;
-              text-align: center;
-              transform: translate(-60%, 0);
-            }
+            position: absolute;
+            left: 50%;
+            bottom: 11px;
+            font-size: 12px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-50%, 0);
           }
         }
-      }
-
-      .ventilate-content {
-        height: 100%;
-        width: 85%;
-        padding: 10px 0px;
-        box-sizing: border-box;
 
-        .work-nav {
-          height: 30%;
+        .btn1 {
+          position: relative;
           width: 100%;
-          background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+          height: 24%;
+          margin-bottom: 6%;
+          font-family: 'douyuFont';
+          background: url('../../../../../assets/images/fire/choice.png') no-repeat;
           background-size: 100% 100%;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 3px solid;
-          border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, 0.2), rgba(45, 116, 160, 1)) 1 1 1;
+          cursor: pointer;
 
-          .nav {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            &:nth-child(1) {
-              flex: 1;
-              height: 100%;
-              border-right: 2px solid;
-              border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+          .text {
+            width: 80%;
+            position: absolute;
+            left: 50%;
+            top: 28px;
+            font-size: 14px;
+            color: #01fefc;
+            text-align: center;
+            transform: translate(-62%, 0);
+          }
 
-            &:nth-child(2) {
-              flex: 1;
-              height: 100%;
-              border-right: 2px solid;
-              border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+          .warn {
+            width: 100%;
+            position: absolute;
+            left: 50%;
+            bottom: 11px;
+            font-size: 14px;
+            color: #fff;
+            text-align: center;
+            transform: translate(-60%, 0);
+          }
+        }
+      }
+    }
 
-            &:nth-child(3) {
-              flex: 1;
-              height: 100%;
-              border-right: 2px solid;
-              border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+    .ventilate-content {
+      height: 100%;
+      width: 85%;
+      padding: 10px 0px;
+      box-sizing: border-box;
 
-            &:nth-child(4) {
-              flex: 0.6;
-              color: #b3b8cc;
-              font-size: 16px;
-              height: 100%;
-              border-right: 2px solid;
-              border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-            }
+      .work-nav {
+        height: 30%;
+        width: 100%;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 3px solid;
+        border-image: linear-gradient(to bottom, rgba(45, 116, 160, 1), rgba(45, 116, 160, 0.2), rgba(45, 116, 160, 1)) 1 1 1;
 
-            &:nth-child(5) {
-              flex: 1.4;
-              height: 100%;
+        .nav {
+          display: flex;
+          justify-content: center;
+          align-items: center;
 
-              .percent {
-                width: 100%;
-                height: 82%;
-                padding: 0px 20px;
-                box-sizing: border-box;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-
-                .title {
-                  font-size: 14px;
-                  padding: 5px 0px;
-                  color: #b3b8cc;
-                  text-align: center;
-                }
+          &:nth-child(1) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+          }
 
-                .value {
-                  display: flex;
-                  justify-content: space-between;
+          &:nth-child(2) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+          }
 
-                  span {
-                    font-family: 'douyuFont';
-                    font-size: 18px;
-                  }
-                }
-              }
-            }
+          &:nth-child(3) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+          }
 
-            .pic {
-              width: 30%;
-              height: 82%;
-            }
+          &:nth-child(4) {
+            flex: 0.6;
+            color: #b3b8cc;
+            font-size: 16px;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
+          }
 
-            .content {
+          &:nth-child(5) {
+            flex: 1.4;
+            height: 100%;
+
+            .percent {
+              width: 100%;
               height: 82%;
-              margin-left: 15px;
-              color: #fff;
+              padding: 0px 20px;
+              box-sizing: border-box;
               display: flex;
               flex-direction: column;
               justify-content: space-around;
 
-              span {
+              .title {
                 font-size: 14px;
+                padding: 5px 0px;
+                color: #b3b8cc;
+                text-align: center;
+              }
 
-                &:nth-child(1) {
-                  padding: 5px 0px;
-                  color: #b3b8cc;
-                }
+              .value {
+                display: flex;
+                justify-content: space-between;
 
-                &:nth-child(2) {
+                span {
                   font-family: 'douyuFont';
-                  font-size: 16px;
-                  color: #3df6ff;
+                  font-size: 18px;
                 }
               }
             }
           }
 
-          .nav:nth-child(1) .pic {
-            background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
-            background-size: 100% 100%;
+          .pic {
+            width: 30%;
+            height: 82%;
           }
 
-          .nav:nth-child(2) .pic {
-            background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
-            background-size: 100% 100%;
-          }
+          .content {
+            height: 82%;
+            margin-left: 15px;
+            color: #fff;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
 
-          .nav:nth-child(3) .pic {
-            background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
-            background-size: 100% 100%;
+            span {
+              font-size: 14px;
+
+              &:nth-child(1) {
+                padding: 5px 0px;
+                color: #b3b8cc;
+              }
+
+              &:nth-child(2) {
+                font-family: 'douyuFont';
+                font-size: 16px;
+                color: #3df6ff;
+              }
+            }
           }
         }
 
-        .bot-area {
-          height: calc(100% - 30% - 3px);
-          padding: 10px;
-          background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+        .nav:nth-child(1) .pic {
+          background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
           background-size: 100% 100%;
-          box-sizing: border-box;
-
-          .title-t {
-            height: 30px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        }
 
-            .text-t {
-              font-family: 'douyuFont';
-              font-size: 14px;
-              color: #fff;
-            }
-          }
+        .nav:nth-child(2) .pic {
+          background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
+          background-size: 100% 100%;
+        }
 
-          .echart-boxd {
-            width: 100%;
-            height: calc(100% - 30px);
-          }
+        .nav:nth-child(3) .pic {
+          background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
+          background-size: 100% 100%;
         }
       }
-    }
-
-    .ventilate-bottom {
-      height: calc(50% - 15px);
-      background: url('../../../../../assets/images/fire/border.png') no-repeat center;
-      background-size: 100% 100%;
-      padding: 10px;
-      box-sizing: border-box;
 
       .bot-area {
-        height: 100%;
+        height: calc(100% - 30% - 3px);
         padding: 10px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
         background-size: 100% 100%;
         box-sizing: border-box;
 
-        .title-b {
+        .title-t {
           height: 30px;
-          margin-bottom: 10px;
           display: flex;
           justify-content: space-between;
           align-items: center;
 
-          .text-b {
+          .text-t {
             font-family: 'douyuFont';
             font-size: 14px;
             color: #fff;
           }
         }
 
-        .content-b {
-          height: calc(100% - 40px);
-          display: flex;
-          justify-content: flex-start;
-          align-items: flex-start;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .card-b {
-            position: relative;
-            width: 24%;
-            height: 128px;
-            margin: 0px 9px 10px 9px;
-            background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
-            background-size: 100% 100%;
+        .echart-boxd {
+          width: 100%;
+          height: calc(100% - 30px);
+        }
+      }
+    }
+  }
 
-            .item-l {
-              position: absolute;
-              left: 32px;
-              top: 50%;
-              transform: translate(0, -50%);
-              width: 89px;
-              height: 98px;
-              background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
-
-              .label-l {
-                width: 100%;
-                position: absolute;
-                top: 7px;
-                color: #fff;
-                font-size: 12px;
-                text-align: center;
-              }
+  .ventilate-bottom {
+    height: calc(50% - 15px);
+    background: url('../../../../../assets/images/fire/border.png') no-repeat center;
+    background-size: 100% 100%;
+    padding: 10px;
+    box-sizing: border-box;
 
-              .value-l {
-                width: 100%;
-                position: absolute;
-                top: 50px;
-                font-family: 'douyuFont';
-                font-size: 14px;
-                color: #3df6ff;
-                text-align: center;
-              }
+    .bot-area {
+      height: 100%;
+      padding: 10px;
+      background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+
+      .title-b {
+        height: 30px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .text-b {
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+
+      .content-b {
+        height: calc(100% - 40px);
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-start;
+        flex-wrap: wrap;
+        overflow-y: auto;
+
+        .card-b {
+          position: relative;
+          width: 24%;
+          height: 128px;
+          margin: 0px 9px 10px 9px;
+          background: url(/src/assets/images/fire/bot-area.png) no-repeat center;
+          background-size: 100% 100%;
+
+          .item-l {
+            position: absolute;
+            left: 32px;
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 89px;
+            height: 98px;
+            background: url('../../../../../assets/images/fire/bot-area1.png') no-repeat center;
+
+            .label-l {
+              width: 100%;
+              position: absolute;
+              top: 7px;
+              color: #fff;
+              font-size: 12px;
+              text-align: center;
             }
 
-            .item-r {
+            .value-l {
+              width: 100%;
               position: absolute;
-              left: 132px;
-              top: 50%;
-              transform: translate(0, -50%);
-              height: 128px;
-              padding: 5px 0px;
+              top: 50px;
+              font-family: 'douyuFont';
+              font-size: 14px;
+              color: #3df6ff;
+              text-align: center;
+            }
+          }
+
+          .item-r {
+            position: absolute;
+            left: 132px;
+            top: 50%;
+            transform: translate(0, -50%);
+            height: 128px;
+            padding: 5px 0px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            box-sizing: border-box;
+
+            .content-r {
               display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-              box-sizing: border-box;
 
-              .content-r {
-                display: flex;
+              span {
+                font-size: 14px;
+                color: #fff;
 
-                span {
-                  font-size: 14px;
-                  color: #fff;
-
-                  &:first-child {
-                    display: inline-block;
-                    width: 68px;
-                  }
-
-                  &:last-child {
-                    display: inline-block;
-                    width: calc(100% - 68px);
-                    overflow: hidden;
-                    white-space: nowrap;
-                    /* 不换行 */
-
-                    /* 超出部分隐藏 */
-                    text-overflow: ellipsis;
-                    /* 使用省略符号 */
-                  }
+                &:first-child {
+                  display: inline-block;
+                  width: 68px;
                 }
 
-                .status-f {
-                  color: #ff0000;
-                }
+                &:last-child {
+                  display: inline-block;
+                  width: calc(100% - 68px);
+                  overflow: hidden;
+                  white-space: nowrap;
+                  /* 不换行 */
 
-                .status-l {
-                  color: #3df6ff;
+                  /* 超出部分隐藏 */
+                  text-overflow: ellipsis;
+                  /* 使用省略符号 */
                 }
               }
+
+              .status-f {
+                color: #ff0000;
+              }
+
+              .status-l {
+                color: #3df6ff;
+              }
             }
           }
         }
       }
     }
   }
+}
 </style>