网格大屏-人员统计

src/components/top-menu.vue

@@ -3,11 +3,11 @@
     <dv-border-box-2 title="dv-border-box-11" :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)">
       <dv-border-box-8>
         <div class="nav">
-          <div style="position: absolute;bottom: 0px;left: 0;">
-            <dv-decoration-8 style="width:700px;height:50px;" />
+          <div style="position: absolute;bottom: 0px;left: 10px;width: 40%;height: 45%;">
+            <dv-decoration-8 style="width: 100%;height: 100%;" />
           </div>
-          <div style="position: absolute;bottom: 0px;right: 0;">
-            <dv-decoration-8 :reverse="true" style="width:700px;height:50px;" />
+          <div style="position: absolute;bottom: 0px;right: 10px;width: 40%;height: 45%;overflow: hidden;">
+            <dv-decoration-8 :reverse="true" style="width: 100%;height: 100%;" />
           </div>
           <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100%;">
             <div style="display: flex;margin-top: 40px;">
@@ -22,7 +22,7 @@
               </div>
               <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
             </div>
-            <dv-decoration-5 style="width:500px;height:50px;margin-top: -15px;" />"
+            <dv-decoration-5 style="width:35%;height:50%;margin-top: -25px;" />"
           </div>
         </div>
         <div class="nav_btn">

src/views/grid/dataPage.vue

@@ -96,7 +96,7 @@
   .btnGroup {
     position: absolute;
     left: 22%;
-    top: calc(100% - 920px);
+    top: 12%;
 
     .btn-item {
       margin: 10px 0;

src/views/grid/dataView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="full" style="position: relative;" :style="tagIndex==0?'':'background-color: rgba(20, 41, 87,.5);'">
-    <div style="width: 100%;z-index: 999999;" :class="tagIndex==0?'tagIndex0':'tagIndex1'">
+    <div style="width: 100%;z-index: 999999;height: 10%;" :class="tagIndex==0?'tagIndex0':''">
       <top-menu style="z-index: 99999;" :gridList="gridList"></top-menu>
     </div>
       <dv-border-box-8 :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)" :style="tagIndex==0?'':'height: 90%'">
@@ -351,8 +351,6 @@
     color: white;
     font-size: 40px;
   }
-.tagIndex1{
-  height: 10%;
-}
+
 
 </style>

src/views/grid/scenes/dataScreen.vue

@@ -1,31 +1,31 @@
 <template>
   <div class="full">
     <!-- 左视图 -->
-    <div style="position: absolute;bottom: 0;left: 0;width: 22%;">
-      <div class="animate__animated animate__backInUp animate__faster" style="height: 60px;margin-bottom: 5px;">
-        <time-bar ></time-bar>
+   <div
+      style="position: absolute;bottom: 0;left: 0;width: 22%;height: 88%;display: flex;flex-direction: column;justify-content: flex-end;">
+      <div class="animate__animated animate__backInUp animate__faster center" style="height: 7%;margin-bottom: 1%;">
+        <time-bar></time-bar>
       </div>
 
-      <dv-border-box-11 class="animate__animated animate__backInLeft animate__faster" title="通知公告" ref="border3" style="height: 260px;"
-        :color="color" :backgroundColor="backgroundColor">
-        <div style="height: 25px;"></div>
-        <dv-border-box-1 style="height: 235px;">
-          <div class="full center" style="flex-direction: column">
+     <dv-border-box-11 style="height: 30%" class="animate__animated animate__backInLeft animate__faster" title="通知公告"
+        ref="border3" :color="color" :backgroundColor="backgroundColor">
+        <div style="height: 10%;"></div>
+        <dv-border-box-1 style="height: 90%;width: 99%;">
+          <div class="full center" style="flex-direction: column;z-index: 1;">
+            <div style="height: 5%;"></div>
             <dv-scroll-board @click="noticeClick" ref="border8" v-if="noticeOption.data.length>0"
-              style="height: 85%;width: 94%" :config="noticeOption" />
+              style="height: 88%;width: 95%" :config="noticeOption" />
             <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无通知公告</div>
           </div>
         </dv-border-box-1>
       </dv-border-box-11>
 
