更新

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

@@ -2,373 +2,40 @@
   <div class="fireWork">
     <!-- 顶部区域 -->
     <div class="work-nav">
-      <div class="nav" v-for="(item, index) in topList" :key="index">
-        <div class="pic" v-if="item.imgSrc">
-          <img :src="imgUrl" alt="" />
-        </div>
-        <div class="content" v-if="item.label && item.value">
-          <span>{{ item.label }}</span>
-          <span>{{ item.value }}</span>
-        </div>
-        <div class="text" 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: var(--vent-table-action-link); margin-left: 10px">{{ `${items.value}%` }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
+      <internalFireTop :internalFireTopData="internalFireTopData"></internalFireTop>
     </div>
     <!-- 中间区域 -->
     <div class="center-echart">
-      <div class="nav-title">
-        <div class="title">光纤测温系统温度实时监测</div>
-      </div>
-      <div class="echart-box">
-        <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
-      </div>
+      <internalFireCenter :internalFireCenterData="internalFireCenterData"></internalFireCenter>
     </div>
     <!-- 底部区域 -->
     <div class="bot-content">
-      <div class="title">
-        <div class="text">束管系统监测</div>
-        <div class="select-box flex">
-          <!-- <BaseTab
-            style="width: 200px; color: var(--vent-font-color); margin-right: 10px"
-            :tabs="[
-              { name: '束管监测', id: 'default' },
-              { name: '预测曲线', id: 'predict' },
-            ]"
-            v-model:id="shownChart"
-          /> -->
-          <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
-            <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
-              }}</a-select-option>
-          </a-select>
-        </div>
-      </div>
-      <div class="content">
-        <div class="content-box" v-for="(item, index) in contentList" :key="index">
-          <div class="box-item" v-for="(items, ind) in item.list" :key="ind" @click="getSgClick(items)">
-            <div class="content-title">
-              <span> {{ items.title }}</span>
-              <span> {{ items.dw }}</span>
-            </div>
-            <div class="content-item">
-              <span>{{ items.label }}</span>
-              <span class="bolds">{{ items.value }}</span>
-            </div>
-            <div class="content-item">
-              <span>{{ items.label1 }}</span>
-              <span class="bolds">{{ items.time }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="echart-box">
-        <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
-        <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
-          :lengedDataName="echartDataSg.lengedDataName" />
-      </div>
+      <internalFireBot :internalFireBotData="internalFireBotData"></internalFireBot>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive, watch, defineProps } from 'vue';
-import imgUrl from '/@/assets/images/fire/pie.png';
-import echartLine from './echartLine.vue';
-import echartLine1 from './echartLine1.vue';
-import PredictionCurve from './predictionCurve.vue';
-import { topList, contentList } from '../common.data';
+import internalFireTop from './internal-fire-top.vue'
+import internalFireCenter from './internal-fire-center.vue';
+import internalFireBot from './internal-fire-bot.vue';
 // import BaseTab from '../../../gas/components/tab/baseTab.vue';
 
 let props = defineProps({
   listData: Object,
 });
