xjsaas-ui/src/views/big-screen/disease-components/traffic-statistic.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-21 10:06:24
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-19 09:35:47
 * @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
 * @Description: 病害巡检大屏-病害统计
-->
<template>
  <div class="content">
    <div class="statistic-select">
      <el-select
        :popper-append-to-body="false"
        v-model="itemSelect"
        placeholder="请选择"
      >
        <el-option
          v-for="item in currentList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div ref="statisticChart" class="statistic-chart"></div>
    <div class="statistic-lenged">
      <fssm-scroll>
        <div
          class="lenged-item"
          v-for="(item, index) in echartList"
          :key="`static-${index}`"
        >
          <div
            class="index"
            :style="{ backgroundColor: colorList[index] }"
          ></div>
          <div class="name">{{ item.name }}</div>
          <div class="rate">{{ item.rate }}</div>
          <div class="value">{{ item.value }}</div>
        </div>
      </fssm-scroll>
    </div>
  </div>
</template>
  
  <script>
import * as echarts from "echarts";
import { getDropList } from "@/api/xj/screen/disease-screen";
import { roadCurrent } from "@/api/xj/screen/traffic-screen";
import fssmScroll from "@/components/scroll/fssm-scroll.vue";
export default {
  name: "TrafficStatistic",
  components: { fssmScroll },
  props: {
    select: {
      type: String,
      default: "",
    },
    // 病害巡检中4种类型点击绑定
    bottomTipClick: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 下拉数据绑定
      itemSelect: "",
      //   下拉框数据
      currentList: [],
      // 取色盘
      colorList: [
        "#18F7FF",
        "#6FC36F",
        "#4C83FF",
        "#FFEA68",
        "#FF8F5F",
        "#FC5976",
        "#AE74F3",
        "#4C21D5",
        "#6669DB",
        "#18F7FF",
        "#6FC36F",
        "#4C83FF",
        "#FFEA68",
        "#FF8F5F",
        "#FC5976",
        "#AE74F3",
        "#4C21D5",
        "#6669DB",
      ],
      // echart图数据
      echartList: [],
      // 交安事件总数
      sum: 0,
      // echart实例
      echart: null,
    };
  },
  watch: {
    select: {
      handler(val) {
        if (val) {
          this.itemSelect = "";
          this.getCurrentList();
          this.getChartData();
        }
      },
    },
    itemSelect: {
      handler() {
        this.getChartData();
      },
    },
    bottomTipClick: {
      handler() {
        this.getChartData();
      },
    },
  },
  created() {
    this.getChartData();
  },
  methods: {
    /* 获取右上角下拉框数据 */
    getCurrentList() {
      getDropList({ type: this.select }).then(({ data, code }) => {
        if (code === 200) {
          this.currentList = data;
        }
      });
    },

    /* 获取echart图数据 */
    getChartData() {
      const data = {
        itemName: this.itemSelect,
        type: this.select,
        classType: this.bottomTipClick,
      };
      roadCurrent(data).then(({ data, code }) => {
        if (code === 200) {
          this.sum = 0;
          data.forEach((element) => {
            this.sum += element.value;
          });
          this.echartList = data.map((item) => {
            return {
              ...item,
              name: item.typeName,
            };
          });
          this.$nextTick(() => {
            this.drawChart();
          });
        }
      });
    },

    /* 绘制echart图 */
    drawChart() {
      if (this.echart) {
        this.echart.dispose();
      }
      this.echart = echarts.init(this.$refs.statisticChart);
      this.echart.setOption({
        color: this.colorList,
        tooltip: {
          confine: true,
          backgroundColor: "rgba(9, 24, 48, 0.5)",
          borderColor: "rgba(75, 253, 238, 0.4)",
          textStyle: {
            fontSize: 12,
            color: "#808C9F",
          },
        },
        title: [
          // 中心比例
          {
            text: "病害总数",
            left: "center",
            top: "50%",
            textStyle: {
              fontFamily: "DinBm",
              fontSize: 12,
              color: "#ffffff",
            },
          },
          {
            text: this.sum,
            left: "center",
            top: "40%",
            textStyle: {
              fontFamily: "DouYu",
              fontSize: 20,
              color: "rgba(255, 183, 89, 0.8)",
            },
          },
        ],
        grid: {
          top: "0%",
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        legend: {
          show: false,
          orient: "horizontal",
          // itemWidth: 16,
          itemHeight: 16,
          icon: "circle",
          right: 40,
          bottom: "0%",
          textStyle: {
            color: "rgba(0,0,0,0.65)",
          },
          height: 10,
          formatter: (name) => {
            const value = this.echartList.find(
              (item) => item.name === name
            ).value;
            return `${name}：${value} 人`;
          },
        },
        series: [
          {
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "50%"],
            label: {
              // 鼠标悬浮具体数据显示
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: this.echartList,
          },
        ],
      });
      window.addEventListener("resize", () => {
        this.echart.resize();
      });
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;

  .statistic-select {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0.2rem;
  }

  .statistic-chart {
    width: 50%;
    height: 100%;
    z-index: 0;
    background-image: url("../../../assets/screen/traffic/statistic-chart.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100%;
  }

  .statistic-lenged {
    width: 50%;
    height: 100%;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    z-index: 0;

    .lenged-item {
      width: 100%;
      height: 1rem;
      margin: 0.1rem 0;
      display: flex;
      align-items: center;
      color: #808c9f;
      font-size: 0.7rem;

      .index {
        width: 0.8rem;
        height: 0.5rem;
        margin-right: 0.5rem;
      }

      .name {
        width: 5rem;
      }

      .rate {
        font-size: 0.8rem;
        width: 2.5rem;
      }

      .value {
        font-size: 0.8rem;
        width: 3rem;
      }
    }
  }
}
</style>