bim 应用大屏

yanzhu-bigscreen/src/views/bimManage.vue

@@ -19,18 +19,11 @@
             </div>
           </div>
           <div class="div-row">
-            <div class="row-title">
+            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 人员</div>
-              <svg-icon icon-class="signal"></svg-icon> 人员
-            </div>
           </div>
         </div>
       </transition>
-      <img
+      <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
-        :src="leftSrc"
-        class="toSafety-fixed-left-img"
-        @click="arrowRetract"
-        id="arrowLeft"
-      />
     </div>
     <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
       <transition name="right">
@@ -48,18 +41,11 @@
             </div>
           </div>
           <div class="div-row">
-            <div class="row-title">
+            <div class="row-title"><svg-icon icon-class="signal"></svg-icon> 项目全景</div>
-              <svg-icon icon-class="signal"></svg-icon> 项目全景
-            </div>
           </div>
         </div>
       </transition>
-      <img
+      <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
-        :src="rightSrc"
-        class="toSafety-fixed-right-img"
-        @click="arrowRetract"
-        id="arrowRight"
-      />
     </div>
 
     <div class="div-tools">
@@ -70,41 +56,25 @@
         <span class="sp-text">默认视点</span>
       </div>
 
-      <div
+      <div class="tool-item" @click="changeDevicType(1)" :class="{ 'is-active': devicTypes.includes(1) }">
-        class="tool-item"
-        @click="changeDevicType(1)"
-        :class="{ 'is-active': devicTypes.includes(1) }"
-      >
         <div class="icon">
           <svg-icon icon-class="videoMonitor" />
         </div>
         <span class="sp-text">视频监控</span>
       </div>
-      <div
+      <div class="tool-item" @click="changeDevicType(2)" :class="{ 'is-active': devicTypes.includes(2) }">
-        class="tool-item"
-        @click="changeDevicType(2)"
-        :class="{ 'is-active': devicTypes.includes(2) }"
-      >
         <div class="icon">
           <svg-icon icon-class="pitMonitor" />
         </div>
         <span class="sp-text">基坑监控</span>
       </div>
-      <div
+      <div class="tool-item" @click="changeDevicType(3)" :class="{ 'is-active': devicTypes.includes(3) }">
-        class="tool-item"
-        @click="changeDevicType(3)"
-        :class="{ 'is-active': devicTypes.includes(3) }"
-      >
         <div class="icon">
           <svg-icon icon-class="towerMonitor" />
         </div>
         <span class="sp-text">塔机监控</span>
       </div>
-      <div
+      <div class="tool-item" @click="changeDevicType(4)" :class="{ 'is-active': devicTypes.includes(4) }">
-        class="tool-item"
-        @click="changeDevicType(4)"
-        :class="{ 'is-active': devicTypes.includes(4) }"
-      >
         <div class="icon">
           <svg-icon icon-class="power" />
         </div>
@@ -112,75 +82,80 @@
       </div>
     </div>
     <div class="test-box">
