<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-29 15:17:58
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-12-13 15:29:06
 * @FilePath: \znxjxt-ui\src\views\index-components\disease-index.vue
 * @Description: 首页-病害识别
-->

<template>
  <div class="content">
    <div class="title">
      <span>病害识别</span>
      <el-radio-group v-model="checkCycle" size="mini" @change="changCycle">
        <el-radio-button label="day">今日</el-radio-button>
        <el-radio-button label="month">本月</el-radio-button>
        <el-radio-button label="year">本年</el-radio-button>
      </el-radio-group>
    </div>
    <div class="disease-content">
      <div class="left">
        <div>
          <div class="name">病害识别总数</div>
          <div class="value">
            <span>{{ total }}</span
            >个
          </div>
        </div>
        <div>
          <div class="name">新增病害数</div>
          <div class="value">
            <span>{{ newTotal }}</span
            >个
          </div>
        </div>
      </div>
      <div class="right">
        <div ref="statisticsChart"></div>
        <div>
          <div class="distribution-div" ref="distributionChart"></div>
          <div class="distribution-legnd">
            <fssm-scroll>
              <div
                class="legnd-div"
                v-for="(item, index) in distributionList"
                :key="`distribution-${index}`"
              >
                <div class="name">
                  <span
                    class="index"
                    :style="{ backgroundColor: distributionColor[index] }"
                  ></span>
                  <span>{{ item.name }}</span>
                </div>
                <div class="rate">{{ item.rate }}</div>
              </div>
            </fssm-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
