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

@@ -9,11 +9,11 @@
       @click="getBack"
       >返回</a-button
     >
-    <!-- <div class="device-type-box">
+    <div class="device-type-box">
       <div v-for="item in iconsMonitor" :key="item.key" class="device-icon-box">
         <img :src="item.url" :alt="item.text" />
       </div>
-    </div> -->
+    </div>
     <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
       <a-tab-pane key="1" tab="未处理预警">
         <div v-if="activeKey == '1'" class="box-bg table-box" style="margin-bottom: 10px">

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

@@ -1,610 +1,622 @@
 <template>
-    <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
-    <div class="ventilateWarn">
-        <div class="ventilate-top">
-            <a-button 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="text">{{ item.name }}</div>
-                        <div class="warn">{{ item.warn }}</div>
-                    </div>
-                </div>
+  <customHeader :options="options" @change="getSelectRow" :optionValue="optionValue"> 通风监测预警 </customHeader>
+  <div class="ventilateWarn">
+    <div class="ventilate-top">
+      <a-button
+        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="text">{{ item.name }}</div>
+            <div class="warn">{{ item.warn }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="ventilate-content">
+        <div class="work-nav">
+          <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
+            <div class="pic" v-if="item.imgSrc"></div>
+            <div class="content" v-if="item.label && item.value">
+              <span>{{ item.label }}</span>
+              <span>{{ item.value }}</span>
             </div>
-            <div class="ventilate-content">
-                <div class="work-nav">
-                    <div class="nav" v-for="(item, index) in ventilateTopList" :key="index">
-                        <div class="pic" v-if="item.imgSrc"></div>
-                        <div class="content" v-if="item.label && item.value">
-                            <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 class="percent" v-if="item.list.length != 0">
-                            <div class="title">{{ item.label }}</div>
-                            <div class="value">
-                                <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
-                                    <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
-                                    <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="bot-area">
-                    <div class="title-t">
-                        <div class="text-t">通风信息状态监测</div>
-                    </div>
-                    <div class="echart-boxd">
-                        <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
-                    </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">
+                <div class="content-box" v-for="(items, ind) in item.list" :key="ind">
+                  <span style="color: #b3b8cc">{{ `${items.label} :` }}</span>
+                  <span style="color: #3df6ff; margin-left: 10px">{{ `${items.value}%` }}</span>
                 </div>
+              </div>
             </div>
+          </div>
         </div>
-        <div class="ventilate-bottom">
-            <div class="bot-area">
-                <div class="title-b">
-                    <div class="text-b">通风监控测点信息</div>
-                </div>
-                <div class="content-b">
-                    <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
-                        <div class="item-l">
-                            <div class="label-l">{{ item.label }}</div>
-                            <div class="value-l">{{ item.value }}</div>
-                        </div>
-                        <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>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+        <div class="bot-area">
+          <div class="title-t">
+            <div class="text-t">通风信息状态监测</div>
+          </div>
+          <div class="echart-boxd">
+            <echartLine :echartDataGq="echartDataFc1" :maxY="maxY" :echartDw="echartDw" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ventilate-bottom">
+      <div class="bot-area">
+        <div class="title-b">
+          <div class="text-b">通风监控测点信息</div>
+        </div>
+        <div class="content-b">
+          <div class="card-b" v-for="(item, index) in cardListTf" :key="index">
+            <div class="item-l">
+              <div class="label-l">{{ item.label }}</div>
+              <div class="value-l">{{ item.value }}</div>
+            </div>
+            <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
+                >
+              </div>
             </div>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </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';
-
-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({
+  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';
+
+  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: []
+      lengedData: '进风量',
+      data: [],
     },
     minData: {
-        lengedData: '回风量',
-        data: []
+      lengedData: '回风量',
+      data: [],
     },
     aveValue: {
-        lengedData: '需风量',
-        data: []
+      lengedData: '需风量',
+      data: [],
     },
     xData: [],
-});
-let cardListTf = reactive<any[]>([])
+  });
+  let cardListTf = reactive<any[]>([]);
 
-// https获取监测数据
-let timer: null | NodeJS.Timeout = null;
-function getMonitor(deviceID, flag?) {
+  // 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
+      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, '通风预警监测左侧列表数据-------------')
+  }
+  //返回首页
+  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,
-            });
+      menuList.length = 0;
+      res.forEach((el) => {
+        menuList.push({
+          name: el.deviceName,
+          warn: '低风险',
+          deviceID: el.deviceID,
+          strtype: el.deviceType,
         });
-        getMonitor(menuList[0].deviceID, true);
+      });
+      getMonitor(menuList[0].deviceID, true);
     }