-      <div class="tag-box">
+      <div class='tag-box box-type-3'>
-        <img :src="'bimImages/3.png'" alt="" />
+          
-        <img class="tag-img" :src="'bimImages/videoMonitor.png'" style="" />
+          <div class='tag-txt' >
-        <span class="tag-txt" style="color: #ffffff; font-size: 14px">
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
-          aaa</span
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
-        >
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
-      </div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            
+          </div>
+          <img src='bimImages/4.png' alt='' class="tag-bg-img">
+            <img src='bimImages/towerMonitor.png' class="tag-img">
+        </div>
     </div>
   </div>
 </template>
 
 <script>
 const css = `<style>
-    .tag-box {
+.tag-box {
       position: relative;
+      display: flex;
+      flex-flow: column;
+      align-items: center;
     }
-    .tag-img{
+    .tag-img {
         width: 20px;
         height: 20px;
         position: absolute;
         left:50%;
-        bottom:33px;
+        bottom:55px;
         margin-left:-10px;
     }
-    .tag-txt {
-      position: absolute;
-      top: 30%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      text-align: center;
-      color: #ffffff;
-      display: flex;
-    }
     .tag-bg-img{
-     margin-bottom:13px;
+      width: 16px;
+      height: 80px;
+      margin-bottom:40px;
     }
-    .box-type-1 .tag-bg-img{
+    .tag-txt {
+      color: #FFF;
+      font-size: 12px;
+      padding: 10px;
+      background: #2b4d63de;
+      border: 1px solid #75fbfdaa;
+    }
+    .tag-txt .data-item.red{
+      color:red;
+    }
+    .tag-bg-img-1{
+        width:21px;
+        height:18px;
         position: absolute;
-        bottom:0px;
+        bottom:40px;
         left:50%;
         margin-left:-11px;
     }
-    
+    .tag-img-1 {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        left:50%;
+        bottom:55px;
+        margin-left:-10px;
+    }
     .box-type-1{
         height:60px;
         width:60px;
+        display:block;
     }
-    .box-type-1 .tag-txt{display:none;}
+    </style>`;
-    .loading {
-  width: 50px;
-  height: 50px;
-  border-radius: 100%;
-  background-color: #000;
-
-  animation: ball-scale infinite linear 0.75s;
-}
-
-@keyframes ball-scale {
-  0% {
-    transform: scale(0.1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-        </style>`;
 import debounce from "lodash.debounce";
 export default {
   data() {
@@ -199,6 +174,7 @@ export default {
       leftSrc: "./bimImages/arrow_left_retract.png",
       rightSrc: "./bimImages/arrow_right_retract.png",
       leftShow: true,
+      towerWarning:[],
     };
   },
   beforeDestroy() {
@@ -224,6 +200,10 @@ export default {
     console.log("----mount--->");
     document.body.classList.add("is-sapi");
     this.initEngine();
+    this.$api.dict("device_tower_warning").then(d => {
+      debugger
+      this.towerWarning = d;
+    });
   },
   methods: {
     arrowRetract() {
@@ -253,14 +233,11 @@ export default {
             .map((item) => {
               item.show = item.enabled != 0;
               item.position = this.$tryToJson(item.position, []);
-              item.elId =
+              item.elId = (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
-                (item.deviceId ? item.deviceId : cnt++) + "-" + item.deviceType;
               return item;
             })
             .filter((item) => item.position.length == 3);
-          this.showDevices = this.devices.filter((item) =>
+          this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
-            this.devicTypes.includes(item.deviceType)
-          );
           this.clearLabels();
           this.addDeviceLabel();
           setTimeout(() => {
@@ -275,9 +252,7 @@ export default {
       } else {
         this.devicTypes.push(n);
       }
-      this.showDevices = this.devices.filter((item) =>
+      this.showDevices = this.devices.filter((item) => this.devicTypes.includes(item.deviceType));
-        this.devicTypes.includes(item.deviceType)
-      );
       this.clearLabels();
       this.addDeviceLabel();
       setTimeout(() => {
@@ -285,31 +260,17 @@ export default {
       }, 100);
     },
     AddLable: function (item) {
-      let bg = "2.png";
+      let html = "";
-      let img = "videoMonitor";
       if (item.deviceType == 1) {
-        img = "videoMonitor";
+        html = this.getVideoHtml(item);
-        bg = "3.png";
       } else if (item.deviceType == 2) {
-        img = "pitMonitor";
+        html = this.getPitHtml(item);
       } else if (item.deviceType == 3) {
-        img = "towerMonitor";
+        html = this.getTowerHtml(item);
       } else if (item.deviceType == 4) {
-        img = "power";
+        html = this.getIotHtml(item);
       }
 
-      let html =
-        css +
-        `
-        <div class='tag-box box-type-${item.deviceType}'>
-          <img src='bimImages/${bg}' alt='' class="tag-bg-img">
-          <img src='bimImages/${img}.png' class="tag-img">
-          <div class='loading'></div>
-          <span class='tag-txt' style='color:#ffffff;font-size:14px'>
-            ${item.name} - 数据加载中。。。
-          </span>
-        </div>`;
-
       window.bimMgrApi.Label.addBalloon({
         Html: html,
         ID: item.elId,
@@ -490,13 +451,39 @@ export default {
       this.loadDevDatatimeOut = setTimeout(this.loadDeviceData, 60 * 1000);
     },
     getTowerHtml(item) {
-      let bg = "2.png";
+      let warning=item.warnings;
-      let img = "towerMonitor";
+      if(warning){
-
+        let tmps=this.towerWarning.filter(d=>d.value==item.warnings);
+        warning=tmps.length>0?tmps[0].label:'';
+      }
+      let warningHtml=warning? `<div class='data-item red'><span class='data-label'>警报：</span><span class='data-value'>${warning}</span></div>`:'';
       return (
         css +
         `
         <div class='tag-box box-type-3'>
+          <div class='tag-txt'>
+            ${warningHtml}
+            <div class='data-item'><span class='data-label'>高度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>吊重：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>回转：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>幅度：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>风速：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>水平倾角：</span><span class='data-value'>15m</span></div>
+            <div class='data-item'><span class='data-label'>垂直倾角：</span><span class='data-value'>15m</span></div>
+          </div>
+          <img src='bimImages/4.png' alt='' class="tag-bg-img">
+            <img src='bimImages/towerMonitor.png' class="tag-img">
+        </div>`
+      );
+    },
+    getIotHtml(item) {
+      let bg = "4.png";
+      let img = "power";
+
+      return (
+        css +
+        `
+        <div class='tag-box box-type-4'>
           <img src='bimImages/${bg}' alt='' class="tag-bg-img">
           <img src='bimImages/${img}.png' class="tag-img">
           <span class='tag-txt' style='color:#ffffff;font-size:14px'>
@@ -505,14 +492,24 @@ export default {
         </div>`
       );
     },
-    getIotHtml(item) {
+    getVideoHtml(item) {
-      let bg = "2.png";
+      return (
-      let img = "power";
+        css +
+        `
+        <div class='tag-box box-type-1'>
+          <img src='bimImages/3.png' alt='' class="tag-bg-img-1">
+          <img src='bimImages/videoMonitor.png' class="tag-img-1">
+        </div>`
+      );
+    },
+    getPitHtml(item) {
+      let bg = "4.png";
+      let img = "pitMonitor";
 
       return (
         css +
         `
-        <div class='tag-box box-type-3'>
+        <div class='tag-box box-type-2'>
           <img src='bimImages/${bg}' alt='' class="tag-bg-img">
           <img src='bimImages/${img}.png' class="tag-img">
           <span class='tag-txt' style='color:#ffffff;font-size:14px'>
@@ -638,23 +635,29 @@ export default {
     left: 10px;
     .tag-box {
       position: relative;
+      display: flex;
+      flex-flow: column;
+      align-items: center;
     }
     .tag-img {
-      width: 20px;
+     width: 20px;
-      height: 20px;
+        height: 20px;
-      position: absolute;
+        position: absolute;
-      left: 50%;
+        left:50%;
-      bottom: 18px;
+        bottom:18px;
-      margin-left: -10px;
+        margin-left:-10px;
+    }
+    .tag-bg-img{
+      width: 16px;
+      height: 80px;
     }
     .tag-txt {
-      position: absolute;
+      box-shadow: #1a9047 0px 4px 16px, rgba(10, 31, 68, .06) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
-      top: 30%;
+      color: #75fbfd;
-      left: 50%;
+      font-size: 12px;
-      transform: translate(-50%, -50%);
+      padding: 10px;
-      text-align: center;
+      background: #097fca63;
-      color: #ffffff;
+      border:solid 1px #75fbfdaa;
-      display: flex;
     }
   }
 }