saber-grid-sys/src/views/grid/dataView.vue

<template>
  <div class="full" style="position: relative;" :style="tagIndex==0?'':'background-color: rgba(20, 41, 87,.5);'">
    <div style="width: 100%;z-index: 99;height: 10%;" :class="tagIndex==0?'tagIndex0':''">
      <top-menu style="z-index: 99;" :gridList="gridList"></top-menu>
    </div>
      <dv-border-box-8 :color="['#1a3776', '#3f6a9a']" backgroundColor="rgba(20, 41, 87,.5)" :style="tagIndex==0?'':'height: 90%'">
        <div class="full center" style="flex-direction: column">
          <keep-alive>
            <router-view   v-if="$route.meta.keepAlive" />
          </keep-alive>
          <router-view  v-if="!$route.meta.keepAlive" />
        </div>
      </dv-border-box-8>
  </div>

</template>

<script>
  import {getDetail, getList} from "../../api/grid/grid";
  import {mapGetters} from "vuex";
  import charts from "../../components/charts/charts";
  import {fullscreenToggel, listenfullscreen} from "@/util/util";
  import Charts from "@jiaminghi/charts";
  import { changeDefaultConfig } from '@jiaminghi/charts'
  import {calcDate, dateFormat} from "../../util/date";
  import {resetRouter} from "../../router/router";
  import topMenu from "../../components/top-menu";
  import {getStore} from "../../util/store";
  import {validatenull} from "../../util/validate";
  export default {
    components: {topMenu},
      mounted() {
        this.onLoad();
      },
    created() {
      //实时检测刷新token
      this.refreshToken();
    },
      name: "dataView",
      computed: {
        ...mapGetters(["userInfo","currentGrid","tagIndex","loading",'menu']),
        week(){
          return this.weekStr[this.dateTime.week]
        },
      },
      watch:{
        $route(){

        }
      },
      methods: {
        currentTime() {
          setInterval(this.getTime, 500);
        },
        getTime() {
          let date = new Date();
         let str = dateFormat(date);
         let week = date.getDay();
          str = str.split(" ");
          this.dateTime = {
            week: week,
            date: str[0],
            time: str[1]
          }
        },
        logout() {
          this.$confirm('退出系统, 是否继续?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            this.$store.dispatch("LogOut").then(() => {
              resetRouter();
              this.$router.push({path: "/login"});
            });
          });
        },
        handleScreen() {
          fullscreenToggel();
        },

        async onLoad(id){
          this.currentTime();
          let grids = (await getList(1,100,{userCode: this.userInfo['user_id']})).data.data.records;
          this.gridList = grids;
          this.$store.commit('SET_USER_INFO', this.userInfo);
          const grid = typeof id == 'undefined' ? this.userInfo.grid[this.currentGridIndex] : (await getDetail({"id": id})).data.data;
          this.grid = grid;
          await this.$store.dispatch("FlowRoutes")
        },
        // 定时检测token
        refreshToken() {
          this.refreshTime = setInterval(() => {
            const token = getStore({
              name: "token",
              debug: true
            }) || {};
            const date = calcDate(token.datetime, new Date().getTime());
            if (validatenull(date)) return;
            if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
              this.refreshLock = true;
              this.$store
                .dispatch("refreshToken")
                .then(() => {
                  this.refreshLock = false;
                })
                .catch(() => {
                  this.refreshLock = false;
                });
            }
          }, 10000);
        }
      },
      provide() {
        return {
          index: this
        };
      },
      data() {
        return {
          //刷新token锁
          refreshLock: false,
          //刷新token的时间
          refreshTime: "",
          gridList: [],
          key: 1,
          menuActive: 0,
          visible: false,
          tagList: [
            {name: '网格看板',path: '/grid/viewpanel'},
            {name: '网格划分',path: '/grid/divide'},
            {name: '数据大屏',path: '/grid/dataPage'},
            // {name: '人员管理',path: '/grid/myLayout/memberList'},
            // {name: '设备管理',path: '/grid/myLayout/deviceList'},
            {name: '网格管理',path: '/community/agency'},
            {name: '全屏',path: ''},
            {name: '退出',path: ''},
          ],
          tendencyOption:{
            title: {
              text: '社区人口数量',
              style: {
                fill: '#083a29',
                fontSize: 17,
                fontWeight: 'bold',
                textAlign: 'center',
                textBaseline: 'bottom'
              }
            },
            xAxis: {
              name: '社区名称',
              data: ['幸福里', '阅海万家','幸福里', '阅海万家','幸福里', '阅海万家' ] ,
              nameTextStyle: {
                fill: '#b9b9ba',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#33b0dd',
                  fontSize: 15
                }
              }


            },
            yAxis: {
              name: '人口数',
              data: 'value',
              nameTextStyle: {
                fill: '#b9b9ba',
                fontSize: 10
              },
              axisLabel:{
                style:  {
                  fill: '#33b0dd',
                  fontSize: 12
                }}
            },
            legend: {
              show:true
            },
            series: [
              {
                data: [1200, 2230, 1900, 2100, 3500, 4200, 3985],
                type: 'bar'
              }
            ]
          },
          currentGridIndex: 0,
          fullscreen: false,
          weekStr: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六',],
          AMap: {},
          map: {},
          grid: {},
          dateTime: {}
        }
      },
    }