import * as echarts from "echarts";
// 接口
import { getDefectLog, getTotalList } from "@/api/xj/index/index";
export default {
  name: "DiseaseIndex",
  components: {
    FssmScroll,
  },
  data() {
    return {
      // 巡查周期
      checkCycle: "day",
      // 病害总数
      total: 0,
      // 新增病害数
      newTotal: 0,
      // 新增病害统计数据
      statisticsData: [],
      // 病害类型颜色盘
      distributionColor: [
        "#3678FF",
        "#F8A74E",
        "#04DAD7",
        "#00D669",
        "#8448FF",
        "#F6D566",
        "#00B1FF",
        "#62CFFF",
        "#6A9BFF",
        "#B38EFF",
        "#3678FF",
        "#F8A74E",
        "#04DAD7",
        "#00D669",
        "#8448FF",
        "#F6D566",
        "#00B1FF",
        "#62CFFF",
        "#6A9BFF",
        "#B38EFF",
        "#3678FF",
        "#F8A74E",
        "#04DAD7",
        "#00D669",
        "#8448FF",
      ],
      // 病害类型分布数据
      distributionList: [],
    };
  },
  mounted() {
    this.getChartData();
    this.getBottomData();
  },
  methods: {
    /**
     * @description: 切换巡查周期事件
     * @param {*}
     * @return {*}
     */
    changCycle() {
      this.getChartData();
      this.getBottomData();
    },

    /**
     * @description: 获取上部分echart图数据
     * @param {*} val
     * @return {*}
     */
    getChartData() {
      getDefectLog({ dateType: this.checkCycle }).then(({ code, data }) => {
        if (code === 200) {
          this.statisticsData = data;
          this.$nextTick(() => {
            this.drawStatisticsChart();
          });
        }
      });
    },

    /**
     * @description: 获取底部echart图数据
     * @param {*}
     * @return {*}
     */
    getBottomData() {
      getTotalList({ dateType: this.checkCycle }).then(({ code, data }) => {
        if (code === 200) {
          this.total = data.total;
          this.newTotal = data.today;
          this.distributionList = data.data.map((item) => {
            return {
              value: item.value,
              name: item.label,
              rate:
                data.total > 0
                  ? `${((item.value / data.total) * 100).toFixed(0)}%`
                  : "0%",
            };
          });
          this.$nextTick(() => {
            this.drawDistributionChart();
          });
        }
      });
    },

    /**
     * @description: 绘制新增病害统计echart图
     * @param {*}
     * @return {*}
     */
    drawStatisticsChart() {
      if (this.$refs.statisticsChart) {
        const xData = this.statisticsData.map((item) => {
          return item.label;
        });
        const yData = this.statisticsData.map((item) => {
          return item.value;
        });
        const chart = echarts.init(this.$refs.statisticsChart);
        chart.setOption({
          color: ["#388BD8", "#FFC400"],
          title: [
            // 中心比例
            {
              text: "新增病害统计",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          tooltip: {
            trigger: "axis",
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            right: "5%",
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              name: "",
              type: "value",
              minInterval: 1,
              axisLine: {
                lineStyle: {
                  color: "#A2B0B8",
                },
              },
              axisLabel: {
                // "formatter": "{value} T/h"
                // formatter: "{value}",
              },
              splitLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "新增病害数",
              type: "line",
              symbolSize: 5,
              smooth: 1,
              data: yData,
            },
          ],
          dataZoom: [
            {
              // 设置滚动条的隐藏与显示
              show: false,
              // 设置滚动条类型
              type: "slider",
              // 设置背景颜色
              backgroundColor: "rgba(225,225,225,0.2)",
              // 设置选中范围的填充颜色
              fillerColor: "#ccc",
              // 设置边框颜色
              borderColor: "rgba(225,225,225,0.2)",
              // 是否显示detail，即拖拽时候显示详细数值信息
              showDetail: false,
              // 数据窗口范围的起始数值
              startValue:
                this.statisticsData.length > 6
                  ? this.statisticsData.length - 6
                  : 0,
              // 数据窗口范围的结束数值（一页显示多少条数据）
              endValue: this.statisticsData.length,
              // empty：当前数据窗口外的数据，被设置为空。
              // 即不会影响其他轴的数据范围
              filterMode: "empty",
              // 设置滚动条宽度，相对于盒子宽度
              width: "80%",
              // 设置滚动条高度
              height: 7,
              // 设置滚动条显示位置
              left: "center",
              // 是否锁定选择区域（或叫做数据窗口）的大小
              zoomLoxk: true,
              // 控制手柄的尺寸
              handleSize: 10,
              // dataZoom-slider组件离容器下侧的距离
              bottom: 0,
            },
            {
              // 没有下面这块的话，只能拖动滚动条，
              // 鼠标滚轮在区域内不能控制外部滚动条
              type: "inside",
              // 滚轮是否触发缩放
              zoomOnMouseWheel: false,
              // 鼠标滚轮触发滚动
              moveOnMouseMove: true,
              moveOnMouseWheel: true,
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },

    /**
     * @description: 绘制病害类型分布图
     * @param {*}
     * @return {*}
     */
    drawDistributionChart() {
      if (this.$refs.distributionChart) {
        const chart = echarts.init(this.$refs.distributionChart);
        chart.setOption({
          color: this.distributionColor,
          title: [
            // 中心比例
            {
              text: "新增病害类型分布",
              x: "1%",
              y: "1%",
              textStyle: {
                fontSize: 14,
              },
            },
          ],
          series: [
            {
              type: "pie",
              //   hoverAnimation: true,
              minAngle: 1,
              padAngle: 4,
              hoverOffset: 0,
              startAngle: 0, //起始角度
              clockwise: false, //是否顺时针
              radius: ["55%", "70%"],
              center: ["50%", "56%"],
              avoidLabelOverlap: false,
              animationDuration: 3000,
              emphasis: {
                label: {
                  formatter: ["{a|{c}}" + "\n" + "{b|{b}}"].join("\n"),
                  show: true,
                  fontSize: "30",
                  fontWeight: "bold",
                  rich: {
                    a: {
                      fontSize: 18,
                      lineHeight: 18,
                      color: "#000",
                    },
                    b: {
                      color: "#000",
                      fontSize: 16,
                      lineHeight: 30,
                    },
                  },
                },
              },
              label: {
                show: false,
                position: "center",
                color: "rgba(13, 17, 29,0)",
              },
              labelLine: {
                show: false,
              },
              data: this.distributionList,
              zlevel: 30,
            },
            {
              type: "pie",
              radius: ["35%", "55%"],
              center: ["50%", "56%"],
              //   hoverAnimation: true,
              hoverOffset: 0,
              startAngle: 0, //起始角度
              clockwise: false, //是否顺时针
              padAngle: 4,
              minAngle: 1,
              animationDuration: 3000,
              emphasis: { scale: false },
              label: {
                show: false,
              },
              itemStyle: {
                color: "#E4EDFD",
              },
              data: this.distributionList,
              z: 1,
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 1rem;

  .title {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 3rem;
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
    font-size: 1.2rem;

    span {
      font-family: "DouYu";
    }
  }

  .disease-content {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 20%;
      height: 100%;
      background: url("../../assets/index/left-bkg.png") no-repeat;
      background-size: 100%;

      > div {
        height: 50%;
        width: calc(100% - 2rem);
        margin: 0 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .name {
          font-size: 0.8rem;
        }

        .value {
          line-height: 4rem;

          span {
            margin-right: 0.3rem;
            font-weight: 600;
            font-size: 1.5rem;
          }
        }

        &:nth-child(1) {
          border-bottom: 1px #adc6e5 solid;
        }
      }
    }

    .right {
      width: 78%;
      height: 100%;
      position: relative;

      .el-select {
        width: 8rem;
        position: absolute;
        right: 2%;
        top: 5%;
        z-index: 1;
      }

      > div {
        height: 50%;
        width: 100%;
        display: flex;
        position: relative;
        background-color: #ffffff;

        .distribution-div {
          width: 30%;
          height: 100%;
        }

        .distribution-legnd {
          width: 70%;
          height: 100%;
          padding: 2.5rem 0;

          .scroll-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
          }

          .legnd-div {
            width: 47%;
            height: 2rem;
            padding: 0 1rem;
            margin: 0.2rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f6f6fa;
            border-radius: 0.2rem;
            font-size: 1rem;

            .name {
              display: flex;
              align-items: center;

              .index {
                width: 0.7rem;
                height: 0.7rem;
                display: inline-block;
                margin-right: 0.5rem;
                border-radius: 0.3rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
