增加模型

device-manager-ui/admin/package.json

@@ -10,12 +10,11 @@
     "build:prod": "vue-cli-service build --model prod"
   },
   "dependencies": {
-    "@tweenjs/tween.js": "^18.6.4",
-    "three-css2drender": "^1.0.0",
     "@ampproject/remapping": "^2.2.0",
     "@chenfengyuan/vue-qrcode": "^1.0.2",
     "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
+    "@tweenjs/tween.js": "^18.6.4",
     "@vue/babel-preset-app": "^4.5.13",
     "@xunlei/vue-context-menu": "^1.0.2",
     "axios": "^0.18.0",
@@ -33,7 +32,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sockjs-client": "^1.5.1",
-    "three": "^0.152.2",
+    "three-css2drender": "^1.0.0",
     "v-charts": "^1.17.10",
     "vue": "^2.6.14",
     "vue-amap": "^0.5.10",
@@ -62,6 +61,7 @@
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.5",
     "svg-sprite-loader": "5.1.1",
+    "three": "^0.149.0",
     "vue-formatter": "^0.0.8",
     "vue-template-compiler": "^2.6.10"
   },

device-manager-ui/admin/src/views/analysis/Analysis.vue

@@ -62,7 +62,7 @@
         </div>
       </div>
       <div class="center">
-        <three :floorArr="floorArr" lv="1"/>
+        <three :floorArr="floorArr" lv="1" :checkItem="checkDeviceItem"/>
       </div>
       <div class="right">
         <div class="right-content">
