公司端首页及预警管控bug修改提交

src/views/vent/home/clique/components/dialog-modal.vue

@@ -60,7 +60,9 @@
                     <span class="warn-value">{{ gas.label }}</span>
                 </div>
             </div>
-            <div class="warn-c"></div>
+            <div class="warn-c">
+                <div class="warn-icon"></div>
+            </div>
             <div class="warn-right">
                 <div class="fire-r">
                     <span class="warn-value">{{ fire.label }}</span>
@@ -478,9 +480,19 @@ function getClose(){
         }
 
         .warn-c {
+            position: relative;
             width: 90px;
             height: 92px;
             background: url('../../../../../assets/images/company/warn-center.png') no-repeat center;
+            .warn-icon{
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%,-85%);
+                width: 50px;
+                height: 50px;
+                background: url('../../../../../assets/images/company/icon1.png') no-repeat center;
+            }
         }
 
         .warn-right {

src/views/vent/home/clique/components/echart-scene.vue

@@ -5,9 +5,18 @@
             <img src="../../../../../assets/images/company/echart-zu.png" alt="" />
         </div>
         <div class="percent">
-            <div class="percent-box">{{ `${percent.jf}%` }}</div>
-            <div class="percent-box">{{ `${percent.yf}%` }}</div>
-            <div class="percent-box">{{ `${percent.hf}%` }}</div>
+            <div class="percent-box">
+                <span class="per-v">{{ percent.jf }}</span>
+                <span class="per-d">m³/min</span>
+            </div>
+            <div class="percent-box">
+                <span class="per-v">{{ percent.yf }}</span>
+                <span class="per-d">m³/min</span>
+            </div>
+            <div class="percent-box">
+                <span class="per-v">{{ percent.hf }}</span>
+                <span class="per-d">m³/min</span>
+            </div>
         </div>
     </div>
 </template>
@@ -23,13 +32,6 @@ let percent = reactive({
     yf: 0,
     hf: 0,
 })
-let echartData = reactive([
-    { name: '进风区', value: 854 },
-    { name: '用风区', value: 495 },
-    { name: '回风区', value: 896 }
-])
-let xData = reactive([])
-let yData = reactive([])
 
 
 
@@ -48,40 +50,62 @@ function getOption() {
         console.log(scene.value, 'scene')
         const myChart = echarts.init(scene.value);
         let option = {
-            color: ['#DA64A8', '#7A54CF', '#47B7E1'],
+            color: ['#4edaff', '#53ffde', '#a696ed'],
             textStyle: {
                 fontSize: 14,
                 color: '#40E7F4 '
             },
-            grid: {
-                top: '6%',
-                left: '2%',
-                bottom: '6%',
-                right: '2%',
-                containLabel: true,
-            },
             tooltip: {
                 trigger: 'item',
                 formatter: "{a} : {b}{c} ({d}%)"
             },
-            // legend: {
-            //     show: true,
-            //     top: '10%',
-            //     right: '10%',
-            //     data: ['当日人员', '施工人员', '管理人员'],
-            //     textStyle: {
-            //         color: '#fff ',
-            //         fontSize: 14
-            //     },
-            //     formatter(name) {
-            //         return name
-            //     },
-            //     itemGap: 16
-            // },
+            legend: [
+                {
+                    // orient: 'vertical',
+                    x: '58%',
+                    y: '15%',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#ccc'
+                    },
+                    data: ['进风区']
+                },
+                {
+                    // orient: 'vertical',
+                    x: '58%',
+                    y: '45%',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#ccc'
+                    },
+                    data: ['用风区']
+                },
+                {
+                    // orient: 'vertical',
+                    x: '58%',
+                    y: '73%',
+                    itemWidth: 8,
+                    itemHeight: 8,
+                    align: 'left',
+                    textStyle: {
+                        fontSize: 12,
+                        color: '#ccc'
+                    },
+                    data: ['回风区']
+                }
+            ],
+
             series: [{
-                name: '当日人员',
+                name: '进风区',
                 type: 'pie',
-                radius: ['40%', '41%'],
+                radius: ['55%', '62%'],
+                center: ['25%', '50%'],
                 label: true,
                 startAngle: 50,
                 clockWise: true,
@@ -94,12 +118,12 @@ function getOption() {
                         normal: {
                             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                 // 0% 处的颜色   
-                                offset: 0, color: '#FF7671'
+                                offset: 0, color: 'rgba(80, 219, 255,1)'
                             },
                             {
 
                                 // 100% 处的颜色
-                                offset: 1, color: '#A14AFF'
+                                offset: 1, color: 'rgba(80, 219, 255,.7)'
                             }],
 
                                 false)
@@ -115,9 +139,10 @@ function getOption() {
                 }
                 ]
             }, {
-                name: '施工人员',
+                name: '用风区',
                 type: 'pie',
-                radius: ['30%', '31%'],
+                radius: ['40%', '47%'],
+                center: ['25%', '50%'],
                 label: false,
                 startAngle: 200,
                 clockWise: true,
@@ -130,10 +155,10 @@ function getOption() {
                         color: { // 完成的圆环的颜色
                             colorStops: [{
                                 offset: 0,
-                                color: '#A568FF' // 0% 处的颜色
+                                color: 'rgba(84, 255, 222,1)' // 0% 处的颜色
                             }, {
                                 offset: 1,
-                                color: '#006CFF' // 100% 处的颜色
+                                color: 'rgba(84, 255, 222,.7)' // 100% 处的颜色
                             }]
                         }
                     }
@@ -146,9 +171,10 @@ function getOption() {
                 }
                 ]
             }, {
-                name: '管理人员',
+                name: '回风区',
                 type: 'pie',
-                radius: ['15%', '16%'],
+                radius: ['25%', '32%'],
+                center: ['25%', '50%'],
                 label: false,
                 startAngle: 80,
                 clockWise: true, //顺时加载
@@ -161,10 +187,10 @@ function getOption() {
                         color: { // 完成的圆环的颜色
                             colorStops: [{
                                 offset: 0,
-                                color: '#57FFE0' // 0% 处的颜色
+                                color: 'rgba(161, 142, 242,1)' // 0% 处的颜色
                             }, {
                                 offset: 1,
-                                color: '#3469E2' // 100% 处的颜色
+                                color: 'rgba(161, 142, 242,.7)' // 100% 处的颜色
                             }]
                         }
                     }
@@ -192,6 +218,11 @@ onMounted(() => {
 </script>
   
 <style scoped lang="less">
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+}
+
 .echartScene {
     width: 100%;
     height: 100%;
@@ -205,7 +236,7 @@ onMounted(() => {
     .pic {
         height: 100%;
         position: absolute;
-        left: 55%;
+        left: 50%;
         top: 0;
         display: flex;
         align-items: center;
@@ -217,34 +248,48 @@ onMounted(() => {
 
     .percent {
         position: absolute;
-        left: 85%;
+        left: 72%;
         top: 0;
-        width: 45px;
+        width: 100px;
         height: 100%;
         display: flex;
         flex-direction: column;
-        // justify-content: space-between;
         align-items: center;
 
         .percent-box {
-            font-size: 14px;
+
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            padding: 0px 10px 0px 15px;
+            box-sizing: border-box;
+
+            .per-v {
+                font-family: 'douyuFont';
+                font-size: 14px;
+            }
+
+            .per-d {
+                font-size: 12px;
+                color: #ccc;
+            }
 
             &:nth-child(1) {
                 position: absolute;
-                top: 12%;
-                color: #1ba4ff;
+                top: 14%;
+                color: #4edaff;
             }
 
             &:nth-child(2) {
                 position: absolute;
-                top: 45%;
-                color: #1ff8fb;
+                top: 44%;
+                color: #53ffde;
             }
 
             &:nth-child(3) {
                 position: absolute;
-                top: 76%;
-                color: #9ae1ff;
+                top: 72%;
+                color: #a696ed;
             }
         }
     }

src/views/vent/home/clique/components/scene-key.vue

@@ -1,72 +1,222 @@
 <template>
-    <div class="sceneKey">
-      <div class="scene-title">{{ sceneTitle }}</div>
-      <div class="scene-content">
-       <div class="content-t"></div>
-       <div class="content-c">
+  <div class="sceneKey">
+    <div class="scene-title">{{ sceneTitle }}</div>
+    <div class="scene-content">
+      <div class="content-t">
+
+        <a-select style="width: 120px;" v-model="select1" allowClear class="code-mode-select"
+          placeholder="请选择">
+          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
+            device.label
+          }}
+          </a-select-option>
+        </a-select>
+        <a-select style="width: 120px; " v-model="select1" allowClear class="code-mode-select"
+          placeholder="请选择">
+          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
+            device.label
+          }}
+          </a-select-option>
+        </a-select>
+        <a-select style="width: 120px; " v-model="select1" allowClear class="code-mode-select"
+          placeholder="请选择">
+          <a-select-option v-for="device in selectList1" :key="device.value" :value="device.value">{{
+            device.label
+          }}
+          </a-select-option>
+        </a-select>
+      </div>
+      <div class="content-c">
         <echartScene></echartScene>
-       </div>
-       <div class="content-b"></div>
+      </div>
+      <div class="content-b">
+        <div class="card-box" v-for="(item, index) in sceneList" :key="index">
+          <i class="box-icon">
+            <SvgIcon v-if="index == 0" class="icon" size="14" name="vent-c" />
+            <SvgIcon v-if="index == 1" class="icon" size="14" name="fire-c" />
+            <SvgIcon v-if="index == 2" class="icon" size="14" name="gas-c" />
+            <SvgIcon v-if="index == 3" class="icon" size="14" name="dust-c" />
+          </i>
+          <span class="box-label">{{ item.label }}</span>
+          <span class="box-value">{{ item.value }}</span>
+          <i  class="box-img">
+            <img v-if="true" src="../../../../../assets/images/company/iconS1.png" alt="">
+            <img v-else src="../../../../../assets/images/company/iconS2.png" alt="">
+            <img v-else src="../../../../../assets/images/company/iconS3.png" alt="">
+            <img v-else src="../../../../../assets/images/company/iconS4.png" alt="">
+          </i>
+        </div>
       </div>
     </div>
-  </template>
-  <script lang="ts" setup>
-  import { ref,reactive } from 'vue'
-  import echartScene from '../components/echart-scene.vue'
-  
-  let sceneTitle = ref('关键场景通防综合监测')
-  
- 
-  
-  </script>
-  <style lang="less" scoped>
-  @font-face {
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import echartScene from '../components/echart-scene.vue'
+
+let sceneTitle = ref('关键场景通防综合监测')
+
+let sceneList = reactive([
+  { label: '通风风险性', value: '低风险' },
+  { label: '火灾风险性', value: '低风险' },
+  { label: '瓦斯风险性', value: '低风险' },
+  { label: '粉尘风险性', value: '低风险' },
+])
+
+let select1 = ref('')
+let selectList1 = reactive([
+  { label: '测试', value: '测试' },
+  { label: '测试1', value: '测试1' }
+])
+
+
+</script>
+<style lang="less" scoped>
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.sceneKey {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .scene-title {
+    position: absolute;
+    left: 50px;
+    top: 12px;
+    color: #fff;
     font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
+    font-size: 14px;
+
   }
-  
-  .sceneKey {
-    position: relative;
-    width: 100%;
+
+  .scene-content {
+
     height: 100%;
-  
-    .scene-title {
-      position: absolute;
-      left: 50px;
-      top: 12px;
-      color: #fff;
-      font-family: 'douyuFont';
-      font-size: 14px;
-    }
-  
-    .scene-content {
-   
-      height: 100%;
-      padding: 62px 20px 28px 20px;
-      box-sizing: border-box;   
+    padding: 62px 20px 28px 20px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .content-t {
+      position: relative;
+      width: 100%;
+      height: 30px;
       display: flex;
-      flex-direction: column;
       justify-content: space-between;
       align-items: center;
-      .content-t{
-        width: 100%;
-        height: 30px;
-        background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
-        background-size: 100% 100%;
-      }
-      .content-c{
-        width: 100%;
-        height: calc((100% - 30px) / 2 );
-        background: url('../../../../../assets/images/company/area2.png') no-repeat center;
-        background-size: 100% 100%;
+      background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
+      background-size: 100% 100%;
+
+      .zxm-select {
+        position: absolute;
+        top: 50%;
+        transform: translate(0, -50%);
+
+        &:nth-child(1) {
+          left: 10px;
+        }
+
+        &:nth-child(2) {
+          left: 136px;
+        }
+
+        &:nth-child(3) {
+          left: 262px;
+        }
       }
-      .content-b{
-        width: 100%;
-        height: calc((100% - 30px) / 2);
-        background: url('../../../../../assets/images/company/area1.png') no-repeat center;
+    }
+
+    .content-c {
+      width: 100%;
+      height: calc((100% - 30px) / 2);
+      background: url('../../../../../assets/images/company/area2.png') no-repeat center;
+      background-size: 100% 100%;
+    }
+
+    .content-b {
+      width: 100%;
+      height: calc((100% - 30px) / 2);
+      background: url('../../../../../assets/images/company/area1.png') no-repeat center;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      align-items: center;
+
+      .card-box {
+        position: relative;
+        width: 331px;
+        height: 32px;
+        background: url('../../../../../assets/images/company/fxfx.png') no-repeat center;
         background-size: 100% 100%;
+
+        .box-icon {
+          position: absolute;
+          left: 13px;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        .box-label {
+          position: absolute;
+          left: 56px;
+          top: 50%;
+          transform: translate(0, -50%);
+          color: #fff;
+          font-size: 14px;
+        }
+
+        .box-value {
+          position: absolute;
+          right: 96px;
+          top: 50%;
+          transform: translate(0, -48%);
+          font-family: 'douyuFont';
+          font-size: 14px;
+          color: #31fbcc;
+        }
+        .box-img{
+          position: absolute;
+          right: 2px;
+          top: 50%;
+          transform: translate(0, -60%);
+        }
       }
     }
   }
-  </style>
+}
+
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
+  height: 24px;
+}
+
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
+  height: 24px;
+}
+
+::v-deep .zxm-select-selection-placeholder {
+  color: #fff !important;
+  line-height: 22px !important;
+}
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
+    line-height: 24px;
+}
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector{
+  background-color: transparent;
+ border-top: 0px;
+ border-bottom: 0px;
+ border-left: 3px solid;
+ border-right: 3px solid;
+
+}
+::v-deep .zxm-select-arrow{
+  color: #fff !important;
+}
+</style>
     

src/views/vent/home/clique/components/wind-road.vue

@@ -77,7 +77,7 @@ function getOption() {
             },
 
             yAxis: {
-                max:300,
+                max: 300,
                 name: '长度(km)',
                 nameTextStyle: {
                     color: '#3df6ff',
@@ -340,6 +340,10 @@ onMounted(() => {
             .head-nav {
                 height: 30px;
                 line-height: 30px;
+                padding-left: 58px;
+                box-sizing: border-box;
+                background: url('../../../../../assets/images/company/lentj.png') no-repeat center;
+                background-size: 100% 100%;
 
                 span {
                     font-size: 14px;

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

@@ -204,7 +204,7 @@ function getSysTypeWarnList(data) {
 //获取预警详情弹窗右侧数据
 function getSysWarnList(id, type) {
   timer = setInterval(() => {
-    sysWarn({ sysid: id, type: type }).then((res) => {
+     sysWarn({ sysid: id, type: type }).then((res) => {
       if (type == 'fire') {
         listData.bundletube = res.bundletube,
           listData.fiber = res.fiber
@@ -220,7 +220,7 @@ function getSysWarnList(id, type) {
       }
 
     });
-  }, 1000)
+  }, 1500)
 
 }
 

src/views/vent/monitorManager/alarmMonitor/alarm.data.ts

@@ -71,72 +71,72 @@ export const levelColumns: BasicColumn[] = [
 export const iconsMonitor = reactive({
   fanmain: {
     url: getAssetURL('vent/alarm-icons/zhushan.png'),
-    level: 1,
+    level: 100,
     text: '主风机',
   },
   fanlocal: {
     url: getAssetURL('vent/alarm-icons/js.png'),
-    level: 2,
+    level: 100,
     text: '局部风机',
   },
   gate: {
     url: getAssetURL('vent/alarm-icons/fm.png'),
-    level: 1,
+    level: 100,
     text: '风门',
   },
   window: {
     url: getAssetURL('vent/alarm-icons/fc.png'),
-    level: 1,
+    level: 100,
     text: '风窗',
   },
   windrect: {
     url: getAssetURL('vent/alarm-icons/cf.png'),
-    level: 5,
+    level: 100,
     text: '测风装置',
   },
   forcFan: {
     url: getAssetURL('vent/alarm-icons/yafeng.png'),
-    level: 1,
+    level: 100,
     text: '压风装置',
   },
   spray: {
     url: getAssetURL('vent/alarm-icons/penlin.png'),
-    level: 4,
+    level: 100,
     text: '喷淋',
   },
   dustdev: {
     url: getAssetURL('vent/alarm-icons/penfen.png'),
-    level: 1,
+    level: 100,
     text: '喷粉',
   },
   nitrogen: {
     url: getAssetURL('vent/alarm-icons/zhudan.png'),
-    level: 1,
+    level: 100,
     text: '注氮',
   },
   pulping: {
     url: getAssetURL('vent/alarm-icons/zhujiang.png'),
-    level: 1,
+    level: 100,
     text: '注浆',
   },
   atomizing: {
     url: getAssetURL('vent/alarm-icons/pw.png'),
-    level: 3,
+    level: 100,
     text: '跟机喷雾',
   },
   dustsensor: {
     url: getAssetURL('vent/alarm-icons/ccq.png'),
-    level: 1,
+    level: 100,
     text: '除尘器',
   },
   pump: {
     url: getAssetURL('vent/alarm-icons/wasibeng.png'),
-    level: 2,
+    level: 100,
     text: '瓦斯泵',
   },
   gas: {
     url: getAssetURL('vent/alarm-icons/wasichoucaig.png'),
-    level: 1,
+    level: 100,
     text: '瓦斯抽采管路',
   },
 });
@@ -506,54 +506,43 @@ export const dustMonitor = [
   },
 ];
 
-export const gasMonitor = [
-  {
-    title: 'CO测点',
-    code: '',
-  },
-  {
-    title: 'CO2测点',
-    code: '',
-  },
-  {
-    title: 'CH4测点',
-    code: '',
-  },
-  {
-    title: 'O2测点',
-    code: '',
-  },
-];
+
 
 export const fireMonitor = [
   {
     title: '最高温度(℃)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'CO最大值(ppm)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'CH4最大值(%)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'C2H4最大值(ppm)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'CO2最大值(%)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: '上隅角O2最小值(%)',
     code: '',
+    level:null,
     value: 0,
   },
 ];
@@ -581,26 +570,31 @@ export const fireMonitor1 = [
   {
     title: 'CO最大值(ppm)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'CH4最大值(%)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'C2H4最大值(ppm)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: 'CO2最大值(%)',
     code: '',
+    level:null,
     value: 0,
   },
   {
     title: '上隅角O2最小值(%)',
     code: '',
+    level:null,
     value: 0,
   },
 ];

src/views/vent/monitorManager/alarmMonitor/fire.data.ts

@@ -582,19 +582,5 @@ export const centerAreaListB1 = [
 
 //瓦斯
 
-//测点类型列表-安全监控
-export const pointListWs = [
-  { label: '测点类型1', value: 0 },
-  { label: '测点类型2', value: 1 },
-  { label: '测点类型3', value: 2 }
-]
-//安全监控-表头
-export const tabHeadList = [
-  { id: 0, label: '所属单位' },
-  { id: 1, label: '所属单位1' },
-  { id: 2, label: '所属单位2' },
-  { id: 3, label: '所属单位3' },
-]
-
 //测点类型-瓦斯巡检列表
 export const pointListWs1 = []

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -141,6 +141,7 @@ let TimeRange = reactive<any>([])
 let echartDataSg1 = reactive({
     xData: [],
     yData: [],
+    lengedData:'O2',
 })
 let echartDataSgList = reactive<any[]>([])
 
@@ -150,6 +151,7 @@ function btnClick(item, ind) {
     type.value = item.label
     echartDataSg1.xData.length = 0
     echartDataSg1.yData.length = 0
+    echartDataSg1.lengedData=type.value
     switch (type.value) {
         case 'O2':
             echartDataSgList.forEach(el => {
@@ -217,10 +219,10 @@ watch(() => props.listData, (val) => {
             mbList[4].nd = val.bundletube[0].readData.ch2val
             mbList[5].nd = val.bundletube[0].readData.gasval
             mbList.forEach(el => {
-                el.time1 = val.bundletube[0].readTime
+                el.time1 = val.bundletube[0].readTime.substring(0,val.bundletube[0].readTime.lastIndexOf(':'))
                 el.address = val.bundletube[0].strinstallpos
             })
-            console.log(mbList, '=====000000')
+
             echartDataSg1.xData.length = 0
             echartDataSg1.yData.length = 0
             echartDataSgList.length = 0
@@ -387,14 +389,18 @@ watch(() => props.listData, (val) => {
                     background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
 
                     .text-t {
+                        width: 32px;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
+                        width: calc(100% - 32px);
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
+                        display: flex;
+                        justify-content: flex-end;
                     }
                 }
 
@@ -440,14 +446,18 @@ watch(() => props.listData, (val) => {
                     background: url('../../../../../assets/images/fire/contetn.png') no-repeat;
 
                     .text-t {
+                        width: 32px;
                         color: #fff;
                         font-size: 12px;
                     }
 
                     .text-v {
+                        width: calc(100% - 32px);
                         font-family: 'douyuFont';
                         font-size: 10px;
                         color: #3df6ff;
+                        display: flex;
+                        justify-content: flex-end;
                     }
                 }
 

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine.vue

@@ -68,7 +68,7 @@
             axisTick: {
               show: false,
             },
-            data: echartDataGqs.xData,
+            data: echartDataGqs.xData ? echartDataGqs.xData : [],
           },
         ],
         yAxis: [
@@ -104,7 +104,7 @@
         ],
         series: [
           {
-            name: '最大值',
+            name:echartDataGqs.maxData ? echartDataGqs.maxData.lengedData : '',
             type: 'line',
             smooth: true,
             showSymbol: true,
@@ -120,10 +120,10 @@
                 color: '#19a3df',
               },
             },
-            data:echartDataGqs.maxData,
+            data:echartDataGqs.maxData ? echartDataGqs.maxData.data : [],
           },
           {
-            name: '最小值',
+            name:echartDataGqs.minData ? echartDataGqs.minData.lengedData  : '' ,
             type: 'line',
             smooth: true,
             showSymbol: true,
@@ -139,10 +139,10 @@
                 color: '#4fffad',
               },
             },
-            data:echartDataGqs.minData,
+            data:echartDataGqs.minData ? echartDataGqs.minData.data : [],
           },
           {
-            name: '平均值',
+            name: echartDataGqs.aveValue ? echartDataGqs.aveValue.lengedData : '',
             type: 'line',
             smooth: true,
             showSymbol: true,
@@ -159,7 +159,7 @@
               },
             },
        
-            data: echartDataGqs.aveValue,
+            data:echartDataGqs.aveValue ? echartDataGqs.aveValue.data : [],
           },
         ],
       };

src/views/vent/monitorManager/alarmMonitor/fire/common/echartLine1.vue

@@ -137,7 +137,7 @@ function getOption() {
             ],
             series: [
                 {
-                    name: '束管监测',
+                    name: echartDataSgs.lengedData ? echartDataSgs.lengedData : '',
                     type: 'line',
                     smooth: false,
                     showSymbol: false,

src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -39,7 +39,7 @@ let props = defineProps({
     listData: Object,
 });
 
-let maxY=ref(10)
+let maxY = ref(10)
 //顶部区域数据
 let topAreaList = reactive<any[]>([])
 
@@ -52,9 +52,18 @@ let choiceData = reactive<any[]>([])
 
 //粉尘图表数据
 let echartDataFc = reactive({
-    maxData: [],
-    minData: [],
-    aveValue: [],
+    maxData: {
+        lengedData: '粉尘浓度',
+        data: []
+    },
+    minData: {
+        lengedData: '粉尘呼尘占比(%)',
+        data: []
+    },
+    aveValue: {
+        lengedData: '总尘浓度',
+        data: []
+    },
     xData: []
 })
 
@@ -62,9 +71,9 @@ let echartDataFc = reactive({
 function topAreaClick(index) {
     activeIndex.value = index
     centerAreaListB.length = 0
-    echartDataFc.maxData.length = 0
-    echartDataFc.minData.length = 0
-    echartDataFc.aveValue.length = 0
+    echartDataFc.maxData.data.length = 0
+    echartDataFc.minData.data.length = 0
+    echartDataFc.aveValue.data.length = 0
     echartDataFc.xData.length = 0
     centerAreaListB.push(
         { content: choiceData[index].readData.dustval },
@@ -73,9 +82,9 @@ function topAreaClick(index) {
         { content: choiceData[index].readData.atomizingState },
     )
     choiceData[index].history.forEach(el => {
-        echartDataFc.maxData.push(el.dustval)
-        echartDataFc.minData.push(el.ratio)
-        echartDataFc.aveValue.push(el.totalDust)
+        echartDataFc.maxData.data.push(el.dustval)
+        echartDataFc.minData.data.push(el.ratio)
+        echartDataFc.aveValue.data.push(el.totalDust)
         echartDataFc.xData.push(el.time)
     })
 }
@@ -96,9 +105,9 @@ watch(() => props.listData, (val) => {
         })
         choiceData = val.common.dust
         centerAreaListB.length = 0
-        echartDataFc.maxData.length = 0
-        echartDataFc.minData.length = 0
-        echartDataFc.aveValue.length = 0
+        echartDataFc.maxData.data.length = 0
+        echartDataFc.minData.data.length = 0
+        echartDataFc.aveValue.data.length = 0
         echartDataFc.xData.length = 0
         if (choiceData[activeIndex.value]) {
             centerAreaListB.push(
@@ -109,9 +118,9 @@ watch(() => props.listData, (val) => {
             )
 
             choiceData[activeIndex.value].history.forEach(el => {
-                echartDataFc.maxData.push(el.dustval)
-                echartDataFc.minData.push(el.ratio)
-                echartDataFc.aveValue.push(el.totalDust)
+                echartDataFc.maxData.data.push(el.dustval)
+                echartDataFc.minData.data.push(el.ratio)
+                echartDataFc.aveValue.data.push(el.totalDust)
                 echartDataFc.xData.push(el.time)
             })
 
@@ -125,9 +134,9 @@ watch(() => props.listData, (val) => {
                 { content: choiceData[activeIndex.value].readData.atomizingState },
             )
             choiceData[activeIndex.value].history.forEach(el => {
-                echartDataFc.maxData.push(el.dustval)
-                echartDataFc.minData.push(el.ratio)
-                echartDataFc.aveValue.push(el.totalDust)
+                echartDataFc.maxData.data.push(el.dustval)
+                echartDataFc.minData.data.push(el.ratio)
+                echartDataFc.aveValue.data.push(el.totalDust)
                 echartDataFc.xData.push(el.time)
             })
         }

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

@@ -80,17 +80,26 @@ import { onMounted, ref, reactive, watch, defineProps } from 'vue';
 import imgUrl from '../../../../../assets/images/fire/pie.png'
 import echartLine from './common/echartLine.vue'
 import echartLine1 from './common/echartLine1.vue'
-import { topList, pointList, echartDataGq, pointList1, contentList, } from '../fire.data'
+import { topList, pointList, pointList1, contentList, } from '../fire.data'
 
 let props = defineProps({
     listData: Object,
 });
 
 let maxY=ref(2000)
+//光钎测温-图表数据
+let echartDataGq=reactive({
+    maxData: {
+    lengedData: '当前温度',
+    data: []
+  },
+  xData: [],
+})
 //束管监测-图表数据
 let echartDataSg = reactive({
     xData: [],
     yData: [],
+    lengedData:'O2',
 })
 let echartDataSgList = reactive<any[]>([])
 //光钎测温测点编号
@@ -108,7 +117,6 @@ function handleChange(val) {
 //束管监测-时间选项切换
 function onDataChange(value, dateString) {
     TimeRange = [dateString[0], dateString[1]]
-    console.log(TimeRange, 'TimeRange')
 }
 //束管监测测点编号选项切换
 function handleChange1(val) {
@@ -118,6 +126,7 @@ function handleChange1(val) {
 function getSgClick(items) {
     echartDataSg.xData.length = 0
     echartDataSg.yData.length = 0
+    echartDataSg.lengedData=items.title
     switch (items.title) {
         case 'O2':
             echartDataSgList.forEach(el => {
@@ -173,10 +182,10 @@ watch(() => props.listData, (val, val1) => {
             topList[2].value = val.fiber[0].readData.favg
             topList[3].text = val.fiber[0].warnFlag ? '报警' : '未报警'
             echartDataGq.xData.length = 0
-            echartDataGq.maxData.length = 0
+            echartDataGq.maxData.data.length = 0
             JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el => {
                 echartDataGq.xData.push(el.pos)
-                echartDataGq.maxData.push(el.value)
+                echartDataGq.maxData.data.push(el.value)
             })
 
         }

src/views/vent/monitorManager/alarmMonitor/fire/gasPage.vue

@@ -3,37 +3,22 @@
         <div class="top-area">
             <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
                 <div class="box-label">{{ item.label }}</div>
-                <div class="box-value">{{ item.value }}</div>
-            </div>
-        </div>
-        <div class="center-area">
-            <div class="title-c">
-                <div class="text-c">安全监控系统监测点</div>
-                <div class="select-c">
-                    <div class="select-label">测点类型 : </div>
-                    <a-select style="width: 240px; margin-left: 10px" v-model="pointType" allowClear
-                        class="code-mode-select" placeholder="请选择" @change="handleChange">
-                        <a-select-option v-for="device in pointListWs" :key="device.value" :value="device.value">{{
-                            device.label
-                        }}
-                        </a-select-option>
-                    </a-select>
-                </div>
-            </div>
-            <div class="content-c">
-                <div class="content-head">
-                    <div class="head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.label }}</div>
-                </div>
-                <div class="content-body">
-                    <div class="body-tr" v-for="(item, ind) in tableListWs" :key="ind">
-                        <div class="body-td">{{ item.value }}</div>
-                        <div class="body-td">{{ item.value1 }}</div>
-                        <div class="body-td">{{ item.value2 }}</div>
-                        <div class="body-td">{{ item.value3 }}</div>
-                    </div>
-                </div>
+                <div :class="{
+                    'box-value': item.value == 0,
+                    'box-value1': item.value == 101,
+                    'box-value2': item.value == 102,
+                    'box-value3': item.value == 103,
+                    'box-value4': item.value == 104,
+                    'box-value5': item.value == 201,
+                    'box-value6': item.value != 0 && item.value != 101 && item.value != 102 && item.value != 103 && item.value != 104 && item.value != 201,
+                }
+
+                    ">{{ item.value == 0 ? '正常' : item.value == 101 ? '较低风险' : item.value == 102 ? '低风险' : item.value
+        == 103 ?
+        '中风险' : item.value == 104 ? '高风险' : item.value == 201 ? '报警' : '--' }}</div>
             </div>
         </div>
+
         <div class="bot-area">
             <div class="title-b">
                 <div class="text-b">瓦斯巡检系统监测点</div>
@@ -58,7 +43,10 @@
                     <div class="item-r">
                         <div class="content-r" v-for="(items, ind) in item.listR" :key="ind">
                             <span>{{ `${items.label} : ` }}</span>
-                            <span>{{ items.value }}</span>
+                            <span :class="{
+                                'status-f': items.value == 1,
+                                'status-l': items.value == 0,
+                            }">{{ items.value == 1 ? '异常' : items.value == 0 ? '正常' : items.value }}</span>
                         </div>
                     </div>
                 </div>
@@ -70,7 +58,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive, watch, markRaw, defineProps } from 'vue';
-import { pointListWs, tabHeadList, pointListWs1, } from '../fire.data'
+import { pointListWs1, } from '../fire.data'
 
 let props = defineProps({
     listData: Object,
@@ -79,22 +67,13 @@ let props = defineProps({
 //瓦斯顶部区域数据
 let topAreaListWs = reactive<any[]>([])
 
-//安全监控-列表
-let tableListWs = reactive<any[]>([])
-
 //瓦斯监控列表数据
 let cardListWs = reactive<any[]>([])
 
 
-//测点类型-安全监控
-let pointType = ref('')
 //测点类型-瓦斯巡检
 let pointType1 = ref('')
-//测点类型-安全监控选项切换
-function handleChange(val) {
-    console.log(val, '安全监测测点类型')
-    pointType.value = val
-}
+
 //测点类型-瓦斯监测选项切换
 function handleChange1(val) {
     console.log(val, '瓦斯巡检测点类型')
@@ -105,20 +84,22 @@ watch(() => props.listData, (val) => {
     console.log(val, '瓦斯详情数据-------')
     if (JSON.stringify(val.common) != '{}' && val.common.gas.length != 0) {
         topAreaListWs.length = 0
-        tableListWs.length = 0
         cardListWs.length = 0
 
+        val.common.pump.forEach(v => {
+            topAreaListWs.push({ label: v.strinstallpos, value: v.warnLevel })
+        })
+
         val.common.gas.forEach(el => {
-            topAreaListWs.push({ label: el.strinstallpos, value: el.readData.gasC })
-            tableListWs.push({ value: el.readData.gasC, value1: el.readData.gasMass, value2: el.readData.gasMixMass, value3: el.readData.gasTotalMass, })
+
             cardListWs.push({
                 label: '甲烷',
                 value: el.readData.gasC,
                 listR: [
                     { id: 0, label: '测点类型', value: el.typeName },
                     { id: 1, label: '测点位置', value: el.strinstallpos },
-                    { id: 2, label: '数据时间', value: el.readTime},
-                    { id: 3, label: '测点状态', value: el.warnFlag ? '异常' : '正常'  },
+                    { id: 2, label: '数据时间', value: el.readTime },
+                    { id: 3, label: '测点状态', value: el.warnFlag },
                 ]
             })
         })
@@ -163,98 +144,78 @@ watch(() => props.listData, (val) => {
                 position: absolute;
                 left: 50%;
                 bottom: 14px;
+                transform: translate(-50%, 0);
                 font-family: 'douyuFont';
                 font-size: 18px;
-                color: #3df6ff;
-                transform: translate(-50%, 0);
+                color: rgb(145, 230, 9);
             }
-        }
-    }
-
-    .center-area {
-        height: 280px;
-        padding: 10px 15px;
-        margin-bottom: 10px;
-        background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
-        background-size: 100% 100%;
-        box-sizing: border-box;
 
-        .title-c {
-            height: 30px;
-            margin-bottom: 10px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-
-            .text-c {
+            .box-value1 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
                 font-family: 'douyuFont';
-                font-size: 16px;
+                font-size: 18px;
+                color: rgb(0, 242, 255);
             }
 
-            .select-c {
-                display: flex;
-                justify-content: flex-start;
-                align-items: center;
+            .box-value2 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #ffff35;
             }
-        }
 
-        .content-c {
-            height: calc(100% - 40px);
-
-            .content-head {
-                height: 36px;
-                border-left: 2px solid #1a7187;
-                border-top: 2px solid #1a7187;
-                border-right: 2px solid #1a7187;
-                border-bottom: 2px solid #228fa2;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                .head-item {
-                    display: flex;
-                    flex: 1;
-                    height: 100%;
-                    justify-content: center;
-                    align-items: center;
-                    color: #3df6ff;
-                    font-size: 14px;
-
-                }
+            .box-value3 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #ffbe69;
             }
 
-            .content-body {
-                height: calc(100% - 36px);
-                overflow-y: auto;
-
-                .body-tr {
-                    height: 36px;
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-
-                    &:nth-child(odd) {
-                        background-color: rgba(9, 46, 84, .8);
-                    }
+            .box-value4 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #ff6f00;
+            }
 
-                    &:nth-child(even) {
-                        background-color: rgba(13, 56, 103, .8);
-                    }
+            .box-value5 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #ff0000;
+            }
 
-                    .body-td {
-                        display: flex;
-                        flex: 1;
-                        height: 100%;
-                        justify-content: center;
-                        align-items: center;
-                    }
-                }
+            .box-value6 {
+                position: absolute;
+                left: 50%;
+                bottom: 14px;
+                transform: translate(-50%, 0);
+                font-family: 'douyuFont';
+                font-size: 18px;
+                color: #bbb;
             }
         }
     }
 
+
+
     .bot-area {
-        height: calc(100% - 438px);
+        height: calc(100% - 148px);
         padding: 10px 15px 0px 15px;
         background: url('../../../../../assets/images/fire/bj1.png') no-repeat;
         background-size: 100% 100%;
@@ -285,6 +246,7 @@ watch(() => props.listData, (val) => {
             justify-content: flex-start;
             align-items: flex-start;
             flex-wrap: wrap;
+            overflow-y: auto;
 
             .card-b {
                 position: relative;
@@ -332,22 +294,33 @@ watch(() => props.listData, (val) => {
                     justify-content: space-around;
                     box-sizing: border-box;
 
-                    .content-r{
+                    .content-r {
                         display: flex;
+
                         span {
-                        font-size: 14px;
-                        &:first-child{
-                            display: inline-block;
-                            width: 68px;
+                            font-size: 14px;
+
+                            &:first-child {
+                                display: inline-block;
+                                width: 68px;
+                            }
+
+                            &:last-child {
+                                display: inline-block;
+                                width: calc(100% - 68px);
+                            }
                         }
-                        &:last-child{
-                            display: inline-block;
-                            width: calc(100% - 68px);
+
+                        .status-f {
+                            color: #ff0000;
+                        }
+
+                        .status-l {
+                            color: #3df6ff;
                         }
                     }
-                    }
 
-                   
+
                 }
 
             }

src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

@@ -85,7 +85,6 @@ let pointCode = ref('')
 
 //温度监测测点编号选项切换
 function handleChange(val) {
-    console.log(val, '测点编码')
     pointCode.value = val
 }
 
@@ -97,7 +96,6 @@ watch(() => props.listData, (val) => {
             topOutList[1].value = val.fiber[0].readData.fmin
             topOutList[2].value = val.fiber[0].readData.favg
             topOutList[3].text = val.fiber[0].warnFlag ? '存在风险' : '正常'
-            console.log(JSON.parse(val.fiber[0].readData.fibreTemperature),'---000')
             echartDataWd.xData.length=0
             echartDataWd.maxData.length=0
             JSON.parse(val.fiber[0].readData.fibreTemperature).forEach(el=>{

src/views/vent/monitorManager/alarmMonitor/fire/ventilate.vue

@@ -6,7 +6,18 @@
         <div class="top-content">
           <div class="content-item" v-for="(items, ind) in item.content" :key="ind">
             <span class="item-label">{{ items.label }}</span>
-            <span class="item-value">{{ items.value }}</span>
+            <span :class="{
+              'item-value1': items.value == 0,
+              'item-value2': items.value == 101,
+              'item-value3': items.value == 102,
+              'item-value4': items.value == 103,
+              'item-value5': items.value == 104,
+              'item-value6': items.value == 201,
+              'item-value': items.value != 0 && items.value != 101 && items.value != 102 && items.value != 103 && items.value != 104 && items.value != 201,
+
+            }">{{ items.value == 0 ? '正常' : items.value == 101 ? '较低风险' : items.value == 102 ? '低风险' : items.value ==
+  103 ?
+  '中风险' : items.value == 104 ? '高风险' : items.value == 201 ? '报警' : items.value }}</span>
           </div>
         </div>
       </div>
@@ -38,7 +49,7 @@ let props = defineProps({
   listData: Object,
 });
 
-let maxY=ref(2000)
+let maxY = ref(2000)
 //是否显示报警区域
 // let isShowTop = ref(true);
 //报警区域数据
@@ -47,12 +58,19 @@ let topAreaList = reactive<any[]>([]);
 // let activeIndex = ref(0);
 //通风图表数据
 const echartDataFc1 = reactive({
-  maxData: [],
-  minData: [],
-  aveValue: [],
+  maxData: {
+    lengedData: '进风量',
+    data: []
+  },
+  minData: {
+    lengedData: '回风量',
+    data: []
+  },
+  // aveValue: [],
   xData: [],
 });
 
+
 // let alive = ref(true);
 //顶部区域选项切换
 // function topAreaClick(index) {
@@ -66,8 +84,8 @@ watch(
     if (JSON.stringify(val.common) != '{}') {
       // isShowTop.value = val.common.warnFlag;
       // alive.value = false;
-      echartDataFc1.maxData.length = 0;
-      echartDataFc1.minData.length = 0;
+      echartDataFc1.maxData.data.length = 0;
+      echartDataFc1.minData.data.length = 0;
       echartDataFc1.xData.length = 0;
       topAreaList.length = 0;
       if (val.common.warnDevices.length != 0) {
@@ -79,16 +97,19 @@ watch(
               {
                 ids: 1,
                 label: '报警等级',
-                value:
-                  el.datalist[0].warnLevel == 101
-                    ? '正常'
-                    : el.datalist[0].warnLevel == 102
-                      ? '低风险'
-                      : el.datalist[0].warnLevel == 103
-                        ? '中风险'
-                        : el.datalist[0].warnLevel == 104
-                          ? '高风险'
-                          : '报警',
+                // value:
+                //   el.datalist[0].warnLevel == 0
+                //     ? '正常' :
+                //     el.datalist[0].warnLevel == 101
+                //       ? '较低风险'
+                //       : el.datalist[0].warnLevel == 102
+                //         ? '低风险'
+                //         : el.datalist[0].warnLevel == 103
+                //           ? '中风险'
+                //           : el.datalist[0].warnLevel == 104
+                //             ? '高风险'
+                //             : '报警',
+                value: el.datalist[0].warnLevel,
               },
               { ids: 2, label: '报警描述', value: el.datalist[0].warnDes },
             ],
@@ -115,8 +136,8 @@ watch(
       centerAreaListB1[2].content = val.common.xufengliang;
 
       val.common.history.forEach((v) => {
-        echartDataFc1.maxData.push(parseFloat(v.jin));
-        echartDataFc1.minData.push(parseFloat(v.hui));
+        echartDataFc1.maxData.data.push(parseFloat(v.jin));
+        echartDataFc1.minData.data.push(parseFloat(v.hui));
         echartDataFc1.xData.push(v.time);
       });
 
@@ -184,68 +205,74 @@ watch(
             position: absolute;
             right: 52px;
             top: 50%;
-            transform: translate(0, -44%);
+            transform: translate(0, -32%);
             font-size: 12px;
             font-family: 'douyuFont';
             color: #3df6ff;
           }
+
+          .item-value1 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: rgb(145, 230, 9);
+          }
+
+          .item-value2 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: rgb(0, 242, 255);
+          }
+
+          .item-value3 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: #ffff35;
+          }
+
+          .item-value4 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: #ffbe69;
+          }
+
+          .item-value5 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: #ff6f00;
+          }
+
+          .item-value6 {
+            position: absolute;
+            right: 52px;
+            top: 50%;
+            transform: translate(0, -32%);
+            font-size: 12px;
+            font-family: 'douyuFont';
+            color: #ff0000;
+          }
         }
       }
     }
-
-    // .top-box1 {
-    //   position: relative;
-    //   width: 480px;
-    //   height: 183px;
-    //   background: url('../../../../../assets//images/fire/fc-t1.png') no-repeat;
-
-    //   .top-title {
-    //     position: absolute;
-    //     left: 50%;
-    //     top: 6px;
-    //     transform: translate(-50%, 0);
-    //   }
-
-    //   .top-content {
-    //     position: absolute;
-    //     top: 33px;
-    //     left: 0;
-    //     width: 100%;
-    //     height: calc(100% - 33px);
-    //     display: flex;
-    //     justify-content: flex-start;
-    //     align-items: flex-start;
-    //     flex-wrap: wrap;
-    //     padding-bottom: 20px;
-    //     box-sizing: border-box;
-    //     cursor: pointer;
-
-    //     .content-item {
-    //       position: relative;
-    //       width: 50%;
-    //       height: 50%;
-    //       background: url('../../../../../assets/images/fire/content-item.png') no-repeat center;
-
-    //       .item-label {
-    //         position: absolute;
-    //         left: 52px;
-    //         top: 50%;
-    //         transform: translate(0, -44%);
-    //         font-size: 12px;
-    //       }
-
-    //       .item-value {
-    //         position: absolute;
-    //         right: 52px;
-    //         top: 50%;
-    //         transform: translate(0, -44%);
-    //         font-size: 12px;
-    //         font-family: 'douyuFont';
-    //         color: #3df6ff;
-    //       }
-    //     }
-    //   }
-    // }
   }
 
   .center-area {

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

@@ -76,17 +76,19 @@
               <div
                 class="level-text"
                 :class="{
-                  'level-text-1': item.level == 101 || item.level==0,
+                  'level-text-0': item.level==0,
+                  'level-text-1': item.level == 101,
                   'level-text-2': item.level == 102,
                   'level-text-3': item.level == 103,
                   'level-text-4': item.level == 104,
                   'level-text-5': item.level == 201,
+                  'level-text-6': item.level != 0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
                 }"
                 >{{
-                  item.level == 101
-                    ? '正常'
-                    :item.level==0 
+                  item.level == 0
                     ? '正常'
+                    :item.level==101 
+                    ? '较低风险'
                     : item.level == 102
                     ? '低风险'
                     : item.level == 103
@@ -95,7 +97,7 @@
                     ? '高风险'
                     : item.level == 201
                     ? '报警'
-                    : ''
+                    : '未连接设备'
                 }}</div
               >
             </div>
@@ -172,7 +174,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">火灾监测</span>
-              <span class="value value1">{{ centerData.fire }}</span>
+              <span :class="centerData.fire=='正常' ? 'value' : 'value1'">{{ centerData.fire }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -181,7 +183,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">设备监测</span>
-              <span class="value value">{{ centerData.sb }}</span>
+              <span :class="centerData.sb=='正常' ? 'value' : 'value1'">{{ centerData.sb }}</span>
             </div>
           </div>
           <div class="item item3">
@@ -190,7 +192,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">瓦斯监测</span>
-              <span class="value">{{ centerData.ws }}</span>
+              <span :class="centerData.ws=='正常' ? 'value' : 'value1'">{{ centerData.ws }}</span>
               <div class="">
                 <span class="title">矿井瓦斯鉴定等级监测</span>
                 <span class="value">低瓦斯</span>
@@ -203,7 +205,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">粉尘监测</span>
-              <span class="value">{{ centerData.fc }}</span>
+              <span :class="centerData.fc=='正常' ? 'value' : 'value1'">{{ centerData.fc }}</span>
             </div>
           </div>
           <div class="item item5">
@@ -212,7 +214,7 @@
             </div>
             <div class="item-monitor-box">
               <span class="title">通风监测</span>
-              <span class="value">{{ centerData.tf }}</span>
+              <span :class="centerData.tf=='正常' ?  'value' : 'value1'">{{ centerData.tf }}</span>
             </div>
           </div>
         </div>
@@ -220,18 +222,34 @@
       <div class="fire-monitor">
         <div class="monitor-title top" @click="showModal('fire')">火灾监测</div>
         <div class="container">
-        
+
           <div class="item item1">
             <div class="icon"></div>
             <div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
-              <div class="value" :style="{ color: item.value == '报警' ? '#ff0000' : '' }">{{ item.value }} </div>
+              <div :class="{
+                'value1': item.level==0 ,
+                'value2': item.level==101 ,
+                'value3': item.level==102 ,
+                'value4': item.level==103,
+                'value5': item.level==104,
+                'value6': item.level==201,
+                'value': item.level!=0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
+              }">{{ item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
           <div class="item">
             <div class="icon"></div>
             <div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
-              <div class="value"> {{ item.value }} </div>
+              <div :class="{
+                'value1': item.level==0 ,
+                'value2': item.level==101 ,
+                'value3': item.level==102 ,
+                'value4': item.level==103,
+                'value5': item.level==104,
+                'value6': item.level==201,
+                'value': item.level!=0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
+              }"> {{ item.value }} </div>
               <div class="title">{{ item.title }}</div>
             </div>
           </div>
@@ -245,19 +263,18 @@
           <div class="monitor-title" @click="showModal('dust')">粉尘监测</div>
         </template>
         <template #container>
-          <!-- <div ref="alarmCounts" style="height: 160px" id="alarmCounts"></div> -->
-          <div class="dust-monitor">
+
+          <!-- <div class="dust-monitor">
             <div v-for="(item, index) in dustMonitor" :key="index" class="item-box">
               <div class="title">{{ item.title }}</div>
               <div class="value">0个</div>
             </div>
-          </div>
+          </div> -->
 
-          <!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
           <BarSingle
             :xAxisData="xAxisData"
             :dataSource="dustData.levels"
-            height="225px"
+            height="332px"
             :chartsColumns="chartsColumns"
             :option="option"
             :color="colors"
@@ -274,25 +291,25 @@
           <div class="gas-box">
             <div class="gas-item">
               <div class="top">
-                <div class="value">10</div>
+                <div class="value">{{ gasData.sums }}</div>
                 <div class="title">安全监测系统监测点</div>
               </div>
               <div class="detail-box">
                 <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                  <div class="">{{ item.title }}</div>
-                  <div class="value">10</div>
+                  <div class="">{{ item.label }}</div>
+                  <div class="value">{{ item.value }}</div>
                 </div>
               </div>
             </div>
             <div class="gas-item">
               <div class="top">
-                <div class="value">10</div>
+                <div class="value">{{ gasData.sums1 }}</div>
                 <div class="title">瓦斯巡检系统监测点</div>
               </div>
               <div class="detail-box">
                 <div class="detail-item" v-for="(item, index) in gasMonitor" :key="index">
-                  <div class="">{{ item.title }}</div>
-                  <div class="value">10</div>
+                  <div class="">{{ item.label }}</div>
+                  <div class="value">{{ item.value1 }}</div>
                 </div>
               </div>
             </div>
@@ -319,8 +336,6 @@
     option,
     colors,
     fontColor,
-    dustMonitor,
-    gasMonitor,
     fireMonitor,
     fireMonitor1,
   } from './alarm.data';
@@ -356,6 +371,12 @@
     fc: '',
     levels: 0,
   });
+//瓦斯
+  let gasMonitor = reactive<any[]>([]);
+  let gasData={
+    sums:0,
+    sums1:0,
+  }
   const [register, { openModal }] = useModal();
 
   function showModal(data) {
@@ -428,19 +449,39 @@
         iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel ;
       }
     });
-    console.log(iconsMonitor,'设备监测数据---')
     fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;
+    fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel;
     fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval.value;
+    fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel;
     fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval.value;
+    fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel;
     fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val.value;
+    fireMonitor[3].level = res.info.sysInfo.fireS.summaryInfo.external.ch2val.maxlevel;
     fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val.value;
+    fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel;
     fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val.value;
+    fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel;
+    console.log(fireMonitor,'fireMonitor---------------')
+
     fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
+    fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel;
     fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
+    fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel;
     fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
+    fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel;
     fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
+    fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel;
     fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
-    console.log(fireMonitor1,'fireMonitor1-------')
+    fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel;
+      console.log(fireMonitor1,'fireMonitor1------')
+    gasMonitor.length=0
+    gasData.sums=0
+    gasData.sums1=0
+    res.info.sysInfo.gasS.devices.forEach(el=>{
+      gasData.sums+=el.gasNumber
+      gasData.sums1+=el.pumpNumber
+      gasMonitor.push({label:el.systemname,value:el.gasNumber,value1:el.pumpNumber})
+    })
   }
 
   onMounted(async () => {
@@ -623,6 +664,10 @@
             font-family: 'douyuFont';
             font-size: 12px;
           }
+          .level-text-0{
+            color: rgb(145, 230, 9);
+            text-shadow: 2px 2px 4px #001c22;
+          }
           .level-text-1{
             color: rgb(0, 242, 255);
             text-shadow: 2px 2px 4px #001c22;
@@ -644,6 +689,10 @@
             color: #ff0000;
             text-shadow: 2px 2px 4px #200000;
           }
+          .level-text-6{
+            color: #bbb;
+            text-shadow: 2px 2px 4px #001c22;
+          }
           img{
             width: 225px;
             height: 79px;
@@ -769,6 +818,43 @@
                 color: #2bdcff;
                 margin-bottom: 5px;
               }
+              .value1{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(145, 230, 9);
+              }
+              .value2{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: rgb(0, 242, 255);
+              }
+              
+              .value3{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+               color: #ffff35;
+              }
+              .value4{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ffbe69;
+              }
+              .value5{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff6f00;
+              }
+              .value6{
+                font-size: 16px;
+                font-family: 'douyuFont';
+                margin-bottom: 5px;
+                color: #ff0000;
+              }
               .title{
                 font-size: 13px;
               }
@@ -1044,6 +1130,7 @@
                 font-size: 16px;
                 font-weight: 800;
                 margin-top: 6px;
+                margin-left: 10px;
                 color: #ff0000;
                 animation: color-blink 1s infinite;
               }