-
-
-      <dv-border-box-12  class="animate__animated animate__backInLeft animate__faster" style="height: 300px;overflow: hidden;"
-        :color="color" :backgroundColor="backgroundColor">
+    <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster"
+        style="height: 32%;overflow: hidden;" :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1 ref="border2">
-          <div style="padding-top: 20px;">
+          <div style="padding-top: 15px;">
             <div style="display: flex;justify-content: space-around;">
-              <img class="grid-btn" @click="changeGridIndex(0,'left')" src="../../../../public/data/left.png"  />
+              <img class="grid-btn" @click="changeGridIndex(0,'left')" src="../../../../public/data/left.png" />
               <div id="gridName" class="animate__faster" style="font-size: 22px;color: #FFFFFF;">
                 {{'网格1:'+userInfo.grid[0].gridName}}
               </div>
@@ -40,36 +40,36 @@
         </dv-border-box-1>
       </dv-border-box-12>
 
-      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 300px"
+     <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
-          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
-            <div id="communityOption" style="height: 100%;width: 100%;"></div>
+          <div style="width: 100%;height: 100%;">
+            <div id="communityOption" style="height: 100%;width: 95%;"></div>
           </div>
         </dv-border-box-1>
       </dv-border-box-12>
     </div>
 
 
-    <!-- 右边视图 -->
-    <div style="position:absolute;bottom: 0;right: 0px;width: 22%;">
-
-      <dv-border-box-12 style="overflow: hidden;" class="animate__animated animate__backInRight animate__faster" ref="border12" :color="color"
+    <div
+      style="position: absolute;bottom: 0;right: 0;width: 22%;height: 85%;display: flex;flex-direction: column;justify-content: flex-end;">
+      <dv-border-box-12 style="overflow: hidden;height: 55%;"
+        class="animate__animated animate__backInRight animate__faster" ref="border12" :color="color"
         :backgroundColor="backgroundColor">
-        <div style="height: 2%"></div>
-        <dv-border-box-1 ref="border2" style="height: 500px;">
+        <dv-border-box-1 ref="border2" style="height: 100%">
           <div class=" center" :style="{color:fontColor}"
-            style="width: 100%;height: 60px;display: flex;align-items: center;text-indent: 2em">
+            style="width: 100%;height: 12%;font-size: 20px;display: flex;align-items: center;text-indent: 2em;font-weight: 800;">
             设备概况</div>
-          <dv-decoration-6 style="margin: auto;width:90%;height:5px;" />
-          <div style="width: 90%;margin: auto;height: 28%;" class="center">
+          <dv-decoration-6 style="margin: auto;width:90%;height:3%;" />
+          <div style="width: 90%;margin: auto;height: 25%;" class="center">
             <div class="left" @click="changeCurrenDeviceIndex(-1)"></div>
             <div id="deviceName" class="data2 green animate__faster" style="width: 40%;height: 100%;">
-              <div   class="device-title" :style="{color:fontColor}">{{device.dictValue}}</div>
+              <div class="device-title" :style="{color:fontColor}">{{device.dictValue}}</div>
             </div>
             <div class="right" @click="changeCurrenDeviceIndex(1)"></div>
           </div>
-          <dv-border-box-2 id="deviceList" class="animate__faster" ref="border4" :color="color" style="margin: auto;width:90%;height:55%;">
+          <dv-border-box-2 id="deviceList" class="animate__faster" ref="border4" :color="color"
+            style="margin: auto;width:90%;height:55%;">
             <div class="full center">
               <div class="row " :style="{backgroundColor}" style="width: 96%;height: 94%">
                 <div class="center" style="width: 50%;height: 100%;flex-direction: column">
@@ -101,61 +101,57 @@
       </dv-border-box-12>
 
       <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" ref="border3"
-        style="height: 350px;" :color="color" :backgroundColor="backgroundColor">
+        style="height: 45%;" :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
           <div class="full center" style="flex-direction: column">
-            <div style="width: 90%;height: 15%;color: white;font-size: 18px" class="center">告警信息列表</div>
+            <div style="width: 90%;height: 15%;color: white;font-size: 20px;font-weight: 800;"
+              :style="{color:fontColor}" class="center">告警信息列表</div>
             <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 85%;width: 94%"
               :config="config" />
             <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
           </div>
         </dv-border-box-1>
       </dv-border-box-12>
-
     </div>
 
 
