123

src/layoutMain/components/Navbar.vue

@@ -175,6 +175,7 @@ function setLayout() {
   display: flex;
   justify-content: space-between;
   background: url('@/assets/images/top_banner_deep.png') no-repeat #000000;
+  background-size: 100% 100%;
 
   .left {
     width: 33%;

src/views/bim/bimHome/components/BasicInfo.vue

@@ -11,12 +11,19 @@
             </div>
         </div>
         <div class="right-div">
-            <img :src="getAssetsFile(infoList.imgUrl)" alt="" width="400">
+            <!-- <img :src="getAssetsFile(infoList.imgUrl)" alt="" width="400"> -->
+            <img :src="licang" alt="" width="400" v-if="infoList.imgUrl == 'licang'">
+            <img :src="guolvcao" alt="" width="400" v-else-if="infoList.imgUrl == 'guolvcao'">
+            <img :src="device" alt="" width="400" v-else>
             <span>设备图片</span>
         </div>
     </div>
 </template>
+
 <script setup>
+import licang from '@/assets/images/licang.jpg';
+import guolvcao from '@/assets/images/guolvcao.jpg';
+import device from '@/assets/images/device.jpg'
 const props = defineProps({
     infoList: {
         default: {},

src/views/bim/bimHome/components/DeviceDetial.vue

@@ -67,7 +67,7 @@ const deviceData = {
             },
             {
                 name: '距离过保天数',
-                value: '-34天'
+                value: '314天'
             },
             {
                 name: '设备二维码',
@@ -75,7 +75,7 @@ const deviceData = {
             },
         ]
     },
-    'guolvcao': {
+    'guolvcao_1': {
         name: '过滤槽',
         imgUrl: 'guolvcao',
         detail: [
@@ -125,7 +125,7 @@ const deviceData = {
             },
             {
                 name: '距离过保天数',
-                value: '-34天'
+                value: '34天'
             },
             {
                 name: '设备二维码',
@@ -199,7 +199,7 @@ const defaultData = {
         },
         {
             name: '距离过保天数',
-            value: '-34天'
+            value: '84天'
         },
         {
             name: '设备二维码',

src/views/bim/bimHome/components/DeviceEvent.vue

@@ -67,7 +67,7 @@ const openDialog = () => {
 <style lang='scss' scoped>
 .deviceDiv {
     position: absolute;
-    top: 380px;
+    bottom:20px;
     
     right: 10px;
     width: 360px;

src/views/bim/bimHome/components/DeviceInfo.vue

@@ -46,7 +46,6 @@ watch(() => bimStore().activateDevice.info, value => deviceInfo.value = value);
     top: 10px;
     right: 10px;
     width: 360px;
-    height: 340px;
     display: flex;
     flex-direction: column;
     align-items: center;

src/views/bim/bimHome/components/EquipmentInfo.vue

@@ -54,7 +54,6 @@ const { equipmentInfo } = toRefs(data);
     top: 10px;
     right: 10px;
     width: 360px;
-    height: 340px;
     display: flex;
     flex-direction: column;
     align-items: center;

src/views/bim/bimHome/components/MenuTab.vue

@@ -12,7 +12,7 @@ import Bus from '@/utils/bus.js';
 const menuList = [
     {
         name: '建筑信息',
-        background: '#000000'
+        background: '#091d36'
     },
     {
         name: '资产信息',

src/views/bim/bimHome/components/RealData.vue

@@ -61,7 +61,7 @@ const openDialog = () => {
 <style lang='scss' scoped>
 .deviceDiv {
     position: absolute;
-    top: 380px; 
+    bottom: 20px; 
     right: 10px;
     width: 360px;
     display: flex;

src/views/bim/bimHome/components/ThreeView2.vue

@@ -39,6 +39,16 @@
                 <span class="red"></span>大于3年
             </p>
         </div>
+        <!-- <div class="stop_tooltips" v-show="isShowstart" @click="stop">
+            <p>
+                停止
+            </p> 
+        </div>
+        <div class="con_tooltips" v-show="isShowstart" @click="continu">
+            <p>
+                继续
+            </p> 
+        </div> -->
     </div>
 </template>
 <script setup>
@@ -49,7 +59,9 @@ import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
 import { RoomEnvironment } from "three/examples/jsm/environments/RoomEnvironment.js";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import TWEEN from "@tweenjs/tween.js";
-import imgs from "../../../../assets/finish.png";
+import imgs from "../../../../assets/images/online-set.png";
+import imgs1 from "../../../../assets/images/break-set.png";
+import imgs2 from "../../../../assets/images/wait.png";
 import {
     CSS2DObject,
     CSS2DRenderer,
@@ -71,7 +83,7 @@ onMounted(() => {
     });
     // document.addEventListener("mousemove", onMouseMove);
 });
-let scene, renderer, camera, controls, clickedObject, model;
+let scene, renderer, camera, controls, clickedObject, model, animal1, animal2;
 
 // 克隆颜色和模型
 let objArr = [];
@@ -89,9 +101,10 @@ let labelRenderer = new CSS2DRenderer(); //新建CSS2DRenderer
 const data = reactive({
     isAddLabel: true,
     isRemoveBottom: true,
-    isShowWall: false //墙体
+    isShowWall: false, //墙体，
+    isShowstart: false
 });
-const { isAddLabel, isRemoveBottom, isShowWall } = toRefs(data);
+const { isAddLabel, isRemoveBottom, isShowWall, isShowstart } = toRefs(data);
 // 建筑树点击
 Bus.on('clickBuild', (isParent) => {
     // Todo
@@ -128,8 +141,6 @@ watch(() => bimStore().activateMenu, value => {
     // 更换场景颜色
     scene.background = new THREE.Color(value.background);
     toHomeView();
-    // 移除消防图标
-    removexf();
 }, { deep: true });
 
 const init = () => {
@@ -148,6 +159,7 @@ const init = () => {
     document.getElementById('gltf').appendChild(renderer.domElement);
 
     controls = new OrbitControls(camera, renderer.domElement);
+    controls.minDistance = 15;
     const pmremGenerator = new THREE.PMREMGenerator(renderer);
     scene.environment = pmremGenerator.fromScene(new RoomEnvironment()).texture;
     var vector = new THREE.Vector3();
@@ -299,6 +311,7 @@ const onMouseDownRight = (event) => {
 }
 // 鼠标点击效果
 const onMouseDown = (event) => {
+    removeLabel();
     var raycaster = new THREE.Raycaster()
     // 将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标
     mouse.x = ((event.clientX - marginLeft) / window.innerWidth) * 2 - 1;
@@ -364,6 +377,7 @@ const cleanColor = () => {
 }
 // 预警
 const warn = () => {
+    removeLabel();
     ['T7'].forEach(item => {
         warnSets.push(scene.getObjectByName(item));
     })
@@ -428,6 +442,9 @@ const toHomeView = () => {
     cleanColor();
     // 隐藏图例
     isShowWall.value = false;
+    isShowstart.value = false;
+    // 移除消防图标
+    removexf();
 }
 // 拉近距离
 const nearCamera = (floor) => {
@@ -448,6 +465,7 @@ const nearCamera = (floor) => {
 const setLabel = () => {
     if (isAddLabel.value) {
         let obj = scene.getObjectByName('T11');
+        console.log(123, obj)
         addLabel(obj, 'title');
     } else {
         removeLabel();
@@ -474,9 +492,10 @@ const createLableObj = (text, t) => {
     if (t === 'title') {
         laberDiv.className = "laber_name";
         laberDiv.innerHTML = `<div class="arrow_outer">
-            <div>设备名称：${text}</div>
-            <div>状态：启用</div>
-            <div>压力：50 Pa</div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
             </div>`
         //只显示详情
     } else if (t === 'details') {
@@ -486,32 +505,44 @@ const createLableObj = (text, t) => {
         laberDiv.addEventListener('click', function (event) {
             emit('handleRightClick', selectedObject);
             console.log(labelRenderer.domElement);
+            // 清除标签
+            removeLabel();
         })
         // 巡检逻辑
     } else {
         setTimeout(()=>{
-        laberDiv.innerHTML = `<div class="checking"><span class="text">巡检中...</span></div>`;
+        laberDiv.innerHTML = `<div class="arrow_state2">
+            <div class="title">
+                <img src=${imgs2} width="24px"/>
+                <span>巡检中</span>
+            </div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
+        </div>`
       },1000)
       setTimeout(()=>{
         laberDiv.className = "laber_state";
         let innerHTML = t ? `<div class="arrow_state">
-            <div>设备名称：${text}</div>
-            <div>
-                巡检结果：巡检通过 
+            <div class="title">
                 <img src=${imgs} width="24px"/>
-            </div>
-            <div>
-                巡检时间：2023-12-23
-            </div>
+                <span>巡检通过</span>
+                </div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div>温度：25.2℃</div>
+            <div>压力：15Bar</div>
         </div>`: `<div class="arrow_state1">
-            <div>设备名称：${text}</div>
-            <div>
-                巡检结果：巡检不通过，已记录异常
-                <img src=${imgs} width="24px"/>
-            </div>
-            <div>
-                巡检时间：2023-01-11
+            <div class="title">
+                <img src=${imgs1} width="24px"/>
+                <span>发现异常</span>
             </div>
+            <div>名称：${text}</div>
+            <div>容积：80m³</div>
+            <div class="ycdiv">温度：25.2℃</div>
+            <div>压力：15Bar</div>
+            <div class="title">已记录</div>
         </div>`;
 
         laberDiv.innerHTML = innerHTML;
@@ -530,6 +561,7 @@ const removeLabel = () => {
 
 // 设置地板
 const setBottom = () => {
+    removeLabel();
     var target = scene.getObjectByName('tanghua_2F');
     centerSelectedGroup(target);
     console.log(target);
@@ -590,7 +622,9 @@ const removexf = () => {
 }
 // 更换纹理贴图方法
 const changeMap = (img) => {
+    removeLabel();
     isShowWall.value = true;
+    isShowstart.value = false;
     // 获取墙体
     model.traverse(e => {
         if (['touliao_wall1', 'touliao_wall2', 'touliao_wall3', 'touliao_wall4', 'touliao_wall5', 'touliao_wall6', 'touliao_wall7', 'touliao_wall8'].indexOf(e.name) != -1) {
@@ -623,6 +657,9 @@ const changeMap = (img) => {
 }
 // 巡检
 const check = () => {
+    isShowstart.value = true;
+    isShowWall.value = false;
+    removeLabel();
     let yn = 8, duration = 0;
     if (checkindex < checkArr.length ) {  
          // 1，提前把下一个目标找到，转动镜头
@@ -639,18 +676,19 @@ const check = () => {
             duration = 10
         }
          // 2，转动镜头
-        gsap.to(controls.target, {
+        animal1 = gsap.to(controls.target, {
             x: nextObj.x,
-            y: nextObj.y + 2,
+            y: nextObj.y,
             z: nextObj.z,
             duration: duration,
             ease: "power1.inOut",
             onComplete: () => {
+                controls.enabled = false;
                 // 3，移动摄像机
-                gsap.to(camera.position, {
-                    x: nextObj.x-0.5,
-                    y: nextObj.y + yn,
-                    z: nextObj.z,
+                animal2 = gsap.to(camera.position, {
+                    x: nextObj.x + 2,
+                    y: nextObj.y + 6,
+                    z: nextObj.z + 4,
                     duration: 10,
                     ease: 'power1.inOut',
                     onComplete: () => { 
@@ -678,7 +716,14 @@ const checkComplete = () => {
     emit('checkComplete', checkArr);
     return;
 }
-
+const stop = () => { 
+    animal1.pause();
+    animal2.pause();
+}
+const continu = () => { 
+    animal1.resume();
+    animal2.resume();
+}
 </script>
 <style lang='scss'>
 #gltf {
@@ -711,19 +756,15 @@ const checkComplete = () => {
     }
 }
 
-.laber_name {
-    width: 120px;
-    height: 90px;
-    padding: 5px 10px;
-    white-space: nowrap;
-    background-color: #ffffffb3;
-    border-radius: 12px;
-    font-size: 12px;
-    display: flex;
-    flex-direction: column;
-
-    span {
-        line-height: 24px;
+.arrow_outer {
+    display: inline-block;
+    padding: 10px;
+    background: #999999;
+    color: #000;
+    padding: 15px;
+    border-radius: 5px;
+    >div {
+        line-height: 32px;
     }
 }
 
@@ -739,6 +780,71 @@ const checkComplete = () => {
     justify-content: center;
     z-index: 999;
 }
+
+.arrow_state {
+    display: inline-block;
+    padding: 10px;
+    background: #68774f;
+    color: #000;
+    padding: 15px;
+    border-radius: 5px;
+    .title {
+        color: #81b337;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
+
+    >div {
+        line-height: 32px;
+    }
+}
+
+.arrow_state1 {
+    display: inline-block;
+    padding: 10px;
+    background: #6e5053;
+    color: #000;
+    padding: 15px;
+    border-radius: 5px;
+    .title {
+        color: #bd3124;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
+    .ycdiv {
+        border: 1px solid #bd3124;
+        padding: 2px 5px;
+    }
+    >div {
+        line-height: 32px;
+    }
+}
+.arrow_state2 {
+    display: inline-block;
+    padding: 10px;
+    background: #999999;
+    color: #000;
+    padding: 15px;
+    border-radius: 5px;
+    .title {
+        color: #d79c55;
+        display: flex;
+        align-items: center;
+        span{
+            margin-left:5px;
+        }
+    }
+    >div {
+        line-height: 32px;
+    }
+}
+
 .wall_tooltips {
     position: absolute;
     top: 20px;
@@ -773,39 +879,23 @@ const checkComplete = () => {
         }
     }
 }
-.arrow_outer {
-    width: 100px;
+.stop_tooltips, .con_tooltips {
+    position: absolute;
+    bottom: 50px;
+    right: 500px;
+    z-index: 999;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    >div {
-        line-height: 24px;
-    }
-}
-.arrow_state {
-  display: inline-block;
-  width: 220px; 
-  background: #2dfa82c4;
-  color: #fff;
-  padding: 15px;
-  border-radius: 5px;
-  >div {
-        line-height: 32px;
-    }
-}
-.arrow_state1 {
-    
-    display: inline-block;
-    width: 220px; 
-    background: #e03528;
     color: #fff;
-    padding: 15px;
-    border-radius: 5px;
-
-    >div {
-        line-height: 32px;
-    }
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    justify-content: space-around;
+    align-items: center;
+    background: #3cbfdf;
+    cursor: pointer;
+}
+.con_tooltips { 
+    right: 560px;
 }
 @keyframes textAnimation {
     0% {

src/views/components/Bar.vue

@@ -21,7 +21,10 @@ const getCharts = () => {
         var myChart = echarts.init(dom);
         let option = {
             title: {
-                text: ''
+                text: '资产统计分析图',
+                textStyle: {
+                    color: "#fff",
+                },
             },
             tooltip: {
                 trigger: 'axis',
@@ -30,6 +33,7 @@ const getCharts = () => {
                 }
             },
             legend: {
+                bottom: 0,
                 textStyle: {
                     color: "#ffff",
                     fontFamily: "Alibaba PuHuiTi",
@@ -40,7 +44,7 @@ const getCharts = () => {
             grid: {
                 left: '12%',
                 right: '4%',
-                bottom: '5%'
+                bottom: '10%'
             },
             xAxis: [
                 {

src/views/index.vue

@@ -81,7 +81,7 @@ const gotoPage = (item) => {
     .pie-div {
       position: absolute;
       width: 400px;
-      height: 360px;
+      height: 45%;
       top: 10px;
       left: 10px;
       padding: 15px;
@@ -90,7 +90,7 @@ const gotoPage = (item) => {
     .bar-div {
       position: absolute;
       width: 400px;
-      height: 818px;
+      height: 98.4%;
       top: 10px;
       right: 10px;
       padding: 15px;
@@ -99,7 +99,7 @@ const gotoPage = (item) => {
     .xt-bar-div {
       position: absolute;
       width: 400px;
-      height: 460px;
+      height: 52%;
       bottom: 5px;
       left: 10px;
       padding: 15px;
@@ -110,7 +110,7 @@ const gotoPage = (item) => {
       top: 10px;
       left: 420px;
       width: calc(100% - 840px);
-      height: 200px;
+      height: 25%;
       padding: 15px;
       background-image: linear-gradient(to bottom,rgba(30,45,123,.7),rgba(174,179,249,.1));
     }
@@ -119,7 +119,7 @@ const gotoPage = (item) => {
       bottom: 5px;
       left: 420px;
       width: calc(100% - 840px);
-      height: 200px;
+      height: 25%;
       padding: 15px;
       // background: #b2cae0;
       background-image: linear-gradient(to top,rgba(30,45,123,.7),rgba(174,179,249,.1));