优化

hejianhao

7 天以前 5c387bd3f785341fb0cbd638c61804ca6d77d6e1

 src/view/home/index.vue

@@ -137,10 +137,13 @@
          <el-table-column prop="unprocessed" label="未处理数"></el-table-column>
          <el-table-column prop="rate" label="处置率"></el-table-column>
        </el-table>
        <!-- <div class="countChart" id="countChart"></div> -->
        <div class="noData" v-else>
          <el-empty description="暂无数据" :image-size="80"></el-empty>
        </div>
      </div>
      <div class="warnCount">
        <div class="title ">预警类型排行榜</div>
        <div class="countChart" id="countChart"></div>
      </div>
      <!-- 预警排行榜(前10) -->
      <div class="warnRank">
@@ -249,7 +252,7 @@
    this.getCarStatusData();
    // this.getMapCarData(); // 移除这里的调用，因为 initMap 中会调用
    this.getWarnListData();
    // this.getWarnGroupData();
    this.getWarnGroupData();
    this.getWarnTop10Data();
    this.getVehicleType();

@@ -263,7 +266,7 @@
      this.getCarStatusData();
      this.getMapCarData(); // 保留定时器中的调用
      this.getWarnListData();
      // this.getWarnGroupData();
      this.getWarnGroupData();
      this.getWarnTop10Data();
      this.getVehicleType();
    }, 60000);
@@ -407,15 +410,15 @@
      }
    },
    // 获取预警统计情况数据
    // async getWarnGroupData() {
    //   try {
    //     const res = await getWarnGroupCount();
    //     this.countList = res;
    //     this.getCountList();
    //   } catch (error) {
    //     this.$message.error("获取预警统计情况数据失败");
    //   }
    // },
    async getWarnGroupData() {
      try {
        const res = await getWarnGroupCount();
        this.countList = res;
        this.getCountList();
      } catch (error) {
        this.$message.error("获取预警统计情况数据失败");
      }
    },
    // 获取预警排行数据
    async getWarnTop10Data() {
      try {
@@ -784,92 +787,92 @@
      }
    },
    // 获取预警情况统计
    // getCountList() {
    //   echarts.dispose(document.getElementById("countChart"));
    //   if (this.countList.length > 0) {
    //     this.chartTnit();
    //   }
    // },
    // chartTnit() {
    //   // 基于准备好的dom，初始化echarts实例
    //   const myChart = echarts.init(document.getElementById("countChart"));
    //   // 绘制数量图表
    //   myChart.setOption({
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "shadow",
    //       },
    //     },
    //     grid: {
    //       width: "auto",
    //       height: "auto",
    //       top: "5%",
    //       left: "3%",
    //       right: "4%",
    //       bottom: "0%",
    //       containLabel: true,
    //     },
    //     xAxis: [
    //       {
    //         type: "category",
    //         data: this.countList.map((item) => item.warnType),
    //         axisTick: {
    //           alignWithLabel: true,
    //           lineStyle: {
    //             color: "#777777",
    //           },
    //         },
    //         axisLabel: {
    //           color: "rgba(0, 0, 0, 0.45)",
    //           interval: 0, // 强制显示所有标签
    //           width: 60, // 设置标签宽度
    //           height: 20, // 设置标签高度
    //           overflow: 'truncate', // 截断模式
    //           ellipsis: true, // 超出显示省略号
    //           rotate: -40, // 可以根据需要调整角度
    //           formatter: function (value) {
    //             if (value.length > 4) {
    //               return value.substring(0, 4) + '...';
    //             }
    //             return value;
    //           }
    //         },
    //       },
    //     ],
    //     yAxis: [
    //       {
    //         type: "value",
    //       },
    //     ],
    //     series: [
    //       {
    //         type: "bar",
    //         barWidth: "20px",
    //         itemStyle: {
    //           borderRadius: [20, 20, 20, 20],
    //           color: (params) => {
    //             return [
    //               "#5B8FF9",
    //               "#5AD8A6",
    //               "#F6BD16",
    //               "#6DC8EC",
    //               "#945FB9",
    //               "rgba(248, 204, 65, 0.5)",
    //               "rgba(2, 179, 118, 0.5)",
    //               "rgba(254, 41, 94, 0.5)",
    //               "rgba(255, 102, 39, 0.5)",
    //               "rgba(169, 14, 253, 0.5)",
    //               "rgba(109, 200, 236, 0.5)",
    //             ][params.dataIndex];
    //           },
    //         },
    //         data: this.countList.map((item) => item.num),
    //       },
    //     ],
    //   });
    //   myChart.resize();
    // },
    getCountList() {
      echarts.dispose(document.getElementById("countChart"));
      if (this.countList.length > 0) {
        this.chartTnit();
      }
    },
    chartTnit() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("countChart"));
      // 绘制数量图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          width: "auto",
          height: "auto",
          top: "5%",
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.countList.map((item) => item.warnType),
            axisTick: {
              alignWithLabel: true,
              lineStyle: {
                color: "#777777",
              },
            },
            axisLabel: {
              color: "rgba(0, 0, 0, 0.45)",
              interval: 0, // 强制显示所有标签
              width: 60, // 设置标签宽度
              height: 20, // 设置标签高度
              overflow: 'truncate', // 截断模式
              ellipsis: true, // 超出显示省略号
              rotate: -40, // 可以根据需要调整角度
              formatter: function (value) {
                if (value.length > 4) {
                  return value.substring(0, 4) + '...';
                }
                return value;
              }
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "20px",
            itemStyle: {
              borderRadius: [20, 20, 20, 20],
              color: (params) => {
                return [
                  "#5B8FF9",
                  "#5AD8A6",
                  "#F6BD16",
                  "#6DC8EC",
                  "#945FB9",
                  "rgba(248, 204, 65, 0.5)",
                  "rgba(2, 179, 118, 0.5)",
                  "rgba(254, 41, 94, 0.5)",
                  "rgba(255, 102, 39, 0.5)",
                  "rgba(169, 14, 253, 0.5)",
                  "rgba(109, 200, 236, 0.5)",
                ][params.dataIndex];
              },
            },
            data: this.countList.map((item) => item.num),
          },
        ],
      });
      myChart.resize();
    },

    // 跳转车辆详情
    toCarDetail(id) {