添加3D拓扑图页

修改3D分布图WIFI大小
开发传感器趋势图页面
修改安全大屏 和机械分厂安全大屏

src/App.vue

@@ -45,4 +45,17 @@ nav a {
 nav a.router-link-exact-active {
   color: #42b983;
 }
+body {
+
+/* --content:calc(100vh - var(--header)) */
+overflow: hidden !important;
+-ms-overflow-style: none;
+/* IE + Edge */
+scrollbar-width: none;
+/* Firefox */
+}
+
+::-webkit-scrollbar {
+display: none;
+}
 </style>

src/router/index.ts

@@ -160,6 +160,11 @@ const routes: Array<RouteRecordRaw> = [
         name: "FactoryView",
         component: () => import("../views/FactoryView/index.vue"),
       },
+      {
+        path: "/FactoryViewTopo",
+        name: "FactoryViewTopo",
+        component: () => import("../views/FactoryViewTopo/index.vue"),
+      },
       {
         path: "/FactoryView/:type",
         name: "FactoryViewEdit",
@@ -231,6 +236,17 @@ const routes: Array<RouteRecordRaw> = [
         name: "OffsiteDevList",
         component: () => import("../views/Temp/OffsiteDevList/index.vue"),
       },
+      {
+        path: "/TrendChart",
+        name: "TrendChart",
+        component: () => import("../views/TrendChart/index.vue"),
+      },
+
+
+
+
+
+
       //理论二级
       {
         path: "/Mechanics/:id",

src/store/moduleSocket.ts

@@ -341,7 +341,7 @@ export const useSocketStore = defineStore(Names.socket, {
             let pIndex = this.newVerticalNum.findIndex(item => item.type == val.type)
             let cIndex = null
             if (pIndex != -1) {
-                cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
+                cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.devId == val.data.devId)
             }
             if (cIndex != -1) {
                 if (val.data.val > this.newVerticalNum[pIndex].limit) {

src/store/moduleSocketjixie.ts

@@ -320,11 +320,13 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
         },
         //更新 新的安全检测数据
         changeNewVerticalNum(val) {
+            console.log(val);
+            
             //{"type":"Smoke","data":{"name":"精饰车间烟雾传感器","val":"100"}}
             let pIndex = this.newVerticalNum.findIndex(item => item.type == val.type)
             let cIndex = null
             if (pIndex != -1) {
-                cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.name == val.data.name)
+                cIndex = this.newVerticalNum[pIndex].value.findIndex(item => item.devId == val.data.devId)
             }
             if (cIndex != -1) {
                 if (val.data.val>this.newVerticalNum[pIndex].limit) {
@@ -343,6 +345,7 @@ export const useSocketStore = defineStore(Names.socketjixiefenchang,{
                     this.newVerticalNum[pIndex].value[cIndex].time = null
                 }
                 this.newVerticalNum[pIndex].value[cIndex].val = val.data.val
+                this.newVerticalNum[pIndex].value[cIndex].status = true
             }
         }
     }   

src/views/FactoryView/threeMap.vue

@@ -414,22 +414,22 @@ const init = () => {
 
     /*创建wifi */
     //机加
-    createWifi({ x: -46.96, y: 2, z: 156.57 })
+    createWifi({ x: -46.96, y: 3, z: 156.57 })
     //大件
-    createWifi({ x: 52.60, y: 2, z: 96.44 })
+    createWifi({ x: 52.60, y: 3, z: 96.44 })
-    createWifi({ x: 52.60, y: 2, z: 157.07 })
+    createWifi({ x: 52.60, y: 3, z: 157.07 })
     //精饰
-    createWifi({ x: 133.14, y: 2, z: 107.43 })
+    createWifi({ x: 133.14, y: 3, z: 107.43 })
-    createWifi({ x: 133.14, y: 2, z: 156.25 })
+    createWifi({ x: 133.14, y: 3, z: 156.25 })
     //焊接
-    createWifi({ x: 305.73, y: 2, z: 110.45 })
+    createWifi({ x: 305.73, y: 3, z: 110.45 })
-    createWifi({ x: 305.73, y: 2, z: 238.67 })
+    createWifi({ x: 305.73, y: 3, z: 238.67 })
     //服装
     createWifi({ x: -89.13, y: 4, z: -245.33 })
-    createWifi({ x: -132.07, y: 2, z: -245.33 })
+    createWifi({ x: -132.07, y: 3, z: -245.33 })
-    createWifi({ x: -222.31, y: 2, z: -245.33 })
+    createWifi({ x: -222.31, y: 3, z: -245.33 })
-    createWifi({ x: -119.3, y: 2, z: -114.15 })
+    createWifi({ x: -119.3, y: 3, z: -114.15 })
-    createWifi({ x: -176.45, y: 2, z: -114.40 })
+    createWifi({ x: -176.45, y: 3, z: -114.40 })
 
     //家纺 医防
     createWifi({ x: 140.83, y: 2, z: -197.34 })
@@ -771,7 +771,7 @@ function createWifi(position: positionType) {
     loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
         const mesh = gltf.scene.children[0];
 
-        const s = 0.3;
+        const s = 0.5;
         mesh.scale.set(s, s, s);
         mesh.position.set(position.x, position.y, position.z);
         // mesh.rotation.x = THREE.MathUtils.degToRad(270)

src/views/FactoryViewTopo/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div :class="$style['container']"  ref="Acontent">
+    <threeMap  ref="mapdomref"/>
+    <!-- <statusBar :width="size.oWidth" :height="size.oHeight" :iconList="store.iconList" :devList="store.devList"></statusBar> -->
+  </div>
+  
+</template>
+
+<script setup lang='ts'>
+import {ref,reactive,onMounted,onUnmounted} from 'vue'
+import { calcWH } from "@/components/ts/selfAdaption";
+import threeMap from './threeMap.vue';
+import { getSensorInfodata , deviceDistributeInMachineryFactorydata} from "@/http/AerialView";
+import { connectWebsocket, closeWebsocket } from "@/utils/websocket";
+import { useFactoryStore } from '@/store/module/Factory';
+
+import statusBar from './statusBar.vue';
+
+const store = useFactoryStore();
+let Acontent = ref();
+let mapdomref=ref()
+let size = reactive({
+  oWidth: 0,
+  oHeight: 0,
+});
+let timer = null
+
+function WH(div: HTMLElement) {
+  let a = calcWH(div.offsetHeight, div.offsetWidth, 1, 5, 0);
+  size.oWidth = a.oWidth;
+  size.oHeight = a.oHeight;
+  
+  if(mapdomref.value){
+    mapdomref.value.reset({oWidth:size.oWidth*5,oHeight:size.oHeight})
+  }
+ 
+}
+
+
+//获取传感器列表
+async function getSensorInfodatafun() {
+  let result: any = await getSensorInfodata();
+
+  if (result.code == 200) {
+    store.setDataList(result.data);
+   
+  }
+}
+//获取设备列表
+async function deviceDistributeInMachineryFactorydatafun() {
+  let result: any = await deviceDistributeInMachineryFactorydata();
+
+  if (result.code == 200) {
+    
+    store.setdevList(result.data);
+  }
+}
+
+function getWebsocket(val) {
+  // try{
+    let data = null
+    try{
+      data = JSON.parse(val);
+    }catch(e){
+      console.log(e);
+      
+      return
+    }
+ 
+  if (data.type == "SensorInfo") {
+    // console.log(data.msg,"传感器数据");
+    
+    store.updateSensorList(data.msg);
+    // store.changedevList(data.msg)
+
+
+    // store.changepaintingGas(data.msg);
+  }
+  // }catch(err){
+  //   console.log(err,"报错了大哥");
+
+  // }
+}
+
+
+// getSensorInfodatafun()
+// deviceDistributeInMachineryFactorydatafun()
+function errWebsocket(val) {
+  // console.log(val);
+}
+onMounted(()=>{
+  // // todo 屏幕适应
+  // windowDraw()
+  // calcRate()
+  let contentBox = Acontent.value;
+  // let Timedombox=Timedom.value
+  window.document.title = "传感器分布图";
+  WH(contentBox);
+  window.addEventListener("resize", () => {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(() => {
+      WH(contentBox);
+    }, 1000);
+  });
+
+  // connectWebsocket(null, null, getWebsocket, errWebsocket);
+})
+onUnmounted(()=>{// todo 屏幕适应
+  // unWindowDraw()
+  clearTimeout(timer)
+  closeWebsocket();
+})
+
+</script>
+<style module>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #20aec5;
+  background-color: #100c2a;
+}
+</style>
+<style  scoped></style>
+<style>
+body {
+  
+  /* --content:calc(100vh - var(--header)) */
+  overflow: hidden !important;
+  -ms-overflow-style:none; /* IE + Edge */
+  scrollbar-width: none; /* Firefox */
+}
+::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/FactoryViewTopo/statusBar.vue

@@ -0,0 +1,188 @@
+<!--
+ * @FilePath: \screenFront\src\views\FactoryView\statusBar.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-04-04 08:11:07
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+   <div ref="statusbarref" :key="numkey">
+      <div class="tip-box-border" :class="{show}" @click="rtract" :style="{width: mapSize.width+'px',height:mapSize.height+'px'}" >
+        <!-- <div class="DirectionalSign">
+          
+        </div> -->
+        <div class="iconTip">
+          <ul>
+            <li v-for="item in prop.iconList" :key="item.id" >
+              <i :class="'iconfont ' + item.name + ' icon-logo'"></i
+              >{{ "&nbsp&nbsp&nbsp" + item.value }}
+              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
+            </li>
+            <li v-for="item in prop.devList" :key="item.id" >
+              <i :class="'iconfont ' + item.name + ' icon-logo SSCBar'"></i
+              >{{ "&nbsp&nbsp&nbsp" + item.value }}
+              <div>{{ `&nbsp${item.counts}/${item.allnum}` }}</div>
+            </li>
+            <li>
+              <i class="iconfont icon-WIFI icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              WIFI
+              <div> &nbsp; 16/16</div>
+            </li>
+            <li>
+              <i class="iconfont icon-guangmao icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              光猫
+              <div> &nbsp; 9/9</div>
+            </li>
+            <li>
+              <i class="iconfont icon-zhongduananquanjierukongzhiqi icon-logo"></i> &nbsp;&nbsp;&nbsp;
+              AC
+              <div> &nbsp; 3/3</div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { number } from "echarts/core";
+import {reactive, ref, watch,defineProps} from "vue"
+const prop = defineProps({
+  iconList: {
+    type: Object,
+    default: {},
+  },
+  devList: {
+    type: Object,
+    default: {},
+  },  
+  width: {
+    type: Number,
+    default: 0,
+  },
+  height: {
+    type: Number,
+    default: 0,
+  },
+});
+
+
+const afterDisplay = ref("none")
+const beforeDisplay = ref("block")
+const show = ref(true)
+let numkey=ref(0)
+let statusbarref=ref()
+let mapSize = reactive({
+  width: 0,
+  height: 0,
+});
+
+
+function rtract() {
+  show.value = !show.value;
+  if (show.value) {
+    afterDisplay.value = "none";
+    beforeDisplay.value = "block";
+  } else {
+    afterDisplay.value = "block";
+    beforeDisplay.value = "none";
+  }
+}
+watch(
+  () => prop,
+  (newVal, oldVal) => {
+    //监听父组件宽高变化，随时重置本组件尺寸
+    reset(newVal);
+    
+  },
+  { immediate: true, deep: true, flush: "post" }
+);
+function reset(val: any) {
+  //宽高为0时跳出该方法
+
+  if (!val.width && !val.height) return;
+  mapSize.width=val.width
+  mapSize.height=val.height
+  numkey.value++
+//   statusbarref.value.style.width=val.width
+//   statusbarref.value.style.height=val.height
+  //重置盒子尺寸
+}
+</script>
+
+<style scoped>
+@import url("@/assets/css/iconfont.css");
+@import url("@/assets/css/newicon/iconfont.css");
+.tip-box-border{
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  height: 97%;
+  width: 99%;
+  padding-top: 100px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  z-index: 999;
+  background-color:rgba(0,0,0,0.5);
+  transition: transform 0.5s;
+} 
+.show {
+  transform: translateX(-90%);
+}
+.tip-box-border::after{
+  content: "\e84f";
+  position: absolute;
+  top: 50%;
+  right: 0;
+  font-size: 24px;
+  font-family: 'iconfont' !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: v-bind(afterDisplay);
+  color: #fff;
+  box-sizing: border-box;
+}
+.tip-box-border::before{
+  content: '\e84e';
+  /* content: "\e84e"; */
+  position: absolute;
+  top: 50%;
+  right: 0;
+  font-size: 24px;
+  font-family: 'iconfont' !important;
+  font-style: normal;
+  display: v-bind(beforeDisplay);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #fff;
+  box-sizing: border-box;
+}
+.DirectionalSign{
+  width: 60%;
+  height: 20%;
+  background-image: url(@/assets/img/AerialView/direction.png);
+  background-size: 100% 100%;
+}
+.iconTip{
+  width: 100%;
+  height: 80%;
+  }
+.iconTip>ul>li{
+  padding-left: 10%;
+  margin-top: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1.5rem;
+  color: #fff;
+}
+.iconTip>ul>li>i{
+  font-size: 1.5rem;
+}
+</style>

src/views/TrendChart/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div :class="$style['container']">
+    <div class="header">
+      <div class="title">
+        <header2 ref="headerref" :width="'100%'" :height="'100px'" :title="'传感器24H趋势图'" :titleTip="[]" :typeFun="['time']"
+          :alarmType="[]"></header2>
+      </div>
+    </div>
+    <div class="content">
+      <lineChart v-for="(calc, index) in calcArr" :style="{width:width+'px',height:height+'px','min-width':'calc(25% - 20px)'}" :calc="calc">
+      </lineChart>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, reactive, onMounted, onUnmounted } from "vue"
+import Header2 from "@/components/headerBox/header2.vue"
+import lineChart from "./lineChart.vue";
+type calcType = {
+  name: string,
+  type: string,
+  max: number,
+  min: number,
+  avg: number,
+  data: any[]
+}
+let calcArr = ref<calcType[]>()
+let width = ref(1500)
+let height = ref(700)
+function ajax() {
+  setTimeout(() => {
+    let data = []
+    let length = 2
+    let element = {
+        name: '甲醛',
+        type: 'CH2O',
+        max: 0.1,
+        min: 0.01,
+        avg: 0.05,
+        data: [
+          ['2021-06-01 00:00:00', 10],
+          ['2021-06-01 00:00:10', 20],
+          ['2021-06-01 00:00:40', 50],
+          ['2021-06-01 00:01:20', 90],
+          ['2021-06-01 00:01:30', 100],
+          ['2021-06-01 00:01:40', 110],
+          ['2021-06-01 00:01:50', 120],
+          ['2021-06-01 00:02:30', 160],
+          ['2021-06-01 00:02:40', 170],
+          ['2021-06-01 00:03:10', 200],
+          ['2021-06-01 00:03:20', 210],
+          ['2021-06-01 00:03:30', 220],
+          ['2021-06-01 00:04:20', 270]
+        ]
+      }
+    for (let index = 0; index < length; index++) {
+      data.push(element)
+      
+    }
+    calcArr.value = data
+    if (data.length<=4) {
+      width.value = 1900 / data.length-(data.length-1)*20;
+    } else if (data.length>4&&data.length<=8) {
+      width.value = width.value / 4-3*20;
+      height.value = 950 / 2-40;
+    } else {
+      width.value = width.value / 4-3*20;
+      height.value = 950 / 3-60;
+    }
+  })
+}
+onMounted(() => {
+  ajax()
+})
+</script>
+<style module>
+.container {
+  height: 1080px;
+  width: 1920px;
+  color: #20aec5;
+  background-color: #100c2a;
+  box-sizing: border-box;
+}
+</style>
+<style scoped>
+.content {
+  height: 980px;
+  width: 1920px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  padding: 5px;
+}
+</style>
+

src/views/TrendChart/lineChart.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="container">
+        <div class="chart" ref="chart"></div>
+        <ul>
+            <li><text class="key">最大值</text><text>{{ calc.max }}</text></li>
+            <li><text class="key">最小值</text><text>{{ calc.min }}</text></li>
+            <li><text class="key">平均值</text><text>{{ calc.avg }}</text></li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, onUpdated, getCurrentInstance, watch } from "vue"
+const prop = defineProps<{
+    calc: {
+        name: string,
+        type: string,
+        max: number,
+        min: number,
+        avg: number,
+        data: number[]
+    }
+}>()
+const { proxy } = getCurrentInstance() as any
+const chart = ref()
+let myChart = null
+let data = prop.calc.data
+function init() {
+    myChart = proxy.$echarts.init(chart.value, 'dark');
+    const option = {
+        title: {
+            text: prop.calc.name,
+            top: "5%",
+            left: "5%"
+        },
+        tooltip: {
+            trigger: 'axis',
+        },
+        grid: {
+            top: "15%",
+            left: "5%",
+            right: "5%",
+            bottom: "5%",
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'time',
+            splitLine: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: [
+            {
+                name: prop.calc.type,
+                type: 'line',
+                showSymbol: false,
+                data: data,
+                smooth: true,
+            }
+        ]
+    };
+    myChart.setOption(option);
+}
+
+watch(() => prop.calc.data, (newVal) => {
+    data = newVal
+    myChart.setOption({
+        series: [
+            {
+                data: data
+            }
+        ]
+    })
+})
+
+onMounted(() => {
+    init()
+})
+
+</script>
+
+<style scoped>
+.container {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    font-size: 16px;
+    color: #fff;
+    box-shadow: rgb(2, 106, 181) 0px 8px 8px;
+}
+.container:hover {
+    box-shadow: rgb(2, 106, 181) 0px 8px 16px;
+}
+
+.chart {
+    height: calc(100% - 60px);
+    width: 100%;
+}
+
+ul {
+    height: 60px;
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+ul li {
+    height: 100%;
+    width: 33%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+ul>li:nth-child(2) {
+
+    border-right: 1px solid #fff;
+    border-left: 1px solid #fff;
+}
+
+.key {
+    color: #ff6e40;
+}
+</style>

src/views/realtimeSecurity/index.vue

@@ -77,7 +77,7 @@ function getWebsocket(val) {
   //精饰车间燃气监测
   if (data.type == "paintingGas") {
     store.changepaintingGas(data.msg);
-    let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
     
   }
@@ -85,7 +85,7 @@ function getWebsocket(val) {
   if (data.type == "boilerGas") {
     // store.changePM(data.msg)
     store.changeboilerGas(data.msg.boilerGas);
-    let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
     
   }
@@ -93,15 +93,15 @@ function getWebsocket(val) {
   if (data.type == "canteenGas") {
     // store.changeHumiture(data.msg)
     store.changecanteenGas(data.msg.canteenGas);
-    let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
   }
   //甲醛TVOC
   if (data.type == "TVOC_CH2O") {    
     store.changeTVOC_CH2O(data.msg);
-    let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value}
+    let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
     store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
-    let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value}
+    let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
     store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
     
   }
@@ -109,7 +109,7 @@ function getWebsocket(val) {
   if (data.type == "flame") {
     // store.changeHumiture(data.msg)
     store.changeflame(data.msg.flame);
-    let verticalData = {name:data.msg.devName,val:data.msg.flame.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'FIRE',data:verticalData})
     
     
@@ -119,7 +119,7 @@ function getWebsocket(val) {
     // store.changeHumiture(data.msg)
     // store.changepaintingGas(data.msg)
     store.changesmoke(data.msg.smoke);
-    let verticalData = {name:data.msg.devName,val:data.msg.smoke.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Smoke',data:verticalData})
     // console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
   }

src/views/realtimeSecurityJixiefenchang/index.vue

@@ -77,7 +77,7 @@ function getWebsocket(val) {
   //精饰车间燃气监测
   if (data.type == "paintingGas") {
     store.changepaintingGas(data.msg);
-    let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.paintingGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
     
   }
@@ -85,7 +85,7 @@ function getWebsocket(val) {
   if (data.type == "boilerGas") {
     // store.changePM(data.msg)
     store.changeboilerGas(data.msg.boilerGas);
-    let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.boilerGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
     
   }
@@ -93,15 +93,17 @@ function getWebsocket(val) {
   if (data.type == "canteenGas") {
     // store.changeHumiture(data.msg)
     store.changecanteenGas(data.msg.canteenGas);
-    let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.canteenGas.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Methane',data:verticalData})
   }
   //甲醛TVOC
   if (data.type == "TVOC_CH2O") {
+    console.log(data.msg,"TVOC_CH2O");
+    
     store.changeTVOC_CH2O(data.msg);
-    let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value}
+    let verticalData_TVOC = {name:data.msg.TVOC.name,val:data.msg.TVOC.value,devId:data.msg.TVOC.devId}
     store.changeNewVerticalNum({type:'TVOC',data:verticalData_TVOC})
-    let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value}
+    let verticalData_CH2O = {name:data.msg.CH2O.name,val:data.msg.CH2O.value,devId:data.msg.CH2O.devId}
     store.changeNewVerticalNum({type:'CH2O',data:verticalData_CH2O})
     
   }
@@ -109,7 +111,7 @@ function getWebsocket(val) {
   if (data.type == "flame") {
     // store.changeHumiture(data.msg)
     store.changeflame(data.msg.flame);
-    let verticalData = {name:data.msg.devName,val:data.msg.flame.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.flame.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'FIRE',data:verticalData})
     
     
@@ -119,7 +121,7 @@ function getWebsocket(val) {
     // store.changeHumiture(data.msg)
     // store.changepaintingGas(data.msg)
     store.changesmoke(data.msg.smoke);
-    let verticalData = {name:data.msg.devName,val:data.msg.smoke.value}
+    let verticalData = {name:data.msg.devName,val:data.msg.smoke.value,devId:data.msg.devId}
     store.changeNewVerticalNum({type:'Smoke',data:verticalData})
     // console.log(JSON.stringify({type:'Smoke',data:verticalData}),"烟雾传感器");
   }