网格大屏-修改bug

src/components/top-menu.vue

@@ -13,8 +13,8 @@
             <div style="display: flex;margin-top: 40px;">
               <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
               <div style="width: 260px;">
-                <el-select class="myselect" popper-class="popperClass" @change="changeGrid"
-                  :value="currentGrid.gridName">
+                <el-select style="z-index: 9999999999999;" class="myselect" popper-class="popperClass"
+                  @change="changeGrid" :value="currentGrid.gridName">
                   <el-option v-for="(item,index) in gridList" :label="item.gridName" :value="index">
                     <span class="" style="float: left;color: #fff;font-size: 22px;">{{ item.gridName }}</span>
                   </el-option>
@@ -31,10 +31,8 @@
               <dv-decoration-3 style="width:140px;height:40px;" />
             </div>
             <div style="display: flex;color: #FFFFFF;font-size: 15px;">
-              <div  class="btn_list animate__animated"
-                :id="'id'+index"
-                :style="index==tagIndex?'color: #FFFFFF;':''"
-                :class="index==tagIndex?'listActive animate__heartBeat':''" v-if="index<=4"
+              <div class="btn_list animate__animated" :id="'id'+index" :style="index==tagIndex?'color: #FFFFFF;':''"
+                :class="index==tagIndex?'listActive animate__heartBeat':''" v-if="index<limit"
                 @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
                 {{item.name}}
               </div>
@@ -46,7 +44,7 @@
             </div>
             <div style="display: flex;color: #FFFFFF;font-size: 15px;width: 100%;">
               <div class="btn_list animate__animated" :style="index==tagIndex?'color: #FFFFFF;':''"
-                :class="index==tagIndex?'listActive  animate__heartBeat':''" v-if="index>4"
+                :class="index==tagIndex?'listActive  animate__heartBeat':''" v-if="index>=limit"
                 @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
                 {{item.name}}
               </div>