-const shownChart = ref('default');
-let selectSj = ref<any[]>([]);
-let selectData = ref('');
-let selectList = reactive<any[]>([]);
-let maxY1 = ref<any>(0);
-let maxY = ref(100);
-let echartDw = ref('(­°C)');
-//光钎测温-图表数据
-let echartDataGq = reactive<any>({
-  curData: {
-    lengedData: '实时温度',
-    data: [],
-  },
-  maxData: {
-    lengedData: '最大温度',
-    data: [],
-  },
-  minData: {
-    lengedData: '最小温度',
-    data: [],
-  },
-  avgData: {
-    lengedData: '平均温度',
-    data: [],
-  },
-  xData: [],
-});
-//束管监测-图表数据
-let echartDataSg = reactive({
-  xData: [],
-  lengedDataName: '(%)',
-  yData: [],
-  lengedData: 'O₂',
-});
-let echartDataSgList = reactive<any[]>([]);
-
-function getmaxY() {
-  maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
-    return acr > cur ? acr : cur;
-  });
-  maxY1.value =
-    maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'));
-  if (maxY1.value.length < 2 && Number(maxY1.value) < 1) {
-    maxY1.value = 1;
-  } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
-    maxY1.value = 10;
-  } else if (maxY1.value.length < 3) {
-    maxY1.value = (Number(maxY1.value[0]) + 1) * 10;
-  } else if (maxY1.value.length < 4) {
-    maxY1.value = (Number(maxY1.value[0]) + 1) * 100;
-  } else if (maxY1.value.length < 5) {
-    maxY1.value = (Number(maxY1.value[0]) + 1) * 1000;
-  } else if (maxY1.value.length < 6) {
-    maxY1.value = (Number(maxY1.value[0]) + 1) * 10000;
-  }
-}
-//束管实时数据选项点击
-function getSgClick(items) {
-  echartDataSg.xData.length = 0;
-  echartDataSg.yData.length = 0;
-  echartDataSg.lengedData = items.title;
-  echartDataSg.lengedDataName = items.dw;
-
-  const data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-  switch (items.title) {
-    case 'O₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.o2val);
-      });
-
-      curveConfig.value = {
-        id: 'o2',
-        label: 'O₂',
-        time: echartDataSg.xData,
-        data: [
-          // 氧气预测曲线
-          data.avgParam?.avg_o2_value || 0,
-          data.avgParam?.max_o2_value || 0,
-          data.avgParam?.min_o2_value || 0,
-          // data.readData?.o2val,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-    case 'C₂H₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.ch2val);
-      });
-      curveConfig.value = {
-        id: 'ch2',
-        label: 'C₂H₄',
-        time: echartDataSg.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_c2h4_value || 0,
-          data.avgParam?.max_c2h4_value || 0,
-          data.avgParam?.min_c2h4_value || 0,
-          // data.readData?.ch2val,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-    case 'CO':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.coval);
-      });
-      curveConfig.value = {
-        id: 'co',
-        label: 'CO',
-        time: echartDataSg.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_co_value || 0,
-          data.avgParam?.max_co_value || 0,
-          data.avgParam?.min_co_value || 0,
-          // data.readData?.coval,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-    case 'CH₄':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.gasval);
-      });
-      curveConfig.value = {
-        id: 'ch4',
-        label: 'CH₄',
-        time: echartDataSg.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_ch4_value || 0,
-          data.avgParam?.max_ch4_value || 0,
-          data.avgParam?.min_ch4_value || 0,
-          // data.readData?.chval,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-    case 'CO₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.co2val);
-      });
-      curveConfig.value = {
-        id: 'co2',
-        label: 'CO₂',
-        time: echartDataSg.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_co2_value || 0,
-          data.avgParam?.max_co2_value || 0,
-          data.avgParam?.min_co2_value || 0,
-          // data.readData?.co2val,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-    case 'C₂H₂':
-      echartDataSgList.forEach((el) => {
-        echartDataSg.xData.push(el.time);
-        echartDataSg.yData.push(el.chval);
-      });
-      curveConfig.value = {
-        id: 'gas',
-        label: 'C₂H₂',
-        time: echartDataSg.xData,
-        data: [
-          // 预测曲线
-          data.avgParam?.avg_c2h2_value || 0,
-          data.avgParam?.max_c2h2_value || 0,
-          data.avgParam?.min_c2h2_value || 0,
-          // data.readData?.gasval,
-        ],
-        monitorData: echartDataSg.yData,
-      };
-      getmaxY();
-      break;
-  }
-}
-function changeSelect(val) {
-  selectData.value = val;
-  let data = selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0];
-  contentList[0].list[0].value = data.readData.o2val;
-  contentList[0].list[1].value = data.readData.ch2val;
-  contentList[1].list[0].value = data.readData.coval;
-  contentList[1].list[1].value = data.readData.gasval;
-  contentList[2].list[0].value = data.readData.co2val;
-  contentList[2].list[1].value = data.readData.chval;
-  contentList.forEach((el) => {
-    el.list.forEach((v) => {
-      v.time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
-    });
-  });
-}
-
-/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
-const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+let internalFireTopData = ref<any[]>([])
+let internalFireCenterData = ref<any[]>([])
+let internalFireBotData = ref<any[]>([])
 
 watch(
   () => props.listData,
   (val: any, val1) => {
-    echartDataGq.xData.length = 0;
-    echartDataGq.curData.data.length = 0;
-    echartDataGq.maxData.data.length = 0;
-    echartDataGq.minData.data.length = 0;
-    echartDataGq.avgData.data.length = 0;
-    echartDataSgList.length = 0;
-    echartDataSg.xData.length = 0;
-    echartDataSg.yData.length = 0;
-    selectList.length = 0;
     if (JSON.stringify(val) === '{}') return;
-
-    if (val.fiber.length != 0) {
-      const fiber: any = val.fiber[0];
-      topList[0].value = fiber.readData.fmax;
-      topList[1].value = fiber.readData.fmin;
-      topList[2].value = fiber.readData.favg;
-      topList[3].text = fiber.warnFlag ? '报警' : '正常';
-      const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
-      arr.forEach((el) => {
-        echartDataGq.xData.push(el.pos);
-        echartDataGq.curData.data.push(el.value);
-        echartDataGq.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
-        echartDataGq.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
-        echartDataGq.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
-      });
-    } else {
-      topList[0].value = '--';
-      topList[1].value = '--';
-      topList[2].value = '--';
-      topList[3].text = '正常';
-    }
-
-    if (val.bundletube.length != 0) {
-      selectSj.value = val.bundletube;
-      selectSj.value.forEach((el) => {
-        selectList.push({ label: el.strinstallpos, value: el.strinstallpos });
-      });
-      selectData.value = selectData.value ? selectData.value : selectList[0].value;
-      let dataVal = selectData.value ? selectSj.value.filter((v) => v.strinstallpos == selectData.value)[0] : selectSj.value[0];
-      contentList[0].list[0].value = dataVal.readData.o2val;
-      contentList[0].list[1].value = dataVal.readData.ch2val;
-      contentList[1].list[0].value = dataVal.readData.coval;
-      contentList[1].list[1].value = dataVal.readData.gasval;
-      contentList[2].list[0].value = dataVal.readData.co2val;
-      contentList[2].list[1].value = dataVal.readData.chval;
-      contentList.forEach((el) => {
-        el.list.forEach((v) => {
-          v.time = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':'));
-        });
-      });
-
-      echartDataSgList = dataVal.history;
-      getSgClick({
-        title: echartDataSg.lengedData,
-        dw: echartDataSg.lengedDataName,
-      });
-      getmaxY();
-    } else {
-      contentList[0].list[0].value = '--';
-      contentList[0].list[1].value = '--';
-      contentList[1].list[0].value = '--';
-      contentList[1].list[1].value = '--';
-      contentList[2].list[0].value = '--';
-      contentList[2].list[1].value = '--';
-      contentList.forEach((el) => {
-        el.list.forEach((v) => {
-          v.time = '--';
-        });
-      });
-    }
+    internalFireTopData.value = val.fiber
+    internalFireCenterData.value = val.fiber
+    internalFireBotData.value = val.bundletube
   },
   { deep: true }
 );
