3D场景构建

package.json

@@ -13,17 +13,23 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "0.0.7",
     "@amap/amap-vue": "^2.0.11",
+    "@dvgis/dc-base": "^2.1.3",
+    "@dvgis/dc-sdk": "^2.1.3",
+    "@dvgis/dc-ui": "^1.0.0-Beta",
     "@jiaminghi/charts": "^0.2.18",
     "@jiaminghi/data-view": "^2.10.0",
-    "avue-plugin-map": "^1.0.1",
     "avue-data": "^2.0.0",
+    "avue-plugin-map": "^1.0.1",
     "avue-plugin-ueditor": "^0.1.4",
     "axios": "^0.18.0",
     "babel-polyfill": "^6.26.0",
     "classlist-polyfill": "^1.2.0",
+    "copy-webpack-plugin": "^6.3.2",
     "core-js": "^2.6.12",
     "crypto-js": "^4.0.0",
+    "cstor-live-player": "^1.0.1",
     "element-ui": "^2.13.2",
+    "gcoord": "^0.3.1",
     "jquery": "^3.6.0",
     "js-base64": "^2.5.1",
     "js-cookie": "^2.2.0",

src/api/grid/grid.js

@@ -108,3 +108,10 @@ export const smartDeviceList = (gridId,current, size, params) => {
     }
   })
 }
+export const getLoadJson = () => {
+  return request({
+    url: 'http://139.9.103.171/mapData/zhengzhou/load.geojson',
+    method: 'get',
+    params: {}
+  })
+}

