<template>
  <div id="noise">
    <div class="side-area">
      <Title text="设备列表"></Title>
      <ShadowContainer>
        <div class="monitor-list">
          <div
            :class="['noise-monitor', activeIndex == index ? 'active' : '']"
            v-for="(monitor, index) in noiseMonitors"
            :key="index"
            @click="changeMonitor(monitor, index)"
          >
            <img src="@/assets/noise/icon_device.png" alt="" />
            {{ monitor.device_name }} / {{ monitor.device_no }}
          </div>
        </div>
      </ShadowContainer>
      <Title text="设备总览"></Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="deviceChart" id="device-chart"></div>
        </div>
      </ShadowContainer>
      <Title text="近30日噪音"></Title>
      <ShadowContainer>
        <div class="chart-container">
          <img class="custom-chart" src="@/assets/chart.png" />
          <div ref="noiseChart" id="noise-chart"></div>
        </div>
      </ShadowContainer>
    </div>
    <div class="mid-area">
      <Title text="实时监测" type="long"></Title>
      <ShadowContainer>
        <div id="stats-container">
          <div class="temp">
            <div class="text">温度/℃</div>
            <div class="value" style="color: #ff6151">
              {{ currentMonitorStatis.temperature }}
            </div>
          </div>
          <div class="humidity">
            <div class="text">湿度/℃</div>
            <div class="value" style="color: #22c3ed">
              {{ currentMonitorStatis.humidity }}
            </div>
          </div>
          <div class="windangle">
            <div class="text">风向/°</div>
            <div class="value" style="color: #cc43b7">
              {{ currentMonitorStatis.wind_direction }}
            </div>
          </div>
          <div class="windspeed">
            <div class="text">风速/m/s</div>
            <div class="value" style="color: #ffc74c">
              {{ currentMonitorStatis.wind_speed }}
            </div>
          </div>
          <div class="mid-status">
            <div>
              噪音 <span class="value">{{ currentMonitorStatis.noise }}</span>
              <span class="unit">dB</span>
            </div>
            <div>
              PM2.5 <span class="value">{{ currentMonitorStatis.pm25 }}</span
              ><span class="unit">ug/m³</span>
            </div>
            <div>
              PM10 <span class="value">{{ currentMonitorStatis.pm10 }}</span
              ><span class="unit">ug/m³</span>
            </div>
          </div>
          <img src="@/assets/noise/stats-bg.png" alt="" />
        </div>
        <div class="filters">
          <div
            :class="['filter', activeType == 'pm25_data' ? 'active' : '']"
            @click="changeType('pm25_data')"
          >
            PM2.5
          </div>
          <div
            :class="['filter', activeType == 'pm10_data' ? 'active' : '']"
            @click="changeType('pm10_data')"
          >
            PM10
          </div>
          <div
            :class="[
              'filter',
              activeType == 'temperature_data' ? 'active' : '',
            ]"
            @click="changeType('temperature_data')"
          >
            温度
          </div>
          <div
            :class="['filter', activeType == 'humidity_data' ? 'active' : '']"
            @click="changeType('humidity_data')"
          >
            湿度
          </div>
          <div
            :class="['filter', activeType == 'noise_data' ? 'active' : '']"
            @click="changeType('noise_data')"
          >
            噪音
          </div>
          <div
            :class="['filter', activeType == 'wind_speed_data' ? 'active' : '']"
            @click="changeType('wind_speed_data')"
          >
            风速
          </div>
        </div>
        <div id="aqi-chart" ref="aqiChart"></div>
      </ShadowContainer>
    </div>
    <div class="side-area">
      <Title text="报警信息"></Title>
      <ShadowContainer>
        <div class="warning-table">
          <div class="warning-table-header">
            <div class="warning-table-time">报警时间</div>
            <div class="warning-table-pm25">PM2.5</div>
            <div class="warning-table-pm10">PM10</div>
            <div class="warning-table-noise">噪音</div>
            <div class="warning-table-wind">风速</div>
          </div>
          <div class="warning-table-list" v-infinite-scroll="load">
            <div
              class="warning-table-column"
              v-for="(column, index) in warnings"
              :key="index"
            >
              <div class="warning-table-time">{{ column.log_time }}</div>
              <div class="warning-table-pm25"></div>
              <div class="warning-table-pm10"></div>
              <div class="warning-table-noise"></div>
              <div class="warning-table-wind"></div>
            </div>
          </div>
        </div>
      </ShadowContainer>
    </div>
  </div>
