提交新版本

src/views/vent/home/colliery/index.vue

@@ -3,9 +3,9 @@
     <div class="home-container">
       <div class="header">
         <div class="head-time">
+          <span>{{ nowTimeYear }}</span>
+          <span>{{ nowTimeWeek }}</span>
           <span>{{ nowTime }}</span>
-          <span>{{ weeks }}</span>
-          <span>{{ timeDate }}</span>
         </div>
         <div class="main-title">通防智能管控系统</div>
       </div>
@@ -111,28 +111,15 @@ let navList = reactive([
   { name: '外部漏风率', isShow: false, val: 0 },
   { name: '有效风量率', isShow: false, val: 0 },
 ]);
+let nowTimeYear=ref('')
+let nowTimeWeek=ref('')
+let nowTime=ref('')
 
 const globSetting = useGlobSetting();
 const pageType = ref('home');
 let router = useRouter();
 
 function goDetail(deviceType) {
-
-  // Modal.confirm({
-  //   content: () => '暂未连接井下设备！',
-  //   icon: () => createVNode(ExclamationCircleOutlined),
-  //   title: '消息提示',
-  //   onOk() {
-  //     return new Promise((resolve, reject) => {
-  //       setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
-  //     }).catch(() => console.log('Oops errors!'));
-  //   },
-  //   cancelText: () => '取消',
-  //   onCancel() {
-  //     Modal.destroyAll();
-  //   },
-  // });
-
   //lxh
   // pageType.value = deviceType;
   if (deviceType == 'fanMain') {
@@ -199,7 +186,7 @@ function getList() {
           drag_1: 380,
           drag_2: 167,
           drag_3: 333,
-          drag_total: Math.abs(Number(res.fanmain[0].readData.Fan1FanPre || res.fanmain[0].readData.Fan2FanPre || res.fanmain[0].readData.DataPa ||  680 + (Math.random() * 2 - 1 * 5))),
+          drag_total: Math.abs(Number(res.fanmain[0].readData.Fan1FanPre || res.fanmain[0].readData.Fan2FanPre || res.fanmain[0].readData.DataPa || 680 + (Math.random() * 2 - 1 * 5))),
           m3_total: Number(res.fanmain[0].readData.Fan1m3 || res.fanmain[0].readData.Fan2m3 || res.fanmain[0].readData.m3 || 8138 + (Math.random() * 2 - 1 * 20))
         }
       })
@@ -226,39 +213,41 @@ function getList() {
   });
 }
 
-
-let weeks = computed(() => {
-  let week = moment(new Date().getTime()).day();
-  switch (week) {
+//获取当前时间年月日时分秒
+function getNowTime(){
+  setInterval(()=>{
+    nowTimeYear.value= moment().format('YYYY/MM/DD');
+    let week= moment(new Date().getTime()).day();
+    switch (week) {
     case 0:
-      return '星期日';
+    nowTimeWeek.value= '星期日';
       break;
     case 1:
-      return '星期一';
+    nowTimeWeek.value= '星期一';
       break;
     case 2:
-      return '星期二';
+    nowTimeWeek.value= '星期二';
       break;
     case 3:
-      return '星期三';
+    nowTimeWeek.value= '星期三';
       break;
     case 4:
-      return '星期四';
+    nowTimeWeek.value= '星期四';
       break;
     case 5:
-      return '星期五';
+    nowTimeWeek.value= '星期五';
       break;
     case 6:
-      return '星期六';
+    nowTimeWeek.value= '星期六';
       break;
   }
-});
-let nowTime = computed(() => {
-  return moment().format('YYYY/MM/DD');
-});
-let timeDate = computed(() => {
-  return moment().format('HH:MM:SS');
-});
+    let date = new Date()
+    let hours = date.getHours()
+    let minutes = date.getMinutes()
+    let seconds = date.getSeconds()
+    nowTime.value=`${hours}:${minutes}:${seconds}`
+  },1000)
+}
 
 function goModalDetail() {
   router.push('/micro-vent-3dModal/modelchannel/model3D/home?deviceType=model3D')
@@ -272,9 +261,8 @@ onMounted(() => {
   if (currentRouteObj && currentRouteObj['query'] && currentRouteObj['query']['deviceType']) {
     pageType.value = 'model3D'
   }
-
   mountMicroApp('/micro-vent-3dModal', '/modelchannel/model3D/home')
-
+  getNowTime()
   getList();
   timer = Number(
     setInterval(() => {

src/views/vent/home/common/danelBd.vue

@@ -1,77 +1,180 @@
 <template>
-  <div class="danelBd">
-  <div v-if="moduleName" class="dane-title" :style="{'margin-bottom':contentStyle.contentH=='0px' ? '0px' : '5px'}">
-    <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
-    <span>{{moduleName}}</span>
-  </div>
-  <div v-if="contentStyle.contentH!='0px'" class="dane-content" :style="{height:contentStyle.contentH,}">
-    <div class="t-line"></div>
-    <slot></slot>
-  </div>
-  </div>
+    <div class="danelBd">
+        <div v-if="moduleName" class="dane-title"
+            :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
+            <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
+                <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
+                <span>{{ moduleName }}</span>
+            </div>
+
+            <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
+                <!-- 下拉框 -->
+                <div class="common-navR-select" v-if="commonTitle=='selected'">
+                    <a-select style="width: 140px" v-model="selectVal" size="small" allowClear class="code-mode-select"
+                        placeholder="请选择">
+                        <a-select-option v-for="device in selectList" :key="device.value" :value="device.value">{{
+                            device.label
+                        }}
+                        </a-select-option>
+                    </a-select>
+                </div>
+                <!-- 日期组件 -->
+                <div class="common-navR-date" v-if="commonTitle=='datePikers'">
+                    <a-range-picker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }"
+                        format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
+                </div>
+                <!-- 开关组件 -->
+                <div class="common-navR-switch" v-if="commonTitle=='switchs'">
+                    <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
+                    <a-switch v-model:checked="checked" />
+                    <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
+                </div>
+
+            </div>
+        </div>
+        <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH, }">
+            <div class="t-line"></div>
+            <slot></slot>
+        </div>
+    </div>
 </template>
 
-<script>
-export default {
-name:'danelBd',
-props:{
+<script setup lang="ts">
+import { ref, reactive, defineProps } from 'vue'
+
+let props = defineProps({
     //标题
-    moduleName:{
-        type:String,
-        default:''
+    moduleName: {
+        type: String,
+        default: ''
     },
     //样式
-    contentStyle:{
-        type:Object,
-        default:()=>{
+    contentStyle: {
+        type: Object,
+        default: () => {
             return {
-                contentH:'0px',
+                contentH: '0px',
             }
         }
     },
-   
-},
-data(){
-    return {}
-},
-mounted(){},
-methods:{},
+
+    commonTitle: {
+        type: String,
+        default: ''
+    }
+})
+
+let selectVal = ref('')
+let selectList = reactive([
+    { label: '全部', value: '全部' }
+])
+
+let checked=ref(false)
+
+//切换时间选项
+function onChange(value, dateString) {
+    console.log('Selected Time: ', value);
+    console.log('Formatted Selected Time: ', dateString);
+}
+function onOk(val) {
+    console.log('onOk: ', val);
 }
+
+
+
+
+
 </script>
 
 <style scoped lang='less'>
-.danelBd{
+.danelBd {
     width: 100%;
     height: 100%;
     position: relative;
-    .dane-title{
+
+    .dane-title {
         display: flex;
+        justify-content: space-between;
         align-items: center;
         width: 100%;
         height: 43px;
         padding: 0px 10px;
-        // margin-bottom: 5px;
         box-sizing: border-box;
         background: url('../../../../assets/images/fire/firehome/title-1.png') no-repeat center;
         background-size: 100% 100%;
-        img{
-            width: 18px;
-            height: 18px;
+
+        .common-navL {
+            width: 70%;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 18px;
+                height: 18px;
+            }
+
+            span {
+                font-size: 18px;
+                color: #a1dff8;
+                margin-left: 10px;
+            }
+        }
+
+        .common-navL1 {
+            width: 50%;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 18px;
+                height: 18px;
+            }
+
+            span {
+                font-size: 18px;
+                color: #a1dff8;
+                margin-left: 10px;
+            }
         }
-        span{
-            font-size: 20px;
-            color: #a1dff8;
-            margin-left: 10px;
+
+        .common-navR {
+            width: 30%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
         }
+
+        .common-navR1 {
+            width: 50%;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+        }
+        .common-navR-switch{
+            width: 70%;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            .status-text{
+                color: #1fb3f7;
+            }
+            .status-text1{
+                color: #a1dff8;
+            }
+        }
+
+
     }
-    .dane-content{
+
+    .dane-content {
         position: relative;
         width: 100%;
-        padding: 20px;
+        padding: 15px;
         box-sizing: border-box;
         background: url('../../../../assets/images/fire/firehome/title-3.png') no-repeat center;
         background-size: 100% 100%;
-        .t-line{
+
+        .t-line {
             position: absolute;
             left: 0;
             top: 0;
@@ -84,4 +187,50 @@ methods:{},
     }
 
 }
+
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    background-color: rgba(255, 255, 255, .1);
+    border: none;
+}
+
+::v-deep .zxm-select-selection-item {
+    color: #a1dff8 !important;
+}
+
+::v-deep .zxm-select-arrow {
+    color: #a1dff8 !important;
+}
+
+::v-deep .zxm-select-selection-placeholder {
+    color: #a1dff8 !important;
+}
+
+::v-deep .zxm-picker {
+    background-color: rgba(255, 255, 255, .1) !important;
+    border: 1px solid #a1dff8 !important;
+
+}
+
+::v-deep .zxm-picker-input>input {
+    text-align: center !important;
+    color: #a1dff8 !important;
+}
+::v-deep .zxm-picker-separator{
+    color: #a1dff8 !important;
+}
+::v-deep .zxm-picker-range .zxm-picker-active-bar{
+    display: none !important;
+}
+::v-deep .zxm-picker-suffix{
+    color: #a1dff8 !important;
+}
+::v-deep .zxm-switch{
+    min-width: 55px !important;
+}
+::v-deep .zxm-switch-checked {
+    background-color: rgba(8, 59, 90) !important;
+}
+::v-deep .zxm-switch-handle::before{
+    background-color: rgba(33, 179, 247) !important;
+}
 </style>

src/views/vent/home/dustHome/components/multipleDust.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="multipleDust">
+        <div class="multiple-box" ref="multiple"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, nextTick } from 'vue'
+import * as echarts from 'echarts';
+
+//获取don元素节点
+let multiple = ref()
+
+
+function getOption() {
+    nextTick(() => {
+        let myChart = echarts.init(multiple.value);
+        let option = {
+            grid: {
+                top: '8%',
+                left: '5%',
+                right: '5%',
+                bottom: '8%',
+                // containLabel: true
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    lineStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0,
+                                color: 'rgba(0, 255, 233,0)'
+                            }, {
+                                offset: 0.5,
+                                color: 'rgba(255, 255, 255,1)',
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0, 255, 233,0)'
+                            }],
+                            global: false
+                        }
+                    },
+                },
+            },
+
+            xAxis: [
+                {
+                    type: 'category',
+                    boundaryGap: false,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#244a94',
+                            type: 'dashed'
+                        },
+                    },
+                    // splitArea: {
+                    //     show: true,
+                    //     color: 'red',
+                    //     lineStyle: {
+                    //         color: 'red'
+                    //     },
+                    // },
+                    axisLabel: {
+                        fontSize: 14,
+                        // margin: 10,
+                        textStyle: {
+                            color: '#b3b8cc',
+                        },
+                    },
+                    splitLine: {
+                        show: false,
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+
+                    data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06'],
+
+                }
+            ],
+
+            yAxis: [{
+                type: 'value',
+                min: 0,
+                // max: 140,
+                // splitNumber: 4,
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#244a94',
+                            type: 'dashed'
+                    }
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    show: false,
+                    margin: 20,
+                    textStyle: {
+                        color: '#d1e6eb',
+
+                    },
+                },
+                axisTick: {
+                    show: false,
+                },
+            }],
+            series: [
+                {
+                    name: '粉尘浓度',
+                    type: 'line',
+                    smooth: true, //是否平滑
+                    showAllSymbol: true,
+                    // symbol: 'image://./static/images/guang-circle.png',
+                    symbol: 'circle',
+                    symbolSize: 8,
+                    lineStyle: {
+                        normal: {
+                            color: "#1fb3f7",
+                            shadowColor: 'rgba(0, 0, 0, .3)',
+                            shadowBlur: 0,
+                            shadowOffsetY: 5,
+                            shadowOffsetX: 5,
+                        },
+                    },
+                    label: {
+                        show: true,
+                        position: 'top',
+                        textStyle: {
+                            color: '#6c50f3',
+                        }
+                    },
+                    itemStyle: {
+                        color: "#6c50f3",
+                        borderColor: "#fff",
+                        borderWidth: 3,
+                        shadowColor: 'rgba(0, 0, 0, .3)',
+                        shadowBlur: 0,
+                        shadowOffsetY: 2,
+                        shadowOffsetX: 2,
+                    },
+                    tooltip: {
+                        show: false
+                    },
+                    areaStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                offset: 0,
+                                color: 'rgba(108,80,243,0.3)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(108,80,243,0)'
+                            }
+                            ], false),
+                            shadowColor: 'rgba(108,80,243, 0.9)',
+                            shadowBlur: 20
+                        }
+                    },
+                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
+                },
+            ]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+
+onMounted(() => {
+    getOption()
+})
+
+</script>
+
+<style lang="less" scoped>
+.multipleDust {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .multiple-box {
+        width: 100%;
+        height: 100%;
+
+
+    }
+}
+</style>

src/views/vent/home/dustHome/index.vue

@@ -1,15 +1,215 @@
 <template>
     <div class="dustHome">
-
+        <!-- 模型区域 -->
+        <div class="moduleArea"></div>
+        <div class="main-container">
+            <div class="left-area">
+                <!-- 左上区域 -->
+                <div class="left-t">
+                    <div class="tcontent-area">
+                        <div class="tcontent-l">
+                            <div>全矿井</div>
+                            <div>监测区域</div>
+                        </div>
+                        <div class="tcontent-c">
+                            <div style="font-size: 24px; color: #1fb3f7;">低风险</div>
+                        </div>
+                        <div class="tcontent-r">粉尘灾害</div>
+                    </div>
+                </div>
+                <!-- 左中区域 -->
+                <div class="left-c">
+                    <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '606px' }">
+                        <workJc :heightT="'26%'" :heightB="'74%'"></workJc>
+                    </DanelBd>
+                </div>
+                <!-- 左底部区域 -->
+                <div class="left-f">
+                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs"> </DanelBd>
+                </div>
+            </div>
+            <div class="center-area">
+                <div class="center-b">
+                    <DanelBd :moduleName="'81202综放工作面粉尘浓度'" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
+                        <multipleDust></multipleDust>
+                    </DanelBd>
+                </div>
+            </div>
+            <div class="right-area">
+                <!-- 右上区域 -->
+                <div class="right-t">
+                    <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
+                      
+                    </DanelBd>
+                </div>
+                <!-- 右中区域 -->
+                <div class="right-c">
+                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
+                     
+                    </DanelBd>
+                </div>
+                <!-- 右下区域 -->
+                <div class="right-b">
+                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
+                      
+                    </DanelBd>
+                </div>
+                <!-- 右底部区域 -->
+                <div class="right-f">
+                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }">
+                      
+                    </DanelBd>
+                </div>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import {ref,reactive,onMounted} from 'vue'
+import DanelBd from '../common/danelBd.vue'
+import workJc from '../fireHome/components/workJc.vue'
+import multipleDust from './components/multipleDust.vue'
 
 </script>
 
 <style lang="less" scoped>
