添加运行轨迹等弹窗内容

package.json

@@ -37,6 +37,8 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "less": "^4.8.1",
+    "less-loader": "^13.0.0",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

src/pages/Home/index.vue

@@ -457,6 +457,15 @@
     <LiulDialog  v-if="liulShowFlag" :liulDataId="liulDataId" @close="liulShowFlag=false"/>
     <SingleEchartDialog v-if="singleEchartDialogShowFlag" :item="singleEchartData" @close="singleEchartDialogShowFlag=false"/>
     <TaizhangDialog v-if="taizhangDialogShowFlag" :resourcedirect="resourcedirect"  @close="taizhangDialogShowFlag=false"/>
+     <!-- 农机列表组件 -->
+    <zhnjCov 
+      ref="agriculturalMachinery"
+      :vehicle-data="agriculturalVehicleData"
+      :vehicle-list="vehicleList"
+      :vehicle-list-full="vehicleListFull"
+      :visible.sync="agriculturalDialogVisible"
+      @close="agriculturalDialogVisible = false"
+    />
   </ScaleBox>
 </template>
 
@@ -476,6 +485,7 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
 import hefentianqi from '@/pages/weather/weather.vue'
 import SoilDialog from '@/components/SoilDialog.vue'
 import LiulDialog from '@/components/LiulDialog.vue'
+import zhnjCov from '@/components/zhnjCov.vue';
 import {_colors} from '@/utils/color.js'
 import SingleEchartDialog from "@/components/SingleEchartDialog.vue";
 import TaizhangDialog from "@/components/TaizhangDialog.vue";
@@ -489,7 +499,8 @@ export default {
     hefentianqi,
     ScaleBox,
     SoilDialog,
-    LiulDialog
+    LiulDialog,
+    zhnjCov,
   },
   data() {
     return {
@@ -565,6 +576,9 @@ export default {
       currentVehicleInfo: null,
       vehicleLocationMarker: null,
       vehicleInfoWindow: null,
+      agriculturalDialogVisible: false,
+      agriculturalVehicleData: null,
+      vehicleListFull: null,
     };
   },
   created() {
@@ -778,7 +792,8 @@ export default {
       box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
       backdrop-filter: blur(10px);
       color: #8bb4d0;
-      ">
+      cursor: pointer;
+    " class="vehicle-info-window">
       <div style="display: flex; align-items: center; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 212, 255, 0.15); padding-bottom: 10px;">
         <span style="font-size: 28px; margin-right: 12px;">🚛</span>
         <span style="font-size: 18px; font-weight: bold; color: #FFD700;">${vehicleName}</span>
@@ -805,8 +820,9 @@ export default {
           <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
         </div>
       </div>
-        <div style="margin-top: 10px; text-align: center; font-size: 11px; color: #4a8ba8; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px;">
+      <div style="margin-top: 10px; text-align: center; font-size: 12px; color: #00d4ff; border-top: 1px solid rgba(0, 212, 255, 0.1); padding-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px;">
-          📍 点击标记查看详情
+        <span>📍 点击查看农机列表</span>
+        <span style="font-size: 16px;">→</span>
       </div>
     </div>
   `;
@@ -816,7 +832,6 @@ export default {
     offset: new AMap.Pixel(0, -35),
     autoMove: true,
     closeWhenClickMap: true,
-      // 关键：设置背景透明
     isCustom: true,
   });
   
@@ -824,17 +839,52 @@ export default {
     this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
     this.vehicleMarkers.push(this.vehicleInfoWindow);
     
-      // 额外：手动覆盖InfoWindow的默认背景
+    // 添加点击事件监听 - 点击信息窗口打开农机列表
     setTimeout(() => {
-        const infoWindowEl = document.querySelector('.amap-info-content');
+      const infoWindowEl = document.querySelector('.vehicle-info-window');
       if (infoWindowEl) {
-          infoWindowEl.style.background = 'transparent !important';
+        infoWindowEl.addEventListener('click', (e) => {
-          infoWindowEl.style.padding = '0 !important';
+          // 防止点击内部按钮时冒泡
+          if (e.target.closest('.vehicle-info-window')) {
+            this.openAgriculturalMachineryList(vehicleInfo, point);
+          }
+        });
+      }
+      
+      // 覆盖InfoWindow的默认背景
+      const infoWindowContent = document.querySelector('.amap-info-content');
+      if (infoWindowContent) {
+        infoWindowContent.style.background = 'transparent !important';
+        infoWindowContent.style.padding = '0 !important';
       }
     }, 50);
   }
 },
 
+    // 打开智慧农机列表并传值
+    openAgriculturalMachineryList(vehicleInfo, point) {
+      // 构建当前选中的车辆数据
+      const vehicleData = {
+        vehicleInfo: vehicleInfo,
+        location: point,
+        vehicleName: vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆',
+        deviceId: vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '',
+        latitude: point.weidu || point.latitude || point.lat || 0,
+        longitude: point.jingdu || point.longitude || point.lng || point.lon || 0,
+        extData: {
+          vehicleType: '危废车辆',
+          status: '在线',
+          lastUpdate: point.createTime || point.server_time || point.updateTime || new Date().toISOString()
+        }
+      };
+      
+      this.closeVehicleInfoWindow();
+      this.qcdtdialogTableVisible = false;
+      
+      this.agriculturalVehicleData = vehicleData;
+      this.agriculturalDialogVisible = true;
+    },
+    
     // 关闭信息窗口
     closeVehicleInfoWindow() {
       if (this.vehicleInfoWindow) {
@@ -872,15 +922,21 @@ export default {
         pageNo: 1,
         pageSize: 30,
       }).then(res => {
+        if (res.code === 200 && res.result) {
+          // 存储完整的返回数据
+          this.vehicleListFull = res.result;
+          // 存储 records 数组
           this.vehicleList = res.result.records || [];
-        console.log('车辆列表:', this.vehicleList);
+        } else {
+          this.vehicleList = [];
+          this.vehicleListFull = null;
+        }
       }).catch(err => {
-        console.error('获取车辆列表失败:', err);
+        this.vehicleList = [];
+        this.vehicleListFull = null;
       });
     },
     
-    // ==================== 原有方法（保持不变） ====================
-    
     formatter: function (num) {
       return num.toFixed(3)
     },