-    <!-- 底部视图左 -->
-    <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
-      style="position:absolute;width: 300px;height: 240px;bottom: 0px;left: calc(22% - 10px);color: white;
-      ">
-      <div class="center full" style="margin-top: 15px;flex-direction: column;">
-        <div style="font-size: 20px;margin-bottom: -10px;" :style="{color:fontColor}">人员分布</div>
-        <div id="personnelDistribution" style="width: 260px;height: 220px;"></div>
-      </div>
-    </dv-border-box-1>
-
-    <!-- 底部视图右 -->
-    <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
-      style="position:absolute;width: 300px;height: 240px;bottom: 0px;right: calc(22% - 10px);color: white;
-      ">
-      <div class="center full" style="margin-top: 15px;flex-direction: column;">
-        <div style="font-size: 20px;margin-bottom: -10px;" :style="{color:fontColor}">年龄分布</div>
-        <div id="ageDistribution" style="width: 260px;height: 220px;"></div>
-      </div>
-    </dv-border-box-1>
-
-    <!-- 底部视图-中 -->
-    <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
-      ref="border9"
-      style="position: absolute;bottom: 0px;left: calc(22% + 275px);width: calc(56% - 550px);height: 300px;border-radius: 20%;">
-      <div class="full center" style="margin-top: 15px;flex-direction: column;">
-        <div style="font-size: 20px;margin-bottom: -30px;" :style="{color:fontColor}">数据统计</div>
-        <div id="dataOption" style="width:100%;height:320px"></div>
-      </div>
-    </dv-border-box-1>
+    <div
+      style="position: absolute;left: calc(22% - 10px);right: calc(22% - 10px);bottom: 0;height: 30%;display: flex;align-items: flex-end;">
+      <!-- 底部视图右 -->
+      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
+        style="height: 90%;width: 28%;">
+        <div class="center full" style="margin-top: 20px;flex-direction: column;">
+          <div style="font-size: 20px;font-weight: 800;" :style="{color:fontColor}">年龄分布</div>
+          <div id="ageDistribution" style="width: 98%;height:90%;"></div>
+        </div>
+      </dv-border-box-1>
+
+      <!-- 底部视图-中 -->
+      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
+        style="height: 100%;width:calc(44% + 20px);margin:0 -10px;">
+        <div class="full center" style="margin-top: 15px;flex-direction: column;">
+          <div style="font-size: 20px;margin-bottom: -30px;" :style="{color:fontColor}">数据统计</div>
+          <div id="dataOption" style="width:100%;height:320px"></div>
+        </div>
+      </dv-border-box-1>
+
+      <!-- 底部视图左 -->
+      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
+        style="height: 90%;width: 28%;">
+        <div class="center full" style="margin-top: 20px;flex-direction: column;">
+          <div style="font-size: 20px;font-weight: 800;" :style="{color:fontColor}">人员分布</div>
+          <div id="personnelDistribution" style="width: 98%;height:90%;"></div>
+        </div>
+      </dv-border-box-1>
+    </div>
 
     <div class="mask center " v-if="maskShow">
       <div class="dialog animate__animated animate__faster" :class="dialogShow?'animate__zoomIn':'animate__zoomOut'">
         <dv-border-box-10>
           <dv-border-box-8 backgroundColor="rgba(4, 25, 50,.5)">
-            <img class="close animate__animated"
-              style="width: 48px;height: 48px;"
-              src="../../../../public/data/close.png"
-              :class="closeEnter?'animate__heartBeat':''"
-               @mouseenter="closeEnter=true"
-               @mouseleave="closeEnter=false"
-               @click="close" />
+            <img class="close animate__animated" style="width: 48px;height: 48px;"
+              src="../../../../public/data/close.png" :class="closeEnter?'animate__heartBeat':''"
+              @mouseenter="closeEnter=true" @mouseleave="closeEnter=false" @click="close" />
           </dv-border-box-8>
         </dv-border-box-10>
       </div>
