<template>
  <div id="noise">
    <div class="side-area">
      <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>
      <Title text="近30日AQI"></Title>
      <ShadowContainer>
        <div v-for="(iType, index) in noiseTypes" :key="index" class="i-type">
          <div class="i-type-name">
            {{ iType.text }}
          </div>
          <div class="slider">
            <el-progress
              :percentage="50"
              :color="customColors"
              :show-text="false"
              define-back-color="#183C6B"
            ></el-progress>
          </div>
          <div class="i-type-count">
            <span>{{ iType.count }}</span>
            天
          </div>
        </div>
      </ShadowContainer>
    </div>
    <div class="mid-area">
      <Title text="实时监测" type="long"></Title>
      <ShadowContainer>
        <div class="monitor">
          <div class="lt-status">
            <el-divider></el-divider>
            <el-progress
              type="circle"
              :percentage="60"
              :format="(value) => formatText(value, '40')"
              :color="customMonitorColors"
              stroke-width="12"
            ></el-progress>
            <div class="status-unit">
              pm 10 / <span style="font-size: 12px; color: #6d94bf">ug/m³</span>
            </div>
            <el-divider></el-divider>
            <el-progress
              type="circle"
              :percentage="40"
              :format="(value) => formatText(value, '35')"
              :color="customMonitorColors"
              stroke-width="12"
            ></el-progress>
            <div class="status-unit">
              pm 2.5 /
              <span style="font-size: 12px; color: #6d94bf">ug/m³</span>
            </div>

            <el-divider></el-divider>
            <el-progress
              type="circle"
              :percentage="10"
              :format="(value) => formatText(value, '52')"
              :color="customMonitorColors"
              stroke-width="12"
            ></el-progress>
            <div class="status-unit">
              噪音 / <span style="font-size: 12px; color: #6d94bf">分贝</span>
            </div>

            <el-divider></el-divider>
          </div>
          <div class="mid-aqi">
            <div class="aqi-background">
              <div id="aqi-quality-chart" ref="aqiQualityChart"></div>
            </div>
            <div class="aqi-level">
              <div class="aqi-level-line">
                <div style="background: #18d7b9"></div>
                <div style="background: #feba01"></div>
                <div style="background: #ff754c"></div>
                <div style="background: #f11b1f"></div>
                <div style="background: #6339e6"></div>
                <div style="background: #751dbf"></div>
              </div>
              <div class="aqi-level-text">
                <div>优</div>
                <div>良</div>
                <div>轻度</div>
                <div>中度</div>
                <div>重度</div>
                <div>严重</div>
              </div>
            </div>
          </div>
          <div class="rt-status">
            <el-divider></el-divider>
            <div class="rt-single-status">
              <div class="left-des">
                <div>温度</div>
                <img src="@/assets/noise/icon_f_san@2x.png" alt="" />
              </div>
              <div class="rt-value"><span>14.5</span>℃</div>
            </div>
            <el-divider> </el-divider>
            <div class="rt-single-status">
              <div class="left-des">
                <div>湿度</div>
                <img src="@/assets/noise/icon_f_si@2x.png" alt="" />
              </div>
              <div class="rt-value"><span>36</span>%</div>
            </div>
            <el-divider> </el-divider>
            <div class="rt-single-status">
              <div class="left-des">
                <div>风速</div>
                <img src="@/assets/noise/icon_f_wu@2x.png" alt="" />
              </div>
              <div class="rt-value"><span>5</span>m/s</div>
            </div>
            <el-divider> </el-divider>
            <div class="rt-single-status">
              <div class="left-des">
                <div>数据采集</div>
                <img src="@/assets/noise/icon_f_liu@2x.png" alt="" />
              </div>
              <div class="rt-value" style="line-height: 36px">
                2023-03-02
                <br />
                09:23:12
              </div>
            </div>
            <el-divider> </el-divider>
          </div>
        </div>
      </ShadowContainer>
      <Title text="今日AQI" type="long"></Title>
      <ShadowContainer>
        <div id="aqi-chart" ref="aqiChart"></div>
      </ShadowContainer>
    </div>
    <div class="side-area">
      <Title text="报警信息"></Title>
      <ShadowContainer>
        <vue-seamless-scroll
          :data="warnings"
          :class-option="classOption"
          class="warp"
          @ScrollEnd="scrollEnd"
          refs="scroll"
        >
          <div
            class="warn-title"
            :style="{ borderColor: '#fff' }"
            v-for="(warn, index) in warnings"
            :key="index"
          >
            <div class="warn-text">{{ warn.text }}</div>
            <div class="warn-time">{{ warn.time }}</div>
          </div>
        </vue-seamless-scroll>
      </ShadowContainer>
      <Title text="扬尘噪音"></Title>
      <ShadowContainer>
        <div style="height: 590px">
          <div
            class="noise-monitor"
            v-for="(monitor, index) in noiseMonitors"
            :key="index"
          >
            <img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
            {{ monitor.text }}
          </div>
        </div>
      </ShadowContainer>
    </div>
  </div>
