模型处理

src/components/3DScene/top-bar/top-bar.vue

@@ -16,7 +16,9 @@
       </div>
     </div>
 
-    <div style="width:60%;height: 100%">
+    <div class="center" style="width:60%;height: 100%;justify-content: right">
+      <el-page-header v-if="showBack" @back="$router.go(-1)" content="楼栋详情">
+      </el-page-header>
     </div>
 
     <!-- 天气  -->
@@ -46,7 +48,8 @@ export default {
     await this.getWeather();
   },
   props: {
-    title: {type: 'String'}
+    title: {type: 'String'},
+    showBack: {type: 'Boolean',default: false}
   },
   data(){
     return{
@@ -63,6 +66,9 @@ export default {
     },
   },
   methods: {
+    back(){
+      this.$router.go(-1);
+    },
     logout() {
       this.$confirm('退出系统, 是否继续?', {
         confirmButtonText: '确定',
@@ -194,4 +200,20 @@ export default {
       transform: translateX(-8px);
     }
   }
+ /deep/ .el-page-header__title {
+    color: white;
+    font-size: 24px;
+    font-weight: 500;
+  }
+ /deep/ .el-page-header__content {
+   font-size: 18px;
+   color: #acacac;
+ }
+  /deep/ .el-page-header__left .el-icon-back {
+    font-size: 18px;
+    color: white;
+    margin-right: 6px;
+    -ms-flex-item-align: center;
+    align-self: center;
+  }
 </style>

src/components/scene/floorScene.vue

@@ -1,10 +1,12 @@
 <template>
   <div style="position: absolute;width: 100%;height: 100%;top: 0;overflow: hidden;pointer-events: none">
     <!-- 企业名录  -->
-    <info-box class="toRight" top="8%" left="5px" width="22%" height="30%" title="企业名录" :more="true">
+    <info-box mode="right-min" class="toRight" top="8%" left="5px" width="22%" height="30%" title="企业名录" :more="true">
         <div class="center" style="width: 100%;height: 20%;">
-          <el-select style="width: 40%;padding: 10px"></el-select>
-          <el-input  placeholder="请输入关键字" style="width: 40%;padding: 10px"></el-input>
+          <el-select v-model="typeSearch" style="width: 40%;padding: 10px">
+              <el-option v-for="item of selectOptin" :key="item" :label="item" :value="item" ></el-option>
+          </el-select>
+          <el-input v-model="textSearch"  placeholder="请输入关键字" style="width: 40%;padding: 10px"></el-input>
         </div>
       <div style="width: 96%;margin: auto;height: 78%;overflow-y: scroll">
         <table  style="width: 100%;height: auto;text-align: center;">
@@ -13,7 +15,7 @@
             <th>楼层</th>
             <th>类型</th>
           </tr>
-          <tr class="enterprise-item" v-for="(item,index) of enterpriseInfoList" :key="item" style="width: 100%;height: 35px;color: white">
+          <tr class="enterprise-item" v-for="(item,index) of searchRes" :key="item" style="width: 100%;height: 35px;color: white">
             <td>{{item.name}}</td>
             <td>{{item.floor}}</td>
             <td>{{item.type}}</td>
@@ -23,7 +25,7 @@
     </info-box>
 
     <!-- 消防设施异常状态   -->
-    <info-box  class="toRight" top="calc(38% + 5px)" left="5px" width="22%" title="消防设施异常状态" height="30%" :more="true">
+    <info-box mode="right-min"  class="toRight" top="calc(38% + 5px)" left="5px" width="22%" title="消防设施异常状态" height="30%" :more="true">
       <div class="full" style="display: flex;flex-wrap: wrap;">
           <div v-for="(item,index) of deviceList" class="device-bg" :style="{background: `url(${item.bg}) no-repeat center/50%`}">
             <div class="center" style="width: 100%;height: 80%;" :style="{color: index>2?'#f12f2f':'#69ffe2' }">{{item.data}}</div>
@@ -33,7 +35,7 @@
     </info-box>
 
     <!-- 招租统计  -->
-    <info-box class="toRight" top="69%" left="5px" width="22%" height="28%" title="招租统计" :more="true">
+    <info-box mode="right-min" class="toRight" top="69%" left="5px" width="22%" height="28%" title="招租统计" :more="true">
       <div class="full center" style="flex-direction: column">
         <div v-for="item of houseInfoList" class="center" style="width: 96%;height: 50px;color: white">
           <div class="center" style="width: 25%;font-weight: 700;letter-spacing: 5px">{{item.name}}</div>
@@ -48,7 +50,7 @@
     </info-box>
 
     <!-- 视频监控  -->
-    <info-box class="toLeft" top="8%" right="5px" width="22%" height="40%" title="视频监控" :more="true">
+    <info-box mode="left-min" class="toLeft" top="8%" right="5px" width="22%" height="40%" title="视频监控" :more="true">
       <div class="full" style="display: flex;flex-wrap: wrap">
         <div class="center" v-for="item of videoList" :key="item" style="width: 50%;height: 50%;background: #050505;">
 <!--          <video src="/video/video1.mp4"></video>-->
@@ -66,26 +68,26 @@
     </info-box>
 
     <!-- 本月巡检统计  -->
-    <info-box class="toLeft" top="48.2%" right="5px" width="22%" height="25%" title="本月巡检统计" :more="true">
+    <info-box mode="left-min" class="toLeft" top="48.2%" right="5px" width="22%" height="25%" title="本月巡检统计" :more="true">
       <div class="full" id="checkInfo">
 
       </div>
     </info-box>
 
     <!-- 设备实时上报  -->
-    <info-box class="toLeft " top="73.5%" right="5px" width="22%" height="25%" title="设备实时上报" :more="true">
+    <info-box mode="left-min" class="toLeft " top="73.5%" right="5px" width="22%" height="25%" title="设备实时上报" :more="true">
       <div class="full center">
-        <dv-scroll-board :config="config" style="width: 96%;height: 98%" />
+        <dv-scroll-board :key="devicePanel" ref="device" :config="config" style="width: 96%;height: 98%" />
       </div>
     </info-box>
 
     <!-- 招租营收趋势  -->
-    <info-box class="toTop" bottom="2%" right="23%" width="26.5%" height="25%" title="招租营收趋势" :more="true">
+    <info-box mode="top-min" class="toTop" bottom="2%" right="23%" width="26.5%" height="25%" title="招租营收趋势" :more="true">
       <div class="full" id="rentInfo"></div>
     </info-box>
     <!--  电能实时负荷情况   -->
-    <info-box class="toTop" bottom="2%" left="23%" width="26.5%" height="25%" title="电能实时负荷情况" :more="true">
-      <div class="full" id="electricityInfo"></div>
+    <info-box mode="top-min" class="toTop" bottom="2%" left="23%" width="26.5%" height="25%" title="电能实时负荷情况" :more="true">
+      <div class="full"  id="electricityInfo"></div>
     </info-box>
   </div>
 </template>
@@ -98,6 +100,7 @@ export default {
   components: {InfoBox},
   mounted() {
     this.initCharts();
+    this.searchRes = this.enterpriseInfoList;
     window.addEventListener('resize', this.resize);
     setInterval(()=>{
       let list= this.eventList;
@@ -106,8 +109,37 @@ export default {
       this.eventList = list;
     },3000)
     },
+  watch:{
+    $route(){
+      this.resize()
+    },
+    typeSearch(){
+      if(this.typeSearch=="全部"){
+        this.searchRes = this.enterpriseInfoList;
+        return
+      }
+      this.searchRes = this.enterpriseInfoList.filter(item => item.type==this.typeSearch)
+    },
+    textSearch(){
+      this.searchRes = this.enterpriseInfoList.filter(item => item.name.indexOf(this.textSearch)>-1)
+    },
+  },
   data(){
     return{
+      devicePanel: new Date(),
+      isOpen: true,
+      typeSearch: "全部",
+      textSearch: "",
+      searchRes: [],
+      selectOptin: [
+        "全部",
+        "医疗健康",
+        "物流运输",
+        "文化传媒",
+        "信息技术",
+        "食品加工",
+        "制造业",
+      ],
       controls: {},
       config: {
         header: ['告警时间', '上报人员', '上报内容'],
@@ -316,10 +348,21 @@ export default {
     }
   },
   methods: {
+    infoBoxShow(){
+      this.isOpen= !this.isOpen;
+      this.$children.forEach(item => {
+        if(typeof item['isOpen'] != 'undefined'){
+          item['isOpen'] = this.isOpen;
+        }
+      })
+    },
     resize(){
       this.rentInfo.resize();
       this.electricityInfo.resize();
       this.checkInfo.resize();
+      this.$refs['device'].onResize();
+      //更新key值，进行重绘
+      this.devicePanel = new Date();
     },
     initCharts(){
       this.rentInfo = echarts.init(document.getElementById('rentInfo'));
@@ -443,4 +486,9 @@ export default {
   @keyframes  width-wave{
     0% {width: 0}
   }
+  .el-select-dropdown__item.selected {
+    color: #c8c8c8;
+    text-shadow: 2px 2px 2px #75ffb3;
+    font-weight: 700;
+  }
 </style>

src/components/scene/mainScene.vue

@@ -139,6 +139,11 @@ export default {
       this.eventList = list;
     },3000)
     },
+  watch:{
+    $route(){
+      this.resize()
+    }
+  },
   data(){
     return{
       isOpen: true,

src/views/park/floorView.vue

@@ -4,11 +4,12 @@
     <!--  背景--3D场景   -->
     <scene3-d ref="scene" :controls-option="controlsOption" :camera-option="cameraOptions"></scene3-d>
     <!-- 顶部导航-->
-    <top-bar  title="信阳榕基软件园"></top-bar>
+    <top-bar show-back=true  title="信阳榕基软件园"></top-bar>
+
     <!-- 数据面板  -->
-    <floor-scene></floor-scene>
+    <floor-scene ref="data-panel"></floor-scene>
      <!--  工具栏   -->
-    <tools-bar :option="toolsOption"></tools-bar>
+    <tools-bar  :option="toolsOption"></tools-bar>
   </div>
 </template>
 
@@ -21,12 +22,13 @@ import ToolsBar from "../../components/3DScene/tools-bar/tools-bar";
 import {fullscreenToggel} from "../../util/util";
 export default {
   name: "floorView",
-  components: {ToolsBar, FloorScene, Scene3D},
+  components: {TopBar, ToolsBar, FloorScene, Scene3D},
   data(){
     return{
       toolsOption:[
         { icon: '/data/round.png',name: '旋转',event:this.round},
         { icon: '/data/full.png',name: '全屏',event:this.handleFull},
+        { icon: '/img/infobox.png',name: '信息框',event:()=>{this.$refs['data-panel'].infoBoxShow()}},
       ],
       controlsOption: {
         minDistance : 0,
@@ -40,13 +42,13 @@ export default {
       cameraOptions: {
         position: [20,20,20],
         near: 0.1,
-        far: 1000,
+        far: 10000,
         lookAt: [0,0,0],
       },
       obj: [
         // '/floorObj/3H_SN/3H_SN.gltf',
-        // '/floorObj/5H_SN/5H_SN.gltf',
-        '/floorObj/7_12H_SN/7_12H_SN.gltf',
+        '/floorObj/5H_SN/5H_SN.gltf',
+        // '/floorObj/7_12H_SN/7_12H_SN.gltf',
         // '/floorObj/3H_SN/3H_SN.gltf',
         // '/floorObj/3H_SN/3H_SN.gltf',
         // '/floorObj/3H_SN/3H_SN.gltf',
@@ -63,11 +65,32 @@ export default {
     round() {
       this.$refs['scene'].controls.autoRotate=! this.$refs['scene'].controls.autoRotate;
     },
+
     async initScene() {
       //添加模型
         for (const item of this.obj) {
           await this.addGltf(item)
         }
+      this.$refs['scene'].scene.background = new Three.Color( 0x72645b);
+      this.$refs['scene'].scene.fog = new Three.Fog( 0x72645b, 70, 100 );
+
+
+      //灯光
+
+      const dirLight = new Three.DirectionalLight( 0xffffff );
+      dirLight.position.set( 0, 20, 10 );
+      this.$refs['scene'].scene.add( dirLight );
+
+      //地面
+      const mesh = new Three.Mesh( new Three.PlaneGeometry( 2000, 2000 ), new Three.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
+      mesh.rotation.x = - Math.PI / 2;
+      this.$refs['scene'].scene.add( mesh );
+
+      const grid = new Three.GridHelper( 200, 40, 0x000000, 0x000000 );
+      grid.material.opacity = 0.2;
+      grid.material.transparent = true;
+      this.$refs['scene'].scene.add( grid );
+
 
       //自旋转
       this.$refs['scene'].controls.autoRotate = true;
@@ -92,13 +115,12 @@ export default {
             }
             } );
           },
-          (xhr)=>{}); 
+          (xhr)=>{});
   }
   },
-  
+
 }
 </script>
 
 <style scoped>
-
-</style>
+</style>