优化

hejianhao

8 天以前 11a64095fee9a9202ebf2a1e3b905f1ad52fd552

优化

 src/view/early-warning/index.vue

@@ -82,7 +82,7 @@
            </el-col>

            <el-col :span="6">

                <div class="stat-card">

                    <div class="title fs--14 color-grey-6">处理进度</div>

                    <div class="title fs--14 color-grey-6">处置率</div>

                    <div class="value fs--20 color1 mt--10">

                        {{ progress }}%

                    </div>

@@ -264,6 +264,12 @@
            let arr = [{ name: '全部' }]

            this.options = [...arr, ...res];

        });

        const query = this.$route.query;

        if (query && Object.keys(query).length > 0) {

            if (query.name) {

                this.activeName = query.name;

            }

        }

    },

    methods: {

        closeDrawer() {


 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>

 src/view/home/service.js

@@ -40,4 +40,9 @@
// 通知后端开始关闭视频流
export const closeRealVideo = (id) => {
    return axios.get(`/system/car/closeRealVideo/${id}`)
}

// 预警情况统计
export const getAllWarnGroupVehicleType = (id) => {
    return axios.get(`/system/warn/getAllWarnGroupVehicleType`)
}

 src/view/systemManage/role/index.vue

@@ -1,7 +1,7 @@
<template>
  <div>
    <el-card>
      <el-form :inline="true" class="demo-form-inline">
    <div class="form flex a-center j-between mt--23">
      <el-form :inline="true" class="demo-form-inline ml--30">
        <el-form-item label="角色名称">
          <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
@@ -10,13 +10,12 @@
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px;">
      <div class="add_btn">
        <el-button v-permission="24" icon="el-icon-plus" @click="add" type="primary">添加角色</el-button>
      </div>
      <el-table ref="tableSort" v-loading="listLoading" stripe :data="data"
        :element-loading-text="elementLoadingText">
    </div>
    <div class="table-box-btn mt--23 ml--30">
      <el-button v-permission="24" icon="el-icon-plus" @click="add" type="primary">添加角色</el-button>
    </div>
    <div class="table-box ml--30 mt--23 mr--30">
      <el-table ref="tableSort" v-loading="listLoading" stripe :data="data" :element-loading-text="elementLoadingText">
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
@@ -26,7 +25,8 @@
            <div>
              <el-button v-permission="27" type="text"
                @click="$router.push(`/systemManage/role-detail?roleId=${row.roleId}`)">详情</el-button>
              <el-button v-if="row.roleId != 1" v-permission="25" type="text" @click="$router.push(`/systemManage/add-role?roleId=${row.roleId}`)">编辑</el-button>
              <el-button v-if="row.roleId != 1" v-permission="25" type="text"
                @click="$router.push(`/systemManage/add-role?roleId=${row.roleId}`)">编辑</el-button>
              <el-button v-if="row.roleId != 1" v-permission="26" type="text" @click="del(row)">删除</el-button>
            </div>
          </template>
@@ -39,7 +39,7 @@
          <span>共{{ pagination.total }}条</span>
        </el-pagination>
      </div>
    </el-card>
    </div>
    <ShowDelConfirm :show="delShow" @close="delShow = false" @confirm="delConfirm" />
  </div>
</template>