up

src/views/inventorys/stocktaking.vue

@@ -689,7 +689,7 @@
     </Modal>
 
     <!-- 盘点小结 Modal -->
-    <Modal v-model="summaryModal.visible" title="盘点小结" width="1200">
+    <Modal v-model="summaryModal.visible" title="盘点小结" width="1300">
       <div>
         <div id="print-table">
           <div style="text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 12px">
@@ -1493,7 +1493,7 @@ export default {
         {
           title: '备注',
           key: 'remark',
-          // width: 120,
+          width: 120,
           tooltip: true
         }
       ],

src/views/jsc/components/mapChart.vue

@@ -237,6 +237,7 @@ export default {
       }],
       currentArea: null, // 当前放大的区域对象
       warehousePoints: [], // 当前区域的仓库点位
+      hasLoadedWarehouses: false, // 是否已经加载了仓库数据
       // mapData:[]
     }
   },
@@ -259,6 +260,187 @@ export default {
 
   },
   methods: {
+    // 计算两个经纬度点之间的距离（单位：度）
+    calculateDistance(lon1, lat1, lon2, lat2) {
+      const R = 6371 // 地球半径（公里）
+      const dLat = (lat2 - lat1) * Math.PI / 180
+      const dLon = (lon2 - lon1) * Math.PI / 180
+      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2)
+      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+      return R * c // 返回距离（公里）
+    },
+    // 智能分配标签位置，避免重叠 - 简化版：只使用上下两个位置
+    assignLabelPositions(warehousePoints) {
+      if (!warehousePoints || warehousePoints.length === 0) {
+        return warehousePoints
+      }
+      
+      // 距离阈值（经纬度差值），小于此距离的点位需要分开
+      // 两个点位相差约 0.000115，所以阈值要更小一些，但也要能检测到
+      const threshold = 0.0005 // 约50米，足够检测到这两个点位
+      // 坐标偏移量（经纬度差值）- 增大偏移量，确保在小缩放级别下也能看到明显偏移
+      // 0.003 约300米，0.005 约500米，在小缩放级别下也能明显看到分开
+      const offsetAmount = 0.005 // 约500米，确保视觉上明显分开
+      
+      // 初始化所有点位的标签位置和偏移量
+      warehousePoints.forEach((point) => {
+        point.labelPosition = 'top' // 默认上方
+        point.labelOffset = [-15, -35] // 向左偏移15px，向上偏移35px
+        point.processed = false // 标记是否已处理
+      })
+      
+      // 按顺序处理每个点位
+      warehousePoints.forEach((point, index) => {
+        // 如果已经处理过，跳过
+        if (point.processed) {
+          return
+        }
+        
+        // 查找距离很近的其他点位
+        const nearbyPoints = []
+        for (let i = 0; i < warehousePoints.length; i++) {
+          if (i === index || warehousePoints[i].processed) continue
+          
+          const otherPoint = warehousePoints[i]
+          const deltaLon = point.value[0] - otherPoint.value[0]
+          const deltaLat = point.value[1] - otherPoint.value[1]
+          const distance = Math.sqrt(deltaLon * deltaLon + deltaLat * deltaLat)
+          
+          if (distance < threshold) {
+            nearbyPoints.push({ point: otherPoint, index: i, distance })
+          }
+        }
+        
+        // 如果有很近的点位
+        if (nearbyPoints.length > 0) {
+          // 找到最近的点位
+          const closest = nearbyPoints.sort((a, b) => a.distance - b.distance)[0]
+          
+          // 将当前点位向右下偏移，标签应该在下方（因为点位在下方）
+          const originalLon = point.value[0]
+          const originalLat = point.value[1]
+          point.value[0] = originalLon + offsetAmount // 向右偏移
+          point.value[1] = originalLat - offsetAmount * 0.7 // 向下偏移
+          point.labelPosition = 'bottom'
+          point.labelOffset = [-15, 15] // 向左偏移15px，向下偏移15px（标签在下方）
+          point.processed = true
+          
+          // 另一个点位保持原位置（在上方），标签应该在上方
+          closest.point.labelPosition = 'top'
+          closest.point.labelOffset = [-15, -35] // 向左偏移15px，向上偏移35px（标签在上方）
+          closest.point.processed = true
+          
+          console.log(`点位 ${point.name} 向右下偏移: 经度 ${originalLon} -> ${point.value[0]}, 纬度 ${originalLat} -> ${point.value[1]}, 标签在下方`)
+          console.log(`点位 ${closest.point.name} 保持原位置，标签在上方`)
+        } else {
+          // 没有很近的点位，保持默认设置
+          point.processed = true
+        }
+      })
+      
+      return warehousePoints
+    },
+    // 清除标签
+    clearLabels() {
+      if (this.myChart) {
+        // 只清除 graphic 元素，不影响其他配置
+        // 使用 replaceMerge 只替换 graphic 部分
+        this.myChart.setOption({
+          graphic: []
+        }, { 
+          notMerge: false,
+          replaceMerge: ['graphic'] // 只替换 graphic 部分
+        })
+      }
+    },
+    // 使用 graphic 组件手动绘制标签
+    drawLabelsWithGraphic() {
+      if (!this.myChart || !this.warehousePoints || this.warehousePoints.length === 0) {
+        // 如果没有点位数据，清除标签
+        this.clearLabels()
+        return
+      }
+      
+      // 先清除之前的标签
+      this.clearLabels()
+      
+      // 延迟一下，确保清除完成后再绘制新标签
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.drawLabelsInternal()
+        }, 50) // 增加延迟时间到 50ms
+      })
+    },
+    // 内部方法：实际绘制标签
+    drawLabelsInternal() {
+      if (!this.myChart || !this.warehousePoints || this.warehousePoints.length === 0) {
+        return
+      }
+      
+      const graphicElements = []
+      
+      this.warehousePoints.forEach((point, index) => {
+        if (!point.name || !point.value || point.value.length !== 2) {
+          return
+        }
+        
+        try {
+          // 将地理坐标转换为像素坐标
+          const pixel = this.myChart.convertToPixel('geo', point.value)
+          if (!pixel || pixel.length !== 2 || isNaN(pixel[0]) || isNaN(pixel[1])) {
+            return
+          }
+          
+          // 获取标签位置和偏移量
+          const labelOffset = point.labelOffset || [-15, -35]
+          
+          // 计算标签的像素位置
+          let x = pixel[0] + labelOffset[0]
+          let y = pixel[1] + labelOffset[1]
+          
+          // 字体大小
+          const fontSize = 11
+          
+          // 创建文本元素，不使用背景和边框
+          graphicElements.push({
+            type: 'text',
+            id: `warehouse-label-${index}`,
+            z: 10000, // 提高层级，确保在地图区块之上
+            left: x,
+            top: y,
+            style: {
+              text: point.name, // 显示完整文字，不截断
+              fill: '#ff6600', // 橙色字体
+              fontSize: fontSize,
+              fontWeight: 'bold',
+              textAlign: 'left',
+              textVerticalAlign: 'middle'
+            },
+            onclick: () => {
+              this.getWuzi(point)
+            },
+            cursor: 'pointer'
+          })
+        } catch (e) {
+          console.error('绘制标签失败:', e, point)
+        }
+      })
+      
+      // 更新 graphic 配置
+      if (graphicElements.length > 0) {
+        this.myChart.setOption({
+          graphic: graphicElements
+        }, { 
+          notMerge: false,
+          replaceMerge: ['graphic'] // 只替换 graphic 部分，确保清除旧的
+        })
+      } else {
+        // 如果没有元素，也要清除旧的
+        this.clearLabels()
+      }
+    },
     async getList(id) {
       this.list = []
       const res = await index({
@@ -487,6 +669,16 @@ export default {
       this.myChart.on('click', params => {
         // 判断是否点击的是地图区域
         if (params.componentType === 'series' && params.seriesType === 'map') {
+          // 如果已经加载了仓库数据，阻止点击区域
+          if (this.hasLoadedWarehouses) {
+            if (this.$message) {
+              // this.$message.warning('请先点击"返回全图"后再选择其他区域')
+            } else {
+              // alert('请先点击"返回全图"后再选择其他区域')
+            }
+            return
+          }
+          
           const areaName = params.name;
           const areaObj = this.streetNameList.find(item => item.name === areaName);
           if (areaObj) {
@@ -497,8 +689,22 @@ export default {
       });
     },
     async zoomToArea(areaObj) {
+      // 如果已经加载了仓库数据，提示用户先返回全图
+      if (this.hasLoadedWarehouses) {
+        if (this.$message) {
+          // this.$message.warning('请先点击"返回全图"后再选择其他区域')
+        } else {
+          // alert('请先点击"返回全图"后再选择其他区域')
+        }
+        return
+      }
+      
+      const that = this // 保存 this 引用，用于 label 配置中的函数
       console.log('点击区域:', areaObj);
       
+      // 清除之前的标签
+      this.clearLabels();
+      
       // 1. 获取仓库点位数据
       const warehouseList = await this.getList(areaObj.id);
       console.log('获取到的仓库列表:', warehouseList);
@@ -518,15 +724,45 @@ export default {
           name: item.cangkumingcheng,
           value: [jingdu, weidu],
           id: item.id,
-          item: item
+          item: item,
+          labelPosition: null // 稍后分配
         };
       }).filter(point => point !== null); // 过滤掉无效的坐标点
       
+      // 3. 智能分配标签位置，避免重叠
+      this.warehousePoints = this.assignLabelPositions(this.warehousePoints);
+      
       console.log('生成的仓库点位:', this.warehousePoints);
+      console.log('标签位置分配:', this.warehousePoints.map(p => ({ 
+        name: p.name, 
+        position: p.labelPosition, 
+        offset: p.labelOffset,
+        value: p.value,
+        hasName: !!p.name
+      })));
       console.log('有效仓库点位数量:', this.warehousePoints.length);
 
-      // 3. 只更新geo的center和zoom，添加仓库点位
+      // 验证每个点位都有 name 字段
+      this.warehousePoints.forEach((p, idx) => {
+        if (!p.name) {
+          console.error(`点位 ${idx} 缺少 name 字段:`, p)
+        }
+      })
+
+      // 4. 只更新geo的center和zoom，添加仓库点位
       console.log('设置地图配置，仓库点位数量:', this.warehousePoints.length);
+      console.log('准备传递给 scatter 的数据:', this.warehousePoints.map(p => ({ name: p.name, value: p.value, labelPosition: p.labelPosition, labelOffset: p.labelOffset })));
+      
+      // 确保每个点位数据都包含 name 字段
+      this.warehousePoints = this.warehousePoints.map(p => ({
+        name: p.name || '未知仓库',
+        value: p.value,
+        labelPosition: p.labelPosition,
+        labelOffset: p.labelOffset,
+        id: p.id,
+        item: p.item
+      }))
+      console.log('处理后的 warehousePoints 数据:', this.warehousePoints.slice(0, 3)) // 只输出前3个用于调试
       
       this.myChart.setOption({
         series: [
@@ -562,46 +798,136 @@ export default {
             data: this.warehousePoints,
             symbol: 'pin',
             symbolSize: [16, 20],
+            zlevel: 1, // 提高 scatter 系列的层级
+            z: 1, // 提高 scatter 系列的 z 值
             itemStyle: { color: 'orange' },
             label: {
               show: true,
-              formatter: '{b}',
-              position: 'top',
-              color: 'orange',
-              fontSize: 12,
-              triggerEvent: true // 允许标签触发事件
+              formatter: function(params) {
+                // 必须显示仓库名称 - 优先从 warehousePoints 数组获取（这是最可靠的方式）
+                let name = ''
+                
+                // 方案1：从 warehousePoints 数组获取（最可靠）
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.name) {
+                    name = pointData.name
+                  }
+                }
+                
+                // 方案2：从 params.data 获取（ECharts scatter 系列的标准方式）
+                if (!name && params.data) {
+                  if (typeof params.data === 'object' && params.data.name) {
+                    name = params.data.name
+                  }
+                }
+                
+                // 方案3：使用 params.name
+                if (!name && params.name) {
+                  name = params.name
+                }
+                
+                // 如果还是没有获取到，输出调试信息
+                if (!name) {
+                  console.error('标签 formatter 无法获取名称:', {
+                    dataIndex: params.dataIndex,
+                    data: params.data,
+                    name: params.name
+                  })
+                  name = '仓库' + (params.dataIndex !== undefined ? (params.dataIndex + 1) : '')
+                }
+                
+                return name
+              },
+              position: function(params) {
+                // 使用预先分配的标签位置（只使用 top 或 bottom）
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.labelPosition) {
+                    return pointData.labelPosition
+                  }
+                }
+                return 'top'
+              },
+              color: '#000000', // 改为黑色，确保可见
+              fontSize: 14,
+              fontWeight: 'bold',
+              triggerEvent: true,
+              offset: function(params) {
+                // 使用预先分配的标签偏移量
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.labelOffset && Array.isArray(pointData.labelOffset) && pointData.labelOffset.length === 2) {
+                    return pointData.labelOffset
+                  }
+                }
+                return [0, -50]
+              },
+              padding: [4, 8],
+              backgroundColor: '#ffffff',
+              borderColor: '#ff6600',
+              borderWidth: 1,
+              borderRadius: 4,
+              shadowBlur: 4,
+              shadowColor: 'rgba(0, 0, 0, 0.2)'
             },
             emphasis: {
               label: {
-                show: true
+                show: true,
+                fontSize: 14
+              },
+              itemStyle: {
+                color: '#ff8800'
               }
             }
           }
         ],
         geo: {
           center: areaObj.coord, // 直接使用streetNameList中的coord
-          zoom: areaObj.zoom // 直接使用streetNameList中的zoom
+          zoom: areaObj.zoom ? areaObj.zoom * 1.5 : 4.5 // 增加50%的缩放级别
         }
-      });
+      }, { notMerge: false, lazyUpdate: false });
       
       // 强制刷新地图
       this.myChart.resize();