-}
-//菜单选项切换
-function cardClick(ind, item) {
+  }
+  //菜单选项切换
+  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)
-}
-//获取预警详情弹窗右侧数据
-function getSysWarnList(id, type) {
+  }
+  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 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);
-                });
+      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
-            })
-            let max2 = echartDataFc1.minData.data.reduce((acr1, cur1) => {
-                return acr1 > cur1 ? acr1 : cur1
-            })
-            maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
+            echartDataFc1.xData.push(v.time);
+          });
         }
+
+        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 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2);
+      }
     });
-}
-//获取通风监控测点信息
-async function getWindDeviceList() {
-    cardListTf.length = 0
-    let res = await getDevice({ devicetype: 'windrect', pagetype: 'normal' })
+  }
+  //获取通风监控测点信息
+  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 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(() => {
+  }
+  onMounted(() => {
+    getMenuList();
+    getWindDeviceList();
+  });
+  onUnmounted(() => {
     if (timer) {
-        clearTimeout(timer);
-        timer = undefined;
+      clearTimeout(timer);
+      timer = undefined;
     }
-});
+  });
 </script>
 
 <style lang="less" scoped>
-.ventilateWarn {
+  .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%;
+      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 {
-            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);
+            }
 
-            .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);
-                    }
-                }
+            .warn {
+              width: 100%;
+              position: absolute;
+              left: 50%;
+              bottom: 11px;
+              font-size: 12px;
+              color: #fff;
+              text-align: center;
+              transform: translate(-50%, 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);
+            }
 
-                .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);
             }
+          }
         }
+      }
+
+      .ventilate-content {
+        height: 100%;
+        width: 85%;
+        padding: 10px 0px;
+        box-sizing: border-box;
+
+        .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;
+
+          .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;
+            }
+
+            &: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;
+            }
+
+            &: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;
+            }
+
+            &: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;
+            }
 
-        .ventilate-content {
-            height: 100%;
-            width: 85%;
-            padding: 10px 0px;
-            box-sizing: border-box;
+            &:nth-child(5) {
+              flex: 1.4;
+              height: 100%;
 
-            .work-nav {
-                height: 30%;
+              .percent {
                 width: 100%;
-                background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
-                background-size: 100% 100%;
+                height: 82%;
+                padding: 0px 20px;
+                box-sizing: border-box;
                 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, .2), rgba(45, 116, 160, 1)) 1 1 1;
-
-                .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;
-                    }
-
-                    &: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;
-                    }
-
-                    &: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;
-                    }
-
-                    &: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;
-                    }
-
-                    &:nth-child(5) {
-                        flex: 1.4;
-                        height: 100%;
-
-                        .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;
-                            }
-
-                            .value {
-                                display: flex;
-                                justify-content: space-between;
-
-                                span {
-                                    font-family: 'douyuFont';
-                                    font-size: 18px;
-                                }
-                            }
-                        }
-                    }
-
-                    .pic {
-                        width: 30%;
-                        height: 82%;
-                    }
-
-                    .content {
-                        height: 82%;
-                        margin-left: 15px;
-                        color: #fff;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-
-                        span {
-                            font-size: 14px;
-
-                            &:nth-child(1) {
-                                padding: 5px 0px;
-                                color: #b3b8cc;
-                            }
-
-                            &:nth-child(2) {
-                                font-family: 'douyuFont';
-                                font-size: 16px;
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+                flex-direction: column;
+                justify-content: space-around;
+
+                .title {
+                  font-size: 14px;
+                  padding: 5px 0px;
+                  color: #b3b8cc;
+                  text-align: center;
                 }
 
-                .nav:nth-child(1) .pic {
-                    background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
-                    background-size: 100% 100%;
-                }
+                .value {
+                  display: flex;
+                  justify-content: space-between;
 
-                .nav:nth-child(2) .pic {
-                    background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
-                    background-size: 100% 100%;
+                  span {
+                    font-family: 'douyuFont';
+                    font-size: 18px;
+                  }
                 }
+              }
+            }
 
-                .nav:nth-child(3) .pic {
-                    background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
-                    background-size: 100% 100%;
-                }
+            .pic {
+              width: 30%;
+              height: 82%;
             }
 
-            .bot-area {
-                height: calc(100% - 30% - 3px);
-                padding: 10px;
-                background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-                background-size: 100% 100%;
-                box-sizing: border-box;
+            .content {
+              height: 82%;
+              margin-left: 15px;
+              color: #fff;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
 
-                .title-t {
-                    height: 30px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-
-                    .text-t {
-                        font-family: 'douyuFont';
-                        font-size: 14px;
-                        color: #fff;
-                    }
-                }
+              span {
+                font-size: 14px;
 
-                .echart-boxd {
-                    width: 100%;
-                    height: calc(100% - 30px);
+                &:nth-child(1) {
+                  padding: 5px 0px;
+                  color: #b3b8cc;
                 }
 
+                &:nth-child(2) {
+                  font-family: 'douyuFont';
+                  font-size: 16px;
+                  color: #3df6ff;
+                }
+              }
             }
-        }
+          }
+
+          .nav:nth-child(1) .pic {
+            background: url('../../../../../assets/images/fire/jinfengliang.png') no-repeat center;
+            background-size: 100% 100%;
+          }
 
+          .nav:nth-child(2) .pic {
+            background: url('../../../../../assets/images/fire/huifengliang.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+
+          .nav:nth-child(3) .pic {
+            background: url('../../../../../assets/images/fire/xufengliang.png') no-repeat center;
+            background-size: 100% 100%;
+          }
+        }
 
+        .bot-area {
+          height: calc(100% - 30% - 3px);
+          padding: 10px;
+          background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
+          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;
+            }
+          }
 
+          .echart-boxd {
+            width: 100%;
+            height: calc(100% - 30px);
+          }
+        }
+      }
     }
 
     .ventilate-bottom {
-        height: calc(50% - 15px);
-        background: url('../../../../../assets/images/fire/border.png') no-repeat center;
-        background-size: 100% 100%;
+      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%;
         padding: 10px;
+        background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        background-size: 100% 100%;
         box-sizing: border-box;
 
-        .bot-area {
-            height: 100%;
-            padding: 10px;
-            background: url('../../../../../assets/images/fire/bj1.png') no-repeat center;
+        .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%;
-            box-sizing: border-box;
 
-            .title-b {
-                height: 30px;
-                margin-bottom: 10px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
+            .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;
 
-                .text-b {
-                    font-family: 'douyuFont';
-                    font-size: 14px;
-                    color: #fff;
-                }
+              .label-l {
+                width: 100%;
+                position: absolute;
+                top: 7px;
+                color: #fff;
+                font-size: 12px;
+                text-align: center;
+              }
+
+              .value-l {
+                width: 100%;
+                position: absolute;
+                top: 50px;
+                font-family: 'douyuFont';
+                font-size: 14px;
+                color: #3df6ff;
+                text-align: center;
+              }
             }
 
-            .content-b {
-                height: calc(100% - 40px);
+            .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;
-                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;
-                        }
-
-                        .value-l {
-                            width: 100%;
-                            position: absolute;
-                            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;
-
-                            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;
-                                    /* 使用省略符号 */
-                                }
-                            }
-
-                            .status-f {
-                                color: #ff0000;
-                            }
-
-                            .status-l {
-                                color: #3df6ff;
-                            }
-                        }
-                    }
+
+                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;
+                    /* 使用省略符号 */
+                  }
+                }
+
+                .status-f {
+                  color: #ff0000;
+                }
+
+                .status-l {
+                  color: #3df6ff;
                 }
