diff --git a/src/main.js b/src/main.js index d2bdb77..25ab701 100644 --- a/src/main.js +++ b/src/main.js @@ -19,6 +19,7 @@ import Messages from './components/message/message' import "vue-easytable/libs/theme-default/index.css"; import '@/assets/css/public.scss' import "@/assets/css/index.scss" +import EventBus from './utils/eventBus' import * as filters from '@/directives/filters' @@ -37,6 +38,9 @@ Vue.use(Radio); Vue.use(Button); Vue.use(RadioGroup) +// 安装事件总线 +Vue.use(EventBus) + // datav组件 Vue.use(loading) Vue.use(borderBox13) diff --git a/src/utils/eventBus.js b/src/utils/eventBus.js new file mode 100644 index 0000000..e7f33cd --- /dev/null +++ b/src/utils/eventBus.js @@ -0,0 +1,11 @@ +import Vue from 'vue' + +// 创建事件总线 +export const EventBus = new Vue() + +// 安装插件 +EventBus.install = function (Vue) { + Vue.prototype.$eventBus = EventBus +} + +export default EventBus diff --git a/src/views/indexs/center-bottom.vue b/src/views/indexs/center-bottom.vue index 14d0a38..5c76d7e 100644 --- a/src/views/indexs/center-bottom.vue +++ b/src/views/indexs/center-bottom.vue @@ -35,9 +35,16 @@ export default { mounted() { this.getData(); window.addEventListener("resize", this.handleResize); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getData); }, beforeDestroy() { window.removeEventListener("resize", this.handleResize); + + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getData); + if (this.chart) { this.chart.dispose(); } diff --git a/src/views/indexs/center-map.vue b/src/views/indexs/center-map.vue index 1d507ce..675f6aa 100644 --- a/src/views/indexs/center-map.vue +++ b/src/views/indexs/center-map.vue @@ -81,6 +81,12 @@ export default { this.currentBgColor2 = "#00D4AA"; this.getData("china"); //this.getData("440000"); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', () => { + this.getYearData(); + this.getData(this.code); + }); }, methods: { changeShow1() { @@ -768,6 +774,10 @@ export default { destroyed() { // 销毁事件监听 this.$refs.CenterMap.chart.off("click"); + + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data'); + if (this.charts) { this.echarts.dispose(); } diff --git a/src/views/indexs/chart/month-carbon.vue b/src/views/indexs/chart/month-carbon.vue index 3768517..f8b1289 100644 --- a/src/views/indexs/chart/month-carbon.vue +++ b/src/views/indexs/chart/month-carbon.vue @@ -18,9 +18,16 @@ export default { mounted() { this.getMonthData(); window.addEventListener("resize", this.handleResize); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getMonthData); }, beforeDestroy() { window.removeEventListener("resize", this.handleResize); + + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getMonthData); + if (this.chart) { this.chart.dispose(); } diff --git a/src/views/indexs/index.vue b/src/views/indexs/index.vue index 1c45e0e..497b327 100644 --- a/src/views/indexs/index.vue +++ b/src/views/indexs/index.vue @@ -157,6 +157,8 @@ export default { }, data() { return { + refreshInterval: null, + refreshTime: 1800000, // 30分钟刷新一次,可根据需要调整 yearCarbonTon: 0, // 左侧卡片数据 leftCards: [ @@ -177,9 +179,9 @@ export default { rightCards: [ { id: 3, - value: "403 / 977", + value: "1004", unit: "辆", - label: "在线数量", + label: "总车辆数", }, { id: 4, @@ -207,6 +209,10 @@ export default { mounted() { this.getYearData(); this.getDayData(); + this.startRefreshTimer(); + }, + beforeDestroy() { + this.clearRefreshTimer(); }, methods: { getYearData() { @@ -244,16 +250,35 @@ export default { this.$set(this.leftCards[1], "value", dayHydrogen); // 更新右侧卡片 - 在线数量 - this.$set( - this.rightCards[0], - "value", - onLineCount + " / " + vehicleCount - ); + this.$set(this.rightCards[0], "value", vehicleCount); // 更新右侧卡片 - 当日行驶里程 this.$set(this.rightCards[1], "value", dayMileage); }); }, + // 启动定时器 + startRefreshTimer() { + this.refreshInterval = setInterval(() => { + this.refreshAllData(); + }, this.refreshTime); + }, + // 清除定时器 + clearRefreshTimer() { + if (this.refreshInterval) { + clearInterval(this.refreshInterval); + this.refreshInterval = null; + } + }, + // 统一刷新所有数据 + refreshAllData() { + console.log("开始刷新数据..."); + // 刷新主页面数据 + this.getYearData(); + this.getDayData(); + + // 通过事件总线通知子组件刷新数据 + this.$eventBus.$emit("refresh-all-data"); + }, }, }; diff --git a/src/views/indexs/left-bottom.vue b/src/views/indexs/left-bottom.vue index ca824e2..14c30a1 100644 --- a/src/views/indexs/left-bottom.vue +++ b/src/views/indexs/left-bottom.vue @@ -33,9 +33,16 @@ export default { mounted() { this.getMonthData(); window.addEventListener("resize", this.handleResize); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getMonthData); }, beforeDestroy() { window.removeEventListener("resize", this.handleResize); + + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getMonthData); + if (this.chart) { this.chart.dispose(); } diff --git a/src/views/indexs/left-center.vue b/src/views/indexs/left-center.vue index a25c8b9..64ec640 100644 --- a/src/views/indexs/left-center.vue +++ b/src/views/indexs/left-center.vue @@ -37,9 +37,15 @@ export default { created() { this.getData(); }, - mounted() {}, + mounted() { + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getData); + }, beforeDestroy() { this.clearData(); + + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getData); }, methods: { clearData() { diff --git a/src/views/indexs/left-top.vue b/src/views/indexs/left-top.vue index 6ca0f5a..c877f37 100644 --- a/src/views/indexs/left-top.vue +++ b/src/views/indexs/left-top.vue @@ -105,6 +105,13 @@ export default { }, mounted() { this.getData(); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getData); + }, + beforeDestroy() { + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getData); }, methods: { getData() { @@ -186,7 +193,11 @@ export default { display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, rgba(0, 212, 170, 0.1), rgba(0, 212, 170, 0.05)); + background: linear-gradient( + 135deg, + rgba(0, 212, 170, 0.1), + rgba(0, 212, 170, 0.05) + ); border-radius: 8px; } @@ -217,7 +228,7 @@ export default { .card-value .number { font-size: 22px; font-weight: 700; - color: #00D4AA; + color: #00d4aa; line-height: 1; } @@ -235,7 +246,11 @@ export default { justify-content: center; gap: 8px; padding: 16px 24px; - background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02)); + background: linear-gradient( + 135deg, + rgba(0, 212, 170, 0.05), + rgba(0, 212, 170, 0.02) + ); border-radius: 8px; border: 1px solid rgba(0, 212, 170, 0.2); } @@ -251,7 +266,7 @@ export default { display: inline-flex; align-items: center; padding: 4px 12px; - background: #00D4AA; + background: #00d4aa; color: #ffffff; font-size: 12px; font-weight: 500; diff --git a/src/views/indexs/right-bottom.vue b/src/views/indexs/right-bottom.vue index a55e2b7..7421df0 100644 --- a/src/views/indexs/right-bottom.vue +++ b/src/views/indexs/right-bottom.vue @@ -64,6 +64,13 @@ export default { }, mounted() { this.getExchangeData(); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getExchangeData); + }, + beforeDestroy() { + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getExchangeData); }, methods: { getExchangeData() { diff --git a/src/views/indexs/right-top-day.vue b/src/views/indexs/right-top-day.vue index 143b5b1..0d91a7d 100644 --- a/src/views/indexs/right-top-day.vue +++ b/src/views/indexs/right-top-day.vue @@ -21,7 +21,7 @@
| {{ item.plateNumber }} | +{{ maskPlateNumber(item.plateNumber) }} | {{ item.totalMileage }}km | {{ item.dayMileage }}km | {{ item.dayHydrogen }}kg | @@ -141,6 +141,13 @@ export default { }, mounted() { this.getExchangeData(); + + // 监听事件总线的刷新事件 + this.$eventBus.$on('refresh-all-data', this.getExchangeData); + }, + beforeDestroy() { + // 移除事件总线的刷新事件监听 + this.$eventBus.$off('refresh-all-data', this.getExchangeData); }, methods: { tableClick() { @@ -150,6 +157,15 @@ export default { closeDialog() { this.setVehicleDialog = false; }, + maskPlateNumber(plateNumber) { + if (!plateNumber || typeof plateNumber !== 'string') return plateNumber; + // 车牌号格式:省份简称+字母+5位数字(如:粤A12345) + // 隐藏中间四位数字 + if (plateNumber.length >= 7) { + return plateNumber.substring(0, 2) + '****' + plateNumber.substring(6); + } + return plateNumber; + }, getExchangeData() { currentGET("big13").then((res) => { console.log("当日汇总数据:");