<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="submit">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="年月">
              <a-month-picker v-model="queryParams.date1" placeholder="选择年月" style="width:100%;" value-format="yyyy-MM"></a-month-picker>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="submit" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- <a-form :inline="true" class="demo-form-inline">
      <a-form-item label="年月">
        <j-date
          v-model="queryParams.date1"
          placeholder="选择年月">
        </j-date>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="submit">查询</a-button>
      </a-form-item>
    </a-form> -->
    <!-- 报警对比图 -->
    <div class="area-comp">
      <!-- 上 -->
      <div class="left-contianer">
        <div class="common-container top">
          <div class="common-title">报警统计</div>
          <div class="common-box box">
            <div class="num-box">
              <div class="num">{{alarmStatistics.month}}</div>
              <div class="text">当月报警数</div>
            </div>
            <div class="num-box">
              <div class="num">{{alarmStatistics.year}}</div>
              <div class="text">当年报警数</div>
            </div>
          </div>
        </div>
        <div class="common-container center">
          <div class="common-title">信息统计</div>
          <div class="common-box box">
            <div class="num-box" v-for="(item, index) in chartinfo.levelStatistics" :key="index">
              <div class="num">{{item.howManyTimes}}</div>
              <div class="text">{{item.equipmentname}}</div>
            </div>
          </div>
        </div>
        <div class="common-container ranking">
          <div class="common-title">报警排名</div>
          <div class="common-box2" ref="rankingChart" />
        </div>
      </div>
      <div class="right-container">
        <div class="top">
          <div class="common-container top-zhe">
            <div class="common-title">近两年报警对比图</div>
            <div class="common-box" ref="duibiChart" />
          </div>
          <div class="common-container top-bing">
            <div class="common-title">报警类型占比</div>
            <div class="common-box" ref="bingChart" />
          </div>
        </div>
        <div class="common-container bottom">
          <div class="common-title">报警趋势散点图</div>
          <div class="common-box" ref="qushiChart" />
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import * as echarts from 'echarts';
import { comp } from '@/api/api'
import { postAction, getAction } from '@/api/manage'