@@ -61,7 +59,11 @@
 
 <script>
   import {
-    fullscreenToggel
+    resetRouter
+  } from "../router/router";
+  import {
+    fullscreenToggel,
+    fullscreenEnable
   } from "../util/util";
   import {
     mapGetters
@@ -73,6 +75,7 @@
     data() {
       return {
         menuList: [],
+        limit: 0,
       }
     },
     computed: {
@@ -82,14 +85,6 @@
       this.getMenu();
     },
     methods: {
-      // mouseenter(index){
-      //    let id='#id'+index
-      //    const element = document.querySelector(id);
-      //    element.classList.add('animate__bounce');
-      //    element.addEventListener('animationend', () => {
-      //      element.classList.remove('animate__bounce');
-      //    });
-      // },
       async getMenu() {
         let head = [{
           name: '数据大屏',
@@ -107,6 +102,7 @@
         }, ]
         let menu = await this.$store.dispatch("GetTopMenu")
         this.menuList = head.concat(menu).concat(tail)
+        this.limit = this.menuList.length / 2
       },
       changeGrid(res) {
         this.$router.push({
@@ -175,6 +171,7 @@
   .popperClass {
     background-color: rgba(0, 0, 0, .4) !important;
     z-index: 9999 !important;
+    color: #01f8ce;
     border-color: rgba(0, 0, 0, .4) !important
   }
 </style>
@@ -187,9 +184,6 @@
     z-index: 99;
   }
 
-
-
-
   ::v-deep {
     .el-input__inner {
       margin-top: 10px;

src/main.js

@@ -34,7 +34,7 @@ import layer from "layui-layer";
 import animated from 'animate.css'
 Vue.use(animated)
 
-Vue.prototype.$animateCss=function(element, animationName,time){
+Vue.prototype.$animateCss=(element, animationName,time)=>{
   new Promise((resolve, reject) => {
     const node = document.querySelector(element);
     node.classList.add('animate__animated', animationName);

src/page/login/index.vue

@@ -1,48 +1,55 @@
 <template>
-  <div class="login-container"
-       ref="login"
-       @keyup.enter.native="handleLogin">
-    <top-color v-show="false"></top-color>
-    <div class="login-weaper animated bounceInDown">
-      <div class="login-left">
-        <div class="login-time">
-          {{time}}
+  <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
+    <dv-border-box-2   style="width: 100%;height: 100%;">
+    <dv-border-box-8 style="width: 100%;height: 100%;">
+      <div style="display: flex;justify-content: center;align-items: center;height: 100%;width: 100%;">
+        <div class="login-weaper animated bounceInDown">
+            <div class="login-left">
+              <div class="login-time">
+                {{time}}
+              </div>
+              <dv-decoration-9 class="img" style="width:200px;height:200px;">
+                <img style="width: 100px;height: 100px;" src="/img/logo.png" alt="">
+              </dv-decoration-9>
+              <p class="title animate_title">{{ $t('login.info') }}</p>
+            </div>
+            <div class="login-border">
+              <dv-border-box-10 style="height: 100%;width: 100%;" :color="['#1f3661', '#487bb1']" backgroundColor="rgba(22, 37, 67, 0.6)">
+                  <div class="login-main">
+                    <h4 class="login-title">
+                      {{ $t('login.title') }}{{website.title}}
+                      <top-lang></top-lang>
+                    </h4>
+                    <userLogin v-if="activeName==='user'"></userLogin>
+                    <div style="height: 50px"></div>
+                  </div>
+              </dv-border-box-10>
+            </div>
         </div>
-        <img class="img" src="/img/logo.png" alt="">
-        <p class="title">{{ $t('login.info') }}</p>
       </div>
-      <div class="login-border">
-        <dv-border-box-12 :color="['#053630','rgba(0, 186, 189, 1)']" backgroundColor="rgba(18, 44, 39, 0.5)">
-          <div class="login-main">
-            <h4 class="login-title">
-              {{ $t('login.title') }}{{website.title}}
-              <top-lang></top-lang>
-            </h4>
-            <userLogin v-if="activeName==='user'"></userLogin>
-<!--                      <codeLogin v-else-if="activeName==='code'"></codeLogin>-->
-<!--                      <thirdLogin v-else-if="activeName==='third'"></thirdLogin>-->
-            <!--          <div class="login-menu">-->
-            <!--            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
-            <!--            &lt;!&ndash;<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>&ndash;&gt;-->
-            <!--            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
-            <!--          </div>-->
-            <div style="height: 50px"></div>
-          </div>
-        </dv-border-box-12>
-      </div>
-    </div>
+    </dv-border-box-8>
+    </dv-border-box-2>
   </div>
 </template>
 <script>
   import userLogin from "./userlogin";
   import codeLogin from "./codelogin";
   import thirdLogin from "./thirdlogin";
-  import {mapGetters} from "vuex";
-  import {dateFormat} from "@/util/date";
-  import {validatenull} from "@/util/validate";
+  import {
+    mapGetters
+  } from "vuex";
+  import {
+    dateFormat
+  } from "@/util/date";
+  import {
+    validatenull
+  } from "@/util/validate";
   import topLang from "@/page/index/top/top-lang";
   import topColor from "@/page/index/top/top-color";
-  import {getQueryString, getTopUrl} from "@/util/util";
+  import {
+    getQueryString,
+    getTopUrl
+  } from "@/util/util";
 
   export default {
     name: "login",
@@ -74,8 +81,7 @@
       this.handleLogin();
       this.getTime();
     },
-    mounted() {
-    },
+    mounted() {},
     computed: {
       ...mapGetters(["website", "tagWel"])
     },
@@ -97,7 +103,8 @@
           source = source.split(redirectUrl)[1];
           this.socialForm.source = source;
         }
-        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
+        if (!validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this
+            .socialForm.state)) {
           const loading = this.$loading({
             lock: true,
             text: '第三方系统登录中,请稍后。。。',
@@ -105,7 +112,9 @@
           });
           this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
             window.location.href = topUrl.split(redirectUrl)[0];
-            this.$router.push({path: this.tagWel.value});
+            this.$router.push({
+              path: this.tagWel.value
+            });
             loading.close();
           }).catch(() => {
             loading.close();
@@ -118,7 +127,21 @@
 
 <style lang="scss">
   @import "@/styles/login.scss";
-  .green{
-    color:rgba(0, 186, 189, 1)
+
+  .green {
+    color: rgba(0, 186, 189, 1)
+  }
+
+  .animate_title{
+    animation: suofang 5s linear infinite reverse;
+  }
+  @keyframes suofang {
+    from {
+      transform: rotateY(0deg)
+    }
+
+    to {
+      transform: rotateY(360deg)
+    }
   }
 </style>

src/page/login/userlogin.vue

@@ -54,7 +54,7 @@
       </el-row>
     </el-form-item>
     <el-form-item>
-      <el-button type="primary"
+      <el-button  id="submit" type="primary"
                  size="small"
                  @click.native.prevent="handleLogin"
                  class="login-submit">{{$t('login.submit')}}
@@ -138,13 +138,10 @@
         }
       },
       handleLogin() {
+        this.$animateCss('#submit','animate__rotateIn')
+
         this.$refs.loginForm.validate(valid => {
           if (valid) {
-            const loading = this.$loading({
-              lock: true,
-              text: '登录中,请稍后。。。',
-              spinner: "el-icon-loading"
-            });
              this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
                getList(1,100,{
                   userCode:  this.$store.state.user.userInfo['user_id']
@@ -160,7 +157,6 @@
                    this.$router.push({path: "/"});
                    this.initMenu();
                  }
-                 loading.close();
                });
             }).catch((e) => {
               loading.close();

src/router/views/index.js

@@ -19,16 +19,6 @@ export default [
           isAuth: true,
         }
       },
-      {
-        path: 'viewpanel',
-        name: '数据大屏',
-        component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/grid/viewpanel'),
-        meta: {
-          keepAlive: true,
-          isAuth: true,
-        }
-      },
       {
         path: 'divide',
         name: '网格划分',

src/styles/login.scss

@@ -5,17 +5,18 @@
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  //background: rgba(0, 12, 23, 0.72);
-  background-size: 100% 100%;
-  background: #1c2d30 url("/data/bg.jpe") center/cover;
+  background: rgba(15, 33, 70, .9);
+  // background-size: 100% 100%;
+  // background: #1c2d30 url("/data/bg.jpe") center/cover;
   //background: #515151;
 }
 
 .login-weaper {
+  border-radius: 10px;
   margin: 0 auto;
   width: 1000px;
-  background: rgb(30, 36, 36);
-  box-shadow: -4px 5px 10px rgba(37, 251, 215, 0.4);
+  background: rgba(11, 25, 54, 0.6);
+  box-shadow: -4px 5px 10px rgba(13, 231, 194, .3);
   //height: 60%;
   .el-input-group__append {
     border: none;
@@ -35,7 +36,6 @@
   border-bottom-left-radius: 5px;
   justify-content: center;
   flex-direction: column;
-  background-color: rgba(38, 81, 61,0);
   color:  #dddddd;
   float: left;
   width: 48%;

src/views/grid/dataPage.vue

@@ -4,7 +4,7 @@
     <data-screen v-if="clickIndex==0"></data-screen>
     <person-screen v-if="clickIndex==1"></person-screen>
 
-    <div class="btnGroup">
+    <div class="btnGroup" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutLeft':''">
       <div class="animate__fast" :id="item.name" v-for="(item,index) of menu" :key="index"
         @click="btnClick(item,index)">
         <div :style="'animation-duration :'+item.time" class="animate__backInLeft animate__animated btn-item ">
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+  import {mapGetters} from "vuex";
   import Map3D from "../../components/3DMap/Map3D.vue"
   import dataScreen from "./scenes/dataScreen.vue"
   import personScreen from "./scenes/personScreen.vue"
@@ -33,6 +34,9 @@
       personScreen,
       topMenu
     },
+    computed:{
+      ...mapGetters(["tagIndex"]),
+    },
     data() {
       return {
         backgroundColor: "#0f2146",

src/views/grid/dataView.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="full" style="position: relative;" :style="tagIndex==0?'':'background-color: rgba(20, 41, 87,.5);'">
-    <div style="width: 100%;z-index: 999999;height: 10%;" :class="tagIndex==0?'tagIndex0':''">
-      <top-menu style="z-index: 99999;" :gridList="gridList"></top-menu>
+    <div style="width: 100%;z-index: 99;height: 10%;" :class="tagIndex==0?'tagIndex0':''">
+      <top-menu style="z-index: 99;" :gridList="gridList"></top-menu>
     </div>
       <dv-border-box-8 :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)" :style="tagIndex==0?'':'height: 90%'">
         <div class="full center" style="flex-direction: column">
@@ -29,8 +29,8 @@
   import {validatenull} from "../../util/validate";
   export default {
     components: {topMenu},
-      async mounted() {
-        await this.onLoad();
+      mounted() {
+        this.onLoad();
       },
     created() {
       //实时检测刷新token

src/views/grid/scenes/dataScreen.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="full">
+  <div class="full" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''">
     <!-- 左视图 -->
-   <div
+    <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 style="height: 30%" class="animate__animated animate__backInLeft animate__faster" title="通知公告"
+      <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%;">
@@ -20,16 +20,30 @@
         </dv-border-box-1>
       </dv-border-box-11>
 
-    <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster"
+      <dv-border-box-11 style="height: 32%" class="animate__animated animate__backInLeft animate__faster"
+        :title="grid.gridName" 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>
+            <div id="grid" class="full  animate__faster">
+              <div id="gridOption" style="width: 95%;height: 95%;">
+              </div>
+            </div>
+          </div>
+        </dv-border-box-1>
+      </dv-border-box-11>
+
+      <!--    <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: 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(-1)" src="../../../../public/data/left.png" />
               <div id="gridName" class="animate__faster" style="font-size: 22px;color: #FFFFFF;">
-                {{'网格1:'+userInfo.grid[0].gridName}}
+                {{'网格1:'+selectGrid.gridName}}
               </div>
-              <img class="grid-btn" @click="changeGridIndex(0,'right')" src="../../../../public/data/right.png" />
+              <img class="grid-btn" @click="changeGridIndex(1)" src="../../../../public/data/right.png" />
             </div>
 
             <div id="grid" class="full  animate__faster" style="padding: 20px;">
@@ -38,12 +52,13 @@
             </div>
           </div>
         </dv-border-box-1>
-      </dv-border-box-12>
+      </dv-border-box-12> -->
 
-     <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
+      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
-          <div style="width: 100%;height: 100%;">
+          <div class="center full" style="flex-direction: column;padding-top: 15px;">
+            <div style="font-size: 20px;font-weight: 800;margin-bottom: -20px;" :style="{color:fontColor}">重点人员比例</div>
             <div id="communityOption" style="height: 100%;width: 95%;"></div>
           </div>
         </dv-border-box-1>
@@ -106,7 +121,13 @@
           <div class="full center" style="flex-direction: column">
             <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%"
+
+              <div v-if="config.data.length>0" style="width: 94%;color: #FFFFFF;margin-top: 10px;display: flex; justify-content: space-around;background-color: #ee6666;padding: 10px 0;">
+                <div>告警类型</div>
+                <div>设备地点</div>
+                <div>告警时间</div>
+              </div>
+            <dv-scroll-board ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
               :config="config" />
             <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
           </div>
@@ -130,7 +151,7 @@
       <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 style="font-size: 20px;margin-bottom: -30px;font-weight: 800;" :style="{color:fontColor}">数据统计</div>
           <div id="dataOption" style="width:100%;height:320px"></div>
         </div>
       </dv-border-box-1>
@@ -188,27 +209,12 @@
       Map3D
     },
     mounted() {
-      console.log("我是数据大屏");
-    },
-    beforeCreate() {
-      console.log("我是数据大屏");
-    },
-    created() {
       let _this = this
-      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() {
         if (this.$route.path == '/grid/dataPage') {
-          this.resize()
-          this.map.resize()
           this.$store.commit('SET_TAG_INDEX', 0);
         }
         if (this.$route.query.refresh) {
@@ -222,18 +228,15 @@
             .length
           ]
       },
-      // screenWidth: {
-      //   handler() {
-      //     this.getOptionData()
-      //   },
-      //   immediate: true
-      // },
     },
     computed: {
-      ...mapGetters(["userInfo", "currentGrid","tagIndex"]),
+      ...mapGetters(["userInfo", "currentGrid", "tagIndex"]),
     },
     data() {
       return {
+        grids: [],
+        selectGrid: {},
+        selectGridIndex: 0,
 
         dialogShow: false,
         maskShow: false,
@@ -258,7 +261,7 @@
         },
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
-        color: ['#1a3776', '#3f6a9a'],
+        color: ['#42599d', '#3a4e8a'],
         gridList: [{
             icon: '/grid/wangge.png',
             name: '网格',
@@ -340,10 +343,6 @@
         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()
           //获取人员分布
@@ -353,13 +352,27 @@
           _this.getGridOption()
         }, 500)
       },
-      changeGridIndex(inedx, type) {
+      changeGridIndex(type) {
         this.$animateCss('#gridName', 'animate__fadeInDown')
-        if (type == 'left') {
+        let length = this.grids.length
+        if (type == -1) {
+          //左滑
+          if (this.selectGridIndex == 0) {
+            this.selectGridIndex = length
+          } else {
+            this.selectGridIndex += type
+          }
           this.$animateCss('#grid', 'animate__backInLeft')
         } else {
+          //右滑
+          if (this.selectGridIndex == length) {
+            this.selectGridIndex == 0
+          } else {
+            this.selectGridIndex += type
+          }
           this.$animateCss('#grid', 'animate__backInRight')
         }
+        this.grid = this.grids[this.selectGridIndex]
       },
       close() {
         let _this = this
@@ -374,7 +387,9 @@
       },
       getGridOption() {
         var myChart = this.$echarts.init(document.getElementById('gridOption'));
-
+        window.addEventListener('resize', function() { //执行
+          myChart.resize();
+        })
         var option = {
           textStyle: {
             color: "#fff"
@@ -387,10 +402,10 @@
             }
           },
           grid: {
-            left: '1%',
+            left: '4%',
             right: '4%',
-            top: '-2%',
-            bottom: '20%',
+            top: '5%',
+            bottom: '3%',
             containLabel: true
           },
           xAxis: {
@@ -410,7 +425,9 @@
       },
       getPersonnelDistribution() {
         var myChart = this.$echarts.init(document.getElementById('personnelDistribution'));
-
+        window.addEventListener('resize', function() { //执行
+          myChart.resize();
+        })
         var option = {
           tooltip: {
             trigger: 'item'
@@ -450,9 +467,17 @@
         };
         myChart.setOption(option);
       },
-      getCommunityOption() {
+      getCommunityOption(data) {
         var myChart = this.$echarts.init(document.getElementById('communityOption'));
-
+        let nameList = [];
+        let valueList = [];
+        data.forEach(item => {
+          nameList.push(item.agencyName);
+          valueList.push(item.personNum);
+        })
+        window.addEventListener('resize', function() { //执行
+          myChart.resize();
+        })
         var option = {
           tooltip: {
             trigger: 'axis'
@@ -462,29 +487,31 @@
             color: '#fff'
           },
           grid: {
-            left: '4%',
-            right: '4%',
+            left: '3%',
+            right: '2%',
             bottom: '10%',
             containLabel: true
           },
           xAxis: {
             type: 'category',
-            boundaryGap: false,
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            data: nameList
           },
           yAxis: {
             type: 'value'
           },
           series: [{
-            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            data: valueList,
             type: 'line',
+            smooth: true
           }]
         };
         myChart.setOption(option);
       },
       getAgeDistribution() {
         var myChart = this.$echarts.init(document.getElementById('ageDistribution'));
-
+        window.addEventListener('resize', function() { //执行
+          myChart.resize();
+        })
         var option = {
           tooltip: {
             trigger: 'item'
@@ -520,6 +547,9 @@
       getDataOption() {
         // 基于准备好的dom，初始化echarts实例
         var myChart = this.$echarts.init(document.getElementById('dataOption'));
+        window.addEventListener('resize', function() { //执行
+          myChart.resize();
+        })
 
         var option = {
           tooltip: {
@@ -577,16 +607,10 @@
         this.data = (await getStaticData({
           id
         })).data.data;
-        this.chartConfig = {
-          data: this.data.communityCounts,
-          colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
-          showValue: true
-        };
-
         this.device = this.data['deviceType'][this.currentDeviceIndex % this.data['deviceType'].length]
         await this.getDeviceStatic();
         this.setConfig(this.data['deviceJobList']);
-        this.setTendencyOption(this.data['agencyPerson']);
+        this.getCommunityOption(this.data['agencyPerson'])
       },
       async getDeviceStatic() {
         this.deviceData = (await smartDeviceStatic({
@@ -601,80 +625,6 @@
         this.$animateCss('#deviceName', 'animate__fadeInDown')
         this.$animateCss('#deviceList', 'animate__fadeInUp')
       },
-      setRound(list1, list2) {
-        this.round1.setOption({
-          title: {
-            show: true,
-            text: '人员分布',
-            offset: [40, -40],
-            style: {
-              fill: this.fontColor,
-              fontSize: 17,
-              fontWeight: 'bold',
-              textAlign: 'center',
-            }
-          },
-          tooltip: {
-            trigger: 'item'
-          },
-          legend: {
-            top: '5%',
-            left: 'center'
-          },
-          series: [{
-            type: 'pie',
-            radius: ['20%', '70%'],
-            insideLabel: {
-              show: true,
-              style: {
-                fontSize: 10,
-                fill: '#fff',
-                textAlign: 'center',
-                textBaseline: 'middle'
-              }
-            },
-            outsideLabel: {
-              show: true,
-              labelLineEndLength: 15
-            },
-            animationFrame: 60,
-
-          }]
-        });
-        this.type.setOption({
-          series: [{
-            type: 'pie',
-            data: [{
-                name: '前科人员',
-                value: 0.5
-              },
-              {
-                name: '博士',
-                value: 0.3
-              },
-              {
-                name: '本科',
-                value: 0.17
-              },
-              {
-                name: '专科',
-                value: 0.03
-              },
-            ],
-            insideLabel: {
-              show: true
-            },
-            outsideLabel: {
-              style: {
-                fontSize: 17,
-                fontWeight: 'bold',
-                textAlign: 'center',
-                textBaseline: 'bottom'
-              }
-            }
-          }]
-        });
-      },
       setTendencyOption(list) {
         const _this = this;
         let nameList = [];
@@ -742,9 +692,9 @@
           oddRowBGC: 'rgba(9, 215, 183, 0.1)',
           evenRowBGC: 'rgba(58, 104, 182, 0.3)',
           waitTime: 2000,
-          headerHeight: 40,
-          header: ['告警类型', '设备地点', '告警时间'],
-          headerBGC: '#ee6666',
+          // headerH/eight: 40,
+          // header: ['告警类型', '设备地点', '告警时间'],
+          // headerBGC: '#ee6666',
           data: [],
           align: ['center', 'center', 'center'],
         };
@@ -752,7 +702,10 @@
           data.data.push([item.alarmContent, item.alarmPosition, item.alarmTime])
         });
         this.config = data
-
+        let _this=this
+        window.addEventListener('resize', function() { //执行
+           _this.config.resize();
+        })
       },
       resize() {
         this.tendency.resize();
@@ -766,19 +719,14 @@
           }
         }
       },
-      initCharts(id, ele) {
-        const container = document.getElementById(id)
-        let myChart = new Charts(container);
-        this[ele] = myChart;
-      },
       async fetchData(id) {
-        changeDefaultConfig('color', ['rgb(208,200,21)', '#348d07', '#6e6138', 'rgba(70,103,83,0.59)', '#674a2c',
-          '#621752'
-        ]);
         let grids = (await getList(1, 100, {
           userCode: this.userInfo['user_id']
         })).data.data.records;
         this.userInfo.grid = grids;
+        this.grids = grids
+        this.selectGridIndex = 0
+
         const grid = typeof id == 'undefined' ? this.userInfo.grid[this.currentGridIndex] : (await getDetail({
           "id": id
         })).data.data;

src/views/grid/scenes/personScreen.vue

@@ -46,7 +46,7 @@
       <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" style="height: 55%"
         :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1 style="height: 100%;">
-          <div style="text-align: center;padding-top: 15px;color: #FFFFFF;font-size: 20px;">
+          <div style="text-align: center;padding-top: 15px;font-size: 20px;" :style="{color:fontColor}">
               特殊人员变化
           </div>
           <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
@@ -65,7 +65,7 @@
       return {
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
-        color: ['#1a3776', '#3f6a9a'],
+        color: ['#0f234a', '#2b496a'],
       }
     },
     mounted() {
@@ -141,7 +141,7 @@
             text: '重点人员比例',
             left: 'center',
             textStyle: {
-              color: "#fff"
+              color:  this.fontColor,
             },
           },
           tooltip: {
@@ -205,7 +205,7 @@
           title: {
             text: '小区人口变化',
             textStyle: {
-              color: "#fff"
+              color: this.fontColor
             },
           },
           smooth: true,
@@ -288,7 +288,7 @@
             text: '人员来源统计',
             left: 'left',
             textStyle: {
-              color: "#fff"
+              color: this.fontColor
             },
           },
           textStyle:{

vue.config.js

@@ -33,9 +33,8 @@ module.exports = {
         }
       },
       '/api': {
-        target: 'http://192.168.1.128',
-        //测试环境地址
-        // target: 'http://192.168.1.202:6580',
+        // target: 'http://192.168.1.128',
+        target: 'http://36.103.227.152:1777/api',
         ws: true,
         pathRewrite: {
           '^/api': '/'