大屏组件构建

src/components/3DMap/Loading.vue

@@ -39,9 +39,9 @@ export default {
     background: rgba(23,65,72,0.5)
   }
   .loading-bar{
-    width: 300px;height: 300px;background: url("/data/loading.png") no-repeat center/contain;
+    width: 300px;height: 300px;background: url("/data/loading.gif") no-repeat center/contain;
     border-radius: 10px;
-    animation: loading 10ms linear infinite;
+    /*animation: loading 10ms linear infinite;*/
   }
   @keyframes loading {
     from{

src/components/3DMap/Map3D.vue

@@ -1,11 +1,16 @@
 <template>
-  <div class="full" id="viewer-container"></div>
+  <div class="full">
+    <div class="full" id="viewer-container"></div>
+    <info-layer></info-layer>
+  </div>
 </template>
 
 <script>
+ import InfoLayer from "./map-components/InfoLayer";
  let viewer = undefined;
 export default {
   name: "Map3D",
+  components: {InfoLayer},
   data(){
     return{
       //默认场景参数
@@ -46,12 +51,14 @@ export default {
         })
       )
     },
+
     //添加建筑矢量数据，url为建模json数据
     addBuildingData(url){
       this.$viewer.scene.primitives.add(
         new Cesium.Cesium3DTileset({url})
       );
     },
+
     //指定相机位置
     flyToPosition(longitude,latitude,height,heading,pitch,roll){
       this.$viewer.camera.flyTo({
@@ -77,10 +84,14 @@ export default {
         }
       );
     },
+
     //去除覆盖物
     removeEntity(id){
       this.$viewer.entities.removeById(id);
     },
+
+    test(){},
+
     onload(){
       //创建场景实例
       this.initMap();

src/components/3DMap/POIService.vue

@@ -55,7 +55,7 @@ export default {
   props: {
     city: {
       type: 'String',
-      default: '郑州市'
+      default: '全国'
     },
     borderColor: {
         type: 'Array',
@@ -93,6 +93,7 @@ export default {
   },
   inject: ['screen'],
   methods: {
+
     toTarget(item){
       this.screen.$refs['map'].removeEntity("placeSearchLabel");
       this.screen.$refs['map'].addBillBoard(item.location.lng,item.location.lat,0,'/data/device.png',{

src/components/3DMap/map-components/InfoBox1.vue

@@ -1,17 +0,0 @@
-<template>
-  <div style="width: 300px;height: 300px;background: #00f9cf"></div>
-</template>
-
-<script>
-export default {
-  name: "InfoBox1"
-}
-</script>
-
-<style scoped>
-.infoBoxImg {
-  background-image:
-    linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
-    linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
-}
-</style>

src/components/3DMap/map-components/InfoLayer.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="info-layer">
+      <box1 v-for="item of box1" :title="item.title" :position="item.position" :data="item.data"></box1>
+  </div>
+</template>
+
+<script>
+import Box1 from "./infobox/box1";
+export default {
+  name: "InfoLayer",
+  components: {Box1},
+  data(){
+    return{
+      box1: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.info-layer{
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  pointer-events: none;
+}
+</style>

src/components/3DMap/map-components/infobox/box1.vue

@@ -0,0 +1,105 @@
+<template>
+    <div id="box1" :style="{
+      top: position[0]+'px',
+      left: position[1]+ 'px'
+    }">
+      <div class="wrap">
+        <!--  边框  -->
+        <div class="border" style="top: 0px;width: 208px;height: 1px;margin-left: 42px"></div>
+        <div class="border" style="bottom: 50px;width: 208px;height: 1px;"></div>
+        <div class="border" style="bottom: 50px;width: 1px;height: 208px;"></div>
+        <div class="border" style="top: 0px;width: 1px;height: 208px;right: 0px"></div>
+        <div class="border" style="top: 0px;left: 50px;transform: rotate(45deg) translate(8px, -20px);height: 58px;width: 1px"></div>
+        <div class="border" style="bottom: 50px;right: 0px;transform: rotate(45deg) translate(-8px, 20px);height: 58px;width: 1px;"></div>
+        <!--  标题      -->
+        <div style="height: 10px"></div>
+        <div class="title center">
+          {{title}}
+        </div>
+        <div style="width: 220px;margin-left: 30px;height: 1px;background: #29baf1;margin-top: 5px;box-shadow: 0 0 10px 2px #29baf1;"></div>
+
+      <!--  内容   -->
+        <div v-if="data.length>0" style="width: 230px;height: 190px;margin: auto;color: #ffffff;overflow: hidden">
+            <div v-for="(item,index) of data" :key="item" style="width: 100%;height: 40px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis" class="center">
+              <div class="lable center" style="width: 35%;height: 100%;">{{item.label}}</div>
+              <div class="content center" style="width: 65%;height: 100%;justify-content: left">{{item.value}}</div>
+            </div>
+        </div>
+
+        <div v-else style="width: 230px;height: 190px;margin: auto;color: #ffffff;overflow: hidden">
+          <div  style="width: 100%;height: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis" class="center">
+             暂无数据
+          </div>
+        </div>
+      </div>
+      <div class="line"></div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "box1",
+  props: {
+    title: {
+      type: "String",
+      default: '建筑'
+    },
+    data: {
+      type: "Array",
+      default: []  //[ {label: '姓名' , value: '梁汉强'}]
+    },
+    position: {
+      type: "Array",
+      default: [0,0]
+    }
+  }
+}
+</script>
+
+<style scoped>
+.full{
+  width: 100%;
+  height: 100%;
+}
+#box1{
+  width: 300px;
+  height: 300px;
+  position: absolute;
+  /*background: #ffffff;*/
+  top: 30%;
+  left: 30%;
+}
+.wrap{
+  width: 250px;
+  height: 250px;
+  margin-left: 50px;
+  background-image:
+    linear-gradient(135deg, transparent 30px, #28abf06c 30px, #28abf06c 50%, transparent 50%),
+    linear-gradient(-45deg, transparent 30px, #28abf06c 30px, #28abf06c 50.1%, transparent 50%);
+}
+.line{
+  height: 70px;
+  width: 1px;
+  background: linear-gradient(to top, #00bdff, #11bcf8);
+  transform: rotate(45deg) translate(10px, -25px);
+}
+.center{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.border{
+  position: absolute;
+  background-color: #29baf1;
+  box-shadow: 0 0 10px 2px #29baf1;
+}
+.title{
+  letter-spacing: 5px;
+  color: white;
+  font-weight: bold;
+  width: 220px;
+  height: 40px;
+  margin-left: 30px;
+  background-image: linear-gradient(135deg, transparent 25px, #2299c4 25px);
+}
+</style>

src/components/scene/CityScreen.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="full">
+  <div class="full" >
 
     <!-- 数据面板1   -->
     <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;left: 10px">

src/views/grid/mainScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full" style="background: #235e70">
-
+<!--    <info-box1></info-box1>-->
     <dv-loading v-if="false" style="color: #dddddd"> 数据加载中 </dv-loading>
 
     <!--  自定义地图  -->
@@ -63,7 +63,7 @@ import EventScreen from "../../components/scene/EventScreen";
 import POIService from "../../components/3DMap/POIService";
 export default {
   name: "mainScreen",
-  components: {POIService, CityScreen,TraficScreen,EventScreen, TopMenu, TimeBar, Map3D,CstorLivePlayer},
+  components: { POIService, CityScreen,TraficScreen,EventScreen, TopMenu, TimeBar, Map3D,CstorLivePlayer},
   mounted() {
     this.scene =0;
   },
@@ -71,7 +71,7 @@ export default {
     return{
         scene: 0,
       videoShow: false,
-        sceneMenu: ["首页","城市交通","事件处理","应急处理","监控管理","疫情管理","环保"]
+        sceneMenu: ["首页","城市交通","事件应急","监控管理","疫情管理","环保"]
     }
   },
   provide(){
@@ -106,6 +106,7 @@ export default {
   .full{
     width: 100%;
     height: 100%;
+    user-select:none;
   }
   .center{
     display: flex;