</script>

<style scoped>
  .container{
    width: 100%;
    height: 100%;
    background: url('/data/data-bg.png') no-repeat center/cover;
  }

  .tagIndex0{
    top: 0;
    position: absolute;
  }
  .device-title{
    font-style: italic;font-size: 10px;text-align: center;line-height: 100px;letter-spacing: 20px;
    animation: suofang 2s linear infinite reverse;
  }
  .center{display: flex;justify-content: center;align-items: center;}
  .logo-info{width: 60%;height: 100%;background: url('/data/bg-top.png') no-repeat center/100% 90%;}
  .time-info{width: 40%;height: 100%;background: url('/data/bg-time.png') no-repeat center/100% 90%;}
  .ele1{
    width: 40px;
    height: 40px;
    background: url('/data/ele1.png') no-repeat center/contain ;
    animation: round 2s infinite linear;
  }
  .white{
    color: #dddddd;
  }
  .data2{
    background: url('/data/data-bg-3.png') no-repeat center/80% ;
  }
  .row{
    display: flex;
    flex-direction: row;
  }
  .green{
    color: rgba(0, 186, 189, 1);
  }
  .font-20{
    font-size: 20px;
  }
  .full{
    width: 100%;
    height: 100%;
  }
  .main-container{
    width: 100%;
    height: calc(100%);
  }
  .big:hover{
    font-size: 20px;
  }
  .tag-bar{
    margin: 5px;
    width: calc(100% - 10px);
    height: 40px;
    background: white;
  }
  .tendency{
    background: url('/data/bg-grid.png') no-repeat center/cover ;
  }
  .left{
    width: 30%;height: 100%;background: url('/data/left.png') no-repeat center;
    background-size: 20%;
  }
  .right{
    width: 30%;height: 100%;background: url('/data/right.png') no-repeat center;
    background-size: 20%;
  }
  .left:hover{
    cursor: pointer;
    background-size: 25%;
  }
  .right:hover{
    cursor: pointer;
    background-size: 25%;
  }
  .data1{
    width: 300px;height: 100px;
    background: url('/data/data-bg-1.png') no-repeat center/contain ;
  }
  @keyframes round {
    from { transform: rotate(0deg) }
    to {
      transform: rotate(360deg)
    }
  }
  .message{
    animation: translation 10s infinite linear
  }
  @keyframes translation {
    from { transform: translateX(-200%) }
    to {
      transform: translateX(200%)
    }
  }
  @keyframes suofang {
    from { transform: rotateY(0deg)}
    to {
      transform: rotateY(360deg)
    }
  }
  .tag-button{
    width: 100px;
    height: 30px;
    cursor: pointer;
    margin-left: 20px;
    background: url('/data/bg-grid.png') no-repeat center/cover;
  }
  .down {
    margin-left: 8px;
    width: 12px;
    height: 12px;
    background: url('/data/down.png') no-repeat center/contain;
    display: inline-block;
  }

  .actvieBorder{
    border: solid 2px #22ddda;
  }
  @keyframes offset {
    from { transform: translate(0,0)}
    to { transform: translate(2%,2%)}
  }
  .grid-button:active{
    animation: offset 1s linear;
  }




 /deep/ .el-select .el-input .el-select__caret {
    color: rgba(0, 186, 189, 1);
    font-size: 14px;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    -webkit-transform: rotateZ(
      180deg
    );
    transform: rotateZ(
      180deg
    );
    cursor: pointer;
  }
 /deep/ .gridName .el-select .el-input__inner {
    color: rgba(0, 186, 189, 1);
   background: transparent;
   border: transparent;
  }
  .title{
    color: white;
    font-size: 40px;
  }


</style>