From 11a64095fee9a9202ebf2a1e3b905f1ad52fd552 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期三, 14 五月 2025 14:46:17 +0800
Subject: [PATCH] 优化
---
src/view/home/index.vue | 255 +++++++++++++++++++++++++++++---------------------
1 files changed, 148 insertions(+), 107 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index 236433b..e2c9c01 100644
--- a/src/view/home/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.7.1