<template>
  <div id="visualization">
    <div class="bgimg"><img src="../../assets/img/bgfixed.jpg"></div>
    <div class="topbg"><img src="../../assets/img/topbg.png"></div>
    <div class="toptitle">
      <div>智慧公寓管理系统</div>
    </div>
    <div class="toptitle secondtitle">
      <div>智能产品数据统计分析</div>
    </div>
    <div class="content">
      <div class="top">
        <div class="topLeft">
          <leftTop :seriesData2="seriesData"></leftTop>
        </div>
        <div class="topCenter">
          <leftCenter></leftCenter>
        </div>
        <div class="topBottom">
          <leftBottom></leftBottom>
        </div>
      </div>
      <div class="center">
        <div class="centertop">
          <mapBox></mapBox>
        </div>
        <div class="centerbottom">
          <centerBootm></centerBootm>
        </div>
      </div>
      <div class="right">
        <div class="righttop">
          <rightTop></rightTop>
        </div>
        <div class="rightcenter">
          <rightCenter></rightCenter>
        </div>
        <div class="rightbottom">
          <rightBottom :seriesData1="seriesData"></rightBottom>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // var elementResizeDetectorMaker = require("element-resize-detector")
  import {
    httpGetno
  } from "../../api";
  import leftTop from "../../components/visualizcomponent/left/leftTop/index.vue";
  import leftCenter from "../../components/visualizcomponent/left/leftCenter/index.vue";
  import leftBottom from "../../components/visualizcomponent/left/leftBottom/index.vue";
  import mapBox from "../../components/visualizcomponent/center/top/index.vue"
  import centerBootm from "../../components/visualizcomponent/center/bottom/index.vue"
  import rightTop from "../../components/visualizcomponent/right/rightTop/index.vue"
  import rightCenter from "../../components/visualizcomponent/right/rightCenter/index.vue"
  import rightBottom from "../../components/visualizcomponent/right/rightBottom/index.vue"
  import moment from "moment"
  export default {
    inject: ['reload'],
    name: "visualization",
    data() {
      return {
        timer: null,
        seriesData: {
          abnormalTotal: 0,
          batteryLevel1: 0,
          batteryLevel2: 0,
          batteryLevel3: 0,
          batteryLevel4: 0,
          batteryLevel5: 0,
          closeTotal: 0,
          offlineTotal: 0,
          onlineTotal: 0,
          openTotal: 0,
          projects: 0,
          total: 0
        },
      }
    },
    components: {
      leftTop,
      leftCenter,
      leftBottom,
      mapBox,
      centerBootm,
      rightTop,
      rightCenter,
      rightBottom
    },
    beforeCreate() {
      this.$store.commit('settenantid')
    },
    created() {
      this.$store.commit('setUser1')
      if (!localStorage.getItem('statisticsDate')) {
        var data = {
          "cdata": ["0.42", "1.26", "1.68", "9.45", "85.50"],
          "seriesData": {
            "abnormalTotal": 0,
            "batteryLevel1": 2,
            "batteryLevel2": 6,
            "batteryLevel3": 8,
            "batteryLevel4": 45,
            "batteryLevel5": 407,
            "closeTotal": 334,
            "offlineTotal": 34,
            "onlineTotal": 442,
            "openTotal": 142,
            "projects": 65,
            "total": 476
          },
          "collectUS": {
            "card300": 133,
            "site200": 71,
            "card200": 229,
            "userCount": 196,
            "site300": 70,
            "lock300": 773,
            "site400": 331,
            "lock200": 6702,
            "houseSensor400": 205424
          },
          "collectOpenLock": {
            "week300": [{
              "count": 7,
              "order": "2022-05-15"
            }, {
              "count": 14,
              "order": "2022-05-16"
            }, {
              "count": 13,
              "order": "2022-05-17"
            }, {
              "count": 20,
              "order": "2022-05-18"
            }, {
              "count": 156,
              "order": "2022-05-19"
            }, {
              "count": 103,
              "order": "2022-05-20"
            }, {
              "count": 33,
              "order": "2022-05-21"
            }, {
              "count": 37,
              "order": "2022-05-22"
            }, {
              "count": 159,
              "order": "2022-05-23"
            }, {
              "count": 147,
              "order": "2022-05-24"
            }, {
              "count": 137,
              "order": "2022-05-25"
            }, {
              "count": 87,
              "order": "2022-05-26"
            }],
            "week200": [{
              "count": 115,
              "order": "2022-05-19"
            }, {
              "count": 199,
              "order": "2022-05-20"
            }, {
              "count": 64,
              "order": "2022-05-21"
            }, {
              "count": 26,
              "order": "2022-05-22"
            }, {
              "count": 142,
              "order": "2022-05-23"
            }, {
              "count": 168,
              "order": "2022-05-24"
            }, {
              "count": 150,
              "order": "2022-05-25"
            }, {
              "count": 139,
              "order": "2022-05-26"
            }],
            "allCount300": 8939,
            "allCount200": 23117
          },
          "weekopenlock": [{
            "order": "2022-05-19",
            "count": 271
          }, {
            "order": "2022-05-20",
            "count": 302
          }, {
            "order": "2022-05-21",
            "count": 97
          }, {
            "order": "2022-05-22",
            "count": 63
          }, {
            "order": "2022-05-23",
            "count": 301
          }, {
            "order": "2022-05-24",
            "count": 315
          }, {
            "order": "2022-05-25",
            "count": 287
          }, {
            "order": "2022-05-26",
            "count": 226
          }],
          "addDeviceWeek": [{
            "order": "2022/05/20",
            "count": 0
          }, {
            "order": "2022/05/21",
            "count": 0
          }, {
            "order": "2022/05/22",
            "count": 0
          }, {
            "order": "2022/05/23",
            "count": 2
          }, {
            "order": "2022/05/24",
            "count": 0
          }, {
            "order": "2022/05/25",
            "count": 0
          }, {
            "order": "2022-05-26",
            "count": 0
          }]
        }
        localStorage.setItem('statisticsDate',JSON.stringify(data))
        this.reload()
      }
    },
    mounted() {
      // let that = this
      // let erd = elementResizeDetectorMaker()
      // erd.listenTo(document.getElementById("dashboard"), (element) => {
      //   that.$nextTick(() => {
      //     that.$refs.lineChart.resize()
      //   })
      // })
      // this.timer = setInterval(() => {
      //   this.getcard()
      // }, 30000)
    },
    destroyed() {
      // clearInterval(this.timer)
      // this.timer = null
      // localStorage.removeItem("statisticsDate")
    },
    methods: {
      getcard() {},
    }
  }
</script>

<style scoped>
  #visualization {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .bgimg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .topbg {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
  }

  .bgimg img,
  .topbg img {
    width: 100%;
    height: 100%;
  }

  .toptitle {
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #0074ff, #00c2ff, #00dfff, #01afff);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    z-index: 99;
  }

  .toptitle div {
    font-size: 2vw;
    line-height: 2vw;
    font-family: "microsoft yahei";
    font-weight: bold;
  }

  .toptitle.secondtitle {
    top: 10vh;
  }

  .content {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
  }

  .content>div {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .toptitle.secondtitle div {
    font-size: 1.2vw;
    line-height: 1.2vw;
    font-family: "microsoft yahei";
    font-weight: bold;
  }

  .top,
  .center,
  .right {
    margin-top: 15vh;
    width: 100%;
    box-sizing: border-box;
  }

  .top>div {
    margin-bottom: 1vh;
  }

  /*  .center {
    margin-top: 15vh;
    width: 100%;
    box-sizing: border-box;
  } */
</style>
