<template>
  <div class="fullHeight">
    <vue-scroll>
      <div class="top whiteBlock">
        <div class="blockInner">
          <div class="pageTitle">
            {{ $t("message.firmEnviron.equipmentGeneralSituation") }}
          </div>
          <div class="chart devStatusChart" ref="devStatusChart"></div>
          <div class="chart" ref="devAlarmChart"></div>
          <div class="chart realTimeChart" ref="realTimeChart"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="whiteBlock">
          <div class="blockInner">
<!--            历史报警概况-->
            <div class="pageTitle">
              {{ $t("message.firmEnviron.overviewOfHistoricalAlarm") }}
            </div>
            <div class="dateBox">
              <span
                :class="{ active: dateType == 1 }"
                @click="
                  dateType = 1;
                  selectHistoryEnvironmentAlarmList();
                "
                >{{ $t("message.firmEnviron.nearlyWeek") }}</span>
              <span
                :class="{ active: dateType == 2 }"
                @click="
                  dateType = 2;
                  selectHistoryEnvironmentAlarmList();
                "
                >{{ $t("message.firmEnviron.inRecentMonth") }}</span
              >
            </div>
            <div class="chart" ref="historyAlarmChart"></div>
          </div>
        </div>
        <div class="whiteBlock">
          <div class="blockInner">
            <div class="pageTitle">
              {{
                $t(
                  "message.firmEnviron.environmentalEquipmentInstallationOverview"
                )
              }}
            </div>
            <div class="chart" ref="installChart"></div>
          </div>
        </div>
      </div>
    </vue-scroll>
  </div>
