push

src/api/charts.js

@@ -1,51 +1,56 @@
-import request from '@/utils/request'
+import request from '@/utils/request'
-
+
 export function stocksCharts(params) {
   return request({
     url: '/api/admin/chart/stocks',
     method: 'get',
     params: params
   })
-}
+}
-
+
 export function outboundsCharts(params) {
   return request({
     url: '/api/admin/chart/outbounds',
     method: 'get',
     params: params
   })
-}
+}
-
+
 export function updateInventorys(params) {
   return request({
     url: '/api/admin/chart/update-inventorys',
     method: 'get',
     params: params
   })
-}
+}
-
+
 export function fenleiCharts(params) {
   return request({
     url: '/api/admin/chart/fenlei',
     method: 'get',
     params: params
   })
-}
+}
-
+
 export function homeCharts(params) {
   return request({
     url: '/api/admin/chart/home-v2',
     method: 'get',
     params: params
   })
-}
+}
-
+
 export function soCharts(params) {
   return request({
     url: '/api/admin/chart/stocks-and-outbounds',
     method: 'get',
     params: params
   })
-}
+}
-
+export function finishCharts(params) {
-
+  return request({
+    url: '/api/admin/chart/finish',
+    method: 'get',
+    params: params
+  })
+}

src/views/jsc/components/barChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chart1" style="width:350px" class="bar3d-chart" />
+  <div ref="chart1" style="width:400px" class="bar3d-chart" />
 </template>
 
 <script>