@@ -409,126 +76,9 @@ watch(
     margin-bottom: 20px;
     background: var(--image-bj1) no-repeat center;
     background-size: 100% 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    .nav {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &:nth-child(1) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 1 1 1;
-      }
-
-      &:nth-child(2) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 1 1 1;
-      }
-
-      &:nth-child(3) {
-        flex: 1;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 1 1 1;
-      }
-
-      &:nth-child(4) {
-        flex: 0.6;
-        color: #b3b8cc;
-        font-size: 16px;
-        height: 100%;
-        border-right: 2px solid;
-        border-image: var(--border-image-2) 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%;
-
-        img {
-          width: 100%;
-          height: 100%;
-        }
-      }
-
-      .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: var(--vent-table-action-link);
-          }
-        }
-      }
-    }
-
-    .nav:nth-child(1) .pic {
-      background: var(--image-max) no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .nav:nth-child(2) .pic {
-      background: var(--image-min) no-repeat center;
-      background-size: 50% 50%;
-    }
-
-    .nav:nth-child(3) .pic {
-      background: var(--image-pj) no-repeat center;
-      background-size: 50% 50%;
-    }
   }
 
   .center-echart {
@@ -540,24 +90,7 @@ watch(
     background: var(--image-bj1) no-repeat center;
     background-size: 100% 100%;
 
-    .nav-title {
-      height: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .title {
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-        // color: var(--vent-table-action-link);
-      }
-    }
 
-    .echart-box {
-      width: 100%;
-      height: calc(100% - 30px);
-    }
   }
 
   .bot-content {
@@ -569,99 +102,7 @@ watch(
     background: var(--image-bj1) no-repeat center;
     background-size: 100% 100%;
 
-    .title {
-      height: 35px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 10px;
 
-      .text {
-        // height: 30px;
-        // line-height: 30px;
-        font-family: 'douyuFont';
-        font-size: 14px;
-        color: #fff;
-      }
-    }
-
-    .content {
-      height: calc(100% - 45px);
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-
-      .content-box {
-        width: 100%;
-        height: 29%;
-        display: flex;
-        justify-content: space-between;
-        margin-top: 0px !important;
-
-        .box-item {
-          position: relative;
-          width: 16%;
-          height: 100%;
-          background: var(--image-14174) no-repeat center;
-          background-size: 100% 100%;
-          cursor: pointer;
-
-          .content-title {
-            position: absolute;
-            left: 50%;
-            top: 0;
-            transform: translate(-50%);
-            color: #fff;
-            font-size: 14px;
-          }
-
-          .content-item {
-            position: absolute;
-            width: 93%;
-            height: 27%;
-            display: flex;
-            align-items: center;
-            padding: 0px 10px;
-            box-sizing: border-box;
-            background: var(--image-contetn) no-repeat center;
-            background-size: 100% 100%;
-            color: #fff;
-            font-size: 14px;
-
-            &:nth-child(2) {
-              left: 50%;
-              top: 28%;
-              transform: translate(-50%);
-              display: flex;
-              justify-content: space-between;
-            }
-
-            &:nth-child(3) {
-              left: 50%;
-              top: 62%;
-              transform: translate(-50%);
-              display: flex;
-              justify-content: space-between;
-            }
-
-            .bolds {
-              font-family: 'douyuFont';
-              color: var(--vent-table-action-link);
-              font-size: 12px;
-            }
-          }
-        }
-      }
-    }
-
-    .echart-box {
-      position: absolute;
-      left: 50%;
-      top: 50px;
-      transform: translate(-50%, 0);
-      width: 66%;
-      height: calc(100% - 50px);
-    }
   }
 }
 
@@ -675,6 +116,6 @@ watch(
 }
 
 :deep(.zxm-select-arrow) {
-  color:#fff;
-  }
+  color: #fff;
+}
 </style>

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-bot.vue

