网格大屏-动画

src/components/3DMap/TimeBar.vue

@@ -4,9 +4,9 @@
       <dv-border-box-8>
         <div  style="font-size: 18px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;padding-left: 20px;">
           <div class=" center" style="width: 25%;" :style="{color:fontColor}">{{dateTime.date}}</div>
-          <div class=" center" style="width: 25%;background: rgba(9, 215, 183,.6);font-size: 26px;font-style: italic;border-radius: 5px;border: solid 1px #dddddd;color: #fff;">{{dateTime.time}}</div>
+          <div class=" center" style="width: 25%;background: rgba(113, 246, 249,.6);font-size: 26px;font-style: italic;border-radius: 5px;border: solid 1px #dddddd;color: #fff;">{{dateTime.time}}</div>
           <div class=" center" style="width: 18%;" :style="{color:fontColor}">{{weekStr[dateTime.week]}}</div>
-        
+
           <div class=" center" style="width: 10%;font-size: 26px;font-style: italic;" :style="{color:fontColor}">{{temperature || 25}}℃</div>
           <div class=" center" style="width: 10%;">
             <div style="text-indent: 8px;">{{weather}} </div>
@@ -37,7 +37,7 @@ export default {
      },
      fontColor:{
        type:String,
-       default:'#00f9cf'
+       default:'#71f6f9'
      }
    },
   data(){

src/components/my-top-menu.vue

@@ -33,6 +33,9 @@
       computed: {
         ...mapGetters(["tagIndex","menu"]),
       },
+      created() {
+        console.log(this.menu,"/*****************");
+      },
       methods: {
         handleScreen() {
           fullscreenToggel();

src/components/myDialog.vue

@@ -1,17 +1,19 @@
 <template>
-    <el-dialog class="datav-border el-zoom-in-center" :visible.sync="visible"
-               :close-on-press-escape='false'
-               :close-on-click-modal="false"
-               :append-to-body="true"
-               top="25vh"
-               @close="close">
-      <dv-border-box-12  :color="['#053629','#04a878']" backgroundColor="rgba(7,21,25)" class="full">
-        <div class="full" >
-          <div style="height: 50px;width: 10%"></div>
-          <slot></slot>
-        </div>
-      </dv-border-box-12>
-    </el-dialog>
+    <div class="full" style="z-index: 9999;">
+      <el-dialog class="datav-border el-zoom-in-center" :visible.sync="visible"
+                 :close-on-press-escape='false'
+                 :close-on-click-modal="false"
+                 :append-to-body="true"
+                 top="25vh"
+                 @close="close">
+        <dv-border-box-12  :color="['#053629','#04a878']" backgroundColor="rgba(83, 114, 166,.2)" class="full">
+          <div class="full" >
+            <div style="height: 50px;width: 10%"></div>
+            <slot></slot>
+          </div>
+        </dv-border-box-12>
+      </el-dialog>
+    </div>
 </template>
 
 <script>
@@ -24,7 +26,8 @@
         },
       methods: {
           close(){
-            this.$emit("close",{});
+            console.log("close");
+            this.visible = false;
           },
           show(){
             this.visible = true;
@@ -38,6 +41,7 @@
 
 <style scoped>
   .full{
+    z-index: 999999;
     width: 100%;
     height: 100%;
   }

src/components/popup.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="popup">
+    <div class="filterbg"></div>
+    <div class="popup">
+      <div class="headTit" v-if="showContent">
+          <dv-decoration-11 style="width: 200px;height: 60px;">{{title}}</dv-decoration-11>
+      </div>
+      <dv-border-box-10>
+        <a href="javascript:;" class="popupClose" @click="hide"></a>
+        <div class="summary">
+            111
+        </div>
+      </dv-border-box-10>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default{
+    components:{
+    },
+    data(){
+      return{
+        showContent:false,
+        title:'',
+        showType:'',
+        detailData:null,
+      }
+    },
+    mounted() {
+      this.$nextTick(()=>{
+        this.show()
+      })
+    },
+    methods:{
+      searchLine(){
+        this.hide()
+        this.a_searchLine&&this.a_searchLine()
+      },
+      show(){
+        $('.filterbg').show();
+        $('.popup').show();
+        $('.popup').width('3px');
+        $('.popup').animate({height: '76%'},400,function(){
+        	$('.popup').animate({width: '82%'},400);
+        });
+        setTimeout(this.summaryShow,800);
+      },
+      hide(){
+        this.showContent = false;
+        $('.popupClose').css('display','none');
+        $('.popup').animate({width: '3px'},400,function(){
+        	$('.popup').animate({height: 0},400);
+        });
+        setTimeout(this.summaryHide,800);
+      },
+      summaryShow(){
+      	$('.popupClose').css('display','block');
+      	$('.summary').show();
+        this.showContent = true;
+      },
+      summaryHide(){
+      	$('.filterbg').hide();
+      	$('.popup').hide();
+      	$('.popup').width(0);
+        // 删除判断增加的window属性
+        delete window.alertIsShow;
+        let tip_alert = document.getElementById('popup');
+        tip_alert.parentNode.removeChild(tip_alert);
+      },
+    }
+  }
+</script>
+
+<style lang="less">
+  #popup{
+    z-index: 999999999999999999;
+    width: 100%;
+    height: 100%;
+    .border-box-content{
+      padding: 0!important;
+    }
+    .headTit{
+      z-index: 999999999999999;
+      position: absolute;
+      width: 100%;
+      font-size: 16px;
+      font-weight: bold;
+      color: #25f1e5;
+      display: flex;
+      justify-content: center;
+      padding-top: 10px;
+    }
+  }
+</style>

src/components/top-menu.vue

@@ -2,46 +2,57 @@
   <div style="background-color: rgba(20, 41, 87,.5);">
     <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>
-
-        <div style="position: absolute;bottom: 0px;right: 0;">
-          <dv-decoration-8 :reverse="true" style="width:700px;height:50px;" />
-        </div>
-
-        <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100%;padding-top: 24px;">
-              <dv-decoration-7 >
-                <div style="font-size: 28px;padding: 0 20px;">
-                  常运智慧数据大屏
-                </div>
-              </dv-decoration-7>
-              <dv-decoration-5 style="width:500px;height:50px;" />"
-        </div>
-      </div>
-     <div class="nav_btn">
-        <div class="btn_left">
-          <div style="width: 100%;display: flex;justify-content: flex-start;padding-left: 20px;">
-            <dv-decoration-3 style="width:140px;height:40px;" />
+        <div class="nav">
+          <div style="position: absolute;bottom: 0px;left: 0;">
+            <dv-decoration-8 style="width:700px;height:50px;" />
+          </div>
+          <div style="position: absolute;bottom: 0px;right: 0;">
+            <dv-decoration-8 :reverse="true" style="width:700px;height:50px;" />
           </div>
+          <div style="display: flex;justify-content: center;align-items: center;flex-direction: column;height: 100%;">
+            <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-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>
+                </el-select>
+              </div>
+              <dv-decoration-1 style="width:200px;height:50px;margin-top: 15px;" />
+            </div>
+            <dv-decoration-5 style="width:500px;height:50px;margin-top: -15px;" />"
+          </div>
+        </div>
+        <div class="nav_btn">
+          <div class="btn_left">
+            <div style="width: 100%;display: flex;justify-content: flex-start;padding-left: 20px;">
+              <dv-decoration-3 style="width:140px;height:40px;" />
+            </div>
             <div style="display: flex;color: #FFFFFF;font-size: 15px;">
-              <div class="btn_list" :style="index==tagIndex?'color: #FFFFFF;':''" :class="index==tagIndex?'listActive':''"   v-if="index<=4" @click="handleMenu(item,index)" v-for="(item,index) in tagList" :key="index">
+              <div  class="btn_list animate__animated"
+                :id="'id'+index"
+                :style="index==tagIndex?'color: #FFFFFF;':''"
+                :class="index==tagIndex?'listActive animate__heartBeat':''" v-if="index<=4"
+                @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
                 {{item.name}}
               </div>
             </div>
-        </div>
-        <div class="btn_right">
-          <div style="width: 100%;display: flex;justify-content: flex-end;margin-right: 20px;">
-            <dv-decoration-3 style="width:140px;height:40px;" />
           </div>
-          <div style="display: flex;color: #FFFFFF;font-size: 15px;">
-            <div class="btn_list"  v-if="index>4" @click="handleMenu(item,index)" v-for="(item,index) in tagList" :key="index">
-              {{item.name}}
+          <div class="btn_right">
+            <div style="width: 100%;display: flex;justify-content: flex-end;margin-right: 20px;">
+              <dv-decoration-3 style="width:140px;height:40px;" />
+            </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"
+                @click="handleMenu(item,index)" v-for="(item,index) in menuList" :key="index">
+                {{item.name}}
+              </div>
             </div>
           </div>
         </div>
-      </div>
       </dv-border-box-8>
     </dv-border-box-2>
 
@@ -56,56 +67,57 @@
     mapGetters
   } from "vuex";
   export default {
+    props: {
+      gridList: Array
+    },
     data() {
       return {
-        tagList: [
-          {
-            name: '数据大屏',
-            path: '/grid/dataPage'
-          },
-          {
-            name: '网格划分',
-            path: '/grid/divide'
-          },
-          {
-            name: '社区网络',
-            path: '/grid/divide'
-          },
-          {
-            name: '智慧园区',
-            path: '/grid/divide'
-          },
-          {
-            name: '应急事件',
-            path: '/grid/divide'
-          },
-          {
-            name: '设备管理',
-            path: '/grid/divide'
-          },
-          {
-            name: '人员管理',
-            path: '/grid/divide'
-          },
-          {
-            name: '系统配置',
-            path: '/grid/divide'
-          },
-          {
-            name: '全屏',
-            path: ''
-          },
-          {
-            name: '退出',
-            path: ''
-          },
-        ],
+        menuList: [],
       }
     },
     computed: {
-      ...mapGetters(["tagIndex", "menu"]),
+      ...mapGetters(["tagIndex", "menu", "currentGrid"]),
+    },
+    created() {
+      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: '数据大屏',
+          path: '/grid/dataPage'
+        }, {
+          name: '网格划分',
+          path: '/grid/divide'
+        }, ]
+        let tail = [{
+          name: '全屏',
+          path: ''
+        }, {
+          name: '退出',
+          path: ''
+        }, ]
+        let menu = await this.$store.dispatch("GetTopMenu")
+        this.menuList = head.concat(menu).concat(tail)
+      },
+      changeGrid(res) {
+        this.$router.push({
+          path: '/grid/dataPage',
+          query: {
+            id: this.gridList[res].id,
+            refresh: true,
+            key: this.key++
+          }
+        })
+      },
       handleScreen() {
         fullscreenToggel();
       },
@@ -122,9 +134,20 @@
           });
         });
       },
