<template>
  <div class="full" :class="tagIndex!=0?'animate__animated animate__faster animate__bounceOutDown':''">
    <!-- 左视图 -->
    <div
      style="position: absolute;bottom: 0;left: 0;width: 22%;height: 88%;display: flex;flex-direction: column;justify-content: flex-end;">
      <div class="animate__animated animate__backInUp animate__faster center" style="height: 7%;margin-bottom: 1%;">
        <time-bar></time-bar>
      </div>

      <dv-border-box-11 style="height: 30%" class="animate__animated animate__backInLeft animate__faster" title="通知公告"
        ref="border3" :color="color" :backgroundColor="backgroundColor">
        <div style="height: 10%;"></div>
        <dv-border-box-1 style="height: 90%;width: 99%;">
          <div class="full center" style="flex-direction: column;z-index: 1;">
            <div style="height: 5%;"></div>
            <dv-scroll-board @click="noticeClick" ref="border8" v-if="noticeOption.data.length>0"
              style="height: 88%;width: 95%" :config="noticeOption" />
            <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无通知公告</div>
          </div>
        </dv-border-box-1>
      </dv-border-box-11>

      <dv-border-box-11 style="height: 32%" class="animate__animated animate__backInLeft animate__faster"
        :title="grid.gridName" ref="border3" :color="color" :backgroundColor="backgroundColor">
        <div style="height: 10%;"></div>
        <dv-border-box-1 style="height: 90%;width: 99%;">
          <div class="full center" style="flex-direction: column;z-index: 1;">
            <div style="height: 5%;"></div>
            <div id="grid" class="full  animate__faster">
              <div id="gridOption" style="width: 95%;height: 95%;">
              </div>
            </div>
          </div>
        </dv-border-box-1>
      </dv-border-box-11>

      <!--    <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster"
        style="height: 32%;overflow: hidden;" :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1 ref="border2">
          <div style="padding-top: 15px;">
            <div style="display: flex;justify-content: space-around;">
              <img class="grid-btn" @click="changeGridIndex(-1)" src="../../../../public/data/left.png" />
              <div id="gridName" class="animate__faster" style="font-size: 22px;color: #FFFFFF;">
                {{'网格1:'+selectGrid.gridName}}
              </div>
              <img class="grid-btn" @click="changeGridIndex(1)" 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-1>
      </dv-border-box-12> -->

      <dv-border-box-12 class="animate__animated animate__backInLeft animate__faster" style="height: 32%;"
        :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1>
          <div class="center full" style="flex-direction: column;padding-top: 15px;">
            <div style="font-size: 20px;font-weight: 800;margin-bottom: -20px;" :style="{color:fontColor}">社区人口数量</div>
            <div id="communityOption" style="height: 100%;width: 95%;"></div>
          </div>
        </dv-border-box-1>
      </dv-border-box-12>
    </div>


    <div
      style="position: absolute;bottom: 0;right: 0;width: 22%;height: 85%;display: flex;flex-direction: column;justify-content: flex-end;">
      <dv-border-box-12 style="overflow: hidden;height: 55%;"
        class="animate__animated animate__backInRight animate__faster" ref="border12" :color="color"
        :backgroundColor="backgroundColor">
        <dv-border-box-1 ref="border2" style="height: 100%">
          <div class=" center" :style="{color:fontColor}"
            style="width: 100%;height: 12%;font-size: 20px;display: flex;align-items: center;text-indent: 2em;font-weight: 800;">
            设备概况</div>
          <dv-decoration-6 style="margin: auto;width:90%;height:3%;" />
          <div style="width: 90%;margin: auto;height: 25%;" class="center">
            <div class="left" @click="changeCurrenDeviceIndex(-1)"></div>
            <div id="deviceName" class="data2 green animate__faster" style="width: 40%;height: 100%;">
              <div class="device-title" :style="{color:fontColor}">{{device.dictValue}}</div>
            </div>
            <div class="right" @click="changeCurrenDeviceIndex(1)"></div>
          </div>
          <dv-border-box-2 id="deviceList" class="animate__faster" ref="border4" :color="color"
            style="margin: auto;width:90%;height:55%;">
            <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">
                  <div class="green" style="margin-bottom: 5px;">设备总数</div>
                  <dv-decoration9 class="device-total-num green center" style="font-size: 24px;font-style: italic">
                    {{deviceData.count}}
                  </dv-decoration9>
                </div>
                <div style="width: 50%;height: 100%;flex-direction: column" class="center ">
                  <dv-border-box-7 ref="border5" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" style="color: #fff;font-weight: 800;">设备正常： {{deviceData.normalCount}}
                    </div>
                  </dv-border-box-7>
                  <dv-border-box-7 ref="border6" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" style="color: #fe3535;font-weight: 800;">设备异常：
                      {{deviceData.exceptionCount}}
                    </div>
                  </dv-border-box-7>
                  <dv-border-box-7 ref="border7" style="width: 85%;height: 40px;margin: 5px">
                    <div class="full center" :style="{color:fontColor}" style="font-weight: 800;">设备运作：
                      {{deviceData.normalCount}}
                    </div>
                  </dv-border-box-7>
                </div>
              </div>
            </div>
          </dv-border-box-2>
        </dv-border-box-1>
      </dv-border-box-12>

      <dv-border-box-12 class="animate__animated animate__backInRight animate__faster" ref="border3"
        style="height: 45%;" :color="color" :backgroundColor="backgroundColor">
        <dv-border-box-1>
          <div class="full center" style="flex-direction: column">
            <div style="width: 90%;height: 15%;color: white;font-size: 20px;font-weight: 800;"
              :style="{color:fontColor}" class="center">告警信息列表</div>

            <div v-if="config.data.length>0"
              style="width: 94%;color: #FFFFFF;margin-top: 10px;display: flex; justify-content: space-around;background-color: #ee6666;padding: 10px 0;">
              <div>告警类型</div>
              <div>设备地点</div>
              <div>告警时间</div>
            </div>
            <dv-scroll-board @click="alarmClick" ref="border8" v-if="config.data.length>0" style="height: 82%;width: 94%"
              :config="config" />
            <div class="green" style="font-size: 20px;letter-spacing: 5px" v-else>暂无报警信息</div>
          </div>
        </dv-border-box-1>
      </dv-border-box-12>
    </div>


    <div
      style="position: absolute;left: calc(22% - 10px);right: calc(22% - 10px);bottom: 0;height: 30%;display: flex;align-items: flex-end;">
      <!-- 底部视图右 -->
      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
        style="height: 90%;width: 28%;">
        <div class="center full" style="margin-top: 20px;flex-direction: column;">
          <div style="font-size: 20px;font-weight: 800;" :style="{color:fontColor}">年龄分布</div>
          <div id="ageDistribution" style="width: 98%;height:90%;"></div>
        </div>
      </dv-border-box-1>

      <!-- 底部视图-中 -->
      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
        style="height: 100%;width:calc(44% + 20px);margin:0 -10px;">
        <div class="full center" style="margin-top: 15px;flex-direction: column;">
          <div style="font-size: 20px;margin-bottom: -30px;font-weight: 800;" :style="{color:fontColor}">数据统计</div>
          <div id="dataOption" style="width:100%;height:100%"></div>
        </div>
      </dv-border-box-1>

      <!-- 底部视图左 -->
      <dv-border-box-1 class="animate__animated animate__backInUp animate__faster" :backgroundColor="backgroundColor"
        style="height: 90%;width: 28%;">
        <div class="center full" style="margin-top: 20px;flex-direction: column;">
          <div style="font-size: 20px;font-weight: 800;" :style="{color:fontColor}">人员分布</div>
          <div id="personnelDistribution" style="width: 98%;height:90%;"></div>
        </div>
      </dv-border-box-1>
    </div>
    <!-- 通知公告弹窗 -->
    <mp-dialog ref="noticeDialog" :detail="noticeDetail">
      <div slot="detail" class="detail">
        <div v-html="noticeDetail.content"></div>
      </div>
    </mp-dialog>
    <!-- 设备警告弹窗 -->
   <mp-dialog ref="alarmDialog" :detail="alarmDetail" titleName="alarmContent">
      <div slot="detail" class="detail">
        <div class="alarm_content">
          <div style="padding: 10px;">
            <span>告警类型：</span>
            <span>{{alarmDetail.alarmType || '暂无数据'}}</span>
          </div>
          <div style="padding: 10px;">
            <span>告警地点：</span>
            <span>{{alarmDetail.alarmPosition}}</span>
          </div>
          <div style="padding: 10px;">
            <span>告警原因：</span>
            <span>{{alarmDetail.alarmReason || '暂无数据'}}</span>
          </div>
          <div style="padding: 10px;">
            <span>工单状态：</span>
            <span>{{alarmDetail.jobStatus==2?'已处理':'处理中'}}</span>
          </div>
          <div style="padding: 10px;">
            <span>处理人：</span>
            <span>{{alarmDetail.handler || '暂无数据'}}</span>
          </div>
          <div style="padding: 10px;">
            <span>电话：</span>
            <span>{{alarmDetail.phone || '暂无数据'}}</span>
          </div>
        </div>
      </div>
    </mp-dialog>

  </div>