</template>
<script>
import {
  getDeviceTotalStatus,
  getNearMonthStatis,
  getCurrentMonitorStatis,
  getNoiseDeviceList,
  getTodayAqiLineChartData,
  getWarningMessageList,
} from "@/api/index";
export default {
  name: "Noise",
  data() {
    return {
      pieChartData: [],
      noiseData: [],
      warnings: [],
      noiseMonitors: [],
      classOption: {
        singleHeight: 36,
      },
      currentMonitorStatis: {},
      aqiLineChartData: [],
      activeIndex: 0,
      totalData: {},
      activeType: "pm25_data",
      lineChart: null,
      page: 1,
    };
  },
  computed: {},
  methods: {
    computedPercentage(value, max) {
      return Number(
        Number(Number(Number(value) / Number(max)) * 100).toFixed(2)
      );
    },
    getTime(ts) {
      let date = new Date(ts);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;

      let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let min =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let sec =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return `${today} ${hour}:${min}:${sec}`;
    },
    renderDeviceChart() {
      const pieData = [...this.pieChartData];
      const chart = this.$echarts.init(this.$refs.deviceChart);
      let total = 0;
      pieData.map((item) => {
        total += item.value;
      });
      const option = {
        title: {
          x: "27%", //X坐标
          y: "35%",
          text: total,
          subtext: "总数",
          textAlign: "center",
          textStyle: {
            //标题样式
            fontSize: 30,
            fontWeight: "bolder",
            color: "#00fcff",
          },
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "10%",
          top: "20%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "inherit",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = pieData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}} 台`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["80%", "90%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: pieData,
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("device-chart"));
      });
    },
    renderNoiseChart() {
      const chartData = [...this.noiseData];
      const chart = this.$echarts.init(this.$refs.noiseChart);
      const option = {
        title: {
          x: "27%", //X坐标
          y: "32%",
          subtext: "近30日\n噪音情况",
          textAlign: "center",
          subtextStyle: {
            //副标题样式
            fontSize: 16,
            fontWeight: "bolder",
            lineHeight: 24,
            color: "rgba(255,255,255,0.7)",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          itemHeight: 12,
          itemWidth: 12,
          icon: "rect",
          right: "10%",
          top: "30%",
          orient: "vertical",
          itemGap: 40,
          textStyle: {
            color: "inherit",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = chartData;
            let target;
            for (let i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
              }
            }
            let arr = [`{a|${name}}`, `{b|${target}} 天`];
            return arr.join("   ");
          },
        },
        series: [
          {
            type: "pie",
            radius: ["80%", "90%"],
            center: ["28%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 20,
              borderWidth: 4,
            },
            label: {
              show: false,
              position: "center",
            },

            data: chartData,
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("noise-chart"));
      });
    },
    renderAQIChart() {
      const xAxisData = this.aqiLineChartData.map((item) => {
        return item.hour;
      });
      const yAxisData = this.aqiLineChartData.map((item) => {
        return item.value;
      });
      const chart = this.$echarts.init(this.$refs.aqiChart);
      this.lineChart = chart;
      const option = {
        color: ["#5E97F6"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisTick: { show: false },
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            fontSize: "12",
            color: "#c6def9",
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            data: yAxisData,
            type: "line",
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5E97F6",
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,0)",
                },
              ]),
            },
          },
        ],
      };
      chart.setOption(option);
      this.$nextTick(() => {
        // 解决echarts图表放大溢出父容器
        const resizeOb = new ResizeObserver((entries) => {
          for (const entry of entries) {
            this.$echarts.getInstanceByDom(entry.target).resize();
          }
        });
        resizeOb.observe(document.getElementById("aqi-chart"));
      });
    },
    formatText(value, text) {
      return String(text);
    },

    getNoiseData() {
      getDeviceTotalStatus({ top_cat: 9 }).then((res) => {
        this.pieChartData = res.data;
        this.renderDeviceChart();
      });
      getNearMonthStatis({
        start_log_time: this.getTime(new Date().getTime() - 2592000000),
        end_log_time: this.getTime(new Date().getTime()),
      }).then((res) => {
        this.noiseData = res.data.noise_data;
        this.renderNoiseChart();
      });
      getTodayAqiLineChartData().then((res) => {
        this.totalData = res.data;
        this.aqiLineChartData = res.data.pm25_data;
        this.$nextTick(() => {
          this.renderAQIChart();
        });
      });
      getWarningMessageList({
        start_log_time: this.getTime(new Date().getTime() - 2592000000),
        end_log_time: this.getTime(new Date().getTime()),
        page: 1,
      }).then((res) => {
        this.warnings = res.data.data;
      });
      getNoiseDeviceList({ top_cat: 9 }).then((res) => {
        this.noiseMonitors = res.data;
        if (res.data.length > 0) {
          this.changeMonitor(res.data[0], 0);
        }
      });
    },
    changeMonitor(monitor, index) {
      this.activeIndex = index;
      getCurrentMonitorStatis({ device_id: monitor.id }).then((res) => {
        this.currentMonitorStatis = res.data;
      });
    },
    changeType(type) {
      this.activeType = type;
      this.lineChart.dispose();
      this.aqiLineChartData = this.totalData[`${type}`];
      this.$nextTick(() => {
        this.renderAQIChart();
      });
    },
    load() {
      if (this.warnings.length == this.page * 10) {
        getWarningMessageList({
          page: this.page + 1,
        }).then((res) => {
          this.page += 1;
          this.warnings += res.data.data;
        });
      }
    },
  },
  mounted() {
    this.getNoiseData();
  },
};
</script>
<style lang="less" scoped>
#noise {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  .side-area {
    width: 25%;
  }
  .mid-area {
    width: calc(50% - 40px);
    margin: 0 20px;
  }
}
.chart-container {
  position: relative;
  .custom-chart {
    position: absolute;
    width: 30%;
    top: 50%;
    transform: translateY(-50%);
    left: 13%;
  }
}
#device-chart,
#noise-chart {
  width: 100%;
  height: 210px;
}
.i-type {
  display: flex;
  font-size: 14px;
  color: #c6def9;
  padding: 3px;
  .slider {
    width: 70%;
    vertical-align: top;
  }
  .i-type-name,
  .i-type-count {
    width: 15%;
    vertical-align: top;
    line-height: 30px;
    text-align: right;
    span {
      font-size: 16px;
    }
  }
  .i-type-count {
    width: 12%;
  }
  .i-type-name {
    padding-right: 12px;
  }
}
.el-progress {
  padding: 12px 0;
}
#aqi-chart {
  width: 100%;
  height: 214px;
}
.monitor {
  display: flex;
  justify-content: space-between;
  .lt-status,
  .rt-status {
    width: 20%;
    text-align: center;
  }
}
.el-divider {
  opacity: 0.3;
  background: #7e8ed4;
}
::v-deep .el-progress-circle__track {
  stroke: #183c6b;
}
::v-deep .el-progress__text {
  font-size: 16px;
  color: #c6def9 !important;
}
::v-deep .el-progress-circle {
  width: 88px !important;
  height: 88px !important;
}
.rt-single-status {
  display: flex;
  padding: 7px 0;
  .left-des {
    text-align: center;
    width: 64px;
    div {
      margin-bottom: 12px;
      font-size: 16px;
      color: #22c3ed;
    }
  }
  img {
    width: 40px;
    vertical-align: top;
  }
  .rt-value {
    width: calc(100% - 64px);
    font-size: 12px;
    color: #c6def9;
    opacity: 0.8;
    line-height: 72px;
    span {
      font-size: 26px;
      margin-right: 12px;
    }
  }
}
.status-unit {
  font-size: 16px;
  color: #c6def9;
  text-align: center;
}
::v-deep .el-divider--horizontal {
  margin: 16px 0;
}
.mid-aqi {
  width: 60%;
}
.aqi-background {
  height: 100%;
  background: url("@/assets/noise/img_bj.png") no-repeat;
  background-size: 80%;
  background-position: 50% 15%;
  zoom: 1.2;
}
#aqi-quality-chart {
  width: 100%;
  height: 300px;
}
.aqi-level {
  transform: translateY(-80px);
}
.aqi-level-line {
  width: 80%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 12px;
  & > div {
    width: calc(100% / 6);
    height: 12px;
  }
  & > div:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  & > div:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
}
.aqi-level-text {
  width: 80%;
  display: flex;
  margin: 0 auto;
  font-size: 14px;
  color: #c6def9;
  opacity: 0.8;
  & > div {
    width: calc(100% / 6);
    height: 12px;
    text-align: center;
  }
}
.warn-title {
  border-left: 2px solid;
  padding-left: 12px;
  font-size: 14px;
  color: #c6def9;
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  &:nth-child(3n-2) {
    border-color: #fd175d;
  }
  &:nth-child(3n-1) {
    border-color: #ab75ff;
  }
  &:nth-child(3n) {
    border-color: #ffbb37;
  }
  .warn-text {
    width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .warn-time {
    width: 40%;
    text-align: right;
  }
}
.monitor-list {
  height: 220px;
  overflow-y: auto;
}
.noise-monitor {
  padding: 16px;
  background: rgba(44, 96, 162, 0.2);
  font-size: 14px;
  color: #c6def9;
  margin-bottom: 18px;
  img {
    width: 20px;
    vertical-align: top;
  }
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    background: rgba(44, 96, 162, 0.5);
    color: #27acfb;
  }
  &.active {
    background: rgba(44, 96, 162, 0.5);
    color: #27acfb;
  }
}
.warp {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.overflowed {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.warning-table {
  font-size: 14px;
  text-align: center;
  color: #c6def9;
  .warning-table-list {
    height: 820px;
    overflow-y: auto;
  }
  .warning-table-header {
    background: rgba(44, 96, 162, 0.2);
    display: flex;
    padding: 12px 0;
  }
  .warning-table-column {
    padding: 12px 0;
    background: rgba(44, 96, 162, 0.05);
    display: flex;
    &:nth-child(2n) {
      background: rgba(44, 96, 162, 0.1);
    }
  }
  .warning-table-time {
    width: 40%;
  }
  .warning-table-pm25,
  .warning-table-pm10,
  .warning-table-noise,
  .warning-table-wind {
    width: 15%;
  }
}
#stats-container {
  position: relative;
  img {
    width: 100%;
  }
  .text {
    color: #ffffff;
    font-size: 16px;
    text-align: center;
  }
  .value {
    font-size: 24px;
    text-align: center;
  }
  .temp {
    position: absolute;
    left: 11%;
    top: 23%;
    transform: translateX(-50%);
  }
  .humidity {
    position: absolute;
    left: 11%;
    bottom: 34%;
    transform: translateX(-50%);
  }
  .windangle {
    position: absolute;
    right: 11%;
    top: 23%;
    transform: translateX(50%);
  }
  .windspeed {
    position: absolute;
    right: 11%;
    bottom: 34%;
    transform: translateX(50%);
  }
  .mid-status {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 49.5%;
    line-height: 56px;
    font-size: 20px;
    text-align: center;
    color: #c6def9;
    .unit {
      font-size: 14px;
      margin-left: 6px;
    }
    .value {
      font-size: 24px;
      margin-left: 12px;
    }
  }
}
.filters {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .filter {
    font-size: 14px;
    color: rgba(198, 222, 249, 1);
    width: 120px;
    padding: 6px;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(
      90deg,
      rgba(8, 36, 71, 0) 0%,
      rgba(39, 172, 251, 0.19) 49%,
      rgba(9, 37, 71, 0) 100%
    );
    &.active {
      color: #16c0ff;
    }
  }
}
</style>