src/components/3DMap/Map3D.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="full" id="viewer-container"></div>
+</template>
+
+<script>
+import gcoord from 'gcoord';
+import {getLoadJson} from "../../api/grid/grid";
+let Cesium = undefined;
+let viewer = undefined;
+let aroundPoint = undefined;
+export default {
+  name: "Map3D",
+  mounted() {
+    DC.ready(this.initViewer);
+    // aroundPoint.start();
+  },
+  data(){
+    return{
+    }
+  },
+  methods: {
+    async initViewer() {
+      Cesium = DC.Namespace['Cesium'];
+      /* 容器初始化 */
+      viewer = new DC.Viewer('viewer-container',{
+        camera: {
+          pitch: 200
+        },
+        orderIndependentTranslucency: false,
+        contextOptions: {
+          webgl: {
+            alpha: true
+          }
+        }
+      });
+      /* 设置容器属性*/
+      viewer.setOptions({
+        showMoon: false,
+        showSun: false,
+        skyBox: {show:true},
+        globe: {show: true}
+      });
+      /* 加载基础图层（这里是百度地图图层）*/
+      let baselayer = DC.ImageryLayerFactory.createBaiduImageryLayer({
+        style: 'midnight',
+        crs:"WGS84"
+      });
+      viewer.addBaseLayer(baselayer);
+
+      /*渲染建筑群*/
+      let layer = new DC.TilesetLayer('layer')
+      viewer.addLayer(layer)
+      let tileset = new DC.Tileset(
+        'http://139.9.103.171/mapData/zhengzhou/tileset.json'  //银川
+      )
+      layer.addOverlay(tileset);
+
+      /*定点环绕*/
+      aroundPoint  = new DC.AroundPoint(viewer,'106.256187,38.387539',{pitch:-15,range:2000})
+
+      viewer.use(new DC.Weather())
+      viewer.weather.rain.enable = false
+
+      /*添加监控设备图层*/
+      this.addMonitor();
+
+      /*添加事件图层*/
+      this.addEvent();
+      // await this.addLoad();
+      viewer.weather.rain.enable = false
+      viewer.weather.rain.speed = 1
+
+      /*定位到建筑群位置*/
+      viewer.camera.flyTo({
+        destination : Cesium.Cartesian3.fromDegrees(113.682062,34.662187, 2000.0),
+        orientation : {
+          heading : Cesium.Math.toRadians(0),
+          pitch : Cesium.Math.toRadians(-20.0),
+          roll : 0.0
+        }
+      });
+      // viewer.flyTo(layer);
+    },
+    /*添加监控设备图层*/
+    addMonitor(){
+      let monitoring = new DC.VectorLayer('monitoring')
+      let positions = [
+        "113.682062,34.768187",
+        "113.672062,34.762187",
+        "113.652062,34.765187",
+        "113.702062,34.761187",
+      ]
+      positions.forEach(item => {
+        let position =  DC.Position.fromCoordString(item)
+        let billboard = new DC.Billboard(position, '/data/device.png')
+        billboard.size = [50,50,50];
+        billboard.setStyle({
+          "heightReference": 2, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
+          "scale": 3, //比例
+          "disableDepthTestDistance": Number.POSITIVE_INFINITY
+        })
+        billboard.on(DC.MouseEventType.CLICK, e => {
+          this.$emit("MonitorClick",e);
+        })
+        billboard.on(DC.MouseEventType.MOUSE_OVER,e => {
+        });
+        monitoring.addOverlay(billboard)
+      })
+      monitoring.show = false;
+      viewer.addLayer(monitoring);
+    },
+    /*添加事件图层*/
+    addEvent(){
+      let layer = new DC.VectorLayer('event')
+      let ellipsoid = new DC.Ellipsoid('113.682062,34.768187',{x:200.0, y:200.0, z:200.0});
+      ellipsoid.on(DC.MouseEventType.CLICK,e => {
+        viewer.popup.showAt(e.position,
+          `<div style="width: 300px;height: 200px;background: #0b3d38">
+           </div>`
+        )
+      });
+      ellipsoid.on(DC.MouseEventType.MOUSE_OUT,e => {
+        viewer.popup.hide();
+      })
+      ellipsoid.setStyle({
+        maximumCone: DC.Math.PI_OVER_TWO,
+        material: new DC.EllipsoidTrailMaterialProperty({
+          color: DC.Color.fromCssColorString('#ae2d2d'),
+          speed:20
+        })
+      }).addTo(layer)
+      viewer.addLayer(layer)
+    },
+    /*添加道路图层*/
+    async addLoad(){
+      let load = await getLoadJson();
+      let json =  gcoord.transform(
+        load,    // 经纬度坐标
+        gcoord.EPSG3857,               // 当前坐标系
+        gcoord.WGS84                 // 目标坐标系
+      );
+      console.log(json)
+      let layer = new DC.GeoJsonLayer(
+        'load',
+        json
+      )
+      viewer.addLayer(layer)
+    },
+    toLayer(layerName){
+      let layer =  viewer.getLayer(layerName);
+      layer.show = !layer.show;
+      if(layer.show){
+        viewer.flyTo(viewer.getLayer(layerName));
+      }
+    },
+    removeLayer(){},
+  }
+}
+</script>
+
+<style scoped>
+  .full{
+    width: 100%;
+    height: 100%;
+  }
+  viewer-container{
+    z-index: -1;
+  }
+</style>

src/components/3DMap/TimeBar.vue