+              }
             }
+          }
         }
+      }
     }
-}
-</style>
+  }
+</style>

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

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

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

@@ -1,217 +1,222 @@
 <template>
-    <div class="deviceMonitorWarn">
-        <customHeader>设备监测预警</customHeader>
-        <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
-            style="position: absolute; left: 15px; top: -66px; color: #fff" @click="getBack">返回</a-button>
-        <div class="content">
-            <div class="left-box">
-                <div class="left-box-content">
-                    <div :class="activeIndex == index ? 'card-box1' : 'card-box'" v-for="(item, index) in cardList"
-                        :key="index" @click="cardClick(item, index)">
-                        <div class="card-item">
-                            <div class="item-title">
-                                {{ item.title }}
-                            </div>
-                            <div class="item-sum">
-                                <span>总数：</span>
-                                <span> {{ item.sumVal }}</span>
-                            </div>
-                            <div class="item-warn">
-                                <span>报警数：</span>
-                                <span> {{ item.warnVal }}</span>
-
-                            </div>
-                            <div class="item-close">
-                                <span>断开数：</span>
-                                <span> {{ item.closeVal }}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="right-box">
-                <div class="right-box-content">
-                    <div class="alarm-history-table">
-                        <BasicTable :key="isShow" ref="alarmHistory" @register="registerTable"
-                            :scroll="{ x: 0, y: 590 }">
-                            <template #form-onExportXls>
-                                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()">
-                                    导出</a-button>
-                            </template>
-                        </BasicTable>
-                    </div>
-                </div>
+  <div class="deviceMonitorWarn">
+    <customHeader>设备监测预警</customHeader>
+    <a-button
+      preIcon="ant-design:rollback-outlined"
+      type="text"
+      size="small"
+      style="position: absolute; left: 15px; top: -66px; color: #fff"
+      @click="getBack"
+      >返回</a-button
+    >
+    <div class="content">
+      <div class="left-box">
+        <div class="left-box-content">
+          <div
+            :class="activeIndex == index ? 'card-box1' : 'card-box'"
+            v-for="(item, index) in cardList"
+            :key="index"
+            @click="cardClick(item, index)"
+          >
+            <div class="card-item">
+              <div class="item-title">
+                {{ item.title }}
+              </div>
+              <div class="item-sum">
+                <span>总数：</span>
+                <span> {{ item.sumVal }}</span>
+              </div>
+              <div class="item-warn">
+                <span>报警数：</span>
+                <span> {{ item.warnVal }}</span>
+              </div>
+              <div class="item-close">
+                <span>断开数：</span>
+                <span> {{ item.closeVal }}</span>
+              </div>
             </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-box">