@@ -184,7 +184,7 @@ export default {
         waitTime: 2000,
       },
       realTimeInfo: {
-        header: ["设备名称", "告警次数", "告警时间", "告警类型"],
+        header: ["设备名称", "告警次数", "告警时间", "告警类型",'设备编码'],
         headerHeight: 30,
         headerBGC: "#3B5A9E",
         oddRowBGC: "",
@@ -205,9 +205,12 @@ export default {
       deviceFirmCollect: {}, // 设备厂家排名
       alarmLevelCollect: {}, // 今日告警等级分布
       deviceAlarmMapInfoList: [], // 实施告警消息
+      Statlist:[],//设备列表
+      checkDeviceItem:{}//选中设备
     };
   },
   created() {
+    this.getStatlist()
     this.getDevAlarm();
     this.getData();
     setTimeout(()=>{
@@ -216,8 +219,10 @@ export default {
   },
   methods: {
     // 点击设备
-    tabelRow(row){
-      console.log(row)
+    tabelRow(arr){
+      
+      const {rowIndex} = arr
+      this.checkDeviceItem = this.Statlist[rowIndex]
     },
     // 获取今日告警设备统计
     getDevAlarm() {
@@ -247,19 +252,18 @@ export default {
           this.siteDeviceAlarmCollect = siteDeviceAlarmCollect;
           this.alarmLevelCollect = alarmLevelCollect;
           this.deviceAlarmMapInfoList = deviceAlarmMapInfoList;
-          if (deviceAlarmMapInfoList.length) {
-            let arr = deviceAlarmMapInfoList.map((v) => {
-              return [
-                v.deviceName,
-                v.count,
-                v.alarmTime,
-                this.filterDevAlarmType(v.alarmType),
-              ];
-            });
+          // if (deviceAlarmMapInfoList.length) {
+          //   let arr = deviceAlarmMapInfoList.map((v) => {
+          //     return [
+          //       v.deviceName,
+          //       v.count,
+          //       v.alarmTime,
+          //       this.filterDevAlarmType(v.alarmType),
+          //     ];
+          //   });
             
-            this.realTimeInfo = { ...this.realTimeInfo, data: arr };
-          }
-          console.log(this.deviceAlarmMapInfoList,"@@@@@@@@@@@")
+          //   this.realTimeInfo = { ...this.realTimeInfo, data: arr };
+          // }
           let { 直连设备, 子设备, 网关设备 } = deviceConnTypeCollect;
           let { 在线, 离线, 缺纸 } = alarmTypeCollect;
           let firmName = Object.keys(deviceFirmCollect).map((key) => key);
@@ -286,6 +290,29 @@ export default {
         }
       );
     },
+    // 查询单个异常设备
+    getStatlist(){
+      this.$post("/device/alarm/info/statlist", { siteId: this.siteId }).then(res=>{
+        console.log(res,"@@@@@")
+        const {code,data} = res
+        if(code == 1){
+          this.Statlist = data || []
+          if (data.length) {
+            let arr = data.map((v) => {
+              return [
+                v.device.deviceName,
+                v.todayAlarmDeviceCount,
+                this.$moment(v.alarmTime).format('YYYY-MM-DD HH:mm'),
+                v.alarmTypeStr,
+                v.device.deviceCode
+              ];
+            });
+            
+            this.realTimeInfo = { ...this.realTimeInfo, data: arr };
+          }
+        }
+      })
+    },
     // 获取设备类型分布图标
     getDevTypeDisEchart(direct, subset, network) {
       let chartDom = document.getElementById("devTypeDis");

device-manager-ui/admin/src/views/analysis/components/three/three.vue

@@ -8,11 +8,18 @@
                         <div class="marke-win">{{ checkWind.window_name }}-{{ checkWind.window_fromnum }}</div>
                         <div class="marke-box">
                             <div class="marke-box-c">
+                                <p>设备编码:1565155</p>
+                                <p>MAC地址:70:70:70:70:70:705</p>
+                                <p>设备位置：1楼医保大厅</p>
+                                <p>负责人：刘德华</p> 
+                                <p>联系电话：13088088888</p>
                                 <p class="b">所在部门：{{ checkWind.section_name }}</p>
                                 <p class="y">办理业务：<span v-for="(itemm, index) in checkWind.business" :key="index"
                                         style="padding-right:5px">{{ itemm }}</span></p>
                             </div>
-                            <div class="ant-popover-arrow"></div>
+                            <div class="ant-popover-arrow">
+                                <img src="./ycjg.png" alt="">
+                            </div>
                         </div>
 
                     </div>
@@ -101,7 +108,7 @@ class PositionGUI {
 }
 let bmMark = []//dom节点
 export default {
-    props: ['lv', 'floorArr', 'winMarkeList', 'bm'],
+    props: ['lv', 'floorArr', 'winMarkeList', 'bm','checkItem'],//checkItem选中窗口
     data() {
         return {
             bmkb,//便民看板
@@ -114,6 +121,25 @@ export default {
         }
     },
     watch: {
+        checkItem:{
+            handler: function (str) {
+                let winName = str.device.deviceCode
+                // Tips.visible = true
+                console.log(keyobj,winName)
+                if (keyobj[winName]) {
+                    const { x, y, z } = keyobj[winName].positions
+                    Tips.position.set(x, y, z);//文字地址
+                    Tips.visible = true
+                    // camera.position.x = x*0.5;
+                    // camera.position.y = y*0.8;
+                    // camera.position.z = z;
+                } else {
+                    Tips.visible = false
+                    this._initCamera()
+                }
+            },
+            deep: true
+        },
         bm: {
             handler: function (str) {
                 // 保存节点
@@ -338,7 +364,7 @@ export default {
             let css2dom = document.getElementById('alert-css2')
             Tips = new CSS2DObject(css2dom);
             Tips.position.set(0, 0, 0);//文字地址
-            Tips.visible = false
+            Tips.visible = true
             scene.add(Tips);
             labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer 
             labelRenderer.setSize(screenW, screenH);
@@ -404,9 +430,9 @@ export default {
                         const children = obj.scene.children[0].children
                         children.forEach(element => {
                             let objname = element.name
-                            console.log(objname,"#######");
-                            // 窗口
-                            if (/^\d_/.test(objname)) {
+                            // console.log(objname,"#######");
+                            // mac地址模型
+                            if (objname,length == 17) {
                                 // 获取外部模型具体点击位置  obj模型没有位置
                                 element.geometry.computeBoundingSphere();
                                 // 球体中心点
@@ -578,42 +604,36 @@ export default {
 
 .marke {
     position: absolute;
-    width: 314px;
-
+    width: 200px;
+    background: rgba(183, 206, 255, .9);
     .marke-win {
         height: 40px;
         line-height: 40px;
-        background: #FFFFFF;
-        box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3);
-        border-radius: 16px;
+        background: rgba(59, 90, 158, 0.76);
         font-size: 20px;
         font-weight: bold;
-        color: #F77234;
+        color: #fff;
         padding: 0 24px;
         box-sizing: border-box;
     }
 
     .marke-box {
-        border-radius: 16px;
         margin-top: 4px;
-        padding: 12px 24px 0 24px;
-        background: #fff;
-        box-shadow: 0px 0px 8px 0px rgba(19, 43, 78, 0.3);
+        padding: 12px 12px 0 12px;
         position: relative;
 
         .marke-box-c {
             position: relative;
             z-index: 1;
-            background-color: #fff;
             height: 100%;
             padding-bottom: 12px;
         }
 
         p {
-            font-size: 14px;
-            font-weight: bold;
-            color: #F77234;
-            line-height: 30px;
+            font-size: 12px;
+            // font-weight: bold;
+            color: #fff;
+            line-height: 1.5;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
@@ -630,17 +650,10 @@ export default {
     .ant-popover-arrow {
         position: absolute;
         display: block;
-        width: 8.48528137px;
-        height: 8.48528137px;
-        background: transparent;
-        border-style: solid;
-        border-width: 8px;
-        transform: rotate(45deg);
+        width: 20px;
+        height: 20ox;
         left: 50%;
-        transform: translateX(-50%) rotate(45deg);
-        bottom: -6px;
-        border-color: transparent #fff #fff transparent;
-        box-shadow: 3px 3px 7px rgb(0 0 0 / 7%);
+        bottom: -40px;
     }
 
 }