-      handleMenu(menu, index) {
-        console.log(index);
-        switch (menu.name) {
+      handleMenu(item, index) {
+        switch (item.name) {
+          case '数据大屏':
+            this.$router.push({
+              path: this.menuList[index].path
+            });
+            this.$store.commit("SET_TAG_INDEX", index)
+            break;
+          case '网格划分':
+            this.$router.push({
+              path: this.menuList[index].path
+            });
+            this.$store.commit("SET_TAG_INDEX", index)
+            break;
           case '退出':
             this.logout();
             break;
@@ -132,18 +155,56 @@
             this.handleScreen();
             break;
           default:
-            this.$router.push({
-              path: this.tagList[index].path
-            });
-            this.$store.commit('SET_TAG_INDEX', index);
+            this.handleSystemMenu(item, index)
+        }
+      },
+      async handleSystemMenu(item, index) {
+        this.$store.commit("SET_TAG_INDEX", index)
+        let menu = await this.$store.dispatch("GetMenu", item.id)
+        if (menu.length > 0) {
+          await this.$router.push({
+            path: menu[0].children[0].path
+          })
         }
       },
     }
   }
 </script>
 
-<style lang="scss">
+<style>
+  .popperClass {
+    background-color: rgba(0, 0, 0, .4) !important;
+    z-index: 9999 !important;
+    border-color: rgba(0, 0, 0, .4) !important
+  }
+</style>
+
+<style lang="scss" scoped>
   $color:#fff;
+
+
+  .myselect {
+    z-index: 99;
+  }
+
+
+
+
+  ::v-deep {
+    .el-input__inner {
+      margin-top: 10px;
+      text-align: center;
+      color: #fff;
+      border-color: rgba(104, 141, 199, 0.7);
+      background-color: rgba(104, 141, 199, 0.7);
+      height: 50px;
+      border-radius: 50px;
+      font-weight: 800;
+      font-size: 22px;
+      padding: 0;
+    }
+  }
+
   .nav {
     position: relative;
     top: 0;
@@ -174,57 +235,38 @@
     height: 100%;
   }
 
-  .btn_left a,
-  .btn_right a {
-    display: inline-block;
-  }
-
-  .btn_left a:nth-child(2) {
-    margin: 0 .6vw;
-  }
-
-  .btn_left a:nth-child(4) {
-    margin-left: .6vw;
-  }
-
-  .btn_right a:nth-child(2) {
-    margin: 0 .6vw;
-  }
-
-  .btn_right a:nth-child(4) {
-    margin-left: .6vw;
-  }
-
   .btn_list {
-      position      : relative;
-      float         : left;
-      width         : 5.5vw;
-      height        : 1.6vw;
-      text-align    : center;
-      color         : #FFFFFF;
-      line-height   : 1.6vw;
-      font-size     : .8vw;
-      letter-spacing: .1vw;
-      cursor        : pointer;
+    position: relative;
+    float: left;
+    width: 5.5vw;
+    height: 1.6vw;
+    text-align: center;
+    color: #FFFFFF;
+    line-height: 1.6vw;
+    font-size: .8vw;
+    letter-spacing: .1vw;
+    cursor: pointer;
   }
 
   .btn_list:before {
-      content  : '';
-      position : absolute;
-      top      : 0;
-      right    : 0;
-      bottom   : 0;
-      left     : 0;
-      border   : 1px solid #0efcff;
-      transform: skewX(-38deg);
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid #0efcff;
+    transform: skewX(-38deg);
   }
 
   .btn_list:hover::before {
     border-color: $color;
     box-shadow: 1px 1px 3px 1px $color inset;
   }
+
   .listActive:before {
-    border-color:#0efcff;
+    font-weight: 800;
+    border-color: #0efcff;
     box-shadow: 2px 2px 40px 2px #0efcff inset;
   }
 </style>

src/main.js

@@ -30,7 +30,26 @@ import dataV from '@jiaminghi/data-view'
 import {select} from "./api/base/region";
 import $ from 'jquery'
 import layer from "layui-layer";
+// 添加动画
+import animated from 'animate.css'
+Vue.use(animated)
 
+Vue.prototype.$animateCss=function(element, animationName){
+  new Promise((resolve, reject) => {
+    const node = document.querySelector(element);
+    node.classList.add('animate__animated', animationName);
+    function handleAnimationEnd(event) {
+      console.log("handleAnimationEnd");
+      event.stopPropagation();
+      node.classList.remove('animate__animated', animationName);
+      resolve('Animation ended');
+    }
+    node.addEventListener('animationend', handleAnimationEnd, {once: true});
+  });
+}
+
+
+Vue.prototype.$echarts = require('echarts')
 // 注册全局crud驱动
 window.$crudCommon = crudCommon;
 // 加载Vue拓展

src/router/views/index.js

