徐涛

src/api/modules/index.ts

@@ -106,3 +106,7 @@ export const getVideoDeviceList = (param: any = {}) => {
 export const videoStream=(param:any={})=>{
     return GET('/video/stream',param)
 }
+// 今日各监测点车流情况
+export const getPointTraffic=(param:any={})=>{
+    return GET('/device/trafficFlow/pointTraffic',param)
+}

src/views/component/EventStatus.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script setup>
-  
 defineProps({
   pendingCount: {
     type: Number,

src/views/component/EventTask.vue

@@ -42,40 +42,45 @@ const formatTime = (time: string) => {
   return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
 };
 onMounted(() => {
-   const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
+  const endTime = dayjs().endOf("day").format("YYYY-MM-DD HH:mm:ss");
-   const startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
+  const startTime = dayjs()
+    .subtract(6, "day")
+    .startOf("day")
+    .format("YYYY-MM-DD HH:mm:ss");
   meventListHistory({ startTime, endTime }).then((res) => {
-    console.log(res, 'rrreeesss')
+    console.log(res, "rrreeesss");
     allEvents.value = res.rows.map((item: any) => ({
       type: item.eventType,
-      location: (item.direction === '1' ? '黄骅港方向 ' : item.direction === '2' ? '邯郸方向 ' : '') + item.pilenum,
+      location:
+        (item.direction === "1"
+          ? "黄骅港方向 "
+          : item.direction === "2"
+          ? "邯郸方向 "
+          : "") + item.pilenum,
       time: item.time,
-      status: item.status == '0' ? '待处置' : '处置中',
+      status: item.status == "0" ? "待处置" : "处置中",
     }));
-  })
+  });
-})
+});
 </script>
 
 <template>
   <div class="event-task">
-    <div v-for="(event, index) in allEvents"
+    <div v-for="(event, index) in allEvents" :key="index" class="event-section">
-          :key="index" class="event-section">
       <div class="section-header">
         <div style="color: #fbfbfc">{{ event.type }}</div>
         <div
           class="event-status"
           :class="{
             processing: event.status === '处置中',
-            pending: event.status === '待处置'
+            pending: event.status === '待处置',
           }"
         >
           {{ event.status }}
         </div>
       </div>
       <div class="event-list">
-        <div
+        <div class="event-item">
-          class="event-item"
-        >
           <div class="event-info">
             <div class="location">{{ event.location }}</div>
             <div class="time">{{ formatTime(event.time) }}</div>

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({
+const monitoringPointsData = ref([]);
-  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 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", 
+  hours: [
-      "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
+    "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 month = String(today.getMonth() + 1).padStart(2, "0"); // 月份从 0 开始
-const day = String(today.getDate()).padStart(2, '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) => {
+    trafficTrend({ today: "2025-05-30", pileNum: "" }).then((res) => {
-      console.log(res, '///////////////////')
+      console.log(res, "///////////////////");
       if (res.code == 200) {
         // 清空原有数据
         trafficTrendData.realTimeValues = [];
         trafficTrendData.averageValues = [];
 
-        trafficTrendData.realTimeValues = [...res.data.map(item => item.total)];
+        trafficTrendData.realTimeValues = [
-        trafficTrendData.averageValues = [...res.data.map(item => item.avg)];
+          ...res.data.map((item) => item.total),
-        console.log(trafficTrendData, 'trafficTrendData')
+        ];
+        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);
   }
-  
 });
 
 // 趋势图时间范围选项
@@ -325,34 +366,39 @@ 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', {
+  window.dispatchEvent(
-    detail: { type: items.value[index].type, show: items.value[index].isActive }
+    new CustomEvent("toggle-map-device", {
-  }));
+      detail: {
+        type: items.value[index].type,
+        show: items.value[index].isActive,
+      },
+    })
+  );
 };
 </script>
 