@@ -0,0 +1,76 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <dv-border-box-5  :color="['#49baa5', '#dddddd']" backgroundColor="rgba(0, 0, 0, 0.5)">
+      <div  style="font-size: 18px;width: 100%;height: 100%;display: flex;justify-content: left;align-items: center">
+        <div class=" center" style="width: 20%;">{{dateTime.date}}</div>
+        <div class=" center" style="width: 20%;background: rgba(76,217,166,0.5);font-size: 26px;font-style: italic;border-radius: 5px;border: solid 1px #dddddd">{{dateTime.time}}</div>
+        <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="text-indent: 8px">{{weather}} </div>
+        </div>
+      </div>
+    </dv-border-box-5>
+  </div>
+</template>
+
+<script>
+import {dateFormat} from "../../util/date";
+
+export default {
+  name: "TimeBar",
+  async mounted() {
+    this.getTime();
+    await this.getWeather();
+    },
+  data(){
+    return{
+      dateTime: {},
+      weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
+      temperature: '',
+      weather: '',
+    }
+  },
+  methods: {
+    currentTime() {
+      setInterval(this.getTime, 500);
+    },
+    getTime() {
+      let date = new Date();
+      let str = dateFormat(date);
+      let week = date.getDay();
+      str = str.split(" ");
+      this.dateTime = {
+        week: week,
+        date: str[0],
+        time: str[1]
+      }
+    },
+    async getWeather(){
+      let AMap = await this.$AMap.load({
+        key:'cbb265e2a60bbbc04a52eec4eecdeb12',
+        plugins: ['AMap.Weather'],
+      })
+      let  weather = new AMap.Weather();
+      //执行实时天气信息查询
+      weather.getForecast('郑州市', (err, data) => {
+        console.log(data)
+        this.temperature = data.forecasts[0].dayTemp;
+        this.weather  = data.forecasts[0].dayWeather;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped>
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .weather{
+    background: url("/data/duoyun.png") no-repeat center/contain;
+  }
+</style>

src/main.js

@@ -29,9 +29,21 @@ import dataV from '@jiaminghi/data-view'
 import {select} from "./api/base/region";
 import $ from 'jquery'
 import layer from "layui-layer";
+import DC from '@dvgis/dc-sdk/dist/dc.base.min' //基础包
+import DcCore from '@dvgis/dc-sdk/dist/dc.core.min' //核心包
+import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min' //chart包
+import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min' //mapv包
+import '@dvgis/dc-sdk/dist/dc.core.min.css' // 主要样式
+import DcUI from '@dvgis/dc-ui/dist/dc.ui.min' //UI Package
+
+//DC 组件
+global.DC = DC
+DC.use(DcCore)
+Vue.use(DcUI)
 
 // 注册全局crud驱动
 window.$crudCommon = crudCommon;
+
 // 加载Vue拓展
 Vue.use(router);
 Vue.use(dataV);

src/page/index/top/top-menu.vue

@@ -23,8 +23,8 @@
     data() {
       return {
         tagListLeft: [
-          {name: '网格看板',path: '/grid/viewpanel'},
-          {name: '网格划分',path: '/grid/divide'},
+          {name: '指挥中心',path: '/mainScreen'},
+          // {name: '网格划分',path: '/grid/divide'},
         ],
         tagListRight: [
           {name: '全屏',path: ''},
@@ -56,7 +56,7 @@
           case '全屏': this.handleScreen();
             this.$store.commit("SET_TAG_INDEX",index+this.items.length+this.tagListLeft.length)
             break;
-          case '网格看板': this.$router.push({path: this.tagListLeft[index].path});
+          case '指挥中心': this.$router.push({path: this.tagListLeft[index].path});
             this.$store.commit("SET_TAG_INDEX",index)
             break;
           case '网格划分': this.$router.push({path: this.tagListLeft[index].path});
@@ -111,6 +111,7 @@
     align-items: center;
     flex-direction: row;
     padding: 2px 20px;
+    overflow-x: scroll;
   }
 
   .menu-button{

src/router/views/index.js

@@ -2,21 +2,31 @@ import Layout from '@/page/index/'
 import dataView from "../../views/grid/dataView";
 import myLayout from "../../views/grid/myLayout";
 export default [
-
   {
-  path: '/grid',
-  component: dataView,
-  redirect: '/grid/viewpanel',
-  children: [{
+    path: '/mainScreen',
+    name: '网格看板',
+    component: () =>
+      import( /* webpackChunkName: "views" */ '@/views/grid/mainScreen'),
+    meta: {
+      keepAlive: false,
+      isAuth: true,
+    }
+  },
+  {
     path: 'viewpanel',
     name: '网格看板',
     component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/grid/viewpanel'),
+      import( /* webpackChunkName: "views" */ '@/views/grid/mainScreen'),
     meta: {
       keepAlive: true,
       isAuth: true,
     }
   },
+  {
+  path: '/grid',
+  component: dataView,
+  redirect: '/mainScreen',
+  children: [
     {
       path: 'divide',
       name: '网格划分',

src/views/grid/dataView.vue

@@ -1,53 +1,64 @@
 <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>
+<!--      <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>
+<!--            </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>-->
+<!--          <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>
       </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%;">
-<!--            <div   @click="handleMenu(item,index)" class="tag-button green center" :class="{ 'actvieBorder': tagIndex == index }"  v-for="(item,index) of tagList">-->
-<!--              {{item.name}}-->
-<!--            </div>-->
-<!--            <my-top-menu></my-top-menu>-->
-            <top-menu></top-menu>
-          </div>
+      <div style="width: 40%;height: 100%" class="center">郑州运营指挥中心</div>
+      <dv-border-box-5 :reverse="true" style="width: 30%;font-size: 20px" :color="['#49baa5', '#dddddd']" backgroundColor="rgba(0, 0, 0, 0.5)">
+        <div  class="full center">
+          <top-menu></top-menu>
         </div>
-      </dv-border-box-7>
+      </dv-border-box-5>
+    </div>
       <dv-border-box-7 :color="['#053629','#1E2F36']" class="main-container">
         <div class="full center">
           <keep-alive>
@@ -73,9 +84,10 @@
   import MyTopMenu from "../../components/my-top-menu";
   import {getStore} from "../../util/store";
   import {validatenull} from "../../util/validate";
+  import TimeBar from "../../components/3DMap/TimeBar";
 
   export default {
-    components: {MyTopMenu, TopMenu},
+    components: {TimeBar, MyTopMenu, TopMenu},
       async mounted() {
         await this.onLoad();
       },
@@ -257,7 +269,7 @@
   .container{
     width: 100%;
     height: 100%;
-    background: url('/data/data-bg.png') no-repeat center/cover;
+    background: url('/data/bg-grid.png') no-repeat center/cover;
   }
   .device-title{
     font-style: italic;font-size: 10px;text-align: center;line-height: 100px;letter-spacing: 20px;
@@ -375,7 +387,10 @@
     animation: offset 1s linear;
   }
 
-
+  .title{
+    color: white;
+    font-size: 40px;
+  }
 
 
  /deep/ .el-select .el-input .el-select__caret {

src/views/grid/mainScreen.vue

@@ -0,0 +1,345 @@
+<template>
+  <div class="full" style="background: #235e70">
+
+      <dv-loading v-if="false" style="color: #dddddd"> 数据加载中 </dv-loading>
+      <map3-d ref="map" @MonitorClick="handleMonitorClick" ></map3-d>
+      <div class="center title" style="width: 100%;height: 7%;position: absolute;top: 0">
+        <div style="width: 30%;height: 100%" >
+          <time-bar></time-bar>
+        </div>
+        <div style="width: 40%;height: 100%" class="center">郑州运营指挥中心</div>
+        <dv-border-box-5 :reverse="true" style="width: 30%;font-size: 20px" :color="['#49baa5', '#dddddd']" backgroundColor="rgba(0, 0, 0, 0.5)">
+          <div  class="full center">
+            <top-menu></top-menu>
+          </div>
+        </dv-border-box-5>
+      </div>
+
+
+    <!-- 数据面板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">
+      <div  id="community-tendency" style="height: 100%;width: 100%;"  ></div>
+    </dv-border-box-7>
+
+    <!-- 数据面板2   -->
+    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 50%;top: 37%;left: 10px">
+      <div class="full center" style="flex-direction: column">
+        <div style="width: 90%;height: 7%;font-size: 20px;color: white;justify-content: left" class="center"> 事件记录</div>
+        <dv-scroll-board :config="dataConfigA" style="width: 98%;height: 88%" />
+      </div>
+    </dv-border-box-7>
+
+    <!-- 数据面板3   -->
+    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 10%;right: 10px">
+      <div class="full center" style="height: 100%">
+        <div style="position: absolute;width: 100%;height: 20%;color: white;top:0;font-size: 18px" class="center">公共设施</div>
+        <div style="width: 250px;height: 100%;" class="center">
+          <dv-decoration-9 :color="['#90d24b', '#319898']" style="width:180px;height:180px;color: #dddddd;font-size: 30px">66</dv-decoration-9>
+        </div>
+        <div  style="width: 250px;height: 100%;flex-direction: column;color: white" class="center" >
+          <dv-decoration-11 v-for="(item,index) of deviceList" style="width:100%;height:70px;cursor: pointer" class="click">{{item}}</dv-decoration-11>
+        </div>
+      </div>
+    </dv-border-box-7>
+
+    <!-- 数据面板4   -->
+    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 25%;top: 37%;right: 10px">
+      <div  id="accident" style="height: 100%;width: 100%;"></div>
+    </dv-border-box-7>
+
+    <!-- 数据面板5   -->
+    <dv-border-box-7 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 20%;height: 28%;top: 64%;right: 10px">
+      <div class="full center" style="flex-direction: column">
+        <div style="width: 90%;height: 10%;justify-content: left;color: white;font-size: 20px" class="center">
+          郑州市社区人口数量Top
+        </div>
+        <dv-capsule-chart :config="dataConfigB" style="width:90%;height:88%" />
+      </div>
+    </dv-border-box-7>
+
+    <!-- 数据面板6   -->
+    <div style="position:absolute;width: 60%;height: 15%;top: 80%;right: 20%;color: white">
+      <div class="full center">
+        <dv-border-box-7 style="cursor: pointer;width: 200px;height: 60px" class="center click" :color="['#58d9c5', 'white']" backgroundColor="rgba(0, 0, 0, 0.8)">
+          <div class="full center " @click="handleDevice(0)">监控</div>
+        </dv-border-box-7>
+        <dv-border-box-7 style="cursor: pointer;width: 200px;height: 60px" class="center click" :color="['#58d9c5', 'white']" backgroundColor="rgba(0, 0, 0, 0.8)">
+          <div class="full center ">交通情况</div>
+        </dv-border-box-7>
+        <dv-border-box-7 style="cursor: pointer;width: 200px;height: 60px" class="center click" :color="['#58d9c5', 'white']" backgroundColor="rgba(0, 0, 0, 0.8)">
+          <div class="full center " @click="handleDevice(1)">事件处理</div>
+        </dv-border-box-7>
+        <dv-border-box-7 style="cursor: pointer;width: 200px;height: 60px" class="center click" :color="['#58d9c5', 'white']" backgroundColor="rgba(0, 0, 0, 0.8)">
+          <div class="full center ">调度中心</div>
+        </dv-border-box-7>
+      </div>
+    </div>
+
+    <!-- 视屏面板    -->
+    <dv-border-box-10 class="videoPan" v-if="videoShow" :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" style="position:absolute;width: 50%;height: 50%;top: 20%;right: 25%">
+        <div style="width: 100%;flex-direction: column;" class="full center">
+          <div class="center closeButton" style="cursor: pointer;width: 98%;height: 10%;color: white;font-size: 24px;border-radius: 10px;margin-top: 5px"
+               @click="videoShow=!videoShow"
+               >关闭</div>
+         <div style="width: 98%;height: 85%;">
+           <cstor-live-player :audio="true" style="height: 100%;width: 100%" src="http://36.103.228.148:8888/live/64010500011327385808.flv"/>
+<!--           <iframe src="https://www.zhihu.com/video/1333044671954403328" allowfullscreen> </iframe>-->
+         </div>
+
+        </div>
+    </dv-border-box-10>
+  </div>
+</template>
+
+<script>
+import Map3D from "../../components/3DMap/Map3D";
+import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
+import CstorLivePlayer from 'cstor-live-player'
+import 'cstor-live-player/dist/cstor-live-player.css';
+import TimeBar from "../../components/3DMap/TimeBar";
+import TopMenu from "../../page/index/top/top-menu";
+export default {
+  name: "mainScreen",
+  components: {TopMenu, TimeBar, Map3D,CstorLivePlayer},
+  mounted() {
+    this.initCharts();
+    this.onload();
+  },
+  data(){
+    return{
+      deviceList: ['监控设备','消防点','医院'],
+      communityTendency: {},
+      accident: {},
+      videoShow: false,
+      dataConfigA: {
+        rowNum: 10,
+        header: ['事件类型','负责人','时间','状态'],
+        headerBGC: '#ab9d3a',
+        data: [
+          ['公共卫生事件', '张**', '2021-4-24','处理中'],
+          ['自然灾害', '张**', '2021-4-24','处理中'],
+          ['民众纠纷', '张**', '2021-4-24','处理中'],
+          ['公共卫生事件', '张**', '2021-4-24','处理中'],
+          ['自然灾害', '张**', '2021-4-24','处理中'],
+          ['民众纠纷', '张**', '2021-4-24','处理中'],
+          ['公共卫生事件', '张**', '2021-4-24','处理中'],
+          ['自然灾害', '张**', '2021-4-24','处理中'],
+          ['民众纠纷', '张**', '2021-4-24','处理中'],
+          ['公共卫生事件', '张**', '2021-4-24','处理中'],
+          ['自然灾害', '张**', '2021-4-24','处理中'],
+          ['民众纠纷', '张**', '2021-4-24','处理中'],
+        ],
+        oddRowBGC: 'rgba(103,97,41,0.7)',
+        evenRowBGC: 'rgba(110,86,4,0.7)',
+      },
+      dataConfigB: {
+        rowNum: 7,
+        data: [
+          {
+            name: '阅海万家',
+            value: 550
+          },
+          {
+            name: '幸福里',
+            value: 480
+          },
+          {
+            name: '安康区',
+            value: 477
+          },
+          {
+            name: '跑马地花园',
+            value: 460
+          },
+          {
+            name: '鑫海家园',
+            value: 440
+          },
+          {
+            name: '浦新城',
+            value: 436
+          },
+          {
+            name: '乐昌新区',
+            value: 360
+          }
+        ]
+      },
+      personData: [
+        {agencyName: '重点人员',personNum: 443},
+        {agencyName: '流动人员',personNum: 563},
+        {agencyName: '高龄人员',personNum: 356},
+        {agencyName: '吸毒人员',personNum: 443},
+        {agencyName: '前科人员',personNum: 563},
+        {agencyName: '留守人员',personNum: 356},
+      ],
+    }
+  },
+  methods: {
+    async onload(){
+      changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
+      this.setPersonOption(this.personData);
+      this.setAccidentOption(this.personData);
+    },
+    handleMonitorClick(){
+      this.videoShow = true;
+    },
+    initCharts(){
+      this.newCharts("community-tendency","communityTendency");
+      this.newCharts("accident","accident");
+    },
+    newCharts(id,propertyName){
+      const container = document.getElementById(id)
+      let myChart = new Charts(container);
+      this[propertyName] = myChart;
+    },
+    setPersonOption(list){
+      const _this =this;
+      let nameList = [];
+      let valueList = [];
+      list.forEach(item => {
+        nameList.push(item.agencyName);
+        valueList.push(item.personNum);
+      })
+      this.communityTendency.setOption({
+        title: {
+          text: '人口分布',
+          style: {
+            fill: '#dddddd',
+            fontSize: 17,
+            fontWeight: 'bold',
+            textAlign: 'center',
+            textBaseline: 'bottom'
+          }
+        },
+        xAxis: {
+          name: '分类',
+          data: nameList ,
+          nameTextStyle: {
+            fill: '#dddddd',
+            fontSize: 10
+          },
+          axisLabel:{
+            style:  {
+              fill: '#4be0e0',
+              fontSize: 15
+            }
+          }
+        },
+        yAxis: {
+          name: '人口数',
+          data: 'value',
+          nameTextStyle: {
+            fill: '#dddddd',
+            fontSize: 10
+          },
+          axisLabel:{
+            style:  {
+              fill: '#dddddd',
+              fontSize: 12
+            }}
+        },
+        legend: {
+          show:true
+        },
+        series: [
+          {
+            data: valueList,
+            type: 'bar'
+          }
+        ]
+      });
+    },
+    setAccidentOption(list){
+      this.accident.setOption({
+        title: {
+          text: '交通事故/事件发生',
+          style: {
+            fill: '#dddddd',
+            fontSize: 17,
+            fontWeight: 'bold',
+            textAlign: 'center',
+            textBaseline: 'bottom'
+          }
+        },
+        xAxis: {
+          name: '第二周',
+          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+          nameTextStyle: {
+            fill: '#dddddd',
+            fontSize: 10
+          },
+          axisLabel:{
+            style:  {
+              fill: '#dddddd',
+              fontSize: 12
+            }}
+        },
+        yAxis: {
+          name: '数量',
+          data: 'value',
+          nameTextStyle: {
+            fill: '#dddddd',
+            fontSize: 10
+          },
+          axisLabel:{
+            style:  {
+              fill: '#dddddd',
+              fontSize: 12
+            }}
+        },
+        series: [
+          {
+            data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
+            type: 'line',
+            lineArea: {
+              show: true,
+              gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
+            }
+          }
+        ]
+      });
+    },
+    handleDevice(index){
+      console.log(index)
+      switch (index){
+        case 0:
+          this.$refs['map'].toLayer('monitoring');
+          break;
+        case 1:
+          this.$refs['map'].toLayer('event');
+          break;
+        default: ;
+      }
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .full{
+    width: 100%;
+    height: 100%;
+  }
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .title{
+    color: white;
+    font-size: 40px;
+  }
+  .demo{
+    color: rgba(0, 100, 100, 0.5);
+  }
+  .closeButton{
+    background:rgba(84,36,17,0.5) ;
+  }
+  .closeButton:hover{
+    background:rgba(84,36,17,0.8) ;
+  }
+  .click:hover{
+    transform: translate(2px,2px);
+  }
+</style>

src/views/grid/viewpanel.vue

@@ -110,8 +110,7 @@
         </dv-border-box-1>
         <dv-border-box-6 ref="border16" :color="['#058e77','#053630']" style="width: 95%;height: 38%;margin: auto;">
           <div class="full center" style="flex-direction: column">
-            <div class="tendency" id="charts2" style="height: 85%;width: 94%;"  >
-            </div>
+            <div class="tendency" id="charts2" style="height: 85%;width: 94%;"  ></div>
           </div>
         </dv-border-box-6>
       </dv-border-box-12>
@@ -391,7 +390,7 @@
               key:'cbb265e2a60bbbc04a52eec4eecdeb12',
               version:'2.0',
               resizeEnable: true,
-              plugins:['AMap.DistrictSearch','AMap.Object3DLayer','AMap.MouseTool','AMap.PolyEditor']
+              plugins:['AMap.DistrictSearch','AMap.Object3DLayer','AMap.MouseTool','AMap.PolyEditor','AMap.GeoJSON']
             }).then((AMap)=>{
               let map = new AMap.Map('map',{
                 zoom:11,
@@ -404,6 +403,7 @@
                 doubleClickZoom: false,
                 mapStyle: 'amap://styles/dark'
               });
+
               _this.AMap = AMap;
               _this.map = map;
               resolve();

vue.config.js

@@ -1,4 +1,10 @@
 const webpack = require('webpack')
+
+const path = require('path')
+const CopywebpackPlugin = require('copy-webpack-plugin')
+const dvgisDist = './node_modules/@dvgis'
+
+
 module.exports = {
   //路径前缀
   publicPath: "/",
@@ -17,7 +23,22 @@ module.exports = {
     entry.add('babel-polyfill').end();
     entry.add('classlist-polyfill').end();
     entry.add('@/mock').end();
+
+
+    config.plugin('copy').use(CopywebpackPlugin,
+      [
+        {
+          patterns: [
+            {
+              from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
+              to: path.join(__dirname, 'dist', 'libs/dc-sdk/resources'),
+            },
+          ],
+        },
+      ]
+      )
   },
+
   css: {
     extract: { ignoreOrder: true }
   },