绕点旋转

package.json

@@ -42,6 +42,7 @@
     "nprogress": "^0.2.0",
     "portfinder": "^1.0.23",
     "script-loader": "^0.7.2",
+    "three": "^0.128.0",
     "vue": "^2.6.10",
     "vue-axios": "^2.1.2",
     "vue-i18n": "^8.7.0",

src/components/3DMap/Map3D.vue

@@ -21,24 +21,34 @@
     //去除覆盖物                                                removeEntity(id)
     //初始化数据                                                onload()
 
+   信息框  --------------------->
+    添加相应的信息框在相应的数组添加数据即可，具体添加可看数组元素注释部分
 -->
 
 <template>
   <div class="full">
-    <div class="full" id="viewer-container"></div>
-    <info-layer ref="infoLayer"></info-layer>
+    <div class="full" id="viewer-container">
+      <danger-circle :viewer="viewer" ref="dangerCircle"></danger-circle>
+    </div>
+    <info-layer ref="infoLayer"
+      :box1="box1"
+      :box2="box2"
+    ></info-layer>
+    <tools-bar></tools-bar>
   </div>
 </template>
 
 <script>
  import InfoLayer from "./map-components/InfoLayer";
- let viewer = undefined;
+ import DangerCircle from "./map-components/overlays/dangerCircle";
+ import ToolsBar from "./map-components/tools-bar/tools-bar";
  let scratch = new Cesium.Cartesian2();
 export default {
   name: "Map3D",
-  components: {InfoLayer},
+  components: {ToolsBar, DangerCircle, InfoLayer},
   data(){
     return{
+      viewer: {},
       //默认场景参数
       mapOption: {
         animation: false, // 动画小组件
@@ -55,10 +65,26 @@ export default {
         // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
         navigationInstructionsInitiallyVisible: false,
         imageryLayers: [],
+        // skyBox: new Cesium.SkyBox({
+        //   sources: {
+        //     positiveX: '/sky/SKY_u.jpg',
+        //     negativeX: '/sky/SKY_r.jpg',
+        //     positiveY: '/sky/SKY_b.jpg',
+        //     negativeY: '/sky/SKY_l.jpg',
+        //     positiveZ: '/sky/SKY_f.jpg',
+        //     negativeZ: '/sky/SKY_d.jpg',
+        //   }
+        // }),
       },
+      isRound: true,
       layers: [],
       handle: {},
-      positionListenerList: [],
+      box1: [
+        // {position: [113.682062,34.702187],title: '汤阴小学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0}
+      ],
+      box2: [
+        // {position: [113.682062,34.702187],data:'我是数据',x:0,y:0},
+      ],
     }
   },
   mounted() {
@@ -83,49 +109,59 @@ export default {
     },
     //初始化地图
     initMap(option=this.mapOption){
-      viewer = new Cesium.Viewer("viewer-container",option);
-      this.$viewer = viewer;
+      this.viewer = new Cesium.Viewer("viewer-container",option);
       // 隐藏logo
-      viewer._cesiumWidget._creditContainer.style.display = "none";
-
+      this.viewer._cesiumWidget._creditContainer.style.display = "none";
+       // viewer.scene.globe.show = false;   // 隐藏地球实体
       // viewer.imageryLayers.removeAll();
-      // viewer.imageryLayers.addImageryProvider(
-      //   new Cesium.BaiduImageryProvider({
-      //     style: 'normal',
-      //     crs: 'WGS84'
-      //   })
-      // );
-      viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("rgba(20,56,76,0.5)");
-      viewer.scene.preRender.addEventListener(this.moveListener);
+      this.viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("rgba(20,56,76,0.5)");
+      this.viewer.scene.preRender.addEventListener(this.moveListener);
+      // this.addGltf([113.682062,34.702187,0],'/demo/8H.gltf');
     },
     //添加建筑矢量数据，url为建模json数据
     addBuildingData(url){
-      this.$viewer.scene.primitives.add(
+      this.viewer.scene.primitives.add(
         new Cesium.Cesium3DTileset({url})
       );
     },
     //添加图层
     addLayer(layer,layerId){
       this.layers.push({layerId, layer});
-      this.$viewer.scene.primitives.add(layer);
+      this.viewer.scene.primitives.add(layer);
     },
     //移除指定图层
     removeLayer(layerId){
       this.layers.forEach(item => {
         if(item.layerId==layerId){
-          this.$viewer.scene.primitives.remove(item.layer);
+          this.viewer.scene.primitives.remove(item.layer);
         }
       })
     },
+    //移除所有信息框
+    removeAllBox(){
+      this.box1 = [];
+      this.box2 = [];
+    },
+    //添加gltf模型
+    addGltf(position=[113.682062,34.702187,0],url,option={scale : 100.0}){
+      var scene = this.viewer.scene;
+      var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
+        Cesium.Cartesian3.fromDegrees(position[0],position[1],position[2]));
+      var model = scene.primitives.add(Cesium.Model.fromGltf({
+        url,
+        modelMatrix,
+        ...option,
+      }));
+    },
     //移除所有图层
     removeAllLayers(){
       this.layers.forEach(item => {
-        this.$viewer.scene.primitives.remove(item.layer);
+        this.viewer.scene.primitives.remove(item.layer);
       })
     },
     //指定相机位置
     flyToPosition(longitude,latitude,height,heading,pitch,roll){
-      this.$viewer.camera.flyTo({
+      this.viewer.camera.flyTo({
         destination : Cesium.Cartesian3.fromDegrees(longitude,latitude,height),
         orientation : {
           heading : Cesium.Math.toRadians(heading),
@@ -141,7 +177,7 @@ export default {
     },
     //添加图标覆盖物(单个)
     addBillBoard(longitude,latitude,height,image,option= {},id){
-      this.$viewer.entities.add(
+      this.viewer.entities.add(
         {
           position : Cesium.Cartesian3.fromDegrees(longitude, latitude,height),
           billboard : {
@@ -154,8 +190,8 @@ export default {
     },
     //添加百度地图地图
     addBaiduLayer(){
-      viewer.imageryLayers.removeAll();
-      viewer.imageryLayers.addImageryProvider(
+      this.viewer.imageryLayers.removeAll();
+      this.viewer.imageryLayers.addImageryProvider(
         new Cesium.BaiduImageryProvider({
           style: 'midnight',
           crs: 'WGS84'
@@ -179,35 +215,46 @@ export default {
     },
     //去除覆盖物
     removeEntity(id){
-      this.$viewer.entities.removeById(id);
+      this.viewer.entities.removeById(id);
     },
     //去除所有覆盖物
     removeAllEntity(){
-      this.$viewer.entities.removeAll();
+      this.viewer.entities.removeAll();
     },
     //屏幕坐标转化
-    convertScreen(position){
-      return viewer.scene.cartesianToCanvasCoordinates(
-        Cesium.Cartesian3.fromDegrees(position[0], position[1], 0),
-        new Cesium.Cartesian2()
-      );
-    },
-    //相机移动事件
-    moveListener(){
-
-      this.positionListenerList.forEach(item => {
-        let location = this.convertScreen(item.position);
+    convertScreen(list){
+      list.forEach(item => {
+        let location = this.viewer.scene.cartesianToCanvasCoordinates(
+          Cesium.Cartesian3.fromDegrees(item.position[0], item.position[1], 0),
+          new Cesium.Cartesian2()
+        );
         if(Cesium.defined(location)) {
-            item.x = location.x;
-            item.y = location.y;
-          }
+          item.x = location.x;
+          item.y = location.y;
+        }
       })
+
+    },
+    //绕点旋转
+    round(){
+      const  center = Cesium.Cartesian3.fromDegrees(113.702062,34.702187);
+      let heading = Cesium.Math.toRadians(50.0);
+      const pitch = Cesium.Math.toRadians(-20.0);
+      const range = 5000.0;
+      let x=50;
+      let _this = this;
+      this.viewer.scene.preUpdate.addEventListener( () => {
+        if(_this.isRound){
+          x+=0.1;
+          heading = Cesium.Math.toRadians(x);
+          _this.viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range))
+        }
+      });
     },
-    //添加坐标监控
-    addPosition(position){
-      let cartesian2 = this.convertScreen(position);
-      this.positionListenerList.push({position,x:cartesian2.x,y:cartesian2.y});
-      console.log(this.positionListenerList);
+    //相机移动事件
+    moveListener(){
+      this.convertScreen(this.box1);
+      this.convertScreen(this.box2);
     },
     //初始化数据
     onload(){
@@ -215,13 +262,14 @@ export default {
       this.initMap();
       //初始化弹框图层
       this.$refs['infoLayer'].onload();
+      this.$refs['dangerCircle'].onLoad();
+      this.round();
       //添加建筑矢量数据
        this.addBuildingData('http://139.9.103.171/mapData/zhengzhou/tileset.json')
       //定位建筑群位置
-      this.flyToPosition(113.682062,34.662187, 2000.0,0,-20.0,0.0);
+      this.flyToPosition(113.702062,34.702187, 2000.0,0,-20.0,0.0);
     },
 
-
  }
 }
 </script>

src/components/3DMap/TimeBar.vue

@@ -7,7 +7,9 @@
         <div class=" center" style="width: 15%;">{{weekStr[dateTime.week]}}</div>
         <div class=" center" style="width: 10%;font-size: 26px;font-style: italic;">{{temperature}}℃</div>
         <div class=" center" style="width: 15%;">
-          <div class="weather" style="width: 30px;height: 30px;"></div>
+          <div  style="width: 30px;height: 30px;"
+            :class="[weatherClass]"
+          ></div>
           <div style="text-indent: 8px">{{weather}} </div>
         </div>
       </div>
@@ -21,7 +23,7 @@ import {dateFormat} from "../../util/date";
 export default {
   name: "TimeBar",
   async mounted() {
-    this.getTime();
+    this.currentTime();
     await this.getWeather();
     },
   data(){
@@ -30,8 +32,14 @@ export default {
       weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
       temperature: '',
       weather: '',
+      weatherClass: 'duoyun',
     }
   },
+  watch: {
+    weather(){
+      this.weatherClass = this.getWeatherClass(this.weather);
+    },
+  },
   methods: {
     currentTime() {
       setInterval(this.getTime, 500);
@@ -47,12 +55,28 @@ export default {
         time: str[1]
       }
     },
+    getWeatherClass(weather){
+      let duoyun = ['少云','晴间多云','多云','阴'];
+      let wu = ['雾','浓雾','强浓雾','轻雾','大雾','特强浓雾'];
+      let mai = ['霾','中度霾','重度霾','严重霾'];
+      let feng = ['有风','平静','微风','和风','清风','强风/劲风', ,'疾风','大风','烈风','风暴','狂爆风','飓风','热带风暴'];
+      let yu = ['阵雨','雷阵雨','雷阵雨并伴有冰雹','小雨','中雨','大雨','暴雨','大暴雨','特大暴雨','强阵雨','强雷阵雨','极端降雨','毛毛雨/细雨','雨','小雨-中雨','中雨-大雨','大雨-暴雨','暴雨-大暴雨','大暴雨-特大暴雨','雨雪天气','雨夹雪','阵雨夹雪','冻雨'];
+      let sun = ['晴'];
+      let xue = ['雪','阵雪','小雪','中雪','大雪','暴雪','小雪-中雪','中雪-大雪','大雪-暴雪'];
+      if(duoyun.indexOf(weather)>=0) return'duoyun';
+      if(wu.indexOf(weather)>=0) return'wu';
+      if(yu.indexOf(weather)>=0) return'yu';
+      if(sun.indexOf(weather)>=0) return'sun';
+      if(xue.indexOf(weather)>=0) return'xue';
+      if(mai.indexOf(weather)>=0) return'mai';
+      if(feng.indexOf(weather)>=0) return'feng';
+      return 'duoyun';
+    },
     async getWeather(){
       console.log(this.$map)
       let  weather = new this.$AMap.Weather();
       //执行实时天气信息查询
       weather.getForecast('郑州市', (err, data) => {
-        console.log(data)
         this.temperature = data.forecasts[0].dayTemp;
         this.weather  = data.forecasts[0].dayWeather;
       });
@@ -67,7 +91,25 @@ export default {
     justify-content: center;
     align-items: center;
   }
-  .weather{
+  .duoyun{
     background: url("/data/duoyun.png") no-repeat center/contain;
   }
+  .wu{
+    background: url("/data/wu.png") no-repeat center/contain;
+  }
+  .xue{
+    background: url("/data/xue.png") no-repeat center/contain;
+  }
+  .yu{
+    background: url("/data/yu.png") no-repeat center/contain;
+  }
+  .sun{
+    background: url("/data/sun.png") no-repeat center/contain;
+  }
+  .mai{
+    background: url("/data/mai.png") no-repeat center/contain;
+  }
+  .feng{
+    background: url("/data/feng.png") no-repeat center/contain;
+  }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="info-layer">
-      <box1 v-if="initFlag"  v-for="(item,index) of box1" :title="item.title" :position="[screen.$refs['map'].positionListenerList[index].y,screen.$refs['map'].positionListenerList[index].x]" :data="item.data"></box1>
-      <box2 v-if="initFlag"  v-for="(item,index) of box2" :title="item.title" :position="[screen.$refs['map'].positionListenerList[index].y,screen.$refs['map'].positionListenerList[index].x]" :data="item.data"></box2>
+      <box1 v-if="initFlag"  v-for="(item,index) of box1" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box1>
+      <box2 v-if="initFlag"  v-for="(item,index) of box2" :title="item.title" :position="[item.y,item.x]" :data="item.data"></box2>
   </div>
 </template>
 
@@ -12,15 +12,26 @@ export default {
   name: "InfoLayer",
   components: {Box1,Box2},
   inject: ['screen'],
+  props: {
+    box1: {
+      type: 'Array',
+      default: []
+    },
+    box2: {
+      type: 'Array',
+      default: []
+    },
+  },
   data(){
     return{
       initFlag: false,
-      box1: [
-        // {position: [113.682062,34.702187],title: '汤阴小学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}]}
-      ],
-      box2: [
-          {position: [113.682062,34.702187]}
-      ]
+      // box1: [
+      //   // {position: [113.682062,34.702187],title: '汤阴小学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}]}
+      // ],
+      // box2: [
+      //     {position: [113.682062,34.702187]},
+      //     {position: [113.682062,34.722187]},
+      // ]
     }
   },
 
@@ -28,14 +39,15 @@ export default {
 
     onload(){
       this.initFlag = true;
-      this.putPosition(this.box2);
+      // this.putPosition(this.box1);
+      // this.putPosition(this.box2);
     },
 
-    putPosition(boxList){
-      boxList.forEach(item => {
-        this.screen.$refs['map'].addPosition(item.position);
-      });
-    },
+    // putPosition(boxList){
+    //   boxList.forEach(item => {
+    //     this.screen.$refs['map'].addPosition(item.position);
+    //   });
+    // },
 
   },
 }

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

@@ -3,7 +3,10 @@
       top: position[0]-300+'px',
       left: position[1]+ 'px'
     }">
-    <div style="position: absolute;bottom: 0;left: 0;background: url('')"></div>
+    <div style="position: absolute;bottom: 0;left: 0;background: url('/data/popupLbl.png') no-repeat;width: 300px;height: 38px"></div>
+    <div class="center" style="position: absolute;bottom: 38px;left: 20px;background: rgba(0,0,0,0.5);width: 280px;height: 50px;color: white;font-style: 20px;font-weight: bold">
+      {{data}}
+    </div>
   </div>
 </template>
 
@@ -11,13 +14,9 @@
 export default {
   name: "box2",
   props: {
-    title: {
-      type: "String",
-      default: '建筑'
-    },
     data: {
-      type: "Array",
-      default: []  //[ {label: '姓名' , value: '梁汉强'}]
+      type: "String",
+      default: '暂无数据'
     },
     position: {
       type: "Array",
@@ -31,7 +30,12 @@ export default {
   #box2{
     width: 300px;
     height: 300px;
-    background: blue;
+    /*background: rgba(0,0,0,0.5);*/
     position: absolute;
   }
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

src/components/3DMap/map-components/overlays/dangerCircle.vue

@@ -0,0 +1,26 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "dangerCircle",
+  props: {
+    viewer: {
+      type: 'Object'
+    }
+  },
+  methods: {
+    onLoad() {
+      let r1 = 50;
+      let r2 = 50;
+      console.log(this.viewer,66)
+
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/3DMap/map-components/tools-bar/tools-bar.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="center" style="position: absolute;right: 1%;bottom: 2%;width: 350px;height: 50px">
+    <div class="click" @click="handleRound" style="background: url('/data/round.png') no-repeat center/contain;width: 50px;height: 50px"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tools-bar",
+  inject: ['screen'],
+  methods: {
+    handleRound(){
+      this.screen.$refs['map'].isRound = !this.screen.$refs['map'].isRound;
+    }
+  },
+}
+</script>
+
+<style scoped>
+    .full{
+      width: 100%;
+      height: 100%;
+    }
+    .center{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .click:hover{
+      cursor: pointer;
+      transform: translate(2px,2px);
+    }
+</style>

src/components/scene/CityScreen.vue

@@ -88,7 +88,7 @@
     <!-- 数据面板  地图建筑数据   -->
     <div style="position:absolute;width: 7%;height: 40%;top: 10%;left: 22%;color: white;">
       <div class="full center" style="flex-direction: column">
-        <div class="center click" v-for="(item,index) of buildingList" :key="item" style="width: 150px;height: 50px;background: rgba(105,117,77,0.8);border-radius: 5px;margin-top: 5px">
+        <div @click="handleEntity(item.name)" class="center click" v-for="(item,index) of buildingList" :key="item" style="width: 150px;height: 50px;background: rgba(105,117,77,0.8);border-radius: 5px;margin-top: 5px">
           {{item.name}}
         </div>
       </div>
@@ -121,6 +121,7 @@ export default {
         {icon: '',name: '医疗机构'},
         {icon: '',name: '政府机构'},
         {icon: '',name: '娱乐设施'},
+        {icon: '',name: '清除'},
       ],
       eventList:[
         {label: '16',value: '生产安全事故'},
@@ -270,6 +271,26 @@ export default {
     }
   },
   methods: {
+    handleEntity(name){
+      this.screen.$refs['map'].removeAllBox();
+      switch (name){
+        case '教育机构':
+          this.screen.$refs['map'].box1.push(
+            {position: [113.642062,34.702187],title: '汤阴小学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+            {position: [113.672062,34.722187],title: '汤阴二小',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+            {position: [113.662062,34.602187],title: '汤阴大学',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+            {position: [113.682062,34.702187],title: '汤阴职中',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+            {position: [113.692062,34.692187],title: '汤阴一中',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+            {position: [113.702062,34.702187],title: '汤阴二中',data:[{label: '地点' , value: '汤阴县'},{label: '联系方式' , value: '4664-858585'}],x:0,y:0},
+          );
+          this.screen.$refs['map'].flyToPosition(113.692062,34.652187,200,0,0,0);
+          break;
+        case '事件多发地':
+
+          this.screen.$refs['map'].flyToPosition(113.692062,34.652187,200,0,0,0);
+          break;
+      }
+    },
     initCharts(){
       this.newCharts("community-tendency","communityTendency");
       this.newCharts("accident","accident");

src/main.js

@@ -65,7 +65,7 @@ Object.keys(urls).forEach(key => {
 Vue.prototype.website = website;
 
 //3D地图容器
-Vue.prototype.$viewer = undefined;
+Vue.prototype.$viewer = {};
 
 // 动态加载阿里云字体库
 iconfontVersion.forEach(ele => {

src/router/views/index.js

@@ -2,6 +2,16 @@ import Layout from '@/page/index/'
 import dataView from "../../views/grid/dataView";
 import myLayout from "../../views/grid/myLayout";
 export default [
+  {
+    path: '/demo',
+    name: '网格看板',
+    component: () =>
+      import( /* webpackChunkName: "views" */ '@/views/demo/test'),
+    meta: {
+      keepAlive: false,
+      isAuth: true,
+    }
+  },
   {
     path: '/mainScreen',
     name: '网格看板',

src/views/demo/test.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="container" style="width: 100%;height: 100%;"></div>
+</template>
+
+<script>
+import * as Three from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+export default {
+  name: 'test',
+  data() {
+    return {
+      camera: null,
+      scene: null,
+      renderer: null,
+      mesh: null
+    }
+  },
+  methods: {
+    init() {
+      let container = document.getElementById('container');
+      this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
+      this.camera.position.z = 1;
+      this.scene = new Three.Scene();
+      this.renderer = new Three.WebGLRenderer({antialias: true});
+      this.renderer.setClearColor('rgb(135,206,250)',1.0);
+      // Instantiate a loader
+      let loader = new GLTFLoader();
+      this.renderer.setSize(container.clientWidth, container.clientHeight);
+      container.appendChild(this.renderer.domElement);
+      loader.load( '/demo/8H.gltf',  (gltf) => {
+
+          this.scene.add(gltf.scene)
+          gltf.scene.traverse( function ( child ) {
+            if ( child.isMesh ) {
+              child.material.emissive =  child.material.color;
+              child.material.emissiveMap = child.material.map ;
+            }
+          } );
+        }, undefined,
+      ( error ) => {
+        console.error( error );
+      } );
+
+    },
+    animate() {
+      requestAnimationFrame(this.animate);
+      // this.camera.position.x += 0.01;
+      // this.camera.position.y += 0.02;
+      this.renderer.render(this.scene, this.camera);
+    }
+  },
+  mounted() {
+    this.init();
+    this.animate()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/grid/dataView.vue

@@ -1,53 +1,7 @@
 <template>
   <div class="container">
     <dv-loading v-if="loading" class="loading"></dv-loading>
-<!--      <div style="width: 100%;height: 70px;" class="center">-->
-<!--        <div class="logo-info center">-->
-<!--          <div class="row"  style="width: 93.7%">-->
-<!--            <div class="white center" style="font-size: 25px;width: 29%;">网格管理平台</div>-->
-<!--            <div class="center" style="width: 50%;">-->
-<!--            <dv-border-box-8   :color="['#053629','#04a878']" backgroundColor="rgba(0,0,0,0.1)" style="width: 90%;height: 50px">-->
-<!--              <div class="full center gridName" style="background: transparent">-->
-<!--                <el-select :popper-append-to-body="false" @change="changeGrid" :value="'当前所在网格：'+currentGrid.gridName" class="full center">-->
-<!--                  <el-option-->
-<!--                    v-for="(item,index) in gridList"-->
-<!--                    :label="item.gridName"-->
-<!--                    :value="index">-->
-<!--                    <span class="green" style="float: left">{{ item.gridName }}</span>-->
-<!--                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>-->
-<!--                  </el-option>-->
-<!--                </el-select>-->
-<!--              </div>-->
 
-<!--            </dv-border-box-8>-->
-<!--            </div>-->
-<!--            <div class="white center" style="font-size: 20px;width: 20%;">-->
-<!--              <dv-border-box-13 class="full" :color="['#053629','#04a878']"><div class="full center" style="font-size: 18px">{{userInfo['nick_name']}}</div></dv-border-box-13>-->
-<!--            </div>-->
-
-<!--          </div>-->
-<!--          <div class="ele1"></div>-->
-<!--        </div>-->
-<!--        <div class="time-info row font-20" >-->
-<!--          <div class="center green" style="width: 29%;height: 100%;">{{dateTime.date}}</div>-->
-<!--          <div class="center white" style="width: 47%;height: 100%;">{{dateTime.time}}</div>-->
-<!--          <div class="center green" style="width: 24%;height: 100%;">{{week}}</div>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--      <dv-border-box-7 :color="['#053629','#04a878']" class="tag-bar">-->
-<!--        <div class="full row">-->
-<!--          <div class="center" style="width: 35%;height: 100%;overflow: hidden;">-->
-<!--            <div class="green message">系统通知：欢迎管理员回来！</div>-->
-<!--          </div>-->
-<!--          <div class="center" style="width: 65%;height: 100%;">-->
-<!--&lt;!&ndash;            <div   @click="handleMenu(item,index)" class="tag-button green center" :class="{ 'actvieBorder': tagIndex == index }"  v-for="(item,index) of tagList">&ndash;&gt;-->
-<!--&lt;!&ndash;              {{item.name}}&ndash;&gt;-->
-<!--&lt;!&ndash;            </div>&ndash;&gt;-->
-<!--&lt;!&ndash;            <my-top-menu></my-top-menu>&ndash;&gt;-->
-<!--            <top-menu></top-menu>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </dv-border-box-7>-->
     <div class="center title" style="width: 100%;height: 7%;">
       <div style="width: 30%;height: 100%" >
 <!--        <time-bar></time-bar>-->

src/views/grid/mainScreen.vue

@@ -6,7 +6,7 @@
     <map3-d ref="map" @MonitorClick="handleMonitorClick" ></map3-d>
 
     <!-- 地图切换按钮-->
-    <el-button style="position: absolute;top: 6%;left: 30%" @click="handleMap">切换地图</el-button>
+<!--    <el-button style="position: absolute;top: 6%;left: 30%" @click="handleMap">切换地图</el-button>-->
 
     <!--  顶部导航栏  -->
     <div class="center title" style="width: 100%;height: 7%;position: absolute;top: 0">

vue.config.js

@@ -41,8 +41,8 @@ module.exports = {
       '/api': {
         //本地服务接口地址
         // target: 'http://192.168.1.244',
-         target: 'http://36.103.227.152:1777/api',
-        // target: 'http://192.168.1.69',
+        //  target: 'http://36.103.227.152:1777/api',
+        target: 'http://192.168.1.202:6580',
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',
         ws: true,