火灾监测预警优化

.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理，您可以配置多个 ,请注意，没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
-# VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
+# VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"], ["/python", "http://127.0.0.1:8008"], ["/tun2D", "http://127.0.0.1:8088/micro-vent-2dModal/tun2D"]]
+VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
 # VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -29,7 +29,7 @@ VITE_GLOB_API_URL_PREFIX=
 
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"],["micro-vent-2dModal", "//localhost:8088/", "micro-vent-2dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

src/views/vent/gas/gasInspect/components/inspectEdit.vue

@@ -84,10 +84,8 @@ async function getAllGasInsList() {
 }
 //巡检地址选项切换
 let changeAddress = (val) => {
-    console.log(val, '888===')
     formStateEdit.deviceId = addressList.value.filter(v => v.value == val)[0].deviceId
     formStateEdit.strInstallPos = val
-    console.log(formStateEdit.strInstallPos, '090===')
 }
 //编辑提交
 let confirmEdit = () => {

src/views/vent/monitorManager/alarmMonitor/common/external-fourc.vue

@@ -0,0 +1,393 @@
+<template>
+    <div class="external-fourc">
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.yw }}</div>
+            <div v-if="monitorlistYw.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+                        <div class="box-text-z">
+                            <div class="text-label">值</div>
+                            <div class="text-val">{{ item.val || '--' }}</div>
+                        </div>
+                        <div class="box-text-zt">
+                            <div class="text-label">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
+                                || '--' }}
+                            </div>
+                        </div>
+                        <div class="box-text-time">
+                            <div class="text-label">时间</div>
+                            <div class="text-val">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.wd }}</div>
+            <div v-if="monitorlistWd.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+                        <div class="box-text-z">
+                            <div class="text-label">值</div>
+                            <div class="text-val">{{ `${item.val} ${item.dw}` || '--' }}</div>
+                        </div>
+                        <div class="box-text-zt">
+                            <div class="text-label">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
+                                || '--' }}
+                            </div>
+                        </div>
+                        <div class="box-text-time">
+                            <div class="text-label">时间</div>
+                            <div class="text-val">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.pl }}</div>
+            <div v-if="monitorlistPl.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistPl" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+                        <div class="box-text-z">
+                            <div class="text-label">值</div>
+                            <div class="text-val">{{ item.readData.sprayval || '--' }}</div>
+                        </div>
+                        <div class="box-text-zt">
+                            <div class="text-label">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
+                                || '--' }}
+                            </div>
+                        </div>
+                        <div class="box-text-time">
+                            <div class="text-label">时间</div>
+                            <div class="text-val">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.co }}</div>
+            <div v-if="monitorlistHy.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+
+                        <div class="box-text-zt1">
+                            <div class="text-label-hy">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{
+                                item.warnLevel_str || '--'
+                                }}
+                            </div>
+                        </div>
+                        <div class="box-text-time1">
+                            <div class="text-label-hy">时间</div>
+                            <div class="text-val-hy">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { topOutList, tabLists, } from '../common.data';
+
+let props = defineProps({
+    cgqData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+// //烟雾传感器列表数据
+let monitorlistYw = ref<any[]>([]);
+// //温度传感器列表数据
+let monitorlistWd = ref<any[]>([]);
+//喷淋装置列表数据
+let monitorlistPl = ref<any[]>([]);
+// //火焰传感器列表数据
+let monitorlistHy = ref<any[]>([]);
+
+watch(() => props.cgqData, (newV, oldV) => {
+    if (newV.smoke.length != 0) {
+        monitorlistYw.value = newV.smoke.map((el) => {
+            el.smokeVal = el.readData.smokeval == '0' ? '无烟' : el.readData.smokeval == '1' ? '有烟' : el.readData.smokeval
+            return {
+                strinstallpos: el.strinstallpos,
+                val: el.smokeVal,
+                warnLevel_str: el.warnLevel_str,
+                readTime: el.readTime,
+            }
+        });
+    }
+
+    if (newV.temperature.length != 0) {
+        monitorlistWd.value = newV.temperature.map((el) => {
+            return {
+                strinstallpos: el.strinstallpos,
+                // val: el.readData.fireval,
+                val: el.readData.fireval,
+                dw: '℃',
+                warnLevel_str: el.warnLevel_str,
+                readTime: el.readTime,
+            }
+        });
+    }
+
+    if (newV.spray.length != 0) {
+        monitorlistPl.value = newV.spray.map((el) => {
+            return { ...el }
+        });
+    }
+
+    if (newV.co.length != 0) {
+        monitorlistHy.value = newV.co.map((el) => {
+            return { ...el }
+        });
+    }
+}, { immediate: true })
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .external-fourc {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.external-fourc {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .content-box {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: calc(50% - 10px);
+        height: calc(50% - 10px);
+        background: var(--image-bj2) no-repeat center;
+        background-size: 100% 100%;
+
+        &:nth-child(1) {
+            margin: 0px 20px 20px 0px;
+        }
+
+        &:nth-child(3) {
+            margin: 0px 20px 0px 0px;
+        }
+
+        .container-title {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            top: 4px;
+            color: #fff;
+        }
+
+        .container-content1 {
+            position: absolute;
+            width: 100%;
+            top: 38px;
+            height: calc(100% - 48px);
+            background: var(--image-zwnr) no-repeat center;
+            background-size: 100% 100%;
+            overflow-y: auto;
+
+            .noData-text {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                bottom: 20px;
+                color: #fff;
+            }
+        }
+
+        .container-content {
+            position: absolute;
+            width: 100%;
+            top: 38px;
+            height: calc(100% - 48px);
+            overflow-y: auto;
+
+            .container-content-box {
+                position: relative;
+                width: 100%;
+                height: 80px;
+                margin-bottom: 10px;
+                background: var(--image-title) no-repeat center;
+                background-size: 100% 100%;
+            }
+
+            .content-box-title {
+                position: absolute;
+                left: 10px;
+                color: #fff;
+            }
+
+            .content-box-text {
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                position: absolute;
+                top: 22px;
+                width: 100%;
+                height: 58px;
+
+                .box-text-z {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 205px;
+                    padding: 0px 30px;
+                    background: var(--image-z) no-repeat center;
+                    background-size: 100% 100%;
+
+                }
+
+                .box-text-zt {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 205px;
+                    padding: 0px 30px;
+                    background: var(--image-zt) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-zt1 {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    height: 50px;
+                    width: 258px;
+                    background: var(--image-zt1) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-time {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 305px;
+                    padding: 0px 30px;
+                    background: var(--image-time) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-time1 {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    height: 50px;
+                    width: 298px;
+                    background: var(--image-time1) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .text-label {
+                    font-size: 12px;
+                    color: #fff
+                }
+
+                .text-label-hy {
+                    position: absolute;
+                    left: 50px;
+                    color: #fff;
+                    font-size: 12px
+                }
+
+                .text-val-hy {
+                    position: absolute;
+                    left: 115px;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-val-hy1 {
+                    position: absolute;
+                    left: 115px;
+                    color: #ff0000;
+                    font-size: 12px;
+                }
+
+                .text-val-hy2 {
+                    position: absolute;
+                    left: 115px;
+                    color: #91e609;
+                    font-size: 12px;
+                }
+
+                .text-val {
+                    font-size: 12px;
+                    color: #fff
+                }
+
+                .text-val1 {
+                    font-size: 12px;
+                    color: #ff0000
+                }
+
+                .text-val2 {
+                    font-size: 12px;
+                    color: #91e609
+                }
+            }
+        }
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/external-gqcw.vue

@@ -14,9 +14,33 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { topOutList } from '../common.data';
 import imgUrl from '/@/assets/images/fire/pie.png';
+
+let props = defineProps({
+    externalTData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+watch(() => props.externalTData, (newV, oldV) => {
+    if (newV.length != 0) {
+        let fiber: any = newV[0]
+        topOutList[0].value = fiber.readData.fmax;
+        topOutList[1].value = fiber.readData.fmin;
+        topOutList[2].value = fiber.readData.favg;
+        topOutList[3].text = fiber.warnFlag ? '存在风险' : '正常';
+    } else {
+        topOutList[0].value = '--';
+        topOutList[1].value = '--';
+        topOutList[2].value = '--';
+        topOutList[3].text = '正常';
+    }
+}, { immediate: true })
 </script>
 
 <style lang="less" scoped>

src/views/vent/monitorManager/alarmMonitor/common/external-gx-echart.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="external-gx-echart">
+        <div class="footer-title">
+            <div class="echart-label">光纤测温系统实时温度监测</div>
+        </div>
+        <div class="echart-content">
+            <echartLine2 :echartDataWd="echartDataWd" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import echartLine2 from './echartLine2.vue';
+
+let props = defineProps({
+    echartData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    }
+})
+
+//外因火灾温度监测-图表数据
+let echartDataWd = reactive({
+    xData: [],
+    curData: {
+        lengedData: '实时温度',
+        data: [],
+    },
+    maxData: {
+        lengedData: '最大温度',
+        data: [],
+    },
+    minData: {
+        lengedData: '最小温度',
+        data: [],
+    },
+    avgData: {
+        lengedData: '平均温度',
+        data: [],
+    },
+});
+
+watch(() => props.echartData, (newV, oldV) => {
+    echartDataWd.xData.length = 0;
+    echartDataWd.avgData.data.length = 0;
+    echartDataWd.maxData.data.length = 0;
+    echartDataWd.minData.data.length = 0;
+    echartDataWd.curData.data.length = 0;
+    if (newV.length != 0) {
+        const fiber: any = newV[0];
+        const arr: any[] = JSON.parse(fiber.readData.fibreTemperature);
+        arr.forEach((el) => {
+        echartDataWd.xData.push(el.pos);
+        echartDataWd.curData.data.push(el.value);
+        echartDataWd.maxData.data.push(fiber.avgParam?.max_temperature_value || 0);
+        echartDataWd.minData.data.push(fiber.avgParam?.min_temperature_value || 0);
+        echartDataWd.avgData.data.push(fiber.avgParam?.avg_temperature_value || 0);
+      });
+    }
+}, { immediate: true })
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .external-gx-echart {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.external-gx-echart {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .footer-title {
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .echart-label {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+
+    .echart-content {
+        height: calc(100% - 30px);
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/external-mb.vue

@@ -0,0 +1,464 @@
+<template>
+    <div class="external-mb">
+        <div class="title-b">采空区密闭参数</div>
+        <div class="card-btn">
+            <div :class="activeIndex == 0 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'O₂', dw: '(%)' }, 0)">
+                <div class="btn-label">
+                    <span>O₂</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.o2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.o2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.o2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == 1 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'CO', dw: '(ppm)' }, 1)">
+                <div class="btn-label">
+                    <span>CO</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.co }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.cotime }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.coaddress }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == 2 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'CO₂', dw: '(%)' }, 2)">
+                <div class="btn-label">
+                    <span>CO₂</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.co2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.co2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.co2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == 3 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'CH₄', dw: '(%)' }, 3)">
+                <div class="btn-label">
+                    <span>CH₄</span>
+                    <span>(%)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.ch4 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.ch4time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.ch4address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == 4 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'C₂H₂', dw: '(ppm)' }, 4)">
+                <div class="btn-label">
+                    <span>C₂H₂</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.c2h2 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.c2h2time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.c2h2address }}</span>
+                </div>
+            </div>
+            <div :class="activeIndex == 5 ? 'content-box1' : 'content-box'" @click="btnClick({ label: 'C₂H₄', dw: '(ppm)' }, 5)">
+                <div class="btn-label">
+                    <span>C₂H₄</span>
+                    <span>(ppm)</span>
+                </div>
+                <div class="box-item box-item1">
+                    <span class="text-t">浓度:</span>
+                    <span class="text-v">{{ mbData.c2h4 }}</span>
+                </div>
+                <div class="box-item box-item2">
+                    <span class="text-t">时间:</span>
+                    <span class="text-v">{{ mbData.c2h4time }}</span>
+                </div>
+                <div class="box-item box-item3">
+                    <span class="text-t">位置:</span>
+                    <span class="text-v">{{ mbData.c2h4address }}</span>
+                </div>
+            </div>
+        </div>
+        <div class="echart-box">
+            <div class="title-f">
+                <div class="title-text">
+                    {{ `${type}趋势` }}&nbsp; <span style="color: red">{{ netStatus != 1 ? '(设备未连接)' : '' }}</span>
+                </div>
+            </div>
+            <div class="echarts-box">
+                <echartLine1 :echartDataSg="echartDataSg1" :lengedDataName="echartDataSg1.lengedDataName" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import echartLine1 from './echartLine1.vue';
+
+let props = defineProps({
+    externalTSgData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    selectData:{
+        type:String,
+        default:'',
+    },
+    warnLevel:{
+        type:String,
+        default:''
+    }
+})
+
+//束管监测当前密闭参数激活选项
+let activeIndex = ref(0);
+let bundletube = ref<any[]>([])
+//束管监测密闭参数列表
+let mbData = reactive({
+    o2: '',
+    o2time: '',
+    o2address: '',
+    co: '',
+    cotime: '',
+    coaddress: '',
+    co2: '',
+    co2time: '',
+    co2address: '',
+    ch4: '',
+    ch4time: '',
+    ch4address: '',
+    c2h2: '',
+    c2h2time: '',
+    c2h2address: '',
+    c2h4: '',
+    c2h4time: '',
+    c2h4address: ''
+})
+//束管监测当前激活密闭参数类型
+let type = ref('O₂');
+let echartDataSg1 = reactive({
+  xData: [],
+  yData: [],
+  lengedData: 'O₂',
+  lengedDataName: '(%)',
+});
+let echartDataSgList = ref<any[]>([]);
+    let netStatus = ref(0);
+
+//束管监测密闭参数选项切换
+function btnClick(item, ind) {
+  activeIndex.value = ind;
+  type.value = item.label;
+  echartDataSg1.xData.length = 0;
+  echartDataSg1.yData.length = 0;
+  echartDataSg1.lengedData = type.value;
+  echartDataSg1.lengedDataName = item.dw;
+
+  switch (type.value) {
+    case 'O₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.o2val);
+      });
+      break;
+    case 'C₂H₄':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.ch2val);
+      });
+      break;
+    case 'CO':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.coval);
+      });
+      break;
+    case 'CH₄':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.gasval);
+      });
+      break;
+    case 'CO₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.co2val);
+      });
+      break;
+    case 'C₂H₂':
+      echartDataSgList.value.forEach((el) => {
+        echartDataSg1.xData.push(el.time);
+        echartDataSg1.yData.push(el.chval);
+      });
+      break;
+  }
+}
+
+watch(() => props.externalTSgData, (newV, oldV) => {
+    echartDataSg1.xData.length = 0;
+    echartDataSg1.yData.length = 0;
+    if (newV.length != 0 && props.selectData) {
+        bundletube.value = newV
+        let dataVal =bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0] 
+        let times = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) || '--';
+        let address = dataVal.strinstallpos || '--';
+        mbData.o2 = dataVal.readData.o2val || '--';
+        mbData.o2time = times
+        mbData.o2address = address
+        mbData.co = dataVal.readData.coval || '--';
+        mbData.cotime = times
+        mbData.coaddress = address;
+        mbData.co2 = dataVal.readData.co2val || '--';
+        mbData.co2time = times
+        mbData.co2address = address;
+        mbData.ch4 = dataVal.readData.gasval || '--';
+        mbData.ch4time =times
+        mbData.ch4address = address;
+        mbData.c2h2 = dataVal.readData.chval || '--';
+        mbData.c2h2time = times
+        mbData.c2h2address = address;
+        mbData.c2h4 = dataVal.readData.ch2val || '--';
+        mbData.c2h4time = times
+        mbData.c2h4address = address;
+
+        echartDataSgList.value = dataVal.history;
+        netStatus.value = dataVal['netStatus'];
+        btnClick(
+            {
+                label: type.value,
+                dw: echartDataSg1.lengedDataName,
+            },
+            activeIndex.value
+        );
+    }
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .external-mb {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.external-mb {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .title-b {
+        height: 30px;
+        line-height: 30px;
+        font-family: 'douyuFont';
+        font-size: 14px;
+        color: #fff;
+    }
+
+    .card-btn {
+        height: 28%;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+
+        .content-box {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: var(--image-1) no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .btn-label {
+                position: absolute;
+                left: 50%;
+                top: 0;
+                transform: translate(-50%);
+                font-size: 16px;
+                color: #fff;
+            }
+
+            .box-item {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                width: 89%;
+                height: 16%;
+                padding: 0px 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: var(--image-contetn) no-repeat center;
+                background-size: 100% 100%;
+
+                .text-t {
+                    width: 17%;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-v {
+                    width: 83%;
+                    font-family: 'douyuFont';
+                    font-size: 10px;
+                    color: var(--vent-table-action-link);
+                    display: flex;
+                    justify-content: flex-end;
+                }
+            }
+
+            .box-item1 {
+                top: 24%;
+            }
+
+            .box-item2 {
+                top: 50%;
+            }
+
+            .box-item3 {
+                top: 75%;
+            }
+        }
+
+        .content-box1 {
+            position: relative;
+            width: 16%;
+            height: 100%;
+            background: var(--image-2) no-repeat center;
+            background-size: 100% 100%;
+            cursor: pointer;
+
+            .btn-label {
+                position: absolute;
+                left: 50%;
+                top: 0;
+                transform: translate(-50%);
+                font-size: 16px;
+                color: #fff;
+            }
+
+            .box-item {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                width: 89%;
+                height: 16%;
+                padding: 0px 10px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                background: var(--image-contetn) no-repeat center;
+                background-size: 100% 100%;
+
+                .text-t {
+                    width: 17%;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-v {
+                    width: 83%;
+                    font-family: 'douyuFont';
+                    font-size: 10px;
+                    color: var(--vent-table-action-link);
+                    display: flex;
+                    justify-content: flex-end;
+                }
+            }
+
+            .box-item1 {
+                top: 19%;
+            }
+
+            .box-item2 {
+                top: 41%;
+            }
+
+            .box-item3 {
+                top: 63%;
+            }
+        }
+    }
+
+    .echart-box {
+        height: calc(72% - 41px);
+        border: 1px solid #114aac;
+
+        .title-f {
+            height: 40px;
+            padding: 0px 10px;
+            box-sizing: border-box;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .title-text {
+                font-family: 'douyuFont';
+                font-size: 14px;
+                color: #fff;
+            }
+        }
+
+        .echarts-box {
+            height: calc(100% - 40px);
+        }
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/external-sgjc.vue

@@ -0,0 +1,339 @@
+<template>
+    <div class="external-sgjc">
+        <div class="content-box">
+            <div class="contents">
+                <div class="text">
+                    <div class="text-label">位置: </div>
+                    <div class="text-value">
+                        <a-select v-model:value="selectData" style="width: 360px" @change="changeSelect">
+                            <a-select-option v-for="file in selectList" :key="file.label" :value="file.value">{{
+                                file.label
+                                }}</a-select-option>
+                        </a-select>
+                    </div>
+                </div>
+                <div class="text">
+                    <span class="text-label">时间 : </span>
+                    <span class="text-value">{{ topContent.time }}</span>
+                </div>
+            </div>
+            <div class="contents">
+                <img src="@/assets/images/fire/pie.png" alt="" />
+                <span class="text">{{ topContent.temperature }}</span>
+                <span class="dw">°C</span>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="text1">
+                <span>预警等级 : </span>
+                <span :class="{
+                    value1: topContent.warnLevel == '绿色预警',
+                    value2: topContent.warnLevel == '黄色预警',
+                    value3: topContent.warnLevel == '红色预警',
+                }">{{ topContent.warnLevel || '-' }}</span>
+            </div>
+            <div class="text1">
+                <span>煤自燃阶段 : </span>
+                <span>{{ topContent.smokeJd || '-' }}</span>
+            </div>
+        </div>
+        <div class="pl-10px pr-10px">
+            <div class="mb-10px">
+                <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急启动</AButton>
+            </div>
+            <div>
+                <AButton class="w-full" type="primary" @click="controlDevice('dianwei', 'zhi')">应急关闭</AButton>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, h } from 'vue'
+import { Modal, Input } from 'ant-design-vue';
+
+let props = defineProps({
+    externalTSgData: {
+        type: Array,
+        default: () => {
+            return []
+        }
+    },
+    temperatureData: {
+        type: String,
+        default: ''
+    }
+})
+
+let bundletube = ref<any[]>([])
+let selectData = ref('');
+let selectList = ref<any[]>([]);
+
+//束管监测-顶部区域数据
+let topContent = reactive({
+    temperature: '0',
+    position: '',
+    time: '',
+    warnLevel: '',
+    smokeJd: '',
+});
+let $emit=defineEmits(['changeSelect','changeWarnLevel'])
+
+function changeSelect(val) {
+    selectData.value = val;
+    let data = bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0];
+    topContent.time = data.readTime || '--';
+    topContent.warnLevel = data.syswarnLevel_str;
+    topContent.smokeJd = data.syswarnLevel_des;
+
+    // mbList[0].nd = data.readData.o2val || '--';
+    // mbList[1].nd = data.readData.coval || '--';
+    // mbList[2].nd = data.readData.co2val || '--';
+    // mbList[3].nd = data.readData.gasval || '--';
+    // mbList[4].nd = data.readData.chval || '--';
+    // mbList[5].nd = data.readData.ch2val || '--';
+    // mbList.forEach((el) => {
+    //     el.time1 = data ? data.readTime.substring(0, data.readTime.lastIndexOf(':')) : '--';
+    //     el.address = data ? data.strinstallpos : '--';
+    // });
+    // netStatus.value = data['netStatus'];
+}
+// 设备控制
+function controlDevice(code, value?) {
+    const passWord = ref('');
+    Modal.confirm({
+        title: '是否确认执行该操作？',
+        maskClosable: true,
+        content: () => {
+            return h(Input, {
+                placeholder: '请输入密码',
+                type: 'password',
+                modelValue: passWord.value,
+                'onUpdate:value'(val) {
+                    passWord.value = val;
+                },
+            });
+        },
+        onOk() {
+            console.log('OK', passWord);
+        },
+    });
+    // Promise.all(
+    //   [].map(({ deviceID, deviceType }) => {
+    //     return deviceControlApi({
+    //       deviceid: deviceID,
+    //       devicetype: deviceType,
+    //       paramcode: code,
+    //       value,
+    //       // password: passWord || globalConfig?.simulatedPassword,
+    //     });
+    //   })
+    // ).then((res) => {
+    //   // 模拟时开启
+    //   if (res.success) {
+    //     if (globalConfig.History_Type == 'remote') {
+    //       message.success('指令已下发至生产管控平台成功！');
+    //     } else {
+    //       message.success('指令已下发成功！');
+    //     }
+    //   } else {
+    //     message.error(res.message);
+    //   }
+    // });
+}
+
+watch(() => props.externalTSgData, (newV, oldV) => {
+    bundletube.value = newV
+    if (bundletube.value.length != 0) {
+        selectList.value = bundletube.value.map((el) => {
+            return { label: el.strinstallpos, value: el.strinstallpos }
+        });
+        selectData.value = selectData.value ? selectData.value : selectList.value[0].value;
+
+        let dataVal = selectData.value ? bundletube.value.filter((v) => v.strinstallpos == selectData.value)[0] : bundletube.value[0];
+        topContent.temperature = props.temperatureData;
+        topContent.time = dataVal.readTime || '--';
+        topContent.warnLevel = dataVal.syswarnLevel_str;
+        topContent.smokeJd = dataVal.syswarnLevel_des;
+        $emit('changeSelect', selectData.value)
+        $emit('changeWarnLevel',topContent.warnLevel)
+    } else {
+        topContent.temperature = '0';
+        // topContent.position = '--';
+        topContent.time = '--';
+        topContent.warnLevel = '--';
+        topContent.smokeJd = '--';
+    }
+}, { immediate: true })
+
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .external-sgjc {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.external-sgjc {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .content-box {
+        display: flex;
+
+        &:nth-child(1) {
+            justify-content: space-between;
+            align-items: center;
+            padding: 0px 40px;
+            flex: 2;
+            height: 100%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        &:nth-child(2) {
+            flex-direction: column;
+            flex: 1;
+            justify-content: space-around;
+            align-items: center;
+            height: 73%;
+            border-right: 2px solid;
+            border-image: var(--border-image-2) 1 1 1;
+        }
+
+        .contents {
+            height: 73%;
+
+            &:nth-child(1) {
+                width: 50%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+
+                .text {
+                    font-size: 14px;
+                    display: flex;
+                    align-items: center;
+
+                    .text-label {
+                        color: #b3b8cc;
+                        font-weight: bold;
+                    }
+
+                    .text-value {
+                        font-family: 'douyuFont';
+                        color: var(--vent-table-action-link);
+                        margin-left: 10px;
+                    }
+                }
+            }
+
+            &:nth-child(2) {
+                width: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                img {
+                    position: relative;
+                    width: 90px;
+                    height: 100%;
+                    background: var(--image-pj) no-repeat center;
+                    background-size: 90px 50%;
+                }
+
+                .text {
+                    font-family: 'douyuFont';
+                    font-size: 28px;
+                    margin: 0px 15px;
+                    color: var(--vent-table-action-link);
+                }
+
+                .dw {
+                    font-size: 14px;
+                    color: #b3b8cc;
+                }
+            }
+        }
+
+        .text1 {
+            width: 90%;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            color: #b3b8cc;
+            font-weight: bold;
+
+            span {
+                display: inline-block;
+
+                &:nth-child(1) {
+                    width: 160px;
+                    text-align: right;
+                }
+
+                &:nth-child(2) {
+                    font-family: 'douyuFont';
+                    color: var(--vent-table-action-link);
+                    margin-left: 10px;
+                }
+            }
+
+            .value1 {
+                color: rgb(145, 230, 9) !important;
+            }
+
+            .value2 {
+                // color: rgb(0, 242, 255) !important;
+                color: #ffff35 !important;
+            }
+
+            .value3 {
+                // color: #ffff35 !important;
+                color: #ff0000 !important;
+            }
+
+            .value4 {
+                color: #ffbe69 !important;
+            }
+
+            .value5 {
+                color: #ff6f00 !important;
+            }
+
+            .value6 {
+                color: #ff0000 !important;
+            }
+        }
+
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/external-threec.vue

@@ -0,0 +1,354 @@
+<template>
+    <div class="external-threec">
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.yw }}</div>
+            <div v-if="monitorlistYw.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistYw" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+                        <div class="box-text-z">
+                            <div class="text-label">值</div>
+                            <div class="text-val">{{ item.val || '--' }}</div>
+                        </div>
+                        <div class="box-text-zt">
+                            <div class="text-label">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
+                                || '--' }}
+                            </div>
+                        </div>
+                        <div class="box-text-time">
+                            <div class="text-label">时间</div>
+                            <div class="text-val">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.wd }}</div>
+            <div v-if="monitorlistWd.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistWd" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+                        <div class="box-text-z">
+                            <div class="text-label">值</div>
+                            <div class="text-val">{{ `${item.val} ${item.dw}` || '--' }}</div>
+                        </div>
+                        <div class="box-text-zt">
+                            <div class="text-label">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val1' : 'text-val2'">{{ item.warnLevel_str
+                                || '--' }}
+                            </div>
+                        </div>
+                        <div class="box-text-time">
+                            <div class="text-label">时间</div>
+                            <div class="text-val">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="content-box">
+            <div class="container-title">{{ tabLists.co }}</div>
+            <div v-if="monitorlistHy.length == 0" class="container-content1">
+                <div class="noData-text">暂无数据</div>
+            </div>
+            <div v-else class="container-content">
+                <div class="container-content-box" v-for="(item, index) in monitorlistHy" :key="index">
+                    <div class="content-box-title">{{ item.strinstallpos || '--' }}</div>
+                    <div class="content-box-text">
+
+                        <div class="box-text-zt1">
+                            <div class="text-label-hy">状态</div>
+                            <div :class="item.warnLevel_str == '报警' ? 'text-val-hy1' : 'text-val-hy2'">{{
+                                item.warnLevel_str || '--'
+                                }}
+                            </div>
+                        </div>
+                        <div class="box-text-time1">
+                            <div class="text-label-hy">时间</div>
+                            <div class="text-val-hy">{{ item.readTime || '--' }}</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch } from 'vue'
+import { topOutList, tabLists, } from '../common.data';
+
+let props = defineProps({
+    cgqData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+})
+
+//烟雾传感器列表数据
+let monitorlistYw = ref<any[]>([]);
+//温度传感器列表数据
+let monitorlistWd = ref<any[]>([]);
+//火焰传感器列表数据
+let monitorlistHy = ref<any[]>([]);
+
+watch(() => props.cgqData, (newV, oldV) => {
+
+    if (newV.smoke.length != 0) {
+        monitorlistYw.value = newV.smoke.map((el) => {
+            el.smokeVal = el.readData.smokeval == '0' ? '无烟' : el.readData.smokeval == '1' ? '有烟' : el.readData.smokeval
+            return {
+                strinstallpos: el.strinstallpos,
+                val: el.smokeVal,
+                warnLevel_str: el.warnLevel_str,
+                readTime: el.readTime,
+            }
+        });
+    }
+    if (newV.temperature.length != 0) {
+        monitorlistWd.value = newV.temperature.map((el) => {
+            return {
+                strinstallpos: el.strinstallpos,
+                // val: el.readData.fireval,
+                val: el.readData.fireval,
+                dw: '℃',
+                warnLevel_str: el.warnLevel_str,
+                readTime: el.readTime,
+            }
+        });
+    }
+
+    if (newV.co.length != 0) {
+        monitorlistHy.value = newV.co.map((el) => {
+            return { ...el }
+        });
+    }
+
+}, { immediate: true })
+</script>
+
+<style lang="less" scoped>
+@import '/@/design/theme.less';
+
+@{theme-deepblue} {
+    .external-threec {
+        --image-bj1: url('/@/assets/images/themify/deepblue/fire/bj1.png');
+        --image-max: url('/@/assets/images/themify/deepblue/fire/max.svg');
+        --image-min: url('/@/assets/images/themify/deepblue/fire/min.svg');
+        --image-pj: url('/@/assets/images/themify/deepblue/fire/pj.svg');
+        --image-1: url('/@/assets/images/themify/deepblue/fire/1.png');
+        --image-contetn: url('/@/assets/images/themify/deepblue/fire/contetn.png');
+        --image-2: url('/@/assets/images/themify/deepblue/fire/2.png');
+    }
+}
+
+.external-threec {
+    --image-zwnr: url('/@/assets/images/fire/wy-zwnr.png');
+    --image-z: url('/@/assets/images/fire/wy-z.png');
+    --image-zt: url('/@/assets/images/fire/wy-zt.png');
+    --image-zt1: url('/@/assets/images/fire/wy-zt2.png');
+    --image-time: url('/@/assets/images/fire/wy-time.png');
+    --image-time1: url('/@/assets/images/fire/wy-time2.png');
+    --image-title: url('/@/assets/images/fire/wy-title.png');
+    --image-bj2: url('/@/assets/images/fire/wy-bj.png');
+    --image-max: url('/@/assets/images/fire/max.svg');
+    --image-min: url('/@/assets/images/fire/min.svg');
+    --image-pj: url('/@/assets/images/fire/pj.svg');
+    --image-1: url('/@/assets/images/fire/1.png');
+    --image-contetn: url('/@/assets/images/fire/contetn.png');
+    --image-2: url('/@/assets/images/fire/2.png');
+    --border-image-2: linear-gradient(to bottom, transparent, #024688, transparent);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .content-box {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        width: 32%;
+        height: 100%;
+        background: var(--image-bj2) no-repeat center;
+        background-size: 100% 100%;
+
+        &:nth-child(2) {
+            margin: 0px 20px;
+        }
+
+
+        .container-title {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            top: 4px;
+            color: #fff;
+        }
+
+        .container-content1 {
+            position: absolute;
+            width: 100%;
+            top: 38px;
+            height: calc(100% - 48px);
+            background: var(--image-zwnr) no-repeat center;
+            background-size: 100% 100%;
+            overflow-y: auto;
+
+            .noData-text {
+                position: absolute;
+                left: 50%;
+                transform: translate(-50%, 0);
+                bottom: 20px;
+                color: #fff;
+            }
+        }
+
+        .container-content {
+            position: absolute;
+            width: 100%;
+            top: 38px;
+            height: calc(100% - 48px);
+            overflow-y: auto;
+
+            .container-content-box {
+                position: relative;
+                width: 100%;
+                height: 80px;
+                margin-bottom: 10px;
+                background: var(--image-title) no-repeat center;
+                background-size: 100% 100%;
+            }
+
+            .content-box-title {
+                position: absolute;
+                left: 10px;
+                color: #fff;
+            }
+
+            .content-box-text {
+                display: flex;
+                justify-content: space-around;
+                align-items: center;
+                position: absolute;
+                top: 22px;
+                width: 100%;
+                height: 58px;
+
+                .box-text-z {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 205px;
+                    padding: 0px 30px;
+                    background: var(--image-z) no-repeat center;
+                    background-size: 100% 100%;
+
+                }
+
+                .box-text-zt {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 205px;
+                    padding: 0px 30px;
+                    background: var(--image-zt) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-zt1 {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    height: 50px;
+                    width: 258px;
+                    background: var(--image-zt1) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-time {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    height: 50px;
+                    width: 305px;
+                    padding: 0px 30px;
+                    background: var(--image-time) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .box-text-time1 {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    height: 50px;
+                    width: 298px;
+                    background: var(--image-time1) no-repeat center;
+                    background-size: 100% 100%;
+                }
+
+                .text-label {
+                    font-size: 12px;
+                    color: #fff
+                }
+
+                .text-label-hy {
+                    position: absolute;
+                    left: 50px;
+                    color: #fff;
+                    font-size: 12px
+                }
+
+                .text-val-hy {
+                    position: absolute;
+                    left: 115px;
+                    color: #fff;
+                    font-size: 12px;
+                }
+
+                .text-val-hy1 {
+                    position: absolute;
+                    left: 115px;
+                    color: #ff0000;
+                    font-size: 12px;
+                }
+
+                .text-val-hy2 {
+                    position: absolute;
+                    left: 115px;
+                    color: #91e609;
+                    font-size: 12px;
+                }
+
+                .text-val {
+                    font-size: 12px;
+                    color: #fff
+                }
+
+                .text-val1 {
+                    font-size: 12px;
+                    color: #ff0000
+                }
+
+                .text-val2 {
+                    font-size: 12px;
+                    color: #91e609
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -216,7 +216,6 @@ function btnClick(item, ind) {
     echartDataSg1.yData.length = 0;
     echartDataSg1.lengedData = type.value;
     echartDataSg1.lengedDataName = item.dw;
-
     const data = bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0];
     switch (type.value) {
         case 'O₂':
@@ -231,9 +230,9 @@ function btnClick(item, ind) {
                 time: echartDataSg1.xData,
                 data: [
                     // 氧气预测曲线
-                    data.avgParam?.avg_o2_value || 0,
-                    data.avgParam?.max_o2_value || 0,
-                    data.avgParam?.min_o2_value || 0,
+                    data.avgParam.avg_o2_value?  data.avgParam.avg_o2_value : 0,
+                    data.avgParam.max_o2_value ? data.avgParam.max_o2_value : 0,
+                    data.avgParam.min_o2_value ? data.avgParam.min_o2_value : 0,
                     // data.readData?.o2val,
                 ],
                 monitorData: echartDataSg1.yData,
@@ -368,9 +367,10 @@ function getmax() {
 watch(() => props.internalFireBotData, (newV, oldV) => {
     echartDataSg1.xData.length = 0;
     echartDataSg1.yData.length = 0;
-    if (newV.length != 0) {
+    if (newV.length != 0 && props.selectData) {
         bundletube.value = newV
-        let dataVal = props.selectData ? bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0] : bundletube.value[0];
+     
+        let dataVal =bundletube.value.filter((v) => v.strinstallpos == props.selectData)[0] 
         let times = dataVal.readTime.substring(0, dataVal.readTime.lastIndexOf(':')) || '--';
         let address = dataVal.strinstallpos || '--';
         bundleD.o2 = dataVal.readData.o2val || '--';