From 8410121fc91baaf1995131f161a7ff357b09610f Mon Sep 17 00:00:00 2001
From: hzz <hzz>
Date: Tue, 6 Jun 2023 18:07:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A03D=E6=8B=93=E6=89=91=E5=9B=BE?=
 =?UTF-8?q?=E9=A1=B5=20=E4=BF=AE=E6=94=B93D=E5=88=86=E5=B8=83=E5=9B=BEWIFI?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=20=E5=BC=80=E5=8F=91=E4=BC=A0=E6=84=9F?=
 =?UTF-8?q?=E5=99=A8=E8=B6=8B=E5=8A=BF=E5=9B=BE=E9=A1=B5=E9=9D=A2=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=89=E5=85=A8=E5=A4=A7=E5=B1=8F=20?=
 =?UTF-8?q?=E5=92=8C=E6=9C=BA=E6=A2=B0=E5=88=86=E5=8E=82=E5=AE=89=E5=85=A8?=
 =?UTF-8?q?=E5=A4=A7=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   13 +
 src/router/index.ts                           |   16 +
 src/store/moduleSocket.ts                     |    2 +-
 src/store/moduleSocketjixie.ts                |    5 +-
 src/views/FactoryView/threeMap.vue            |   24 +-
 src/views/FactoryViewTopo/index.vue           |  138 ++
 src/views/FactoryViewTopo/statusBar.vue       |  188 +++
 src/views/FactoryViewTopo/threeMap.vue        | 1264 +++++++++++++++++
 src/views/TrendChart/index.vue                |   98 ++
 src/views/TrendChart/lineChart.vue            |  128 ++
 src/views/realtimeSecurity/index.vue          |   14 +-
 .../realtimeSecurityJixiefenchang/index.vue   |   18 +-
 12 files changed, 1879 insertions(+), 29 deletions(-)
 create mode 100644 src/views/FactoryViewTopo/index.vue
 create mode 100644 src/views/FactoryViewTopo/statusBar.vue
 create mode 100644 src/views/FactoryViewTopo/threeMap.vue
 create mode 100644 src/views/TrendChart/index.vue
 create mode 100644 src/views/TrendChart/lineChart.vue

diff --git a/src/App.vue b/src/App.vue
index b75b8ad..23529b3 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index ee35d88..bec05ce 100644
--- a/src/router/index.ts
+++ b/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",
diff --git a/src/store/moduleSocket.ts b/src/store/moduleSocket.ts
index 1a9d5c6..9e83ebe 100644
--- a/src/store/moduleSocket.ts
+++ b/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) {
diff --git a/src/store/moduleSocketjixie.ts b/src/store/moduleSocketjixie.ts
index a16b67e..f5772d7 100644
--- a/src/store/moduleSocketjixie.ts
+++ b/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
             }
         }
     }   
diff --git a/src/views/FactoryView/threeMap.vue b/src/views/FactoryView/threeMap.vue
index b3327af..c33f7f5 100644
--- a/src/views/FactoryView/threeMap.vue
+++ b/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: 2, z: 157.07 })
+    createWifi({ x: 52.60, y: 3, z: 96.44 })
+    createWifi({ x: 52.60, y: 3, z: 157.07 })
     //精饰
-    createWifi({ x: 133.14, y: 2, z: 107.43 })
-    createWifi({ x: 133.14, y: 2, z: 156.25 })
+    createWifi({ x: 133.14, y: 3, z: 107.43 })
+    createWifi({ x: 133.14, y: 3, z: 156.25 })
     //焊接