@@ -192,23 +188,21 @@
       Map3D
     },
     mounted() {
-      //获取社区数据
-      this.fetchData(this.$route.query['id']);
-
+      console.log("我是数据大屏");
+    },
+    beforeCreate() {
+      console.log("我是数据大屏");
+    },
+    created() {
       let _this = this
-      setTimeout(() => {
-        _this.getCommunityOption()
-        _this.initCharts('charts1', 'round1');
-        _this.initCharts('charts4', 'round2');
-        _this.initCharts('charts2', 'tendency');
-        // 获取数据统计
-        _this.getDataOption()
-        //获取人员分布
-        _this.getPersonnelDistribution()
-        //获取年龄分布
-        _this.getAgeDistribution()
-        _this.getGridOption()
-      }, 500)
+      console.log("我是数据大屏");
+      // this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      // window.onresize = () => {
+      //   return (() => {
+      //     _this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+      //   })()
+      // }
+      this.getOptionData()
     },
     watch: {
       $route() {
@@ -227,10 +221,16 @@
           this.data['deviceType'][this.data['deviceType'].length + this.currentDeviceIndex % this.data['deviceType']
             .length
           ]
-      }
+      },
+      // screenWidth: {
+      //   handler() {
+      //     this.getOptionData()
+      //   },
+      //   immediate: true
+      // },
     },
     computed: {
-      ...mapGetters(["userInfo", "currentGrid"]),
+      ...mapGetters(["userInfo", "currentGrid","tagIndex"]),
     },
     data() {
       return {
@@ -335,13 +335,31 @@
       }
     },
     methods: {
-      changeGridIndex(inedx,type){
-        this.$animateCss('#gridName','animate__fadeInDown')
-          if (type=='left') {
-            this.$animateCss('#grid','animate__backInLeft')
-          }else{
-            this.$animateCss('#grid','animate__backInRight')
-          }
+      getOptionData() {
+        //获取社区数据
+        this.fetchData(this.$route.query['id']);
+        let _this = this
+        setTimeout(() => {
+          _this.getCommunityOption()
+          _this.initCharts('charts1', 'round1');
+          _this.initCharts('charts4', 'round2');
+          _this.initCharts('charts2', 'tendency');
+          // 获取数据统计
+          _this.getDataOption()
+          //获取人员分布
+          _this.getPersonnelDistribution()
+          //获取年龄分布
+          _this.getAgeDistribution()
+          _this.getGridOption()
+        }, 500)
+      },
+      changeGridIndex(inedx, type) {
+        this.$animateCss('#gridName', 'animate__fadeInDown')
+        if (type == 'left') {
+          this.$animateCss('#grid', 'animate__backInLeft')
+        } else {
+          this.$animateCss('#grid', 'animate__backInRight')
+        }
       },
       close() {
         let _this = this
@@ -397,6 +415,11 @@
           tooltip: {
             trigger: 'item'
           },
+
+          grid: {
+            left: '1%',
+            right: '1%',
+          },
           series: [{
             name: '人员分布',
             type: 'pie',
@@ -434,13 +457,16 @@
           tooltip: {
             trigger: 'axis'
           },
-          gridientColor: [
-
-          ],
           color: ['#00f9cf'],
           textStyle: {
             color: '#fff'
           },
+          grid: {
+            left: '4%',
+            right: '4%',
+            bottom: '10%',
+            containLabel: true
+          },
           xAxis: {
             type: 'category',
             boundaryGap: false,
@@ -572,8 +598,8 @@
       changeCurrenDeviceIndex(num) {
         this.currentDeviceIndex = this.currentDeviceIndex + num;
         this.getDeviceStatic();
-        this.$animateCss('#deviceName','animate__fadeInDown')
-        this.$animateCss('#deviceList','animate__fadeInUp')
+        this.$animateCss('#deviceName', 'animate__fadeInDown')
+        this.$animateCss('#deviceList', 'animate__fadeInUp')
       },
       setRound(list1, list2) {
         this.round1.setOption({
@@ -668,6 +694,12 @@
               textBaseline: 'bottom'
             }
           },
+          grid: {
+            left: '2%',
+            right: '4%',
+            bottom: '1%',
+            containLabel: true
+          },
           xAxis: {
             name: '社区名称',
             data: nameList,
@@ -710,6 +742,7 @@
           oddRowBGC: 'rgba(9, 215, 183, 0.1)',
           evenRowBGC: 'rgba(58, 104, 182, 0.3)',
           waitTime: 2000,
+          headerHeight: 40,
           header: ['告警类型', '设备地点', '告警时间'],
           headerBGC: '#ee6666',
           data: [],
@@ -761,7 +794,7 @@
 </script>
 
 <style lang="scss" scoped>
-  .grid-btn{
+  .grid-btn {
     width: 30px;
     height: 30px;
   }