-.dustHome{
-
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
 }
-</style>
+
+.dustHome {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .moduleArea {
+        width: 100%;
+        height: calc(100% - 15px);
+        margin-bottom: 15px;
+    }
+
+    .main-container {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: calc(100% - 80px);
+        margin: 15px 0px;
+        display: flex;
+        justify-content: space-between;
+
+        .left-area {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            width: 30%;
+            height: 100%;
+            margin-right: 15px;
+
+            .left-t {
+                position: relative;
+                width: 100%;
+                height: 121px;
+                background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
+                background-size: 100% 100%;
+
+                .tcontent-area {
+                    width: 100%;
+                    height: 90px;
+                    padding: 0px 20px;
+                    box-sizing: border-box;
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translate(0, -50%);
+                    display: flex;
+                    justify-content: space-around;
+                    align-items: center;
+
+                    .tcontent-l {
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        justify-content: center;
+                        align-items: center;
+                        color: #9da5aa;
+                        font-size: 16px;
+                        letter-spacing: 3px;
+                    }
+
+                    .tcontent-c {
+                        display: flex;
+                        flex-direction: column;
+                        flex: 3;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+                    }
+
+                    .tcontent-r {
+                        height: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        flex: 1;
+                        justify-content: center;
+                        align-items: center;
+                        color: #9da5aa;
+                        font-size: 16px;
+                        letter-spacing: 3px;
+                    }
+                }
+            }
+
+            .left-c {
+                width: 100%;
+            }
+
+            .left-f {
+                width: 100%;
+            }
+        }
+
+        .center-area {
+            width: calc(40% - 40px);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: center;
+
+            .center-b {
+                width: 100%;
+            }
+        }
+
+        .right-area {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            width: 30%;
+            height: 100%;
+            margin-left: 15px;
+
+            .right-t {
+                width: 100%;
+            }
+
+            .right-c {
+                width: 100%;
+            }
+
+            .right-b {
+                width: 100%;
+            }
+
+            .right-f {
+                width: 100%;
+            }
+        }
+    }
+}</style>

src/views/vent/home/fireHome/components/emptyJc.vue

@@ -0,0 +1,259 @@
+<template>
+    <div class="emptyJc">
+        <div class="empty-box" v-for="(item, index) in emptyList" :key="index">
+            <div class="empty-label">{{ item.label }}</div>
+            <div class="empty-val">{{ item.val }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+let emptyList = reactive([
+    { label: '一氧化碳', val: 100 },
+    { label: '风速', val: 1 },
+    { label: '二氧化碳', val: 30 },
+    { label: '温度', val: 91 },
+    { label: '氧气', val: 37 },
+    { label: '环境瓦斯', val: 236 },
+    { label: '馈电器', val: 8 },
+
+])
+
+
+</script>
+
+<style lang="less" scoped>
+.emptyJc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    .empty-box {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: url('../../../../../assets/images/fire/firehome/empty-qp.png') no-repeat center;
+        background-size: 100% 100%;
+       
+        &:nth-child(1) {
+            width: 120px;
+            height: 120px;
+            animation: fdOne 20s linear infinite;
+            @keyframes fdOne {
+                0%{
+                    left: 10%;
+                    top: 0%;
+                }
+                20%{
+                    left: 30%;
+                    top: 10%;
+                }
+                60%{
+                    left: 50%;
+                    top: 20%;
+                }
+                80%{
+                    left: 70%;
+                    top: 30%;
+                }
+                100%{
+                    left: 80%;
+                    top: 15%;
+                }
+                
+            }
+        }
+        &:nth-child(2) {
+            width: 70px;
+            height: 70px;
+            animation: fdTwo 10s linear infinite;
+
+            @keyframes fdTwo {
+                0%{
+                    left: 30%;
+                    top: 0%;
+                }
+                20%{
+                    left: 50%;
+                    top: 20%;
+                }
+                60%{
+                    left: 80%;
+                    top: 60%;
+                }
+                80%{
+                    left: 40%;
+                    top: 40%;
+                }
+                100%{
+                    left: 20%;
+                    top: 10%;
+                }
+                
+            }
+        }
+        &:nth-child(3) {
+            width: 90px;
+            height: 90px;
+            animation: fdThree 13s linear infinite;
+
+            @keyframes fdThree {
+                0%{
+                    left: 45%;
+                    top: 50%;
+                }
+                20%{
+                    left: 20%;
+                    top: 35%;
+                }
+                60%{
+                    left: 50%;
+                    top: 15%;
+                }
+                80%{
+                    left: 70%;
+                    top: 40%;
+                }
+                100%{
+                    left: 90%;
+                    top: 55%;
+                }
+                
+            }
+        }
+
+        &:nth-child(4) {
+            width: 100px;
+            height: 100px;
+            animation: fdFour 16s linear infinite;
+
+            @keyframes fdFour {
+                0%{
+                    left: 50%;
+                    top: 60%;
+                }
+                20%{
+                    left: 35%;
+                    top: 50%;
+                }
+                60%{
+                    left: 20%;
+                    top: 40%;
+                }
+                80%{
+                    left: 0%;
+                    top: 10%;
+                }
+                100%{
+                    left: 50%;
+                    top: 35%;
+                }
+                
+            }
+        }
+
+        &:nth-child(5) {
+            width: 70px;
+            height: 70px;
+            animation: fdFive 10s linear infinite;
+
+            @keyframes fdFive {
+                0%{
+                    left: 70%;
+                    top: 50%;
+                }
+                20%{
+                    left: 85%;
+                    top: 35%;
+                }
+                60%{
+                    left: 65%;
+                    top: 25%;
+                }
+                80%{
+                    left: 20%;
+                    top: 40%;
+                }
+                100%{
+                    left: 50%;
+                    top: 65%;
+                }
+                
+            }
+        }
+
+        &:nth-child(6) {
+            width: 120px;
+            height: 120px;
+            animation: fdSix 20s linear infinite;
+
+            @keyframes fdSix {
+                0%{
+                    left: 15%;
+                    top: 60%;
+                }
+                20%{
+                    left: 30%;
+                    top: 45%;
+                }
+                60%{
+                    left: 45%;
+                    top: 30%;
+                }
+                80%{
+                    left: 60%;
+                    top: 15%;
+                }
+                100%{
+                    left: 40%;
+                    top: 30%;
+                }
+                
+            }
+        }
+
+        &:nth-child(7) {
+            width: 90px;
+            height: 90px;
+            animation: fdSev 13s linear infinite;
+
+            @keyframes fdSev {
+                0%{
+                    left: 80%;
+                    top: 10%;
+                }
+                20%{
+                    left: 65%;
+                    top: 30%;
+                }
+                60%{
+                    left: 50%;
+                    top: 50%;
+                }
+                80%{
+                    left: 35%;
+                    top: 70%;
+                }
+                100%{
+                    left: 20%;
+                    top: 50%;
+                }
+                
+            }
+        }
+
+        .empty-label{
+            color: #9da5aa;
+        }
+        .empty-val{
+            font-size: 18px;
+            color: #fff;
+        }
+    }
+
+}
+</style>