-    createWifi({ x: 305.73, y: 2, z: 110.45 })
-    createWifi({ x: 305.73, y: 2, z: 238.67 })
+    createWifi({ x: 305.73, y: 3, z: 110.45 })
+    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: -222.31, y: 2, z: -245.33 })
-    createWifi({ x: -119.3, y: 2, z: -114.15 })
-    createWifi({ x: -176.45, y: 2, z: -114.40 })
+    createWifi({ x: -132.07, y: 3, z: -245.33 })
+    createWifi({ x: -222.31, y: 3, z: -245.33 })
+    createWifi({ x: -119.3, y: 3, z: -114.15 })
+    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)
diff --git a/src/views/FactoryViewTopo/index.vue b/src/views/FactoryViewTopo/index.vue
new file mode 100644
index 0000000..df70c1f
--- /dev/null
+++ b/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>
diff --git a/src/views/FactoryViewTopo/statusBar.vue b/src/views/FactoryViewTopo/statusBar.vue
new file mode 100644
index 0000000..0216a91
--- /dev/null
+++ b/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>
diff --git a/src/views/FactoryViewTopo/threeMap.vue b/src/views/FactoryViewTopo/threeMap.vue
new file mode 100644
index 0000000..23577f9
--- /dev/null
+++ b/src/views/FactoryViewTopo/threeMap.vue
@@ -0,0 +1,1264 @@
+<template>
+    <div class="container" ref="container"></div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, defineExpose } from 'vue';
+import * as THREE from 'three';
+import * as TWEEN from '@tweenjs/tween.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+import * as SceneUtils from 'three/examples/jsm/utils/SceneUtils.js';
+import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { DragControls } from "@/utils/DragControls";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { Line2 } from 'three/examples/jsm/lines/Line2'
+import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry'
+import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial'
+import { useFactoryStore } from "@/store/module/Factory"
+import { useRouter } from 'vue-router';
+import { updateCoordinateByPoint } from "@/http/AerialView/index"
+import { ElNotification } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router';
+let { t } = useI18n();
+let route = useRoute();
+let edit = false;
+let type = route.params?.type;
+if (type == 'edit') {
+    edit = true;
+}
+const store = useFactoryStore();
+const router = useRouter();
+
+const container = ref();
+let iw = 1920;
+let ih = 1080;
+const boxObjects: any = ref([]);
+let scene: any = null; //场景
+let camera: any = null; //相机
+let canvas: any = null; //用作渲染的canvas
+let renderer: any = null; //渲染器
+let controls: any = null; //控制器
+let labelRenderer: any = null; //2D渲染器
+let labelControls: any = null; //2D控制器
+const group = new THREE.Group();//用于将建筑物的各个零件组合起来
+let timer: any = null;
+let dragControls: any = null;
+let cssRender: any = null;
+let saveTipDom: any = null;
+const requires = {
+    '粉尘': require('@/assets/img/Factory/fenchen.jpg'),
+    '烟雾': require('@/assets/img/Factory/yanwu.jpg'),
+    'TVOC/甲醛': require('@/assets/img/Factory/tvoc.jpg'),
+    '噪音': require('@/assets/img/Factory/shengyin.jpg'),
+    '火花': require('@/assets/img/Factory/huohua.jpg'),
+    '电力': require('@/assets/img/Factory/dianlu.jpg'),
+    '气压': require('@/assets/img/Factory/qiya.jpg'),
+    '水压': require('@/assets/img/Factory/shuiya.jpg'),
+    '温湿度': require('@/assets/img/Factory/wendu.jpg'),
+    '网关': require('@/assets/img/Factory/wangguan.jpg'),
+    '燃气': require('@/assets/img/Factory/ranqi.jpg'),
+    '设备': require('@/assets/img/Factory/shebei.jpg'),
+    'ny': require("@/assets/img/Factory/ny.jpg"),
+    'wood': require("@/assets/img/Factory/wood4.jpg"),
+    // 'wall1': require("@/assets/img/Factory/floor1.jpeg"),
+    'wall1': require("@/assets/img/Factory/wall1.jpg"),
+    'tile': require("@/assets/img/Factory/tile.jpg"),
+    'door': require("@/assets/img/Factory/door.jpg"),
+    'sky': require("@/assets/img/Factory/sky.jpg"),
+    'titleFloor': require("@/assets/img/Factory/screen_title.png"),
+    'guangmao': require("@/assets/img/Factory/guangmao.jpg"),
+    'ac': require("@/assets/img/Factory/ac.jpg"),
+}
+
+const workerShopRoute = {
+    '大件车间地板': '/MechanicalViewDajian',
+    '焊接车间地板': '/MechanicalViewHanjie',
+    '机加车间地板': '/MechanicalViewJijia',
+    '精加车间地板': '/MechanicalViewJingjia',
+    '精饰车间地板': '/MechanicalViewJingshi',
+}
+let getSensorDataTimer = null;
+let getDevDataTimer = null;
+
+
+const normal_size = { baseWidth: 10, baseHeght: 10, baseLength: 10 };//正常大小
+const small_size = { baseWidth: 8, baseHeght: 8, baseLength: 8 };//缩小的大小
+
+const coordinate = {}
+/**
+ * @函数功能:
+ * @param {*} val 重置画布宽高值
+ * @出口参数:
+ * @函数备注:
+ */
+function reset(val: any) {
+    //宽高为0时跳出该方法
+
+    if (!val.oWidth && !val.oHeight) return;
+    // mapSize.width=val.width
+    // mapSize.height=val.height
+    // 更新修改相机比例
+    container.value.style.width = val.oWidth;
+    container.value.style.height = val.oHeight;
+    camera.aspect = val.oWidth / val.oHeight;
+    // 更新摄像机的投影矩阵
+    camera.updateProjectionMatrix();
+
+    //处理返回操作时dom层数变多问题
+    if (document.getElementsByClassName("cssrender").length > 1) {
+        document.getElementsByClassName("cssrender")[1].remove();
+    }
+    // 更新画布大小
+    renderer.setSize(
+        val.oWidth, // 宽度
+        val.oHeight // 高度
+    );
+    labelRenderer.setSize(
+        val.oWidth, // 宽度
+        val.oHeight // 高度
+    );
+    // 更新画布像素比
+    renderer.setPixelRatio(container.value.devicePixelRatio);
+
+    //重置盒子尺寸
+}
+defineExpose({
+    reset,
+});
+const init = () => {
+    canvas = container.value;
+    //创建场景
+    scene = new THREE.Scene();
+    //创建一个透视相机
+    camera = new THREE.PerspectiveCamera(45, iw / ih, 1, 3000);
+
+    // 创建渲染器
+    renderer = new THREE.WebGLRenderer();
+    // 设置渲染器的初始颜色
+    renderer.setClearColor(new THREE.Color(0xeeeeee));
+    // 设置输出canvas画面的大小
+    renderer.setSize(iw, ih)
+    // 设置渲染物体阴影
+    renderer.shadowMap.enabled = true;
+
+    //设置2D渲染器
+    labelRenderer = new CSS2DRenderer();
+    labelRenderer.setSize(iw, ih);
+    labelRenderer.domElement.style.position = 'absolute';
+    labelRenderer.domElement.style.top = 0;
+    labelRenderer.domElement.style.outline = "none";
+    canvas.appendChild(labelRenderer.domElement);
+
+
+
+
+    //创建环境光
+    const hjLight = new THREE.AmbientLight(0xffffff);
+    //添加环境光至场景
+    scene.add(hjLight);
+    // 定位相机，并且指向场景中心
+    camera.position.x = 0;
+    camera.position.y = 880; //650
+    camera.position.z = 0; //600
+
+
+
+    camera.lookAt(scene.position)
+
+
+    renderer.render(scene, camera)
+    // 将渲染器输出添加html元素中
+    canvas.appendChild(renderer.domElement);
+    //添加房子的group到场景中
+    scene.add(group);
+
+    // 创建controls对象;
+    controls = new OrbitControls(camera, labelRenderer.domElement)
+    // labelControls = new OrbitControls(camera, labelRenderer.domElement)
+
+    // 监听控制器的鼠标事件，执行渲染内容
+    controls.addEventListener('change', () => {
+        clearInterval(timer)
+        renderer.render(scene, camera)
+        labelRenderer.render(scene, camera)
+    })
+    /**-------------------------------结束后注释------------------------------------------------- */
+    controls.mouseButtons = {
+        LEFT: THREE.MOUSE.PAN,
+        MIDDLE: THREE.MOUSE.DOLLY,
+        // RIGHT: 
+    };
+
+
+
+
+
+
+    //创建地面
+    createGround()
+    //创建仓库1
+    createHouse(`${t('messages.store')}1`, { baseWidth: 262, baseHeght: 30, baseLength: 53 }, { x: -322, y: 0, z: -304 })
+    //创建仓库2
+    createHouse(`${t('messages.store')}2`, { baseWidth: 262, baseHeght: 30, baseLength: 53 }, { x: 183, y: 0, z: -304 })
+    //创建综合楼 baseWidth: 114, baseHeght: 50, baseLength: 353  x: -397, y: 0, z: 11
+    createHouse(t('messages.SynthesizeRoom'), { baseWidth: 114, baseHeght: 50, baseLength: 353 }, { x: -397, y: 0, z: -11 })
+    /**
+     * 创建综合楼里的墙
+     */
+    createUseWall('综合楼的墙1', { baseWidth: 1, baseHeght: 50, baseLength: 159 }, { x: -413, y: 0, z: -26.5 })
+    createUseWall('综合楼的墙2', { baseWidth: 41, baseHeght: 50, baseLength: 1 }, { x: -413, y: 0, z: -26.5 })
+
+    createUseWall('综合楼的墙3', { baseWidth: 1, baseHeght: 50, baseLength: 159 }, { x: -382, y: 0, z: -26.5 })
+    createUseWall('综合楼的墙4', { baseWidth: 41, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: -26.5 })
+
+    createUseWall('综合楼的墙3', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 30 })
+    createUseWall('综合楼的墙4', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: 30 })
+    createUseWall('综合楼的墙5', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 87.5 })
+    createUseWall('综合楼的墙6', { baseWidth: 45, baseHeght: 50, baseLength: 1 }, { x: -341, y: 0, z: 79.5 })
+
+    createUseWall('综合楼的墙7', { baseWidth: 1, baseHeght: 50, baseLength: 57 }, { x: -410, y: 0, z: 87 })
+    createUseWall('综合楼的墙8', { baseWidth: 1, baseHeght: 50, baseLength: 69 }, { x: -385, y: 0, z: 99 })
+    createUseWall('综合楼的墙9', { baseWidth: 1, baseHeght: 50, baseLength: 63 }, { x: -435, y: 0, z: 150 })
+    createUseWall('综合楼的墙10', { baseWidth: 1, baseHeght: 50, baseLength: 63 }, { x: -435, y: 0, z: 150 })
+    createUseWall('综合楼的墙11', { baseWidth: 1, baseHeght: 50, baseLength: 40 }, { x: -421, y: 0, z: 138.5 })
+    createUseWall('综合楼的墙12', { baseWidth: 36, baseHeght: 50, baseLength: 1 }, { x: -385, y: 0, z: 99.5 })
+    createUseWall('综合楼的墙13', { baseWidth: 36, baseHeght: 50, baseLength: 1 }, { x: -385, y: 0, z: 139.5 })
+    createUseWall('综合楼的墙14', { baseWidth: 44, baseHeght: 50, baseLength: 1 }, { x: -410, y: 0, z: 150.5 })
+
+    createUseWall('综合楼的墙15', { baseWidth: 1, baseHeght: 50, baseLength: 16 }, { x: -409, y: 0, z: 165.5 })
+    createUseWall('综合楼的墙16', { baseWidth: 1, baseHeght: 50, baseLength: 27 }, { x: -384, y: 0, z: 165.5 })
+    //汽车部地板
+    const mesh_qcb = createFloor(t('messages.ExternalWork'), 42, 160, { x: -362, y: 0, z: -105 })
+
+    createLableObj(mesh_qcb, t('messages.ExternalWork'), { x: 0, y: 0, z: 0 })
+
+    //创建产学研 baseWidth: 21, baseHeght: 25, baseLength: 32  x: -495, y: 0, z: -102.5
+    createHouse(t('messages.WaterRoom'), { baseWidth: 21, baseHeght: 25, baseLength: 32 }, { x: -495, y: 0, z: -102.5 })
+    createHouse(t('messages.SecurityRoom'), { baseWidth: 21, baseHeght: 25, baseLength: 32 }, { x: -495, y: 0, z: -70.5 })
+
+
+    //创建盈瑞安办公区 baseWidth: 90, baseHeght: 30, baseLength: 159  x: -399, y: 0, z: 245
+    createHouse(t('messages.productStudyDevelopment'), { baseWidth: 90, baseHeght: 30, baseLength: 159 }, { x: -399, y: 0, z: 245 })
+    /**盈瑞安办公区里的墙 */
+    createUseWall('盈瑞安办公区的墙1', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 195.5 })
+    createUseWall('盈瑞安办公区的墙2', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 246.5 })
+    createUseWall('盈瑞安办公区的墙3', { baseWidth: 90, baseHeght: 30, baseLength: 1 }, { x: -354.5, y: 0, z: 271.5 })
+
+
+
+    //创建车间1 baseWidth: 573, baseHeght: 30, baseLength: 238  x: -17.5, y: 0, z: -137.5
+    createHouse('车间1', { baseWidth: 620, baseHeght: 30, baseLength: 238 }, { x: 6, y: 0, z: -137.5 }, false)
+    /**车间一内的墙 */
+    createUseWall('车间1的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: -228, y: 0, z: -18.5 })
+    createUseWall('车间1的墙2', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: -37, y: 0, z: -18.5 })
+    createUseWall('车间1的墙3', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: 37, y: 0, z: -18.5 })
+    createUseWall('车间1的墙4', { baseWidth: 1, baseHeght: 30, baseLength: 238 }, { x: 73, y: 0, z: -18.5 })
+    createUseWall('车间1的墙5', { baseWidth: 76, baseHeght: 30, baseLength: 1 }, { x: -228, y: 0, z: -95.5 })
+    createUseWall('车间1的墙5', { baseWidth: 192, baseHeght: 30, baseLength: 1 }, { x: -37, y: 0, z: -194.5 })
+    createUseWall('车间1的墙5', { baseWidth: 40, baseHeght: 30, baseLength: 1 }, { x: 2, y: 0, z: -105.5 })
+    createUseWall('车间1的墙5', { baseWidth: 40, baseHeght: 30, baseLength: 1 }, { x: 2, y: 0, z: -62.5 })
+
+
+    //机械设计及行政办公区
+    const mesh_hr = createFloor(t('messages.machineDesign'), 45, 120, { x: -431, y: 0, z: 102 })
+    createLableObj(mesh_hr, t('messages.machineDesign'), { x: 0, y: 60, z: 0 })
+
+    const mesh_serve = createFloor('', 45, 48, { x: -364.5, y: 0, z: 58 })
+    createLableObj(mesh_serve, t('messages.服务器机房'), { x: 0, y: 60, z: 0 })
+
+
+
+    //电控车间
+    const mesh_dkcj = createFloor(t('messages.ControllerRoom'), 76.5, 237, { x: -266, y: 0, z: -138.5 })
+    createLableObj(mesh_dkcj, t('messages.ControllerRoom'), { x: 0, y: 60, z: 0 })
+
+    //服装军团
+    const mesh_fzjt = createFloor(t('messages.FuZhuangLegion'), 192, 236.5, { x: -133, y: 0, z: -138 })
+    createLableObj(mesh_fzjt, t('messages.FuZhuangLegion'), { x: 0, y: 60, z: 0 })
+    //配套车间
+    const mesh_ptcj = createFloor(t('messages.BigPeiTao'), 110, 236.5, { x: 18.5, y: 0, z: -138 })
+    createLableObj(mesh_ptcj, t('messages.BigPeiTao'), { x: 0, y: 60, z: 0 })
+    //家纺军团
+    const mesh_jfjt = createFloor(t('messages.JiaFangLegion'), 247, 118, { x: 192, y: 0, z: -197 })
+    createLableObj(mesh_jfjt, t('messages.JiaFangLegion'), { x: 0, y: 60, z: 0 })
+    //医防军团
+    const mesh_yfjt = createFloor(t('messages.YiFangLegion'), 247, 119, { x: 192, y: 0, z: -78 })
+    createLableObj(mesh_yfjt, `${t('messages.twoLou')}-${t('messages.YiFangLegion')}`, { x: 0, y: 60, z: 0 })
+
+
+
+
+    createHouse('配套车间办公室', { baseWidth: 26, baseHeght: 25, baseLength: 54 }, { x: 24, y: 0, z: -80.5 }, false)
+
+
+
+
+
+    //创建车间2-1 baseWidth: 147, baseHeght: 30, baseLength: 263  x: -230.5, y: 0, z: 176
+    createHouse('车间2-1', { baseWidth: 147, baseHeght: 30, baseLength: 263 }, { x: -230.5, y: 0, z: 176 }, false)
+
+    createUseWall('车间2-1的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 227 }, { x: -237, y: 0, z: 269.5 })
+
+    createUseWall('车间2-1的墙2', { baseWidth: 32, baseHeght: 30, baseLength: 1 }, { x: -207, y: 0, z: 147.5 })
+    createUseWall('车间2-1的墙3', { baseWidth: 27, baseHeght: 30, baseLength: 1 }, { x: -158, y: 0, z: 147.5 })
+
+    createUseWall('车间2-1的墙4', { baseWidth: 32, baseHeght: 30, baseLength: 1 }, { x: -207, y: 0, z: 183.5 })
+    createUseWall('车间2-1的墙5', { baseWidth: 27, baseHeght: 30, baseLength: 1 }, { x: -158, y: 0, z: 183.5 })
+
+
+    //汽车军团
+    const mesh_qcjt = createFloor(t('messages.QiCheLegion'), 67, 263, { x: -270.5, y: 0, z: 176 })
+    createLableObj(mesh_qcjt, t('messages.QiCheLegion'), { x: 0, y: 60, z: 0 })
+    //精加车间
+    const mesh_jjcj = createFloor('精加车间', 82, 263, { x: -198, y: 0, z: 176 })
+    createLableObj(mesh_jjcj, t('messages.JingJiaRoom'), { x: 0, y: 60, z: 0 })
+
+    //创建车间2-2 baseWidth: 95, baseHeght: 30, baseLength: 263  x: -84.5, y: 0, z: 176
+    createHouse(t('messages.JiJiaRoom'), { baseWidth: 95, baseHeght: 30, baseLength: 263 }, { x: -84.5, y: 0, z: 176 })
+    //创建精饰车间 baseWidth: 161, baseHeght: 30, baseLength: 263  x: 65.5, y: 0, z: 176
+    createHouse('车间2-3', { baseWidth: 161, baseHeght: 30, baseLength: 263 }, { x: 65.5, y: 0, z: 176 }, false)
+    createUseWall('车间2-3的墙1', { baseWidth: 1, baseHeght: 30, baseLength: 263 }, { x: 60, y: 0, z: 307 })
+
+
+    //大件车间
+    const mesh_djcj = createFloor('大件车间', 75, 263, { x: 22, y: 0, z: 176 })
+    createLableObj(mesh_djcj, t('messages.DaJianRoom'), { x: 0, y: 60, z: 0 })
+    //精饰车间
+    const mesh_jscj = createFloor('精饰车间', 88, 263, { x: 101.5, y: 0, z: 176 })
+    createLableObj(mesh_jscj, t('messages.JingShiRoom'), { x: 0, y: 60, z: 0 })
+    // //料场
+    // createHouse('料场', { baseWidth: 82, baseHeght: 30, baseLength: 263 }, { x: 187, y: 0, z: 176 }, false)
+    // createUseWall('料场中间的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 183.5 })
+    createUseWall('料场后面的墙', { baseWidth: 82, baseHeght: 30, baseLength: 1 }, { x: 228, y: 0, z: 308 })
+    const mesh_lc = createFloor('料场', 84, 131, { x: 188, y: 0, z: 110 })
+    createLableObj(mesh_lc, t('messages.料场'), { x: 0, y: 60, z: 0 })
+
+    const mesh_wfzcq = createFloor('料场', 84, 132, { x: 188, y: 0, z: 242 })
+    createLableObj(mesh_wfzcq, t('messages.危废暂存间'), { x: 0, y: 60, z: 0 })
+
+
+
+    //精饰车间内的房子
+    createHouse(t('messages.ManualSandblastingRoom'), { baseWidth: 26, baseHeght: 30, baseLength: 28 }, { x: 73.62, y: 0, z: 59.15 })
+    createHouse(`${t('messages.DryingRoom')}B`, { baseWidth: 28, baseHeght: 30, baseLength: 46 }, { x: 130.77, y: 0, z: 67.69 })
+    createHouse(t('messages.GrindingRoom'), { baseWidth: 24, baseHeght: 30, baseLength: 42 }, { x: 132.77, y: 0, z: 141.03 })
+
+
+    createHouse('冷冻式空气干燥机', { baseWidth: 14, baseHeght: 20, baseLength: 18 }, { x: 66.69, y: 0, z: 123.32 }, false)
+    createHouse('喷砂罐', { baseWidth: 14, baseHeght: 20, baseLength: 18 }, { x: 66.69, y: 0, z: 158.41 }, false)
+    createHouse('抛丸机', { baseWidth: 19, baseHeght: 20, baseLength: 74 }, { x: 83.84, y: 0, z: 144.21 }, false)
+    createHouse(t('messages.PowderSprayingRoom'), { baseWidth: 32, baseHeght: 20, baseLength: 65 }, { x: 75.94, y: 0, z: 235.64 })
+    createHouse(t('messages.DaJianPaintingRoom'), { baseWidth: 27, baseHeght: 20, baseLength: 44 }, { x: 132.10, y: 0, z: 220.20 })
+
+
+
+    //创建焊接车间 baseWidth: 85, baseHeght: 30, baseLength: 263  x: 224, y: 0, z: 176
+    createHouse(t('messages.HanJieRoom'), { baseWidth: 85, baseHeght: 30, baseLength: 263 }, { x: 271, y: 0, z: 176 })
+
+    createHouse(t('messages.boilerRoom'), { baseWidth: 25, baseHeght: 20, baseLength: 30 }, { x: 299.30, y: 0, z: 60.87 })
+
+    //创建食堂 baseWidth: 71, baseHeght: 30, baseLength: 124  x: 312.5, y: 0, z: 221.5
+    createHouse(t('messages.canteen'), { baseWidth: 71, baseHeght: 30, baseLength: 124 }, { x: 359.5, y: 0, z: 221.5 })
+    //创建宿舍楼3 baseWidth: 56, baseHeght: 30, baseLength: 216  x: 393, y: 0, z: -147
+    createHouse(`${t('messages.EmployeeApartment')}-9`, { baseWidth: 56, baseHeght: 30, baseLength: 216 }, { x: 440, y: 0, z: -147 })
+    //创建宿舍楼1 baseWidth: 56, baseHeght: 30, baseLength: 132  x: 389, y: 0, z: 106.5
+    createHouse(`${t('messages.EmployeeApartment')}-10`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 106.5 })
+    //创建宿舍楼2 baseWidth: 56, baseHeght: 30, baseLength: 132  x: 389, y: 0, z: 106.5
+    createHouse(`${t('messages.EmployeeApartment')}-11`, { baseWidth: 56, baseHeght: 30, baseLength: 132 }, { x: 440, y: 0, z: 243.5 })
+    //创建围墙 baseWidth: 966, baseHeght: 5, baseLength: 677  x: 24, y: 0, z: 0
+    createHouse('围墙', { baseWidth: 1013, baseHeght: 15, baseLength: 677 }, { x: 0, y: 0, z: 0 }, false)
+    //创建东气泵房 baseWidth: 23, baseHeght: 30, baseLength: 16  x: -119.5, y: 0, z: 313.5
+    createHouse(t('messages.eastAirPumpRoom'), { baseWidth: 23, baseHeght: 25, baseLength: 16 }, { x: -119.5, y: 0, z: 316.5 })
+
+
+    createTitleFloor('', 464, 45, { x: 0, y: 0, z: 15 })
+    //放置服务器
+    createGlb()
+    /*放置光猫************/
+    //汽车军团
+    createSwitch({ x: -287.44, y: 0, z: 19.24 })
+    //精加车间
+    createSwitch({ x: -158.01, y: 0, z: 107.47 })
+    createSwitch({ x: -208.35, y: 0, z: 107.47 })
+    //机加车间
+    createSwitch({ x: -40.22, y: 0, z: 19.90 })
+    //电控分厂
+    createSwitch({ x: -232.96, y: 0, z: -64.48 })
+    //大配套中心
+    createSwitch({ x: 29.01, y: 0, z: -60.75 })
+    //大件车间
+    createSwitch({ x: 5.29, y: 0, z: 19.00 })
+    //家纺 医防
+    createSwitch({ x: 88.55, y: 0, z: -214.89 })
+    //二道岗
+    createSwitch({ x: 306.5, y: 0, z: 5.43 })
+    /*光猫结束********************************* */
+
+
+    /**创建ac */
+    createAc({ x: 52.56, y: 0, z: 52.24 })
+    //服装军团
+    createAc({ x: -88.39, y: 0, z: -249.36 })
+    createAc({ x: 82.99, y: 0, z: -170.17 })
+
+    /**创建AC结束 */
+
+
+    /*创建wifi */
+    //机加
+    createWifi({ x: -46.96, y: 3, z: 156.57 })
+    //大件
+    createWifi({ x: 52.60, y: 3, z: 96.44 })
+    createWifi({ x: 52.60, y: 3, z: 157.07 })
+    //精饰
+    createWifi({ x: 133.14, y: 3, z: 107.43 })
+    createWifi({ x: 133.14, y: 3, z: 156.25 })
+    //焊接
+    createWifi({ x: 305.73, y: 3, z: 110.45 })
+    createWifi({ x: 305.73, y: 3, z: 238.67 })
+    //服装
+    createWifi({ x: -89.13, y: 4, z: -245.33 })
+    createWifi({ x: -132.07, y: 3, z: -245.33 })
+    createWifi({ x: -222.31, y: 3, z: -245.33 })
+    createWifi({ x: -119.3, y: 3, z: -114.15 })
+    createWifi({ x: -176.45, y: 3, z: -114.40 })
+
+    //家纺 医防
+    createWifi({ x: 140.83, y: 2, z: -197.34 })
+    createWifi({ x: 259.37, y: 2, z: -197.34 })
+    createWifi({ x: 140.83, y: 2, z: -111.84 })
+    createWifi({ x: 259.50, y: 2, z: -111.81 })
+
+
+
+    /*创建第一条线******************/
+    let garyLine = 0x595959;
+    let whiteColor = 0xffffff;
+    createLine(whiteColor, [{ x: -346.00, y: 23.6, z: 59.40 }, { x: -160.50, y: 2, z: 142.08 }], 2)
+    //服装
+    createLine(whiteColor, [
+        { x: -345.65, y: 2, z: 36.40 },
+        { x: 22.67, y: 2, z: 36.40 },
+        { x: 22.67, y: 2, z: -25.70 },
+    ], 2)
+    createLine(garyLine, [
+        { x: 22.67, y: 2, z: -25.70 },
+        { x: -47.67, y: 2, z: -25.70 },
+        { x: -47.67, y: 2, z: -248.85 },
+        { x: -221.76, y: 2, z: -248.85 }
+    ])
+
+
+    createLine(garyLine, [{ x: -88.73, y: 2, z: -249.01 }, { x: -88.73, y: 2, z: -117.33 }, { x: -174.65, y: 2, z: -117.33 }])
+    //汽车军团
+    createLine(whiteColor, [{ x: -293.44, y: 2, z: 52.52 }, { x: -293.44, y: 2, z: 36.40 }, { x: -235.84, y: 2, z: -30.87 }], 2)
+    //机加
+    createLine(whiteColor, [
+        { x: -114.64, y: 2, z: 36.40 },
+        { x: -114.64, y: 2, z: 52.42 },
+        { x: -46.13, y: 2, z: 52.90 },
+    ], 2)
+
+    createLine(garyLine, [
+        { x: -46.13, y: 2, z: 52.90 },
+        { x: -46.13, y: 2, z: 153.05 }
+    ])
+    //家纺医防
+    createLine(garyLine, [
+        { x: 27.47, y: 2, z: -26.11 },
+        { x: 27.47, y: 2, z: -248.85 },
+        { x: 69.26, y: 2, z: -248.85 },
+        { x: 69.26, y: 2, z: -180.29 },
+        { x: 85.51, y: 2, z: -180.29 },
+        { x: 141.66, y: 2, z: -200.86 },
+        { x: 260.42, y: 2, z: -200.86 },
+        { x: 260.42, y: 2, z: -115.33 },
+        { x: 141.66, y: 2, z: -115.33 },
+        { x: 141.66, y: 2, z: -200.86 },
+    ])
+
+
+    //创建第二条线
+    //横线 主干道
+    createLine(whiteColor, [
+        { x: -341.87, y: 2, z: 30.98 },
+        { x: 111.97, y: 2, z: 30.98 },
+        { x: 111.97, y: 2, z: 175.55 },
+        { x: 294.54, y: 2, z: 175.55 },
+        { x: 294.54, y: 2, z: 40.43 },
+        { x: 306.56, y: 2, z: 40.43 }
+    ], 2)
+    createLine(garyLine, [
+        { x: 306.56, y: 2, z: 40.43 },
+        { x: 306.56, y: 2, z: 235.28 }
+    ])
+    //精加
+    createLine(whiteColor, [
+        { x: -164.26, y: 2, z: 30.98 },
+        { x: -164.26, y: 2, z: 140.05 }
+
+    ], 2)
+    createLine(garyLine, [
+        { x: -164.26, y: 2, z: 140.05 },
+        { x: -214.35, y: 2, z: 140.05 }
+
+    ])
+    //大件 总---精饰
+    createLine(garyLine, [
+        { x: 26.61, y: 2, z: -27.08 },
+        { x: 26.61, y: 2, z: 39.27 },
+        { x: -0.90, y: 2, z: 39.27 },
+        { x: -0.90, y: 2, z: 52.24 },
+        { x: 133.97, y: 2, z: 53.16 },
+        { x: 133.97, y: 2, z: 154.31 }
+    ])
+    //大件 分
+    createLine(garyLine, [
+        { x: 53.43, y: 2, z: 53.16 },
+        { x: 53.43, y: 2, z: 154.31 }
+    ])
+    /**
+     * 
+            { x: 26.61, y: 2, z: -27.08 },
+            { x: 26.61, y: 2, z: 39.27 },
+            { x: -0.90, y: 2, z: 39.27 },
+            { x: 53.43, y: 2, z: 154.31 }
+     */
+    //电控
+    createLine(whiteColor, [
+        { x: -292.24, y: 2, z: 30.98 },
+        { x: -242.61, y: 2, z: -30.90 }
+    ], 2)
+    //家纺 医防
+    createLine(whiteColor, [
+        { x: 18.30, y: 2, z: 30.98 },
+        { x: 18.30, y: 2, z: -28.94 }
+    ], 2)
+    //家纺 医防
+    createLine(garyLine, [
+        { x: 18.30, y: 2, z: -28.94 },
+        { x: 25.64, y: 2, z: -28.94 },
+        { x: 25.64, y: 2, z: -251.40 },
+        { x: 71.44, y: 2, z: -251.40 },
+        { x: 71.44, y: 2, z: -183.05 },
+        { x: 83.96, y: 2, z: -183.05 }
+    ])
+    createLine(whiteColor, [
+        { x: 18.30, y: 2, z: 30.98 },
+        { x: 18.30, y: 2, z: -28.94 }
+    ], 2)
+
+    setTipDom()
+    sethoveMesh()
+
+
+
+
+
+    //创建综合楼
+    //创建天空盒
+    createSkyBox()
+
+
+
+    const raycaster = new THREE.Raycaster();
+    const pointer = new THREE.Vector2();
+
+    function onPointerMove(event: any) {
+        // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
+        pointer.x = (event.clientX / iw) * 2 - 1;
+        pointer.y = -(event.clientY / ih) * 2 + 1;
+    }
+
+    //animate()
+
+
+    //鼠标在canvas画布上点击事件
+    labelRenderer.domElement.addEventListener('mouseup', function (event: any) {
+        clearInterval(timer)
+        // .offsetY、.offsetX以canvas画布左上角为坐标原点,单位px
+        const px = event.offsetX;
+        const py = event.offsetY;
+        //屏幕坐标px、py转WebGL标准设备坐标x、y
+        //width、height表示canvas画布宽高度
+        const x = (px / iw) * 2 - 1;
+        const y = -(py / ih) * 2 + 1;
+        // console.log("鼠标点击位置", "x:" + x, "y:" + y);
+        // console.log("鼠标点击位置", "px:" + px, "py:" + py);
+
+
+        //创建一个射线投射器`Raycaster`
+        const raycaster = new THREE.Raycaster();
+        //.setFromCamera()计算射线投射器`Raycaster`的射线属性.ray
+        // 形象点说就是在点击位置创建一条射线，射线穿过的模型代表选中
+        raycaster.setFromCamera(new THREE.Vector2(x, y), camera);
+        //.intersectObjects([mesh1, mesh2, mesh3])对参数中的网格模型对象进行射线交叉计算
+        // 未选中对象返回空数组[],选中一个对象，数组1个元素，选中两个对象，数组两个元素
+        const intersects = raycaster.intersectObjects(scene.children);
+        if (intersects.length > 0) {
+            var selected = intersects[0]; //取第一个物体
+            console.log("坐标", "{x:" + selected.point.x.toFixed(2) + ",y:" + (selected.point.y.toFixed(2) - 1) + ",z:" + selected.point.z.toFixed(2) + "}", selected.object.name);
+            // console.log("非正常坐标", "{x:" + (+selected.point.x - 0.83).toFixed(2) + ",y:2 ,z:" + (selected.point.z + 3.52).toFixed(2) + "}");
+            let workerShop = intersects[0]?.object?.name
+
+
+        }
+
+        // console.log("点击了", intersects[0]?.object?.name);
+        // intersects.length大于0说明，说明选中了模型
+        // if (intersects.length > 0) {
+        //   // 选中模型的第一个模型，设置为红色
+        //   intersects[0].object.material.color.set(0xff0000);
+        // }
+        renderer.render(scene, camera)
+    })
+
+    controls.target = new THREE.Vector3(0, 0, 0)
+
+
+
+
+
+    //定制渲染函数
+    let T0 = +new Date() //设置时间差
+    function render() {
+        let T1 = +new Date()
+        // let t = T1 - T0 //获取时间间隔
+        renderer.render(scene, camera)
+        //旋转立方体,每次绕y轴旋转0.01弧度，每一秒渲染0.001弧度
+        //box.rotateY(0.001 * t)
+        // if (t >= 2000) {
+        //     return
+        // }
+        boxObjects.value.forEach((element: any) => {
+            let color1 = 0x88e76a
+            let color2 = 0xff0000
+            //判断是否是更新的传感器数据
+            if (store.updateSensorData.hasOwnProperty(element.sensor_id)) {
+                // console.log(store.updateSensorData,'store.updateSensorData');
+                // console.log(element,'element');
+
+                let color = store.updateSensorData[element.sensor_id].status ? color1 : color2
+                element.devStatus = store.updateSensorData[element.sensor_id].status
+                element.material.color = new THREE.Color(color)
+
+            }
+            // reader(element)
+        });
+        TWEEN.update()
+        controls.update()
+        labelRenderer.render(scene, camera)
+        store.clearupdateSensorData()
+        // reader(mesh_qcjt)
+        window.requestAnimationFrame(render) //避免掉帧，就是一帧接一帧，逐帧，预备加载下一帧
+    }
+    render()
+}
+
+
+
+//创建线
+function createLine(color: number, pointsList: any, width: number = 4) {
+    // const material = new THREE.LineBasicMaterial({ color: color });
+    // const points = [];
+    // pointsList.forEach(element => {
+    //     points.push(new THREE.Vector3(element.x, element.y, element.z));
+    // });
+
+    // const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    // const line = new THREE.Line(geometry, material);
+    // scene.add(line);
+    // renderer.render(scene, camera);
+
+    const geometry = new LineGeometry()
+    let pointList = []
+    pointsList.forEach(element => {
+        let { x, y, z } = element
+        let arr = [x, y, z]
+        pointList.push(...arr)
+    });
+    geometry.setPositions(pointList)
+
+    const material = new LineMaterial({
+        color: color,
+        transparent: true,
+        // opacity: 0.5,
+        dashed: width !== 2 ? true : false,
+        dashScale: 1,
+        dashSize: 3,
+        gapSize: 1,
+        linewidth: width
+    })
+    //console.log(material,'material');
+
+    material.resolution.set(iw, ih)
+    // 5. 创建 Line2
+    var line = new Line2(geometry, material);
+    // 6. 计算下线条长度
+    line.computeLineDistances();
+    // 7. 添加到场景
+    scene.add(line)
+}
+
+//创建wifi
+function createWifi(position: positionType) {
+    const loader = new GLTFLoader();
+
+    loader.load('/models/glb/tothefuture_wifi.glb', function (gltf) {
+        const mesh = gltf.scene.children[0];
+
+        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)
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        scene.add(mesh);
+
+    }, undefined, function (error) {
+
+        console.error(error);
+
+    });
+}
+
+//创建交换机
+// function createSwitch(position: positionType, scale: number = 0.2) {
+//     const loader = new GLTFLoader();
+
+//     loader.load('/models/gltf/scene.gltf', function (gltf) {
+//         const mesh = gltf.scene.children[0];
+
+//         const s = scale;
+//         mesh.scale.set(s, s, 0.5);
+//         mesh.position.set(position.x-12.75, position.y, position.z+66.22);
+//         mesh.rotation.z = THREE.MathUtils.degToRad(180)
+//         // mesh.rotation.y = THREE.MathUtils.degToRad(90)
+//         // mesh.rotation.x = THREE.MathUtils.degToRad(45)
+//         mesh.castShadow = true;
+//         mesh.receiveShadow = true;
+//         scene.add(mesh);
+
+//     }, undefined, function (error) {
+
+//         console.error(error);
+
+//     });
+// }
+
+const createSwitch = (boxposition: positionType, shadow: boolean = true): object => {
+
+    const wallTexture = new THREE.TextureLoader().load(requires.guangmao);
+    const wall = new THREE.BoxGeometry(15, 5, 10);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: 0xe7e7e7,
+        transparent: true,
+    });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    // 物体移动位置
+    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+    wallMesh.position.set(boxposition.x - 6, 5 + boxposition.y, boxposition.z + 33.73);
+    // 将立方体添加到场景中
+    group.add(wallMesh)
+    return wallMesh
+}
+
+const createAc = (boxposition: positionType, shadow: boolean = true): object => {
+
+    const wallTexture = new THREE.TextureLoader().load(requires.ac);
+    const wall = new THREE.BoxGeometry(15, 5, 10);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: 0xe7e7e7,
+        transparent: true,
+    });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    // 物体移动位置
+    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+    wallMesh.position.set(boxposition.x, 5 + boxposition.y, boxposition.z);
+    // 将立方体添加到场景中
+    group.add(wallMesh)
+    return wallMesh
+}
+
+
+
+
+//创建服务器
+function createGlb() {
+    const loader = new GLTFLoader();
+
+    loader.load('/models/glb/server.glb', function (gltf) {
+        const mesh = gltf.scene.children[0];
+
+        const s = 0.12;
+        mesh.scale.set(s, s, s);
+        mesh.position.set(-346, 0, 51);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        scene.add(mesh);
+    }, undefined, function (error) {
+
+        console.error(error);
+
+    });
+}
+
+
+
+type positionType = {
+    x: number,
+    y: number,
+    z: number
+}
+//创建房子
+function createHouse(houseName: string, size = { baseWidth: 40, baseHeght: 4, baseLength: 60 }, position: positionType = { x: 80, y: 1, z: 0 }, isFloor = true) {
+
+    const { baseWidth, baseHeght, baseLength } = size
+    const { x, y, z } = position;
+    const faWallPosition = [-baseWidth / 2 + x, 0, -baseLength / 2 + z]
+    if (isFloor) {
+        //创建地板
+        if (houseName == t('messages.JiJiaRoom')) {
+            const mesh = createFloor('机加车间', baseWidth, baseLength, position)
+            createLableObj(mesh, t('messages.JiJiaRoom'), { x: 0, y: 60, z: 0 })
+        } else if (houseName == t('messages.HanJieRoom')) {
+            const mesh = createFloor('焊接车间', baseWidth, baseLength, position)
+            createLableObj(mesh, t('messages.HanJieRoom'), { x: 0, y: 60, z: 0 })
+        } else {
+            const mesh = createFloor(houseName, baseWidth, baseLength, position)
+            createLableObj(mesh, houseName, { x: 0, y: 60, z: 0 })
+        }
+    }
+
+    //创建左右墙
+    let leftWall = createWall(1, baseHeght, baseLength)
+    leftWall.name = houseName + '左侧的墙'
+    leftWall.rotateY(Math.PI / 2);
+    leftWall.position.set((-baseWidth / 2 + x + 1), baseHeght / 2 + y, z);
+    group.add(leftWall)
+
+    const rightWall = leftWall.clone();
+    rightWall.position.set((baseWidth / 2 + x), baseHeght / 2 + y, z);
+    rightWall.name = houseName + "右侧的墙";
+    group.add(rightWall);
+    //创建前后墙
+    const frontWall = createWall(1, baseHeght, baseWidth)
+    frontWall.position.set((1 / 2 + x), baseHeght / 2 + y, (baseLength / 2 + z));
+    frontWall.name = houseName + "前方的墙";
+    group.add(frontWall);
+
+    const rearWall = frontWall.clone();
+    rearWall.position.set((1 / 2 + x), baseHeght / 2 + y, (-baseLength / 2 + z));
+    rearWall.name = houseName + "后方的墙";
+    group.add(rearWall);
+
+
+    // //不带门的墙
+    // createNoDoorWall(baseWidth,baseHeght,baseLength,position)
+    // //创建带门的墙
+    // createDoorWall(baseWidth,baseHeght,baseLength,position)
+
+    // let { roof, width } = createRoof(baseWidth,baseHeght,baseLength,position);
+    // let leftRoof = roof.clone();
+    // leftRoof.rotateX(THREE.MathUtils.degToRad(30));
+    // leftRoof.position.set(-baseWidth / 3 + 1+x, baseHeght+2+y, z);
+    // leftRoof.name = "左屋顶";
+    // group.add(leftRoof);
+
+    // //创建门
+    // createDoor(baseWidth,baseLength,position)
+}
+
+
+// 新建2D标签
+function createLableObj(mesh: any, text: string, vector: positionType) {
+    let laberDiv = document.createElement('div');//创建div容器
+    laberDiv.className = 'laber_name';
+    laberDiv.textContent = text;
+    let pointLabel = new CSS2DObject(laberDiv);
+    pointLabel.position.set(vector.x, vector.y, vector.z);
+
+    mesh.add(pointLabel);
+}
+type sizeType = {
+    baseWidth: number,
+    baseHeght: number,
+    baseLength: number
+}
+//创建能用的墙
+function createUseWall(name: string, size: sizeType, position: positionType, issensor: boolean = false): void {
+    let Wall = createWall(size.baseWidth, size.baseHeght, size.baseLength)
+    Wall.name = name
+    Wall.rotateY(Math.PI / 2);
+    Wall.position.set((-size.baseWidth / 2 + position.x + 1), size.baseHeght / 2 + position.y, -size.baseLength / 2 + position.z);
+    group.add(Wall)
+    return Wall
+}
+
+/**
+   * 创建立方体 用作传感器
+   * @param size    立方体的长宽高
+   * @param boxposition 立方体的位置
+   * @param boxcolor     立方体的颜色
+   * @param shadow     是否渲染到阴影贴图当中
+   */
+const createBox = (size: sizeType, boxposition: positionType, boxcolor: number, shadow: boolean = true, result: any = {}, icon: string): object => {
+
+    const wallTexture = new THREE.TextureLoader().load(requires[icon]);
+    const wall = new THREE.BoxGeometry(size.baseWidth, size.baseHeght, size.baseLength);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: boxcolor,
+        transparent: true,
+    });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    // 绑定自定义数据 添加标签
+    wallMesh.name = result.name
+    wallMesh.devStatus = result.status
+    wallMesh.direction = 'up'
+    wallMesh.startVal = 1
+    //用于更新状态判断
+    wallMesh.sensor_id = result.id
+    // 物体移动位置
+    // wallMesh.position.set((-size.baseWidth / 2 + boxposition.x + 1), size.baseHeght / 2 + boxposition.y, -size.baseLength / 2 + boxposition.z);
+    wallMesh.position.set(boxposition.x, size.baseHeght / 2 + boxposition.y, boxposition.z);
+    // 对象是否渲染到阴影贴图当中
+    wallMesh.castShadow = shadow;
+    // 将立方体添加到场景中
+    group.add(wallMesh)
+
+    boxObjects.value.push(wallMesh)
+    return wallMesh
+}
+
+
+
+
+//创建地面
+function createGround() {
+    //require('@/assets/img/Factory/cao.png')
+    //导入材质
+    const groundTexture = new THREE.TextureLoader().load(requires.ny);
+    groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+    groundTexture.repeat.set(100, 100);
+    const ground = new THREE.PlaneGeometry(1014, 681);
+    const groundMaterial = new THREE.MeshBasicMaterial({
+        side: THREE.DoubleSide,
+        map: groundTexture,
+        // color: 0x00ff00,
+        // transparent: true,
+        // opacity: 0.2,
+    });
+
+    const groundMesh = new THREE.Mesh(ground, groundMaterial);
+    groundMesh.name = "地面";//设置name属性
+    groundMesh.rotateX(-Math.PI / 2);//旋转用于呈现一个水平的地面
+
+    scene.add(groundMesh);
+}
+
+//创建标题地板
+function createTitleFloor(houseName: string, baseWidth: number, baseLength: number, position: positionType) {
+    const texture = new THREE.TextureLoader().load(requires.titleFloor);
+    //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2
+    const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength);
+    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
+    const mesh = new THREE.Mesh(floor, material);
+    const { x, y, z } = position
+    mesh.position.set(x, y + 1 / 2, z);
+    mesh.name = houseName + "地板";
+    group.add(mesh);
+    return mesh;
+}
+
+//创建地板，可以理解为地基
+function createFloor(houseName: string, baseWidth: number, baseLength: number, position: positionType) {
+    const texture = new THREE.TextureLoader().load(requires.wood);
+    //设置地板大小，由于后面将要生成墙体存在设置为1的厚度，因此这里对地板的x，z均-2
+    const floor = new THREE.BoxGeometry(baseWidth - 2, 1, baseLength);
+    const material = new THREE.MeshPhongMaterial({ map: texture, transparent: true });
+    const mesh = new THREE.Mesh(floor, material);
+    const { x, y, z } = position
+    mesh.position.set(x, y + 1 / 2, z);
+    mesh.name = houseName + "地板";
+    group.add(mesh);
+    return mesh;
+}
+
+//创建左右两边墙体
+function createWall(baseWidth: number = 10, baseHeght: number, baseLength: number) {
+    const wallTexture = new THREE.TextureLoader().load(requires.wall1);
+    const wall = new THREE.BoxGeometry(baseLength, baseHeght, baseWidth);
+    const wallMaterial = new THREE.MeshPhongMaterial({
+        map: wallTexture,
+        color: 0xffffff,
+        transparent: true,
+    });
+    //墙体的网格
+    const wallMesh = new THREE.Mesh(wall, wallMaterial);
+    return wallMesh;
+}
+
+//不规则墙体
+function genwallShape(baseWidth: number, baseHeght: number, baseLength: number) {
+    const shape = new THREE.Shape();
+    let height = baseHeght;//墙的高度
+    shape.moveTo(0, 0); //起点
+    shape.lineTo(0, height); //墙体高度
+    shape.lineTo(baseWidth / 2 - 1, height + 5); //墙体顶点
+    shape.lineTo(baseWidth / 2 - 1, height + 6); //墙体顶点
+    shape.lineTo(baseWidth / 2 + 1, height + 6); //墙体顶点
+    shape.lineTo(baseWidth / 2 + 1, height + 5); //墙体顶点
+    shape.lineTo(baseWidth, height);
+    shape.lineTo(baseWidth, 0);
+    shape.lineTo(0, 0);
+    return { shape };
+}
+
+//创建不规则墙体
+function createIrregularWall(shape: any, position: any) {
+    const extrudeSettings = {
+        depth: 1,//定义深度，由于挤压几何体的点位都是x，y坐标组成的二位平面，这个参数定义向z轴的延展长度，即为墙的厚度
+        bevelEnabled: false,
+    };
+    const wallTexture = new THREE.TextureLoader().load(requires.wall1);
+    const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
+    wallTexture.wrapS = wallTexture.wrapT = THREE.RepeatWrapping;
+    wallTexture.repeat.set(0.05, 0.05);
+    const material = new THREE.MeshPhongMaterial({ map: wallTexture });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set(...position);
+    group.add(mesh);
+    return mesh;
+}
+
+//创建不带门的不规则墙体
+function createNoDoorWall(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
+    const { x, y, z } = position
+    let { shape } = genwallShape(baseWidth, baseHeght, baseLength);
+    let mesh = createIrregularWall(shape, [-baseWidth / 2 + x, 0, -baseLength / 2 + z]);
+    mesh.name = "带门的墙对面的墙";
+}
+
+
+//带门的墙体
+function createDoorWall(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
+    const { x, y, z } = position
+    const shape = new THREE.Shape();
+    const door = new THREE.Path();
+    //门的位置
+    door.moveTo(baseWidth / 2 + 5, 0);
+    door.lineTo(baseWidth / 2 + 5, 5);
+    door.lineTo(baseWidth / 2 - 5, 6);
+    door.lineTo(baseWidth / 2 - 5, 0);
+    door.lineTo(baseWidth / 2 + 5, 0);
+    // 形状上的孔洞
+    shape.holes.push(door);
+    let mesh = createIrregularWall(shape, [
+        -baseWidth / 2 + x,
+        y,
+        baseLength / 2 - 1 + z,
+    ]);
+    mesh.name = "带门的墙";
+}
+
+
+//创建屋顶
+function createRoof(baseWidth: number, baseHeght: number, baseLength: number, position: positionType) {
+    const { x, y, z } = position
+    //屋顶宽
+    let width = Math.sqrt((baseWidth / 2) ** 2 + 5 ** 2) + 5;//+5让有一点屋檐的效果
+    const geometry = new THREE.BoxGeometry(baseLength / 2, width, 1);
+    const texture = new THREE.TextureLoader().load(requires.tile);
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    texture.repeat.set(2, 2);
+    const material = new THREE.MeshPhongMaterial({ map: texture });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.rotateZ(THREE.MathUtils.degToRad(75));
+    mesh.rotateY(-Math.PI / 2);
+    mesh.position.set(baseWidth / 3 - 1 + x, baseHeght + 2 + y, 0 + z);
+    mesh.name = "右屋顶";
+    group.add(mesh);
+    return { roof: mesh, width };
+
+}
+
+//创建门
+function createDoor(baseWidth: number, baseLength: number, position: positionType) {
+    const { x, y, z } = position;
+    const texture = new THREE.TextureLoader().load(requires.door);
+    const door = new THREE.BoxGeometry(3, 5, 0.5);
+    const material = new THREE.MeshPhongMaterial({
+        map: texture,
+        transparent: true,
+        opacity: 1,
+    });
+    const doorMesh = new THREE.Mesh(door, material);
+    // doorMesh.rotateY(Math.PI / 2);
+    // doorMesh.position.set(-baseLength / 2, 7, 0);
+
+    doorMesh.name = "门";
+
+    //以下代码做出了更改
+    const doorGroup = new THREE.Group();//添加一个门的父级
+    doorGroup.name = "门的包裹";
+    doorGroup.position.set(-5 + x, 8 + y, baseLength / 2 + z);//通过父级来改变门的旋转轴
+    //现在这个是相对于父级
+    doorMesh.position.x = 5;
+    doorGroup.add(doorMesh);
+    group.add(doorGroup);
+    return doorGroup;
+}
+
+
+//天空盒
+function createSkyBox() {
+    const texture = new THREE.TextureLoader().load(requires.sky);
+    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
+    // texture.repeat.set(1, 1);
+    const skyBox = new THREE.SphereGeometry(900, 100, 100);
+    const material = new THREE.MeshPhongMaterial({
+        map: texture,
+        side: THREE.BackSide,
+    });
+    const skyBoxMesh = new THREE.Mesh(skyBox, material);
+    scene.add(skyBoxMesh);
+}
+
+function setTipDom() {
+    const domTag = document.createElement("div");
+    domTag.setAttribute("id2", "tipId");
+    // domTag.innerText='电流'
+    domTag.style.fontSize = "14px";
+    domTag.style.backgroundColor = "rgba(0,0,0,.5)";
+    domTag.style.padding = "5px";
+    domTag.style.borderRadius = "2px";
+    domTag.style.color = "#fff";
+    domTag.style.visibility = "hidden";
+    // domTag.innerText = mesh.name;
+    const iTagDomCss3 = new CSS2DObject(domTag);
+    iTagDomCss3.position.z = 2;
+    iTagDomCss3.position.y = 0;
+    scene.add(iTagDomCss3);
+    saveTipDom = iTagDomCss3;
+}
+
+//3D标签初始化
+// function initCss3DScene() {
+//     cssRender = new CSS3DRenderer();
+//     cssRender.setSize(iw, ih);
+//     cssRender.domElement.style.position = "absolute";
+//     cssRender.domElement.style.top = '0';
+//     cssRender.domElement.style.outline = "none";
+//     cssRender.domElement.className = "cssrender";
+//     canvas.appendChild(cssRender.domElement);
+// }
+
+function sethoveMesh() {
+
+    dragControls = new DragControls(
+        boxObjects.value,
+        camera,
+        labelRenderer.domElement
+    );
+
+    if (!edit) {
+        dragControls.deactivate();
+    }
+    dragControls.addEventListener("hoveron", function (event: any) {
+        saveTipDom.element.innerHTML = `${event.object.name}:${event.object.devStatus ? t('messages.onLine') : t('messages.offline')
+            }`;
+        saveTipDom.element.style.visibility = "visible";
+        saveTipDom.position.x = event.object.position.x;
+        saveTipDom.position.y = event.object.position.y + 5;
+        saveTipDom.position.z = event.object.position.z - 20;
+        saveTipDom.visible = true;
+
+    });
+
+    dragControls.addEventListener("hoveroff", function (event: any) {
+        saveTipDom.element.style.visibility = "hidden";
+        saveTipDom.position.x = 0;
+        saveTipDom.position.y = 9999;
+        saveTipDom.visible = false;
+    });
+
+    dragControls.addEventListener("dragend", function (event: any) {
+        let data = { 'id': event.object.sensor_id, 'x': event.object.position.x.toFixed(2), 'y': event.object.position.z.toFixed(2) }
+        updateCoordinateByPoint(data).then((res: any) => {
+            if (res.code == 200) {
+                ElNotification({
+                    message: '移动位置成功',
+                    duration: 2000,
+                    type: 'success'
+                })
+            }
+
+
+        })
+
+    });
+
+}
+
+onMounted(() => {
+    // console.log(container.value.offsetWidth,'container');
+
+    //初始化场景
+    init()
+    /**创建传感器 */
+    getSensorDataTimer = setInterval(() => {
+        if (store.sensorList.length > 0) {
+            store.sensorList.forEach((element: any) => {
+                let state = element.status ? 0x88e76a : 0xff0000;
+                let wallMesh = createBox(small_size, { x: element.x, y: 0, z: element.y }, state, true, element, element.icon)
+
+            });
+            clearInterval(getSensorDataTimer)
+        }
+    }, 100)
+
+    getDevDataTimer = setInterval(() => {
+        if (store.devdataList.length > 0) {
+
+            store.devdataList.forEach((element: any) => {
+                let state = element.status ? 0x88e76a : 0xff0000;
+                let wallMesh = createBox(small_size, { x: element.x, y: 0, z: element.y }, state, false, element, element.icon)
+            });
+            clearInterval(getDevDataTimer)
+        }
+    }, 100)
+
+
+
+    // const length = store.result.length
+    // //获取store中的数据长度
+    // setInterval(() => {
+    //     //获得一个随机整数
+    //     const random = Math.floor(Math.random() * length)
+    //     const tempdata: any = store.result[random]
+    //     tempdata.status = !store.result[random]?.status
+    //     store.updateResult(tempdata)
+
+    // }, 5000)
+
+
+})
+</script>
+
+<style>
+/* @import url("@/assets/iconfont.css"); */
+
+.laber_name {
+    color: #FFF;
+    font-family: sans-serif;
+    padding: 2px;
+    background: rgba(0, 0, 0, 0.6);
+}
+</style>
diff --git a/src/views/TrendChart/index.vue b/src/views/TrendChart/index.vue
new file mode 100644
index 0000000..6aef3b0
--- /dev/null
+++ b/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>
+
diff --git a/src/views/TrendChart/lineChart.vue b/src/views/TrendChart/lineChart.vue
new file mode 100644
index 0000000..5af3e3a
--- /dev/null
+++ b/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>
diff --git a/src/views/realtimeSecurity/index.vue b/src/views/realtimeSecurity/index.vue
index d9355fe..06156ab 100644
--- a/src/views/realtimeSecurity/index.vue
+++ b/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}),"烟雾传感器");
   }
diff --git a/src/views/realtimeSecurityJixiefenchang/index.vue b/src/views/realtimeSecurityJixiefenchang/index.vue
index 9c34fda..2d2e99f 100644
--- a/src/views/realtimeSecurityJixiefenchang/index.vue
+++ b/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") {    
+  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}),"烟雾传感器");
   }