+        <div class="right-box-content">
+          <div class="alarm-history-table">
+            <BasicTable :key="isShow" ref="alarmHistory" @register="registerTable" :scroll="{ x: 0, y: 590 }">
+              <template #form-onExportXls>
+                <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
+              </template>
+            </BasicTable>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, reactive, onMounted, onUnmounted } from 'vue';
-import customHeader from '/@/components/vent/customHeader.vue';
-import { getTotalList, getAlarmLogList } from './deviceMonitorWarn.api'
-import { 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,
+      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);
+  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({
+  // 列表页面公共参数、方法
+  const { tableContext, onExportXls } = useListPage({
     tableProps: {
-        api: getAlarmLogList,
-        columns: dataColumns,
-        canResize: true,
-        showTableSetting: false,
-        showActionColumn: false,
-        bordered: false,
-        size: 'small',
-        formConfig: {
-            labelAlign: 'left',
-            showAdvancedButton: false,
-            actionColOptions: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
-            schemas: [
+      api: getAlarmLogList,
+      columns: dataColumns,
+      canResize: true,
+      showTableSetting: false,
+      showActionColumn: false,
+      bordered: false,
+      size: 'small',
+      formConfig: {
+        labelAlign: 'left',
+        showAdvancedButton: false,
+        actionColOptions: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 },
+        schemas: [
+          {
+            label: '是否解决',
+            // field: 'isok',
+            field: 'isOk',
+            defaultValue: false,
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '未解决',
+                  value: false,
+                },
+                {
+                  label: '已解决',
+                  value: true,
+                },
+              ],
+            },
+            colProps: { span: 8 },
+          },
+          {
+            label: '所属系统',
+            // field: 'kindtype',systemType
+            field: 'systemType',
+            component: 'Select',
+            componentProps: {
+              options: [
+                {
+                  label: '通风',
+                  value: 'ventS',
+                },
                 {
-                    label: '是否解决',
-                    // field: 'isok',
-                    field: 'isOk',
-                    defaultValue: false,
-                    component: 'Select',
-                    componentProps: {
-                        options: [
-                            {
-                                label: '未解决',
-                                value: false,
-                            },
-                            {
-                                label: '已解决',
-                                value: true,
-                            },
-                        ],
-                    },
-                    colProps: { span: 8, },
+                  label: '防灭火',
+                  value: 'fireS',
                 },
                 {
-                    label: '所属系统',
-                    // field: 'kindtype',systemType
-                    field: 'systemType',
-                    component: 'Select',
-                    componentProps: {
-                        options: [
-                            {
-                                label: '通风',
-                                value: 'ventS',
-                            },
-                            {
-                                label: '防灭火',
-                                value: 'fireS',
-                            },
-                            {
-                                label: '防尘',
-                                value: 'dustS',
-                            },
-                            {
-                                label: '瓦斯',
-                                value: 'gasS',
-                            },
-                        ],
-                    },
-                    colProps: { span: 8 },
+                  label: '防尘',
+                  value: 'dustS',
                 },
-                // {
-                //     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,
-                    },
+                  label: '瓦斯',
+                  value: 'gasS',
                 },
-            ],
-        },
-        fetchSetting: {
-            listField: 'records',
-        },
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            pageSizeOptions: ['10', '30', '50', '100'],
-        },
-        beforeFetch(params) {
-            params['deviceKind'] = devicekindType.value;
-            return params;
-        },
+              ],
+            },
+            colProps: { span: 8 },
+          },
+          // {
+          //     label: '设备类型',
+          //     field: 'deviceKind',
+          //     component: 'MTreeSelect',
+          //     componentProps: {
+          //         virtual: false,
+          //     },
+          //     colProps: { span: 8 },
+          // },
+          {
+            field: 'starttime',
+            label: '开始时间',
+            component: 'DatePicker',
+            componentProps: {
+              showTime: true,
+              valueFormat: 'YYYY-MM-DD HH:mm:ss',
+              getPopupContainer: getAutoScrollContainer,
+            },
+            colProps: {
+              span: 8,
+            },
+          },
+        ],
+      },
+      fetchSetting: {
+        listField: 'records',
+      },
+      pagination: {
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '30', '50', '100'],
+      },
+      beforeFetch(params) {
+        params['deviceKind'] = devicekindType.value;
+        return params;
+      },
     },
     exportConfig: {
-        name: '预警历史列表',
-        url: '/safety/ventanalyAlarmLog/exportXls',
+      name: '预警历史列表',
+      url: '/safety/ventanalyAlarmLog/exportXls',
     },