@@ -370,28 +416,43 @@ const toggleSelection = (index: number) => {
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">小型车</span>
-                  <span class="percentage">{{ trafficData.car.percentage }}%</span>
+                  <span class="percentage" v-if="chartShow2"
+                    >{{ trafficData.car.percentage }}%</span
+                  >
                 </div>
                 <div class="vehicle-value car">
-                  <count-up :end-val="trafficData.car.value" :options="countupOptions" />
+                  <count-up
+                    :end-val="trafficData.car.value"
+                    :options="countupOptions"
+                  />
                 </div>
               </div>
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">货车</span>
-                  <span class="percentage">{{ trafficData.truck.percentage }}%</span>
+                  <span class="percentage"
+                    >{{ trafficData.truck.percentage }}%</span
+                  >
                 </div>
                 <div class="vehicle-value truck">
-                  <count-up :end-val="trafficData.truck.value" :options="countupOptions" />
+                  <count-up
+                    :end-val="trafficData.truck.value"
+                    :options="countupOptions"
+                  />
                 </div>
               </div>
               <div class="vehicle-item">
                 <div class="vehicle-info">
                   <span class="vehicle-name">客车</span>
-                  <span class="percentage">{{ trafficData.bus.percentage }}%</span>
+                  <span class="percentage"
+                    >{{ trafficData.bus.percentage }}%</span
+                  >
                 </div>
                 <div class="vehicle-value bus">
-                  <count-up :end-val="trafficData.bus.value" :options="countupOptions" />
+                  <count-up
+                    :end-val="trafficData.bus.value"
+                    :options="countupOptions"
+                  />
                 </div>
               </div>
             </div>
@@ -409,15 +470,26 @@ const toggleSelection = (index: number) => {
       <div class="traffic-flow-item">
         <div class="item-title">今日各监测点车流情况</div>
         <div class="item-content">
-          <monitoring-points-chart :data="monitoringPointsData.points"></monitoring-points-chart>
+          <monitoring-points-chart
+            :data="monitoringPointsData"
+            v-if="chartShow"
+          ></monitoring-points-chart>
         </div>
       </div>
       <div class="traffic-flow-item">
         <div class="item-title">
           交通流量趋势
           <div class="dropdown-container">
-            <select v-model="selectedTimeRange" @change="handleTimeRangeChange" class="custom-select">
+            <select
-              <option v-for="option in timeRangeOptions" :key="option.value" :value="option.value">
+              v-model="selectedTimeRange"
+              @change="handleTimeRangeChange"
+              class="custom-select"
+            >
+              <option
+                v-for="option in timeRangeOptions"
+                :key="option.value"
+                :value="option.value"
+              >
                 {{ option.label }}
               </option>
             </select>
@@ -427,12 +499,20 @@ const toggleSelection = (index: number) => {
           <traffic-trend-chart :data="trafficTrendData"></traffic-trend-chart>
         </div>
         <div class="eqmMange">
-          <div v-for="(item, index) in items" :key="index" class="eqm-item" :class="{ active: item.isActive }"
+          <div
+            v-for="(item, index) in items"
+            :key="index"
+            class="eqm-item"
+            :class="{ active: item.isActive }"
             @click="toggleSelection(index)"
-            :style="{ backgroundImage: `url(${item.isActive ? item.activeImg : item.defaultImg})` }"></div>
+            :style="{
+              backgroundImage: `url(${
+                item.isActive ? item.activeImg : item.defaultImg
+              })`,
+            }"
+          ></div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -544,16 +624,16 @@ const toggleSelection = (index: number) => {
               &.car {
                 border-radius: 8px 8px 8px 8px;
                 background: rgba(253, 187, 103, 0.1);
-                color: #FDBB67;
+                color: #fdbb67;
               }
 
               &.truck {
-                color: #59A2FC;
+                color: #59a2fc;
                 background-color: rgba(0, 200, 255, 0.1);
               }
 
               &.bus {
-                color: #00FFFF;
+                color: #00ffff;
                 background-color: rgba(0, 255, 255, 0.1);
               }
             }

src/views/component/monitoring-points-chart.vue

@@ -1,28 +1,23 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted, defineProps } from "vue";
+import { ref, reactive, onMounted, defineProps, nextTick } from "vue";
 import useCharts from "@/hooks/useEcharts";
 import type { EChartsOption } from "echarts";
-
+import { getPointTraffic } from "@/api/modules/index";
+// import { nextTick } from "process";
 // 定义数据点类型接口
 interface Point {
-  name: string;
+  scope: string;
-  weeklyAvg: number;
+  totalTraffic: number;
-  dailyTotal: number;
+  weekAvg: number;
 }
 
 const props = defineProps({
   data: {
     type: Array as () => Point[],
-    default: () => [
+    default: () => [],
-      { 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 data = ref([]);
 // 图表容器引用
 const chartRef = ref<HTMLElement | null>(null);
 
@@ -59,7 +54,7 @@ const chartOptions: EChartsOption = {
   },
   xAxis: {
     type: "category",
-    data: props.data.map((point: Point) => point.name),
+    data: props.data.map((point: Point) => point.scope),
     axisLine: {
       lineStyle: {
         color: "#1e3d6f",
@@ -86,7 +81,7 @@ const chartOptions: EChartsOption = {
       color: "#fff",
       fontSize: 22,
     },
-    max: 30000,
+    // max: 30000,
   },
   series: [
     {
@@ -111,7 +106,7 @@ const chartOptions: EChartsOption = {
           ],
         },
       },
-      data: props.data.map((point: Point) => point.weeklyAvg),
+      data: props.data.map((point: Point) => point.weekAvg),
     },
     {
       name: "当日累计",
@@ -135,7 +130,7 @@ const chartOptions: EChartsOption = {
           ],
         },
       },
-      data: props.data.map((point: Point) => point.dailyTotal),
+      data: props.data.map((point: Point) => point.totalTraffic),
     },
   ],
 };

src/views/component/right.vue

@@ -3,13 +3,19 @@ import { ref, onMounted, computed } from "vue";
 import EventStatus from "./EventStatus.vue";
 import EventTask from "./EventTask.vue";
 import RealTimeImage from "./RealTimeImage.vue";
-import { weatherForecast, weatherHourly, todayStatusCount, todayHourly, getDictData } from "@/api/modules/index";
+import {
-import { useTodayTime, } from "@/utils/packge";
+  weatherForecast,
+  weatherHourly,
+  todayStatusCount,
+  todayHourly,
+  getDictData,
+} from "@/api/modules/index";
+import { useTodayTime } from "@/utils/packge";
 
 const { todayTime, getTodayTime } = useTodayTime();
 // 模拟数据，实际项目中可能需要从API获取
-const pendingCount = ref<string>('');
+const pendingCount = ref<string>("");
-const processingCount = ref<string>('');
+const processingCount = ref<string>("");
 const serviceArea = ref<any[]>([]);
 const Hub = ref<any[]>([]);
 const Intercommunication = ref<any[]>([]);
@@ -36,32 +42,40 @@ const toggleAreaType = (id: string) => {
 };
 onMounted(() => {
   todayStatusCount({ todayTime: todayTime.value }).then((res: any) => {
+    // alert(".............");
+    // alert(JSON.stringify(res.data));
     if (res.code === 200) {
       res.data.forEach((item: any) => {
-          if(item.status == '0'){ //待处理
+        if (item.status == "0") {
-            pendingCount.value = item.count || 0
+          //待处理
-          } else if(item.status == '2'){ //处置中
+          pendingCount.value = item.count || 0;
-            processingCount.value = item.count || 0
+          // alert(pendingCount.value);
+        } else if (item.status == "2") {
+          //处置中
+          processingCount.value = item.count || 0;
         }
       });
     }
-    })
+  });
-    getDictData("hb_service_area").then((res: any) => { //服务区
+  getDictData("hb_service_area").then((res: any) => {
+    //服务区
     if (res.code === 200) {
       serviceArea.value = res.data || [];
     }
   });
-    getDictData("hb_hub").then((res: any) => {  //枢纽
+  getDictData("hb_hub").then((res: any) => {
+    //枢纽
     if (res.code === 200) {
       Hub.value = res.data || [];
     }
   });
-    getDictData("hb_interchange").then((res: any) => { //互通
+  getDictData("hb_interchange").then((res: any) => {
+    //互通
     if (res.code === 200) {
       Intercommunication.value = res.data || [];
     }
   });
-})
+});
 const currentAreaList = computed(() => {
   const selectedType = areaTypes.value.find((type) => type.selected);
   if (selectedType?.id === "service") {

vite.config.ts

@@ -8,22 +8,21 @@
  */
 
 /// <reference types="vite/client" />
-import type { UserConfig, ConfigEnv } from 'vite';
+import type { UserConfig, ConfigEnv } from "vite";
-import { defineConfig, loadEnv } from 'vite'
+import { defineConfig, loadEnv } from "vite";
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
-import AutoImport from 'unplugin-auto-import/vite'
+import AutoImport from "unplugin-auto-import/vite";
-import Components from 'unplugin-vue-components/vite'
+import Components from "unplugin-vue-components/vite";
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
 //https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md
-import ElementPlus from 'unplugin-element-plus/vite'
+import ElementPlus from "unplugin-element-plus/vite";
-import {createHtmlPlugin} from 'vite-plugin-html';
+import { createHtmlPlugin } from "vite-plugin-html";
 export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
-
   const viteEnv = loadEnv(mode, process.cwd());
 
   return {
-    base: '/',
+    base: "/",
     plugins: [
       vue(),
       AutoImport({ resolvers: [ElementPlusResolver()] }),
@@ -47,32 +46,37 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
     ],
     publicDir: "public",
     build: {
-      outDir: 'dist',
+      outDir: "dist",
-      assetsDir: 'static'
+      assetsDir: "static",
     },
     server: {
-      host: '0.0.0.0',
+      host: "0.0.0.0",
       port: 8080,
       open: true,
       strictPort: false,
       proxy: {
         [viteEnv.VITE_APP_CONTROL_BASE_API]: {
-          target: 'http://172.16.1.133:8081/xjIotApi',
+          target: "http://172.16.1.128:8090/xjIotApi",
           changeOrigin: true,
-          rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`), ''),
+          rewrite: (path) =>
+            path.replace(
+              new RegExp(`^${viteEnv.VITE_APP_CONTROL_BASE_API}`),
+              ""
+            ),
         },
         [viteEnv.VITE_APP_BASE_API]: {
-          target: 'http://172.16.1.133:8081/iotApi',
+          target: "http://172.16.1.128:8090/iotApi",
           changeOrigin: true,
-          rewrite: (path) => path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ''),
+          rewrite: (path) =>
-        }
+            path.replace(new RegExp(`^${viteEnv.VITE_APP_BASE_API}`), ""),
+        },
       },
     },
     resolve: {
       alias: {
         "@": resolve(__dirname, "./src"),
-        "components": resolve(__dirname, "./src/components"),
+        components: resolve(__dirname, "./src/components"),
-        "api": resolve(__dirname, "./src/api")
+        api: resolve(__dirname, "./src/api"),
       },
     },
     css: {
@@ -81,6 +85,6 @@ export default defineConfig(({ command, mode }: ConfigEnv): UserConfig => {
           additionalData: `@use "./src/assets/css/variable.scss" as *;`,
         },
       },
-    }
+    },
   };
 });