{{ event.location }}
{{ formatTime(event.time) }}
diff --git a/src/views/component/left.vue b/src/views/component/left.vue
index 927a846..bd6e4d0 100644
--- a/src/views/component/left.vue
+++ b/src/views/component/left.vue
@@ -14,7 +14,11 @@ import eqm3Default from "@/assets/img/eqm/eqm3.png";
import eqm3Active from "@/assets/img/eqm/eqm3_active.png";
import eqm4Default from "@/assets/img/eqm/eqm4.png";
import eqm4Active from "@/assets/img/eqm/eqm4_active.png";
-import { todayTrafficCount, trafficTrend } from "@/api/modules/index";
+import {
+ todayTrafficCount,
+ trafficTrend,
+ getPointTraffic,
+} from "@/api/modules/index";
import { update } from "lodash-es";
// 车流量数据
const trafficData = {
@@ -37,20 +41,37 @@ const trafficData = {
};
// 监测点车流数据
-const monitoringPointsData = reactive({
- points: [
- { name: "连镇", weeklyAvg: 19500, dailyTotal: 16500 },
- { name: "扬王", weeklyAvg: 12000, dailyTotal: 14500 },
- { name: "小庄", weeklyAvg: 10800, dailyTotal: 12300 },
- { name: "寨子", weeklyAvg: 21500, dailyTotal: 26800 },
- { name: "盐山", weeklyAvg: 19700, dailyTotal: 22000 },
- ],
-});
+const monitoringPointsData = ref([]);
// 交通流量趋势数据
const trafficTrendData = reactive({
- hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00", "09:00", "10:00", "11:00","12:00",
- "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
+ hours: [
+ "00:00",
+ "01:00",
+ "02:00",
+ "03:00",
+ "04:00",
+ "05:00",
+ "06:00",
+ "07:00",
+ "08:00",
+ "09:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "17:00",
+ "18:00",
+ "19:00",
+ "20:00",
+ "21:00",
+ "22:00",
+ "23:00",
+ "24:00",
+ ],
realTimeValues: [],
averageValues: [],
});
@@ -186,37 +207,56 @@ const chartOptions: EChartsOption = {
},
],
};
+const chartShow = ref(false);
+const chartShow2 = ref(false);
+
// 初始化图表
const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
// 获取当前日期并格式化为 YYYY-MM-DD
const today = new Date();
const year = today.getFullYear();
-const month = String(today.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
-const day = String(today.getDate()).padStart(2, '0');
+const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始
+const day = String(today.getDate()).padStart(2, "0");
const todayTime = ref(`${year}-${month}-${day}`);
// 确保图表在组件挂载后渲染
onMounted(async () => {
+ let dataMap = {
+ today: todayTime.value,
+ };
+ const ress = await getPointTraffic(dataMap);
+ monitoringPointsData.value = ress.data || [];
+ chartShow.value = true;
initCharts();
+
try {
const query = {
- todayTime: todayTime.value
+ todayTime: todayTime.value,
};
const res = await todayTrafficCount(query);
if (res.data) {
res.data.forEach((item) => {
- if (item.vehicleType == 1) { //小车
+ if (item.vehicleType == 1) {
+ //小车
trafficData.car.value = item.vehicleCount;
trafficData.car.percentage = item.percentage;
- } else if (item.vehicleType == 2) { //货车
+ // alert(trafficData.car.percentage);
+ // this.$forceUpdate(); // 直接调用
+ } else if (item.vehicleType == 2) {
+ //货车
trafficData.truck.value = item.vehicleCount;
trafficData.truck.percentage = item.percentage;
- } else if (item.vehicleType == 3) { //客车
+ } else if (item.vehicleType == 3) {
+ //客车
trafficData.bus.value = item.vehicleCount;
trafficData.bus.percentage = item.percentage;
}
trafficData.total = item.total;
- })
+ });
+
+ chartShow2.value = true;
+ // this.$forceUpdate();
+ // this.$forceUpdate();
// console.log(trafficData, 'trafficData')
}
chartOptions.series[0].data = [
@@ -278,16 +318,18 @@ onMounted(async () => {
// 调用 setOptions 方法重新渲染图表
setOptions(chartOptions);
- trafficTrend({today: '2025-05-30', pileNum: ''}).then((res) => {
- console.log(res, '///////////////////')
+ trafficTrend({ today: "2025-05-30", pileNum: "" }).then((res) => {
+ console.log(res, "///////////////////");
if (res.code == 200) {
// 清空原有数据
trafficTrendData.realTimeValues = [];
trafficTrendData.averageValues = [];
- trafficTrendData.realTimeValues = [...res.data.map(item => item.total)];
- trafficTrendData.averageValues = [...res.data.map(item => item.avg)];
- console.log(trafficTrendData, 'trafficTrendData')
+ trafficTrendData.realTimeValues = [
+ ...res.data.map((item) => item.total),
+ ];
+ trafficTrendData.averageValues = [...res.data.map((item) => item.avg)];
+ console.log(trafficTrendData, "trafficTrendData");
// // 可选:重新渲染图表
// trendChartInstance.setOption({
// series: [{
@@ -297,11 +339,10 @@ onMounted(async () => {
// }]
// });
}
- })
+ });
} catch (error) {
console.error("请求设备列表失败:", error);
}
-
});
// 趋势图时间范围选项
@@ -321,38 +362,43 @@ const handleTimeRangeChange = (event: Event) => {
// 这里可以添加切换时间范围的逻辑
};
const items = ref([
-{
+ {
defaultImg: eqm1Default,
activeImg: eqm1Active,
isActive: true, // 默认选中
- type: '44', //
+ type: "44", //
},
{
defaultImg: eqm2Default,
activeImg: eqm2Active,
isActive: true,
- type: '22', // 视频监控
+ type: "22", // 视频监控
},
{
defaultImg: eqm3Default,
activeImg: eqm3Active,
isActive: true,
- type: '53', // 广播
+ type: "53", // 广播
},
{
defaultImg: eqm4Default,
activeImg: eqm4Active,
isActive: true,
- type: '15', // 情报板
+ type: "15", // 情报板
},
]);
const toggleSelection = (index: number) => {
items.value[index].isActive = !items.value[index].isActive;
// 通知地图组件切换显示/隐藏
- window.dispatchEvent(new CustomEvent('toggle-map-device', {
- detail: { type: items.value[index].type, show: items.value[index].isActive }
- }));
+ window.dispatchEvent(
+ new CustomEvent("toggle-map-device", {
+ detail: {
+ type: items.value[index].type,
+ show: items.value[index].isActive,
+ },
+ })
+ );
};
@@ -370,28 +416,43 @@ const toggleSelection = (index: number) => {
小型车
- {{ trafficData.car.percentage }}%
+ {{ trafficData.car.percentage }}%
-
+
货车
- {{ trafficData.truck.percentage }}%
+ {{ trafficData.truck.percentage }}%
-
+
客车
- {{ trafficData.bus.percentage }}%
+ {{ trafficData.bus.percentage }}%
-
+