+      
+      // 使用 graphic 组件手动绘制标签
+      this.drawLabelsWithGraphic();
+      
+      // 标记已经加载了仓库数据
+      this.hasLoadedWarehouses = true
+      
+      // 监听地图变化事件（缩放、平移），重新绘制标签
+      this.myChart.off('georoam') // 先移除旧的事件监听
+      this.myChart.on('georoam', () => {
+        // 地图缩放或平移时，重新绘制标签
+        this.drawLabelsWithGraphic()
+      })
 
       // 重新绑定地图点击事件
       this.myChart.off('click');
       this.myChart.on('click', params => {
+        console.log('地图点击事件:', params)
+        
         // 优先处理仓库点位点击（包括图标和标签）
-        if (params.seriesName === '仓库点位') {
-          // 如果点击的是标签，需要通过 dataIndex 获取数据
-          if (params.dataIndex !== undefined && params.dataIndex !== null) {
+        if (params.seriesName === '仓库点位' || (params.componentType === 'series' && params.seriesType === 'scatter')) {
+          // 如果点击的是标签或图标，通过 dataIndex 获取数据
+          if (params.dataIndex !== undefined && params.dataIndex !== null && params.dataIndex >= 0) {
             const warehouseData = this.warehousePoints[params.dataIndex]
             if (warehouseData) {
+              console.log('点击仓库点位:', warehouseData.name)
               this.getWuzi(warehouseData)
               return // 阻止后续处理
             }
-          } else if (params.data) {
-            // 如果点击的是图标，直接使用 data
-            this.getWuzi(params.data)
+          }
+          // 如果点击的是图标，直接使用 data
+          if (params.data) {
+            // 尝试从 data 中找到对应的点位数据
+            const warehouseData = this.warehousePoints.find(p => 
+              p.value[0] === params.data.value[0] && p.value[1] === params.data.value[1]
+            ) || params.data
+            console.log('点击仓库图标:', warehouseData.name || warehouseData)
+            this.getWuzi(warehouseData)
             return // 阻止后续处理
           }
         }
@@ -625,6 +951,10 @@ export default {
       this.cangkuObj = {}
       this.wuziTotal = 0
       this.showData = false
+      this.hasLoadedWarehouses = false // 重置标记，允许再次选择区域
+      
+      // 清除标签
+      this.clearLabels();
       
       console.log('resetToFullMap - warehouseData:', this.warehouseData);
       console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0);
@@ -807,6 +1137,16 @@ export default {
       }
     },
     async loadShibenjiWarehouse() {
+      // 如果已经加载了仓库数据，提示用户先返回全图
+      if (this.hasLoadedWarehouses) {
+        if (this.$message) {
+          // this.$message.warning('请先点击"返回全图"后再选择其他区域')
+        } else {
+          // alert('请先点击"返回全图"后再选择其他区域')
+        }
+        return
+      }
+      
       // 加载市本级的仓库数据并放大地图
       if (!this.shibenjiAreaId) {
         if (this.$message) {
@@ -825,9 +1165,13 @@ export default {
       await this.loadWarehouseWithoutZoom(this.shibenjiAreaId)
     },
     async loadWarehouseWithoutZoom(areaId) {
+      const that = this // 保存 this 引用，用于 label 配置中的函数
       // 加载仓库数据并放大地图
       console.log('加载市本级仓库数据，区域ID:', areaId);
       
+      // 清除之前的标签
+      this.clearLabels();
+      
       // 1. 获取仓库点位数据
       const warehouseList = await this.getList(areaId);
       console.log('获取到的仓库列表:', warehouseList);
@@ -847,14 +1191,32 @@ export default {
           name: item.cangkumingcheng,
           value: [jingdu, weidu],
           id: item.id,
-          item: item
+          item: item,
+          labelPosition: null // 稍后分配
         };
       }).filter(point => point !== null); // 过滤掉无效的坐标点
       
+      // 3. 智能分配标签位置，避免重叠
+      this.warehousePoints = this.assignLabelPositions(this.warehousePoints);
+      
       console.log('生成的仓库点位:', this.warehousePoints);
+      console.log('标签位置分配:', this.warehousePoints.map(p => ({ 
+        name: p.name, 
+        position: p.labelPosition, 
+        offset: p.labelOffset,
+        value: p.value,
+        hasName: !!p.name
+      })));
       console.log('有效仓库点位数量:', this.warehousePoints.length);
+      
+      // 验证每个点位都有 name 字段
+      this.warehousePoints.forEach((p, idx) => {
+        if (!p.name) {
+          console.error(`点位 ${idx} 缺少 name 字段:`, p)
+        }
+      })
 
-      // 3. 计算仓库点位的中心点，用于设置地图中心
+      // 4. 计算仓库点位的中心点，用于设置地图中心
       let centerCoord = [120.585294, 31.299758] // 默认苏州中心点
       let zoomLevel = 3.5 // 默认缩放级别
 
@@ -866,13 +1228,13 @@ export default {
           const sumLat = validPoints.reduce((sum, p) => sum + p.value[1], 0)
           centerCoord = [sumLng / validPoints.length, sumLat / validPoints.length]
           
-          // 根据仓库数量调整缩放级别
+          // 根据仓库数量调整缩放级别（增加更多缩放）
           if (validPoints.length === 1) {
-            zoomLevel = 4
+            zoomLevel = 5.5 // 进一步增加缩放
           } else if (validPoints.length <= 3) {
-            zoomLevel = 3.5
+            zoomLevel = 5.0 // 进一步增加缩放
           } else {
-            zoomLevel = 3
+            zoomLevel = 4.5 // 进一步增加缩放
           }
         }
       }
@@ -912,18 +1274,86 @@ export default {
             data: this.warehousePoints,
             symbol: 'pin',
             symbolSize: [16, 20],
+            zlevel: 1, // 提高 scatter 系列的层级
+            z: 1, // 提高 scatter 系列的 z 值
             itemStyle: { color: 'orange' },
             label: {
               show: true,
-              formatter: '{b}',
-              position: 'top',
-              color: 'orange',
-              fontSize: 12,
-              triggerEvent: true // 允许标签触发事件
+              formatter: function(params) {
+                // 必须显示仓库名称 - 优先从 warehousePoints 数组获取（这是最可靠的方式）
+                let name = ''
+                
+                // 方案1：从 warehousePoints 数组获取（最可靠）
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.name) {
+                    name = pointData.name
+                  }
+                }
+                
+                // 方案2：从 params.data 获取（ECharts scatter 系列的标准方式）
+                if (!name && params.data) {
+                  if (typeof params.data === 'object' && params.data.name) {
+                    name = params.data.name
+                  }
+                }
+                
+                // 方案3：使用 params.name
+                if (!name && params.name) {
+                  name = params.name
+                }
+                
+                // 如果还是没有获取到，输出调试信息
+                if (!name) {
+                  console.error('标签 formatter 无法获取名称:', {
+                    dataIndex: params.dataIndex,
+                    data: params.data,
+                    name: params.name
+                  })
+                  name = '仓库' + (params.dataIndex !== undefined ? (params.dataIndex + 1) : '')
+                }
+                
+                return name
+              },
+              position: function(params) {
+                // 使用预先分配的标签位置（只使用 top 或 bottom）
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.labelPosition) {
+                    return pointData.labelPosition
+                  }
+                }
+                return 'top'
+              },
+              color: '#000000', // 改为黑色，确保可见
+              fontSize: 14,
+              fontWeight: 'bold',
+              triggerEvent: true,
+              offset: function(params) {
+                // 使用预先分配的标签偏移量
+                if (that.warehousePoints && params.dataIndex !== undefined && params.dataIndex >= 0 && params.dataIndex < that.warehousePoints.length) {
+                  const pointData = that.warehousePoints[params.dataIndex]
+                  if (pointData && pointData.labelOffset && Array.isArray(pointData.labelOffset) && pointData.labelOffset.length === 2) {
+                    return pointData.labelOffset
+                  }
+                }
+                return [0, -50]
+              },
+              padding: [4, 8],
+              backgroundColor: '#ffffff',
+              borderColor: '#ff6600',
+              borderWidth: 1,
+              borderRadius: 4,
+              shadowBlur: 4,
+              shadowColor: 'rgba(0, 0, 0, 0.2)'
             },
             emphasis: {
               label: {
-                show: true
+                show: true,
+                fontSize: 14
+              },
+              itemStyle: {
+                color: '#ff8800'
               }
             }
           }
