优化

hejianhao

8 天以前 11a64095fee9a9202ebf2a1e3b905f1ad52fd552

 src/view/home/index.vue

@@ -126,8 +126,19 @@
      <!-- 预警情况统计 -->
      <div class="warnCount">
        <div class="title ">预警情况统计</div>
        <div class="countChart" id="countChart"></div>
        <div class="noData" v-if="countList.length == 0">
        <el-table v-if="tableData.length" :data="tableData" border stripe style="width: 100%">
          <el-table-column prop="operate_type" label="车辆类型">
            <template #default="{ row }">
              <span class="operate_type" @click="toWarningList(row.operate_type)">{{ row.operate_type }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="预警总数"></el-table-column>
          <el-table-column prop="processed" label="已处理数"></el-table-column>
          <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>
@@ -166,6 +177,7 @@
  getRealVideo,
  playDetection,
  closeRealVideo,
  getAllWarnGroupVehicleType
} from "./service";
export default {
  data() {
@@ -199,6 +211,7 @@
      serverPort: "", //监控端口
      carId: "", //监控车辆
      urlLink: '',//视频地址
      tableData: [], //预警情况统计数据
    };
  },
  watch: {
@@ -236,8 +249,9 @@
    this.getCarStatusData();
    // this.getMapCarData(); // 移除这里的调用，因为 initMap 中会调用
    this.getWarnListData();
    this.getWarnGroupData();
    // this.getWarnGroupData();
    this.getWarnTop10Data();
    this.getVehicleType();

    this.initMap();
    if (this.timer) {
@@ -249,8 +263,9 @@
      this.getCarStatusData();
      this.getMapCarData(); // 保留定时器中的调用
      this.getWarnListData();
      this.getWarnGroupData();
      // this.getWarnGroupData();
      this.getWarnTop10Data();
      this.getVehicleType();
    }, 60000);
  },
  beforeDestroy() {
@@ -283,6 +298,17 @@
    next();
  },
  methods: {
    toWarningList(name) {
      this.$router.push({
        path: "/early-warning",
        query: { name },
      });
    },
    getVehicleType() {
      getAllWarnGroupVehicleType().then(res => {
        this.tableData = res;
      })
    },
    toCarManage(id) {
      this.$router.push({
        path: "/car-manage",
@@ -381,15 +407,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 {
@@ -758,92 +784,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) {
@@ -948,7 +974,7 @@

    .carCount {
      flex: 8;
      background: #ffffff;
      background: #f4f4ff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      padding: 14px 20px 20px 20px;
@@ -961,6 +987,7 @@
        margin-top: 11px;

        .countCard {
          background: #ffffff;
          margin-right: 20px;
          padding: 14px 60px 18px 24px;
        }
@@ -975,6 +1002,7 @@
        justify-content: space-between;

        .countCard {
          background: #ffffff;
          margin-right: 15px;
        }

@@ -1051,7 +1079,7 @@

    .carStatus {
      flex: 5;
      background: #ffffff;
      background: #f4f4ff;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      padding: 14px 84px 20px 84px;
@@ -1120,7 +1148,7 @@
    flex: 1;
    height: calc(100% - 20px);
    margin: 20px 17px 0 20px;
    background: #ffffff;
    background: #f4f4ff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
@@ -1147,7 +1175,7 @@
      .companyCard {
        width: 140px;
        // height: 90px;
        background: #f4f4ff;
        background: #fff;
        border-radius: 0px 10px 10px 0px;
        position: relative;

@@ -1291,7 +1319,7 @@
    }

    .warnCount {
      position: relative;
      // position: relative;

      #countChart {
        width: 100%;
@@ -1303,9 +1331,9 @@
        flex-direction: column;
        align-content: center;
        justify-content: center;
        position: absolute;
        bottom: 0;
        left: 0;
        // position: absolute;
        // bottom: 0;
        // left: 0;
        width: 100%;
        height: 180px;
      }
@@ -1315,7 +1343,9 @@
      position: relative;

      .rankChart {
        padding: 5px;
        width: 100%;
        background: #fff;
        // height: 300px;

        .rankItem {
@@ -1377,4 +1407,15 @@
    }
  }
}

.operate_type {
  color: #1677ff;
  cursor: pointer;

  &:hover {
    color: #0052d9;
  }

  text-decoration: underline;
}
</style>