添加运行轨迹等弹窗内容

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() {
@@ -759,81 +773,117 @@ export default {
     
    // 显示车辆信息窗口（深色科技风）
   showVehicleInfoWindow(point, vehicleInfo) {
-    this.closeVehicleInfoWindow();
+  this.closeVehicleInfoWindow();
   
-    const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
-    const lat = parseFloat(point.weidu || point.latitude || point.lat);
+  const lng = parseFloat(point.jingdu || point.longitude || point.lng || point.lon);
+  const lat = parseFloat(point.weidu || point.latitude || point.lat);
   
-    const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
+  const vehicleName = vehicleInfo.vePlate || vehicleInfo.plateNumber || '车辆';
   
-    // 使用自定义HTML，不依赖InfoWindow的默认样式
-    const infoContent = `
-      <div style="
-        padding: 16px 20px; 
-        max-width: 360px; 
-        min-width: 250px; 
-        background: rgba(0, 20, 40, 0.95) !important; 
-        border-radius: 8px; 
-        border: 1px solid rgba(0, 212, 255, 0.3);
-        box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
-        backdrop-filter: blur(10px);
-        color: #8bb4d0;
-      ">
-        <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>
+  // 使用自定义HTML，不依赖InfoWindow的默认样式
+  const infoContent = `
+    <div style="
+      padding: 16px 20px; 
+      max-width: 360px; 
+      min-width: 250px; 
+      background: rgba(0, 20, 40, 0.95) !important; 
+      border-radius: 8px; 
+      border: 1px solid rgba(0, 212, 255, 0.3);
+      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>
+      </div>
+      <div style="font-size: 13px; line-height: 2.2;">
+        <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+          <span style="color: #4a8ba8;">设备ID：</span>
+          <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
         </div>
-        <div style="font-size: 13px; line-height: 2.2;">
-          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-            <span style="color: #4a8ba8;">设备ID：</span>
-            <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.gpsDeviceId || vehicleInfo.gpsId || '--'}</span>
-          </div>
-          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-            <span style="color: #4a8ba8;">车牌号：</span>
-            <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
-          </div>
-          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-            <span style="color: #4a8ba8;">最新时间：</span>
-            <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
-          </div>
-          <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
-            <span style="color: #4a8ba8;">经度：</span>
-            <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
-          </div>
-          <div style="display: flex; justify-content: space-between; padding: 3px 0;">
-            <span style="color: #4a8ba8;">纬度：</span>
-            <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
-          </div>
+        <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+          <span style="color: #4a8ba8;">车牌号：</span>
+          <span style="font-weight: 500; color: #ffffff;">${vehicleInfo.vePlate || vehicleInfo.plateNumber || '--'}</span>
         </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="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+          <span style="color: #4a8ba8;">最新时间：</span>
+          <span style="font-weight: 500; color: #ffffff;">${point.createTime || point.server_time || point.updateTime || '--'}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; border-bottom: 1px solid rgba(0, 212, 255, 0.05); padding: 3px 0;">
+          <span style="color: #4a8ba8;">经度：</span>
+          <span style="font-weight: 500; color: #00d4ff;">${lng.toFixed(6)}</span>
+        </div>
+        <div style="display: flex; justify-content: space-between; padding: 3px 0;">
+          <span style="color: #4a8ba8;">纬度：</span>
+          <span style="font-weight: 500; color: #00d4ff;">${lat.toFixed(6)}</span>
         </div>
       </div>
-    `;
+      <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>
+  `;
   
-    this.vehicleInfoWindow = new AMap.InfoWindow({
-      content: infoContent,
-      offset: new AMap.Pixel(0, -35),
-      autoMove: true,
-      closeWhenClickMap: true,
-      // 关键：设置背景透明
-      isCustom: true,
-    });
+  this.vehicleInfoWindow = new AMap.InfoWindow({
+    content: infoContent,
+    offset: new AMap.Pixel(0, -35),
+    autoMove: true,
+    closeWhenClickMap: true,
+    isCustom: true,
+  });
   
-    if (!isNaN(lng) && !isNaN(lat)) {
-      this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
-      this.vehicleMarkers.push(this.vehicleInfoWindow);
+  if (!isNaN(lng) && !isNaN(lat)) {
+    this.vehicleInfoWindow.open(this.aMap, [lng, lat]);
+    this.vehicleMarkers.push(this.vehicleInfoWindow);
     
-      // 额外：手动覆盖InfoWindow的默认背景
-      setTimeout(() => {
-        const infoWindowEl = document.querySelector('.amap-info-content');
-        if (infoWindowEl) {
-          infoWindowEl.style.background = 'transparent !important';
-          infoWindowEl.style.padding = '0 !important';
+    // 添加点击事件监听 - 点击信息窗口打开农机列表
+    setTimeout(() => {
+      const infoWindowEl = document.querySelector('.vehicle-info-window');
+      if (infoWindowEl) {
+        infoWindowEl.addEventListener('click', (e) => {
+          // 防止点击内部按钮时冒泡
+          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()
         }
-      }, 50);
-    }
-  },
+      };
+      
+      this.closeVehicleInfoWindow();
+      this.qcdtdialogTableVisible = false;
+      
+      this.agriculturalVehicleData = vehicleData;
+      this.agriculturalDialogVisible = true;
+    },
     
     // 关闭信息窗口
     closeVehicleInfoWindow() {
@@ -872,15 +922,21 @@ export default {
         pageNo: 1,
         pageSize: 30,
       }).then(res => {
-        this.vehicleList = res.result.records || [];
-        console.log('车辆列表:', this.vehicleList);
+        if (res.code === 200 && res.result) {
+          // 存储完整的返回数据
+          this.vehicleListFull = res.result;
+          // 存储 records 数组
+          this.vehicleList = res.result.records || [];
+        } else {
+          this.vehicleList = [];
+          this.vehicleListFull = null;
+        }
       }).catch(err => {
-        console.error('获取车辆列表失败:', err);
+        this.vehicleList = [];
+        this.vehicleListFull = null;
       });
     },
     
-    // ==================== 原有方法（保持不变） ====================
-    
     formatter: function (num) {
       return num.toFixed(3)
     },