</template>
<script>
export default {
  name: "Noise",
  data() {
    return {
      pieChartData: [
        { value: 4, name: "在线总数" },
        { value: 2, name: "离线总数" },
      ],
      noiseData: [
        { value: 4, name: "达标" },
        { value: 3, name: "超标" },
      ],
      noiseTypes: [
        { text: "优", count: 13 },
        { text: "良", count: 17 },
        { text: "轻度污染", count: 0 },
        { text: "中度污染", count: 0 },
        { text: "重度污染", count: 0 },
        { text: "严重污染", count: 0 },
      ],
      customColors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#6f7ad3", percentage: 100 },
      ],
      customMonitorColors: [
        { color: "#18D7B9", percentage: 25 },
        { color: "#2CBCFF", percentage: 50 },
        { color: "#FF754C", percentage: 75 },
        { color: "#FF754C", percentage: 100 },
      ],
      warnings: [
        {
          text: "报警标题：报警内容123123123报警标题：报警内容123123123报警标题：报警内容123123123",
          time: "2023-02-12 09:12",
        },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
        { text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
      ],
      noiseMonitors: [
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
        { text: "料仓扬尘监测" },
      ],
      classOption: {
        singleHeight: 36,
      },
    };
  },
  methods: {
    renderDeviceChart() {
      const chart = this.$echarts.init(this.$refs.deviceChart);
      const option = {
        title: {
          x: "27%", //X坐标
          y: "35%",
          text: "6",
          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: "30%",
          orient: "vertical",
          itemGap: 40,
          textStyle: {
            color: "auto",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = this.pieChartData;
            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: this.pieChartData,
          },
        ],
      };
      chart.setOption(option);
    },
    renderNoiseChart() {
      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: "auto",
            rich: {
              a: {
                fontSize: 14,
                align: "left",
              },
              b: {
                fontSize: 20,
                align: "left",
                lineHeight: 25,
              },
            },
          },
          formatter: (name) => {
            let data = this.noiseData;
            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: this.noiseData,
          },
        ],
      };
      chart.setOption(option);
    },
    renderAQIChart() {
      const chart = this.$echarts.init(this.$refs.aqiChart);
      const option = {
        color: ["#5E97F6"],
        grid: {
          top: 30,
          bottom: 30,
          left: 30,
          right: 30,
        },
        xAxis: {
          type: "category",
          data: ["09:00", "12:00", "13:00", "16:00", "19:00", "22:00", "01:00"],
          axisTick: { show: false },
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#c6def9",
            },
          },
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: "rgba(95, 120, 144, 0.4)",
            },
          },
        },
        series: [
          {
            name: "NJBR-TD-01#",
            data: [2, 5, 4, 4, 7, 5, 6],
            type: "line",
            smooth: true,
            areaStyle: {
              normal: {
                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);
    },
    formatText(value, text) {
      return text;
    },
    renderAqiQualityChart() {
      const chart = this.$echarts.init(this.$refs.aqiQualityChart);
      const option = {
        title: {
          x: "49%", //X坐标
          y: "64%",
          subtext: "优",
          textAlign: "center",
          subtextStyle: {
            //副标题样式
            fontSize: 24,
            fontWeight: "bolder",
            lineHeight: 24,
            color: "rgba(255,255,255,0.7)",
          },
        },
        series: [
          {
            type: "gauge",
            center: ["50%", "60%"],
            startAngle: 230,
            endAngle: -50,
            min: 0,
            max: 300,
            itemStyle: {
              color: "#FFAB91",
            },
            progress: {
              show: true,
              width: 30,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 30,
                color: [[1, "#183C6B"]],
              },
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: "#183C6B",
              },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            anchor: {
              show: false,
            },
            title: {
              show: false,
            },
            detail: {
              valueAnimation: true,
              width: "60%",
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, -10],
              fontSize: 46,
              fontWeight: "bolder",
              formatter: "{value}",
              color: "#fff",
            },
            data: [
              {
                value: 20,
              },
            ],
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    this.renderDeviceChart();
    this.renderNoiseChart();
    this.renderAQIChart();
    this.renderAqiQualityChart();
    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"));
      resizeOb.observe(document.getElementById("noise-chart"));
      resizeOb.observe(document.getElementById("aqi-chart"));
      resizeOb.observe(document.getElementById("aqi-quality-chart"));
    });
  },
};
</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: 4px;
  .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: 234px;
}
.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;
  .warn-text {
    width: 60%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .warn-time {
    width: 40%;
    text-align: right;
  }
}
.noise-monitor {
  font-size: 14px;
  color: #c6def9;
  margin-bottom: 18px;
  img {
    width: 20px;
    vertical-align: top;
  }
  &:last-child {
    margin-bottom: 0;
  }
}
.warp {
  width: 100%;
  height: 180px;
  overflow: hidden;
}
</style>