<template>
  <div class="content1">
    <el-row :gutter="20" class="elrow">
      <el-col :span="4" v-for="(item,index) in statisticalParameters" class="mrBottom20" :key="index">
        <el-card shadow="always" :body-style="{padding:'0px'}" class="caredradious">
          <div class="grid-content grid-con-1">
            <div class="colposition">
              <div class="grid-cont-right">
                <div>{{item.title}}</div>
                <div class="grid-num">{{item.num}} <span>{{item.company}}</span></div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="elrow">
      <el-col :span="12">
        <el-card shadow="hover">
          <Echart :options="options" class="schart" width="100%" height="18vw"></Echart>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <Echart :options="options2" class="schart" width="100%" height="18vw"></Echart>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // import Schart from "vue-schart";
  // import scrollvue from "../components/scrollvue"
  import RequestSet from "../../api/allFun.js"
  import Echart from "@/common/echart";
  import scrolllist from "@/components/scrolllist/index.vue"
  export default {
    name: "dashboard",
    data() {
      return {
        statisticalParameters: [{
            title: '设备总数',
            num: '0',
            company: '个'
          },
          {
            title: '在线设备',
            num: '0',
            company: '个'
          },
          {
            title: '离线设备',
            num: '0',
            company: '个'
          },
          {
            title: '异常设备',
            num: '0',
            company: '个'
          },
          {
            title: '红外报警次数',
            num: '0',
            company: '个'
          }
        ],
        animate: false,
        name: localStorage.getItem("ms_username"),
        options: {
          title: {
            text: '红外一周报警情况'
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#91cc75', '#ee6666'],
          legend: {
            data: ['', ''],
            textStyle: "#333"
          },
          textStyle: {
            color: "#333"
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
              textStyle: {
                color: "#666",
                margin: 15
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#666",
                margin: 15
              },
            },
          },
          series: [
            {
              name: '',
              type: 'line',
              // stack: 'Total',
              data: [0, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
        options2: {
          title: {
            text: '电量分布情况'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center',
            textStyle: {
              color: "#666"
            }
          },
          series: [{
            name: '电量情况',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center',
              color: "#666"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              // show: false,
              normal: {
                length: 15, // 指示线长度
                lineStyle: {
                  color: "#595959" // 指示线颜色
                }
              },
            },
            data: [{
                value: 0,
                name: '0-20%'
              },
              {
                value: 0,
                name: '20%-40%'
              },
              {
                value: 0,
                name: '40%-60%'
              },
              {
                value: 0,
                name: '60%-80%'
              },
              {
                value: 0,
                name: '80%-100%'
              }
            ]
          }]
        },
        options3: {
          title: {
            text: '设备电量统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          color: ['#fac858', '#91cc75', '#ee6666'],
          legend: {
            data: ['OTA未升级', 'OTA已升级', '低电设备'],
            textStyle: "#333"
          },
          textStyle: {
            color: "#333"
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisLabel: {
              textStyle: {
                color: "#666",
                margin: 15
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: "#666",
                margin: 15
              },
            },
          },
          series: [{
              name: 'OTA未升级',
              type: 'line',
              // stack: 'center',
              data: [10, 11, 5, 6, 23, 25, 32]
            },
            {
              name: 'OTA已升级',
              type: 'line',
              // stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '低电设备',
              type: 'line',
              // stack: 'bottom',
              data: [0, 1, 0, 0, 0, 0, 0]
            }
          ]
        },
        items: [],
        alertTypeList:[],
        timerinf:null
      };
    },
    components: {
      Echart,
      scrolllist
      // Schart,
      // scrollvue
    },
    beforeDestroy() {
      window.clearInterval(this.timerinf)
      this.timerinf = null
    },
    created() {
      this.alertTypeList = this.$MANUFACTURER.alertType.humanMotionSensorLog
    },
    mounted() {
      this.getAnalysis()
      this.timerinf = window.setInterval(() => {
        setTimeout(this.getlog, 0)
      }, 4000)
      // setInterval(this.scroll, 1000);
    },
    methods: {
      getlog() {
        var data = {
          deviceType: 6
        }
        RequestSet.getWarningLog(data, (callback) => {
          if (callback.success) {
            callback.data.list.map((li,index)=>{
              li['alertTypeDesc']=''
              var alertTypeDesc=this.alertTypeList.filter(item=>item.code==li.alertType)[0]
              if(alertTypeDesc){
                li['alertTypeDesc']=alertTypeDesc.desc
              }else{
                li['alertTypeDesc']=''
              }
              var resultStatus = RequestSet.judgmentTimestamp(li.alertTime)
              if (resultStatus) {
                setTimeout(() => {
                  this.$notify({
                    title: li.alertTypeDesc,
                    offset: 200,
                    duration: 2000,
                    message:  li.alertTypeDesc,
                    type: 'warning'
                  });
                },3000)
              } else {

              }
            })
          }
        })
      },
      getAnalysis() {
        RequestSet.getAnalysis("", 6, (callback) => {
          this.statisticalParameters[0].num=callback.total || 0
          this.statisticalParameters[1].num=callback.onlineTotal || 0
          this.statisticalParameters[2].num=callback.offlineTotal || 0
          this.statisticalParameters[3].num=callback.abnormalTotal || 0
          this.setOptionsData(callback)
        })
        RequestSet.getAlertTypeOrder('',6,(callback) => {
          if(callback.success){
            if(callback.data.length>0){
                var days = RequestSet.classification()
                var array = RequestSet.groupBy(callback.data, ["code", "order"], function(cul, data) {
                  return cul + 1
                })
                var loopObjectData = RequestSet.loopObject(array,this.alertTypeList)
                var legendData=[]
                loopObjectData.map(li=>{
                  legendData.push(li.name)
                })
                this.options.series=loopObjectData
                this.options.legend.data=legendData
                this.options.xAxis.data=days
            }
          }else{
            this.$message.error(callback.message)
          }
        })
      },
      setOptionsData(data){
        let options2=this.options2
        options2.series[0].data[0].value=data.batteryLevel1
        options2.series[0].data[1].value=data.batteryLevel2
        options2.series[0].data[2].value=data.batteryLevel3
        options2.series[0].data[3].value=data.batteryLevel4
        options2.series[0].data[4].value=data.batteryLevel5
      },
      tgces() {
        this.$router.push({
          path: "/test",
        });
      },
      scroll() {
        this.animate = true; // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
        setTimeout(() => {
          //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
          this.tableData.push(this.tableData[0]); // 将数组的第一个元素添加到数组的
          this.tableData.shift(); //删除数组的第一个元素
          this.animate = false; // margin-top 为0 的时候取消过渡动画，实现无缝滚动
        }, 500);
      },
      changeDate() {
        const now = new Date().getTime();
        this.data.forEach((item, index) => {
          const date = new Date(now - (6 - index) * 86400000);
          item.name = `${date.getFullYear()}/${
          date.getMonth() + 1
        }/${date.getDate()}`;
        });
      },
    },
  };
</script>

<style scoped>
  .elrow {
    margin-bottom: 20px;
  }

  .caredradious {
    border-radius: 10px;
    cursor: pointer;
  }

  .grid-content {
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    height: 120px;
    overflow: hidden;
  }

  /* 加的 */
  .colposition {
    display: flex;
    align-items: center;
    /* height: 85%; */
    position: relative;
    box-sizing: border-box;
    /* margin: 10px; */
    padding: 0 10px;
    border: 2px solid hsla(0, 0%, 100%, 0.2);
    width: 100%;
  }

  /* .el-carousel .el-carousel__item{height: 40px;line-height: 40px;} */
  .grid-cont-right {
    flex: 1;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 18px;
    line-height: 40px;
    color: #444;
  }

  .grid-num {
    font-size: 32px;
    font-weight: bold;
  }

  .grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
  }

  .grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
  }

  .grid-con-1 .grid-num {
    /* color: rgb(45, 140, 240); */
    color: #666;
    font-weight: bold;
    line-height: 50px;
    font-size: 32px;
  }

  .grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
  }

  .grid-con-2 .grid-num {
    /* color: rgb(45, 140, 240); */
    color: #fff;
  }

  .grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
  }

  .grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
  }

  .user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
  }

  .user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }

  .user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
  }

  .user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
  }

  .user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
  }

  .user-info-list span {
    margin-left: 70px;
  }

  .mgb20 {
    margin-bottom: 20px;
  }

  .imgbg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .todo-item {
    font-size: 14px;
  }

  .grid-num>span {
    font-size: 16px;
    font-weight: 500;
  }

  .todo-item-del {
    text-decoration: line-through;
    color: #999;
  }

  .schart {
    width: 100%;
    height: 300px;
  }

  .blkmqx {
    display: block;
    cursor: pointer;
  }

  .blkmqx .w100 {
    display: block;
    margin: 0 auto;
    width: 20%;
  }

  .blkmqx .grid-cont-right {
    color: #333;
    text-align: center;
    margin: 8px 0 3px;
  }

  .blkmqx .grid-num {
    color: #888;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
  }

  /*轮翻消息*/
  .el-card__body {
    box-sizing: border-box;
  }

  .elTitle {
    font-weight: 600;
    color: #666;
    text-align: center;
    margin-bottom: 10px;
  }

  .bs-sysMsg {
    height: 228px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    position: relative;
  }

  .bs-sysMsg span {
    width: 20%;
    display: inline-block;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    vertical-align: middle;
  }

  .bs-sysMsg span:nth-child(1) {
    font-size: 12px;
    width: 35%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .msg__content {
    height: auto;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .elth {
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f3;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .elth span {
    width: 14%;
    text-align: center;
    display: inline-block;
  }

  .elth span:first-child {
    width: 58%;
  }

  .elthsecond span {
    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  ::-webkit-scrollbar {
    display: none !important;
  }

  .animate {
    transition: all 1s;
    top: -30px;
  }
  .mrBottom20{margin-bottom: 20px;}
</style>