export default {
  name: 'alarmScreen',
  data () {
    return {
      // 选择器参数接收
      options: [],
      // 返回的图表数据
      chartinfo: [],
      year: '',
      month: '',
      props: { multiple: true, value: "id", label: "label" },
      // 查询参数
      queryParams: {
        date1: '',
        list:[]
      },
      alarmType: [],
      alarmTypeNum: [],
      alarmStatistics: {
        month: 0,
        year: 0,
      },
    }
  },
  created () {
    this.getYearMonth();
  },
  mounted () {
    // echarts自适应
    window.addEventListener("resize", () =>{
      this.myChart1.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
    });
    this.$nextTick(() => {
    })
  },
  methods: {
    formatYearMonth(year, month){
      return `${year.toString().padStart(4, '0')}-${month.toString().padStart(2, '0')}`;
    },
    getYearMonth() {
      const currentYear = new Date().getFullYear();
      const currentMonth = new Date().getMonth() + 1;
      const yearMonth = this.formatYearMonth(currentYear, currentMonth);
      this.queryParams.date1 = yearMonth
      this.getList();
      // 第一版
      // yeamonth().then(response => {
      //   this.queryParams.date1 = response.msg;
      //   this.getList();
      // });
      // 第二版
      // getAction(`/alarm/statistics/yeamonth`).then(response=>{
      //   this.queryParams.date1 = response.msg;
      //   // this.getList();
      // })
    },
    // 查询
    submit() {
      if (this.queryParams.date1.length == 0) {
        this.$message({
          message: "请先选择年月",
          type: "warning",
        });
        this.option;
        return false;
      }
      console.log(this.queryParams)
      this.isShow = false;
      this.getList();
    },
    // 获得数据
    getList(){
      this.listLoading = true;
      const newArr = [1,2];
      let param = {
        ids: newArr,
        yearmonth: this.queryParams.date1
      };
      postAction(`/tpmMessageAlarm/tpmMessageAlarm/getalarminfo`,param).then(response=>{
        console.log(66,response)
        this.chartinfo = response.result;

        // 报警类型
        this.alarmType = [];
        this.alarmTypeNum = [];
        for (let i in this.chartinfo.alarmType){
          this.alarmType.push(this.chartinfo.alarmType[i].equipmentname);
          this.alarmTypeNum.push(0);
        }

        // 报警统计
        for (let i in this.chartinfo.alarmStatistics) {
          if (this.chartinfo.alarmStatistics[i].type == "year") {
            this.alarmStatistics.year = this.chartinfo.alarmStatistics[i].howManyTimes;
          }
          else {
            this.alarmStatistics.month = this.chartinfo.alarmStatistics[i].howManyTimes;
          }
        }

        // 图表展示
        this.initRankingChart()
        this.initDuibiChartChart()
        this.initBingChart()
        this.intiQushiChart()
      })
    },
    // 报警排名
    initRankingChart(){
      this.myChart1 = echarts.init(this.$refs.rankingChart)
      var option;
      for (let j in this.alarmType) {
        for (let i in this.chartinfo.alarmRank) {
          if (this.alarmType[j] == this.chartinfo.alarmRank[i].equipmentname){
            this.alarmTypeNum[j] = this.chartinfo.alarmRank[i].howManyTimes;
          }
        }
      }
      option = {
        grid: {
          left: "2%",
          right: "2%",
          bottom: "0",
          top: "2%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0].name +
              "<br/>" +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              params[0].seriesName +
              " : " + params[0].value +
              " 次<br/>"
            );
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#333",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.alarmType,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#333",
                fontSize: "12",
              },
              formatter: function (value) {
                  return (value).toLocaleString() + "次";
              },
            },
            data: this.alarmTypeNum,
          },
        ],
        series: [
          {
            name: "报警",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "rgb(92,141,253,1)",
                    // color: "rgb(57,89,255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgb(50,189,209,1)",
                    // color: "rgb(46,200,207,1)",
                  },
                ]),
              },
            },
            barWidth: 20,
            data: this.alarmTypeNum,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            // data: [50, 50, 50, 50, 50, 50, 50, 50, 50, 50],
            itemStyle: {
              normal: {
                color: "#eee",
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
      option && this.myChart1.setOption(option);
    },
    // 近两年报警对比图
    initDuibiChartChart(){
      this.myChart2 = echarts.init(this.$refs.duibiChart)
      var option;

      // Generate data
      var lastData =[];
      var nowData = [];
      var allData = [];
      for (let j in this.alarmType) {
        lastData.push(0)
        nowData.push(0)
        allData.push(0)
        for (let i in this.chartinfo.alarmTwoYear) {
          if (this.chartinfo.alarmTwoYear[i].type == "lastyear" &&
            this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
            lastData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
          }
          else if (this.chartinfo.alarmTwoYear[i].type == "thisyear" &&
            this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
            nowData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
          }
          else if (this.chartinfo.alarmTwoYear[i].type == "all" &&
            this.chartinfo.alarmTwoYear[i].equipmentname == this.alarmType[j]) {
            allData[j] = this.chartinfo.alarmTwoYear[i].howManyTimes;
          }
        }
      }
      // option
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        grid: {
          left: "6%",
          right: "6%",
          bottom: "2%",
          top: "25%",
          containLabel: true,
        },
        legend: {
          data: ["去年", "今年", "总量"],
          textStyle: {
            color: "#B4B4B4",
          },
          top: "7%",
        },
        xAxis: {
          data: this.alarmType,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4",
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          }
        ],

        series: [
          {
            name: "总量",
            type: "line",
            smooth: true,
            // showAllSymbol: true,
            // symbol: "emptyCircle",
            symbolSize: 8,
            // itemStyle: {
            //   normal: {
            //     color: "#2EC6D0",
            //   },
            // },

            // showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 6,
            lineStyle: {
              normal: {
                color: "#8FB3F3", // 线条颜色
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#8FB3F3",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(192,208,248,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(163,186,229, .1)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(220,226,255,.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },

            data: allData,
          },

          {
            name: "今年",
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                // barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgb(97,114,237)" },
                  { offset: 1, color: "rgb(143,210,252)" },
                ]),
              },
            },
            data: nowData,
          },

          {
            name: "去年",
            type: "bar",
            barGap: "-100%",
            barWidth: 20,
            itemStyle: {
              normal: {
                // barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(199,207,253,0.7)" },
                  { offset: 0.2, color: "rgba(199,207,253,0.5)" },
                  { offset: 1, color: "rgba(199,207,253,0.2)" },
                ]),
              },
            },
            z: -12,

            data: lastData,
          },
        ],
      };


      option && this.myChart2.setOption(option);
    },
    // 报警类型占比
    initBingChart(){
      this.myChart3 = echarts.init(this.$refs.bingChart)
      var option;

      var m2R2Data = [];
      var allnum = 0;
      for (let i in this.chartinfo.typeRatio) {
        allnum += this.chartinfo.typeRatio[i].howManyTimes;
        m2R2Data.push({
          value: this.chartinfo.typeRatio[i].howManyTimes,
          legendname: this.chartinfo.typeRatio[i].equipmentname,
          name: this.chartinfo.typeRatio[i].equipmentname,
          // itemStyle: { color: "#8d7fec" },
        });
      }

      option = {
        title: [
          {
            text: "合计",
            subtext: allnum + "个",
            textStyle: {
              fontSize: 16,
              color: "#bbb",
            },
            subtextStyle: {
              fontSize: 12,
              color: "#333",
            },
            textAlign: "center",
            x: "34.5%",
            y: "44%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "70%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "#8C8C8C",
          },
          height: 150,
        },
        series: [
          {
            name: "标题",
            type: "pie",
            center: ["35%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.legendname;
                },
              },
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 30,
                smooth: true,
              },
            },
            data: m2R2Data,
          },
        ],
      };


      option && this.myChart3.setOption(option);
    },
    // 获取最后一天
    getLastDay(year,month){
      var new_year = year;
      var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）
      if(month>12){//如果当前大于12月，则年份转到下一年
          new_month -=12;//月份减
          new_year++;//年份增
      }
      // 取当年当月对应的下个月的前一天，即当前月的最后一天
      var last_date = new Date(new_year,new_month,0).getDate();
      return last_date;
    },
    // 日期加/减几天
    getNewDayAdd(dateTemp, day) {
      dateTemp=new Date(dateTemp);
      dateTemp=+dateTemp +1000*60*60*24*day;
      dateTemp=new Date(dateTemp);
      return dateTemp.getFullYear()+"-"+(dateTemp.getMonth()+1)+"-"+dateTemp.getDate();
    },
    // 获取起止日期之间的所有日期
    getdifflist(){
      var resultTime = [];     // dateArray 起止日期中间的所有日期列表
      // 必须减几天啊，不然第一天的显示不出来
      var start = new Date(this.getNewDayAdd(this.queryParams.date1 + "-01", -1));    //起止日期
      var year = parseInt(this.queryParams.date1.substring(0, 4));
      var month = parseInt(this.queryParams.date1.substring(5,7));
      var endday = this.getLastDay(year, month);
      // 必须加几天啊，不然最后一天的显示不出来
      var end = new Date(this.getNewDayAdd(this.queryParams.date1 + "-" + endday, 1));       //截止日期
      //开始日期小于等于结束日期,并循环
      // 当 开始时间小于结束时间的时候进入循环
      while (start <= end) {
        let getDay = start.getDate()
        // 月份需要加 1
        let getMonth = start.getMonth() + 1
        let getYear = start.getFullYear()
        /**
         * 拼接时间格式
         * (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) 自动给 小于10的时间前面补0
         */
        let setTime =
            `${getYear}-` +
            (getMonth >= 10 ? `${getMonth}` : `0${getMonth}`) +
            '-' +
            (getDay >= 10 ? `${getDay}` : `0${getDay}`)

        resultTime.push(setTime)
        /**
         * 重新设置开始时间
         * 使用 setFullYear() 方法会自动将时间累加，返回的是时间戳格式
         * 使用 new Date() 将时间重新设置为标准时间
         * getMonth - 1 将月份时间重新还原
         */
        start = new Date(start.setFullYear(getYear, getMonth - 1, getDay + 1))
      }
      return resultTime;
    },
    // 报警趋势散点图
    intiQushiChart(){
      this.myChart4 = echarts.init(this.$refs.qushiChart)
      var option;

      const schema = [
        { name: 'date', index: 2, text: '日' },
        { name: 'num', index: 1, text: '报警数量' }
      ];
      const itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0,0,0,0.3)'
      };

      var dates = this.getdifflist();
      var series1 = []
      for (let i in this.alarmType) {
        var data1 = [];
        var cycle1 = 0;
        for (let t in dates) {
          data1.push([cycle1 + 1, 0, dates[t]]);

          for (let v in this.chartinfo.alarmScatter) {
            if (this.chartinfo.alarmScatter[v].equipmentname == this.alarmType[i] &&
              this.chartinfo.alarmScatter[v].day == dates[t]) {
              data1[cycle1] = [cycle1 + 1, this.chartinfo.alarmScatter[v].howManyTimes, dates[t]];
            }
          }
          cycle1++;
        }
        series1.push({
          name: this.alarmType[i],
          type: 'scatter',
          symbolSize: function (val) { // 原来根据数据来确定气泡大小，改成除了数量为0气泡大小为0，其它都是30的大小
            return val[1] == 0 ? 0 :20;
          },
          itemStyle: itemStyle,
          // symbolSize: function(value) {
          //   return value / 10;
          // },
          data: data1
        });
      }
      option = {
        // color: ['#638FF5', '#3FAEDF', '#DBE0FE'],
        legend: {
          top: 10,
          data: this.alarmType,
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: '10%',
          right: 150,
          top: '20%',
          bottom: '10%'
        },
        tooltip: {
          formatter: function (param) {
            var value = param.value;
            // prettier-ignore
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                      + param.seriesName + ' ' + value[2]
                      + '</div>'
                      + schema[1].text + ':' + value[1] + '<br>';
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          }
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates
        },
        yAxis: {
          type: 'value',
          name: '报警数量',
          nameLocation: 'end',
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16
          },
          splitLine: {
            show: false
          }
        },
        // visualMap: [
        //   {
        //     left: 'right',
        //     top: '10%',
        //     dimension: 2,
        //     min: 0,
        //     max: 500,
        //     itemWidth: 30,
        //     itemHeight: 120,
        //     calculable: true,
        //     precision: 0.1,
        //     text: ['报警数量'],
        //     textGap: 30,
        //     inRange: {
        //       // symbolSize: [5, 50]
        //     },
        //     outOfRange: {
        //       // symbolSize: [5, 50],
        //       color: ['rgba(255,255,255,0.4)']
        //     },
        //     controller: {
        //       inRange: {
        //         color: ['#5085F2']
        //       },
        //       outOfRange: {
        //         color: ['#999']
        //       }
        //     }
        //   },
        // ],
        series: series1
      };

      option && this.myChart4.setOption(option,true);
    }
  }
}
</script>