@@ -10,38 +10,88 @@ export default {
   props: {
     xData: {
       type: Array,
-      default: []
+      default: () => []
     },
     yData: {
       type: Array,
-      default: []
+      default: () => []
     }
   },
   watch: {
-    xData(newVal) {
+    xData: {
-      if (newVal) {
+      handler(newVal) {
+        console.log('Bar3DChart xData 变化:', newVal)
+        console.log('Bar3DChart 当前 yData:', this.yData)
+        // 即使数据为空，也尝试初始化图表
         this.initChart()
         this.resizeChart()
-      }
+      },
+      immediate: true,
+      deep: true
+    },
+    yData: {
+      handler(newVal) {
+        console.log('Bar3DChart yData 变化:', newVal)
+        console.log('Bar3DChart 当前 xData:', this.xData)
+        // 即使数据为空，也尝试初始化图表
+        this.initChart()
+        this.resizeChart()
+      },
+      immediate: true,
+      deep: true
     }
   },
   mounted() {
+    console.log('Bar3DChart 组件挂载')
+    console.log('DOM 元素:', this.$refs.chart1)
+    
     this.chart = echarts.init(this.$refs.chart1)
+    console.log('ECharts 实例创建:', this.chart)
+    
+    // 初始化图表
+    this.initChart()
   },
   beforeDestroy() {
     if (this.chart) this.chart.dispose()
   },
   methods: {
     initChart() {
-      // this.chart = echarts.init(this.$refs.chart1)
+      console.log('Bar3DChart initChart 被调用')
+      console.log('当前 xData:', this.xData)
+      console.log('当前 yData:', this.yData)
+      
+      // 确保有默认数据
+      const xData = this.xData && this.xData.length > 0 ? this.xData : ['暂无数据']
+      const yData = this.yData && this.yData.length > 0 ? this.yData : [
+        {
+          name: '盘点',
+          type: 'bar',
+          data: [0],
+          itemStyle: { color: '#6ec6ff' }
+        },
+        {
+          name: '维护',
+          type: 'bar',
+          data: [0],
+          itemStyle: { color: '#4be3c1' }
+        }
+      ]
+      
       const option = {
         backgroundColor: 'transparent',
-        title: {
+        // title: {
-          text: '待办任务',
+        //   text: '待办任务',
-          left: 'center',
+        //   left: 'center',
-          top: 0,
+        //   top: 0,
+        //   textStyle: {
+        //     color: '#6dcde6'
+        //   }
+        // },
+        legend: {
+          data: yData.map(item => item.name),
+          top: 30,
           textStyle: {
-            color: '#6dcde6'
+            color: '#fff'
           }
         },
         grid: {
@@ -50,9 +100,15 @@ export default {
           bottom: 140,
           top: 80
         },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
         xAxis: {
           type: 'category',
-          data: this.xData,
+          data: xData,
           axisLine: {
             lineStyle: {
               color: '#6ec6ff'
@@ -60,7 +116,12 @@ export default {
           },
           axisLabel: {
             color: '#fff',
-            fontSize: 16
+            fontSize: 16,
+            interval: 0, // 强制显示所有标签
+            rotate: 45, // 标签旋转45度
+            textStyle: {
+              fontSize: 12 // 稍微减小字体大小以适应旋转后的显示
+            }
           }
         },
         yAxis: {
@@ -81,11 +142,12 @@ export default {
             fontSize: 16
           }
         },
-        series: [{
+        series: yData.map(item => ({
+          name: item.name,
           type: 'bar',
           barWidth: 40,
-          data: this.yData,
+          data: item.data,
-          itemStyle: {
+          itemStyle: item.itemStyle || {
             color: {
               type: 'linear',
               x: 0,
@@ -106,16 +168,21 @@ export default {
             shadowBlur: 10
           },
           label: {
-            show: true,
+            show: false
-            position: 'top',
-            color: '#fff',
-            fontSize: 18
           }
-        }]
+        }))
       }
+      
+      console.log('ECharts 配置:', option)
+      
       this.$nextTick(() => {
-        this.chart.setOption(option)
+        if (this.chart) {
-      })
+          this.chart.setOption(option)
+          console.log('图表配置已应用')
+        } else {
+          console.warn('图表实例不存在')
+        }
+      })
     },
     resizeChart() {
       if (this.chart) this.chart.resize()
@@ -129,4 +196,4 @@ export default {
     height: 400px;
     background: transparent;
   }
-</style>
+</style>

src/views/jsc/components/mapChart.vue

@@ -48,7 +48,7 @@ export default {
   props: {
     mapStyle:{
       type:String,
-      default:()=>{return 'width:700px;height:500px;position: relative;'}
+      default:()=>{return 'width:650px;height:500px;position: relative;'}
     }
     // mapData: {
     //   type: Array,
@@ -66,6 +66,7 @@ export default {
       wuziList:[],
       wuziTotal:0,
       cangkuObj:{},
+      warehouseData: [], // 仓库数量数据
       table: [{
         label: '序号',
         type: 'index',
@@ -486,24 +487,43 @@ export default {
       });
     },
     async zoomToArea(areaObj) {
+      console.log('点击区域:', areaObj);
+      
       // 1. 获取仓库点位数据
       const warehouseList = await this.getList(areaObj.id);
+      console.log('获取到的仓库列表:', warehouseList);
 
       // 2. 生成点位
-      this.warehousePoints = (warehouseList || []).map(item => ({
+      this.warehousePoints = (warehouseList || []).map(item => {
-        name: item.cangkumingcheng,
+        const jingdu = Number(item.jingdu);
-        value: [Number(item.jingdu), Number(item.weidu)],
+        const weidu = Number(item.weidu);
-        id: item.id,
+        
-        item:item
+        // 验证坐标数据
-      }));
+        if (isNaN(jingdu) || isNaN(weidu) || jingdu === 0 || weidu === 0) {
+          console.warn('仓库坐标无效:', item.cangkumingcheng, '经度:', item.jingdu, '纬度:', item.weidu);
+          return null;
+        }
+        
+        return {
+          name: item.cangkumingcheng,
+          value: [jingdu, weidu],
+          id: item.id,
+          item: item
+        };
+      }).filter(point => point !== null); // 过滤掉无效的坐标点
+      
+      console.log('生成的仓库点位:', this.warehousePoints);
+      console.log('有效仓库点位数量:', this.warehousePoints.length);
 
       // 3. 只更新geo的center和zoom，添加仓库点位
+      console.log('设置地图配置，仓库点位数量:', this.warehousePoints.length);
+      
       this.myChart.setOption({
         series: [
           {
             name: '区域',
             type: 'map',
-            mapType: 'china',
+            map: 'GX',
             geoIndex: 0,
             markPoint: {
               symbol: '',
@@ -526,16 +546,18 @@ export default {
             }
           },
           {
+            name: '仓库点位',
             type: 'scatter',
             coordinateSystem: 'geo',
             data: this.warehousePoints,
-            symbolSize: 12,
+            symbol: 'pin',
-            itemStyle: { color: '#f00' },
+            symbolSize: [16, 20],
+            itemStyle: { color: 'orange' },
             label: {
               show: true,
               formatter: '{b}',
               position: 'top',
-              color: 'red',
+              color: 'orange',
               fontSize: 12
             }
           }
@@ -545,6 +567,9 @@ export default {
           zoom: areaObj.zoom // 直接使用streetNameList中的zoom
         }
       });
+      
+      // 强制刷新地图
+      this.myChart.resize();
 
       // 重新绑定地图点击事件
       this.myChart.off('click');
@@ -570,13 +595,46 @@ export default {
       this.cangkuObj = {}
       this.wuziTotal = 0
       this.showData = false
-      // 只重置geo的配置，保留原始地图series
+      
-      this.myChart.setOption({
+      console.log('resetToFullMap - warehouseData:', this.warehouseData);
-        series: [
+      console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0);
-          {
+      
+      // 重新调用 drawChart 来完全重置地图
+      this.drawChart();
+      
+      // 如果有仓库数据，重新应用仓库数量显示
+      if (this.warehouseData && this.warehouseData.length > 0) {
+        this.updateWarehouseData(this.warehouseData);
+      }
+      
+      // 强制刷新地图
+      this.myChart.resize();
+      
+      console.log('返回全图完成，仓库点位已清除，仓库数量应显示');
+    },
+    updateWarehouseData(warehouseData) {
+      // 更新仓库数量数据
+      this.warehouseData = warehouseData;
+      
+      // 更新地图上的区域标签，显示仓库数量
+      const updatedStreetList = this.streetNameList.map(street => {
+        const warehouseInfo = warehouseData.find(w => w.name === street.name);
+        if (warehouseInfo) {
+          return {
+            ...street,
+            warehouseCount: warehouseInfo.warehouseCount
+          };
+        }
+        return street;
+      });
+      
+      // 更新地图配置
+      if (this.myChart) {
+        this.myChart.setOption({
+          series: [{
             name: '区域',
             type: 'map',
-            mapType: 'china',
+            map: 'GX',
             geoIndex: 0,
             markPoint: {
               symbol: '',
@@ -592,40 +650,29 @@ export default {
                 borderColor: '#096dd9',
                 backgroundColor: '#fff',
                 formatter(val) {
-                  return val.data.name
+                  const street = updatedStreetList.find(s => s.name === val.data.name);
+                  if (street && street.warehouseCount !== undefined) {
+                    return `{name|${street.name}}\n{warehouse|仓库: ${street.warehouseCount}}`;
+                  }
+                  return val.data.name;
+                },
+                rich: {
+                  name: {
+                    color: '#333',
+                    fontSize: 12,
+                    fontWeight: 'bold'
+                  },
+                  warehouse: {
+                    color: 'orange',
+                    fontSize: 12
+                  }
                 }
               },
-              data: this.streetNameList
+              data: updatedStreetList
             }
-          },
+          }]
-          {
+        });
-            type: 'scatter',
+      }
-            coordinateSystem: 'geo',
-            data: [] // 清空仓库点位
-          }
-        ],
-        geo: {
-          center: [120.585294, 31.299758], // 恢复全图中心点
-          zoom: 1 // 恢复全图缩放比例
-        }
-      });
-
-      // 重新绑定地图点击事件
-      this.myChart.off('click');
-      this.myChart.on('click', params => {
-        if (params.seriesType === 'scatter') {
-          this.getWuzi(params.data);
-        } else if (params.componentType === 'series' && params.seriesType === 'map') {
-          const areaName = params.name;
-          const areaObj = this.streetNameList.find(item => item.name === areaName);
-          if (areaObj) {
-            this.currentArea = areaObj;
-            this.zoomToArea(areaObj);
-          }
-        } else if (params.componentType === 'geo') {
-          this.resetToFullMap();
-        }
-      });
     },
     async getWuzi(cangku) {
       console.log("warehouseId",cangku)