@@ -0,0 +1,469 @@
+<template>
+    <div class="internal-fire-bot">
+        <div class="title">
+            <div class="text">束管系统监测</div>
+            <div class="select-box flex">
+                <a-select v-model:value="selectData" style="width: 250px" @change="changeSelect">
+                    <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{ file.label
+                        }}</a-select-option>
+                </a-select>
+            </div>
+        </div>
+        <div class="content">
+            <div class="content-box">
+                <div class="box-item" @click="getSgClick('O₂','(%)')">
+                    <div class="content-title">
+                        <span>O₂</span>
+                        <span> (%)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 : </span>
+                        <span class="bolds">{{ bunData.o2 }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.o2time }}</span>
+                    </div>
+                </div>
+                <div class="box-item"  @click="getSgClick('C₂H₄','(ppm)')">
+                    <div class="content-title">
+                        <span> C₂H₄</span>
+                        <span>(ppm)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 :</span>
+                        <span class="bolds">{{ bunData.c2h4 }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.c2h4time }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="content-box">
+                <div class="box-item" @click="getSgClick('CO','(ppm)')" >
+                    <div class="content-title">
+                        <span>CO</span>
+                        <span> (ppm)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 : </span>
+                        <span class="bolds">{{ bunData.co }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.cotime }}</span>
+                    </div>
+                </div>
+                <div class="box-item" @click="getSgClick('CH₄','(ppm)')">
+                    <div class="content-title">
+                        <span> CH₄</span>
+                        <span>(ppm)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 :</span>
+                        <span class="bolds">{{ bunData.ch4 }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.ch4time }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="content-box">
+                <div class="box-item" @click="getSgClick('CO₂','(%)')">
+                    <div class="content-title">
+                        <span>CO₂</span>
+                        <span> (%)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 : </span>
+                        <span class="bolds">{{ bunData.co2 }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.co2time }}</span>
+                    </div>
+                </div>
+                <div class="box-item" @click="getSgClick('C₂H₂','(ppm)')">
+                    <div class="content-title">
+                        <span> C₂H₂</span>
+                        <span>(ppm)</span>
+                    </div>
+                    <div class="content-item">
+                        <span>浓度 :</span>
+                        <span class="bolds">{{ bunData.c2h2 }}</span>
+                    </div>
+                    <div class="content-item">
+                        <span>时间 :</span>
+                        <span class="bolds">{{ bunData.c2h2time }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="echart-box">
+            <PredictionCurve v-if="shownChart === 'default'" :chart="curveConfig" />
+            <echartLine1 v-if="shownChart === 'predict'" :echartDataSg="echartDataSg" :maxY="maxY1"
+                :lengedDataName="echartDataSg.lengedDataName" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import echartLine1 from './echartLine1.vue';
+import PredictionCurve from './predictionCurve.vue';
+
+let props = defineProps({
+    internalFireBotData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+const shownChart = ref('default');
+let selectData = ref('');//下拉选项数据
+let selectList = ref<any[]>([]);//下拉选项列表
+
+let bundletubeData = ref<any[]>([]);
+
+let bunData = reactive({
+    o2: '--',
+    o2time: '--',
+    c2h4: '--',
+    c2h4time: '--',
+    co: '--',
+    cotime: '--',
+    ch4: '--',
+    ch4time: '--',
+    co2: '--',
+    co2time: '--',
+    c2h2: '--',
+    c2h2time: '--',
+})
+
+//束管图表数据
+let echartDataSgList = ref<any[]>([]);
+//束管监测-图表数据
+let echartDataSg = reactive({
+  xData: [],
+  lengedDataName: '(%)',
+  yData: [],
+  lengedData: 'O₂',
+});
+
+let maxY1 = ref<any>(0);
+
+/** 预测曲线的配置，数据分别为平均、最大、最小、当前值 */
+const curveConfig = ref<any>({ id: '0', label: '', time: new Date(), data: [0, 0, 0, 0] });
+
+//下拉选项切换
+function changeSelect(val) {
+    selectData.value = val;
+    let data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
+    let time = data.readTime.substring(0, data.readTime.lastIndexOf(':'));
+    bunData.o2 = data.readData.o2val
+    bunData.o2time = time;
+    bunData.c2h4 = data.readData.ch2val
+    bunData.c2h4time = time;
+    bunData.co = data.readData.coval;
+    bunData.cotime = time;
+    bunData.ch4 = data.readData.gasval;
+    bunData.ch4time = time;
+    bunData.co2 = data.readData.co2val;
+    bunData.co2time = time;
+    bunData.c2h2 = data.readData.chval;
+    bunData.c2h2time = time;
+}
+
+//束管实时数据选项点击
+function getSgClick(title,dw) {
+  echartDataSg.xData.length = 0;
+  echartDataSg.yData.length = 0;
+  echartDataSg.lengedData = title;
+  echartDataSg.lengedDataName = dw;
+
+  const data = bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0];
+  switch (title) {
+    case 'O₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.o2val);
+      });
+
+      curveConfig.value = {
+        id: 'o2',
+        label: 'O₂',
+        time: echartDataSg.xData,
+        data: [
+          // 氧气预测曲线
+          data.avgParam?.avg_o2_value || 0,
+          data.avgParam?.max_o2_value || 0,
+          data.avgParam?.min_o2_value || 0,
+          // data.readData?.o2val,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+    case 'C₂H₄':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.ch2val);
+      });
+      curveConfig.value = {
+        id: 'ch2',
+        label: 'C₂H₄',
+        time: echartDataSg.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_c2h4_value || 0,
+          data.avgParam?.max_c2h4_value || 0,
+          data.avgParam?.min_c2h4_value || 0,
+          // data.readData?.ch2val,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+    case 'CO':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.coval);
+      });
+      curveConfig.value = {
+        id: 'co',
+        label: 'CO',
+        time: echartDataSg.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_co_value || 0,
+          data.avgParam?.max_co_value || 0,
+          data.avgParam?.min_co_value || 0,
+          // data.readData?.coval,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+    case 'CH₄':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.gasval);
+      });
+      curveConfig.value = {
+        id: 'ch4',
+        label: 'CH₄',
+        time: echartDataSg.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_ch4_value || 0,
+          data.avgParam?.max_ch4_value || 0,
+          data.avgParam?.min_ch4_value || 0,
+          // data.readData?.chval,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+    case 'CO₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.co2val);
+      });
+      curveConfig.value = {
+        id: 'co2',
+        label: 'CO₂',
+        time: echartDataSg.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_co2_value || 0,
+          data.avgParam?.max_co2_value || 0,
+          data.avgParam?.min_co2_value || 0,
+          // data.readData?.co2val,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+    case 'C₂H₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg.xData.push(el.time);
+        echartDataSg.yData.push(el.chval);
+      });
+      curveConfig.value = {
+        id: 'gas',
+        label: 'C₂H₂',
+        time: echartDataSg.xData,
+        data: [
+          // 预测曲线
+          data.avgParam?.avg_c2h2_value || 0,
+          data.avgParam?.max_c2h2_value || 0,
+          data.avgParam?.min_c2h2_value || 0,
+          // data.readData?.gasval,
+        ],
+        monitorData: echartDataSg.yData,
+      };
+      getmaxY();
+      break;
+  }
+}
+
+function getmaxY() {
+  maxY1.value = echartDataSg.yData.reduce((acr, cur) => {
+    return acr > cur ? acr : cur;
+  });
+  maxY1.value =
+    maxY1.value.toString().indexOf('.') == -1 ? maxY1.value.toString() : maxY1.value.toString().substring(0, maxY1.value.toString().indexOf('.'));
+  if (maxY1.value.length < 2 && Number(maxY1.value) < 1) {
+    maxY1.value = 1;
+  } else if (maxY1.value.length < 2 && Number(maxY1.value) >= 1) {
+    maxY1.value = 10;
+  } else if (maxY1.value.length < 3) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 10;
+  } else if (maxY1.value.length < 4) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 100;
+  } else if (maxY1.value.length < 5) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 1000;
+  } else if (maxY1.value.length < 6) {
+    maxY1.value = (Number(maxY1.value[0]) + 1) * 10000;
+  }
+}
+
+watch(() => props.internalFireBotData, (newV, oldV) => {
+    echartDataSg.xData.length = 0;
+    echartDataSg.yData.length = 0;
+    if (newV.length != 0) {
+        bundletubeData.value = newV;
+        //下拉选项列表
+        selectList.value = bundletubeData.value.map((el) => {
+            return { label: el.strinstallpos, value: el.strinstallpos };
+        });
+        //默认选中
+        selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
+        let choiceData = selectData.value ? bundletubeData.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletubeData.value[0];
+
+        let time = choiceData.readTime.substring(0, choiceData.readTime.lastIndexOf(':'));
+        bunData.o2 = choiceData.readData.o2val
+        bunData.o2time = time;
+        bunData.c2h4 = choiceData.readData.ch2val
+        bunData.c2h4time = time;
+        bunData.co = choiceData.readData.coval;
+        bunData.cotime = time;
+        bunData.ch4 = choiceData.readData.gasval;
+        bunData.ch4time = time;
+        bunData.co2 = choiceData.readData.co2val;
+        bunData.co2time = time;
+        bunData.c2h2 = choiceData.readData.chval;
+        bunData.c2h2time = time;
+
+        echartDataSgList.value = choiceData.history;
+
+        getSgClick(echartDataSg.lengedData,echartDataSg.lengedDataName);
+        getmaxY();
+    }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+.internal-fire-bot {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .title {
+        height: 35px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+
+        .text {
+            // height: 30px;
+            // line-height: 30px;
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+
+    .content {
+        height: calc(100% - 45px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .content-box {
+            width: 100%;
+            height: 29%;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 0px !important;
+
+            .box-item {
+                position: relative;
+                width: 16%;
+                height: 100%;
+                background: var(--image-14174) no-repeat center;
+                background-size: 100% 100%;
+                cursor: pointer;
+
+                .content-title {
+                    position: absolute;
+                    left: 50%;
+                    top: 0;
+                    transform: translate(-50%);
+                    color: #fff;
+                    font-size: 14px;
+                }
+
+                .content-item {
+                    position: absolute;
+                    width: 93%;
+                    height: 27%;
+                    display: flex;
+                    align-items: center;
+                    padding: 0px 10px;
+                    box-sizing: border-box;
+                    background: var(--image-contetn) no-repeat center;
+                    background-size: 100% 100%;
+                    color: #fff;
+                    font-size: 14px;
+
+                    &:nth-child(2) {
+                        left: 50%;
+                        top: 28%;
+                        transform: translate(-50%);
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    &:nth-child(3) {
+                        left: 50%;
+                        top: 62%;
+                        transform: translate(-50%);
+                        display: flex;
+                        justify-content: space-between;
+                    }
+
+                    .bolds {
+                        font-family: 'douyuFont';
+                        color: var(--vent-table-action-link);
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+    }
+
+    .echart-box {
+        position: absolute;
+        left: 50%;
+        top: 50px;
+        transform: translate(-50%, 0);
+        width: 66%;
+        height: calc(100% - 50px);
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-center.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="internal-fire-center">
+        <div class="nav-title">
+            <div class="title">光纤测温系统温度实时监测</div>
+        </div>
+        <div class="echart-box">
+            <echartLine :echartDataGq="echartDataGq" :maxY="maxY" :echartDw="echartDw" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive,watch } from 'vue'
+import echartLine from './echartLine.vue';
+
+let props=defineProps({
+    internalFireCenterData:{
+        type:Array,
+        default:()=>{
+            return []
+        }
+    }
+})
+
+let maxY = ref(100);
+let echartDw = ref('(­°C)');
+//光钎测温-图表数据
+let echartDataGq = reactive<any>({
+  curData: {
+    lengedData: '实时温度',
+    data: [],
+  },
+  maxData: {
+    lengedData: '最大温度',
+    data: [],
+  },
+  minData: {
+    lengedData: '最小温度',
+    data: [],
+  },
+  avgData: {
+    lengedData: '平均温度',
+    data: [],
+  },
+  xData: [],
+});
+
+watch(()=>props.internalFireCenterData,(newV,oldV)=>{
+    echartDataGq.xData.length = 0;
+    echartDataGq.curData.data.length = 0;
+    echartDataGq.maxData.data.length = 0;
+    echartDataGq.minData.data.length = 0;
+    echartDataGq.avgData.data.length = 0;
+    if(newV.length!=0){
+        const fiber: any = newV[0];
+        const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
+        arr.forEach((el) => {
+        echartDataGq.xData.push(el.pos);
+        echartDataGq.curData.data.push(el.value);
+        echartDataGq.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
+        echartDataGq.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
+        echartDataGq.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
+      });
+    }
+},{immediate:true})
+</script>
+
+<style lang="less" scoped>
+.internal-fire-center {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .nav-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .title {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+            // color: var(--vent-table-action-link);
+        }
+    }
+
+    .echart-box {
+        width: 100%;
+        height: calc(100% - 30px);
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/internal-fire-top.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="internal-fire-top">
+        <div class="nav" v-for="(item, index) in topList" :key="index">
+            <div class="pic" v-if="item.imgSrc">
+                <img :src="imgUrl" alt="" />
+            </div>
+            <div class="content" v-if="item.label && item.value">
+                <span>{{ item.label }}</span>
+                <span>{{ item.value }}</span>
+            </div>
+            <div class="text" 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: var(--vent-table-action-link); margin-left: 10px">{{ `${items.value}%`
+                            }}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { topList } from '../common.data';
+import imgUrl from '/@/assets/images/fire/pie.png';
+
+let props = defineProps({
+    internalFireTopData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+watch(() => props.internalFireTopData, (newV, oldV) => {
+    if (newV.length != 0) {
+        const fiber: any = newV[0];
+        topList[0].value = fiber.readData.fmax;
+        topList[1].value = fiber.readData.fmin;
+        topList[2].value = fiber.readData.favg;
+        topList[3].text = fiber.warnFlag ? '报警' : '正常';
+    } else {
+        topList[0].value = '--';
+        topList[1].value = '--';
+        topList[2].value = '--';
+        topList[3].text = '正常';
+    }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .internal-fire-top {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-14174: url('/@/assets/images/themify/deepblue/fire/14174.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+    }
+}
+
+.internal-fire-top {
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-bj1: url('/@/assets/images/fire/bj1.png');
+    --image-14174: url('/@/assets/images/fire/14174.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .nav {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:nth-child(1) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(2) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(3) {
+            flex: 1;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(4) {
+            flex: 0.6;
+            color: #b3b8cc;
+            font-size: 16px;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 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%;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .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: var(--vent-table-action-link);
+                }
+            }
+        }
+    }
+
+    .nav:nth-child(1) .pic {
+        background: var(--image-max) no-repeat center;
+        background-size: 50% 50%;
+    }
+
+    .nav:nth-child(2) .pic {
+        background: var(--image-min) no-repeat center;
+        background-size: 50% 50%;
+    }
+
+    .nav:nth-child(3) .pic {
+        background: var(--image-pj) no-repeat center;
+        background-size: 50% 50%;
+    }
+}
+</style>

src/views/vent/monitorManager/comment/safetyWarnAnalysis.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="warnAnalysis">
+        <div class="warn-search">
+            <a-row>
+                <a-col :span="4">
+                    <span class="search-label">查询设备：</span>
+                    <a-select v-model:value="dataTypeName" style="width: 220px" placeholder="请选择查询设备">
+                        <a-select-option v-for="item in deviceOptions" :key="item" :value="item.value">{{ item.label
+                        }}</a-select-option>
+                    </a-select>
+                </a-col>
+                <a-col :span="4">
+                    <span class="search-label">开始时间：</span>
+                    <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
+                        v-model:value="startTime" style="width: 220px" />
+                </a-col>
+                <a-col :span="4">
+                    <span class="search-label">结束时间：</span>
+                    <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"
+                        v-model:value="endTime" style="width: 220px" />
+                </a-col>
+                <a-col :span="4">
+                    <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left:15px"
+                        @click="getSearch">查询</a-button>
+                </a-col>
+            </a-row>
+        </div>
+        <div class="warn-tag" v-if="typeList.length != 0">
+            <div :class="activeIndex == index ? 'tag-item-Y' : 'tag-item-N'" v-for="(item, index) in typeList"
+                :key="index" @click="typeClick(index)">
+                <div class="item-value">{{ item.label }}</div>
+                <div class="item-label">{{ item.value }}</div>
+            </div>
+        </div>
+        <div class="warn-content">
+            <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
+                class="tableW" :pagination="pagination" @change="changePaper">
+                <template #bodyCell="{ column, text }"></template>
+
+            </a-table>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { analysisColumns } from './comment.data'
+import { defHttp } from '/@/utils/http/axios';
+import dayjs from 'dayjs';
+import { message } from 'ant-design-vue';
+import { resetEcharts } from '../mainFanMonitor/main.threejs';
+
+let props = defineProps({
+    deviceType: {
+        type: String,
+        required: true,
+    },
+})
+const getAlarmHistoryDataCount = (params) => defHttp.post({ url: '/ventanaly-device/monitor/history/getAlarmHistoryDataCount', params })
+const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/codeDict', params });
+let dataTypeName = ref('')
+let startTime = ref(dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'))
+let endTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+//设备下拉选项列表
+let deviceOptions = ref<any[]>([])
+let typeList = ref<any[]>([])
+let activeIndex = ref(0)
+let pagination = reactive({
+    current: 1, // 当前页码
+    pageSize: 10, // 每页显示条数
+    total: 0, // 总条目数，后端返回
+    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
+    showSizeChanger: true, // 是否可改变每页显示条数
+    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
+});
+let tableData = ref<any[]>([])
+
+//查询
+async function getSearch() {
+    if (dataTypeName.value) {
+        let res = await getAlarmHistoryDataCount({
+            "pageNo": pagination.current,
+            "pageSize": pagination.pageSize,
+            "startTime": startTime.value,
+            "endTime": endTime.value,
+            "dataTypeName": dataTypeName.value
+        })
+        let data = res.result
+        typeList.value = Object.keys(data.exceptionType).map(el => {
+            return {
+                label: el,
+                value: data.exceptionType[el].count || 0
+            }
+        })
+        tableData.value = data.exceptionType[typeList.value[activeIndex.value].label]['records']
+        pagination.total = typeList.value[activeIndex.value].value
+    } else {
+        message.warning('请选择设备类型!')
+    }
+}
+//选项切换
+function typeClick(index) {
+    activeIndex.value = index
+    pagination.current = 1
+    getSearch()
+}
+//分页切换
+function changePaper(val) {
+    pagination.current = val.current
+    pagination.pageSize = val.pageSize
+    getSearch()
+}
+async function getDeviceList() {
+    const res = await getDeviceListApi({ devicetype: props.deviceType, code:'dataTypeName' });
+    console.log(res,'000---')
+    if(res && res.length!=0){
+              deviceOptions.value = res.map((item) => {
+            return {
+                label: item['name'],
+                value: item['code'],
+            };
+
+        });
+    }
+}
+
+onMounted(() => {
+    getDeviceList()
+    // getSearch()
+})
+</script>
+
+<style lang="less" scoped>
+.warnAnalysis {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .warn-search {
+        display: flex;
+        align-items: center;
+        height: 30px;
+        margin: 15px;
+
+        .search-label {
+            width: 75px;
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+
+    .warn-tag {
+        height: 130px;
+        margin: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .tag-item-N {
+            position: relative;
+            width: 215px;
+            height: 128px;
+            background: url('../../../../assets/images/choice-N.png') no-repeat center;
+            background-size: 100%;
+        }
+
+        .tag-item-Y {
+            position: relative;
+            width: 215px;
+            height: 128px;
+            background: url('../../../../assets/images/choice-Y.png') no-repeat center;
+            background-size: 100%;
+        }
+
+        .item-label {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            top: 80px;
+            color: #3df6ff;
+            // font-size: 18px;
+            font-family: 'douyuFont';
+        }
+
+        .item-value {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0%);
+            top: 25px;
+            font-size: 18px;
+            color: #fff;
+        }
+    }
+
+    .warn-content {
+        margin: 15px;
+    }
+
+    .zxm-row {
+        width: 100%;
+    }
+}
+
+::v-deep .zxm-tag {
+    font-size: 14px;
+    padding: 0px 20px;
+    line-height: 28px;
+    background: linear-gradient(#2cd1ff55, #1eb0ff55);
+    border-color: #74e9fe;
+    color: #fff;
+}
+</style>

src/views/vent/monitorManager/comment/warnAnalysis.vue

@@ -6,7 +6,7 @@
                     <span class="search-label">查询设备：</span>
                     <a-select v-model:value="dataTypeName" style="width: 220px" placeholder="请选择查询设备">
                         <a-select-option v-for="item in deviceOptions" :key="item" :value="item.value">{{ item.label
-                            }}</a-select-option>
+                        }}</a-select-option>
                     </a-select>
                 </a-col>
                 <a-col :span="4">
@@ -25,7 +25,7 @@
                 </a-col>
             </a-row>
         </div>
-        <div class="warn-tag" v-if="typeList.length!=0">
+        <div class="warn-tag" v-if="typeList.length != 0">
             <div :class="activeIndex == index ? 'tag-item-Y' : 'tag-item-N'" v-for="(item, index) in typeList"
                 :key="index" @click="typeClick(index)">
                 <div class="item-value">{{ item.label }}</div>
@@ -119,14 +119,18 @@ async function getDeviceList() {
         result = res['msgTxt'][0]['datalist'];
     }
     if (result) {
-
         deviceOptions.value = result.map((item) => {
             return {
                 label: item['strinstallpos'],
                 value: item['id'] || item['deviceID'],
+                // strtype: item['strtype'],
+                // strinstallpos: item['strinstallpos'],
+                // devicekind: item['devicekind'],
+                // stationtype: item['stationtype'],
             };
 
         });
+        // console.log( deviceOptions.value,'deviceOptions.value')
     }
 
 }

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

@@ -171,6 +171,11 @@
           />
         </div>
       </a-tab-pane>
+      <a-tab-pane key="5" tab="报警分析" >
+        <div class="tab-item">
+          <safetyWarnAnalysis  :device-type="deviceType"></safetyWarnAnalysis>
+        </div>
+      </a-tab-pane>
     </a-tabs>
     <div class="right-btn-group">
       <div class="update-btn">
@@ -197,6 +202,7 @@
   import { ref, onMounted, onUnmounted, shallowRef, defineProps, watch, inject, unref } from 'vue';
   import { list, getDeviceList, safetyList, getExportUrl, subStationList, initSubStation } from './safety.api';
   // import AlarmHistoryCommentTable from '../comment/AlarmHistoryTable.vue';
+  import  safetyWarnAnalysis from '../comment/safetyWarnAnalysis.vue'
   import AlarmHistoryTable from './AlarmHistoryTable.vue';
   import HistoryTable from './HistoryTable.vue';
   import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
@@ -649,7 +655,7 @@
 
     .@{ventSpace}-picker,
     .@{ventSpace}-select-selector {
-      width: 100% !important;
+      width: 100% ;
       background: #00000017 !important;
       border: 1px solid @vent-form-item-border !important;