<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-18 09:13:34
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-18 09:13:42
 * @FilePath: \znxjxt-ui\src\views\xj\inspection-report\daily-monitoring\components\twe-content.vue
 * @Description: 巡检报告-日常监测报告-病害识别
-->
<template>
  <div class="twe-content">
    <div class="title">
      <span>病害识别</span>
    </div>
    <div class="disease-echart">
      <div class="disease-div" ref="diseaseChart"></div>
      <div class="disease-legnd">
        <fssm-scroll>
          <div
            class="legnd-div"
            v-for="(item, index) in distributionList"
            :key="`disease-${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>
</template>

<script>
import { getTotalList } from "@/api/xj/index/index";
import * as echarts from "echarts";
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  name: "TweContent",
  components: {
    FssmScroll,
  },
  data() {
    return {
      // 病害类型颜色盘
      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: [],
    };
  },
  created() {
    this.getBottomData();
  },
  methods: {
    /**
     * @description: 获取数据
     * @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: `${((item.value / data.total) * 100).toFixed(0)}%`,
            };
          });
          this.$nextTick(() => {
            this.drawDistributionChart();
          });
        }
      });
    },

    /**
     * @description: 绘制病害类型分布图
     * @param {*}
     * @return {*}
     */
    drawDistributionChart() {
      if (this.$refs.diseaseChart) {
        const chart = echarts.init(this.$refs.diseaseChart);
        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>
.twe-content {
  width: 100%;
  height: 100%;
  padding: 0.5rem;

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

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

.disease-echart {
  height: 90%;
  width: 100%;
  display: flex;

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

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

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

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