@@ -932,26 +1362,48 @@ export default {
           center: centerCoord,
           zoom: zoomLevel
         }
-      });
+      }, { notMerge: false, lazyUpdate: false });
       
       // 强制刷新地图
       this.myChart.resize();
+      
+      // 使用 graphic 组件手动绘制标签
+      this.drawLabelsWithGraphic();
+      
+      // 标记已经加载了仓库数据
+      this.hasLoadedWarehouses = true
+      
+      // 监听地图变化事件（缩放、平移），重新绘制标签
+      this.myChart.off('georoam') // 先移除旧的事件监听
+      this.myChart.on('georoam', () => {
+        // 地图缩放或平移时，重新绘制标签
+        this.drawLabelsWithGraphic()
+      })
 
       // 重新绑定地图点击事件
       this.myChart.off('click');
       this.myChart.on('click', params => {
+        console.log('地图点击事件:', params)
+        
         // 优先处理仓库点位点击（包括图标和标签）
-        if (params.seriesName === '仓库点位') {
-          // 如果点击的是标签，需要通过 dataIndex 获取数据
-          if (params.dataIndex !== undefined && params.dataIndex !== null) {
+        if (params.seriesName === '仓库点位' || (params.componentType === 'series' && params.seriesType === 'scatter')) {
+          // 如果点击的是标签或图标，通过 dataIndex 获取数据
+          if (params.dataIndex !== undefined && params.dataIndex !== null && params.dataIndex >= 0) {
             const warehouseData = this.warehousePoints[params.dataIndex]
             if (warehouseData) {
+              console.log('点击仓库点位:', warehouseData.name)
               this.getWuzi(warehouseData)
               return // 阻止后续处理
             }
-          } else if (params.data) {
-            // 如果点击的是图标，直接使用 data
-            this.getWuzi(params.data)
+          }
+          // 如果点击的是图标，直接使用 data
+          if (params.data) {
+            // 尝试从 data 中找到对应的点位数据
+            const warehouseData = this.warehousePoints.find(p => 
+              p.value[0] === params.data.value[0] && p.value[1] === params.data.value[1]
+            ) || params.data
+            console.log('点击仓库图标:', warehouseData.name || warehouseData)
+            this.getWuzi(warehouseData)
             return // 阻止后续处理
           }
         }

src/views/storages/components/addMater.vue

@@ -1,19 +1,19 @@
-<template>
-  <div>
+<template>
+  <div>
     <xy-dialog
       ref="dialog"
       :width="70"
       :is-show.sync="isShow"
       type="form"
       :title="titleName"
-      :form="form"
+      :form="form"
       :rules="rules"
       @submit="submit"
     >
       <template v-slot:cangkumingcheng>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
+            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>仓库名称：
           </div>
           <div class="xy-table-item-content">
             <el-select v-model="form.guanliancangku" style="width: 300px;" placeholder="请选择仓库" @change="changeCk">
@@ -27,13 +27,53 @@
           </div>
         </div>
       </template>
-      <template v-slot:wuzidaima>
+      <template v-slot:daichudanwei>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;" />物资代码：
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />代储单位
           </div>
           <div class="xy-table-item-content">
-            <el-input v-model="form.wuzidaima" placeholder="请填写物资代码" clearable style="width: 300px;" />
+            <el-input v-model="form.daichudanwei" placeholder="请填写代储单位" clearable style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:yijifenlei>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />一级分类
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.yijifenlei" placeholder="请填写一级分类" clearable style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:erjifenlei>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />二级分类
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.erjifenlei" placeholder="请填写二级分类" clearable style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:fenlei>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />所属种类
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.fenlei" placeholder="请填写所属种类" clearable style="width: 300px;" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:quyu>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />区域：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input v-model="form.quyu" placeholder="请填写区域" clearable style="width: 300px;" />
           </div>
         </div>
       </template>
@@ -107,16 +147,16 @@
             <el-input v-model="form.shengchanriqi" placeholder="请填写生产日期" clearable style="width: 300px;" />
           </div>
         </div>
-      </template>
-      <template v-slot:rukuriqi>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;" />入库日期：
-          </div>
+      </template>
+      <template v-slot:rukuriqi>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />入库日期：
+          </div>
           <div class="xy-table-item-content">
-            <el-input v-model="form.rukuriqi" placeholder="请填写入库日期" clearable style="width: 300px;" />
-          </div>
-        </div>
+            <el-input v-model="form.rukuriqi" placeholder="请填写入库日期" clearable style="width: 300px;" />
+          </div>
+        </div>
       </template>
       <template v-slot:chubeinianxian>
         <div class="xy-table-item">
@@ -177,70 +217,91 @@
             <el-input
               v-model="form.beizhu"
               placeholder="请输入储备层级"
-              clearable
+              clearable
               style="width: 300px;"
             />
           </div>
         </div>
-      </template>
-      <template v-slot:chubeicengji>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;" />储备层级：
-          </div>
-          <div class="xy-table-item-content">
+      </template>
+      <template v-slot:chubeicengji>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />储备层级：
+          </div>
+          <div class="xy-table-item-content">
             <el-input
               v-model="form.chubeicengji"
               placeholder="请输入储备层级"
-              clearable
+              clearable
               style="width: 300px;"
-            />
-          </div>
-        </div>
-      </template>
-      <template v-slot:shifouzhanshi>
-        <div class="xy-table-item">
-          <div class="xy-table-item-label">
-            <span style="color: red;font-weight: 600;padding-right: 4px;" />是否展示：
-          </div>
-          <div class="xy-table-item-content">
+            />
+          </div>
+        </div>
+      </template>
+      <template v-slot:shifouzhanshi>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />是否展示：
+          </div>
+          <div class="xy-table-item-content">
             <el-input
               v-model="form.shifouzhanshi"
               placeholder="请输入是否展示"
-              clearable
+              clearable
               style="width: 300px;"
-            />
-          </div>
-        </div>
-      </template>
-
-    </xy-dialog>
-  </div>
-</template>
-
-<script>
-import {
-  save,
-  index,
-  show
-} from '@/api/system/baseForm.js'
-import {
-  Message
-} from 'element-ui'
-export default {
-
-  data() {
-    return {
-      isShow: false,
-      type: 'add',
+            />
+          </div>
+        </div>
+      </template>
+      <template v-slot:is_chart>
+        <div class="xy-table-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;" />是否统计：
+          </div>
+          <div class="xy-table-item-content">
+            <el-select v-model="form.is_chart" placeholder="请选择" clearable style="width: 300px;">
+              <el-option v-for="item in [{id:1,name:'是'},{id:0,name:'否'}]" :key="item.id" :label="item.name" :value="item.name" />
+            </el-select>
+          </div>
+        </div>
+      </template>
+
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  save,
+  index,
+  show
+} from '@/api/system/baseForm.js'
+import {
+  Message
+} from 'element-ui'
+import {
+  index as getFenleilist
+} from '@/api/fenlei.js'
+export default {
+
+  data() {
+    return {
+      isShow: false,
+      type: 'add',
       id: '',
       titleName: '',
       tableName: 'flood_materials',
       cangkuList: [],
-
+      fenleiList: [], 
+      fenleiName: '',
       form: {
-        guanliancangku: '',
+        guanliancangku: '',
         cangkumingcheng: '',
+        daichudanwei: '',
+        yijifenlei: '',
+        erjifenlei: '',
+        fenlei: '',
+        quyu: '',
         wuzidaima: '',
         xianwuzimingcheng: '',
         yuanwuzimingcheng: '',
@@ -257,34 +318,53 @@ export default {
         chubeididian: '',
         beizhu: '',
         chubeicengji: '',
-        shifouzhanshi: ''
-      },
-      rules: {
-        guanliancangku: [{
-          required: true,
-          message: '请选择仓库'
-        }]
-      }
-    }
-  },
-  watch: {
-    isShow(newVal) {
-      if (newVal) {
-        this.titleName = this.type === 'add' ? `新增物资` : `编辑物资`
-        if (this.type === 'editor') {
-          this.getDetail()
-        }
-      } else {
-        this.id = ''
+        shifouzhanshi: '',
+        is_chart: ''
+      },
+      rules: {
+        guanliancangku: [{
+          required: true,
+          message: '请选择仓库'
+        }]
+      }
+    }
+  },
+  watch: {
+    isShow(newVal) {
+      if (newVal) {
+        this.titleName = this.type === 'add' ? `新增物资` : `编辑物资`
+        if (this.type === 'editor') {
+          this.getDetail()
+        }
+      } else {
+        this.id = ''
         this.type = ''
-        this.$refs['dialog'].reset()
-      }
-    }
-  },
-  created() {
-
-  },
+        this.$refs['dialog'].reset()
+      }
+    }
+  },
+  created() {
+    this.getFenlei()
+  },
   methods: {
+    async getFenlei() {
+      const res = await getFenleilist({
+        tree: 1,
+        sort_type: 'ASC',
+        sort_name: 'sort'
+      })
+      this.fenleiList = res
+    },
+    changeFenlei(e) {
+      console.log('e', e)
+      this.form.fenlei = e[e.length - 1]
+      console.log(this.$refs.cascaders.getCheckedNodes())
+      let data = this.$refs.cascaders.getCheckedNodes() ? this.$refs.cascaders.getCheckedNodes()[0].data : null
+      if (data) {
+        this.fenleiName = data.name
+      }
+      console.log(this.form.fenlei)
+    },
     setCkList(e) {
       if (e) {
         this.cangkuList = e
@@ -300,15 +380,20 @@ export default {
         })
         console.log(this.form.guanliancangku)
       }
-    },
-    async getDetail() {
-      const res = await show({
-        id: this.id,
-        table_name: this.tableName
-      })
+    },
+    async getDetail() {
+      const res = await show({
+        id: this.id,
+        table_name: this.tableName
+      })
       this.form = {
-        guanliancangku: res.guanliancangku ? parseInt(res.guanliancangku) : '',
+        guanliancangku: res.guanliancangku ? parseInt(res.guanliancangku) : '',
         cangkumingcheng: res?.cangkumingcheng,
+        daichudanwei: res?.daichudanwei,
+        yijifenlei: res?.yijifenlei,
+        erjifenlei: res?.erjifenlei,
+        fenlei: res?.fenlei,
+        quyu: res?.quyu,
         wuzidaima: res?.wuzidaima,
         xianwuzimingcheng: res?.xianwuzimingcheng,
         yuanwuzimingcheng: res?.yuanwuzimingcheng,
@@ -325,125 +410,126 @@ export default {
         chubeididian: res?.chubeididian,
         beizhu: res?.beizhu,
         chubeicengji: res?.chubeicengji,
-        shifouzhanshi: res?.shifouzhanshi
-
-      }
-    },
+        shifouzhanshi: res?.shifouzhanshi,
+        is_chart: res?.is_chart
+
+      }
+    },
     submit() {
       console.log('this.form', this.form)
-      // return
-      if (this.type === 'add') {
-        save({
-          table_name: this.tableName,
-          ...this.form
-        }).then(res => {
-          Message({
-            type: 'success',
-            message: '新增成功'
-          })
+      // return
+      if (this.type === 'add') {
+        save({
+          table_name: this.tableName,
+          ...this.form
+        }).then(res => {
+          Message({
+            type: 'success',
+            message: '新增成功'
+          })
+          this.isShow = false
+          this.$emit('refresh')
+        })
+        return
+      }
+      if (this.type === 'editor') {
+        save({
+          id: this.id,
+          table_name: this.tableName,
+          ...this.form
+        }).then(res => {
+          Message({
+            type: 'success',
+            message: '编辑成功'
+          })
           this.isShow = false
-          this.$emit('refresh')
-        })
-        return
-      }
-      if (this.type === 'editor') {
-        save({
-          id: this.id,
-          table_name: this.tableName,
-          ...this.form
-        }).then(res => {
-          Message({
-            type: 'success',
-            message: '编辑成功'
-          })
-          this.isShow = false
-          this.$emit('refresh')
-        })
-      }
-    }
-
-  }
-
-}
-</script>
-
-<style scoped lang="scss">
-  .mingxiwrap {
-    display: flex;
-    flex-wrap: wrap;
-  }
-
-  .mingxiwrap .xy-table-item {
-    margin-bottom: 10px
-  }
-
-  .searchCompanys {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 15px;
-  }
-
-  ::v-deep .searchCompanys .el-input {
-    width: 82%
-  }
-
-  .xy-table-item-label {
-    width: 160px;
-  }
-
-  .img__delete {
-    transform: scale(0.8, 0.8);
-
-    position: absolute;
-    top: 4px;
-    right: 4px;
-  }
-
-  ::v-deep .avatar-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-  }
-
-  ::v-deep .avatar-uploader .el-upload:hover {
-    border-color: #409EFF;
-  }
-
-  ::v-deep .el-upload--picture-card {
-    font-size: 28px;
-    color: #8c939d;
-    width: 80px !important;
-    height: 80px !important;
-    line-height: 80px !important;
-    text-align: center;
-  }
-
-  ::v-deep .avatar-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 80px !important;
-    height: 80px !important;
-    line-height: 80px !important;
-    text-align: center;
-  }
-
-  ::v-deep .avatar {
-    width: 80px !important;
-    display: block;
-    border-radius: 6px;
-  }
-
-  ::v-deep .xy-table-item-label {
-    width: 160px !important;
-  }
-
-  ::v-deep .el-date-editor .el-range-separator {
-    width: auto !important;
-  }
-
-  ::v-deep .el-input-number .el-input__inner {
-    text-align: left !important;
-  }
+          this.$emit('refresh')
+        })
+      }
+    }
+
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+  .mingxiwrap {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .mingxiwrap .xy-table-item {
+    margin-bottom: 10px
+  }
+
+  .searchCompanys {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+  }
+
+  ::v-deep .searchCompanys .el-input {
+    width: 82%
+  }
+
+  .xy-table-item-label {
+    width: 160px;
+  }
+
+  .img__delete {
+    transform: scale(0.8, 0.8);
+
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+
+  ::v-deep .avatar-uploader .el-upload {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+
+  ::v-deep .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+
+  ::v-deep .el-upload--picture-card {
+    font-size: 28px;
+    color: #8c939d;
+    width: 80px !important;
+    height: 80px !important;
+    line-height: 80px !important;
+    text-align: center;
+  }
+
+  ::v-deep .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 80px !important;
+    height: 80px !important;
+    line-height: 80px !important;
+    text-align: center;
+  }
+
+  ::v-deep .avatar {
+    width: 80px !important;
+    display: block;
+    border-radius: 6px;
+  }
+
+  ::v-deep .xy-table-item-label {
+    width: 160px !important;
+  }
+
+  ::v-deep .el-date-editor .el-range-separator {
+    width: auto !important;
+  }
+
+  ::v-deep .el-input-number .el-input__inner {
+    text-align: left !important;
+  }
 </style>

src/views/storages/floodmaterialfile.vue

@@ -5,25 +5,16 @@
       <lx-header icon="md-apps"  :text="$route.meta.title" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
         <slot>
           <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
-            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="关键词搜索" />
-            <Input v-model="select.yijifenlei" style="width: 200px;margin-right: 10px;" placeholder="一级分类搜索" />
-            <Input v-model="select.erjifenlei" style="width: 200px;margin-right: 10px;" placeholder="二级分类搜索" />
-
-            <!-- <el-select v-model="select.guanliancangku" @change="changeCk" style="width: 200px;" placeholder="请选择仓库">
-              <el-option v-for="item in cangkuList" :key="item.id" :label="item.cangkumingcheng"
-                :value="item.cangkumingcheng">
-              </el-option>
-            </el-select> -->
-            <Select v-model="select.guanliancangku" style="width:200px;margin-right: 10px;" placeholder="所在仓库" clearable>
+            <Input size="large" v-model="select.keyword" style="width: 200px;margin-right: 10px;height:40px" placeholder="关键词搜索" />
+            <el-cascader v-model="cascaderValue" ref="cascaders" clearable popper-class="select_popper" placeholder="请选择所属种类"
+              style="width: 200px;margin-right: 10px;" :options="fenleiList" :props="{label:'name',value:'id',checkStrictly: true}"
+              :check-strictly="true" @change="changeFenlei" />
+            <Select  size="large" v-model="select.guanliancangku" style="width:200px;margin-right: 10px;" placeholder="所在仓库" clearable>
               <Option v-for="item in cangkuList" :key="item.value" :value="item.id">{{ item.cangkumingcheng }}</Option>
             </Select>
-            <Select v-model="select.quyu_id" style="width: 200px;margin-right: 10px;" placeholder="所在区域" clearable>
+            <Select  size="large" v-model="select.quyu_id" style="width: 200px;margin-right: 10px;" placeholder="所在区域" clearable>
               <Option v-for="item in areaList" :key="item.id" :value="item.id">{{ item.value }}</Option>
             </Select>
-
-            <!-- <Select v-model="select.area" style="width: 200px;margin-right: 10px;" placeholder="所在区域" clearable @on-change="clearArea">
-              <Option v-for="item in areaList" :key="item.id" :value="item.id">{{ item.value }}</Option>
-            </Select> -->
             <Button type="primary" @click="getindex('page')">查询</Button>
             <Button
               type="primary"
@@ -102,6 +93,9 @@ import imports from '@/views/component/imports.vue'
 import {
   getparameteritem
 } from '@/api/system/dictionary.js'
+import {
+  index as getFenleilist
+} from '@/api/fenlei.js'
 export default {
   components: {
     addMater,
@@ -116,10 +110,13 @@ export default {
         keyword: '',
         yijifenlei: '',
         erjifenlei: '',
+        fenlei: '',
         guanliancangku: '',
         area: ''
       },
       areaList: [],
+      fenleiList: [],
+      cascaderValue: [], // 级联选择器的临时值
       customForm: {
         tableName: 'flood_materials'
       },
@@ -284,6 +281,7 @@ export default {
   mounted() {
     this.getArea()
     this.getCangku()
+    this.getFenlei()
     this.getindex()
     this.table.map(item => {
       if(item.type !== 'index'){
@@ -326,6 +324,65 @@ export default {
       })
       this.cangkuList = res.data
     },
+    async getFenlei() {
+      const res = await getFenleilist({
+        tree: 1,
+        sort_type: 'ASC',
+        sort_name: 'sort'
+      })
+      this.fenleiList = this.removeEmptyChildren(res)
+    },
+    removeEmptyChildren(node) {
+      if (Array.isArray(node)) {
+        return node.map(child => {
+          if (child.children) {
+            child.children = this.removeEmptyChildren(child.children)
+            if (child.children.length === 0) {
+              delete child.children
+            }
+          }
+          return child
+        })
+      }
+      return node
+    },
+    changeFenlei(value) {
+      // 清空所有分类字段
+      this.select.yijifenlei = ''
+      this.select.erjifenlei = ''
+      this.select.fenlei = ''
+      
+      if (!value || value.length === 0) {
+        return
+      }
+      
+      // 获取选中的节点信息
+      const checkedNodes = this.$refs.cascaders.getCheckedNodes()
+      if (!checkedNodes || checkedNodes.length === 0) {
+        return
+      }
+      
+      // 获取最后选中的节点（即用户实际选择的节点）
+      const selectedNode = checkedNodes[checkedNodes.length - 1]
+      if (!selectedNode || !selectedNode.data) {
+        return
+      }
+      
+      const selectedName = selectedNode.data.name
+      const level = value.length // 选择的级别：1=第一级，2=第二级，3=第三级
+      
+      // 根据选择的级别设置对应的字段
+      if (level === 1) {
+        // 选择第一级，将 name 值给 select.yijifenlei
+        this.select.yijifenlei = selectedName
+      } else if (level === 2) {
+        // 选择第二级，将 name 值给 select.erjifenlei
+        this.select.erjifenlei = selectedName
+      } else if (level === 3) {
+        // 选择第三级，将 name 值给 select.fenlei
+        this.select.fenlei = selectedName
+      }
+    },
     async getindex(page) {
       this.loading = true
       if (page == 'page') {
@@ -352,6 +409,10 @@ export default {
           'key': 'erjifenlei',
           'op': 'like',
           'value': this.select.erjifenlei ? this.select.erjifenlei : ''
+        }, {
+          'key': 'fenlei',
+          'op': 'eq',
+          'value': this.select.fenlei ? this.select.fenlei : ''
         }]
       })
       this.list = res.data