修改

src/components/mp-dialog.vue

@@ -9,18 +9,20 @@
             <div class="title">
               <div style="display: flex;">
                 <dv-decoration-1 style="width:100px;height:30px;" />
-                <div style="padding:0 20px;">{{title}}</div>
+                <div style="padding:0 20px;">{{detail.title}}</div>
                 <dv-decoration-1 style="width:100px;height:30px;" />
               </div>
               <dv-decoration-5 style="width:50%;height:40px;margin-top: -10px;" />
             </div>
             <div class="info">
-              <slot name="detail"></slot>
+              <div style="color: #FFFFFF;padding: 1.25rem;">
+                {{detail.content}}
+              </div>
             </div>
             <div class="bottom">
               <div>
                 <i class="el-icon-time" style="padding-right: 10px;"></i>
-                <span>{{time}}</span>
+                <span>{{detail.time}}</span>
               </div>
             </div>
           </div>
@@ -33,25 +35,21 @@
 <script>
   export default {
     name: "test",
-    props: {
-      title: String
-    },
     data() {
       return {
-        time: "",
+        detail:{},
         dialogShow: false,
         maskShow: false,
         closeEnter: false,
       }
     },
     methods: {
-      open(time) {
-        this.time = time
+      open(detail) {
+        this.detail=detail
         this.maskShow = true
         this.dialogShow = true
       },
       close() {
-        console.log("关闭");
         let _this = this
         this.dialogShow = false
         setTimeout(() => {

src/components/scene/comps/agency-info.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <div class="infoClass" style="font-style: normal;color: #FFFFFF;">
+      <div>园区名称： 信阳榕基软件园</div>
+      <div>建成年份： 1993年</div>
+      <div>占地面积： 130亩</div>
+      <div>建筑面积： 18万平方米</div>
+      <div>住宅面积： 5万平方米</div>
+      <div>园区地址：信阳市南湾湖风景区新七大道西段</div>
+      <div>园区背景：信阳榕基软件园所属福建榕基软件股份有限公司。成立于1993年，2010年在深交所挂牌上市（股票代码：002474），专注于行业应用软件研发、系统集成和运维服务，
+        为党政、质检、能源、司法、环保等行业提供信息系统全生命周期、全方位服务。</div>
+    </div>
+    <div class="infoData">
+      <div class="card" v-for="(item,index) in parInfoList" :key="index">
+        <div>{{item.label}}</div>
+        <div>{{item.value}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data() {
+      return {
+        parInfoList: [{
+            label: '总面积',
+            value: '38900',
+          },
+          {
+            label: '楼栋数量',
+            value: '23',
+          },
+          {
+            label: '办公人数',
+            value: '3566',
+          },
+          {
+            label: '总办公区域',
+            value: '45',
+          },
+          {
+            label: '总入驻企业',
+            value: '44',
+          },
+          {
+            label: '入住率',
+            value: '88%',
+          },
+          {
+            label: '员工宿舍',
+            value: '4栋',
+          },
+          {
+            label: '员工餐厅',
+            value: '2栋',
+          },
+          {
+            label: '写字楼',
+            value: '6栋',
+          },
+        ],
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .infoClass {
+    width: 90%;
+    height: 300px;
+    font-size: 0.74rem;
+    font-weight: 100;
+    margin: 0 auto;
+    letter-spacing: 0.3125rem;
+    overflow: hidden;
+    font-style: normal;
+    font-family: PingFangSC-Regular;
+
+    div {
+      line-height: 1.4rem;
+    }
+
+    div:first-child {
+      padding-top: 0.8rem;
+    }
+  }
+
+  .infoData {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .card {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-direction: column;
+      width: 30%;
+      margin-bottom: 1rem;
+      text-indent: 0.8rem;
+      border-radius: 0.16rem;
+      background-color: #FFFFFF;
+      padding: 0.5rem 0;
+
+      div:first-child {
+        font-size: 0.64rem;
+        color: #818181;
+      }
+
+      div:last-child {
+        padding-top: 0.10rem;
+        font-size: 1.2rem;
+        color: #333;
+        font-weight: 500;
+      }
+    }
+  }
+</style>

src/components/scene/comps/car-info.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="page">
+    <div class="left-layout">
+      <div class="roundBox">
+        <div class="roundBox wave-box">
+          <div class="wave1"></div>
+          <div class="wave2"></div>
+          <div class="wave3"></div>
+          <div class="inner">空车位： 97</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-layout">
+      <div class="data" v-for="item of carInfoList" :key="item">
+        <span>{{item.label}}</span>
+        <span class="value" :style="{color: item.color}">{{item.value}}</span>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: '',
+    data() {
+      return {
+        carInfoList: [{
+            label: '停车场',
+            value: '3个',
+            color: '#ee6666'
+          },
+          {
+            label: '车位总数',
+            value: '230位',
+            color: '#ea7ccc'
+          },
+          {
+            label: '车辆道闸',
+            value: '8个',
+            color: '#91cc75'
+          },
+        ],
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    height: 100%;
+    width: 100%;
+  }
+
+  .left-layout {
+    height: 100%;
+    width: 50%;
+    float: left;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .right-layout {
+    height: 100%;
+    width: 50%;
+    flex-direction: column;
+    margin-left: -1.625rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .data {
+      width: 90%;
+      height: 60px;
+      font-size: 1rem;
+      color: white;
+      letter-spacing: 2px;
+      text-shadow: 2px 2px 5px #282727;
+
+      .value {
+        margin-left: 1.25rem;
+        font-size: 20px;
+        font-weight: 800;
+      }
+    }
+  }
+
+
+  .roundBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 160px;
+    height: 160px;
+    border-radius: 50%;
+    border: 1px #00e3ff solid;
+    box-shadow: 2px 2px 5px #020202;
+    overflow: hidden;
+    animation: water-wave linear infinite;
+  }
+
+  .wave-box {
+    width: 150px;
+    height: 150px;
+    background: linear-gradient(to bottom, rgba(0, 213, 250, 0.3), transparent, transparent)
+  }
+
+  .inner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    z-index: 9;
+    color: white;
+    font-size: 1.25rem;
+    text-shadow: 2px 2px 5px #282727
+  }
+
+
+  .wave1 {
+    position: absolute;
+    top: 40%;
+    left: -25%;
+    background: #33cfff;
+    opacity: .7;
+    width: 200%;
+    height: 200%;
+    border-radius: 40%;
+    animation: inherit;
+    animation-duration: 5s;
+  }
+
+  .wave2 {
+    position: absolute;
+    top: 40%;
+    left: -35%;
+    background: #0eaffe;
+    opacity: .7;
+    width: 200%;
+    height: 200%;
+    border-radius: 35%;
+    animation: inherit;
+    animation-duration: 7s;
+  }
+
+  .wave3 {
+    position: absolute;
+    top: 50%;
+    left: -35%;
+    background: #0f7ea4;
+    opacity: .3;
+    width: 200%;
+    height: 200%;
+    border-radius: 33%;
+    animation: inherit;
+    animation-duration: 11s;
+  }
+
+  @keyframes water-wave {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

src/components/scene/comps/enterprise-type.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="full">
+    <div class="full" id="enterpriseTypeChart"></div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        console.log("123456");
+        var myChart = echarts.init(document.getElementById('enterpriseTypeChart'));
+        window.addEventListener('resize', function() {
+          myChart.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a}<br/>{b} : {c} ({d}%)'
+          },
+          textStyle: {
+            color: "white",
+            fontWeight: 100,
+            fontSize: 11,
+          },
+          legend: {
+            type: 'scroll',
+            orient: 'vertical',
+            textStyle: {
+              color: "white",
+              fontWeight: 100,
+              fontSize: 10
+            },
+            right: 10,
+            top: 20,
+            data: ['商务服务', '科研服务', '信息技术', '批发零售', '制造业', '仓储运输', '房地产业', '文体娱乐', '金融业'],
+            selected: '商务服务',
+          },
+          series: [{
+            name: '类型',
+            type: 'pie',
+            radius: '50%',
+            center: ['40%', '50%'],
+            data: [{
+                name: '商务服务',
+                value: '30000'
+              },
+              {
+                name: '科研服务',
+                value: '30000'
+              },
+              {
+                name: '信息技术',
+                value: '10000'
+              },
+              {
+                name: '批发零售',
+                value: '45000'
+              },
+              {
+                name: '制造业',
+                value: '30000'
+              },
+              {
+                name: '仓储运输',
+                value: '30000'
+              },
+              {
+                name: '房地产业',
+                value: '2000'
+              },
+              {
+                name: '文体娱乐',
+                value: '30000'
+              },
+              {
+                name: '金融业',
+                value: '30000'
+              },
+            ],
+          }]
+        };
+        option && myChart.setOption(option);
+      },
+      getColor(length, value) {
+        let color = []
+        for (var i = 0; i < length; i++) {
+          color.push(value)
+        }
+        return color
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/components/scene/comps/incident.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="list">
+        <div class="item" v-if="index<4" @click.stop="openDialog(item)" v-for="(item,index) in eventList" :key="index">
+          <div class="detail">{{item.detail}}</div>
+          <div class="time">{{item.time}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    inject: ['index'],
+    data() {
+      return {
+        eventList: [{
+            time: '2021/06/21 09:50:21',
+            detail: '烟雾告警：软件园区（E栋）3002 单元房间烟雾告警'
+          },
+          {
+            time: '2021/06/18 08:33:22',
+            detail: '梯控告警：软件园（C栋）2号梯 电梯夹门告警，请及时处理'
+          },
+          {
+            time: '2021/06/18 15:16:12',
+            detail: '道闸告警：车辆车牌抓拍异常告警'
+          },
+          {
+            time: '2021/06/12 09:50:21',
+            detail: '梯控告警：软件园（A栋）1号梯 电梯夹门告警，请及时处理'
+          },
+          {
+            time: '2021/06/21 21:20:33',
+            detail: '施工管理：工地扬尘；施工过程中或者施工堆料未采取有效防尘措施造成扬尘现象'
+          },
+          {
+            time: '2021/06/10 05:21:20',
+            detail: '突发事件：道路积水；道路（桥涵）大面积积水，影响通行的现象'
+          },
+          {
+            time: '2021/06/13 12:25:21',
+            detail: '烟雾告警：软件园区（D栋）1002 单元房间烟雾告警'
+          },
+          {
+            time: '2021/06/18 06:33:05',
+            detail: '街面秩序：机动车乱停放；在未经许可、未合法设置停车泊位的地点停放机动车辆'
+          },
+          {
+            time: '2021/06/16 13:05:03',
+            detail: '施工管理：工地扬尘；施工过程中或者施工堆料未采取有效防尘措施造成扬尘现象'
+          },
+          {
+            time: '2021/06/17 13:21:45',
+            detail: '施工管理：施工占道；施工过程中未经审批擅自占道的现象'
+          },
+          {
+            time: '2021/06/15 03:22:13',
+            detail: '烟雾告警：软件园区（A栋）5012 单元房间烟雾告警'
+          },
+          {
+            time: '2021/06/12 05:06:51',
+            detail: '突发事件：道路积水；道路（桥涵）大面积积水，影响通行的现象'
+          },
+        ]
+      };
+    },
+    mounted() {
+      setInterval(() => {
+        let list = this.eventList;
+        list.push(list[0]);
+        list.splice(0, 1);
+        this.eventList = list;
+      }, 3000)
+    },
+    methods: {
+      openDialog(item) {
+        let detail={
+          title:'园区事件',
+          content:item.detail,
+          time:item.time
+        }
+        this.index.$refs.incident.open(detail)
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding-top: 0.6rem;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .list {
+    width: 100%;
+
+    .item {
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(255, 255, 255, .95);
+      margin: 15px;
+      padding: 15px;
+      border-radius: 0.3rem;
+
+      .time {
+        color: #999;
+      }
+    }
+  }
+</style>

src/components/scene/comps/mating-info.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="page">
+    <div class="full" id="matingInfoChart"></div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        var myChart = echarts.init(document.getElementById('matingInfoChart'));
+        window.addEventListener('resize', function() {
+          myChart.resize();
+        })
+        var data = [150, 230, 224, 218, 135, 147, 260]
+        var xData = ['住宅区', '科教文化', '写字楼', '住宅服务', '购物服务', '医疗保健', '交通设施']
+        let color = this.getColor(data.length, '#3B8FF4')
+        var option = {
+          textStyle: {
+            color: "white",
+            fontWeight: 100,
+            fontSize: 14
+          },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{b} : {c}'
+          },
+          legend: {
+            type: 'scroll',
+            textStyle: {
+              color: "white",
+              fontWeight: 100,
+              fontSize: 14
+            },
+            top: 10,
+            data: ['柱状图', '折线图'],
+          },
+          grid: {
+            show: false, //---是否显示直角坐标系网格
+            left: 60,
+            bottom: 40, //---相对位置，top\bottom\left\right
+            containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
+          },
+          color,
+          xAxis: {
+            type: 'category',
+            data: xData,
+          },
+          yAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          series: [{
+              name: "柱状图",
+              data,
+              type: 'bar',
+              barWidth: 20,
+            },
+            {
+              name: '折线图',
+              data,
+              type: 'line'
+            }
+          ],
+        }
+        option && myChart.setOption(option);
+      },
+      getColor(length, value) {
+        let color = []
+        for (var i = 0; i < length; i++) {
+          color.push(value)
+        }
+        return color
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+  }
+</style>

src/components/scene/comps/video-list.vue

@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <div class="page">
+      <div class="list">
+        <div class="item" v-if="index<4" @click="playVideo(item.deviceId, item.channelId)"
+          v-for="(item,index) in channelList" :key="index">
+          <div class="icon">
+            <div class="el-icon-video-play"></div>
+          </div>
+          <div class="name">
+            {{item.name}}
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import {
+    getDeviceList,
+    getChannelList,
+    startPlay
+  } from "@/api/third/wvp";
+  export default {
+    data() {
+      return {
+        channelList:[]
+      };
+    },
+    inject:['index'],
+    created() {
+      this.loadVideoList(1, 10);
+    },
+    methods: {
+      loadVideoList() {
+        let that = this;
+        getDeviceList(1, 10, null).then(res => {
+          that.deviceList = res.data.data.records;
+          that.deviceList.forEach(item => {
+            getChannelList(1, 100, item.deviceId, null).then(res => {
+              that.channelList = that.channelList.concat(res.data.data.records);
+            })
+          })
+        })
+      },
+      playVideo(deviceId, channelId) {
+        startPlay(deviceId, channelId).then(res => {
+          if (res.data.code == 200) {
+            let info = {
+              streamInfo: res.data.data,
+              hasAudio: true
+            }
+            this.index.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
+          } else {
+            this.$message.error(res.data.msg);
+          }
+        })
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .list {
+    width: 100%;
+
+    .item {
+      display: flex;
+      background-color: rgba(255, 255, 255, .95);
+      margin: 15px;
+      padding: 12px;
+      border-radius: 0.3rem;
+    }
+  }
+
+  .icon {
+    margin-right: 0.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #3b8ff4;
+  }
+
+  .name {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/components/scene/mainScene.vue

@@ -1,429 +1,72 @@
 <template>
-  <div
-    style="position: absolute;width: 100%;height: 100%;top: 0;overflow: hidden;pointer-events: none;z-index: 999999999999999;">
+  <div  style="position: absolute;width: 100%;height: 100%;top: 0;overflow: hidden;pointer-events: none;">
     <!-- 园区信息  -->
     <info-box class="toRight " top="0" left="0" width="21%" height="63%" title="园区信息" mode="right-min" :more="true">
-      <div class="infoClass" style="font-style: normal;color: #FFFFFF;">
-        <div>园区名称： 信阳榕基软件园</div>
-        <div>建成年份： 1993年</div>
-        <div>占地面积： 130亩</div>
-        <div>建筑面积： 18万平方米</div>
-        <div>住宅面积： 5万平方米</div>
-        <div>园区地址：信阳市南湾湖风景区新七大道西段</div>
-        <div>园区背景：信阳榕基软件园所属福建榕基软件股份有限公司。成立于1993年，2010年在深交所挂牌上市（股票代码：002474），专注于行业应用软件研发、系统集成和运维服务，
-          为党政、质检、能源、司法、环保等行业提供信息系统全生命周期、全方位服务。</div>
-      </div>
-      <div class="infoData">
-        <div class="card" v-for="(item,index) in parInfoList" :key="index">
-          <div>{{item.label}}</div>
-          <div>{{item.value}}</div>
-        </div>
-      </div>
+      <agency-info></agency-info>
     </info-box>
 
     <!-- 企业类型  -->
     <info-box class="toRight " bottom="0" left="0" width="21%" height="35%" title="企业类型" mode="right-min" :more="true">
-      <div class="full" id="enterpriseType"></div>
+      <enterpriseType></enterpriseType>
     </info-box>
 
 
     <!-- 周边配套分析  -->
     <info-box class="toLeft" mode="left-min" bottom="0" right="0" width="21%" height="35%" title="周边配套分析" :more="true">
-      <div class="full" style="display: flex;justify-content: center;align-items: flex-end;">
-        <div class="full" id="matingInfo"></div>
-      </div>
+      <mating-info></mating-info>
     </info-box>
 
     <!-- 视频监控  -->
     <info-box class="toLeft " top="0" right="0" width="21%" height="33%" title="视频监控" mode="left-min" :more="true">
-      <div class="full center" style="align-items: flex-start">
-        <div class="" style="width: 100%;">
-          <div v-if="index<4" @click="playVideo(item.deviceId, item.channelId)"
-            style="display: flex;background-color: rgba(255, 255, 255,.95);margin:15px;padding: 12px;border-radius: 0.3rem;"
-            v-for="(item,index) in channelList" :key="index">
-            <div class="center" style="margin-right: 0.6rem;">
-              <div class="el-icon-video-play" style="font-size: 20px;"></div>
-            </div>
-            <div class="center">
-              {{item.name}}
-            </div>
-          </div>
-        </div>
-      </div>
+      <video-list></video-list>
     </info-box>
+
+
     <!-- 车位信息  -->
     <info-box mode="left-min" class="toLeft " top="35%" right="0" width="21%" height="28%" title="车位信息" :more="true">
-      <div class="full">
-        <div style="height: 100%;width: 50%;float: left" class="center">
-          <div class="roundBox center">
-            <div
-              style="width: 150px;height: 150px;background: linear-gradient(to bottom,rgba(0,213,250,0.3),transparent,transparent)"
-              class="roundBox center">
-              <div class="wave1"></div>
-              <div class="wave2"></div>
-              <div class="wave3"></div>
-              <div class="full center"
-                style="z-index: 9;color: white;font-size: 1.25rem;text-shadow: 2px 2px 5px #282727">
-                空车位： 97
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style="height: 100%;width: 50%;flex-direction: column;margin-left: -1.625rem;" class="center">
-          <div
-            style="width: 90%;height: 60px;font-size: 1rem;color: white;letter-spacing: 2px;text-shadow: 2px 2px 5px #282727"
-            v-for="item of carInfoList" :key="item">
-            <span>{{item.label}}</span>
-            <span style="margin-left: 1.25rem;font-size: 20px;font-weight: 800;"
-              :style="{color: item.color}">{{item.value}}</span>
-          </div>
-        </div>
-      </div>
+      <carInfo></carInfo>
     </info-box>
 
 
     <!-- 园区事件  -->
-
     <info-box mode="top-min" class="toTop " bottom="0" right="22%" left="22%" width="56%" height="35%" title="园区事件"
       :more="true">
-      <div class="full center" style="align-items: flex-start;padding-top: 0.6rem;">
-        <div class="" style="width: 100%;">
-          <div v-if="index<4" @click.stop="openDialog(item)"
-            style="display: flex;justify-content: space-between;background-color: rgba(255, 255, 255,.95);margin:15px;padding: 15px;border-radius: 0.3rem;"
-            v-for="(item,index) in eventList" :key="index">
-            <div>{{item.detail}}</div>
-            <div style="color: #999;">{{item.time}}</div>
-          </div>
-        </div>
-      </div>
+      <incident></incident>
     </info-box>
-
   </div>
 </template>
 
 <script>
-  import {
-    reqFullScreen,fullscreenEnable
-  } from "../../util/util.js";
+  import {reqFullScreen,fullscreenEnable } from "../../util/util.js";
   import mpDialog from "../mp-dialog.vue"
+  import enterpriseType from "./comps/enterprise-type.vue"
+  import matingInfo from "./comps/mating-info.vue"
+  import incident from "./comps/incident.vue"
+  import agencyInfo from "./comps/agency-info.vue"
+  import carInfo from "./comps/car-info.vue"
+  import videoList from "./comps/video-list.vue"
   import InfoBox from "./infoBox";
-  import player from './wvp/jessibuca'
-  import * as echarts from 'echarts';
-  import {
-    getDeviceList,
-    getChannelList,
-    startPlay
-  } from "../../api/third/wvp";
   export default {
     name: "mainScene",
     components: {
       mpDialog,
       InfoBox,
-      player,
-    },
-    mounted() {
-      this.initCharts();
-      window.addEventListener('resize', this.resize);
-      setInterval(() => {
-        let list = this.eventList;
-        list.push(list[0]);
-        list.splice(0, 1);
-        this.eventList = list;
-      }, 3000)
-    },
-    watch: {
-      $route() {
-        this.resize()
-      }
-    },
-    created() {
-      this.loadVideoList(1, 10);
+      enterpriseType,
+      matingInfo,
+      agencyInfo,
+      carInfo,
+      videoList,
+      incident
     },
     data() {
       return {
         isOpen: true,
-        controls: {},
-        deviceList: [],
-        channelList: [],
-        carInfoList: [{
-            label: '停车场',
-            value: '3个',
-            color: '#ee6666'
-          },
-          {
-            label: '车位总数',
-            value: '230位',
-            color: '#ea7ccc'
-          },
-          {
-            label: '车辆道闸',
-            value: '8个',
-            color: '#91cc75'
-          },
-        ],
-        parInfoList: [{
-            label: '总面积',
-            value: '38900',
-          },
-          {
-            label: '楼栋数量',
-            value: '23',
-          },
-          {
-            label: '办公人数',
-            value: '3566',
-          },
-          {
-            label: '总办公区域',
-            value: '45',
-          },
-          {
-            label: '总入驻企业',
-            value: '44',
-          },
-          {
-            label: '入住率',
-            value: '88%',
-          },
-          {
-            label: '员工宿舍',
-            value: '4栋',
-          },
-          {
-            label: '员工餐厅',
-            value: '2栋',
-          },
-          {
-            label: '写字楼',
-            value: '6栋',
-          },
-        ],
-        matingList: [{
-            icon: '/data/mai.png',
-            label: '员工宿舍',
-            value: '4栋',
-            color: '#b72e2e'
-          },
-          {
-            icon: '/data/mai.png',
-            label: '员工餐厅',
-            value: '2间',
-            color: '#314817'
-          },
-          {
-            icon: '/data/mai.png',
-            label: '健身房',
-            value: '3间',
-            color: '#5b4a2c'
-          },
-          {
-            icon: '/data/mai.png',
-            label: '写字楼',
-            value: '4栋',
-            color: '#206b65'
-          },
-          {
-            icon: '/data/mai.png',
-            label: '休闲区',
-            value: '1套',
-            color: '#233964'
-          },
-          {
-            icon: '/data/mai.png',
-            label: '广场',
-            value: '1个',
-            color: '#673636'
-          },
-        ],
-        enterpriseTypeInfo: {},
-        enterpriseTypeOption: {
-          tooltip: {
-            trigger: 'item',
-            formatter: '{a}<br/>{b} : {c} ({d}%)'
-          },
-          textStyle: {
-            color: "white",
-            fontWeight: 100,
-            fontSize: 11,
-          },
-          legend: {
-            type: 'scroll',
-            orient: 'vertical',
-            textStyle: {
-              color: "white",
-              fontWeight: 100,
-              fontSize: 10
-            },
-            right: 10,
-            top: 20,
-            data: ['商务服务', '科研服务', '信息技术', '批发零售', '制造业', '仓储运输', '房地产业', '文体娱乐', '金融业'],
-            selected: '商务服务',
-          },
-          series: [{
-            name: '类型',
-            type: 'pie',
-            radius: '50%',
-            center: ['40%', '50%'],
-            data: [{
-                name: '商务服务',
-                value: '30000'
-              },
-              {
-                name: '科研服务',
-                value: '30000'
-              },
-              {
-                name: '信息技术',
-                value: '10000'
-              },
-              {
-                name: '批发零售',
-                value: '45000'
-              },
-              {
-                name: '制造业',
-                value: '30000'
-              },
-              {
-                name: '仓储运输',
-                value: '30000'
-              },
-              {
-                name: '房地产业',
-                value: '2000'
-              },
-              {
-                name: '文体娱乐',
-                value: '30000'
-              },
-              {
-                name: '金融业',
-                value: '30000'
-              },
-            ],
-          }]
-        },
-        matingOption: {
-          textStyle: {
-            color: "white",
-            fontWeight: 100,
-            fontSize: 14
-          },
-          tooltip: {
-            trigger: 'item',
-            formatter: '{b} : {c}'
-          },
-          legend: {
-            type: 'scroll',
-            textStyle: {
-              color: "white",
-              fontWeight: 100,
-              fontSize: 14
-            },
-            top: 10,
-            data: ['柱状图', '折线图'],
-          },
-          grid: {
-            show: false, //---是否显示直角坐标系网格
-            left: 60,
-            bottom: 40, //---相对位置，top\bottom\left\right
-            containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
-          },
-          xAxis: {
-            type: 'category',
-            data: ['住宅区', '科教文化', '写字楼', '住宅服务', '购物服务', '医疗保健', '交通设施']
-          },
-          yAxis: {
-            type: 'value',
-            boundaryGap: [0, 0.01]
-          },
-          series: [{
-              name: "柱状图",
-              data: [150, 230, 224, 218, 135, 147, 260],
-              type: 'bar'
-            },
-            {
-              name: '折线图',
-              data: [150, 230, 224, 218, 135, 147, 260],
-              type: 'line'
-            }
-          ]
-        },
-        matingInfo: {},
-        eventList: [{
-            icon: '/icon/car2.png',
-            time: '2021/06/21 09:50:21',
-            detail: '烟雾告警：软件园区（E栋）3002 单元房间烟雾告警'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/18 08:33:22',
-            detail: '梯控告警：软件园（C栋）2号梯 电梯夹门告警，请及时处理'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/18 15:16:12',
-            detail: '道闸告警：车辆车牌抓拍异常告警'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/12 09:50:21',
-            detail: '梯控告警：软件园（A栋）1号梯 电梯夹门告警，请及时处理'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/21 21:20:33',
-            detail: '施工管理：工地扬尘；施工过程中或者施工堆料未采取有效防尘措施造成扬尘现象'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/10 05:21:20',
-            detail: '突发事件：道路积水；道路（桥涵）大面积积水，影响通行的现象'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/13 12:25:21',
-            detail: '烟雾告警：软件园区（D栋）1002 单元房间烟雾告警'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/18 06:33:05',
-            detail: '街面秩序：机动车乱停放；在未经许可、未合法设置停车泊位的地点停放机动车辆'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/16 13:05:03',
-            detail: '施工管理：工地扬尘；施工过程中或者施工堆料未采取有效防尘措施造成扬尘现象'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/17 13:21:45',
-            detail: '施工管理：施工占道；施工过程中未经审批擅自占道的现象'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/15 03:22:13',
-            detail: '烟雾告警：软件园区（A栋）5012 单元房间烟雾告警'
-          },
-          {
-            icon: '/icon/car2.png',
-            time: '2021/06/12 05:06:51',
-            detail: '突发事件：道路积水；道路（桥涵）大面积积水，影响通行的现象'
-          },
-        ]
       }
     },
     methods: {
       openDialog(item) {
         this.$emit('openDialog', item)
       },
-      resize() {
-        let _this = this
-        setTimeout(() => {
-          _this.matingInfo.resize();
-          _this.enterpriseTypeInfo.resize();
-        }, 500)
-      },
       infoBoxShow(show) {
         if (!fullscreenEnable()) {
           reqFullScreen()
@@ -438,42 +81,6 @@
         })
         this.$emit('showInfoBox',this.isOpen)
       },
-      initCharts() {
-        this.enterpriseTypeInfo = echarts.init(document.getElementById('enterpriseType'));
-        this.enterpriseTypeInfo.setOption(this.enterpriseTypeOption);
-        this.matingInfo = echarts.init(document.getElementById('matingInfo'));
-        this.matingInfo.setOption(this.matingOption);
-      },
-      loadVideoList() {
-        let that = this;
-        getDeviceList(1, 10, null).then(res => {
-          that.deviceList = res.data.data.records;
-          that.deviceList.forEach(item => {
-            getChannelList(1, 100, item.deviceId, null).then(res => {
-              that.channelList = that.channelList.concat(res.data.data.records);
-            })
-          })
-        })
-      },
-      playVideo(deviceId, channelId) {
-        startPlay(deviceId, channelId).then(res => {
-          if (res.data.code == 200) {
-            let info = {
-              streamInfo: res.data.data,
-              hasAudio: true
-            }
-            let data = {
-              deviceId,
-              channelId,
-              info
-            }
-            this.$emit('playVideo', data)
-
-          } else {
-            this.$message.error(res.data.msg);
-          }
-        })
-      }
     },
   }
 </script>
@@ -484,151 +91,4 @@
     justify-content: center;
     align-items: center;
   }
-
-  .infoClass {
-    width: 90%;
-    height: 300px;
-    font-size: 0.74rem;
-    font-weight: 100;
-    margin: 0 auto;
-    letter-spacing: 0.3125rem;
-    overflow: hidden;
-    font-style: normal;
-    font-family: PingFangSC-Regular;
-
-    div {
-      line-height: 1.4rem;
-    }
-
-    div:first-child {
-      padding-top: 0.8rem;
-    }
-  }
-
-  .infoData {
-    width: 100%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-wrap: wrap;
-
-    .card {
-      display: flex;
-      justify-content: center;
-      align-items: flex-start;
-      flex-direction: column;
-      width: 30%;
-      margin-bottom: 1rem;
-      text-indent: 0.8rem;
-      border-radius: 0.16rem;
-      background-color: #FFFFFF;
-      padding: 0.5rem 0;
-
-      div:first-child {
-        font-size: 0.64rem;
-        color: #818181;
-      }
-
-      div:last-child {
-        padding-top: 0.10rem;
-        font-size: 1.2rem;
-        color: #333;
-        font-weight: 500;
-      }
-    }
-  }
-
-
-
-  .iconTagBox {
-    width: 90%;
-    height: 90%;
-    border-radius: 5px 5px 20px 5px;
-    box-shadow: 2px 2px 5px #282727;
-    /*background: #00bdff;*/
-  }
-
-  .event-item:hover {
-    cursor: pointer;
-    background: rgba(107, 92, 62, 0.5);
-    box-shadow: 2px 2px 5px #282727;
-  }
-
-  .event-item {
-    animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-  }
-
-  @keyframes slide-in-bottom {
-    0% {
-      -webkit-transform: translateY(1000px);
-      transform: translateY(1000px);
-      opacity: 0;
-    }
-
-    100% {
-      -webkit-transform: translateY(0);
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  .roundBox {
-    position: relative;
-    width: 160px;
-    height: 160px;
-    border-radius: 50%;
-    border: 1px #00e3ff solid;
-    box-shadow: 2px 2px 5px #020202;
-    overflow: hidden;
-    animation: water-wave linear infinite;
-  }
-
-  .wave1 {
-    position: absolute;
-    top: 40%;
-    left: -25%;
-    background: #33cfff;
-    opacity: .7;
-    width: 200%;
-    height: 200%;
-    border-radius: 40%;
-    animation: inherit;
-    animation-duration: 5s;
-  }
-
-  .wave2 {
-    position: absolute;
-    top: 40%;
-    left: -35%;
-    background: #0eaffe;
-    opacity: .7;
-    width: 200%;
-    height: 200%;
-    border-radius: 35%;
-    animation: inherit;
-    animation-duration: 7s;
-  }
-
-  .wave3 {
-    position: absolute;
-    top: 50%;
-    left: -35%;
-    background: #0f7ea4;
-    opacity: .3;
-    width: 200%;
-    height: 200%;
-    border-radius: 33%;
-    animation: inherit;
-    animation-duration: 11s;
-  }
-
-  @keyframes water-wave {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
 </style>

src/page/index/index.vue

@@ -32,8 +32,12 @@
         </div>
       </div>
     </div>
-
     <!-- <div class="avue-shade" @click="showCollapse"></div> -->
+
+    <!-- 园区事件 -->
+    <mp-dialog ref="incident"></mp-dialog>
+    <!-- 视频播放 -->
+    <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
 </template>
 
@@ -46,6 +50,8 @@
   import top from "./top/";
   import sidebar from "./sidebar/";
   import admin from "@/util/admin";
+  import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
+  import mpDialog from "@/components/mp-dialog.vue"
   import {
     validatenull
   } from "@/util/validate";
@@ -61,7 +67,9 @@
       top,
       tags,
       search,
-      sidebar
+      sidebar,
+      mpDialog,
+      devicePlayer
     },
     name: "index",
     provide() {
@@ -71,6 +79,8 @@
     },
     data() {
       return {
+        incidentdetail: {},
+
         menuShow: false,
         //搜索控制
         isSearch: false,
@@ -123,26 +133,55 @@
               }
             }
             this.$store.commit('SET_MENU_ID', item);
-            let path = {name: (itemActive.label || itemActive.name), src: itemActive.path};
-            let meta = itemActive.meta;
-            if(item.name === '全景园区'){
-              path = {path:"全景园区", src:"/dashboard/panoramapark"}
-            }else if(item.name === '智能运营中心'){
-              path = {path:"智能运营中心", src:"/dashboard/smartoperationcenter"}
-            }else if(item.name === '智能安防'){
-              path = {path:"智能安防", src:"/dashboard/smartsecurity"}
-            }else if(item.name === '一脸通'){
-              path = {path:"一脸通", src:"/dashboard/onefaceaccess"}
-            }else if(item.name === '停车管理'){
-              path = {path:"停车管理", src:"/dashboard/parkingmng"}
-            }else if(item.name === '能耗管理'){
-              path = {path:"能耗管理", src:"/dashboard/energymng"}
-            }else if(item.name === '环境管理'){
-              path = {path:"环境管理", src:"/dashboard/environmentmng"}
-            }else if(item.name === '消防管理'){
-              path = {path:"消防管理", src:"/dashboard/firemng"}
-            }else if(item.name === '红色园区'){
-              path = {path:"红色园区", src:"/dashboard/redpark"}
+            let path = {
+              name: (itemActive.label || itemActive.name),
+              src: itemActive.path
+            };
+            if (item.name === '全景园区') {
+              path = {
+                path: "全景园区",
+                src: "/dashboard/panoramapark"
+              }
+            } else if (item.name === '智能运营中心') {
+              path = {
+                path: "智能运营中心",
+                src: "/dashboard/smartoperationcenter"
+              }
+            } else if (item.name === '智能安防') {
+              path = {
+                path: "智能安防",
+                src: "/dashboard/smartsecurity"
+              }
+            } else if (item.name === '一脸通') {
+              path = {
+                path: "一脸通",
+                src: "/dashboard/onefaceaccess"
+              }
+            } else if (item.name === '停车管理') {
+              path = {
+                path: "停车管理",
+                src: "/dashboard/parkingmng"
+              }
+            } else if (item.name === '能耗管理') {
+              path = {
+                path: "能耗管理",
+                src: "/dashboard/energymng"
+              }
+            } else if (item.name === '环境管理') {
+              path = {
+                path: "环境管理",
+                src: "/dashboard/environmentmng"
+              }
+            } else if (item.name === '消防管理') {
+              path = {
+                path: "消防管理",
+                src: "/dashboard/firemng"
+              }
+            } else if (item.name === '红色园区') {
+              path = {
+                path: "红色园区",
+                src: "/dashboard/redpark"
+              }
             }
             this.$router.push({
               path: this.$router.$avueRouter.getPath(path)

src/views/dashboard/environmentmng/charts/temperature.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="full">
+    <div class="full" id="temperatureChart"></div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        var myChart = echarts.init(document.getElementById('temperatureChart'));
+        window.addEventListener('resize', function() {
+          myChart.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {},
+          toolbox: {
+            show: true,
+            feature: {
+              magicType: {
+                type: ['line', 'bar']
+              },
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['2021-12-29', '2021-12-30', '2021-12-31', '2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04']
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value} °C'
+            }
+          },
+          series: [{
+              name: '最高温',
+              type: 'line',
+              data: [10, 11, 13, 11, 12, 12, 9],
+              markPoint: {
+                data: [{
+                    type: 'max',
+                    name: 'Max'
+                  },
+                  {
+                    type: 'min',
+                    name: 'Min'
+                  }
+                ]
+              },
+              markLine: {
+                data: [{
+                  type: 'average',
+                  name: 'Avg'
+                }]
+              }
+            },
+            {
+              name: '最低温',
+              type: 'line',
+              data: [1, -2, 2, 5, 3, 2, 0],
+              markPoint: {
+                data: [{
+                  name: '周最低',
+                  value: -2,
+                  xAxis: 1,
+                  yAxis: -1.5
+                }]
+              },
+              markLine: {
+                data: [{
+                    type: 'average',
+                    name: 'Avg'
+                  },
+                  [{
+                      symbol: 'none',
+                      x: '90%',
+                      yAxis: 'max'
+                    },
+                    {
+                      symbol: 'circle',
+                      label: {
+                        position: 'start',
+                        formatter: 'Max'
+                      },
+                      type: 'max',
+                      name: '最高点'
+                    }
+                  ]
+                ]
+              }
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+      getColor(length, value) {
+        let color = []
+        for (var i = 0; i < length; i++) {
+          color.push(value)
+        }
+        return color
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/dashboard/environmentmng/charts/wind.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="page">
+    <div class="full" id="windChart"></div>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts';
+  export default {
+    name: '',
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      let _this = this
+      setTimeout(() => {
+        _this.initMyCharts()
+      }, 500)
+    },
+    methods: {
+      initMyCharts() {
+        var myChart = echarts.init(document.getElementById('windChart'));
+        window.addEventListener('resize', function() {
+          myChart.resize();
+        })
+        var option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {},
+          toolbox: {
+            show: true,
+            feature: {
+              magicType: {
+                type: ['line', 'bar']
+              },
+            }
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['2021-12-29', '2021-12-30', '2021-12-31', '2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04']
+          },
+          yAxis: {
+            type: 'value',
+            axisLabel: {
+              formatter: '{value} °C'
+            }
+          },
+          series: [{
+              name: '最高温',
+              type: 'line',
+              data: [18, 24, 22, 26,28, 28, 22],
+            },
+            {
+              name: '最低温',
+              type: 'line',
+              data: [12, 14, 16, 16, 14, 18, 14],
+              markPoint: {
+                data: [{
+                  name: '周最低',
+                  value: -2,
+                  xAxis: 1,
+                  yAxis: -1.5
+                }]
+              },
+              markLine: {
+                data: [{
+                    type: 'average',
+                    name: 'Avg'
+                  },
+                  [{
+                      symbol: 'none',
+                      x: '90%',
+                      yAxis: 'max'
+                    },
+                    {
+                      symbol: 'circle',
+                      label: {
+                        position: 'start',
+                        formatter: 'Max'
+                      },
+                      type: 'max',
+                      name: '最高点'
+                    }
+                  ]
+                ]
+              }
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
+      getColor(length, value) {
+        let color = []
+        for (var i = 0; i < length; i++) {
+          color.push(value)
+        }
+        return color
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page {
+    height: 23.3rem;
+    width: 75rem;
+    margin-top: 1.875rem
+  }
+
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/dashboard/environmentmng/comps/energy-statistics.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="page_weather">
+    <more title="月度能耗统计" nomore></more>
+
+    <img style="width: 100%;height: 36rem;margin-top: 1.25rem;" src="/img/test/tq.png"></img>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components:{
+      more,
+    },
+    data() {
+      return {
+
+      };
+    },
+    methods: {
+
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page_weather{
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 1.25rem;
+    margin-top: 0.625rem;
+  }
+</style>

src/views/dashboard/environmentmng/comps/indicators-change.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInUp">
+    <more title="各指标变化趋势"></more>
+
+    <div class="tab" :style="activeIndex==0?'border-left:none':''">
+      <div class="list" @click="activeIndex=index" :class="{'activeClass':activeIndex==index}"
+        v-for="(item,index) in list" :key="index">
+        {{item.name}}
+      </div>
+    </div>
+
+    <div class="charts">
+      <temperature v-if="activeIndex==0"></temperature>
+    </div>
+  </div>
+</template>
+
+<script>
+  import temperature from "../charts/temperature.vue"
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more,
+      temperature,
+    },
+    data() {
+      return {
+        activeIndex: 0,
+        list: [{
+            name: '温度',
+          },
+          {
+            name: '湿度',
+          },
+          {
+            name: '风力',
+          },
+          {
+            name: 'PM2.5',
+          },
+          {
+            name: 'PM10',
+          },
+          {
+            name: 'O3',
+          },
+          {
+            name: '光照',
+          }
+        ]
+      };
+    },
+    methods: {
+      tabClick({
+        index
+      }) {
+        this.activeIndex = index
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .el-tabs--border-card {
+    background: #FFF;
+    border: 1px solid #DCDFE6;
+    box-shadow: none !important;
+  }
+
+  .charts {
+    height: 24.1rem;
+    width: 75rem;
+    margin-top: 1.875rem
+  }
+
+  .page {
+    margin-top: 0.625rem;
+    padding: 1.25rem;
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .activeClass {
+    background-color: #FFFFFF;
+    color: #3b8ff4 !important;
+    border-right: 1px solid #dcdfe6;
+    border-left: 1px solid #dcdfe6;
+  }
+
+
+  .tab {
+    cursor: pointer;
+    display: flex;
+    margin-top: 1.25rem;
+    background-color: #f5f7fa;
+    width: 100%;
+    height: 40px;
+    border: 1px solid #dcdfe6;
+
+    .list {
+      padding: 0 20px;
+      height: 40px;
+      box-sizing: border-box;
+      line-height: 40px;
+      display: inline-block;
+      list-style: none;
+      font-size: 12px;
+      font-weight: 400;
+      color: #a3a5ab;
+      position: relative;
+    }
+  }
+</style>

src/views/dashboard/environmentmng/comps/monitoring-points.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class=" page  animate__animated animate__faster animate__fadeInUp" style="min-height: 632px;">
+    <more title="监测点实时数据"></more>
+
+    <div class="area" style="margin: 0.625rem 0 0.4rem;">
+      <div class="area1 area-title">检测指标</div>
+      <div class="area2 area-title">当前值</div>
+      <div class="area3 area-title">标准值</div>
+    </div>
+
+    <div class="area" style="margin-bottom: 0.7rem;" v-for="(item,index) in list" :key="index">
+      <div class="area1">{{item.name}}</div>
+      <div class="area2">{{item.currentValue}}</div>
+      <div class="area3">{{item.standardValues}}</div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+            name: '温度',
+            currentValue: '22.5°C',
+            standardValues: '12-30°C'
+          },
+          {
+            name: '湿度',
+            currentValue: '48RH',
+            standardValues: '20-60RH'
+          },
+          {
+            name: 'PM2.5',
+            currentValue: '22.5ug/m3',
+            standardValues: '12-200ug/m3'
+          },
+          {
+            name: 'PM10',
+            currentValue: '22.5ug/m3',
+            standardValues: '12-200ug/m3'
+          },
+          {
+            name: 'O3',
+            currentValue: '22.5ppm',
+            standardValues: '12-300ppm'
+          },
+          {
+            name: 'CO2',
+            currentValue: '22.5ppm',
+            standardValues: '12-300ppm'
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .full {
+    width: 100%;
+    height: 100%;
+  }
+
+  .area-title {
+    font-weight: 800;
+    background-color: #FFFFFF !important;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .page {
+    margin-top: 0.625rem;
+    background-color: #FFFFFF;
+    padding: 1.2rem;
+    box-sizing: border-box;
+  }
+
+  .area {
+    color: #666666;
+    font-size: 0.9rem;
+    display: flex;
+    width: 100%;
+
+    .area1,
+    .area2,
+    .area3 {
+      width: 33%;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f5f5f5;
+    }
+  }
+</style>

src/views/dashboard/environmentmng/comps/warning-information.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="page animate__animated animate__faster animate__fadeInRight">
+    <more title="设备告警"></more>
+    <!-- 工单列表 -->
+    <div style="padding-top: 0.8rem;">
+      <div class="card" v-for="(item,index) in list" :key="index">
+        <div class="left">
+          <div class="title">{{item.title}}</div>
+          <div class="position">
+            {{item.position}}
+          </div>
+        </div>
+        <div class="right">
+          <div class="data" :class="item.isHigh?'highColor':'lowColor'">
+            <img :src="item.isHigh?'/img/environment/xs.png':'/img/environment/xx.png'" />
+            <span >{{item.data}}</span>
+          </div>
+          <div class="time">{{item.time}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        tabList: [{
+            label: '设备工单',
+            value: 0
+          },
+          {
+            label: '保修工单',
+            value: 1
+          }
+        ],
+        list:[{
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:false,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:false,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:false,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        },
+        {
+          title:"温度",
+          position:'A1栋工业楼3号车间',
+          isHigh:true,
+          data:'15.3rh',
+          time:'2021-03-15 22:40'
+        }]
+      };
+    },
+    methods: {
+
+    }
+  };
+</script>
+
+
+<style lang="scss" scoped>
+  .page {
+    box-sizing: border-box;
+    background-color: #FFFFFF;
+    padding: 1rem;
+  }
+
+  .center{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .lowColor{
+    color:#3B8FF4
+  }
+
+  .highColor{
+    color:#EB653C
+  }
+
+  .card {
+    cursor: pointer;
+    box-sizing: border-box;
+    background-color: #F5F5F5;
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 5px;
+    padding: 15px;
+
+    .left {
+      text-align: left;
+
+      .title {
+        font-size: 0.8rem;
+        font-weight: 800;
+        color: #000000;
+      }
+
+      .position {
+        margin-top: 0.375rem;
+        font-size: 13px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+
+    .right {
+      text-align: right;
+
+      .data {
+        justify-content: flex-end;
+        display: flex;
+        font-size: 13px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+
+        img{
+          width: 1rem;
+          height: 1rem;
+          border-radius: 50%;
+          margin-right: 4px;
+        }
+      }
+
+      .time {
+        margin-top: 0.375rem;
+        font-size: 13px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+  }
+</style>

src/views/dashboard/environmentmng/comps/weather.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="page_weather">
+    <more title="实时环境监测" nomore></more>
+    <div style="padding-top: 1.25rem;overflow: hidden;">
+      <div id="he-plugin-standard"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components:{
+      more,
+    },
+    data() {
+      return {
+
+      };
+    },
+    mounted() {
+      this.initWeather()
+    },
+    methods: {
+      initWeather() {
+        window.WIDGET = {
+          "CONFIG": {
+            "layout": "1",
+            "width": "1200",
+            "height": "180",
+            "background": "4",
+            "dataColor": "FFFFFF",
+            "backgroundColor": "429beb",
+            "aqiColor": "FFFFFF",
+            "key": "8be9d70c8dd241eaa13cd84c655c14cd"
+          }
+        }
+        let script = document.createElement('script')
+        script.type = "text/javascript"
+        script.src = "https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"
+        document.getElementsByTagName('head')[0].appendChild(script)
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page_weather{
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 1.25rem;
+  }
+</style>

src/views/dashboard/environmentmng/environmentmng.vue

@@ -1,20 +1,72 @@
 <template>
-  <div>
-    红色园区
+  <div class="body">
+    <el-row>
+      <!-- 左容器 -->
+      <el-col :span="18">
+        <div style="box-sizing: border-box;margin: 0.625rem;margin-top: 0;">
+          <weather></weather>
+          <energy-statistics></energy-statistics>
+          <indicatorsChange></indicatorsChange>
+        </div>
+      </el-col>
+      <!-- 右容器 -->
+      <el-col :span="6">
+        <warning-information></warning-information>
+        <monitoring-points></monitoring-points>
+      </el-col>
+    </el-row>
+
+    <div style="height: 1.25rem;"></div>
   </div>
 </template>
 
 <script>
-export default {
-  name: '',
-  data() {
-    return {
-      
-    };
-  }
-};
+  import monitoringPoints from "./comps/monitoring-points.vue"
+  import indicatorsChange from "./comps/indicators-change.vue"
+  import weather from "./comps/weather.vue"
+  import energyStatistics from "./comps/energy-statistics.vue"
+  import warningInformation from "./comps/warning-information.vue"
+  export default {
+    components: {
+      weather,
+      monitoringPoints,
+      indicatorsChange,
+      warningInformation,
+      energyStatistics
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
 </script>
 
+<style>
+  .avue-main {
+    background-color: #F5F5F5 !important;
+  }
+</style>
+
 <style lang="scss" scoped>
-  
-</style>
+  .body {
+    box-sizing: border-box;
+    background-color: #F5F5F5;
+    height: 100%;
+  }
+
+  .mtp{
+    margin-top: 0.625rem;
+  }
+
+  .my-layout {
+    margin-top: 0.625rem;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    .layout {
+      width: calc(50% - 5px);
+    }
+  }
+</style>

src/views/dashboard/firemng/comps/filre-inspection.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="page_access animate__animated animate__faster animate__fadeInUp" style="height: 37.6rem;">
+    <more title="防火检查"></more>
+    <div class="area">
+      <div class="area1">日期</div>
+      <div class="area2">区域</div>
+      <div class="area3">维保人员</div>
+      <div class="area4">事件</div>
+    </div>
+
+    <div v-for="(item,index) in 10" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
+      <div class="area1">2021-12-12</div>
+      <div class="area2">南区A11栋</div>
+      <div class="area3">吴**</div>
+      <div class="area4">日常消防设施检测</div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import tab from "@/components/tab.vue"
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      tab,
+      more
+    },
+    data() {
+      return {
+
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page_access {
+    background-color: #FFFFFF;
+    padding: 1.25rem;
+    height: 29rem;
+    box-sizing: border-box;
+  }
+
+
+  .area {
+    padding: 0.5rem 0;
+    display: flex;
+    font-size: 0.875rem;
+    color: #666666;
+    margin-top: 1.4rem;
+    text-align: center;
+
+    .area1 {
+      width: 23%;
+    }
+
+    .area2 {
+      width: 23%;
+    }
+
+    .area3 {
+      width: 23%;
+    }
+
+    .area4 {
+      width: 31%;
+    }
+
+  }
+</style>

src/views/dashboard/firemng/comps/fire-fighting-knowledge.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="page1" style="height: 37.6rem;">
+    <more title="消防知识普及"></more>
+    <el-image class='fire-img' src="/img/icon/fire-bg.png" fit="cover"></el-image>
+
+    <div class="list">
+      <div class="item" v-for="(item,index) in list" :key="index">
+        {{index+1}}. {{item.title}}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import more from "@/components/more.vue"
+  export default {
+    components: {
+      more
+    },
+    data() {
+      return {
+        list: [{
+            title: '消防安全四个能力”的内容是什么?'
+          },
+          {
+            title: '消防工作的方针是什么?'
+          },
+          {
+            title: '使用干粉灭火器有哪些注意事项?'
+          },
+          {
+            title: '灭火器压力表如何辨认?'
+          },
+          {
+            title: '消火栓的使用方法?'
+          },
+          {
+            title: '什么是火灾隐患?'
+          },
+          {
+            title: '消防工作的三支队伍是指什么?'
+          }
+        ]
+      };
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .page1 {
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 1.25rem;
+    height: 29rem;
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .fire-img {
+    box-sizing: border-box;
+    margin: 20px 0;
+    width: 100%;
+    height: 160px;
+  }
+
+  .list {
+    line-height: 32px;
+
+    .item {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #666666;
+      opacity: 1;
+    }
+  }
+</style>

src/views/dashboard/firemng/comps/maintenance.vue

@@ -1,7 +1,6 @@
 <template>
-  <div class="page_access animate__animated animate__faster animate__fadeInUp">
-    <more title="防火检查"></more>
-
+  <div class="page_access animate__animated animate__faster animate__fadeInUp" style="height: 37.6rem;">
+    <more title="设备维保"></more>
     <div class="area">
       <div class="area1">日期</div>
       <div class="area2">区域</div>
@@ -9,7 +8,7 @@
       <div class="area4">事件</div>
     </div>
 
-    <div v-for="(item,index) in 7" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
+    <div v-for="(item,index) in 10" :key="index" class="area" style="background-color: #f5f5f5;margin-top: 0.8rem;">
       <div class="area1">2021-12-12</div>
       <div class="area2">南区A11栋</div>
       <div class="area3">吴**</div>
@@ -38,7 +37,8 @@
   .page_access {
     background-color: #FFFFFF;
     padding: 1.25rem;
-    height: 28rem;
+    height: 29rem;
+    box-sizing: border-box;
   }
 
 
@@ -47,7 +47,7 @@
     display: flex;
     font-size: 0.875rem;
     color: #666666;
-    margin-top: 1rem;
+    margin-top: 1.4rem;
     text-align: center;
 
     .area1 {

src/views/dashboard/firemng/firemng.vue

@@ -20,7 +20,7 @@
           <!-- 维修记录 -->
           <div class="my-layout animate__animated animate__faster animate__fadeInUp">
             <div class="layout">
-              <maintenance></maintenance>
+              <filre-inspection></filre-inspection>
             </div>
             <div class="layout">
               <maintenance></maintenance>
@@ -31,6 +31,9 @@
       <!-- 右容器 -->
       <el-col :span="6">
         <alarm></alarm>
+        <div style="margin-top: 0.75rem;">
+          <fire-fighting-knowledge></fire-fighting-knowledge>
+        </div>
       </el-col>
     </el-row>
     <div style="height: 1.25rem;"></div>
@@ -41,14 +44,18 @@
   import alarm from "./comps/alarm.vue"
   import monitor from "./comps/monitor.vue"
   import maintenance from "./comps/maintenance.vue"
+  import filreInspection from "./comps/filre-inspection.vue"
+  import fireFightingKnowledge from "./comps/fire-fighting-knowledge.vue"
   import warningTypeAnalysis from "./comps/warning-type-analysis.vue"
   import warningNumAnalysis from "./comps/warning-num-analysis.vue"
   export default {
     components: {
       alarm,
       maintenance,
+      filreInspection,
       warningTypeAnalysis,
       warningNumAnalysis,
+      fireFightingKnowledge,
       monitor
     },
     data() {
@@ -72,6 +79,10 @@
     margin-bottom: 1.9rem;
   }
 
+  .mtp {
+    margin-top: 0.625rem;
+  }
+
   .my-layout {
     margin-top: 0.625rem;
     display: flex;

src/views/dashboard/parkingmng/parkingmng.vue

@@ -15,7 +15,7 @@
         <paking-data></paking-data>
       </el-col>
     </el-row>
-    
+
     <div style="height: 1.25rem;"></div>
   </div>
 </template>

src/views/wel/index.vue

@@ -1,24 +1,15 @@
 <template>
-  <div class="full animate__animated animate__faster" v-show="menuIndex == 0" :class="menuIndex == 0 ? 'animate__fadeInUpBig' : 'animate__fadeOutUpBig'" style="overflow: hidden;" >
+  <div class="full animate__animated animate__faster" v-show="menuIndex == 0"
+    :class="menuIndex == 0 ? 'animate__fadeInUpBig' : 'animate__fadeOutUpBig'" style="overflow: hidden;">
     <!--  背景--3D场景   -->
-    <scene3-d ref="scene" style="z-index: 9;" :camera-option="cameraOptions" :controls-option="controlsOption"
-              @loadingFinish="initScene">
+    <scene3-d ref="scene" :camera-option="cameraOptions" :controls-option="controlsOption" @loadingFinish="initScene">
     </scene3-d>
     <!-- 数据面板  -->
-    <main-scene @openDialog="openDialog" @playVideo="playVideo" @showInfoBox="showInfoBox" ref="data-panel"
-                style="z-index: 9;"> </main-scene>
+    <main-scene @showInfoBox="showInfoBox" ref="data-panel">
+    </main-scene>
 
     <!--  工具栏   -->
     <tools-bar :option="toolsOption"></tools-bar>
-
-    <!-- 园区事件 -->
-    <mp-dialog ref="mpDialog" title="园区事件">
-      <div slot="detail" style="color: #FFFFFF;padding: 1.25rem;">
-        {{dialogDetail.detail}}
-      </div>
-    </mp-dialog>
-    <!-- 视频播放 -->
-    <devicePlayer ref="devicePlayer"></devicePlayer>
   </div>
 </template>
 
@@ -26,8 +17,6 @@
   import {
     mapGetters
   } from "vuex";
-  import devicePlayer from "@/components/scene/wvp/devicePlayer.vue";
-  import mpDialog from "../../components/mp-dialog.vue"
   import TopBar from "../../components/3DScene/top-bar/top-bar";
   import Scene3D from "../../components/3DScene/3DScene";
   import MainScene from "../../components/scene/mainScene";
@@ -46,8 +35,6 @@
   export default {
     name: "index",
     components: {
-      devicePlayer,
-      mpDialog,
       MainScene,
       Scene3D,
       TopBar,
@@ -58,8 +45,6 @@
     },
     data() {
       return {
-        dialogDetail: {},
-
         mesh: {},
         searchText: "",
         searchCameraType: "",
@@ -69,10 +54,10 @@
         handlePanelShow: false,
         toolsPanelType: "building",
         toolsOption: [{
-          icon: '/img/tools/361.png',
-          name: '旋转',
-          event: this.round
-        },
+            icon: '/img/tools/361.png',
+            name: '旋转',
+            event: this.round
+          },
           {
             icon: '/img/tools/reset.png',
             name: '复位',
@@ -135,9 +120,9 @@
           lookAt: [1300, 0, 1300],
         },
         obj: [{
-          mtlUrl: '/obj/CAR.mtl',
-          objUrl: '/obj/CAR.obj'
-        },
+            mtlUrl: '/obj/CAR.mtl',
+            objUrl: '/obj/CAR.obj'
+          },
           {
             mtlUrl: '/obj/DX.mtl',
             objUrl: '/obj/DX.obj'
@@ -192,9 +177,9 @@
           },
         ],
         buildings: [{
-          text: '软件园主楼',
-          position: [100, 115, 100]
-        },
+            text: '软件园主楼',
+            position: [100, 115, 100]
+          },
           {
             text: '软件园副楼',
             position: [170, 50, 50]
@@ -217,12 +202,12 @@
           },
         ],
         cameraList: [{
-          number: 'HK-nm51658186',
-          position: [50, 0, 70],
-          src: '/video/video2.mp4',
-          name: "设备2",
-          type: "枪机"
-        },
+            number: 'HK-nm51658186',
+            position: [50, 0, 70],
+            src: '/video/video2.mp4',
+            name: "设备2",
+            type: "枪机"
+          },
           {
             number: 'HK-nm51658186',
             position: [-100, 0, 100],
@@ -258,7 +243,7 @@
     },
     provide() {
       return {
-        "index": this
+        "webIndex": this
       }
     },
     mounted() {
@@ -280,28 +265,10 @@
             } else {
               item.icon = '/img/tools/full.png'
             }
-            console.log(item, "123");
             this.$forceUpdate()
           }
         })
       },
-      openDialog(item) {
-        this.dialogDetail = item
-        this.$refs.mpDialog.open(item.time)
-      },
-      playVideo(item) {
-
-        const {
-          deviceId
-        } = item
-        const {
-          channelId
-        } = item
-        const {
-          info
-        } = item
-        this.$refs.devicePlayer.openDialog("media", deviceId, channelId, info);
-      },
       reset() {
         this.$refs['scene'].camera.position.z = this.cameraOptions.position[0];
         this.$refs['scene'].camera.position.x = this.cameraOptions.position[1];