新增数据面板

src/components/3DMap/Map3D.vue

@@ -71,7 +71,7 @@ export default {
       });
     },
 
-    //添加图标覆盖物
+    //添加图标覆盖物(单个)
     addBillBoard(longitude,latitude,height,image,option= {},id){
       this.$viewer.entities.add(
         {
@@ -85,11 +85,28 @@ export default {
       );
     },
 
+    //添加图标覆盖物(多个)------------未完善（开发中）
+    addBillBoards(positions,image,option= {},layerId){
+     let layer =  new Cesium.BillboardCollection(option);
+     positions.forEach(item => {
+
+     })
+      this.$viewer.entities.add(
+        layer
+      );
+    },
+
+
     //去除覆盖物
     removeEntity(id){
       this.$viewer.entities.removeById(id);
     },
 
+    //去除所有覆盖物
+    removeAllEntity(){
+      this.$viewer.entities.removeAll();
+    },
+
     test(){},
 
     onload(){

src/components/scene/EnvironmentProtection.vue

@@ -0,0 +1,289 @@
+<template>
+  <div  class="full">
+    <!--  污水处理清情况   -->
+    <div style="flex-direction: column;width: 22%;height: 30%;background: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.2));top: 10%;left: 1%" class="position-absolute center">
+      <div style="width: 90%;height: 15%;justify-content: left;" class="center title">
+        生活及工业污水处理量
+      </div>
+      <div style="width: 100%;height: 75%;" class="center">
+        <div style="width: 50%;height: 100%">
+          <div class="center" style="width: 100%;height: 25%;color: #e8ff2c">工业污水</div>
+          <div class="center" style="width: 100%;height: 75%">
+            <dv-water-level-pond :config="config" style="width:120px;height:160px" />
+          </div>
+        </div>
+        <div style="width: 50%;height: 100%">
+          <div class="center" style="width: 100%;height: 25%;color: #e8ff2c">生活污水</div>
+          <div class="center" style="width: 100%;height: 75%">
+            <dv-water-level-pond :config="config2" style="width:120px;height:160px" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 年度总处理污水量对比-->
+    <div class="position-absolute center"
+    style="width: 25%;height: 30%;background: linear-gradient(to right,rgba(0,0,0,0.8),rgba(0,0,0,0.5));top: 42%;left: 1%">
+      <div id="chartsTotal" class="full"></div>
+    </div>
+    <!-- 市区可回收不可回收投放点-->
+    <div class="position-absolute center"
+         style="width: 30%;height: 15%;background: linear-gradient(to right,rgba(26,106,86,0.8),rgba(0,0,0,0.5));top: 73%;left: 1%">
+      <div  class="full center" style="flex-direction: column">
+        <div style="width: 100%;height: 50%;color: #3cc68a;font-size: 25px;font-weight: bold" class="center click">可回收垃圾投放点</div>
+        <div style="width: 100%;height: 50%;color: #009bc1;font-size: 25px;font-weight: bold" class="center click">不可回收垃圾投放点</div>
+      </div>
+    </div>
+    <!-- 卫生设施情况 -->
+    <div class="center position-absolute"
+    style="width: 50%;height: 15%;top: 12%;left: 25%;background: linear-gradient(to bottom,rgba(26,106,86,0.8),rgba(0,0,0,0.5))">
+      <div v-for="(item,index) of iconList" :key="item" style="width: 16%;height: 100%;">
+        <div style="width: 100%;height: 60%" class="center"
+        :style="{
+          background: 'url(/icon/weisheng/'+index+'.png) no-repeat center/40%'
+        }"></div>
+        <div style="width: 100%;height: 15%;color: #dddddd;font-weight: bold" class="center">{{item.name}}</div>
+        <div style="width: 100%;height: 25%;color: #950706;font-weight: bold;font-size: 25px" class="center">{{item.text}}</div>
+      </div>
+    </div>
+    <!-- 垃圾处理方式占比 -->
+    <div class="center position-absolute"
+    style="top: 10%;width: 23%;height: 40%;right: 1%;flex-direction: column"
+    >
+      <dv-border-box-8 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
+        <div class="full center" style="flex-direction: column">
+          <div style="width: 90%;height: 20%;justify-content: left" class="title center">垃圾处理方式占比</div>
+          <div style="width: 100%;height: 80%" id="type"></div>
+        </div>
+      </dv-border-box-8>
+    </div>
+    <!-- 往年垃圾处理总量 -->
+    <div class="center position-absolute"
+         style="top: 51%;width: 25%;height: 35%;right: 1%;flex-direction: column"
+    >
+      <dv-border-box-4 :color="['#49baa5', 'white']" backgroundColor="rgba(0, 0, 0, 0.5)" class="full">
+        <div class="full center" style="flex-direction: column">
+          <div style="width: 90%;height: 20%;justify-content: left" class="title center">往年垃圾处理总量</div>
+          <div style="width: 100%;height: 80%" id="years"></div>
+        </div>
+      </dv-border-box-4>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import Charts, {changeDefaultConfig} from "@jiaminghi/charts";
+
+  export default {
+        name: "EnvironmentProtection",
+        data(){
+          return{
+            config: {
+              data: [20],
+              shape: 'round',
+              colors: ['#dd2e21','#dddddd','#dddddd']
+            },
+            config2: {
+              data: [88],
+              shape: 'round',
+              colors: ['#29dd4d','#dddddd','#dddddd']
+            },
+            chartsTotal: {},
+            type: {},
+            years: {},
+            iconList: [
+              {name: '填埋场',text: '5个'},
+              {name: '垃圾中转站',text: '123座'},
+              {name: '垃圾堆存点',text: '456个'},
+              {name: '垃圾车',text: '123辆'},
+              {name: '环卫工人',text: '789人'},
+              {name: '垃圾桶',text: '1234个'},
+            ],
+          }
+        },
+        mounted() {
+        this.initCharts();
+        this.onload();
+      },
+        methods: {
+      initCharts(){
+        this.newCharts("chartsTotal","chartsTotal");
+        this.newCharts("type","type");
+        this.newCharts("years","years");
+      },
+      newCharts(id,propertyName){
+        const container = document.getElementById(id)
+        let myChart = new Charts(container);
+        this[propertyName] = myChart;
+      },
+      setOption(){
+        this.chartsTotal.setOption({
+          title: {
+            text: '年度总处理水量对比',
+            style: {
+              fill: '#5fe9c8',
+              fontSize: 17,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              textBaseline: 'bottom'
+            }
+          },
+          xAxis: {
+            name: '月份',
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
+            nameTextStyle: {
+              fill: '#5fe9c8',
+              fontSize: 10
+            },
+            axisLabel:{
+              style:  {
+                fill: '#5fe9c8',
+                fontSize: 12
+              }}
+          },
+          yAxis: {
+            name: '处理水量',
+            data: 'value',
+            nameTextStyle: {
+              fill: '#5fe9c8',
+              fontSize: 10
+            },
+            axisLabel:{
+              style:  {
+                fill: '#5fe9c8',
+                fontSize: 12
+              }}
+          },
+          series: [
+            {
+              data: [1200, 2230, 1900, 2100, 3500, 4200, 3985,1200, 2230, 1900, 2100, 3500, 4200, 3985],
+              type: 'bar',
+              gradient: {
+                color: ['#37a2da', '#67e0e3']
+              },
+              lineArea: {
+                show: true,
+                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
+              }
+            }
+          ]
+        });
+        this.type.setOption({
+          title: {
+            text: '垃圾处理方式分布',
+            style: {
+              fill: '#5fe9c8',
+              fontSize: 17,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              textBaseline: 'bottom'
+            }
+          },
+          series: [
+            {
+              type: 'pie',
+              data: [
+                { name: '卫生填埋', value: 0.15 },
+                { name: '分类回收', value: 0.45 },
+                { name: '高温堆肥', value: 0.15 },
+                { name: '焚烧', value: 0.15 },
+              ],
+              insideLabel: {
+                show: true
+              },
+              outsideLabel: {
+                style: {
+                  fill: '#5081e9',
+                  fontSize: 17,
+                  fontWeight: 'bold',
+                  textAlign: 'center',
+                  textBaseline: 'bottom'
+                }
+              }
+            }
+          ]
+        });
+        this.years.setOption({
+          title: {
+            text: '往年垃圾处理总量',
+            style: {
+              fill: '#5fe9c8',
+              fontSize: 17,
+              fontWeight: 'bold',
+              textAlign: 'center',
+              textBaseline: 'bottom'
+            }
+          },
+          xAxis: {
+            data: 'value',
+            nameTextStyle: {
+              fill: '#5fe9c8',
+              fontSize: 10
+            },
+            axisLabel:{
+              style:  {
+                fill: '#5fe9c8',
+                fontSize: 12
+              }}
+          },
+          yAxis: {
+            data: ['2020', '2019', '2018', '2017', '2016'],
+            nameTextStyle: {
+              fill: '#5fe9c8',
+              fontSize: 10
+            },
+            axisLabel:{
+              style:  {
+                fill: '#5fe9c8',
+                fontSize: 12
+              }}
+          },
+          series:[
+            {
+              name: '可回收垃圾',
+              data: [4100, 220, 1900, 2100, 3500, 4200, 3985],
+              type: 'bar',
+              animationCurve: 'easeOutBack'
+            },
+            {
+              name: '不可回收垃圾',
+              data: [4300, 2230, 1900, 2100, 3500, 4200, 3985],
+              type: 'bar',
+              animationCurve: 'easeOutBack'
+            }
+          ]
+        })
+      },
+      onload(){
+        changeDefaultConfig('color',['rgb(208,200,21)','#747373','#6e6138','rgba(70,103,83,0.59)','#674a2c','#621752']);
+        this.setOption();
+      },
+    }
+    }
+</script>
+
+<style scoped>
+  .full{
+    width: 100%;
+    height: 100%;
+  }
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .position-absolute{
+    position: absolute;
+  }
+  .title{
+    color: white;
+    font-size: 16px;
+    font-weight: bold;
+  }
+  .click{
+    cursor: pointer;
+  }
+  .click:hover{
+    transform: translate(2px,2px);
+  }
+</style>

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

@@ -2,9 +2,9 @@
   <div class="my-top-menu">
     <el-button v-for="(item,index) of tagListLeft" :key="item" @click="handleMenu(item,index)" class="menu-button" :class="{'button-active': tagIndex == index}">
       {{item.name}}</el-button>
-    <el-button  v-for="(item,index) in items" :index="item.id+''" @click.native="openMenu(item,index)" :key="index" class="menu-button"
-                :class="{'button-active': tagIndex == index+tagListLeft.length}"
-      >{{item.name}}</el-button>
+<!--    <el-button  v-for="(item,index) in items" :index="item.id+''" @click.native="openMenu(item,index)" :key="index" class="menu-button"-->
+<!--                :class="{'button-active': tagIndex == index+tagListLeft.length}"-->
+<!--      >{{item.name}}</el-button>-->
     <el-button v-for="(item,index) of tagListRight"
                :class="{'button-active': tagIndex == index+tagListLeft.length}+items.length"
                :key="item" @click="handleMenu(item,index)" class="menu-button">
@@ -28,7 +28,7 @@
         ],
         tagListRight: [
           {name: '全屏',path: ''},
-          // {name: '退出',path: ''},
+          {name: '退出',path: ''},
         ],
         activeIndex: "0",
         items: [],

src/views/grid/mainScreen.vue

@@ -23,6 +23,8 @@
     <city-screen v-if="scene==0"></city-screen>
     <trafic-screen @videoShow="handleMonitorClick" v-if="scene==1"></trafic-screen>
     <event-screen @videoShow="handleMonitorClick" v-if="scene==2"></event-screen>
+    <epidemic-screen v-if="scene==4"></epidemic-screen>
+    <environment-protection v-if="scene==5"></environment-protection>
 
     <!--  场景菜单   -->
     <div style="position:absolute;width: 60%;height: 15%;top: 85%;right: 20%;color: white">
@@ -61,9 +63,11 @@ import CityScreen from "../../components/scene/CityScreen";
 import TraficScreen from "../../components/scene/TraficScreen";
 import EventScreen from "../../components/scene/EventScreen";
 import POIService from "../../components/3DMap/POIService";
+import EnvironmentProtection from "../../components/scene/EnvironmentProtection";
+import EpidemicScreen from "../../components/scene/EpidemicScreen";
 export default {
   name: "mainScreen",
-  components: { POIService, CityScreen,TraficScreen,EventScreen, TopMenu, TimeBar, Map3D,CstorLivePlayer},
+  components: {EpidemicScreen,EnvironmentProtection, POIService, CityScreen,TraficScreen,EventScreen, TopMenu, TimeBar, Map3D,CstorLivePlayer},
   mounted() {
     this.scene =0;
   },
@@ -71,7 +75,7 @@ export default {
     return{
         scene: 0,
       videoShow: false,
-        sceneMenu: ["首页","城市交通","事件应急","监控管理","疫情管理","环保"]
+        sceneMenu: ["首页","城市交通","事件应急","政务管理","疫情管理","环境卫生"]
     }
   },
   provide(){

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.69',
         //远程演示服务地址,可用于直接启动项目
         //target: 'https://saber.bladex.vip/api',
         ws: true,