-});
-//注册table数据
-const [registerTable, { reload, setLoading, getForm }] = tableContext;
+  });
+  //注册table数据
+  const [registerTable, { reload, setLoading, getForm }] = tableContext;
 
-//返回上一级
-function getBack() {
+  //返回上一级
+  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 });
-
-
+  }
+  //选项切换
+  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 });
 </script>
 
 <style lang="less" scoped>
-.deviceMonitorWarn {
+  .deviceMonitorWarn {
     position: relative;
     width: calc(100% - 20px);
     height: calc(100% - 90px);
@@ -219,289 +224,287 @@ defineExpose({ setLoading });
     margin: 80px 10px 10px 10px;
 
     .content {
-        position: relative;
-        width: 100%;
+      position: relative;
+      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;
-
-        .left-box {
-            width: 45%;
-            height: 100%;
-            // margin-right: 15px;
-            padding: 10px;
-            box-sizing: border-box;
-            // background: url('@/assets/images/fire/bj1.png') no-repeat center;
-            // background-size: 100% 100%;
-
-            .left-box-content {
-                height: 100%;
-                display: flex;
-                justify-content: flex-start;
-                align-items: flex-start;
-                flex-wrap: wrap;
-                overflow-y: auto;
-
-                .card-box {
-                    width: 265px;
-                    height: 112px;
-                    margin: 0px 5px;
-
-                    &:nth-child(1) {
-                        background: url('../../../../assets/images/device/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(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(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(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(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(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(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;
-
-                        .item-title {
-                            position: absolute;
-                            left: 130px;
-                            top: 20px;
-                            font-size: 12px;
-                            font-family: 'douyuFont';
-                            color: #01fefc;
-                        }
-
-                        .item-sum {
-                            position: absolute;
-                            left: 130px;
-                            top: 40px;
-                        }
-
-                        .item-warn {
-                            position: absolute;
-                            left: 130px;
-                            top: 60px;
-                        }
-
-                        .item-close {
-                            position: absolute;
-                            left: 130px;
-                            top: 80px;
-                        }
-                    }
-                }
-
-                .card-box1 {
-                    width: 265px;
-                    height: 112px;
-                    margin: 0px 5px;
-
-                    &:nth-child(1) {
-                        background: url('../../../../assets/images/device/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(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(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(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(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(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(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(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;
-                        }
-
-                        .item-sum {
-                            position: absolute;
-                            left: 130px;
-                            top: 40px;
-                        }
-
-                        .item-warn {
-                            position: absolute;
-                            left: 130px;
-                            top: 60px;
-                        }
-
-                        .item-close {
-                            position: absolute;
-                            left: 130px;
-                            top: 80px;
-                        }
-                    }
-                }
+        // 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%;
             }
 
-        }
+            &:nth-child(2) {
+              background: url('../../../../assets/images/device/zhufengji.png') no-repeat center;
+              background-size: 100% 100%;
+            }
 
-        .right-box {
-            width: 55%;
-            height: 100%;
-            background: url('../../../../assets/images/fire/border.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%;
+            }
 
-            .right-box-content {
-                height: 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%;
+            }
 
-                .alarm-history-table {
-                    width: 100%;
-                    position: relative;
+            &: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(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(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(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%;
+            }
 
-                    &::after {
-                        position: absolute;
-                        content: '';
-                        width: calc(100% + 10px);
-                        height: 2px;
-                        top: 0px;
-                        left: -10px;
-                        border-bottom: 1px solid #0efcff44;
-                    }
-                }
+            .card-item {
+              position: relative;
+              width: 100%;
+              height: 100%;
+              color: #fff;
+
+              .item-title {
+                position: absolute;
+                left: 130px;
+                top: 20px;
+                font-size: 12px;
+                font-family: 'douyuFont';
+                color: #01fefc;
+              }
+
+              .item-sum {
+                position: absolute;
+                left: 130px;
+                top: 40px;
+              }
+
+              .item-warn {
+                position: absolute;
+                left: 130px;
+                top: 60px;
+              }
+
+              .item-close {
+                position: absolute;
+                left: 130px;
+                top: 80px;
+              }
             }
+          }
 
+          .card-box1 {
+            width: 265px;
+            height: 112px;
+            margin: 0px 5px;
+
+            &:nth-child(1) {
+              background: url('../../../../assets/images/device/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(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(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(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(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(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(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(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;
+              }
+
+              .item-sum {
+                position: absolute;
+                left: 130px;
+                top: 40px;
+              }
+
+              .item-warn {
+                position: absolute;
+                left: 130px;
+                top: 60px;
+              }
+
+              .item-close {
+                position: absolute;
+                left: 130px;
+                top: 80px;
+              }
+            }
+          }
+        }
+      }
+
+      .right-box {
+        width: 55%;
+        height: 100%;
+        background: url('../../../../assets/images/fire/border.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .right-box-content {
+          height: 100%;
+
+          .alarm-history-table {
+            width: 100%;
+            position: relative;
+
+            &::after {
+              position: absolute;
+              content: '';
+              width: calc(100% + 10px);
+              height: 2px;
+              top: 0px;
+              left: -10px;
+              border-bottom: 1px solid #0efcff44;
+            }
+          }
         }
+      }
     }
-}
-</style>
+  }
+</style>

src/views/vent/monitorManager/fanLocalMonitor/components/conditionAssistance.vue

@@ -3,7 +3,7 @@
     @register="register"
     title="局部通风机运行工况智能决策"
     :maskStyle="{ backgroundColor: '#000000aa', backdropFilter: 'blur(3px)' }"
-    :width="isComputeGas ? '1400px' : '950px'"
+    :width="isComputeGas ? '1350px' : '950px'"
     v-bind="$attrs"
     @ok="onSubmit"
     :closeFunc="onCancel"
@@ -26,7 +26,7 @@
       </div>
       <div class="center-box">
         <a-spin :spinning="loadding" tip="正在计算，请稍等。。。">
-          <div ref="ChartRef" class="info-echarts" :style="{ width: isComputeGas ? '450px' : '520px', height: '400px' }"></div>
+          <div ref="ChartRef" class="info-echarts" :style="{ width: isComputeGas ? '450px' : '520px', height: '350px' }"></div>
         </a-spin>
       </div>
       <div class="right-box">
@@ -42,7 +42,7 @@
       </div>
       <div class="tip-box">
         <div class="title">最佳工况点 <SendOutlined class="ml-5px" /></div>
-        <div class="tip-container" :style="{ width: isComputeGas ? '898px' : '400px' }">
+        <div class="tip-container" :style="{ width: isComputeGas ? '898px' : '1000px' }">
           <template v-if="resultObj && isHaCross">
             <div class="ml-10px">
               <span>频率:</span>
@@ -155,7 +155,7 @@
   const ChartRef = ref();
   const myChart = ref();
   const refresh = ref(true);
-  const xDataMax = 1200;
+  const xDataMax = 1000;
   let xDataMin = 0;
   const xData: any[] = [];
   const yDataList: [] = [];
@@ -284,6 +284,7 @@
   }
 
   function computeUH(Hz: number, uQ: number) {
+    debugger;
     const equation = assistanceData.value.find((item) => {
       return Math.ceil(Hz) == item['Hz'];
     });
@@ -346,11 +347,7 @@
         if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['color'] = '#ffffff88';
         if (yDataList[i]['lineStyle']) yDataList[i]['lineStyle']['width'] = 1;
         if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['color']) {
-          if (i % 5 == 0) {
-            yDataList[i]['endLabel']['color'] = '#39E9FE99';
-          } else {
-            yDataList[i]['endLabel']['color'] = '#39E9FE00';
-          }
+          yDataList[i]['endLabel']['color'] = '#39E9FE99';
         }
         if (yDataList[i]['endLabel'] && yDataList[i]['endLabel']['backgroundColor']) yDataList[i]['endLabel']['backgroundColor'] = 'transparent';
         if (yDataList[i]['z']) yDataList[i]['z'] = 1;