src/views/vent/home/fireHome/components/fiberBunbleJc.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="fiberBunbleJc">
+        <div class="fiberBunbleJc-box" v-for="(item, index) in fiberBunbleJcList" :key="index">
+            <div class="jc-title"></div>
+            <div class="jc-item">
+                <span class="item-label">{{ `${item.label} : ` }}</span>
+                <span class="item-val">{{ `${item.val}%` }}</span>
+            </div>
+            <div class="jc-item1">
+                <span class="item-label">{{ `${item.label1} : ` }}</span>
+                <span class="item-val">{{ item.val1 }}</span>
+            </div>
+            <div class="jc-item2">
+                <span class="item-label">{{ `${item.label2} : ` }}</span>
+                <span class="item-val">{{ item.val2 }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+let fiberBunbleJcList = reactive([
+    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
+    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
+    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
+    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
+])
+</script>
+
+<style lang="less" scoped>
+.fiberBunbleJc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    .fiberBunbleJc-box {
+        position: relative;
+        width: 100%;
+        height: 58px;
+        background: url('../../../../../assets/images/fire/firehome/fiber-jc.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .jc-title {
+            position: absolute;
+        }
+        &:nth-child(1) .jc-title{
+            left: 10%;
+            top: 8%;
+            width: 36px;
+            height: 46px;
+            background: url('../../../../../assets/images/fire/firehome/O₂.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+        &:nth-child(2) .jc-title{
+            left: 9%;
+            top: 9%;
+            width: 56px;
+            height: 46px;
+            background: url('../../../../../assets/images/fire/firehome/CH₄.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+        &:nth-child(3) .jc-title{
+            left: 9%;
+            top: 24%;
+            width: 42px;
+            height: 34px;
+            background: url('../../../../../assets/images/fire/firehome/CO.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+        &:nth-child(4) .jc-title{
+            left: 9%;
+            top: 6%;
+            width: 56px;
+            height: 46px;
+            background: url('../../../../../assets/images/fire/firehome/CO₂.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        .jc-item {
+            position: absolute;
+            left: 30%;
+            top: 10%;
+
+        }
+
+        .jc-item1 {
+            position: absolute;
+            left: 60%;
+            top: 10%;
+
+        }
+
+        .jc-item2 {
+            position: absolute;
+            left: 30%;
+            top: 50%;
+
+        }
+
+        .item-label {
+            color: #9da5aa;
+        }
+
+        .item-val {
+            color: #fff;
+        }
+    }
+}</style>

src/views/vent/home/fireHome/components/outFireJc.vue

@@ -0,0 +1,100 @@
+<template>
+    <div class="outFireJc">
+        <div class="outFire-box" v-for="(item, index) in outFireList" :key="index">
+            <div class="outFire-icon"></div>
+            <div class="outFire-title">{{ item.title }}</div>
+            <div class="outFire-val">
+                <span>{{ item.val }}</span>
+                <span>{{ item.dw }}</span>
+            </div>
+            <div class="outFire-label">{{ item.label }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+let outFireList = reactive([
+    { title: '光钎预警', val: 38, dw: '℃', label: "最高温度" },
+    { title: '一氧化碳预警', val: 24, dw: 'ppm', label: "最高浓度" },
+    { title: '烟雾预警', val: '无烟', dw: '', label: "状态" },
+])
+</script>
+
+<style lang="less" scoped>
+.outFireJc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .outFire-box {
+        position: relative;
+        width: 157px;
+        height: 160px;
+        background: url('../../../../../assets/images/fire/firehome/miehuo.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .outFire-title {
+            width: 100%;
+            position: absolute;
+            top: 14px;
+            text-align: center;
+            color: #fff;
+        }
+
+        .outFire-val {
+            width: 100%;
+            position: absolute;
+            top: 70px;
+            text-align: center;
+
+            span {
+                font-size: 24px;
+                color: #1fb3f7;
+                font-weight: bold;
+            }
+
+        }
+        .outFire-label{
+            width: 100%;
+            position: absolute;
+            top: 120px;
+            text-align: center;
+            color: #9da5aa;
+        }
+
+        &:nth-child(1) .outFire-icon {
+            position: absolute;
+            left: 54px;
+            top: 64px;
+            width: 53px;
+            height: 77px;
+            background: url('../../../../../assets/images/fire/firehome/temp.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(2) .outFire-icon {
+            position: absolute;
+            left: 34px;
+            top: 72px;
+            width: 89px;
+            height: 67px;
+            background: url('../../../../../assets/images/fire/firehome/co1.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+
+        &:nth-child(3) .outFire-icon {
+            position: absolute;
+            left: 42px;
+            top: 71px;
+            width: 74px;
+            height: 74px;
+            background: url('../../../../../assets/images/fire/firehome/smoke.png') no-repeat center;
+            background-size: 100% 100%;
+        }
+    }
+}</style>

src/views/vent/home/fireHome/components/safetyJc.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="safetyJc">
+        <div class="safety-head">
+            <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{ item.label }}</div>
+        </div>
+        <div class="safety-content">
+            <div class="scroll-contents">
+                <div class="safety-content-box" v-for="(ite, ind) in safetyList" :key="ind">
+                    <span class="address-text">{{ ite.address }}</span>
+                    <span class="temp-text">{{ ite.temp }}</span>
+                    <span class="grade-text">{{ ite.grade }}</span>
+                    <span class="time-text">{{ ite.time }}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, } from 'vue'
+
+let safetyHeadList = reactive([
+    { label: '测点位置' },
+    { label: '温度(°C)' },
+    { label: '预警级别' },
+    { label: '时间' },
+])
+
+let safetyList = reactive([
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
+
+])
+</script>
+
+<style lang="less" scoped>
+.safetyJc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .safety-head {
+        height: 30px;
+        padding: 0px 7px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .safety-head-item {
+            color: #1fb3f7;
+            font-weight: bold;
+
+            &:nth-child(1) {
+                display: flex;
+                flex: 2;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &:nth-child(2) {
+                display: flex;
+                flex: 1;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &:nth-child(3) {
+                display: flex;
+                flex: 1;
+                justify-content: center;
+                align-items: center;
+            }
+
+            &:nth-child(4) {
+                display: flex;
+                flex: 2;
+                justify-content: center;
+                align-items: center;
+            }
+
+        }
+    }
+
+    .safety-content {
+        position: relative;
+        height: calc(100% - 30px);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        overflow: hidden;
+
+        .scroll-contents {
+            width: 100%;
+            position: absolute;
+            animation: scrollCon 6s linear infinite;
+            @keyframes scrollCon {
+                0% {
+                    left: 0;
+                    top: 0%;
+                }
+
+                50% {
+                    left: 0;
+                    top: -50%;
+                }
+
+                100% {
+                    left: 0;
+                    top: -100%;
+                }
+            }
+
+            .safety-content-box {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                height: 24px;
+                margin-bottom: 10px;
+                padding: 0px 7px;
+                box-sizing: border-box;
+                background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
+                background-size: 100% 100%;
+
+                span {
+                    color: #fff;
+                }
+
+                .address-text {
+                    display: flex;
+                    flex: 2;
+                    justify-content: center;
+                    align-items: center;
+                    background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .temp-text {
+                    display: flex;
+                    flex: 1;
+                    justify-content: center;
+                    align-items: center;
+                }
+
+                .grade-text {
+                    display: flex;
+                    flex: 1;
+                    justify-content: center;
+                    align-items: center;
+                }
+
+                .time-text {
+                    display: flex;
+                    flex: 2;
+                    justify-content: center;
+                    align-items: center;
+                }
+            }
+        }
+
+
+    }
+}</style>

src/views/vent/home/fireHome/components/substationJc.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="substationJc">
+        <div class="substation-box" ref="substation"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ref,onMounted,nextTick} from 'vue'
+import * as echarts from 'echarts';
+
+//获取dom节点
+let substation=ref()
+
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(substation.value);
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+        },
+      },
+
+      legend: {
+        align: 'left',
+        right: '4%',
+        top: '0%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 14,
+        },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: '实时值',
+          },
+          {
+            name: '监测值',
+          },
+          // {
+          //   name: '工作面需风'
+          // }
+        ],
+      },
+
+      grid: {
+        top: '20%',
+        left: '3%',
+        right: '3%',
+        bottom: '0%',
+        containLabel: true,
+      },
+
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
+            },
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: '#b3b8cc',
+              padding: 0,
+              fontSize: 14,
+            },
+            formatter: function (data) {
+              return data;
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: ['15:30','15:31','15:32','15:33','15:34','15:35',],
+        },
+      ],
+
+      yAxis: [
+        {
+          name: 'm³/min',
+          nameTextStyle: {
+            color: '#b3b8cc',
+            fontSize: 12,
+            padding: 0,
+          },
+          min: 0,
+          splitNumber: 3,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
+            },
+          },
+          axisLine: {
+            show: false,
+            // lineStyle: {
+            //   color: 'rgba(62, 103, 164)',
+            // },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#b3b8cc',
+              padding: 0,
+              fontSize: 14,
+            },
+            formatter: function (value) {
+              if (value === 0) {
+                return value;
+              }
+              return value;
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: '实时值',
+          type: 'line',
+          yAxisIndex: 0,
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: 'orange', // 线条颜色
+            },
+            borderColor: 'rgba(0,0,0,.4)',
+          },
+          itemStyle: {
+            color: 'orange',
+            borderColor: '#646ace',
+            borderWidth: 0,
+          },
+          data: [100,105,115,130,150,180],
+        },
+        {
+          name: '监测值',
+          type: 'line',
+          yAxisIndex: 0,
+          symbolSize: 6,
+
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: '#1891de', // 线条颜色
+            },
+            borderColor: 'rgba(0,0,0,.4)',
+          },
+          itemStyle: {
+            color: '#1891de',
+            borderColor: '#646ace',
+            borderWidth: 0,
+          },
+          data: [200,195,185,170,150,120],
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+onMounted(()=>{
+    getOption()
+})
+
+</script>
+
+<style lang="less" scoped>
+.substationJc {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .substation-box{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/views/vent/home/fireHome/components/systemJc.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="systemJc">
+        <div class="systemJc-box" v-for="(item,index) in systemJcList" :key="index">
+            <div class="system-label">{{ item.label }}</div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ref,reactive} from 'vue'
+let systemJcList=reactive([
+    {label:'智能灌浆系统'},
+    {label:'智能注氮系统'},
+])
+</script>
+
+<style lang="less" scoped>
+.systemJc{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .systemJc-box{
+        position: relative;
+        width: 222px;
+        height: 100%;
+        background: url('../../../../../assets/images/fire/firehome/zu-14578.png') no-repeat center;
+        background-size: 100% 100%;
+        .system-label{
+            position: absolute;
+            left: 50%;
+            top: 8px;
+            transform: translate(-50%,0);
+            color: #fff;
+        }
+    }
+}
+</style>

src/views/vent/home/fireHome/components/workJc.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="workJc">
-        <div class="echart-workJc">
+        <div class="echart-workJc" :style="{height:heightT}">
             <div class="workJc-l">
                 <div class="echart-yh"></div>
                 <div class="echart-line"></div>
@@ -19,24 +19,23 @@
             </div>
 
         </div>
-        <div class="card-workJc">
-            <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
-                <div class="card-l">
-                    <div class="card-l-label"></div>
-                    <div class="card-l-val"></div>
-                </div>
-                <div class="card-r">
-                    <div class="card-r-label"></div>
+        <div class="card-workJc" :style="{height:heightB}">
+            <div class="scroll-card">
+                <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
+                    <div class="card-l-label">{{ ite.title }}</div>
+                    <div class="card-l-val">{{ ite.val }}</div>
+
+                    <div class="card-r-label">{{ ite.label }}</div>
                     <div class="card-r-content">
-                        <div>
-                            <span></span>
-                            <span></span>
-                        </div>
-                        <div>
-                            <span></span>
-                            <span></span>
-                        </div>
+                        <span>{{ `${ite.title1} : ` }}</span>
+                        <span>{{ `${ite.val1}°C` }}</span>
+                    </div>
+                    <div class="card-r-content1">
+                        <span>{{ `${ite.title2} : ` }}</span>
+                        <span>{{ ite.val2 }}</span>
                     </div>
+
+
                 </div>
             </div>
         </div>
@@ -44,8 +43,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick,defineProps } from 'vue'
 import * as echarts from 'echarts';
