0626

src/api/modules/index.ts

@@ -110,3 +110,7 @@ export const videoStream=(param:any={})=>{
 export const getListCurrentMonth = (param: any = {}) => {
     return GET('/device/mevent/listCurrentMonth', 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

@@ -41,41 +41,46 @@ const allEvents = ref<EventItem[]>([
 const formatTime = (time: string) => {
   return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
 };
-onMounted(()=>{
+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()
-  meventListHistory({startTime, endTime}).then((res)=>{
+    .subtract(6, "day")
-    console.log(res, 'rrreeesss')
+    .startOf("day")
+    .format("YYYY-MM-DD HH:mm:ss");
+  meventListHistory({ startTime, endTime }).then((res) => {
+    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 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/RealTimeImageCenter.vue

@@ -16,6 +16,13 @@ const areaData = ref({
   unit: "m²",
 });
 
+const props = defineProps({
+  popUpContent: {
+    type: Object,
+    default: () => ({
+    })
+  }
+});
 // 车位数据
 const parkingData = ref([
   { label: "充电车位", value: 1888 },
@@ -113,6 +120,7 @@ const togglePoint = async (point: any) => {
   }
 };
 onMounted(() => {
+    console.log(props.popUpContent, 'ddddddddddddd')
   const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
   getVideoDeviceList({ endTime: endTime, currentPage: 1, pageSize: 2 }).then((res) => {  //暂时是公共的 先取两条
     console.log(res, 'rrrrrrrrrrrrrrrrrrrrrrrrrsssssssssssss')
@@ -136,9 +144,9 @@ onMounted(() => {
         <!-- 添加标题 -->
         <div class="title-header">
           <div class="header-icon">
-            <div class="camera-square-small" title="服务区基本信息"></div>
+            <div class="camera-square-small" title= "{{props.popUpContent.type}} 基本信息"></div>
           </div>
-          <span>服务区基本信息</span>
+          <span>{{props.popUpContent.type}}基本信息</span>
         </div>
         <!-- 状态内容 -->
         <div class="status-content">
@@ -148,19 +156,19 @@ onMounted(() => {
           <div class="corner-decoration bottom-right"></div>
           <div class="status-info">
             <div class="info-left">
-              <img :src="fwqImage" alt="服务区" class="fwq-image" />
+              <img :src=" props.popUpContent.fwqImage" alt="服务区" class="fwq-image" />
             </div>
             <div class="info-center">
-              <span class="info-label">占地面积(m²)</span>
+              <span class="info-label">{{ props.popUpContent.areaData.name1 }}</span>
             </div>
             <div class="info-right">
-              <span class="info-value">{{ areaData.value }}</span>
+              <span class="info-value">{{ props.popUpContent.areaData.value }}</span>
             </div>
           </div>
 
           <!-- 添加车位信息展示 -->
           <div class="parking-info">
-            <div v-for="(item, index) in parkingData" :key="index" class="parking-item">
+            <div v-for="(item, index) in props.popUpContent.llist" :key="index" class="parking-item">
               <div class="parking-label">{{ item.label }}</div>
               <div class="parking-value">{{ item.value }}</div>
             </div>

src/views/component/center.vue

@@ -4,8 +4,8 @@
       <div v-for="(stat, index) in statistics" :key="index" class="stat-card" style="position: relative;">
   <div
     class="box"
-    @mouseenter="stat.label === '服务区' && (showDropdown = true)"
+    @mouseenter="stat.label=='服务区'?showDropdown = true:stat.label==='收费站'?showDropdown1 = true:stat.label==='桥梁（座）'?showDropdown2 = true:stat.label==='枢纽互通（座）'?showDropdown3 = true:''"
-    @mouseleave="stat.label === '服务区' && (showDropdown = false)"
+    @mouseleave="stat.label=='服务区'?showDropdown = false:stat.label==='收费站'?showDropdown1 = false:stat.label==='桥梁（座）'?showDropdown2 = false:stat.label==='枢纽互通（座）'?showDropdown3 = false:''"
     style="position: relative;"
   >
     <div class="icon-wrapper">
@@ -33,7 +33,61 @@
           :key="area"
           @click="selectServiceArea(area)"
         >
-          {{ area }}
+          {{ area.name }}
+        </div>
+      </div>
+    </template>
+    <!-- 收费站 -->
+      <template v-if="stat.label === '收费站'">
+      <div
+        v-show="showDropdown1"
+        class="dropdown large-dropdown"
+        @mouseenter="showDropdown1 = true"
+        @mouseleave="showDropdown1 = false"
+      >
+        <div
+          class="dropdown-item"
+          v-for="area in tollStationList"
+          :key="area"
+          @click="selectServiceArea(area)"
+        >
+          {{ area.name }}
+        </div>
+      </div>
+    </template>
+ <!-- 桥梁 -->
+     <template v-if="stat.label === '桥梁（座）'">
+      <div
+        v-show="showDropdown2"
+        class="dropdown large-dropdown"
+        @mouseenter="showDropdown2 = true"
+        @mouseleave="showDropdown2 = false"
+      >
+        <div
+          class="dropdown-item"
+          v-for="area in bridgeList"
+          :key="area"
+          @click="selectServiceArea(area)"
+        >
+          {{ area.name }}
+        </div>
+      </div>
+    </template>
+ <!-- 枢纽互通（座） -->
+     <template v-if="stat.label === '枢纽互通（座）'">
+      <div
+        v-show="showDropdown3"
+        class="dropdown large-dropdown"
+        @mouseenter="showDropdown3 = true"
+        @mouseleave="showDropdown3 = false"
+      >
+        <div
+          class="dropdown-item"
+          v-for="area in hubIntercommunicationList"
+          :key="area"
+          @click="selectServiceArea(area)"
+        >
+          {{ area.name }}
         </div>
       </div>
     </template>
@@ -60,7 +114,7 @@
         <div class="close-btn" @click="closeDialog">×</div>
       </div>
       <div class="map-con">
-        <RealTimeImageCenter />
+        <RealTimeImageCenter  :popUpContent="popUpContent"/>
       </div>
     </div>
     <div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
@@ -92,6 +146,7 @@
 import { ref, nextTick } from "vue";
 import { onMounted } from 'vue';
 import fee from "@/assets/img/fee.png";
+import fwq from "@/assets/img/fwq2.png";
 import km from "@/assets/img/km.png";
 import toll from "@/assets/img/toll.png";
 import RealTimeImageCenter from "./RealTimeImageCenter.vue";
@@ -102,6 +157,10 @@ import { getDeviceList } from "@/api/modules/index";
 import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
 import Map from "./map.vue"
 import { emitter } from '@/utils/eventBus';
+import fwqImage from "@/assets/img/fwq.png";
+import ql from "@/assets/img/ql.png";
+import sfz from "@/assets/img/sfz.png";
+import snht from "@/assets/img/snht.png";
 const showServiceArea = ref(false);
 const showMap = ref(true);
 const showDeviceInfo = ref(false);
@@ -110,13 +169,316 @@ const closeDialog = () => {
   showServiceArea.value = false;
 };
 const showDropdown = ref(false);
-const serviceAreas = ["南皮服务区", "东光服务区"];
+const showDropdown1 = ref(false);
-const selectedServiceArea = ref("南皮服务区");
+const showDropdown2 = ref(false);
+const showDropdown3 = ref(false);
+//服务区
+const serviceAreas =[{
+    name:"南皮服务区",
+    type:'服务区',
+    fwqImage:fwqImage,
+    areaData:{
+    value: 6000,
+    unit: "m²",
+    name1:'占地面积(m²)'
+    },
+llist:[
+  { label: "充电车位", value: 1888 },
+  { label: "大型车位", value: 60 },
+  { label: "小型车位", value: 200 },
+  { label: "危险品车位", value: 20 },
+]},{
+   name:"东光服务区",
+   type:'服务区',
+   fwqImage:fwqImage,
+   areaData:{
+    value: 6000,
+    unit: "m²",
+    name1:'占地面积(m²)'
+    },
+    llist:[
+  { label: "充电车位", value: 1888 },
+  { label: "大型车位", value: 60 },
+  { label: "小型车位", value: 200 },
+  { label: "危险品车位", value: 20 }] 
+}]
+const popUpContent= ref([])
+const selectedServiceArea = ref({});
+//收费站
+// const tollStationList = ["连镇", "找王", "寨子", "盐山", "盐山东"];
+
+const tollStationList = [{
+    name:"连镇",
+    type:'收费站',
+    fwqImage:sfz,
+    areaData:{
+    value: 1200,
+    unit: "m²",
+    name1:'建筑面积(m²)'
+    },
+llist:[
+  { label: "入口ETC车道", value: 2 },
+  { label: "出口ETC车道", value: 2 },
+  { label: "入口混合车道", value: 2 },
+  { label: "出口混合车道", value: 2 },
+]},{
+   name:"找王",
+   type:'收费站',
+   fwqImage:sfz,
+    areaData:{
+    value: 1200,
+    unit: "m²",
+    name1:'建筑面积(m²)'
+    },
+llist:[
+  { label: "入口ETC车道", value: 2 },
+  { label: "出口ETC车道", value: 2 },
+  { label: "入口混合车道", value: 2 },
+  { label: "出口混合车道", value: 2 },
+]
+},{
+   name:"寨子",
+   type:'收费站',
+   fwqImage:sfz,
+    areaData:{
+    value: 1200,
+    unit: "m²",
+    name1:'建筑面积(m²)'
+    },
+llist:[
+  { label: "入口ETC车道", value: 2 },
+  { label: "出口ETC车道", value: 2 },
+  { label: "入口混合车道", value: 2 },
+  { label: "出口混合车道", value: 2 },
+]
+},{
+   name:"盐山",
+   type:'收费站',
+   fwqImage:sfz,
+    areaData:{
+    value: 1200,
+    unit: "m²",
+    name1:'建筑面积(m²)'
+    },
+llist:[
+  { label: "入口ETC车道", value: 1 },
+  { label: "出口ETC车道", value: 1 },
+  { label: "入口混合车道", value: 2 },
+  { label: "出口混合车道", value: 2 },
+]
+},{
+   name:"盐山东",
+   type:'收费站',
+   fwqImage:sfz,
+    areaData:{
+    value: 1200,
+    unit: "m²",
+    name1:'建筑面积(m²)'
+    },
+llist:[
+  { label: "入口ETC车道", value: 2 },
+  { label: "出口ETC车道", value: 2 },
+  { label: "入口混合车道", value: 2 },
+  { label: "出口混合车道", value: 2 },
+]
+}];
+const tollStation = ref("连镇");
+//桥梁
+// const bridgeList = ["南运河特大桥", "秦庄村大桥", "宣惠河大桥", "沙河大桥", "龙王河大桥", "大单沟大桥", "大商平底渠大桥"];
+const bridgeList = [{
+   name:"南运河特大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value: 1003.838,
+    unit: "m²",
+    name1:'长度(m)（沧州境内）'
+    },
+llist:[
+  { label: "中心桩号", value: 'K61+407' },
+]
+},{
+   name:"秦庄村大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:577.543,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K62+401' },
+]
+},{
+   name:"宣惠河大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:702,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K65+716' },
+]
+},{
+   name:"沙河大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:131,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K76+079' },
+]
+},{
+   name:"龙王河大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:156,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K90+280' },
+]
+},{
+   name:"大单沟大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:127,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K96+099' },
+]
+},{
+   name:"大商平底渠大桥",
+   type:'桥梁（座）',
+   fwqImage:ql,
+    areaData:{
+    value:106,
+    unit: "m²",
+    name1:'长度(m)'
+    },
+llist:[
+  { label: "中心桩号", value: 'K114+265' },
+]
+}];
+const bridge1 = ref("南运河特大桥");
+//枢纽互通
+// const hubIntercommunicationList = ["连镇互通", "大屯枢纽", "找王互通", "寨子互通", "小庄枢纽", "盐山互通", "盐山东互通"];
+const hubIntercommunicationList = [{
+   name:"连镇互通",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K64+776',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: 'G105(京澳线)' },
+  { label: "被交路等级", value: '一级公路' },
+]
+},{
+   name:"大屯枢纽",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K69+454',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: '京台高速' },
+  { label: "被交路等级", value: '高速公路' },
+]
+},{
+   name:"找王互通",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K80+359',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: 'S337(辛平线)' },
+  { label: "被交路等级", value: '一级公路' },
+]
+},{
+   name:"寨子互通",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K80+359',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: 'G104(京平线)' },
+  { label: "被交路等级", value: '二级公路' },
+]
+},{
+   name:"小庄枢纽",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K119+655',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: '京沪高速' },
+  { label: "被交路等级", value: '高速公路' },
+]
+},{
+   name:"盐山互通",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'S216(吕千线)',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: 'S216(吕千线)' },
+  { label: "被交路等级", value: '一级公路' },
+]
+},{
+   name:"盐山东互通",
+   type:'枢纽互通',
+   fwqImage:snht,
+    areaData:{
+    value:'K139+358',
+    unit: "m²",
+    name1:'桩号'
+    },
+llist:[
+  { label: "被交路名称", value: 'G205(山深线)' },
+  { label: "被交路等级", value: '一级公路' },
+]
+}];
+const hubIntercommunication = ref("连镇互通");
 
 function selectServiceArea(area) {
-  selectedServiceArea.value = area;
+     console.log(area, 'tttttttttt')
+  selectedServiceArea.value = area.name;
+popUpContent.value = area
+  tollStation.value = area;
+    bridge1.value = area;
+      hubIntercommunication.value = area;
   showServiceArea.value = true;
   showDropdown.value = false;
+   showDropdown1.value = false;
+   showDropdown2.value = false;
+   showDropdown3.value = false;
 }
 // 统计数据配置
 const statistics = ref([
@@ -131,7 +493,7 @@ const statistics = ref([
     label: "收费站",
   },
   {
-    image: fee,
+    image: fwq,
     value: "2",
     label: "服务区",
   },
@@ -143,7 +505,7 @@ const statistics = ref([
   {
     image: hub,
     value: "7",
-    label: "隧道互通（座）",
+    label: "枢纽互通（座）",
   },
 ]);
 

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);
   }
-  
 });
 
 // 趋势图时间范围选项
@@ -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', {
+  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[]>([]);
@@ -30,38 +36,46 @@ const areaTypes = ref([
 
 // 切换区域类型选中状态
 const toggleAreaType = (id: string) => {
-   areaTypes.value.forEach((type) => {
+  areaTypes.value.forEach((type) => {
     type.selected = type.id === id;
   });
 };
-onMounted(()=>{
+onMounted(() => {
-    todayStatusCount({todayTime: todayTime.value}).then((res: any) => {
+  todayStatusCount({ todayTime: todayTime.value }).then((res: any) => {
-      if(res.code === 200){
+    // alert(".............");
-        res.data.forEach((item: any) => {
+    // alert(JSON.stringify(res.data));
-          if(item.status == '0'){ //待处理
+    if (res.code === 200) {
-            pendingCount.value = item.count || 0
+      res.data.forEach((item: any) => {
-          } else if(item.status == '2'){ //处置中
+        if (item.status == "0") {
-            processingCount.value = item.count || 0
+          //待处理
-          }
+          pendingCount.value = item.count || 0;
-        });
+          // alert(pendingCount.value);
-      }
+        } else if (item.status == "2") {
-    })
+          //处置中
-    getDictData("hb_service_area").then((res: any) => { //服务区
+          processingCount.value = item.count || 0;
-      if (res.code === 200) {
+        }
-        serviceArea.value = res.data || [];
+      });
-      }
+    }
-    });
+  });
-    getDictData("hb_hub").then((res: any) => {  //枢纽
+  getDictData("hb_service_area").then((res: any) => {
-      if (res.code === 200) {
+    //服务区
-        Hub.value = res.data || [];
+    if (res.code === 200) {
-      }
+      serviceArea.value = res.data || [];
-    });
+    }
-    getDictData("hb_interchange").then((res: any) => { //互通
+  });
-      if (res.code === 200) {
+  getDictData("hb_hub").then((res: any) => {
-        Intercommunication.value = res.data || [];
+    //枢纽
-      }
+    if (res.code === 200) {
-    });
+      Hub.value = res.data || [];
-})
+    }
+  });
+  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,35 +8,34 @@
  */
 
 /// <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()] }),
       Components({ resolvers: [ElementPlusResolver()] }),
       ElementPlus(),
       createHtmlPlugin({
-            inject: {
+        inject: {
-                data: {
+          data: {
-                    injectMapScript: `<script src="./public/static/map_load.js"></script>`,
+            injectMapScript: `<script src="./public/static/map_load.js"></script>`,
-                },
+          },
-            },
+        },
-            minify: true,
+        minify: true,
-        }),
+      }),
       // Compression({
       //   algorithm: 'gzip',
       //   test: /\.(js|css|html|json|svg|jpe?g|png|gif)$/i,
@@ -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.128:8090/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 *;`,
         },
       },
-    }
+    },
   };
-});
+});