@@ -371,6 +368,7 @@
 
   // 根据风量计算压差
   function computePa() {
+    debugger;
     const R = uH.value / Number(uQ.value) / Number(uQ.value);
     const pointX = Number(uQ.value);
     const pointY = Number(uH.value);
@@ -590,7 +588,7 @@
               // item.Hz = (resultObj.value.Hz + (Math.random() * 2 - 1) * Math.random() * 2).toFixed(2);
               item.Hz = (resultObj.value.Hz + Math.random() * 0.5).toFixed(2);
             }
-            item.m3 = (obj.m3 + (0.017 * n * item.Hz * (item.Hz - uHz.value) * (uQ.value - uQ1.value)) / 600).toFixed(2);
+            item.m3 = (obj.m3 + (0.027 * n * item.Hz * (item.Hz - uHz.value) * (uQ.value - uQ1.value)) / 600).toFixed(2);
             if (Number(item.m3) > uQ.value) {
               item.m3 = (uQ.value + Math.random() * 10).toFixed(2);
             }
@@ -732,7 +730,7 @@
     display: flex;
     flex-direction: row;
     background-color: #ffffff05;
-    padding: 20px 8px;
+    padding: 20px 8px 0 8px;
     border: 1px solid #00d8ff22;
     position: relative;
     // min-height: 600px;
@@ -746,7 +744,8 @@
       justify-content: space-between;
       align-items: center;
       padding: 2px 0px;