+
+let props=defineProps({
+    heightT:{
+        type:String,
+        default:'0%',
+    },
+    heightB:{
+        type:String,
+        default:'0%'
+    }
+})
+
 //获取dom节点
 let ring = ref()
 
@@ -84,6 +95,15 @@ let cardList = reactive([
     },
     {
         title: '风险',
+        val: '中',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
+    },
+    {
+        title: '风险',
         val: '低',
         label: '81202综放工作面',
         title1: '温度最大值',
@@ -100,6 +120,24 @@ let cardList = reactive([
         title2: '预测风险区域',
         val2: '散热带，氧化带，窒息带'
     },
+    {
+        title: '风险',
+        val: '中',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
+    },
+    {
+        title: '风险',
+        val: '高',
+        label: '81202综放工作面',
+        title1: '温度最大值',
+        val1: '30',
+        title2: '预测风险区域',
+        val2: '散热带，氧化带，窒息带'
+    },
 ])
 
 function getOption() {
@@ -198,7 +236,7 @@ onMounted(() => {
 
     .echart-workJc {
         width: 100%;
-        height: 45%;
+        // height: 45%;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -263,7 +301,7 @@ onMounted(() => {
                 flex-direction: column;
                 justify-content: space-around;
                 align-items: center;
-                color: #fff;
+                color: #a1b6c2;
 
                 .fx-label {
                     height: 28px;
@@ -299,8 +337,82 @@ onMounted(() => {
     }
 
     .card-workJc {
-        height: 55%;
-        border: 1px solid #ccc;
-        overflow-y: auto;
+        position: relative;
+        // height: 55%;
+        overflow: hidden;
+
+        // overflow-y: auto;
+        .scroll-card {
+            width: 100%;
+            position: absolute;
+
+            animation: scrollCards 12s linear infinite;
+
+            @keyframes scrollCards {
+                0% {
+                    left: 0;
+                    top: 0%;
+                }
+
+                50% {
+                    left: 0;
+                    top: -50%;
+                }
+
+                100% {
+                    left: 0;
+                    top: -100%;
+                }
+            }
+
+            .card-box {
+                position: relative;
+                width: 100%;
+                height: 100px;
+                background: url('../../../../../assets/images/fire/firehome/work-jc.png') no-repeat center;
+                background-size: 100% 100%;
+
+                .card-l-label {
+                    position: absolute;
+                    left: 6%;
+                    top: 8%;
+                    color: #a1b6c2;
+                    letter-spacing: 2px;
+                }
+
+                .card-l-val {
+                    position: absolute;
+                    left: 7%;
+                    top: 50%;
+                    color: #a3d5e5;
+                    font-size: 18px;
+                }
+
+                .card-r-label {
+                    position: absolute;
+                    left: 20%;
+                    top: 4%;
+                    font-size: 16px;
+                    border-bottom: 1px solid #d0d2d3;
+                    color: #d0d2d3;
+                }
+
+                .card-r-content {
+                    position: absolute;
+                    left: 20%;
+                    top: 42%;
+                    color: #9da5aa;
+                }
+
+                .card-r-content1 {
+                    position: absolute;
+                    left: 20%;
+                    top: 68%;
+                    color: #9da5aa;
+                }
+            }
+        }
+
+
     }
 }</style>

src/views/vent/home/fireHome/index.vue

@@ -21,39 +21,51 @@
                 <!-- 左中区域 -->
                 <div class="left-c">
                     <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '372px' }">
-                        <workJc></workJc>
+                        <workJc :heightT="'45%'" :heightB="'55%'"></workJc>
                     </DanelBd>
                 </div>
                 <!-- 左下区域 -->
                 <div class="left-b">
-                    <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                    <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
+                        <emptyJc></emptyJc>
+                    </DanelBd>
                 </div>
                 <!-- 左底部区域 -->
                 <div class="left-f">
-                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }"> </DanelBd>
+                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs"> </DanelBd>
                 </div>
             </div>
             <div class="center-area">
                 <div class="center-b">
-                    <DanelBd :moduleName="'工作面束管监测 | 工作面光钎监测'" :contentStyle="{ contentH: '372px' }"> </DanelBd>
+                    <DanelBd :moduleName="'工作面束管监测 | 工作面光钎监测'" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
+                        <fiberBunbleJc></fiberBunbleJc>
+                    </DanelBd>
                 </div>
             </div>
             <div class="right-area">
                 <!-- 右上区域 -->
                 <div class="right-t">
-                    <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }"> </DanelBd>
+                    <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
+                        <systemJc></systemJc>
+                    </DanelBd>
                 </div>
                 <!-- 右中区域 -->
                 <div class="right-c">
-                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
+                        <outFireJc></outFireJc>
+                    </DanelBd>
                 </div>
                 <!-- 右下区域 -->
                 <div class="right-b">
-                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
+                        <substationJc></substationJc>
+                    </DanelBd>
                 </div>
                 <!-- 右底部区域 -->
                 <div class="right-f">
-                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }">
+                        <safetyJc></safetyJc>
+                    </DanelBd>
                 </div>
             </div>
         </div>
@@ -63,6 +75,12 @@
 <script setup lang="ts">
 import DanelBd from '../common/danelBd.vue'
 import workJc from './components/workJc.vue'
+import emptyJc from './components/emptyJc.vue'
+import fiberBunbleJc from './components/fiberBunbleJc.vue'
+import systemJc from './components/systemJc.vue'
+import outFireJc from './components/outFireJc.vue'
+import substationJc from './components/substationJc.vue'
+import safetyJc from './components/safetyJc.vue'
 </script>
 
 <style lang="less" scoped>

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

@@ -44,10 +44,6 @@ import { BasicModal, useModalInner } from '/@/components/Modal';
 
 const props = defineProps({
   deviceId: { type: String },
-  monitorData: {
-    type: Array,
-    default: () => []
-  }
 })
 
 const emit = defineEmits(['close','register'])
@@ -65,20 +61,42 @@ const tabChange = (activeKeyVal) => {
 // 注册 modal
 const [register, { closeModal }] = useModalInner();
 
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(flag = false) {
+  if (Object.prototype.toString.call(timer) === '[object Null]') {
+    timer = setTimeout(
+      async () => {
+        await getDataSource();
+        if (timer) {
+          timer = null;
+        }
+        getMonitor();
+      },
+      flag ? 0 : 10000
+    );
+  }
+}
+//设备预警监测列表
+async function getDataSource() {
+  const res = await warningList({ isok: 0 });
+  dataSource.value = res.list || [];
+}
+
 async function onSubmit() {
+  clearTimeout(timer);
   emit('close')
   closeModal();
 }
 
-watch(() => props.monitorData, (data:never[]) => {
-  dataSource.value = data
-})
-
 onMounted(async () => {
-
+  getMonitor(true);
 });
 onUnmounted(() => {
-
+  if (timer) {
+    clearTimeout(timer);
+    timer = undefined;
+  }
 });
 </script>
 <style scoped lang="less">

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

@@ -33,10 +33,14 @@ import { typeMenuList, componentName } from './fire.data';
 import { sysTypeWarnList, sysWarn } from './alarm.api';
 
 let props = defineProps({
-  moduleName: String,
+  moduleObj: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
 });
 
-let timer: null | NodeJS.Timeout = null;
 let listData = reactive({
   common: {},
   bundletube: [],
@@ -68,8 +72,30 @@ const emit = defineEmits(['close', 'register']);
 // 注册 modal
 const [register, { closeModal }] = useModalInner();
 
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+function getMonitor(deviceID) {
+  timer = setTimeout(
+    async () => {
+      await getSysWarnList(deviceID, props.moduleObj.moduleName);
+      if (timer) {
+        timer = null;
+      }
+      getMonitor(deviceID);
+    },
+    1000
+  );
+}
+
 async function onSubmit() {
   activeIndex1.value = 0;
+  listData.common={}
+  listData.bundletube.length=0
+  listData.fiber.length=0
+  listData.fire.length=0
+  listData.smoke.length=0
+  listData.spray.length=0
+  listData.temperature.length=0
   clearInterval(timer)
   emit('close');
   closeModal();
@@ -91,7 +117,7 @@ function btnClick(ind) {
         }
       })
       clearInterval(timer)
-      getSysWarnList(menuList[0].deviceID, 'fire');
+      getMonitor(menuList[0].deviceID)
       break;
     case 1:
       activeIndex1.value = 0;
@@ -106,7 +132,7 @@ function btnClick(ind) {
           }
         })
         clearInterval(timer)
-        getSysWarnList(menuList[0].deviceID, 'fire');
+        getMonitor(menuList[0].deviceID)
         strType.value = menuList[0].strtype
       } else {
         menuList.length = 0
@@ -120,19 +146,8 @@ function btnClick(ind) {
 function cardClick(ind, item) {
   activeIndex1.value = ind;
   strType.value = item.strtype
-  if (props.moduleName == 'fire') {
-    clearInterval(timer)
-    getSysWarnList(item.deviceID, 'fire');
-  } else if (props.moduleName == 'vent') {
-    clearInterval(timer)
-    getSysWarnList(item.deviceID, 'vent');
-  } else if (props.moduleName == 'dust') {
-    clearInterval(timer)
-    getSysWarnList(item.deviceID, 'dust');
-  } else if (props.moduleName == 'gas') {
-    clearInterval(timer)
-    getSysWarnList(item.deviceID, 'gas');
-  }
+  clearInterval(timer)
+  getMonitor(item.deviceID)
 }
 
 //加载组件
@@ -153,7 +168,7 @@ function loadZj() {
 function getSysTypeWarnList(data) {
   sysTypeWarnList({ type: data }).then((res) => {
     menuList.length = 0;
-    if (props.moduleName == 'vent') {
+    if (props.moduleObj.moduleName == 'vent') {
       res.forEach((el) => {
         menuList.push({
           name: el.deviceName,
@@ -164,8 +179,8 @@ function getSysTypeWarnList(data) {
         });
       });
       clearInterval(timer)
-      getSysWarnList(menuList[0].deviceID, 'vent');
-    } else if (props.moduleName == 'fire') {
+      getMonitor(menuList[0].deviceID);
+    } else if (props.moduleObj.moduleName == 'fire') {
       menuList1.external = res.external
       menuList1.internal = res.internal
       menuList1.internal.forEach(el => {
@@ -178,8 +193,8 @@ function getSysTypeWarnList(data) {
         });
       })
       clearInterval(timer)
-      getSysWarnList(menuList[0].deviceID, 'fire');
-    } else if (props.moduleName == 'dust') {
+      getMonitor(menuList[0].deviceID);
+    } else if (props.moduleObj.moduleName == 'dust') {
       res.forEach((el) => {
         menuList.push({
           name: el.systemname,
@@ -190,8 +205,8 @@ function getSysTypeWarnList(data) {
         });
       });
       clearInterval(timer)
-      getSysWarnList(menuList[0].deviceID, 'dust');
-    } else if (props.moduleName == 'gas') {
+      getMonitor(menuList[0].deviceID);
+    } else if (props.moduleObj.moduleName == 'gas') {
       res.forEach((el) => {
         menuList.push({
           name: el.systemname,
@@ -202,53 +217,49 @@ function getSysTypeWarnList(data) {
         });
       });
       clearInterval(timer)
-      getSysWarnList(menuList[0].deviceID, 'gas');
+      getMonitor(menuList[0].deviceID);
     }
   });
 }
 //获取预警详情弹窗右侧数据
 function getSysWarnList(id, type) {
-  timer = setInterval(() => {
-    sysWarn({ sysid: id, type: type }).then((res) => {
-      if (type == 'fire') {
-        listData.bundletube = res.bundletube,
-          listData.fiber = res.fiber
-        listData.fire = res.fire,
-          listData.smoke = res.smoke,
-          listData.spray = res.spray,
-          listData.temperature = res.temperature,
-          loadZj()
-      } else if (type == 'vent' || type == 'dust' || type == 'gas') {
-        listData.common = res
-      }
-
-    });
-  }, 600)
-
+  sysWarn({ sysid: id, type: type }).then((res) => {
+    if (type == 'fire') {
+      listData.bundletube = res.bundletube,
+        listData.fiber = res.fiber
+      listData.fire = res.fire,
+        listData.smoke = res.smoke,
+        listData.spray = res.spray,
+        listData.temperature = res.temperature,
+        loadZj()
+    } else if (type == 'vent' || type == 'dust' || type == 'gas') {
+      listData.common = res
+    }
+  });
 }
 
 watch(
-  () => props.moduleName,
+  () => props.moduleObj,
   (val) => {
-    if (val == 'fire') {
+    if (val.moduleName == 'fire') {
       current.value = '';
       titleName.value = '火灾监测';
       isShowModule.value = true;
       getSysTypeWarnList('fire');
-    } else if (val == 'dust') {
+    } else if (val.moduleName == 'dust') {
       current.value = '';
       titleName.value = '粉尘监测';
       isShowModule.value = false;
       current.value = 'dustPage';
       getSysTypeWarnList('dust');
 
-    } else if (val == 'vent') {
+    } else if (val.moduleName == 'vent') {
       current.value = '';
       titleName.value = '通风监测';
       isShowModule.value = false;
       current.value = 'ventilate';
       getSysTypeWarnList('vent');
-    } else if (val == 'gas') {
+    } else if (val.moduleName == 'gas') {
       current.value = '';
       titleName.value = '瓦斯监测';
       isShowModule.value = false;

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

@@ -206,10 +206,10 @@ function btnClick(item, ind) {
 
 watch(() => props.listData, (val) => {
     console.log(val, 'val---')
+    echartDataSg1.xData.length = 0
+    echartDataSg1.yData.length = 0
+    echartDataSgList.length = 0
     if (JSON.stringify(val) != '{}') {
-        echartDataSg1.xData.length = 0
-        echartDataSg1.yData.length = 0
-        echartDataSgList.length = 0
         if (val.bundletube.length != 0) {
             topContent.temperature = val.temperature[0] ? val.temperature[0].readData.temperature : '--'
             topContent.position = val.bundletube[0].strinstallpos || '--'

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

@@ -74,8 +74,12 @@ function formatRoundNum(num) {
 }
 
 watch(() => props.listData, (val) => {
+    topAreaList.length = 0
+    echartDataFc.maxData.data.length = 0
+    echartDataFc.minData.data.length = 0
+    echartDataFc.aveValue.data.length = 0
+    echartDataFc.xData.length = 0
     if (JSON.stringify(val.common) != '{}') {
-        topAreaList.length = 0
         let dustList = val.common.dust.slice(0, 3)
         dustList.forEach(el => {
             topAreaList.push({
@@ -89,10 +93,7 @@ watch(() => props.listData, (val) => {
             },)
         })
         choiceData = val.common.dust
-        echartDataFc.maxData.data.length = 0
-        echartDataFc.minData.data.length = 0
-        echartDataFc.aveValue.data.length = 0
-        echartDataFc.xData.length = 0
+
         if (choiceData[activeIndex.value]) {
             choiceData[activeIndex.value].history.forEach(el => {
                 echartDataFc.maxData.data.push(el.dustval)

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

@@ -133,12 +133,12 @@ function getSgClick(items) {
 
 watch(() => props.listData, (val, val1) => {
     console.log(val, '火灾详情')
+    echartDataGq.xData.length = 0
+    echartDataGq.maxData.data.length = 0
+    echartDataSgList.length = 0
+    echartDataSg.xData.length = 0
+    echartDataSg.yData.length = 0
     if (JSON.stringify(val) != '{}') {
-        echartDataGq.xData.length = 0
-        echartDataGq.maxData.data.length = 0
-        echartDataSgList.length = 0
-        echartDataSg.xData.length = 0
-        echartDataSg.yData.length = 0
         if (val.fiber.length != 0) {
             topList[0].value = val.fiber[0].readData.fmax
             topList[1].value = val.fiber[0].readData.fmin
@@ -186,13 +186,13 @@ watch(() => props.listData, (val, val1) => {
                 }
                 echartDataSgList.push(el)
             })
-        }else {
+        } 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[2].list[1].value = '--'
             contentList.forEach(el => {
                 el.list.forEach(v => {
                     v.time = '--'

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

@@ -1,6 +1,6 @@
 <template>
     <div class="gasPage">
-        <div class="top-area" v-if="topAreaListWs.length!=0">
+        <div class="top-area" v-if="topAreaListWs.length != 0">
             <div class="top-box" v-for="(item, index) in topAreaListWs" :key="index">
                 <div class="box-label">{{ item.label }}</div>
                 <div class="box-values">
@@ -25,7 +25,7 @@
             </div>
         </div>
 
-        <div  :class="topAreaListWs.length!=0 ? 'bot-area' : 'bot-area1' ">
+        <div :class="topAreaListWs.length != 0 ? 'bot-area' : 'bot-area1'">
             <div class="title-b">
                 <div class="text-b">安全监控测点信息</div>
             </div>
@@ -68,10 +68,9 @@ let cardListWs = reactive<any[]>([])
 
 watch(() => props.listData, (val) => {
     console.log(val, '瓦斯详情数据-------')
+    topAreaListWs.length = 0
+    cardListWs.length = 0
     if (JSON.stringify(val.common) != '{}') {
-        topAreaListWs.length = 0
-        cardListWs.length = 0
-
         val.common.pump.forEach(v => {
             topAreaListWs.push({
                 label: v.strinstallpos || '--',
@@ -310,6 +309,7 @@ watch(() => props.listData, (val) => {
             }
         }
     }
+
     .bot-area1 {
         height: 100%;
         padding: 10px 15px 0px 15px;

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

@@ -81,11 +81,11 @@ watch(
   () => props.listData,
   (val) => {
     console.log(val, '详情数据');
+    echartDataFc1.maxData.data.length = 0;
+    echartDataFc1.minData.data.length = 0;
+    echartDataFc1.xData.length = 0;
+    topAreaList.length = 0;
     if (JSON.stringify(val.common) != '{}') {
-      echartDataFc1.maxData.data.length = 0;
-      echartDataFc1.minData.data.length = 0;
-      echartDataFc1.xData.length = 0;
-      topAreaList.length = 0;
       if (val.common.warnDevices.length != 0) {
         val.common.warnDevices.forEach((el) => {
           topAreaList.push({
@@ -137,7 +137,7 @@ watch(
       maxY.value = max1 >= max2 ? formatRoundNum(max1 * 2) : formatRoundNum(max2 * 2)
     }
   },
-  { deep: true }
+  { deep: true, immediate: true }
 );
 </script>
 

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

@@ -235,7 +235,7 @@
       </div>
     </div>
     <div class="lr right-box">
-      <ventBox1 >
+      <ventBox1>
         <template #title>
           <div class="monitor-title" @click="showModal('gas')">瓦斯预警监测</div>
         </template>
@@ -287,11 +287,10 @@
       </ventBox1>
     </div>
   </div>
-  <DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register"
-    @close="hideModal" />
+  <DetailModal v-if="isShowDialog == 'table'" v-model:visible="modalVisible" @register="register" @close="hideModal" />
   <!-- 火灾监测弹框 -->
-  <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName"
-    @close="hideModal" />
+  <DetailModalFire v-if="isShowDialog == 'others'" v-model:visible="modalVisible" @register="register"
+    :moduleObj="moduleObj" @close="hideModal" />
 </template>
 
 <script setup lang="ts">
@@ -299,7 +298,7 @@ import { ref, onMounted, onUnmounted, reactive } from 'vue';
 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
 import DetailModal from './DetailModal.vue';
 import DetailModalFire from './DetailModalFire.vue'; //火灾监测弹窗
-import { warningList, getTotalList } from './alarm.api';
+import { getTotalList } from './alarm.api';
 import {
   iconsMonitor,
   chartsColumns,
@@ -315,10 +314,12 @@ import BarSingle from '../../../../components/chart/BarSingle.vue';
 import { rainBg } from '/@/utils/ui.js';
 import { useModal } from '/@/components/Modal';
 
-let isShowDialog = ref(true); //切换弹窗显示
-let moduleName = ref<any>(''); //火灾、粉尘、瓦斯模块名
+let isShowDialog = ref(''); //切换弹窗显示
+let moduleObj = reactive({
+  ids: 0,
+  moduleName: ''
+}); //火灾、粉尘、瓦斯模块名
 const alarmCounts = ref();
-const dataSource = ref([]);
 const modalVisible = ref(false);
 
 const resetScroll = (e: Event) => {
@@ -351,8 +352,9 @@ let gasData = {
 const [register, { openModal }] = useModal();
 
 function showModal(data) {
-  isShowDialog.value = data == 'sbyj' ? true : false;
-  moduleName.value = data;
+  isShowDialog.value = data == 'sbyj' ? 'table' : 'others';
+  moduleObj.ids=new Date().getTime()
+  moduleObj.moduleName = data;
   modalVisible.value = true;
   openModal();
 }
@@ -367,7 +369,7 @@ function getMonitor(flag = false) {
   if (Object.prototype.toString.call(timer) === '[object Null]') {
     timer = setTimeout(
       async () => {
-        await getDataSource();
+        // await getDataSource();
         await getList();
         if (timer) {
           timer = null;
@@ -379,17 +381,7 @@ function getMonitor(flag = false) {
   }
 }
 
-async function getDataSource() {
-  const res = await warningList({ isok: 0 });
-  dataSource.value = res.list || [];
-  // if(dataSource.value.length > 0){
-  //   dataSource.value.map((data: any) => {
-  //     const readData = data.readData;
-  //     data = Object.assign(data, readData);
-  //     return data;
-  //   });
-  // }
-}
+
 
 // 获取预警数据
 async function getList() {
@@ -420,10 +412,10 @@ async function getList() {
       iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
     }
   });
-  fireMonitor[0].value =res.info.sysInfo.fireS.summaryInfo.external.temperature ? res.info.sysInfo.fireS.summaryInfo.external.temperature.value : '';
+  fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature ? res.info.sysInfo.fireS.summaryInfo.external.temperature.value : '';
   fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature ? res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel : '';
-  fireMonitor[1].value =res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.value : '';
-  fireMonitor[1].level =  res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel : '';
+  fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.value : '';
+  fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval ? res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel : '';
   fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.value : '';
   fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval ? res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel : '';
   fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val ? res.info.sysInfo.fireS.summaryInfo.external.ch2val.value : '';
@@ -432,17 +424,17 @@ async function getList() {
   fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val ? res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel : '';
   fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.value : '';
   fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val ? res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel : '';
-  
+
   fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.value : '';
   fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval ? res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel : '';
   fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.value : '';
   fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval ? res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel : '';
   fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value : '';
   fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val ? res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel : '';
-  fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val ?res.info.sysInfo.fireS.summaryInfo.internal.co2val.value : '';
-  fireMonitor1[3].level =  res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel : '';
+  fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.value : '';
+  fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val ? res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel : '';
   fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.value : '';
-  fireMonitor1[4].level =res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel : '';
+  fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val ? res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel : '';
   gasMonitor.length = 0
   gasData.sums = 0
   gasData.sums1 = 0
@@ -1226,7 +1218,7 @@ onUnmounted(() => {
             background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
           }
 
-          
+
         }
 
         .item4 {
@@ -1236,6 +1228,7 @@ onUnmounted(() => {
           .icon {
             background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
           }
+
           .item-monitor-box {
             top: -155px;
 

src/views/vent/monitorManager/compressor/components/nitrogenHome2.vue

@@ -0,0 +1,1077 @@
+<template>
+    <div>{{ Math.random() }}</div>
+    <div id="nitrogen3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"></div>
+    <div id="nitrogenCss3D" class="threejs-Object-CSS"
+        style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px">
+        <a-spin :spinning="loading" />
+        <template>
+            <div v-for="groupNum in 2" :key="groupNum" class="modal-monitor">
+                <fourBorderBg :class="`kyj${groupNum}`" :id="`nitrogenMonitor${groupNum}`">
+                    <div class="title">{{ monitorData[groupNum - 1]['strname'] }} </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">蝶阀开度:</span>
+                        <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_ExhaustPre'] ? monitorData[groupNum -
+                            1]['AirCompressor_ExhaustPre'] : '-'
+                        }}</span>
+                            <!-- <span class="unit">kPa</span> -->
+                        </span>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">检修:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum -
+                            1]['FluxTotal1'] ? parseFloat(monitorData[groupNum - 1]['FluxTotal1']).toFixed(2) : '-'
+                        }}</span><span class="unit">m³/h</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">运行:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{ monitorData[groupNum -
+                            1]['NitrogenPurity'] ? parseFloat(monitorData[groupNum - 1]['NitrogenPurity']).toFixed(2) :
+                            '-' }}</span>
+                            <span class="unit">%</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">进气蝶阀远控:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_RunTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_RunTime'] :
+                            '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">进气蝶阀开到位:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_LoadTime']
+                            : '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">进气蝶阀关到位:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_LoadTime']
+                            : '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                            <span
+                                style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">出气蝶阀远控:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_LoadTime']
+                            : '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <div class="monitor-val">
+                            <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                        </div>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">出气蝶阀开到位:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_LoadTime']
+                            : '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                    </div>
+                    <div class="monitor-item">
+                        <span class="monitor-title">出气蝶阀关到位:</span>
+                        <!-- <span class="monitor-val" v-if="!refresh"><span class="val">{{
+                            monitorData[groupNum - 1]['AirCompressor_LoadTime'] ? monitorData[groupNum -
+                            1]['AirCompressor_LoadTime']
+                            : '-'
+                        }}</span><span class="unit">h</span></span> -->
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                        <span
+                            style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                    </div>
+                </fourBorderBg>
+            </div>
+        </template>
+    </div>
+    <div class="nitrogen-home">
+        <div class="nitrogen-container">
+            <div class="top-box">
+                <!-- 左边监测数据 -->
+                <div class="lr-box left-box">
+                    <div class="item item-l" v-for="groupNum in monitorDataGroupNum" :key="groupNum">
+                        <ventBox1>
+                            <template #title>
+                                <div>{{ monitorData[groupNum - 1]['strname'] }}</div>
+                            </template>
+                            <template #container>
+                                <div class="monitor-box">
+                                    <div class="parameter-title group-parameter-title">
+                                        <SvgIcon class="icon" size="38" name="device-group-paramer" /><span>蝶阀参数</span>
+                                    </div>
+                                    <div class="state-item" v-for="(data, index) in groupParameterData" :key="index">
+                                        <div class="item-col">
+                                            <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                                            <span class="state-val">{{
+                                                (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]])
+                                                >= 0
+                                                ? monitorData[groupNum - 1][Object.keys(data)[0]] ?
+                                                    parseFloat(monitorData[groupNum -
+                                                        1][Object.keys(data)[0]]).toFixed(2) : '-'
+                                                : '-'
+                                            }}</span>
+                                        </div>
+                                        <div class="item-col" v-if="Object.keys(data)[1]">
+                                            <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                                            <span class="state-val">{{
+                                                (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]])
+                                                >= 0
+                                                ? monitorData[groupNum - 1][Object.keys(data)[1]] ?
+                                                    parseFloat(monitorData[groupNum -
+                                                        1][Object.keys(data)[1]]).toFixed(2) : '-'
+                                                : '-'
+                                            }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="monitor-box monitor-box1 ">
+                                    <div class="parameter-title device-parameter-title">
+                                        <SvgIcon class="icon" size="32" name="device-paramer" /><span>蝶阀故障数据</span>
+                                    </div>
+                                    <div class="state-box">
+                                        <div class="state-item" v-for="(data, index) in deviceParameterData" :key="index">
+                                            <div class="item-col">
+                                                <span class="state-title1">{{ Object.values(data)[0] }} :</span>
+                                                <span class="state-val1">
+                                                    <!-- {{
+                          (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[0]]) >= 0
+                          ? monitorData[groupNum - 1][Object.keys(data)[0]]
+                          : '-'
+                        }} -->
+                                                    <span v-if="monitorData[groupNum - 1][Object.keys(data)[0]] === true"
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                                                    <span
+                                                        v-else-if="monitorData[groupNum - 1][Object.keys(data)[0]] === false"
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                                                    <span v-else
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+
+                                                </span>
+                                            </div>
+                                            <div class="item-col" v-if="Object.keys(data)[1]">
+                                                <span class="state-title1">{{ Object.values(data)[1] }} :</span>
+                                                <span class="state-val1">
+                                                    <!-- {{
+                          (monitorData.length > 0 && monitorData[groupNum - 1][Object.keys(data)[1]]) >= 0
+                          ? monitorData[groupNum - 1][Object.keys(data)[1]]
+                          : '-'
+                        }} -->
+                                                    <span v-if="monitorData[groupNum - 1][Object.keys(data)[1]] === true"
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: red;"></span>
+                                                    <span
+                                                        v-else-if="monitorData[groupNum - 1][Object.keys(data)[1]] === false"
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: greenyellow;"></span>
+                                                    <span v-else
+                                                        style="display: inline-block; width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;"></span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </template>
+                        </ventBox1>
+                    </div>
+                    <!-- <div class="item item-l">
+                        <ventBox1 class="vent-margin-t-10">
+                            <template #title>
+                                <div>下风测详情</div>
+                            </template>
+                            <template #container>
+                                <div class="monitor-box">
+                                    <div class="state-item" v-for="(data, index) in downWindData" :key="index">
+                                        <div class="item-col">
+                                            <span class="state-title">{{ Object.values(data)[0] }} :</span>
+                                            <span class="state-val">{{
+                                                (monitorData.length > 0 && monitorData[0][Object.keys(data)[0]]) >= 0
+                                                ? monitorData[0][Object.keys(data)[0]] ?
+                                                    parseFloat(monitorData[0][Object.keys(data)[0]]).toFixed(2) : '-'
+                                                : '-'
+                                            }}</span>
+                                        </div>
+                                        <div class="item-col" v-if="Object.keys(data)[1]">
+                                            <span class="state-title">{{ Object.values(data)[1] }} :</span>
+                                            <span class="state-val">{{
+                                                (monitorData.length > 0 && monitorData[0][Object.keys(data)[1]]) >= 0
+                                                ? monitorData[0][Object.keys(data)[1]] ?
+                                                    parseFloat(monitorData[0][Object.keys(data)[1]]).toFixed(2) : '-'
+                                                : '-'
+                                            }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                        </ventBox1>
+                    </div> -->
+                </div>
+                <!-- 右边控制状态 -->
+                <div class="lr-box right-box">
+                    <ventBox1>
+                        <template #title>
+                            <div>远程控制</div>
+                        </template>
+                        <template #container>
+                            <div class="control-group">
+                                <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
+                                    <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
+                                    <div class="control-item-state">
+                                        <!-- <a-switch
+                        v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
+                        size="small"
+                        checked-children="开启"
+                        un-checked-children="关闭"
+                        :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1], index)"
+                      /> -->
+                                        <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
+                                            @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
+                                        <a-button v-else size="small" type="text" style="color: #fff;"
+                                            @click="handlerDevice(airCompressorState[groupNum - 1], false)">一键启停</a-button>
+
+                                    </div>
+                                </div>
+                                <div class="control-item" v-for="(groupNum, index) in monitorDataGroupNum" :key="groupNum">
+                                    <div class="control-item-title">{{ monitorData[groupNum - 1]['strname'] }}</div>
+                                    <div class="control-item-state">
+                                        <!-- <a-switch
+                        v-model="airCompressorState[groupNum - 1][`compressRunSigF1`]"
+                        size="small"
+                        checked-children="开启"
+                        un-checked-children="关闭"
+                        :disabled="airCompressorState[groupNum - 1][`controlModel`]"
+                        @change="handlerDevice(airCompressorState[groupNum - 1], index)"
+                      /> -->
+                                        <a-button v-if="index == 0" size="small" type="text" style="color: #fff;"
+                                            @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
+                                        <a-button v-else size="small" type="text" style="color: #fff;"
+                                            @click="handlerDevice(airCompressorState[groupNum - 1], true)">一键复位</a-button>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </ventBox1>
+                    <ventBox1 class="vent-margin-t-10">
+                        <template #title>
+                            <div>设备实时监测曲线</div>
+                        </template>
+                        <template #container>
+                            <BarAndLine v-if="chartsColumns.length > 0" xAxisPropType="readTime" :dataSource="echartData"
+                                height="340px" :chartsColumns="chartsColumns" chartsType="listMonitor"
+                                :option="echatsOption" />
+                            <!-- :option="zhudanOption" -->
+                        </template>
+                    </ventBox1>
+                </div>
+            </div>
+        </div>
+    </div>
+    <HandleModal :modal-is-show="modalIsShow" :modal-title="modalTitle" :modal-type="modalType" @handle-ok="handleOK"
+        @handle-cancel="handleCancel" />
+</template>
+<script lang="ts" setup name="nitrogenHome">
+import { onMounted, onUnmounted, ref, watch, reactive, defineProps, nextTick, inject, computed } from 'vue';
+import ventBox1 from '/@/components/vent/ventBox1.vue';
+import fourBorderBg from '../../../comment/components/fourBorderBg.vue';
+import { mountedThree, destroy, setModelType, addText } from '../nitrogen.threejs';
+import { getDevice } from '../nitrogen.api';
+import { SvgIcon } from '/@/components/Icon';
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
+import HandleModal from './modal.vue';
+import { deviceControlApi } from '/@/api/vent/index';
+import { message } from 'ant-design-vue';
+import lodash from 'lodash';
+const globalConfig = inject('globalConfig');
+
+const props = defineProps({
+    deviceId: {
+        type: String,
+        require: true,
+    },
+    modalType: {
+        type: String,
+        require: true,
+    },
+});
+const refresh = ref(false)
+const modalTitle = ref(''); // 模态框标题显示内容，根据设备操作类型决定
+const modalType = ref(''); // 模态框内容显示类型，设备操作类型
+const modalIsShow = ref<boolean>(false); // 是否显示模态框
+const loading = ref(true);
+let kzParam = reactive<any>({
+    data: {},
+    isFw: null,
+});
+
+// const kyjs = ['1号空压机', '1号空压机', '1号空压机', '1号空压机'];
+const flvURL1 = () => {
+    // return `https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv`;
+    return '';
+};
+const colors = ['#FDB146', '#EE6666', '#9BCB75', '#03C2EC', '#DA3914', '#9C83D9']
+const echatsOption = {
+    grid: {
+        top: '35%',
+        left: '-25px',
+        right: '10px',
+        bottom: '3%',
+        containLabel: true
+    },
+    toolbox: {
+        feature: {}
+    }
+}
+const monitorDataGroupNum = ref(0);
+
+let airCompressorState = reactive<any[]>([]);
+
+const groupParameterData = [
+    {
+        flow: '流量(m³/h)',
+        total_flow: '总流量(m³)',
+    },
+    {
+        single_flow: '单次流量(m³/h)',
+        oxygen_concentration: '氧浓度(%)',
+    },
+];
+const deviceParameterData = [
+    {
+        bv_1_load_short: '负载短路故障',
+        bv_1_motor_leakage: '电机漏电故障',
+    },
+    {
+        bv_1_low_voltage: '电压过低故障',
+        bv_1_high_voltage: '电压过高故障',
+    },
+    {
+        bv_1_supply_phase: '电源缺相故障',
+        bv_1_valve_position: '阀位故障',
+    },
+    {
+        bv_1_closing_overtorque: '关向过力矩故障',
+        bv_1_opening_overtorque: '开向过力矩故障',
+    },
+    {
+        bv_1_closing_overcurrent: '关向过电流故障',
+        bv_1_opening_overcurrent: '开向过电流故障',
+    },
+    {
+        bv_1_closing_timeout: '关向超时故障',
+        bv_1_opening_timeout: '开向超时故障',
+    },
+    {
+        bv_1_thermal_overload: '热过载故障',
+    },
+];
+const downWindData = [
+    {
+        o2Val: '下风侧氧气(%)',
+        temperature: '下风测温度(℃)',
+    },
+    {
+        fumes: '下风测烟雾(­%)',
+    },
+];
+
+const propTypeArr = ref([])
+const chartsColumns = ref([])
+watch(monitorDataGroupNum, () => {
+
+    const arr = <any[]>[]
+    const item = {
+        legend: '瞬时流量',
+        seriesName: '(m³/h)',
+        ymax: 5,
+        yname: 'm³/h',
+        linetype: 'line',
+        yaxispos: 'left',
+        color: '#FDB146',
+        sort: 1,
+        xRotate: 0,
+        dataIndex: 'InputFlux',
+    }
+    const propTypeList = []
+    for (let i = 1; i <= monitorDataGroupNum.value; i++) {
+        const lineType = lodash.cloneDeep(item)
+        lineType.legend = `制氮机${i}瞬时流量`;
+        lineType.dataIndex = `InputFlux${i}`
+        lineType.color = colors[i - 1]
+        arr.push(lineType)
+    }
+    chartsColumns.value = arr
+
+})
+
+
+
+const monitorData = ref(
+    new Array(3).fill({
+        // strName: '空压机',
+        // cumulativeFlow: '-',
+        // centerTemperature: '-',
+        // outletTemperature: '-',
+        // Ia: '-',
+        // Ib: '-',
+        // Ic: '-',
+        // Vab: '-',
+        // Vac: '-',
+        // Vbc: '-',
+        // compressGroupName: '',
+        // compressExhaustPressF1: '-',
+        // compressSeparatePressF1: '-',
+        // compressHostTempF1: '-',
+        // compressCrewTempF1: '-',
+        // compressRunTimeF1: '-',
+        // controlModel: 'LOC'
+    })
+);
+
+//图表数据
+let echartData = ref<any>([]);
+
+// https获取监测数据
+let timer: null | NodeJS.Timeout = null;
+async function getMonitor(flag?) {
+    if (Object.prototype.toString.call(timer) === '[object Null]') {
+        timer = await setTimeout(
+            async () => {
+                if (props.deviceId) {
+                    await getDataSource(props.deviceId);
+                }
+                if (timer) {
+                    timer = null;
+                }
+                await getMonitor();
+            },
+            flag ? 0 : 3000
+        );
+    }
+}
+
+async function getDataSource(systemID) {
+    const res = await getDevice({ devicetype: 'sys', systemID, type: 'all' });
+    console.log(res, 'res---------------');
+
+    if (res) {
+        const result = res;
+        if (!result || result.msgTxt.length < 1) return;
+        result.msgTxt.forEach((item) => {
+            if (item.type && item.type.startsWith('nitrogen')) {
+                airCompressorState.length = 0;
+                monitorData.value = item['datalist'].filter((data) => {
+                    const readData = data.readData;
+                    airCompressorState.push({
+                        id: data.deviceID,
+                        deviceType: data.deviceType,
+                        HMIReset: readData.HMIReset,
+                        HMIStartStop: readData.HMIStartStop
+                    });
+                    return Object.assign(data, readData);
+                });
+                console.log(monitorData, 'monitorData.value---===')
+                const airCompressor = { readTime: monitorData.value[0]['readTime'].substring(11) }
+                const dataArr = lodash.cloneDeep(echartData.value)
+                //图表数据
+                if (dataArr.length <= 5) {
+                    monitorData.value.forEach((el, index) => {
+                        airCompressor[`InputFlux${index + 1}`] = el['InputFlux'] || 0
+                    });
+                    dataArr.push(airCompressor)
+                } else {
+                    dataArr.shift()
+                    dataArr.push(airCompressor)
+                }
+                echartData.value = dataArr
+
+            }
+        });
+        monitorDataGroupNum.value = monitorData.value.length;
+        refresh.value = true
+        nextTick(() => {
+            refresh.value = false
+        })
+    }
+}
+
+function handlerDevice(data, bol) {
+    console.log(bol, 'bol-------')
+    kzParam.data = data;
+    kzParam.isFw = bol;
+    console.log(kzParam, 'kz--------')
+    if (bol) {
+        modalTitle.value = '一键复位';
+        modalType.value = '1';
+        modalIsShow.value = true;
+        kzParam.data.HMIReset = !data.HMIReset
+    } else {
+        modalTitle.value = '一键启停';
+        modalType.value = '2';
+        modalIsShow.value = true;
+        kzParam.data.HMIStartStop = !data.HMIStartStop;
+    }
+}
+function handleOK(passWord, handlerState) {
+    console.log(kzParam, 'kz----------');
+    // if (passWord !== '123456') {
+    //   message.warning('密码不正确，请重新输入');
+    //   return;
+    // }
+
+    let data = {};
+    if (kzParam.isFw) {
+        data = {
+            deviceid: kzParam.data.id,
+            devicetype: kzParam.data.deviceType,
+            password: passWord,
+            HMIReset: kzParam.data.HMIReset,
+        };
+    } else {
+        data = {
+            deviceid: kzParam.data.id,
+            password: passWord,
+            devicetype: kzParam.data.deviceType,
+            HMIStartStop: kzParam.data.HMIStartStop,
+        };
+    }
+
+    deviceControlApi(data).then((res) => {
+        // 模拟时开启
+        if (res.success) {
+            modalIsShow.value = false;
+            getDataSource(props.deviceId);
+            if (globalConfig.History_Type == 'remote') {
+                message.success('指令已下发至生产管控平台成功！')
+            } else {
+                message.success('指令已下发成功！')
+            }
+        }
+    });
+}
+function handleCancel() {
+    modalIsShow.value = false;
+    modalTitle.value = '';
+    modalType.value = '';
+}
+
+watch([monitorDataGroupNum, loading], ([newMonitorDataGroupNum, newLoading]) => {
+    nextTick(() => {
+        if (newMonitorDataGroupNum && !newLoading) {
+            setModelType(props.modalType, newMonitorDataGroupNum);
+        }
+    });
+});
+
+
+onMounted(async () => {
+    await getMonitor(true);
+    await mountedThree().then(() => {
+        loading.value = false;
+    });
+});
+
+onUnmounted(() => {
+    destroy();
+    if (timer) {
+        clearTimeout(timer);
+        timer = undefined;
+    }
+});
+</script>
+  
+<style lang="less" scoped>
+@ventSpace: zxm;
+
+.nitrogen-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+#nitrogenCss3D {
+    .modal-monitor {
+        width: 200px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+
+    &:deep(.win) {
+        margin: 0 !important;
+        background: #00000044;
+    }
+}
+
+.nitrogen-home {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    pointer-events: none;
+    top: 20px;
+
+    .nitrogen-container {
+        width: 100%;
+        height: calc(100%);
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 100px;
+
+        .top-box {
+            margin-top: 40px; //lxh
+            width: 100%;
+            padding: 10px;
+            overflow: hidden;
+            display: flex;
+            justify-content: space-between;
+
+            .lr-box {
+                height: fit-content;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                overflow: hidden;
+                z-index: 9999;
+                pointer-events: auto;
+            }
+
+            .item {
+                width: 335px;
+                height: auto;
+                position: relative;
+                border-radius: 5px;
+                margin-top: 10px;
+                margin-bottom: 0px;
+                pointer-events: auto;
+                color: #fff;
+                overflow: hidden;
+
+                &:first-child {
+                    margin-top: 0px;
+                }
+
+                .base-title {
+                    color: #fff;
+                    margin-bottom: 8px;
+                    padding-left: 10px;
+                    position: relative;
+                    font-size: 16px;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        display: block;
+                        width: 4px;
+                        height: 12px;
+                        top: 7px;
+                        left: 0px;
+                        background: #45d3fd;
+                        border-radius: 4px;
+                    }
+                }
+
+                .state-item {
+                    display: flex;
+                    flex-direction: row;
+                    padding: 5px;
+
+                    .item-col {
+                        width: calc(50% - 5px);
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        padding-right: 4px;
+                        background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+
+                        &:first-child {
+                            margin-right: 10px;
+                        }
+
+
+                        .state-title {
+                            color: #ffffffcc;
+                            flex: 9;
+                            font-size: 14px;
+                        }
+
+                        .state-val {
+                            flex: 1;
+                            color: #00eefffe;
+                            margin-right: 5px;
+                            text-align: right;
+                            font-size: 14px;
+                        }
+
+                        .state-title1 {
+                            color: #ffffffcc;
+                            flex: 2.5;
+                            font-size: 14px;
+                        }
+
+                        .state-val1 {
+                            display: flex;
+                            flex: 1;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                    }
+                }
+
+                .signal-box {
+                    margin: 5px 0;
+                    display: flex;
+                    align-items: center;
+
+                    .signal-title {
+                        color: #7af5ff;
+                        margin: 0 5px;
+                    }
+
+                    &:last-child {
+                        margin-right: 0px;
+                    }
+                }
+
+                .list-item {
+                    padding: 0 10px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    .item-data-key {
+                        color: #ffffff99;
+                    }
+                }
+
+                .item-data-box {
+                    color: #fff;
+
+                    .state-icon {
+                        display: inline-block;
+                        width: 12px;
+                        height: 12px;
+                        border-radius: 12px;
+                    }
+
+                    .open {
+                        border: 5px solid #133a56;
+                        background: #4ecb73;
+                    }
+
+                    .close {
+                        border: 5px solid #192961;
+                        background: #6d7898;
+                    }
+                }
+            }
+
+            .item-l {
+                width: 100%;
+
+                .monitor-box {
+                    width: 100%;
+
+                    .parameter-title {
+                        position: relative;
+                        width: 100%;
+                        height: 14px;
+                        margin-top: 10px;
+
+                        .icon,
+                        span {
+                            position: absolute;
+                            top: -10px;
+                        }
+                    }
+
+                    .group-parameter-title {
+                        background-image: linear-gradient(to right, #39a3ff50, #39a3ff00);
+
+                        .icon {
+                            left: -12px;
+                            top: -17px;
+                        }
+
+                        span {
+                            left: 18px;
+                        }
+
+                        .item-col {
+                            background-image: linear-gradient(to right, #39a3ff00, #39a3ff10);
+                        }
+                    }
+
+                    .device-parameter-title {
+                        background-image: linear-gradient(to right, #3df6ff40, #3df6ff00);
+
+                        .icon {
+                            left: -10px;
+                            top: -14px;
+                        }
+
+                        span {
+                            left: 18px;
+                        }
+
+                        .item-col {
+                            background-image: linear-gradient(to right, #3df6ff10, #3df6ff00);
+                        }
+                    }
+                }
+
+                .monitor-box1 {
+                    height: 140px;
+                }
+
+                .state-box {
+                    height: calc(100% - 24px);
+                    overflow-y: auto;
+                }
+            }
+
+            .right-box {
+                width: 330px;
+                margin-top: 50px;
+
+                .control-group {
+                    display: flex;
+                    // justify-content: space-around;
+                    flex-wrap: wrap;
+
+                    .control-item {
+                        width: 50%; //lxh
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                        padding: 0 4px;
+
+                        .control-item-title {
+                            color: #a6dce9;
+                            position: relative;
+                            top: 5px;
+                        }
+
+                        .control-item-state {
+                            width: 94px;
+                            height: 47px;
+                            background: url('/@/assets/images/vent/control-switch-bg.png');
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            color: #fff;
+                        }
+
+                        .button-box {
+                            position: relative;
+                            padding: 5px;
+                            border: 1px transparent solid;
+                            background-clip: border-box;
+                            border-radius: 5px;
+                            margin-left: 8px;
+                        }
+
+                        .a-button {
+                            pointer-events: auto;
+                        }
+
+                        &::v-deep .a-button--mini {
+                            padding: 6px 10px;
+                        }
+
+                        &::v-deep .a-button--mini.is-round {
+                            padding: 6px 10px;
+                        }
+                    }
+                }
+            }
+
+            .left-box {
+                width: 365px;
+                margin-top: 80px;
+            }
+        }
+
+        &:deep(.win) {
+            width: 100%;
+            margin: 0 !important;
+        }
+    }
+}
+
+&:deep(.main) {
+    .title {
+        height: 34px;
+        text-align: center;
+        font-weight: 600;
+        color: #7af5ff;
+        // background-image: url('../../../assets/img/yfj/light.png');
+        background-repeat: no-repeat;
+        background-position-x: center;
+        background-position-y: 100%;
+        background-size: 80%;
+        font-size: 16px;
+    }
+
+    .monitor-item {
+        width: 200px;
+        // width: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 3px;
+
+        .monitor-title {
+            display: flex;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+            color: #7af5ff;
+            font-weight: 400;
+            font-size: 14px;
+        }
+
+        .monitor-val {
+            color: #ffb700;
+            display: flex;
+            // width: auto;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+
+            .val {
+                width: 100%;
+                text-align: center;
+                font-size: 14px;
+            }
+
+            // .unit {
+            //     color: #ffffffbb;
+            //     font-size: 14px;
+            // }
+        }
+    }
+
+
+
+    .signal-item {
+        display: flex;
+        justify-content: space-between;
+
+        // margin-bottom: 5px;
+        .signal-round {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin: 0 10px;
+            position: relative;
+
+            &::after {
+                display: block;
+                content: '';
+                position: absolute;
+                width: 12px;
+                height: 12px;
+                top: -2px;
+                left: -2px;
+                border-radius: 50%;
+            }
+        }
+
+        .signal-round-gry {
+            background-color: #858585;
+
+            &::after {
+                background-color: #85858544;
+                box-shadow: 0 0 1px 1px #85858599;
+            }
+        }
+
+        .signal-round-run {
+            background-color: #67fc00;
+
+            &::after {
+                background-color: #67fc0044;
+                box-shadow: 0 0 1px 1px #c6ff77;
+            }
+        }
+
+        .signal-round-warning {
+            background-color: #e9170b;
+
+            &::after {
+                background-color: #e9170b44;
+                box-shadow: 0 0 1px 1px #e9170b;
+            }
+        }
+    }
+}
+
+:deep(.zxm-radio-wrapper) {
+    color: #fff !important;
+}
+</style>
+  

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

@@ -2,7 +2,8 @@
   <div class="nitrogen-box">
     <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }" :options = 'options' @change="getSelectRow" :optionValue="optionValue">智能注氮管控系统</customHeader>
     <!-- <nitrogenHome v-if="activeKey == 'nitrogen_page' && optionValue && optionValue !='1702602347296399361'" :device-id="optionValue" :modal-type="modalType" /> -->
-    <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
+    <!-- <nitrogenHome1 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" /> -->
+    <nitrogenHome2 v-if="activeKey == 'nitrogen_page' && optionValue" :device-id="optionValue" :modal-type="modalType" />
     <nitrogenEcharts v-if="activeKey == 'yfj_monitor_echarts'"/>
     <nitrogenHistory ref="historyTable" :device-id="optionValue" :device-type="optionType" v-if="activeKey == 'yfj_history'"/>
     <nitrogenHandleHistory ref="alarmHistoryTable" v-if="activeKey == 'yfj_handler_history'"/>
@@ -16,6 +17,7 @@ import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import customHeader from '/@/views/vent/comment/components/customHeader.vue';
 import nitrogenHome from './components/nitrogenHome.vue'
 import nitrogenHome1 from './components/nitrogenHome1.vue'
+import nitrogenHome2 from './components/nitrogenHome2.vue'
 import nitrogenEcharts from './components/nitrogenEcharts.vue'
 import nitrogenHistory from './components/nitrogenHistory.vue'
 import nitrogenHandleHistory from './components/nitrogenHandleHistory.vue'