@@ -4,162 +4,164 @@ import myLayout from "../../views/grid/myLayout";
 export default [
 
   {
-  path: '/grid',
-  component: dataView,
-  redirect: '/grid/viewpanel',
-  children: [{
-    path: 'viewpanel',
-    name: '网格看板',
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/grid/viewpanel'),
-    meta: {
-      keepAlive: true,
-      isAuth: true,
-    }
-  },
-    {
-      path: 'divide',
-      name: '网格划分',
-      component: () =>
-        import( /* webpackChunkName: "views" */ '@/views/grid/divide'),
-      meta: {
-        keepAlive: true,
-        isAuth: true,
-      }
-    },
-    //新增大屏
-    {
-      path: 'dataPage',
-      name: '数据大屏',
-      component: () =>
-        import( /* webpackChunkName: "views" */ '@/views/grid/dataPage'),
-      meta: {
-        keepAlive: true,
-        isAuth: true,
-      }
-    },
-    {
-      path: 'myLayout',
-      name: '容器',
-      component: () =>
-        import( /* webpackChunkName: "views" */ '@/views/grid/myLayout'),
-      meta: {
-        keepAlive: false,
-      },
-      children: [
-      ],
-    },
-    {
-      path: '/work/process/leave',
-      component: myLayout,
-      redirect: '/work/process/leave/form',
-      children: [{
-        path: 'form/:processDefinitionId',
-        name: '请假流程',
-        meta: {
-          i18n: 'work'
-        },
+    path: '/grid',
+    component: dataView,
+    redirect: '/grid/dataPage',
+    children: [
+      //数据大屏
+      {
+        path: 'dataPage',
+        name: '数据大屏',
         component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
-      }, {
-        path: 'handle/:taskId/:processInstanceId/:businessId',
-        name: '处理请假流程',
+          import( /* webpackChunkName: "views" */ '@/views/grid/dataPage'),
         meta: {
-          i18n: 'work'
-        },
-        component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
-      }, {
-        path: 'detail/:processInstanceId/:businessId',
-        name: '请假流程详情',
-        meta: {
-          i18n: 'work'
-        },
+          keepAlive: true,
+          isAuth: true,
+        }
+      },
+      {
+        path: 'viewpanel',
+        name: '数据大屏',
         component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
-      }]
-    },
-    {
-      path: '/work/process/publicEvent',
-      component: myLayout,
-      redirect: '/work/process/publicEvent/form',
-      children: [{
-        path: 'form/:processDefinitionId',
-        name: '报事工单',
+          import( /* webpackChunkName: "views" */ '@/views/grid/viewpanel'),
         meta: {
-          i18n: 'work'
-        },
+          keepAlive: true,
+          isAuth: true,
+        }
+      },
+      {
+        path: 'divide',
+        name: '网格划分',
         component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/form')
-      }, {
-        path: 'handle/:taskId/:processInstanceId/:businessId',
-        name: '处理报事工单',
+          import( /* webpackChunkName: "views" */ '@/views/grid/divide'),
         meta: {
-          i18n: 'work'
-        },
+          keepAlive: true,
+          isAuth: true,
+        }
+      },
+
+      {
+        path: 'myLayout',
+        name: '容器',
         component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/handle')
-      }, {
-        path: 'detail/:processInstanceId/:businessId',
-        name: '报事工单详情',
+          import( /* webpackChunkName: "views" */ '@/views/grid/myLayout'),
         meta: {
-          i18n: 'work'
+          keepAlive: false,
         },
-        component: () =>
-          import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/detail')
-      }]
-    },
-  ]
-}, {
-  path: '/test',
-  component: Layout,
-  redirect: '/test/index',
-  children: [{
-    path: 'index',
-    name: '测试页',
-    meta: {
-      i18n: 'test'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/test')
-  }]
-}, {
-  path: '/dict-horizontal',
-  component: Layout,
-  redirect: '/dict-horizontal/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
-  }]
-}, {
-  path: '/dict-vertical',
-  component: Layout,
-  redirect: '/dict-vertical/index',
-  children: [{
-    path: 'index',
-    name: '字典管理',
-    meta: {
-      i18n: 'dict'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
-  }]
-}, {
-  path: '/info',
-  component: Layout,
-  redirect: '/info/index',
-  children: [{
-    path: 'index',
-    name: '个人信息',
-    meta: {
-      i18n: 'info'
-    },
-    component: () =>
-      import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
-  }]
-}]
+        children: [],
+      },
+      {
+        path: '/work/process/leave',
+        component: myLayout,
+        redirect: '/work/process/leave/form',
+        children: [{
+          path: 'form/:processDefinitionId',
+          name: '请假流程',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/form')
+        }, {
+          path: 'handle/:taskId/:processInstanceId/:businessId',
+          name: '处理请假流程',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/handle')
+        }, {
+          path: 'detail/:processInstanceId/:businessId',
+          name: '请假流程详情',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/leave/detail')
+        }]
+      },
+      {
+        path: '/work/process/publicEvent',
+        component: myLayout,
+        redirect: '/work/process/publicEvent/form',
+        children: [{
+          path: 'form/:processDefinitionId',
+          name: '报事工单',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/form')
+        }, {
+          path: 'handle/:taskId/:processInstanceId/:businessId',
+          name: '处理报事工单',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/handle')
+        }, {
+          path: 'detail/:processInstanceId/:businessId',
+          name: '报事工单详情',
+          meta: {
+            i18n: 'work'
+          },
+          component: () =>
+            import( /* webpackChunkName: "views" */ '@/views/work/process/publicEvent/detail')
+        }]
+      },
+    ]
+  }, {
+    path: '/test',
+    component: Layout,
+    redirect: '/test/index',
+    children: [{
+      path: 'index',
+      name: '测试页',
+      meta: {
+        i18n: 'test'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/test')
+    }]
+  }, {
+    path: '/dict-horizontal',
+    component: Layout,
+    redirect: '/dict-horizontal/index',
+    children: [{
+      path: 'index',
+      name: '字典管理',
+      meta: {
+        i18n: 'dict'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-horizontal')
+    }]
+  }, {
+    path: '/dict-vertical',
+    component: Layout,
+    redirect: '/dict-vertical/index',
+    children: [{
+      path: 'index',
+      name: '字典管理',
+      meta: {
+        i18n: 'dict'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/util/demo/dict-vertical')
+    }]
+  }, {
+    path: '/info',
+    component: Layout,
+    redirect: '/info/index',
+    children: [{
+      path: 'index',
+      name: '个人信息',
+      meta: {
+        i18n: 'info'
+      },
+      component: () =>
+        import( /* webpackChunkName: "views" */ '@/views/system/userinfo')
+    }]
+  }
+]

src/styles/btn.css

@@ -0,0 +1,978 @@
+.btn {
+  display: inline-block;
+  *display: inline;
+  *zoom: 1;
+  padding: 15px 50px;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  color: #fff;
+  margin: 10px;
+  background-color: #5b7baf;
+  border-radius: 10px;
+  /* box-shadow: 0 0 5px #00f9cf; */
+}
+
+.btn:active {
+  box-shadow: none;
+}
+
+.btn2 {
+  position: relative;
+  padding: 15px 28px;
+}
+
+.btn2:hover {
+  color: #fff;
+}
+
+.btn2 .btnbg-x {
+  position: absolute;
+  left: -1px;
+  width: 0;
+  top: -1px;
+  bottom: -1px;
+  transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+
+.btn2:hover .btnbg-x {
+  width: 100%;
+  width: calc(100% + 2px);
+  background: #e84c3d;
+}
+
+.btn2 .btn-inner {
+  padding: 0 12px;
+  position: relative;
+  z-index: 1;
+}
+
+.btn2 .btn-inner i {
+  position: absolute;
+  top: 50%;
+  margin-top: -0.75em;
+  line-height: 1.5;
+  right: 1em;
+  opacity: 0;
+  *filter: alpha(opacity=0);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+
+.btn2:hover .btn-inner i {
+  opacity: 1;
+  *filter: alpha(opacity=100);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  right: 0.6em;
+}
+
+.btn2:hover .btn-inner i:before {
+  opacity: 1;
+}
+
+.btn2:hover .btn-inner {
+  transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+
+.btn3 {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+
+.btn3:hover {
+  color: #fff;
+  border-color: #2ecd71;
+}
+
+.btn3 .btnbg-x {
+  position: absolute;
+  left: 50%;
+  width: 0;
+  top: 0px;
+  bottom: 0px;
+  transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -webkit-transition: all 0.5s;
+}
+
+.btn3:hover .btnbg-x {
+  width: 100%;
+  left: 0px;
+}
+
+.btn3 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn4 {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  -webkit-transform: perspective(1px) translateZ(0);
+  transform: perspective(1px) translateZ(0);
+  position: relative;
+  -webkit-transition-property: color;
+  transition-property: color;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+}
+
+.btn4:hover {
+  color: #fff;
+}
+
+.btn4 .btnbg-x {
+  position: absolute;
+  z-index: -1;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  -webkit-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: 0 50%;
+  transform-origin: 0 50%;
+  -webkit-transition-property: transform;
+  transition-property: transform;
+  -webkit-transition-duration: 0.5s;
+  transition-duration: 0.5s;
+  -webkit-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  opacity: 0;
+  *filter: alpha(opacity=0);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+}
+
+.btn4:hover .btnbg-x {
+  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
+  -webkit-transform: scaleX(1);
+  transform: scaleX(1);
+  opacity: 1;
+  *filter: alpha(opacity=100);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+}
+
+.btn4 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn5 {
+  position: relative;
+  border: 1px solid #e9e9e9;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  color: #666;
+}
+
+.btn5:hover {
+  color: #fff;
+  background: #e77e22;
+  transition-delay: 0.3s;
+  -webkit-transition-delay: 0.3s;
+}
+
+.btn5>div {
+  position: absolute;
+  border-style: solid;
+  border-width: 0;
+  width: 0.6em;
+  height: 0.6em;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+}
+
+.btn5 .line_tl {
+  left: -1px;
+  top: -1px;
+  border-top-width: 1px;
+  border-left-width: 1px;
+  border-color: #000;
+}
+
+.btn5 .line_tr {
+  right: -1px;
+  top: -1px;
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-color: #000;
+}
+
+.btn5 .line_bl {
+  left: -1px;
+  bottom: -1px;
+  border-bottom-width: 1px;
+  border-left-width: 1px;
+  border-color: #000;
+}
+
+.btn5 .line_br {
+  right: -1px;
+  bottom: -1px;
+  border-bottom-width: 1px;
+  border-right-width: 1px;
+  border-color: #000;
+}
+
+.btn5 .line_all {
+  width: auto;
+  height: auto;
+  border-color: #e77e22;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+  transition: border-width 0s;
+  -webkit-transition: border-width 0s;
+}
+
+.btn5:hover>div {
+  width: 55%;
+  height: 55%;
+}
+
+.btn5:hover .line_all {
+  width: auto;
+  height: auto;
+  border-width: 1px;
+  transition-delay: 0.3s;
+  -webkit-transition-delay: 0.3s;
+}
+
+.btn5 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn6 {
+  position: relative;
+  border: 1px solid #d0d0d0;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: border-color 0.3s, color 0.3s;
+  transition: border-color 0.3s, color 0.3s;
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.btn6:hover {
+  color: #fff;
+  border-color: #9a59b5;
+}
+
+.btn6 .bg_in {
+  background: #9a59b5;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150%;
+  height: 100%;
+  z-index: -1;
+  opacity: 0;
+  *filter: alpha(opacity=0);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+  -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
+  transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
+  -webkit-transform-origin: 0% 100%;
+  transform-origin: 0% 100%;
+  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+  transition: transform 0.3s, opacity 0.3s;
+}
+
+.btn6:hover .bg_in {
+  opacity: 1;
+  *filter: alpha(opacity=100);
+  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  -webkit-transform: rotate3d(0, 0, 1, 0deg);
+  transform: rotate3d(0, 0, 1, 0deg);
+  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
+}
+
+.btn6 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn7 {
+  position: relative;
+  color: #fff;
+  background: #17a086;
+  border: 1px solid #17a086;
+  -webkit-transition: background-color 0.3s, color 0.3s;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.btn7:before {
+  content: "";
+  position: absolute;
+  top: -15px;
+  left: -15px;
+  bottom: -15px;
+  right: -15px;
+  background: inherit;
+  z-index: -1;
+  opacity: 0.5;
+  -webkit-transform: scale3d(0.6, 0.4, 1);
+  transform: scale3d(0.6, 0.4, 1);
+  display: none\9;
+}
+
+.btn7:hover {
+  background: #1dcba8;
+  border-color: #1dcba8;
+  -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
+  transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
+  -webkit-animation: anim-moema-1 0.3s forwards;
+  animation: anim-moema-1 0.3s forwards;
+}
+
+.btn7:hover:before {
+  -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
+  animation: anim-moema-2 0.3s 0.3s forwards;
+}
+
+@-webkit-keyframes anim-moema-1 {
+  60% {
+    -webkit-transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.8, 0.8, 1);
+  }
+
+  85% {
+    -webkit-transform: scale3d(1.1, 1.1, 1);
+    transform: scale3d(1.1, 1.1, 1);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes anim-moema-1 {
+  60% {
+    -webkit-transform: scale3d(0.8, 0.8, 1);
+    transform: scale3d(0.8, 0.8, 1);
+  }
+
+  85% {
+    -webkit-transform: scale3d(1.1, 1.1, 1);
+    transform: scale3d(1.1, 1.1, 1);
+  }
+
+  100% {
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@-webkit-keyframes anim-moema-2 {
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes anim-moema-2 {
+  to {
+    opacity: 0;
+    -webkit-transform: scale3d(1, 1, 1);
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.btn8 {
+  background-color: #fac858;
+  border: 1px solid #d0d0d0;
+  position: relative;
+  overflow: hidden;
+  -webkit-transition: color 0.3s;
+  transition: color 0.3s;
+}
+
+.btn8 .bg_brf,
+.btn8 .bg_aft {
+  background: #d02818;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  bottom: 100%;
+  left: 0;
+  z-index: -1;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
+  -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
+  transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
+}
+
+.btn8 .bg_brf {
+  opacity: 0.5;
+}
+
+.btn8:hover {
+  color: #fff;
+  border-color: #d02818;
+}
+
+.btn8:hover .bg_brf,
+.btn8:hover .bg_aft {
+  bottom: 0;
+}
+
+.btn8:hover .bg_aft {
+  -webkit-transition-delay: 0.175s;
+  transition-delay: 0.175s;
+}
+
+.btn8 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn9 {
+  position: relative;
+  overflow: hidden;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+}
+
+.btn9:hover {
+  color: #fff;
+  border-color: #1cbab8;
+}
+
+.btn9 .bgsqr1,
+.btn9 .bgsqr2,
+.btn9 .bgsqr3,
+.btn9 .bgsqr4 {
+  background: #1cbab8;
+  position: absolute;
+  width: 25%;
+  height: 0;
+  -webkit-transition: height 0.4s;
+  transition: height 0.4s;
+}
+
+.btn9 .bgsqr1 {
+  top: 0;
+  left: 0;
+}
+
+.btn9 .bgsqr2 {
+  bottom: 0;
+  left: 25%;
+}
+
+.btn9 .bgsqr3 {
+  top: 0;
+  left: 50%;
+}
+
+.btn9 .bgsqr4 {
+  bottom: 0;
+  left: 75%;
+}
+
+.btn9:hover .bgsqr1,
+.btn9:hover .bgsqr2,
+.btn9:hover .bgsqr3,
+.btn9:hover .bgsqr4 {
+  height: 100%;
+}
+
+.btn9 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn10 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn10:hover {
+  color: #fff;
+  border-color: #4e8735;
+}
+
+.btn10 .bgsqr1 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: #4e8735;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn10 .bgsqr2 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: #4e8735;
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn10:hover .bgsqr1 {
+  border-width: 200px 0 0 200px;
+}
+
+.btn10:hover .bgsqr2 {
+  border-width: 0 200px 200px 0;
+}
+
+.btn10 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn11 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn11:hover {
+  color: #fff;
+  border-color: #5384b1;
+}
+
+.btn11 .bgsqr1 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: #5384b1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn11 .bgsqr2 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-top-color: #5384b1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn11 .bgsqr3 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-left-color: transparent;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: #5384b1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn11 .bgsqr4 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top-color: transparent;
+  border-bottom-color: #5384b1;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn11:hover .bgsqr1 {
+  border-width: 200px 0 0 200px;
+}
+
+.btn11:hover .bgsqr2 {
+  border-width: 200px 200px 0 0;
+}
+
+.btn11:hover .bgsqr3 {
+  border-width: 0 200px 200px 0;
+}
+
+.btn11:hover .bgsqr4 {
+  border-width: 0 0 200px 200px;
+}
+
+.btn11 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn12 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn12:hover {
+  color: #fff;
+  border-color: #b8b926;
+}
+
+.btn12 .bgsqr1,
+.btn12 .bgsqr2 {
+  background: #b8b926;
+  position: absolute;
+  top: 50%;
+  top: 0\9;
+  content: "";
+  width: 20px;
+  height: 20px;
+  -webkit-border-radius: 50%;
+  border-radius: 50%;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+  opacity: 0.5;
+}
+
+.btn12 .bgsqr1 {
+  left: -20px;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.btn12 .bgsqr2 {
+  right: -20px;
+  -webkit-transform: translate(50%, -50%);
+  transform: translate(50%, -50%);
+}
+
+.btn12:hover .bgsqr1 {
+  -webkit-animation: criss-cross-left 0.8s both;
+  animation: criss-cross-left 0.8s both;
+  width: 375px\9;
+  height: 375px\9;
+  opacity: 1;
+}
+
+.btn12:hover .bgsqr2 {
+  -webkit-animation: criss-cross-right 0.8s both;
+  animation: criss-cross-right 0.8s both;
+  width: 375px\9;
+  height: 375px\9;
+  opacity: 1;
+}
+
+.btn12 span {
+  position: relative;
+  z-index: 1;
+}
+
+@-webkit-keyframes criss-cross-left {
+  0% {
+    left: -20px;
+  }
+
+  50% {
+    left: 50%;
+    width: 20px;
+    height: 20px;
+  }
+
+  100% {
+    left: 50%;
+    width: 375px;
+    height: 375px;
+  }
+}
+
+@keyframes criss-cross-left {
+  0% {
+    left: -20px;
+  }
+
+  50% {
+    left: 50%;
+    width: 20px;
+    height: 20px;
+  }
+
+  100% {
+    left: 50%;
+    width: 375px;
+    height: 375px;
+  }
+}
+
+@-webkit-keyframes criss-cross-right {
+  0% {
+    right: -20px;
+  }
+
+  50% {
+    right: 50%;
+    width: 20px;
+    height: 20px;
+  }
+
+  100% {
+    right: 50%;
+    width: 375px;
+    height: 375px;
+  }
+}
+
+@keyframes criss-cross-right {
+  0% {
+    right: -20px;
+  }
+
+  50% {
+    right: 50%;
+    width: 20px;
+    height: 20px;
+  }
+
+  100% {
+    right: 50%;
+    width: 375px;
+    height: 375px;
+  }
+}
+
+.btn13 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn13:hover {
+  color: #fff;
+  border-color: #ff9900;
+}
+
+.btn13 .bgsqr1 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: #ff9900;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn13 .bgsqr2 {
+  content: "";
+  width: 0;
+  height: 0;
+  -webkit-transform: rotate(360deg);
+  transform: rotate(360deg);
+  border-style: solid;
+  border-width: 0;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: #ff9900;
+  position: absolute;
+  top: 0;
+  right: 0;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn13:hover .bgsqr1 {
+  border-width: 50px 260px;
+}
+
+.btn13:hover .bgsqr2 {
+  border-width: 50px 260px;
+}
+
+.btn13 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn14 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn14:hover {
+  color: #fff;
+  border-color: #ff6600;
+}
+
+.btn14 .bgsqr1,
+.btn14 .bgsqr2,
+.btn14 .bgsqr3,
+.btn14 .bgsqr4 {
+  background: #ff6600;
+  position: absolute;
+  top: 0;
+  width: 0px;
+  height: 100%;
+  -webkit-transition: all 0.4s;
+  transition: all 0.4s;
+  opacity: 0.35;
+}
+
+.btn14 .bgsqr3,
+.btn14 .bgsqr4 {
+  opacity: 0.75;
+}
+
+.btn14 .bgsqr1 {
+  left: 0;
+}
+
+.btn14 .bgsqr2 {
+  right: 0;
+}
+
+.btn14 .bgsqr3 {
+  right: 0;
+}
+
+.btn14 .bgsqr4 {
+  left: 0;
+}
+
+.btn14:hover .bgsqr1,
+.btn14:hover .bgsqr2,
+.btn14:hover .bgsqr3,
+.btn14:hover .bgsqr4 {
+  width: 100%;
+}
+
+.btn14:hover .bgsqr3,
+.btn14:hover .bgsqr4 {
+  -webkit-transition-delay: 0.4s;
+  transition-delay: 0.4s;
+}
+
+.btn14 span {
+  position: relative;
+  z-index: 1;
+}
+
+.btn16 {
+  border: 1px solid #d0d0d0;
+  position: relative;
+  color: #666;
+  overflow: hidden;
+  -webkit-transition: all 0.6s;
+  transition: all 0.6s;
+}
+
+.btn16:hover {
+  color: #fff;
+  border-color: #720e9e;
+}
+
+.btn16 .bgsqr1 {
+  background: #720e9e;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-radius: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -webkit-transition: width 0.4s, height 0.4s;
+  transition: width 0.4s, height 0.4s;
+  z-index: -1;
+  left: 0\9 !important;
+  top: 0\9 !important;
+}
+
+.btn16:hover .bgsqr1 {
+  width: 600px;
+  height: 600px;
+}
+
+.btn16 span {
+  position: relative;
+  z-index: 1;
+}

src/styles/element-ui.scss

@@ -1,3 +1,5 @@
+$primary:#688dc7;
+$border:rgba(0, 249, 207,.4);
 
 .el-dropdown-menu__item {
   font-size: 12px !important;
@@ -165,7 +167,7 @@
   line-height: 1;
   white-space: nowrap;
   cursor: pointer;
-  background: rgba(189, 151, 0, 0.2);
+  background: rgba(28, 187, 180,.8);
   border: 1px solid #8f8f8f;
   color: #dddddd;
   -webkit-appearance: none;
@@ -209,8 +211,8 @@
   cursor: pointer;
 }
 .el-button--primary ,.el-button--primary:focus{
-  background: rgba(9, 65, 52, 0.5);
-  border: 1px solid #8f8f8f;
+  background: $primary;
+  border: 1px solid $border;
   color: #dddddd;
 }
 .el-button--primary:hover {
@@ -250,14 +252,14 @@
   z-index: 1001;
   border: 2px solid #0e3923;
   border-radius: 4px;
-  background-color: rgba(5, 54, 41, 0.5);
+  background-color: rgba(0, 0, 0, .7);
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 5px 0;
 }
 
  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: #24605f;
+  background-color: #5877ac;
 }
 .el-form-item__label {
   text-align: right;
@@ -325,7 +327,7 @@ element.style {
   white-space: nowrap;
 }
 .el-select-dropdown__item {
-  color: rgba(0, 186, 189, 1);
+  color: #FFFFFF;
 }
 .el-card {
   border-radius: 4px;
@@ -355,13 +357,13 @@ element.style {
   background-color: transparent;
 }
 .el-table th, .el-table tr {
-  background-color: rgba(68, 88, 75, 0.5);
+  background-color: rgba(88, 119, 172,.4);
   border: transparent;
 }
 .avue-crud .el-table th {
   word-break: break-word;
   color: #dddddd;
-  background-color: rgba(11, 75, 81,0.5);
+  background-color: rgba(16, 116, 125, 0.7);
 }
 
 .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
@@ -453,9 +455,9 @@ element.style {
   transition: opacity .3s;
 }
 .el-button--danger.is-plain {
-  color: #743333;
-  background: #fcdada;
-  border-color: #fbc4c4;
+  color: #FFFFFF;
+  background: #ee6666;
+  border-color: #ee6666;
 }
 .el-button--danger.is-plain:hover{
   color: #934f4f;
@@ -470,7 +472,7 @@ element.style {
    border: rgb(11, 84, 67);
 }
 .el-date-table td.end-date span, .el-date-table td.start-date span {
-  background-color: rgb(65, 96, 96);
+  background-color: $base-color-rgba5;
 }
 .el-date-table td.today span,.el-date-table td span:focus,.el-date-table td span:hover{
   color: rgb(0, 186, 189);

src/styles/variables.scss

@@ -1,2 +1,6 @@
 //main
 $mainBg: #237f66;
+
+$base-color: #00f9cf;
+
+$base-color-rgba5:rgba(0, 249, 207, .5);

src/views/community/agency.vue

@@ -1,5 +1,5 @@
 <template>
-  <basic-container>
+  <basic-container class="animate__animated animate__backInUp animate__faster">
     <avue-crud :option="option" :table-loading="loading" :data="data" :page="page" :permission="permissionList"
                :before-open="beforeOpen" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel"
                @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"

src/views/enterprise/enterprise.vue

@@ -1,5 +1,5 @@
 <template>
-  <basic-container>
+  <basic-container class="animate__animated animate__backInLeft animate__faster">
     <avue-crud :option="option"
                :table-loading="loading"
                :data="data"

src/views/grid/dataPage.vue

@@ -1,29 +1,78 @@
 <template>
   <div class="full">
-    <!--  自定义地图  -->
-    <map3-d ref="map" ></map3-d>
-    <!-- 场景数据面板    -->
-    <data-screen ></data-screen>
+    <map3-d ref="map" style="height: 100vh;"></map3-d>
+    <data-screen></data-screen>
+    <div class="btnGroup animate__animated animate__backInLeft animate__faster">
+      <div :id="'id'+index" @click="btnClick(index)" v-for="(item,index) of 6" :key="index" class="btn-item">
+        <div  class="btn-name">
+          按钮{{index+1}}
+          <!-- <i class="el-icon-success"></i> -->
+        </div>
+      </div>
+    </div>
   </div>
+  </div>
+
 </template>
 
 <script>
-  import Map3D from "../../components/3DMap/Map3D";
-  import DataScreen from "../../views/grid/dataScreen"
-
-
+  import Map3D from "../../components/3DMap/Map3D.vue"
+  import dataScreen from "./scenes/dataScreen.vue"
   export default {
-    name: "dataPage",
-    components:{Map3D,DataScreen},
-    methods:{
+    components: {
+      Map3D,
+      dataScreen
+    },
+    data() {
+      return {
+        backgroundColor: "#0f2146",
+        color: ['#1a3776', '#3f6a9a'],
 
+      }
+    },
+    methods:{
+      btnClick(index){
+        let id='#id'+index
+        this.$animateCss(id,'animate__heartBeat')
+      }
     }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  @import url("../../styles/btn.css");
+
+
+  .center{
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
   .full{
     width: 100%;
     height: 100%;
   }
+
+  .btnGroup {
+    position: absolute;
+    left: 22%;
+    top: 15%;
+
+    .btn-item {
+      margin: 10px 0;
+      cursor: pointer;
+      width: 158px;
+      height: 55px;
+      background-color: #0000FF;
+      background: url('/data/button-bg.png') no-repeat center/contain;
+
+      .btn-name {
+        line-height: 55px;
+        text-align: center;
+        color: #32c4e8;
+        font-weight: bold
+      }
+    }
+  }
 </style>

src/views/grid/dataView.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="full">
-      <div style="width: 100%;height: 7%;position: absolute;top: 0;z-index: 999;">
-        <top-menu></top-menu>
-      </div>
-      <dv-border-box-9 :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)" class="main-container">
+  <div class="full" style="position: relative;" :style="tagIndex==0?'':'background-color: rgba(20, 41, 87,.5);'">
+    <div style="width: 100%;z-index: 99;" :class="tagIndex==0?'tagIndex0':'tagIndex1'">
+      <top-menu style="z-index: 9999;" :gridList="gridList"></top-menu>
+    </div>
+
+      <dv-border-box-8 :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)" class="main-container">
         <div class="full center">
           <keep-alive>
             <router-view   v-if="$route.meta.keepAlive" />
           </keep-alive>
           <router-view  v-if="!$route.meta.keepAlive" />
         </div>
-      </dv-border-box-9>
+      </dv-border-box-8>
   </div>
 
 </template>
@@ -28,7 +29,6 @@
   import topMenu from "../../components/top-menu";
   import {getStore} from "../../util/store";
   import {validatenull} from "../../util/validate";
-
   export default {
     components: {topMenu,TimeBar},
       async mounted() {
@@ -213,8 +213,18 @@
   .container{
     width: 100%;
     height: 100%;
-    /* background: url('/data/data-bg.png') no-repeat center/cover; */
+    background: url('/data/data-bg.png') no-repeat center/cover;
+  }
+
+  .tagIndex0{
+    position: absolute;
   }
+
+  .tagIndex1{
+    height: 100px;
+  }
+
+
   .device-title{
     font-style: italic;font-size: 10px;text-align: center;line-height: 100px;letter-spacing: 20px;
     animation: suofang 2s linear infinite reverse;

src/views/grid/scanboard.html

@@ -0,0 +1,730 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+<title>看板</title>
+<link rel="stylesheet" type="text/css" href="css/reset.css" />
+<link rel="stylesheet" type="text/css" href="css/scanboard.css" />
+<link rel="stylesheet" type="text/css" href="css/animsition.css" />
+<link rel="stylesheet" type="text/css" href="css/jquery.shCircleLoader.css" />
+<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
+<script type="text/javascript" src="js/jquery.shCircleLoader-min.js"></script>
+</head>
+<body>
+	<div id="loader"></div>
+	<script type="text/javascript">
+		$('#loader').shCircleLoader({color: "#00deff"});
+	</script>
+	<!--Top Start!-->
+	<div class="scanboardWp animsition">
+		<div id="top">
+			<div class="wp clearfix">
+				<div class="left pageTit">
+					<a class="summaryBtn" href="javascript:;">领途物流汇总看板</a>
+				</div>
+				<div class="center topLogo">
+					<a href="#"><img src="images/logo.png"></a>
+				</div>
+				<div class="right topBar">
+					<div class="topTime">时间加载中...</div>
+					<div class="clearfix">
+						<a href="javascript:;" class="signOut fr">退出</a>
+						<div class="company fr">
+							<h3>盈特公司</h3>
+							<div class="dropdown">
+								<a href="#">盈特公司</a>
+								<a href="#">盈特公司</a>
+								<a href="#">盈特公司</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--Top End!-->
+		
+		<!--Main Start!-->
+		<div id="main" class="wp clearfix">
+			<div class="left">
+				<!--今日运单数量-->
+				<div class="item waybill">
+					<div class="itemTit">
+						<span class="border-yellow">今日运单数量</span>
+					</div>
+					<div class="itemCon itembg">
+						<div class="progress" progress="80%">
+							<h3 class="clearfix"><span>正常单</span><i>80单</i></h3>
+							<div class="progressBar">
+								<span></span>
+							</div>
+							<h4>0%</h4>
+						</div>
+						<div class="progress" progress="15%">
+							<h3 class="clearfix"><span>临时单</span><i>15单</i></h3>
+							<div class="progressBar">
+								<span></span>
+							</div>
+							<h4>0%</h4>
+						</div>
+						<div class="progress" progress="5%">
+							<h3 class="clearfix"><span>异常单</span><i>5单</i></h3>
+							<div class="progressBar">
+								<span></span>
+							</div>
+							<h4>0%</h4>
+						</div>
+					</div>
+				</div>
+
+				<!--各阶段平均用时统计-->
+				<div class="item">
+					<div class="itemTit">
+						<span class="border-green">各阶段平均用时统计</span>
+					</div>
+					<div class="itemCon">
+						<ul class="listStyle">
+							<li class="clearfix">
+								<span>下单…配车</span>
+								<span><strong>3.4</strong>秒</span>
+							</li>
+							<li class="clearfix">
+								<span>配车…装货</span>
+								<span><strong>24</strong>分钟</span>
+							</li>
+							<li class="clearfix">
+								<span>到厂卸货</span>
+								<span><strong>14</strong>分钟</span>
+							</li>
+							<li class="clearfix">
+								<span>装回收器具</span>
+								<span><strong>7</strong>分钟</span>
+							</li>
+							<li class="clearfix">
+								<span>卸回收器具</span>
+								<span><strong>5</strong>分钟</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+
+				<!--人员信息-->
+				<div class="item">
+					<div class="itemTit">
+						<span class="border-blue">人员信息</span>
+					</div>
+					<div class="itemCon itembg">
+						<ul class="listStyle">
+							<li class="clearfix">
+								<span>领导：<strong>5</strong>人</span>
+								<span>司机：<strong>36</strong>人</span>
+								<span>门卫：<strong>6</strong>人</span>
+								<span>器具中心：<strong>15</strong>人</span>
+								<span>派单员：<strong>20</strong>人</span>
+								<span>售后卸载：<strong>29</strong>人</span>
+								<span>财务：<strong>3</strong>人</span>
+								<span>售后回收：<strong>10</strong>人</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<div class="center">
+				<div class="centerWp">
+					<!--中间大地图-->
+					<div class="mapContainer">
+						<div class="btnLayer">
+							<div class="search">
+								<div class="searchInner">
+									<a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
+									<form class="searchForm">
+										<button class="icoSearch"></button>
+										<input type="text" name="" placeholder="请搜索车辆">
+									</form>
+								</div>
+							</div>
+							<a href="javascript:;" class="infoBtn"><span class="icoCar"></span></a>
+						</div>
+						<div id="myMap" class="item"></div>
+					</div>
+					
+					<!--月运单量统计图-->
+					<div class="billChart">
+						<div class="itemTit">
+							<span class="border-blue">月运单量统计图<small>(2017年12月)</small></span>
+						</div>
+						<div id="myChart1"></div>
+					</div>
+				</div>
+			</div>
+
+			<div class="right">
+				<!--总计运单数-->
+				<div class="item total itembg">
+					<div class="itemTit">
+						<span class="border-yellow">总计运单数</span>
+					</div>
+					<div class="itemCon">
+						<div class="totalNum"><strong id="totalNum" total="368082">0</strong><span>单</span></div>
+					</div>
+				</div>
+
+				<!--基本信息-->
+				<div class="item basicInfo">
+					<div class="itemTit">
+						<span class="border-green">基本信息</span>
+					</div>
+					<div class="itemCon itembg">
+						<div class="infoPie">
+							<ul class="clearfix">
+								<li class="color-yellow">
+									<span class="border-yellow" id="indicator1" total="32">0</span>
+									<p>在途车辆</p>
+								</li>
+								<li class="color-green">
+									<span class="border-green" id="indicator2" total="65">0</span>
+									<p>出车次数</p>
+								</li>
+								<li class="color-blue">
+									<span class="border-blue" id="indicator3" total="100">0</span>
+									<p>今日订单</p>
+								</li>
+							</ul>
+							<div id="indicatorContainer"></div>
+						</div>
+					</div>
+				</div>
+
+				<!--运单状态-->
+				<div class="item billState">
+					<div class="itemTit">
+						<span class="border-green">运单状态</span>
+					</div>
+					<div class="itemCon">
+						<div class="StateBox">
+							<div class="StateTit">
+								<span>订单编号</span>
+								<span>使用时间</span>
+								<span>满载率</span>
+							</div>
+							<div id="FontScroll">
+								<ul>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="78%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="80%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="49%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="7%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="55%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="100%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="94%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="23%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="67%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="42%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="38%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+									<li>
+										<div class="fontInner clearfix">
+											<span>ZC1712120023</span>
+											<span>2小时15分</span>
+											<span>
+												<div class="progress" progress="76%">
+													<div class="progressBar">
+														<span></span>
+													</div>
+													<h3><i><h4></h4></i></h3>
+												</div>
+											</span>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--Main End!-->
+	</div>
+
+	<div class="filterbg"></div>
+	<div class="popup">
+		<a href="javascript:;" class="popupClose"></a>
+		<div class="summary">
+			<div class="summaryTop">
+				<div id="summaryPie1" class="summaryPie"></div>
+				<div id="summaryPie2" class="summaryPie"></div>
+				<div id="summaryPie3" class="summaryPie"></div>
+			</div>
+			<div class="summaryBottom">
+				<div class="summaryBar">
+					<div class="summaryTit">
+						<img src="images/tit1.png">
+					</div>
+					<div id="summaryBar"></div>
+				</div>
+				
+				<div class="summaryLine">
+					<div class="summaryTit">
+						<img src="images/tit2.png">
+					</div>
+					<div id="summaryLine"></div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="carInfo">
+		<a href="javascript:;" class="carClose"></a>
+		<div class="infoBox">
+			<div class="infoTop">
+				<div class="infoTit">
+					<img src="images/tit3.png">
+				</div>
+			</div>
+			<div class="infoMain">
+				<div class="infoLeft fl">
+					<div class="topSearch">
+						<form>
+							<button></button>
+							<input type="text" name="" placeholder="请输入车牌号搜索">
+						</form>
+					</div>
+					<div class="carState">
+						<h3>
+							<span class="fl">车牌号码</span>
+							<span class="fr">状态</span>
+						</h3>
+						<ul class="stateUl">
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="work">工作</span>
+							</li>
+							<li>
+								<p>粤A3456344</p>
+								<span class="nowork">休息</span>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="infoRight fr">
+					<div class="rightWp">
+						<div class="carIntro">
+							<div class="introBox fl">
+								<div class="carImg fl">
+									<img src="images/car.jpg">
+								</div>
+								<div class="carText fl clearfix">
+									<p>车辆类型：大车</p>
+									<p>本周工作时长：34.45小时</p>
+									<p>车牌号码：粤A3456344</p>
+									<p>统计时段：2018-1-12至2018-2-13</p>
+									<p>可载容量：20.0方</p>
+									<p>当前状态：<span class="color-green">工作</span></p>
+								</div>
+							</div>
+							<div class="driver fr">
+								<div class="photo">
+									<img src="images/photo.jpg">
+								</div>
+								<p>司机：李思林</p>
+							</div>
+						</div>
+						<div class="timetable">
+							<div class="topTool">
+								<div class="tableExplain fl">
+									<div class="itemExplain fl">
+										<span class="bg-green"></span>
+										<p>司机工作时间</p>
+									</div>
+									<div class="itemExplain fl">
+										<span class="bg-blue"></span>
+										<p>标准白晚班时间</p>
+									</div>
+								</div>
+								<div class="topBtns fr">
+									<a href="javascript:;" class="prevWeek">上一周</a>
+									<a href="javascript:;" class="nextWeek">下一周</a>
+								</div>
+							</div>
+							<div class="tiemWp">
+								<div class="timeInner">
+									<div class="weekList">
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期一</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期二</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期三</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期四</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期五</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期六</p>
+										</div>
+										<div class="weekItem">
+											<div class="space1"></div>
+											<p>星期天</p>
+										</div>
+									</div>
+									<div class="timeBox">
+										<div class="dataContainer">
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+											<div class="dataBox">
+												<div class="space1"></div>
+												<div class="workTime"></div>
+												<div class="space2"></div>
+												<div class="standard"></div>
+												<div class="space3"></div>
+											</div>
+										</div>
+										<div class="timeLine line1"><span>0:00</span></div>
+										<div class="timeLine line2"><span>3:00</span></div>
+										<div class="timeLine line3"><span>6:00</span></div>
+										<div class="timeLine line4"><span>9:00</span></div>
+										<div class="timeLine line5"><span>12:00</span></div>
+										<div class="timeLine line6"><span>15:00</span></div>
+										<div class="timeLine line7"><span>18:00</span></div>
+										<div class="timeLine line8"><span>21:00</span></div>
+										<div class="timeLine line9"><span>24:00</span></div>
+									</div>
+								</div>
+								<div class="totalTable">
+									<div class="totalTit">
+										<span>总用时/天</span>
+										<span>总单数/天</span>
+									</div>
+									<div class="totalData">
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+										<div class="totalItem">
+											<div class="space1"></div>
+											<div class="tatleWp">
+												<span>0.00</span>
+												<span>0</span>
+											</div>
+											<div class="totalBar"></div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas> 
+</body>
+<script type="text/javascript" src="js/bg.js"></script>
+<script type="text/javascript" src="js/scanboard.js"></script>
+<script type="text/javascript" src="js/fontscroll.js"></script>
+<script type="text/javascript" src="js/jquery.animsition.js"></script>
+<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
+<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
+<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=f8ffe058b8e6f5b05e8ff43ca4207393"></script>
+</html>

src/views/grid/dataScreen.vue → src/views/grid/scenes/dataScreen.vue

@@ -1,60 +1,75 @@
 <template>
   <div class="full">
-    <div class="center title" style="width: 24%;height: 7%;position: absolute;top: 18%">
-      <time-bar :color="color" :backgroundColor="backgroundColor"></time-bar>
-    </div>
-    <!-- 左部视图 -->
-    <div style="position: absolute;left: 0px;top: calc(18% + 100px);width: 24%;height: 38%;">
-      <div style="height: 80%;">
-        <dv-border-box-11 v-for="(item,index) of userInfo.grid" :color="color" :title="'网格'+(index+1)+':'+item.gridName"
-          :backgroundColor="backgroundColor">
-          <div style="display: flex;justify-content: left;flex-wrap: wrap;padding-top: 65px;padding-left: 15px;">
-            <div v-for="(item,index) of gridList" class="center" style="width: 180px;height: 45px">
-              <div :style="{color:fontColor}"
-                style="width: 90px;height: 100%;font-size: 20px;text-indent: 5px;justify-content: left;" class="center">
-                {{item.name}}
+    <!-- 左视图 -->
+    <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 :color="color" :backgroundColor="backgroundColor"></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-scroll-board @click="noticeClick" ref="border8" v-if="noticeOption.data.length>0"
+              style="height: 85%;width: 94%" :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;"
+        v-for="(item,index) of userInfo.grid" :color="color" :backgroundColor="backgroundColor">
+        <dv-border-box-1 ref="border2">
+          <div style="padding-top: 20px;">
+            <div style="display: flex;justify-content: space-around;">
+              <img class="grid-btn" @click="changeGridIndex(index,'left')" src="../../../../public/data/left.png"  />
+              <div id="gridName" class="animate__faster" style="font-size: 22px;color: #FFFFFF;">
+                {{'网格'+(index+1)+':'+item.gridName}}
               </div>
-              <div style="width: 60px;height: 100%;color: #ffaa00;font-size: 22px;font-style: italic;" class="center">
-                {{ item.num }}
+              <img class="grid-btn" @click="changeGridIndex(index,'right')" src="../../../../public/data/right.png" />
+            </div>
+
+            <div id="grid" class="full  animate__faster" style="padding: 20px;">
+              <div id="gridOption" style="width: 380px;height: 260px;">
               </div>
             </div>
           </div>
-        </dv-border-box-11>
-      </div>
+        </dv-border-box-1>
+      </dv-border-box-12>
 
-      <div style="margin: 30px 0 0 10px;width: calc(100% - 15px);height: 100%;">
-        <dv-border-box-10 ref="border3" :color="color">
-          <dv-border-box-1 :color="color" :backgroundColor="backgroundColor">
-            <div class="full center" style="flex-direction: column">
-              <div style="width: 90%;height: 15%;color: white;font-size: 18px" 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-10>
-      </div>
+      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 300px"
+        :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>
+        </dv-border-box-1>
+      </dv-border-box-12>
     </div>
 
 
-
     <!-- 右边视图 -->
-    <div style="position:absolute;top: 18%;right: 10px;width: 23.5%;height: 45%;">
-      <dv-border-box-12 ref="border12" :color="color" :backgroundColor="backgroundColor">
+    <div style="position:absolute;bottom: 0;right: 0px;width: 22%;">
+
+      <dv-border-box-12 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="width: 95%;height: 95%;margin: auto;">
+        <dv-border-box-1 ref="border2" style="height: 500px;">
           <div class=" center" :style="{color:fontColor}"
             style="width: 100%;height: 60px;display: flex;align-items: center;text-indent: 2em">
             设备概况</div>
           <dv-decoration-6 style="margin: auto;width:90%;height:5px;" />
-          <div style="width: 90%;margin: auto;height: 25%;" class="center">
+          <div style="width: 90%;margin: auto;height: 28%;" class="center">
             <div class="left" @click="changeCurrenDeviceIndex(-1)"></div>
-            <div class="data2 green" style="width: 40%;height: 100%;">
-              <div class="device-title" :style="{color:fontColor}">{{device.dictValue}}</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>
             <div class="right" @click="changeCurrenDeviceIndex(1)"></div>
           </div>
-          <dv-border-box-2 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">
@@ -85,50 +100,76 @@
         </dv-border-box-1>
       </dv-border-box-12>
 
-      <dv-border-box-12 style="height: 80%;" :color="color" :backgroundColor="backgroundColor">
+      <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" ref="border3"
+        style="height: 350px;" :color="color" :backgroundColor="backgroundColor">
         <dv-border-box-1>
-          <div style="padding: 10px;width: 100%;height: 100%;padding-top: 20px;">
-            <div id="charts2" style="height: 100%;width: 100%;"></div>
+          <div class="full center" style="flex-direction: column">
+            <div style="width: 90%;height: 15%;color: white;font-size: 18px" 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 :backgroundColor="backgroundColor" style="position:absolute;width: 260px;height: 210px;bottom: 10px;left: calc(24% - 10px);color: white;
+    <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="full center" style="padding-top: 20px;flex-direction: column;">
-        <div style="margin-bottom: -30px;font-size: 20px;" :style="{color:fontColor}">人员分布</div>
-        <dv-active-ring-chart :config="ringChartConfig1" style="width: 250px;height: 250px;" />
+      <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 :color="color" :backgroundColor="backgroundColor" style="position:absolute;width: 260px;height: 210px;bottom: 10px;right: calc(24% - 10px);color: white;
+    <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="full center" style="padding-top: 20px;flex-direction: column;">
-        <div style="margin-bottom: -30px;font-size: 20px;" :style="{color:fontColor}">年龄分布</div>
-        <dv-active-ring-chart :config="ringChartConfig2" style="width: 250px;height: 250px;" />
+      <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>
 
-
     <!-- 底部视图-中 -->
-    <div
-      style="position: absolute;bottom: 10px;left: calc(24% + 232px );width: 532px;height: 280px;border-radius: 20%;">
-      <dv-border-box-1 ref="border9" :color="color" :backgroundColor="backgroundColor">
-        <div class="full center">
-          <dv-capsule-chart :config="chartConfig" style="width:400px;height:250px" />
-        </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 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" />
+          </dv-border-box-8>
+        </dv-border-box-10>
+      </div>
     </div>
+
   </div>
 
 </template>
 
 <script>
-  import TimeBar from "../../components/3DMap/TimeBar.vue"
-  import topMenu from "../../components/top-menu.vue"
+  import myDialog from "/src/components/myDialog.vue"
+  import Map3D from "/src/components/3DMap/Map3D";
+  import TimeBar from "/src/components/3DMap/TimeBar.vue"
+  import topMenu from "/src/components/top-menu.vue"
   import Charts, {
     changeDefaultConfig
   } from "@jiaminghi/charts";
@@ -142,32 +183,42 @@
     getList,
     getStaticData,
     smartDeviceStatic
-  } from "../../api/grid/grid";
+  } from "/src/api/grid/grid.js";
   export default {
     components: {
+      myDialog,
       topMenu,
-      TimeBar
+      TimeBar,
+      Map3D
     },
-    name: "dataScreen",
-    async mounted() {
-      this.initCharts('charts1', 'round1');
-      this.initCharts('charts4', 'round2');
-      this.initCharts('charts2', 'tendency');
-      await this.onLoad(this.$route.query['id']);
+    mounted() {
+      //获取社区数据
+      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)
     },
-    inject: ['screen'],
     watch: {
-      screenWidth() {
-        this.resize();
-      },
       $route() {
-        if (this.$route.path == '/grid/dataScreen') {
+        if (this.$route.path == '/grid/dataPage') {
           this.resize()
           this.map.resize()
-          this.$store.commit('SET_TAG_INDEX', 1);
+          this.$store.commit('SET_TAG_INDEX', 0);
         }
         if (this.$route.query.refresh) {
-          this.onLoad(this.$route.query.id)
+          this.fetchData(this.$route.query.id)
         }
       },
       currentDeviceIndex() {
@@ -183,6 +234,28 @@
     },
     data() {
       return {
+
+        dialogShow: false,
+        maskShow: false,
+        closeEnter: false,
+
+        noticeOption: {
+          columnWidth: [500],
+          oddRowBGC: 'rgba(9, 215, 183, 0.1)',
+          evenRowBGC: 'rgba(58, 104, 182, 0.3)',
+          waitTime: 2000,
+          data: [
+            ['放假通知：放假放放假放假放放假放假放放假放假放放假放假放放假放假放放假'],
+            ['防疫通知：防疫通行防'],
+            ['停水通知，停水通知'],
+            ['放假通知：放假放假放'],
+            ['防疫通知：防疫通行防疫'],
+            ['停水通知：停水通知停水'],
+            ['放假通知：放假放假放假放'],
+            ['防疫通知：防疫通行防疫通行'],
+            ['停水通知：停水通知停水通知停'],
+          ]
+        },
         fontColor: "#00f9cf",
         backgroundColor: "rgba(15, 33, 70, 0.6)",
         color: ['#1a3776', '#3f6a9a'],
@@ -247,74 +320,6 @@
         config: {
           data: []
         },
-        chartConfig: {},
-        ringChartConfig1: {
-          data: [{
-              value: 1048,
-              name: '社区人员'
-            },
-            {
-              value: 735,
-              name: '重点人员'
-            },
-            {
-              value: 580,
-              name: '老人'
-            },
-            {
-              value: 484,
-              name: '前科人员'
-            },
-            {
-              value: 300,
-              name: '流动人员'
-            }
-          ],
-          color: [
-            "#ffdb5c",
-            "#37a2da",
-            "#32c5e9",
-            "#67e0e3",
-            "#9fe6b8"
-          ],
-          digitalFlopStyle: {
-            fontSize: 18,
-            fill: "#fff"
-          },
-          showOriginValue: true
-        },
-        ringChartConfig2: {
-          data: [{
-              value: 1048,
-              name: '>20'
-            },
-            {
-              value: 735,
-              name: '20~40'
-            },
-            {
-              value: 580,
-              name: '40~60'
-            },
-            {
-              value: 484,
-              name: '<70'
-            },
-          ],
-          color: [
-            "#ffdb5c",
-            "#37a2da",
-            "#32c5e9",
-            "#67e0e3",
-            "#9fe6b8"
-          ],
-          digitalFlopStyle: {
-            fontSize: 18,
-            fill: "#fff"
-          },
-          showOriginValue: true
-        },
-
         round1: {},
         round2: {},
         tendency: {},
@@ -330,17 +335,227 @@
       }
     },
     methods: {
+      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
+        this.dialogShow = false
+        setTimeout(() => {
+          _this.maskShow = false
+        }, 50)
+      },
+      noticeClick() {
+        this.maskShow = true
+        this.dialogShow = true
+      },
+      getGridOption() {
+        var myChart = this.$echarts.init(document.getElementById('gridOption'));
+
+        var option = {
+          textStyle: {
+            color: "#fff"
+          },
+          color: ['#32c4e8'],
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          grid: {
+            left: '1%',
+            right: '4%',
+            top: '-2%',
+            bottom: '20%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+          },
+          yAxis: {
+            type: 'category',
+            data: ['网格', '楼栋房屋', '户室', '人口', '特殊人群', '重点人员', '法人']
+          },
+          series: [{
+            type: 'bar',
+            data: [1, 25, 75, 120, 12, 1, 8]
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getPersonnelDistribution() {
+        var myChart = this.$echarts.init(document.getElementById('personnelDistribution'));
+
+        var option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          series: [{
+            name: '人员分布',
+            type: 'pie',
+            radius: '50%',
+            data: [{
+                value: 1048,
+                name: '社区人员',
+              },
+              {
+                value: 735,
+                name: '重点人员'
+              },
+              {
+                value: 580,
+                name: '老人'
+              },
+              {
+                value: 484,
+                name: '前科人员'
+              },
+              {
+                value: 300,
+                name: '流动人员'
+              }
+            ],
+
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getCommunityOption() {
+        var myChart = this.$echarts.init(document.getElementById('communityOption'));
+
+        var option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          gridientColor: [
+
+          ],
+          color: ['#00f9cf'],
+          textStyle: {
+            color: '#fff'
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getAgeDistribution() {
+        var myChart = this.$echarts.init(document.getElementById('ageDistribution'));
+
+        var option = {
+          tooltip: {
+            trigger: 'item'
+          },
+          textStyle: {
+            color: '#fff'
+          },
+          series: [{
+            name: '年龄',
+            type: 'pie',
+            radius: '50%',
+            data: [{
+                value: 1048,
+                name: '大于20'
+              },
+              {
+                value: 735,
+                name: '20~40'
+              },
+              {
+                value: 580,
+                name: '40~60'
+              },
+              {
+                value: 484,
+                name: '小于70'
+              },
+            ],
+          }]
+        };
+        myChart.setOption(option);
+      },
+      getDataOption() {
+        // 基于准备好的dom，初始化echarts实例
+        var myChart = this.$echarts.init(document.getElementById('dataOption'));
+
+        var option = {
+          tooltip: {
+            trigger: 'axis'
+          },
+          textStyle: {
+            color: "#fff"
+          },
+          xAxis: {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [{
+            data: [{
+              value: 300,
+              itemStyle: {
+                color: '#37a2da'
+              }
+            }, {
+              value: 200,
+              itemStyle: {
+                color: '#32c5e9'
+              }
+            }, {
+              value: 150,
+              itemStyle: {
+                color: '#67e0e3'
+              }
+            }, {
+              value: 120,
+              itemStyle: {
+                color: '#32c5e9'
+              }
+            }, {
+              value: 70,
+              itemStyle: {
+                color: '#ffdb5c'
+              }
+            }, {
+              value: 110,
+              itemStyle: {
+                color: '#91cc75'
+              }
+            }],
+            type: 'bar'
+          }]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        myChart.setOption(option);
+      },
       async initData(id) {
         this.data = (await getStaticData({
           id
         })).data.data;
-
         this.chartConfig = {
           data: this.data.communityCounts,
           colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
           showValue: true
         };
-        console.log(this.chartConfig, 9999);
 
         this.device = this.data['deviceType'][this.currentDeviceIndex % this.data['deviceType'].length]
         await this.getDeviceStatic();
@@ -357,6 +572,8 @@
       changeCurrenDeviceIndex(num) {
         this.currentDeviceIndex = this.currentDeviceIndex + num;
         this.getDeviceStatic();
+        this.$animateCss('#deviceName','animate__fadeInDown')
+        this.$animateCss('#deviceList','animate__fadeInUp')
       },
       setRound(list1, list2) {
         this.round1.setOption({
@@ -399,16 +616,6 @@
           }]
         });
         this.type.setOption({
-          // title: {
-          //   // text: '人员组成',
-          //   style: {
-          //     fill: '#5fe9c8',
-          //     fontSize: 17,
-          //     fontWeight: 'bold',
-          //     textAlign: 'center',
-          //     textBaseline: 'bottom'
-          //   }
-          // },
           series: [{
             type: 'pie',
             data: [{
@@ -504,7 +711,7 @@
           evenRowBGC: 'rgba(58, 104, 182, 0.3)',
           waitTime: 2000,
           header: ['告警类型', '设备地点', '告警时间'],
-          headerBGC: '#09d7b7',
+          headerBGC: '#ee6666',
           data: [],
           align: ['center', 'center', 'center'],
         };
@@ -531,7 +738,7 @@
         let myChart = new Charts(container);
         this[ele] = myChart;
       },
-      async onLoad(id) {
+      async fetchData(id) {
         changeDefaultConfig('color', ['rgb(208,200,21)', '#348d07', '#6e6138', 'rgba(70,103,83,0.59)', '#674a2c',
           '#621752'
         ]);
@@ -553,10 +760,47 @@
   }
 </script>
 
+<style lang="scss" scoped>
+  .grid-btn{
+    width: 30px;
+    height: 30px;
+  }
+
+  .mask {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: rgba(18, 98, 140, .6);
+    width: 100%;
+    height: 100%;
+    z-index: 9999999999999;
+
+    .dialog {
+      position: relative;
+      width: 60%;
+      height: 70%;
+      background-color: rgba(4, 25, 50, .5);
+
+      .close {
+        position: absolute;
+        right: -15px;
+        top: -20px;
+        width: 50px;
+        height: 50px;
+        font-size: 50px;
+        color: #00dcfd;
+        cursor: pointer;
+      }
+
+    }
+  }
+</style>
 
 <style scoped>
   body {
-    position: absolute;
+    position: relative;
     /*left: 30%;*/
     /*top: 30%;*/
     /*height: 30vw;*/
@@ -568,6 +812,9 @@
     margin: 0;
   }
 
+
+
+
   #effect-example-7 {
     height: 260px;
     max-width: 360px;
@@ -640,7 +887,7 @@
   }
 
   .data2 {
-    background: url('/data/data-bg-3.png') no-repeat center/80%;
+    background: url('/data/data-bg-3.png') no-repeat center/90%;
   }
 
   .row {

src/views/order/publicevent.vue

@@ -1,5 +1,5 @@
 <template>
-  <basic-container>
+  <basic-container class="animate__animated animate__backInRight">
     <avue-crud :option="option"
                :table-loading="loading"
                :data="data"