-      margin: 4px 0;
+      margin: 10px 0;
+      line-height: 30px;
       background-image: linear-gradient(to right, #39deff15, #3977e500);
       &:first-child {
         margin-top: 0;
@@ -798,7 +797,7 @@
       width: 1040px;
       height: 44px;
       position: absolute;
-      top: 447px;
+      top: 417px;
       display: flex;
       padding: 0 20px;
       .title {

src/views/vent/monitorManager/fanLocalMonitor/fanLocal.data.ts

@@ -3598,7 +3598,7 @@ export const echatsOption = {
     top: -10,
   },
   grid: {
-    top: '13%',
+    top: '18%',
     left: '30',
     right: '35',
     bottom: '10%',

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

@@ -151,7 +151,7 @@
     </div>
     <div class="data-show-box" v-if="!loading">
       <div class="data-item" v-if="leftColumns.length > 0">
-        <div class="item-header">设备监测</div>
+        <div class="item-header">环境监测</div>
         <div class="item-container">
           <div class="tab">
             <div class="tab-item" :class="{ 'tab-item-active-r': warningMonitorRowIndex === 0 }" @click="selectDevice('warningMonitorRowIndex', 0)"
@@ -253,7 +253,7 @@
       </div>
       <div>
         <div class="data-item" v-if="rightColumns.length > 0">
-          <div class="item-header">环境监测/设备报警</div>
+          <div class="item-header">设备监测/设备报警</div>
           <div class="item-container">
             <div class="tab">
               <div class="tab-item" :class="{ 'tab-item-active-r': dataMonitorRowIndex == 0 }" @click="selectDevice('dataMonitorRowIndex', 0)"

src/views/vent/monitorManager/mainFanMonitor/components/conditionAssistance.vue

@@ -59,8 +59,9 @@
       <div class="left-buttons">
         <!-- <div class="btn btn1" @click="edit('info')">编辑风机信息</div> -->
         <!-- <div class="btn btn1" @click="edit('line')">编辑特性曲线</div> -->
+        风机当前角度：<span>{{ selectData.bladeAngle }} &nbsp;°</span>
       </div>
-      <div class="border-clip"></div>
+      <!-- <div class="border-clip"></div> -->
       <div class="right-inputs">
         <div class="vent-flex-row">
           <div class="input-title">风量(m³/s)：</div>
@@ -587,10 +588,13 @@
     .left-buttons {
       display: flex;
       height: 40px;
-
+      margin-left: 15px;
       .btn {
         margin: 0 10px;
       }
+      span {
+        color: #00d8ff;
+      }
     }
     .border-clip {
       width: 1px;

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

@@ -348,9 +348,13 @@
   <div style="z-index: -1; position: absolute; top: -100px; right: 10px; width: 300px; height: 280px; margin: auto" class="palyer">
     <LivePlayer id="main-player1" ref="player1" :videoUrl="flvURL1()" muted loop loading controls />
   </div>
+  <!-- 摄像头显示隐藏图标 -->
+  <VideoCameraOutlined class="video-icon" :class="{ 'no-play': !showPlay }" @click="changePlay" />
   <div
+    v-show="showPlay"
     ref="playerRef"
-    style="z-index: 999; position: absolute; top: 100px; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
+    style="z-index: 999; position: absolute; right: 15px; width: 100%; height: 100%; margin: auto; pointer-events: none"
+    :style="{ top: hasPermission('btn:show') ? '155px' : '100px' }"
   >
   </div>
   <a-modal
@@ -461,7 +465,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ExclamationCircleFilled } from '@ant-design/icons-vue';
+  import { ExclamationCircleFilled, VideoCameraOutlined } from '@ant-design/icons-vue';
   import BarAndLine from '../../../../components/chart/BarAndLine.vue';
   import FanEchrats from '/@/views/vent/monitorManager/mainFanMonitor/fanEchrats.vue';
   import { onBeforeMount, computed, ref, onMounted, inject, onUnmounted, reactive, toRaw, watch, nextTick, defineAsyncComponent } from 'vue';
@@ -511,6 +515,7 @@
   const playerRef = ref();
   const isSimulation = true; // 是否模拟状态
   const MonitorDataTable = ref();
+  const showPlay = ref(false);
   const player1 = ref(null);
   const player2 = ref(null);
   const activeKey = ref('1');
@@ -625,13 +630,6 @@
     // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
   };
 
-  // const dataSource = computed(() => {
-  //   const data = [...getRecordList()] || [];
-  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-  //   addMonitorText(selectData);
-  //   return data;
-  // });
-
   const dataSource = ref([]);
 
   const propTypeArr = new Map([
@@ -748,6 +746,7 @@
   };
   // 切换检测数据
   const getSelectRow = async (id) => {
+    removeCamera();
     if (!id) return;
     loading.value = true;
     const baseDataIndex: any = dataSource.value.findIndex((baseData: any) => baseData.deviceID === id);
@@ -824,6 +823,9 @@
     }
   };
 
+  const changePlay = () => {
+    showPlay.value = !showPlay.value;
+  };
   // 打开并设置modal的标题
   const showModal = (obj) => {
     if (obj.key == 'kkjc') {
@@ -1537,6 +1539,34 @@
       top: 10px;
     }
   }
+  .video-icon {
+    width: 30px;
+    height: 38px;
+    position: absolute;
+    top: 605px;
+    right: 390px;
+    color: #fff;
+    z-index: 99999;
+    font-size: 28px;
+  }
+  .no-play {
+    &::after {
+      position: absolute;
+      width: 80%;
+      height: 100%;
+      content: '';
+      left: 12%;
+      top: -5px;
+      background: linear-gradient(
+        to bottom left,
+        transparent 0%,
+        transparent calc(50% - 2px),
+        #ffffff 50%,
+        transparent calc(50% + 2px),
+        transparent 100%
+      );
+    }
+  }
 
   .threejs-Object-CSS {
     .elementTag {

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

@@ -1,4 +1,5 @@
 <template>
+  <customHeader>传感器监测</customHeader>
   <div class="sensor-container">
     <a-spin :spinning="loading">
       <a-tabs class="tabs-box" type="card" v-model:activeKey="activeKey" @change="tabChange">
@@ -80,15 +81,15 @@
             <AlarmHistoryTable columns-type="alarm" device-type="modelsensor" designScope="alarm-history" />
           </div>
         </a-tab-pane>
-        <a-tab-pane key="4" tab="操作历史">
+        <!-- <a-tab-pane key="4" tab="操作历史">
           <div class="tab-item box-bg">
             <HandlerHistoryTable columns-type="operator_history" device-type="modelsensor" designScope="alarm-history" />
           </div>
-        </a-tab-pane>
+        </a-tab-pane> -->
       </a-tabs>
-      <div class="title-text">
+      <!-- <div class="title-text">
         {{ selectData.strinstallpos || selectData.strname }}
-      </div>
+      </div> -->
     </a-spin>
   </div>
 </template>
@@ -106,6 +107,7 @@
   import { deviceList } from '../../deviceManager/comment/pointTabel/point.api';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { cloneDeep } from 'lodash-es';
+  import customHeader from '/@/components/vent/customHeader.vue';
 
   const SensorMonitorRef = ref();
   const deviceBaseList = ref([]);

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

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

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

@@ -54,7 +54,7 @@
             <MonitorTable
               v-if="activeKey === '1'"
               ref="MonitorDataTable"
-              columnsType="windrect_monitor"
+              :columnsType="deviceType"
               :dataSource="dataSource"
               design-scope="windrect-monitor"
               @selectRow="getSelectRow"
@@ -102,12 +102,12 @@
           </a-tab-pane>
           <a-tab-pane key="3" tab="历史数据">
             <div class="tab-item">
-              <HistoryTable columns-type="windrect" device-type="windrect" designScope="windrect-history" :scroll="scroll" />
+              <HistoryTable :columns-type="deviceType" :device-type="deviceType" designScope="windrect-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane key="4" tab="报警历史">
             <div class="tab-item" v-if="activeKey === '4'">
-              <AlarmHistoryTable columns-type="alarm" device-type="windrect" designScope="alarm-history" :scroll="scroll" />
+              <AlarmHistoryTable columns-type="alarm" :device-type="deviceType" designScope="alarm-history" :scroll="scroll" />
             </div>
           </a-tab-pane>
           <a-tab-pane v-if="hasPermission('windrect:result')" key="6" tab="测风结果">
@@ -147,7 +147,7 @@
 
 <script setup lang="ts">
   import DeviceEcharts from '../comment/DeviceEcharts.vue';
-  import { onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import MonitorTable from '../comment/MonitorTable.vue';
   import ModalTable from './components/modalTable.vue';
@@ -205,7 +205,8 @@
     sensorMiddle: 1,
     sensorLeft: 0,
   });
-
+  const deviceType = ref('windrect');
+  const deviceId = ref('');
   const chartsColumnArr = getTableHeaderColumns('windrect_chart');
   const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
 
@@ -240,7 +241,7 @@
     if (Object.prototype.toString.call(timer) === '[object Null]') {
       timer = setTimeout(
         () => {
-          list({ devicetype: 'windrect', pagetype: 'normal' }).then((res) => {
+          list({ devicetype: deviceType.value, pagetype: 'normal' }).then((res) => {
             if (res && res.msgTxt[0]) {
               dataSource.value = res.msgTxt[0].datalist || [];
               if (dataSource.value.length > 0) {
@@ -730,12 +731,19 @@
     getPathList();
   });
 
-  onMounted(() => {
-    const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+  onMounted(async () => {
+    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+    // loading.value = true;
+    // mountedThree(playerDom).then(async () => {
+    //   getMonitor(true);
+    //   // loading.value = false;
+    // });
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
     loading.value = true;
-    mountedThree(playerDom).then(async () => {
-      getMonitor(true);
-      // loading.value = false;
+    mountedThree(null).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
     });
   });