<template>
  <div class="home main-cont1">
    <el-badge :value="Statistics.openlook" class="item">
      <router-link to="EquipmentList">
        <img src="../../assets/img/alert.png" alt="" class="alertimg" />
      </router-link>
    </el-badge>
    <div class="flexcolum">
      <div class="columdiv columdiv1">
        <div style="position: relative;">
          <div id="myChart" ref="myChart"></div>
          <div class="selectoptions" v-if="userInfo.type==0">
            <!-- <el-select v-model="selectoptionValue" size="mini" class="handle-input mr10" placeholder="请选择数据中心"
              @change="selectTenantId">
              <el-option v-for="item in selectoption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
			<selectoption></selectoption>
          </div>
        </div>
        <!-- <div class="mapcontent">
          <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="你的百度地图秘钥" :zoom="map.zoom"
            :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :scroll-wheel-zoom="true">
            <bm-point-collection :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_SMALL"
              @click="infoWindowOpen"></bm-point-collection>
            <bm-info-window :position="{lng: 114.064552, lat: 22.548457}" :show="infoWindow.show"
              @close="infoWindowClose" @open="infoWindowOpen">
              <p><span class="left">设备总数：</span><span class="right">{{infoWindow.info.air}}</span>
              <p><span class="left">地址：</span><span class="right">{{infoWindow.info.areaEnergy}}</span>
              </p>
            </bm-info-window>
          </baidu-map>
        </div> -->
        <div class="fault">
          <div class="imglist">
            <div class="imgli"><img src="../../assets/img/yellow.gif"></div>
            <div class="imgli"><img src="../../assets/img/red.gif"></div>
          </div>
          <div class="textlist">
            <div class="textli">
              <div>今日开门报警</div>
              <div class="red">{{openDoorlog}}起</div>
            </div>
            <div class="textli">
              <div>已关门报警</div>
              <div class="red">{{closeDoorlog}}起</div>
            </div>
            <div class="textli">
              <div>今日防拆报警</div>
              <div class="orange">{{fcDoorlog}}起</div>
            </div>
            <div class="textli">
              <div>防拆处理</div>
              <div class="orange">{{fcDoorlog}}起</div>
            </div>
          </div>
        </div>
      </div>
      <div class="columdiv">
        <div id="myChart1" ref="myChart1"></div>
        <div class="fault fault1">
          <div class="table">
            <table class="tablexontent">
              <tr class="rowtitle">
                <th>报警时间</th>
                <th>房间名称</th>
                <th>报警内容</th>
              </tr>
              <div class="alarm">
                <tr v-for="(item,index) in alarmList" :key="index">
                  <th>{{item.createAt}}</th>
                  <th>{{item.name}}</th>
                  <th>
                    <span v-if="item.operateCode==0">心跳</span>
                    <span v-if="item.operateCode==1">门已打开报警</span>
                    <span v-if="item.operateCode==2">低电压告警</span>
                    <span v-if="item.operateCode==4">防拆报警</span>
                    <span v-if="item.operateCode==5">设备故障</span>
                    <span v-if="item.operateCode==13">设备测试</span>
                    <span v-if="item.operateCode==17">门已关</span>
                    <span v-if="item.operateCode==18">低电压恢复与上电开机</span>
                    <span v-if="item.operateCode==20">防拆恢复</span>
                    <span v-if="item.operateCode==21">故障恢复</span>
                    <span v-if="item.operateCode==170">设备ACK</span>
                    <span v-if="item.operateCode==30">添加子设备</span>
                    <span v-if="item.operateCode==31">删除子设备</span>
                  </th>
                </tr>
              </div>
            </table>
          </div>
        </div>
        <!-- <el-amap vid="amap" :plugin="plugin" class="amap-demo" id="amapDemo" :center="center" :events="events">
		</el-amap> -->
        <audio ref='audio' muted :src='audiosrc' controls="controls" :autoplay="false" class="voice" loop></audio>
        <div id="myChart2" ref="myChart2"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  // import AMap from 'AMap'
  import {
    httpGet,
    httpPost,
    httpGetno,
    httpPostno
  } from "../../api/index";
  import moment from "moment"
  export default {
    // inject: ['reload'],
    name: "Home",
    data() {
      const self = this;
      return {
        selectoption: [],
        selectoptionValue: '',
        Processed: 0,
        openDoorlog: 0,
        closeDoorlog: 0,
        fcDoorlog: 0,
        map: {
          zoom: 10,
          width: "100%",
          height: "100%",
          center: {
            lng: 114.064552,
            lat: 22.548457
          }
        },
        points: [{
          lng: 114.064552,
          lat: 22.548457
        }],
        markers: [],
        infoWindow: {
          lng: 114.064552,
          lat: 22.548457,
          show: false,
          info: {
            air: 0,
            area: 12313,
            areaEnergy: '深圳市',
            code: "440300A055",
            energy: 7922.66,
            lat: "22.548457",
            lng: "114.064552",
            name: "",
            water: 0
          },
        },

        center: [114.064552, 22.548457],
        lng: 0,
        lat: 0,
        loaded: false,
        zoom: 19,
        alarmList: [],
        settime: 0,
        fault: 0,
        alert: 0,
        a1: 0,
        a2: 0,
        a3: 0,
        Statistics: {
          projectSum: 0,
          deviceSum: 0,
          bindingSum: 0,
          islineSum: 0,
          unlineSum: 0,
          lowElectricity: 0,
          openlook: 0,
          closelook: 0,
          openDoorlog: 0,
          closeDoorlog: 0,
          fcDoorlog: 0,
          Processed: 0
        },
        settime1: '',
        unlineDevice: '',
        unlinedeviceSum: 0,
        allunline: [],
        settime2: null,
        audiosrc: require("../../assets/img/ls.mp3"),
        prelist: [],
		userInfo:{type:''}
      }
    },
    components: {
      BaiduMap,
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow
    },
    created() {
      this.userInfo = JSON.parse(localStorage.getItem('info'))
      // this.selectoption = JSON.parse(localStorage.getItem('selectoption'))
      // this.selectoptionValue = localStorage.getItem('tenantId')
      // var _this = this
      //   // this.$refs.audio.play()
      //   this.getalertDevice()
      //   this.settime2 = setInterval(function() {
      //     _this.getalertDevice()
      //   }, 3000)
    },
    activated() {
      var _this = this
      this.settime1 = setInterval(function() {
        _this.getReportList()
        _this.getSum()
      }, 30000)
    },
    beforeDestroy() {
      window.clearInterval(this.settime1)
      this.settime1 = null
    },
    beforeRouteLeave(to, from, next) {
      window.clearInterval(this.settime1)
      this.settime1 = null
      next()
    },
    mounted() {
      var _this = this
      this.Statistics.openlook = this.$store.state.openlook
      this.getSum()
      this.getReportList()
      this.settime1 = setInterval(function() {
        _this.getReportList()
        _this.getSum()
      }, 30000)
    },
    watch: {
      '$store.state.Statistics.openlook': function() {
        this.Statistics.openlook = this.$store.state.Statistics.openlook
      }
    },
    methods: {
      // selectTenantId(e) {
      //   localStorage.setItem('tenantId', e)
      //   this.reload()
      // },
      validate(arr1, arr2) {
        if (!arr1 instanceof Array || !arr2 instanceof Array) {
          return true;
        }
        if (arr1.length != arr2.length) {
          return false;
        }
        let arr1Str = JSON.stringify(arr1);
        for (let i = 0; i < arr2.length; i++) {
          if (arr1Str.indexOf(JSON.stringify(arr2[i])) == -1) {
            return false;
          }
        }
        return true;
      },
      unique(arr, u_key) {
        let map = new Map()
        arr.forEach((item, index) => {
          if (!map.has(item[u_key])) {
            map.set(item[u_key], item)
          }
        })
        return [...map.values()]
      },
      getalertDevice() {
        // if (this.currentPage > this.carouselPage) {
        // 	this.currentPage = 1
        // }
        var data = {
          pageNum: 1,
          pageSize: 1,
          orderType: 'desc',
          orderBy: "createAt",
          q: JSON.stringify({
            lockStatus: 1
          })
        }
        httpPostno(data, this.$api.getList).then(res => {
          if (res.success) {
            this.$store.commit('updatedata', res.data.total);
          }
        })
        var data = {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          orderType: 'desc',
          orderBy: "createAt",
          q: JSON.stringify({
            operateCode: 1,
            startTime: moment().subtract('days', 0).format('YYYY-MM-DD 00:00:00'),
            endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          })
        }
        httpPostno(data, this.$api.getReportList).then(res => {
          if (res.success) {
            // if (res.data.total > 0) {

            // } else {
            // 	this.$refs.audio.pause()
            // 	this.vocieStatus = true
            // }
            res.data.list.map(li => {
              li.createAt = moment(li.createAt).format('YYYY/MM/DD HH:mm:ss')
            })
            var time = new Date();
            var list = []
            res.data.list.map(li => {
              var time = moment(time).valueOf()
              var time1 = moment(li.createAt).valueOf()
              li['sharkFlag'] = false
              if (time - time1 < 6000) {
                list.push(li)
                li['sharkFlag'] = true
              }
            })
            this.poplist(list)
            // this.alarmList = res.data.list
            this.unlinedeviceSum = res.data.total
            this.tableData = res.data.list
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      poplist(list) {
        var list1 = this.unique(list, 'imei')
        var tt = this.validate(this.prelist, list1)

        if (tt) {

        } else {
          this.prelist = list1
          if (list1.length == 0) {
            this.$refs.audio.pause()
          } else {
            if (!this.vocieStatus) {
              this.$refs.audio.play()
              this.vocieStatus = false
              setTimeout(() => {
                this.$refs.audio.pause()
              }, 10000)
            }
          }
          list1.map(li => {
            setTimeout(() => {
              this.$notify({
                title: li.name,
                offset: 200,
                duration: 2000,
                message: li.createAt + ' 开门警报',
                type: 'warning'
              });
            }, 3000)
          })

        }
      },
      getSum() {
        var data = {}
        httpGetno(data, this.$api.getEnterprise).then(res => {
          if (res.success) {
            this.Statistics.projectSum = res.data.total
          }
        })
        var data1 = {
          pageSize: 0,
          pageNum: 0
        }
        httpPostno(data1, this.$api.getList).then(res => {
          if (res.success) {
            var arr = [0, 0, 0, 0]
            var st = [0, 0, 0]
            var unlineList = []
            var bindSum = 0
            res.data.list.forEach(li => {
              if (li.isOnline == 1) {
                arr[0] += 1
              } else if (li.isOnline == 0) {
                arr[1] += 1
              }
              if (li.roomId) {
                bindSum += 1
              }
              if (li.lockStatus == 1) {
                arr[2] += 1
                unlineList.push(li)
              } else if (li.lockStatus == 0) {
                arr[3] += 1
              }
              if (li.battery >= 0 && li.battery <= 15) {
                st[0] += 1
              } else if (li.battery > 15 && li.battery <= 60) {
                st[1] += 1
              } else if (li.battery > 60 && li.battery <= 100) {
                st[2] += 1
              }
            })
            this.Statistics.deviceSum = res.data.total
            this.Statistics.unlineSum = arr[1]
            this.Statistics.islineSum = arr[0]
            this.Statistics.openlook = arr[2]
            this.Statistics.closelook = arr[3]
            this.Statistics.bindingSum = bindSum
            this.Statistics.deviceBattery = st
            this.Statistics.lowElectricity = st[0]
            this.Statistics.unlineList = unlineList
            this.infoWindow.info.air = res.data.total
            this.drawLine()
            this.drawLine1()
            this.getalert()
          }
        })
      },
      handler({
        BMap,
        map
      }) {
        map.setMapStyle({
          style: "midnight"
        })
      },
      infoWindowClose(e) {
        this.infoWindow.show = false
      },
      infoWindowOpen(e) {
        this.infoWindow.show = true
      },
      lookDetail(data, target) {
        this.infoWindow.show = true;
        return
        this.infoWindow.info = data;
        this.activeName = data.name;
        //为弹窗口标题添加title
        this.$nextTick(() => {
          var win = document.querySelector(".BMap_bubble_title");
          win.title = this.activeName;
        })
        if (target == 'left') { //点击的是左侧列表项，则不需要滚动
          this.map.center = {
            lng: data.lng,
            lat: data.lat
          };
          this.map.zoom = 15;
          return;
        }
        //滚动到指定元素位置
        this.$nextTick(() => {
          var obj = document.querySelector(".active");
          var scrollTop = obj.offsetTop;
          this.$refs.box.scrollTop = scrollTop - 180;
        })
      },
      getReportList() {
        var data = {
          pageNum: 1,
          pageSize: 20,
          orderType: 'desc',
          orderBy: "createAt"
        }
        httpPostno(data, this.$api.getReportList).then(res => {
          if (res.success) {
            res.data.list.map(li => {
              li.createAt = moment(li.createAt).format('YYYY/MM/DD HH:mm:ss')
            })
            this.alarmList = res.data.list
          } else {
            this.$message.error(res.msg)
          }
        }).catch(error => {
          this.$message.error(error.msg)
        })
      },
      // 根据类型和指定天数范围获取报警记录
      getOrderReport() {
        // 设备报警
        var Statistics = this.Statistics
        this.Processed = Statistics.Processed
        this.openDoorlog = Statistics.openDoorlog
        this.closeDoorlog = Statistics.closeDoorlog
        this.fcDoorlog = Statistics.fcDoorlog
      },
      getalert() {
        var str1 = {
          day: 7
        }
        httpPostno(str1, this.$api.monitorReport).then(res => {
          if (res.success) {
            var dat = [0, 0, 0, 0, 0, 0, 0],
              dat1 = [0, 0, 0, 0, 0, 0, 0],
              dat2 = [0, 0, 0, 0, 0, 0, 0],
              dat3 = [0, 0, 0, 0, 0, 0, 0]
            var day8 = moment().subtract('days', 6).format('YYYY/MM/DD')
            var day7 = moment().subtract('days', 5).format('YYYY/MM/DD')
            var day6 = moment().subtract('days', 4).format('YYYY/MM/DD')
            var day5 = moment().subtract('days', 3).format('YYYY/MM/DD')
            var day4 = moment().subtract('days', 2).format('YYYY/MM/DD')
            var day3 = moment().subtract('days', 1).format('YYYY/MM/DD')
            var day2 = moment().subtract('days', 0).format('YYYY/MM/DD')
            var i = 0
            res.data.map(li => {
              if (li.code == 1) {
                if (li.order == day8) {
                  dat[0] += li.count
                } else if (li.order == day7) {
                  dat[1] += li.count
                } else if (li.order == day6) {
                  dat[2] += li.count
                } else if (li.order == day5) {
                  dat[3] += li.count
                } else if (li.order == day4) {
                  dat[4] += li.count
                } else if (li.order == day3) {
                  dat[5] += li.count
                } else if (li.order == day2) {
                  console.log(li)
                  dat[6] += li.count
                }
              } else if (li.code == 2) {
                if (li.order == day8) {
                  dat3[0] += li.count
                } else if (li.order == day7) {
                  dat3[1] += li.count
                } else if (li.order == day6) {
                  dat3[2] += li.count
                } else if (li.order == day5) {
                  dat3[3] += li.count
                } else if (li.order == day4) {
                  dat3[4] += li.count
                } else if (li.order == day3) {
                  dat3[5] += li.count
                } else if (li.order == day2) {
                  dat3[6] += li.count
                }
              } else if (li.code == 4) {
                if (li.order == day8) {
                  dat1[0] += li.count
                } else if (li.order == day7) {
                  dat1[1] += li.count
                } else if (li.order == day6) {
                  dat1[2] += li.count
                } else if (li.order == day5) {
                  dat1[3] += li.count
                } else if (li.order == day4) {
                  dat1[4] += li.count
                } else if (li.order == day3) {
                  dat1[5] += li.count
                } else if (li.order == day2) {
                  dat1[6] += li.count
                }
              } else if (li.code == 17) {
                if (li.order == day8) {
                  dat2[0] += li.count
                } else if (li.order == day7) {
                  dat2[1] += li.count
                } else if (li.order == day6) {
                  dat2[2] += li.count
                } else if (li.order == day5) {
                  dat2[3] += li.count
                } else if (li.order == day4) {
                  dat2[4] += li.count
                } else if (li.order == day3) {
                  dat2[5] += li.count
                } else if (li.order == day2) {
                  dat2[6] += li.count
                }
              }
            })
            var allertLog = {}
            this.openDoorlog = dat[6]
            this.closeDoorlog = dat2[6]
            this.fcDoorlog = dat1[6]
            this.LowElectricity = dat3[6]
            allertLog.openDoorlog = dat
            allertLog.closeDoorlog = dat2
            allertLog.fcDoorlog = dat1
            allertLog.LowElectricity = dat3
            let myChart = this.$echarts.init(this.$refs.myChart2)
            // 绘制图表
            var str = new Array(7)
            for (var i = 0; i < 7; i++) {
              str[i] = moment().subtract(i, 'days').format('MM月DD号')
            }
            myChart.setOption({
              tooltip: {
                trigger: 'item'
              },
              legend: {
                data: ['开门报警', '关门报警', '防拆报警', '低电报警'],
                left: '4%',
                // x:'left',
                top: '8%',
                textStyle: {
                  fontSize: 12,
                  color: '#F1F1F3'
                }
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  textStyle: {
                    color: "#fff"
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 1,
                    type: "solid"
                  }
                },
                data: [str[6], str[5], str[4], str[3], str[2], str[1], str[0]]
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  textStyle: {
                    color: "#fff"
                  },
                },
                axisLine: {
                  lineStyle: {
                    color: "rgba(219,225,255,1)",
                    width: 1,
                    type: "solid"
                  }
                },
              },
              series: [{
                name: "开门报警",
                data: [allertLog.openDoorlog[0], allertLog.openDoorlog[1],
                  allertLog.openDoorlog[
                    2], allertLog.openDoorlog[3], allertLog.openDoorlog[4],
                  allertLog.openDoorlog[5], allertLog.openDoorlog[6]
                ],
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
              }, {
                name: "关门报警",
                data: [allertLog.closeDoorlog[0], allertLog.closeDoorlog[1],
                  allertLog.closeDoorlog[2], allertLog.closeDoorlog[3],
                  allertLog.closeDoorlog[4], allertLog.closeDoorlog[5],
                  allertLog.closeDoorlog[6]
                ],
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
              }, {
                name: "防拆报警",
                data: [allertLog.fcDoorlog[0], allertLog.fcDoorlog[1], allertLog
                  .fcDoorlog[2],
                  allertLog.fcDoorlog[3], allertLog.fcDoorlog[4], allertLog
                  .fcDoorlog[5],
                  allertLog.fcDoorlog[6]
                ],
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
              }, {
                name: "低电报警",
                data: [allertLog.LowElectricity[0], allertLog.LowElectricity[1],
                  allertLog.LowElectricity[2],
                  allertLog.LowElectricity[3], allertLog.LowElectricity[4],
                  allertLog.LowElectricity[5],
                  allertLog.LowElectricity[6]
                ],
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
              }]
            });
          }
        })
      },
      drawLine2() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart2)
        // 绘制图表
        var str = new Array(7)
        for (var i = 0; i < 7; i++) {
          str[i] = moment().subtract(i, 'days').format('MM月DD号')
        }
        var allertLog = this.Statistics
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            data: ['开门报警', '关门报警', '防拆报警', '低电报警'],
            right: '10%',
            top: '8%',
            x: 'left',
            textStyle: {
              fontSize: 12,
              color: '#F1F1F3'
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0,
              rotate: 45,
              textStyle: {
                color: "#fff"
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 1,
                type: "solid"
              }
            },
            data: [str[6], str[5], str[4], str[3], str[2], str[1], str[0]]
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#fff"
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 1,
                type: "solid"
              }
            },
          },
          series: [{
            name: "开门报警",
            data: [allertLog.openDoorlog[0], allertLog.openDoorlog[1], allertLog.openDoorlog[
                2], allertLog.openDoorlog[3], allertLog.openDoorlog[4], allertLog
              .openDoorlog[5], allertLog.openDoorlog[6]
            ],
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }, {
            name: "关门报警",
            data: [allertLog.closeDoorlog[0], allertLog.closeDoorlog[1], allertLog
              .closeDoorlog[2], allertLog.closeDoorlog[3], allertLog.closeDoorlog[4],
              allertLog.closeDoorlog[5], allertLog.closeDoorlog[6]
            ],
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }, {
            name: "防拆报警",
            data: [allertLog.fcDoorlog[0], allertLog.fcDoorlog[1], allertLog.fcDoorlog[2],
              allertLog.fcDoorlog[3], allertLog.fcDoorlog[4], allertLog.fcDoorlog[5],
              allertLog.fcDoorlog[6]
            ],
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }, {
            name: "低电报警",
            data: [allertLog.fcDoorlog[0], allertLog.fcDoorlog[1], allertLog.fcDoorlog[2],
              allertLog.fcDoorlog[3], allertLog.fcDoorlog[4], allertLog.fcDoorlog[5],
              allertLog.fcDoorlog[6]
            ],
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
              focus: 'series'
            },
          }]
        });
      },
      // 统计设备总数和房间总数
      drawLine1() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart1)
        // 绘制图表
        var Statistics = this.Statistics
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [{
            name: '设备电量状态',
            type: 'pie',
            radius: '50%',
            data: [{
                value: Statistics.deviceBattery[0],
                name: '低电'
              },
              {
                value: Statistics.deviceBattery[1],
                name: '电量（15%-60%）'
              },
              {
                value: Statistics.deviceBattery[2],
                name: '电量（60%-100%）'
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(255, 255, 255, 0.5)'
              }
            }
          }]
        });
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(this.$refs.myChart)
        var Statistics = this.Statistics
        // 绘制图表
        myChart.setOption({
          title: {
            text: '',
            textAlign: 'center',
            x: 'center',
            y: 'center',
            textStyle: {
              color: '#ffffff' //字体颜色
            },

          },
          tooltip: {},
          xAxis: {
            data: ["项目总数", "设备总数", "已绑定数量", "在线数量", "离线数量", "低电数量", "门开数量", "门关数量"],
            axisLabel: {
              interval: 0,
              rotate: 45,
              textStyle: {
                color: "#fff",
                fontSize: 12
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 0.5,
                type: "solid"
              }
            }
          },
          legend: {
            textStyle: {
              color: "#fff"
            },
            show: false
          },
          yAxis: {
            name: '单位/个',
            axisLabel: {
              textStyle: {
                color: "#fff"
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(219,225,255,1)",
                width: 1,
                type: "solid"
              }
            }
          },
          series: [{
            name: '',
            type: 'bar',
            itemStyle: {
              barWidth: 10,
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'white',
                    fontSize: 10,
                  }
                }
              }
            },
            data: [{
              value: Statistics.projectSum,
              itemStyle: {
                color: '#00BFB4'
              }
            }, {
              value: Statistics.deviceSum,
              itemStyle: {
                color: '#32ECFF'
              }
            }, {
              value: Statistics.bindingSum,
              itemStyle: {
                color: '#EB55FF'
              }
            }, {
              value: Statistics.islineSum,
              itemStyle: {
                color: '#00BFB4'
              }
            }, {
              value: Statistics.unlineSum,
              itemStyle: {
                color: '#32ECFF'
              }
            }, {
              value: Statistics.lowElectricity,
              itemStyle: {
                color: '#EB55FF'
              }
            }, {
              value: Statistics.openlook,
              itemStyle: {
                color: '#00BFB4'
              }
            }, {
              value: Statistics.closelook,
              itemStyle: {
                color: '#32ECFF'
              }
            }]
          }]
        });
      }
    },
  }