</template>
<script>
import echarts from 'echarts4';;
import {
  selectEnvironmentDevStatisticsApi,
  selectHistoryEnvironmentAlarmListApi,
} from "@/assets/js/api/company/project";
export default {
  data() {
    return {
      backArr: [],
      searchsn: "",
      dateType: 1,
      color: ["#5181F6", "#00DBB6", "#F67F51", "#731cd6", "#ffc44c", "#2ccded"],
      color2: ["#4378D8", "#1AA388", "#BC5D12", "#B74F8F", "#731cd6", "#ffc44c","#2ccded"],
      company:'',
    };
  },
  mounted() {
    this.company = COMPANY;
    this.initData();
    // this.createDevStatusChart();
    // this.createInstallChart();
    // this.createdAgeCharts();
    // this.createRealTimeChart();
  },
  methods: {
    initData() {
      this.backArr = this.$store.state.mapBackArr;
        console.log(this.backArr);
        // 
      if (this.backArr.length > 0) {
        this.searchsn = this.backArr[this.backArr.length - 1].sn;
      } else {
        switch (this.$store.state.userInfo.accountType) {
          case 2:
            this.searchsn = this.$store.state.userInfo.headquartersSn;
            break;
          case 3:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
          case 4:
            this.searchsn = this.$store.state.userInfo.sn;
            break;
        }
      }

      this.selectHistoryEnvironmentAlarmList();
      this.selectEnvironmentDevStatistics();
    },

    selectHistoryEnvironmentAlarmList() {
      selectHistoryEnvironmentAlarmListApi({
        sn: this.searchsn,
        dateType: this.dateType,
      }).then((res) => {
        var list = res.result.list;
          console.log(this.searchsn);
          console.log(this.dateType);
          console.log(list);
        var seriesData = [],
          xData = [];
        const hexToRgba = (hex, opacity) => {
          let rgbaColor = "";
          let reg = /^#[\da-f]{6}$/i;
          if (reg.test(hex)) {
            rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
              "0x" + hex.slice(3, 5)
            )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
          }
          return rgbaColor;
        };
        list.forEach((element, index) => {
          var alarmArr = element.list;
          var yData = [];
          xData = [];
          alarmArr.forEach((element2) => {
            xData.push(element2.titleTime);
            yData.push(element2.num);
          });
          seriesData.push({
            name: element.name,
            type: "line",
            smooth: true,
            // showSymbol: false,/
            symbolSize: 10,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: this.color[index],
                shadowBlur: 3,
                shadowColor: hexToRgba(this.color[index], 0.76),
                shadowOffsetY: 8,
              },
            },
            data: yData,
          });
        });
        this.createHistoryAlarmChart(xData, seriesData);
      });
    },
    selectEnvironmentDevStatistics() {
      selectEnvironmentDevStatisticsApi({ sn: this.searchsn }).then((res) => {
        var devList = res.result.devList;
        var alarmTotal = res.result.alarmTotal;
        var alarmList = res.result.alarmList;
        var xData = [],
          yData1 = [],
          yData2 = [],
          yData3 = [];
        devList.forEach((element) => {
          xData.push(element.name);
          yData1.push(element.devOnline);
          yData2.push(element.devNotOnline);
          yData3.push(element.totalDev);
        });
        this.createDevStatusChart(xData, yData1, yData2);
        this.createInstallChart(xData, yData3);

        var xData2 = [],
          yData4 = [],
          yData5 = [],
          yData6 = [];
        alarmList.forEach((element) => {
          xData2.push(element.name);
          yData4.push(element.noiseNum);
          yData5.push(element.pm25Num);
          yData6.push(element.pm10Num);
        });
        this.createdAgeCharts(xData2, yData4, yData5, yData6);
        this.createRealTimeChart(alarmTotal);
      });
    },
    createRealTimeChart(alarmTotal) {
      let that = this;
      let monitor = echarts.init(this.$refs.realTimeChart);
      // monitor.clear();
      var option = {
        color: that.company=='longguang'?["#4378D8", "#1AA388", "#BC5D12"]:["#5181F6", "#61D2B9", "#F67F51"],
        title: {
          show: true,
          text: alarmTotal.totalAlarm,
          x: "49%",
          y: "40%",
          z: 8,
          textAlign: "center",
          textStyle: {
            color: this.$store.state.chartOptions.labelColor,
            fontSize: 30,
          },
          subtext: that.$t("message.firmEnviron.realTimeTotalNumber"),
          subtextStyle: {
            color: "#9fa2ad",
            fontSize: 14,
          },
        },
        grid: {
          bottom: 40,
        },
        legend: {
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#9fa2ad",
            fontSize: 12,
          },
          borderRadius: 4,
          bottom: 15,
          left: "center",
        },
        tooltip: {
          // data: ['在线', '离线'],
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        series: [
          {
            name: that.$t("message.firmEnviron.realTimeStatistic"),
            type: "pie",
            radius: ["50%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: alarmTotal.noiseNum,
                name: that.$t("message.firmEnviron.noiseAlarm"),
              },
              {
                value: alarmTotal.pm25Num,
                name: that.$t("message.firmEnviron.pm25Alarm"),
              },
              {
                value: alarmTotal.pm10Num,
                name: that.$t("message.firmEnviron.pm10Alarm"),
              },
            ],
          },
        ],
      };
      monitor.setOption(option);
    },
    //实时报警分布---图表
    createdAgeCharts(xData2, yData4, yData5, yData6) {
      let that = this;
      let ageChart = echarts.init(this.$refs.devAlarmChart);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 20,
          right: 20,
          containLabel: true,
        },
        color: that.company=='longguang'?["#4378D8", "#1AA388", "#BC5D12"]:["#5181F6", "#61D2B9", "#F67F51"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: true,
          align: "left",
          top: 5,
          right: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
            fontSize: 12,
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData2,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          name: that.$t("message.firmEnviron.realTimeAlarmDistribution"),
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
          nameTextStyle: {
            color: "rgba(42, 46, 63, 0.56)",
            fontSize: 12,
            lineHeight: 24,
            align: "left",
          },
        },
        series: [
          {
            name: that.$t("message.firmEnviron.noiseAlarm"),
            type: "bar",
            data: yData4,
            barWidth: 24,
          },
          {
            name: that.$t("message.firmEnviron.pm25Alarm"),
            type: "bar",
            data: yData5,
            barWidth: 24,
          },
          {
            name: that.$t("message.firmEnviron.pm10Alarm"),
            type: "bar",
            data: yData6,
            barWidth: 24,
          },
        ],
      };

      ageChart.setOption(option);
    },
    createDevStatusChart(xData, yData1, yData2) {
      let that = this;
      let devStatusChart = echarts.init(this.$refs.devStatusChart);
      let option = {
        grid: {
          top: 40,
          left: 0,
          bottom: 20,
          right: 20,
          containLabel: true,
        },
        color: that.company=='longguang'?["#1AA388","#B74F8F"]:["#00DBB6", "#EA3941"],
        legend: {
          show: true,
          align: "left",
          top: 5,
          right: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],
        yAxis: {
          name: that.$t("message.firmEnviron.realTimeStatusOfEquipment"),
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
          nameTextStyle: {
            color: "rgba(42, 46, 63, 0.56)",
            fontSize: 12,
            lineHeight: 24,
            align: "left",
          },
        },
        series: [
          {
            name: that.$t("message.firmEnviron.onLineUnit"),
            type: "bar",
            data: yData1,
            barWidth: 26,
            stack: that.$t("message.firmEnviron.gross"),
          },
          {
            name: that.$t("message.firmEnviron.offLineUnit"),
            type: "bar",
            stack: that.$t("message.firmEnviron.gross"),
            data: yData2,
            barWidth: 26,
          },
        ],
      };

      devStatusChart.setOption(option);
    },
    createInstallChart(xData, yData3) {
      let that = this;
      let installChart = echarts.init(this.$refs.installChart);
      let option = {
        grid: {
          top: 30,
          left: 0,
          bottom: 0,
          right: 20,
          containLabel: true,
        },
        color: ["#5181F6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.5)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: that.$t("message.firmEnviron.installationNumber"),
            type: "bar",
            data: yData3,
            barWidth: 26,
            label: {
              show: true,
              position: "top",
              fontSize: 12,
              color: "rgba(42, 46, 63, 0.44)",
              // formatter:'{c}\n{c}%'
            },
          },
        ],
      };

      installChart.setOption(option);
    },
    createHistoryAlarmChart(xData, seriesData) {
      let that = this;
      let historyAlarmChart = echarts.init(this.$refs.historyAlarmChart);
      // let bgColor = "#fff";
      var option = {
        // backgroundColor: bgColor,
        color: this.company=='longguang'?this.color2:this.color,
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = "";
            params.forEach((v) => {
              // console.log(v)
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                        <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                         that.company=='longguang'?that.color2[v.componentIndex]:that.color[v.componentIndex]
                        };"></span>
                        ${v.seriesName}.${v.name}
                        <span style="color:${
                          that.company=='longguang'?that.color2[v.componentIndex]:that.color[v.componentIndex]
                        };font-weight:700;font-size: 18px">${v.value}</span>
                        ${that.$t("message.firmEnviron.next")}`;
            });
            return html;
          },
          extraCssText:
            "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
          // axisPointer: {
          //   type: "shadow",
          //   shadowStyle: {
          //     color: "#ffffff",
          //     shadowColor: "rgba(225,225,225,1)",
          //     shadowBlur: 5,
          //   },
          // },
        },
        grid: {
          top: 35,
          right: 20,
          left: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#9fa2ad",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: that.$t("message.firmEnviron.alerts"),
            // nameLocation:'start',
            axisLabel: {
              textStyle: {
                color: "#9fa2ad",
              },
            },
            nameTextStyle: {
              color: "#9fa2ad",
              fontSize: 12,
              lineHeight: 24,
              align: "left",
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "rgba(231, 233, 243, 0.5)",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: seriesData,
      };
      historyAlarmChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  margin-bottom: 20px;
  overflow: hidden;
  height: 44%;
  .chart {
    // height: 300px;
    height: calc(100% - 37px);
    float: left;
    width: calc(100% - 800px - 40px);
  }
  .realTimeChart {
    width: 400px;
    margin-left: 20px;
  }
  .devStatusChart {
    width: 400px;
    margin-right: 20px;
  }
}
.bottom {
  overflow: hidden;
  height: calc(56% - 20px);
  .whiteBlock {
    float: left;
    height: 100%;
    &:first-child {
      margin-right: 20px;
      width: calc(100% - 420px);
    }
    &:last-child {
      width: 400px;
    }
  }
  .chart {
    // height: 350px;
    height: calc(100% - 37px);
  }
}
.blockInner {
  padding: 15px;
  position: relative;
  height: calc(100% - 30px);
}
.dateBox {
  position: absolute;
  right: 15px;
  top: 10px;
  span {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 10px;
    cursor: pointer;
    &.active {
      background-color: @--color-primary;
      color: #ffffff;
    }
  }
}
</style>
