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

<template>
  <div class="content">
    <div class="title">病害识别</div>
    <div class="disease-content">
      <div class="left">
        <div>
          <div class="name">病害识别总数</div>
          <div class="value"><span>57875</span>个</div>
        </div>
        <div>
          <div class="name">新增病害数</div>
          <div class="value"><span>57875</span>个</div>
        </div>
      </div>
      <div class="right">
        <div ref="statisticsChart"></div>
        <div>
          <el-select
            v-model="diseaseType"
            @change="getChartData"
            placeholder="请选择"
            size="mini"
          >
            <el-option
              v-for="item in diseaseOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <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";
export default {
  name: "DiseaseIndex",
  components: {
    FssmScroll,
  },
  data() {
    return {
      // 下拉框数据绑定
      diseaseType: "",
      // 下拉框数据
      diseaseOptions: [],
      // 病害类型颜色盘
      distributionColor: [
        "#3678FF",
        "#F8A74E",
        "#04DAD7",
        "#00D669",
        "#8448FF",
        "#F6D566",
        "#00B1FF",
        "#62CFFF",
        "#6A9BFF",
        "#B38EFF",
      ],
      // 病害类型分布数据
      distributionList: [],
    };
  },
  created() {
    this.getOptions();
    this.getChartData();
  },
  methods: {
    /* 获取病害类别下拉 */
    getOptions() {
      this.diseaseOptions = [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ];
    },
    /* 获取echart图数据 */
    getChartData() {
      this.distributionList = [
        {
          value: 15461,
          name: "一类",
          rate: "10%",
        },
        {
          value: 1,
          name: "二类",
          rate: "10%",
        },
        {
          value: 6546,
          name: "三类",
          rate: "10%",
        },
        {
          value: 2718,
          name: "四类",
          rate: "10%",
        },
        {
          value: 1704,
          name: "五类",
          rate: "10%",
        },
        {
          value: 1,
          name: "二类",
          rate: "10%",
        },
        {
          value: 6546,
          name: "三类",
          rate: "10%",
        },
        {
          value: 2718,
          name: "四类",
          rate: "10%",
        },
        {
          value: 1704,
          name: "五类",
          rate: "10%",
        },
      ];
      this.$nextTick(() => {
        this.drawStatisticsChart();
        this.drawDistributionChart();
      });
    },
    /* 绘制新增病害统计echart图 */
    drawStatisticsChart() {
      if (this.$refs.statisticsChart) {
        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: ["2024/2/9", "2024/2/10", "2024/2/11", "2024/2/12"],
              axisTick: {
                show: false, //隐藏X轴刻度
              },
              axisLabel: { color: "#A2B0B8" },
              axisLine: {
                lineStyle: {
                  color: "#3C6579",
                  width: 1,
                },
              },
              splitLine: {
                show: true,
              },
            },
          ],
          yAxis: [
            {
              name: "",
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#A2B0B8",
                },
              },
              axisLabel: {
                // "formatter": "{value} T/h"
                // formatter: "{value}",
              },
              splitLine: {
                show: true,
              },
            },
          ],
          series: [
            {
              name: "新增病害数",
              type: "line",
              symbolSize: 5,
              smooth: 1,
              data: [400, 600, 1400, 1700],
            },
          ],
        });
        window.addEventListener("resize", () => {
          chart.resize();
        });
      }
    },
    /* 绘制病害类型分布图 */
    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;
    padding-left: 3rem;
    font-family: "DouYu";
    background: url("../../assets/index/div-title.png") no-repeat;
    background-size: 5%;
    background-position: 0 30%;
  }

  .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.6rem 2rem 2rem 2rem;

          .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;

            .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>
