From 5c387bd3f785341fb0cbd638c61804ca6d77d6e1 Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期四, 15 五月 2025 17:36:28 +0800
Subject: [PATCH] 优化
---
src/view/home/index.vue | 199 +++++++++++++++++++++++++------------------------
1 files changed, 101 insertions(+), 98 deletions(-)
diff --git a/src/view/home/index.vue b/src/view/home/index.vue
index b47686d..913ba4d 100644
--- a/src/view/home/index.vue
+++ b/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) {
--
Gitblit v1.7.1