</script>

<style scoped>
  .home {
    background-image: url(../../assets/img/pageBg.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
  }

  #amapDemo {
    position: fixed;
    left: 200px;
    top: 102px;
    width: 100%;
    height: calc(100vh - 102px);
    z-index: 1;
  }

  #amapDemo::before {
    content: ' ';
    background: rgba(0, 0, 0, .5);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
  }

  #myChart {
    /* position: absolute; */
    /* left: 3vw; */
    /* top: 5vw; */
    position: relative;
    z-index: 999;
    width: 100%;
    height: 17vw;
    background: url(../../assets/img/bgBox.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-sizing: border-box;
  }

  #myChart1 {
    /* top: 23vw; */
    /* position: absolute; */
    /* left: 3vw; */
    position: relative;
    z-index: 999;
    width: 100%;
    height: 20vw;
    background: url(../../assets/img/bgBox.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  #myChart::before {
    content: "设备安装统计";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1vw;
    text-shadow: 0 0 0.4em #18a29a, 0 0 0.4em #18a29a;
  }

  #myChart1::before {
    content: "设备电量统计";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1vw;
    text-shadow: 0 0 0.4em #18a29a, 0 0 0.4em #18a29a;
  }

  #myChart2 {
    position: relative;
    /* top: 23vw;
		right: 3vw; */
    z-index: 999;
    width: 100%;
    height: 20vw;
    background: url(../../assets/img/bgBox.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }

  #myChart2::before {
    content: "报警类型";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1vw;
    text-shadow: 0 0 0.4em #18a29a, 0 0 0.4em #18a29a;
  }

  .fault {
    position: relative;
    /* right: 3vw;
		top: 5vw; */
    z-index: 999;
    width: 100%;
    height: 17vw;
    background: url(../../assets/img/bgBox.png) no-repeat;
    background-position: center;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 1vw;
  }

  .fault::before {
    content: "报警记录统计";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 1vw;
    text-shadow: 0 0 0.4em #18a29a, 0 0 0.4em #18a29a;
  }

  .fault .imglist {
    margin: 2vw 0;
  }

  .fault .imglist .imgli {
    width: 50%;
  }

  .fault .imglist .imgli img {
    width: 5vw;
  }

  .fault .imglist,
  .fault .textlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
  }

  .fault .textlist .textli {
    width: 50%;
  }

  .fault .textlist .textli>div:first-child {
    color: #fff;
    text-shadow: 0 0 0.4em #18a29a, 0 0 0.4em #18a29a;
    font-size: 1vw;
    line-height: 2vw;
  }

  .fault .textlist .textli .red {
    color: #e83b03;
    font-size: 0.8vw;
  }

  .fault .textlist .textli .orange {
    color: #ff9424;
    font-size: 0.8vw;
  }

  .fault1 {
    /* top: 23vw;
		left: 28.5vw; */
    width: calc(100% - 0.8vw);
    margin: 0 0.4vw;
    height: 20vw;
  }

  .fault1::before {
    content: '最近报警设备';
  }

  .table {
    width: 100%;
    padding: 2%;
  }

  .tablexontent {
    width: 100%;
    background: transparent;
    border: 1px solid #18a29a;
  }

  .rowtitle {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
  }

  .rowtitle th {
    border-right: 1px solid #18a29a;
    border-bottom: 1px solid #18a29a;
    width: 33.33%;
    color: rgb(255, 255, 255);
    text-shadow: rgb(24 162 154) 0px 0px 0.4em, rgb(24 162 154) 0px 0px 0.4em;
    font-weight: 400;
    background: transparent;
    padding: 3px;
  }

  .rowtitle th:last-child {
    border-right: none;
  }

  .alarm {
    height: 13.5vw;
    overflow: auto;
    width: 100%;
  }

  .alarm tr {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    box-sizing: border-box;
  }

  .alarm th {
    border-right: 1px solid #18a29a;
    border-bottom: 1px solid #18a29a;
    width: 33.33%;
    color: rgb(255, 255, 255);
    text-shadow: rgb(24 162 154) 0px 0px 0.4em, rgb(24 162 154) 0px 0px 0.4em;
    font-weight: 400;
    font-size: 0.5vw;
    background: transparent;
    padding: 3px;
  }

  .alarm th:last-child {
    border-right: none;
  }

  .alarm::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 1px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .alarm::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #18a29a;
  }

  .alarm::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }

  .mapcontent {
    position: relative;
    border: 1px solid #158883;
    overflow: hidden;
    width: calc(100% - 0.8vw);
    height: calc(100% - 0.4vw);
    margin: 0 0.4vw;
    /* right: 28.2vw;
		top: 5.5vw; */
  }

  .item {
    position: absolute;
    z-index: 1000;
    right: 1vw;
    top: 2.5vw;
    cursor: pointer;
  }

  .alertimg {
    width: 4vw;
    animation: myfirst 3s linear infinite;
  }

  @keyframes myfirst {
    0% {
      transform: scale(0.9);
    }

    50% {
      transform: scale(1.1);
    }

    100% {
      transform: scale(1);
    }
  }

  .flexcolum {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 2vw 1vw 1vw;
    box-sizing: border-box;
  }

  .columdiv {
    align-items: self-end;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    margin-top: 2vh;
  }
  .columdiv1{
    grid-template-columns: 2fr 2fr;
  }
  .voice {
    position: fixed;
    top: -100%;
    left: -100%;
    opacity: 0;
  }

  .voiceimg img {
    width: 1.5vw;
    vertical-align: middle;
    cursor: pointer;
  }
  .selectoptions{
    position: absolute;
    top: .3rem;
    right: .2rem;
    width: 1.5rem;
    z-index: 999;
  }
  .selectoptions >>> input{
    background: transparent;
    color: #fff;
  }
</style>