</template>

<script>
  import {dateFormat} from "../../../util/date.js"
  import mpDialog from "/src/components/mp-dialog.vue"
  import Map3D from "/src/components/3DMap/Map3D";
  import TimeBar from "/src/components/TimeBar.vue"
  import topMenu from "/src/components/top-menu.vue"
  import Charts, {
    changeDefaultConfig
  } from "@jiaminghi/charts";
  import {
    mapGetters
  } from "vuex";
  import {
    getList as getNoticeList
  } from "/src/api/desk/notice.js"

  import {
    getAgencyListForCustom,
    getAgencysByAreaCode,
    getDetail,
    getList,
    getStaticData,
    smartDeviceStatic
  } from "/src/api/grid/grid.js";
  export default {
    components: {
      mpDialog,
      topMenu,
      TimeBar,
      Map3D,
    },
    created() {
      //获取通知公告的数据
      this.getNoticeOption()
    },
    mounted() {
      this.getOptionData()
    },
    watch: {
      $route() {
        if (this.$route.path == '/grid/dataPage') {
          this.$store.commit('SET_TAG_INDEX', 0);
        }
        if (this.$route.query.refresh) {
          this.fetchData(this.$route.query.id)
        }
      },
      currentDeviceIndex() {
        this.device = this.currentDeviceIndex >= 0 ?
          this.data['deviceType'][this.currentDeviceIndex % this.data['deviceType'].length] :
          this.data['deviceType'][this.data['deviceType'].length + this.currentDeviceIndex % this.data['deviceType']
            .length
          ]
      },
    },
    computed: {
      ...mapGetters(["userInfo", "currentGrid", "tagIndex"]),
    },
    data() {
      return {
        grids: [],
        selectGrid: {},
        selectGridIndex: 0,

        noticeOption: {},
        noticeList:[],
        noticeDetail:{},

        dialogShow: false,
        maskShow: false,
        closeEnter: false,

        //报警列表
        alarmList:[],
        alarmDetail:{},

        fontColor: "#00f9cf",
        backgroundColor: "rgba(15, 33, 70, 0.6)",
        color: ['#42599d', '#3a4e8a'],
        gridList: [{
            icon: '/grid/wangge.png',
            name: '网格',
            num: 1
          },
          {
            icon: '/grid/loudong.png',
            name: '楼栋房屋',
            num: 25
          },
          {
            icon: '/grid/huxing.png',
            name: '户室',
            num: 25
          },
          {
            icon: '/grid/renkou.png',
            name: '人口',
            num: 25
          },
          {
            icon: '/grid/renyuan.png',
            name: '特殊人群',
            num: 0
          },
          {
            icon: '/grid/zhongdian.png',
            name: '重点人员',
            num: 0
          },
          {
            icon: '/grid/faren.png',
            name: '法人',
            num: 0
          },
        ],
        iconList: [{
            icon: '/data/community.png'
          },
          {
            icon: '/data/residential.png'
          },
          {
            icon: '/data/build.png'
          },
          {
            icon: '/data/unit.png'
          },
          {
            icon: '/data/floor.png'
          },
          {
            icon: '/data/room.png'
          },
        ],
        map: {},
        screenWidth: {},
        data: {},
        config: {
          data: []
        },
        round1: {},
        round2: {},
        tendency: {},
        car: {},
        deviceData: {},
        menuActive: 0,
        currentGridIndex: 0,
        fullscreen: false,
        device: {},
        currentDeviceIndex: 0,
        AMap: {},
        grid: {},
      }
    },
    methods: {
      getOptionData() {
        //获取社区数据
        this.fetchData(this.$route.query['id']);
        let _this = this
        setTimeout(() => {
          //获取人员分布
          _this.getPersonnelDistribution()
          //获取年龄分布
          _this.getAgeDistribution()
          _this.getGridOption()
        }, 500)
      },
      async getNoticeOption() {
        let data = []
        let res = await getNoticeList()
        this.noticeList = res.data.data.records
        this.noticeList.forEach(item => {
          let date= dateFormat(new Date(item.releaseTime),'yyyy-MM-dd')
          let str = `${date}:【${item.categoryName}] ${item.title}`
          data.push([str])
        })
        this.noticeOption = {
          columnWidth: [500],
          oddRowBGC: 'rgba(9, 215, 183, 0.1)',
          evenRowBGC: 'rgba(58, 104, 182, 0.3)',
          waitTime: 2000,
          data
        }
      },
      changeGridIndex(type) {
        this.$animateCss('#gridName', 'animate__fadeInDown')
        let length = this.grids.length
        if (type == -1) {
          //左滑
          if (this.selectGridIndex == 0) {
            this.selectGridIndex = length
          } else {
            this.selectGridIndex += type
          }
          this.$animateCss('#grid', 'animate__backInLeft')
        } else {
          //右滑
          if (this.selectGridIndex == length) {
            this.selectGridIndex == 0
          } else {
            this.selectGridIndex += type
          }
          this.$animateCss('#grid', 'animate__backInRight')
        }
        this.grid = this.grids[this.selectGridIndex]
      },
      alarmClick(e){
        this.$refs.alarmDialog.open()
        this.alarmDetail=this.alarmList[e.rowIndex]
      },
      noticeClick(e) {
        this.$refs.noticeDialog.open()
        this.noticeDetail=this.noticeList[e.rowIndex]
      },
      getGridOption() {
        var myChart = this.$echarts.init(document.getElementById('gridOption'));
        window.addEventListener('resize', function() { //执行
          myChart.resize();
        })
        var option = {
          textStyle: {
            color: "#fff"
          },
          color: ['#32c4e8'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '4%',
            right: '4%',
            top: '5%',
            bottom: '3%',
            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'));
        window.addEventListener('resize', function() { //执行
          myChart.resize();
        })
        var option = {
          tooltip: {
            trigger: 'item'
          },

          grid: {
            left: '1%',
            right: '1%',
          },
          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(data) {
        var myChart = this.$echarts.init(document.getElementById('communityOption'));
        let nameList = [];
        let valueList = [];
        data.forEach(item => {
          nameList.push(item.agencyName);
          valueList.push(item.personNum);
        })
        window.addEventListener('resize', function() { //执行
          myChart.resize();
        })
        var option = {
          tooltip: {
            trigger: 'axis'
          },
          color: ['#00f9cf'],
          textStyle: {
            color: '#fff'
          },
          grid: {
            left: '3%',
            right: '2%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: nameList
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: valueList,
            type: 'line',
            smooth: true
          }]
        };
        myChart.setOption(option);
      },
      getAgeDistribution() {
        var myChart = this.$echarts.init(document.getElementById('ageDistribution'));
        window.addEventListener('resize', function() { //执行
          myChart.resize();
        })
        var option = {
          tooltip: {
            trigger: 'item'
          },
          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(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('dataOption'));
        window.addEventListener('resize', function() { //执行
          myChart.resize();
        })

        let nameList = []
        let valueList = []
        data.forEach(item => {
          nameList.push(item.name)
          valueList.push(item.value)
        })

        var option = {
          tooltip: {
            trigger: 'axis'
          },
          textStyle: {
            color: "#fff"
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: nameList
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [{
              value: valueList[0],
              itemStyle: {
                color: '#37a2da'
              }
            }, {
              value: valueList[1],
              itemStyle: {
                color: '#32c5e9'
              }
            }, {
              value: valueList[2],
              itemStyle: {
                color: '#67e0e3'
              }
            }, {
              value: valueList[3],
              itemStyle: {
                color: '#32c5e9'
              }
            }, {
              value: valueList[4],
              itemStyle: {
                color: '#ffdb5c'
              }
            }, {
              value: valueList[5],
              itemStyle: {
                color: '#91cc75'
              }
            }],
            type: 'bar'
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      async initData(id) {
        this.data = (await getStaticData({
          id
        })).data.data;
        this.getDataOption(this.data.communityCounts)
        this.device = this.data['deviceType'][this.currentDeviceIndex % this.data['deviceType'].length]
        await this.getDeviceStatic();
        this.setConfig(this.data['deviceJobList']);
        this.getCommunityOption(this.data['agencyPerson'])
      },
      async getDeviceStatic() {
        this.deviceData = (await smartDeviceStatic({
          id: this.currentGrid.id,
          deviceType: this.device.dictKey
        })).data.data;
        console.log(this.deviceData, 88833)
      },
      changeCurrenDeviceIndex(num) {
        this.currentDeviceIndex = this.currentDeviceIndex + num;
        this.getDeviceStatic();
        this.$animateCss('#deviceName', 'animate__fadeInDown')
        this.$animateCss('#deviceList', 'animate__fadeInUp')
      },
      setTendencyOption(list) {
        const _this = this;
        let nameList = [];
        let valueList = [];
        list.forEach(item => {
          nameList.push(item.agencyName);
          valueList.push(item.personNum);
        })
        this.tendency.setOption({
          title: {
            text: '社区人口数量',
            style: {
              fill: this.fontColor,
              fontSize: 17,
              fontWeight: 'bold',
              textAlign: 'center',
              textBaseline: 'bottom'
            }
          },
          grid: {
            left: '2%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            name: '社区名称',
            data: nameList,
            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: valueList,
            type: 'bar'
          }]
        });
      },
      setConfig(list) {
        let data = {
          oddRowBGC: 'rgba(9, 215, 183, 0.1)',
          evenRowBGC: 'rgba(58, 104, 182, 0.3)',
          waitTime: 2000,
          // headerH/eight: 40,
          // header: ['告警类型', '设备地点', '告警时间'],
          // headerBGC: '#ee6666',
          data: [],
          align: ['center', 'center', 'center'],
        };
        console.log(list,"============================>");
        this.alarmList=list
        list.forEach(item => {
          let alarmType=item.alarmContent || '暂无数据'
          data.data.push([alarmType, item.alarmPosition, item.alarmTime])
        });
        this.config = data
        let _this = this
        window.addEventListener('resize', function() { //执行
          _this.config.resize();
        })
      },
      resize() {
        this.tendency.resize();
        this.rendIndex++;
        this.car.resize();
        this.round1.resize();
        this.round2.resize();
        for (let i = 1; i < 17; i++) {
          if (typeof this.$refs['border' + i] != 'undefined') {
            this.$refs['border' + i].initWH();
          }
        }
      },
      async fetchData(id) {
        let grids = (await getList(1, 100, {
          userCode: this.userInfo['user_id']
        })).data.data.records;
        this.userInfo.grid = grids;
        this.grids = grids
        this.selectGridIndex = 0

        const grid = typeof id == 'undefined' ? this.userInfo.grid[this.currentGridIndex] : (await getDetail({
          "id": id
        })).data.data;
        this.grid = grid;
        this.$store.commit('SET_CURRENT_GRID', grid);
        await this.initData(this.grid.id);
        const gridList = (await getList(1, 100, {
          pid: grid.id
        })).data.data.records;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .grid-btn {
    width: 30px;
    height: 30px;
  }

  .detail {
    overflow: auto;
    padding: 20px;
    color: #32c4e8;
    line-height: 30px;
    font-size: 18px;
    height: 75%;

    .alarm_content{
      margin-left: 50px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
  }

  .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: relative;
    /*left: 30%;*/
    /*top: 30%;*/
    /*height: 30vw;*/
    /*width: 40vh;*/
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }




  #effect-example-7 {
    height: 260px;
    max-width: 360px;
    margin: 0 auto;
  }

  #effect-example-7 tbody {
    padding: 30px;
    border-radius: 10px;
    box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.5),
      5px 5px 5px rgba(0, 0, 0, 0.5);
  }

  #effect-example-7 tbody td {
    margin-inline: 10px;
    border-radius: 10px;
    box-shadow: inset -5px -5px 10px rgba(0, 0, 0, 0.5),
      5px 5px 5px rgba(0, 0, 0, 0.5);
  }





  .click:hover {
    cursor: pointer;
    transform: translate(2px, 2px);
  }

  .device-title {
    font-weight: 800;
    font-style: italic;
    font-size: 28px;
    text-align: center;
    line-height: 100px;
    letter-spacing: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    animation: suofang 5s 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/90%;
  }

  .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% - 125px);
  }

  .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: 25%;
  }

  .right {
    width: 30%;
    height: 100%;
    background: url('/data/right.png') no-repeat center;
    background-size: 25%;
  }

  .left:hover {
    cursor: pointer;
    background-size: 25%;
  }

  .right:hover {
    cursor: pointer;
    background-size: 25%;
  }

  .data1 {
    width: 200px;
    height: 80px;
    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;
  }

  .device-total-num {
    width: 170px;
    height: 170px;
    background: url('/data/data-bg-4.png') no-repeat 15px 60%/contain;
  }

  .right-bg-1 {
    background: url('/data/data-bg-2.png') no-repeat center/90%;
  }

  .bg-grid {
    background: url('/data/bg-grid.png') no-repeat center/cover;
  }

  .actvieBorder {
    border: solid 2px #22ddda;
  }
</style>