<style lang="less" scoped>
.common-container{
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(62, 90, 119, 0.2);
  padding: 13px 20px;
  .common-title{
    border-bottom: 1px solid #ccc;
    padding: 10px;
  }
  .common-box{
    width: 100%;
    height: calc(100% - 40px);
  }
  .common-box2{
    width: 100%;
    height: calc(100% - 129.5px);
  }
}
.area-comp{
  height: calc(100vh - 84px);
  background-color: #F0F7FD;
  // overflow: auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  .left-contianer{
    // height: 500px;
    width: 320px;
    // flex: 2.2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top{
      background-image: linear-gradient(150deg, #5EB3F7, #6680F4);
      color: #fff;
    }
    .box{
      display: flex;
      justify-content: space-around;
    }
    .num-box{
      padding: 10px 8px;
      text-align: center;
      .num{
        font-weight: bolder;
        font-size: 24px;

      }
      .text{
        margin-top: 12px;
        font-size: 14px;
      }
    }
    .center{
      margin-top: 12px;
      .num-box{
        padding: 10px 0 10px 0;
      }
      .num{
        background-image: linear-gradient(150deg, #5EB3F7, #6680F4);
        background-clip:text;
        -webkit-background-clip:text;
        color: transparent;
      }
    }
    .ranking{
      flex: 1;
      width: 100%;
      // height: 500px;
      margin-top: 10px;
      box-sizing: border-box;
    }
  }
  .right-container{
    flex: 1;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top{
      flex: 1;
      display: flex;
      justify-content: space-between;
      .top-bing{
        flex: 1;
        margin-left: 12px;
      }
      .top-zhe{
        flex: 2;
      }
    }
    .bottom{
      flex: 1.6;
      margin-top: 12px;
    }
  }
}
</style>
