地图 仓库

src/views/jsc/components/mapChart.vue

@@ -282,7 +282,10 @@ export default {
       // })
       // 基于准备好的dom，初始化echarts实例
       console.log('streetNameList', this.streetNameList)
+      // 避免重复初始化
+      if (!this.myChart) {
         this.myChart = echarts.init(document.getElementById('chart'))
+      }
       echarts.registerMap('GX', jtmap)
       // 绘制图表
       this.myChart.setOption({
@@ -599,18 +602,110 @@ export default {
       console.log('resetToFullMap - warehouseData:', this.warehouseData);
       console.log('resetToFullMap - warehouseData.length:', this.warehouseData ? this.warehouseData.length : 0);
       
-      // 重新调用 drawChart 来完全重置地图
-      this.drawChart();
+      // 完全重新初始化地图
+      if (this.myChart) {
+        this.myChart.dispose(); // 销毁现有实例
+      }
+      
+      // 重新初始化地图
+      this.myChart = echarts.init(document.getElementById('chart'));
+      echarts.registerMap('GX', jtmap);
+      
+      // 重新绘制完整的地图配置
+      this.myChart.setOption({
+        // 提示框组件
+        tooltip: {
+          trigger: 'item',
+          position: 'right',
+          enterable: true,
+          triggerOn: 'click',
+          formatter: (val) => {
+            console.log('val', val)
+            this.hookToolTip = val
+          }
+        },
+        geo: {
+          map: 'GX',
+          roam: true,
+          zoom: 1.1,
+          center: [120.585294, 31.299758],
+          label: {
+            normal: {
+              show: false,
+              fontSize: '0',
+              color: 'rgba(0,0,0,0.7)'
+            }
+          },
+          itemStyle: {
+            normal: {
+              borderColor: 'rgba(0, 0, 0, 0.2)'
+            },
+            emphasis: {
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              shadowBlur: 20,
+              borderWidth: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)'
+            }
+          },
+          regions: [
+            { name: '相城区', itemStyle: { normal: { areaColor: '#1890ff' }, emphasis: { areaColor: '#1890ff' } } },
+            { name: '姑苏区', itemStyle: { normal: { areaColor: '#40a9ff' }, emphasis: { areaColor: '#40a9ff' } } },
+            { name: '虎丘区', itemStyle: { normal: { areaColor: '#2f54eb' }, emphasis: { areaColor: '#2f54eb' } } },
+            { name: '吴中区', itemStyle: { normal: { areaColor: '#1d39c4' }, emphasis: { areaColor: '#1d39c4' } } },
+            { name: '园区', itemStyle: { normal: { areaColor: '#5d39e9' }, emphasis: { areaColor: '#5d39e9' } } },
+            { name: '太仓市', itemStyle: { normal: { areaColor: '#597ef7' }, emphasis: { areaColor: '#597ef7' } } },
+            { name: '昆山市', itemStyle: { normal: { areaColor: '#10239e' }, emphasis: { areaColor: '#10239e' } } },
+            { name: '常熟市', itemStyle: { normal: { areaColor: '#69c0ff' }, emphasis: { areaColor: '#69c0ff' } } },
+            { name: '张家港市', itemStyle: { normal: { areaColor: '#0050b3' }, emphasis: { areaColor: '#0050b3' } } },
+            { name: '吴江区', itemStyle: { normal: { areaColor: '#096dd9' }, emphasis: { areaColor: '#096dd9' } } }
+          ]
+        },
+        series: [{
+          name: '区域',
+          type: 'map',
+          map: 'GX',
+          geoIndex: 0,
+          markPoint: {
+            symbol: '',
+            symbolSize: [10, 10],
+            symbolOffset: [0, 0],
+            label: {
+              position: 'center',
+              color: '#333',
+              textAlign: 'center',
+              padding: [5, 10],
+              borderRadius: 20,
+              borderWidth: 1,
+              borderColor: '#096dd9',
+              backgroundColor: '#fff',
+              formatter(val) {
+                return val.data.name
+              }
+            },
+            data: this.streetNameList
+          }
+        }]
+      });
       
       // 如果有仓库数据，重新应用仓库数量显示
       if (this.warehouseData && this.warehouseData.length > 0) {
         this.updateWarehouseData(this.warehouseData);
       }
       
-      // 强制刷新地图
-      this.myChart.resize();
+      // 重新绑定点击事件
+      this.myChart.on('click', params => {
+        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);
+          }
+        }
+      });
       
-      console.log('返回全图完成，仓库点位已清除，仓库数量应显示');
+      console.log('返回全图完成，地图已完全重新加载，仓库点位已清除');
     },
     updateWarehouseData(warehouseData) {
       // 更新仓库数量数据

src/views/storages/components/addStorage.vue

@@ -57,6 +57,18 @@
           </div>
         </div>
       </template>
+      <template v-slot:shifouxunihuojia>
+        <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.shifouxunihuojia" style="width:300px" placeholder="请选择">
+            <el-option v-for="item in [{id:'是',value:'是'},{id:'否',value:'否'}]" :key="item.id" :label="item.value" :value="item.value" />
+          </el-select>
+        </div>
+        </div>
+      </template>
       <template v-slot:sort>
         <div class="xy-table-item">
           <div class="xy-table-item-label">
@@ -291,6 +303,7 @@ export default {
         cangkumingcheng: '',
         cangkubianma: '',
         shifouzili: '否',
+        shifouxunihuojia: '否', // 是否显示虚拟货架
         sort: 0,
         suozaiquyu: '',
         jiansheniandai: '',

src/views/storages/index.vue

@@ -14,6 +14,9 @@
             <Select v-model="select.shifouzili" style="width: 200px;margin-right: 10px;" placeholder="是否纳入物资管理" clearable>
               <Option v-for="item in [{id:'是',value:'是'},{id:'否',value:'否'}]" :key="item.id" :value="item.id">{{ item.value }}</Option>
             </Select>
+            <Select v-model="select.shifouxunihuojia" style="width: 200px;margin-right: 10px;" placeholder="是否显示虚拟货架" clearable>
+              <Option v-for="item in [{id:'是',value:'是'},{id:'否',value:'否'}]" :key="item.id" :value="item.id">{{ item.value }}</Option>
+            </Select>
             <Button type="primary" @click="select.page=1,getList()">查询</Button>
             <Button
               type="primary"
@@ -97,7 +100,8 @@ export default {
         table_name: 'materialstorages',
         area: '',
         storehouses_id: '',
-        shifouzili: ''
+        shifouzili: '',
+        shifouxunihuojia: ''
       },
       areaList: [],
       total: 0,
@@ -133,6 +137,12 @@ export default {
         align: 'center',
         width: 160
       },
+      {
+        label: '是否显示虚拟货架',
+        prop: 'shifouxunihuojia',
+        align: 'center',
+        width: 160
+      },
       {
         label: '货架信息',
         prop: 'huojia',
@@ -226,6 +236,10 @@ export default {
           key: 'shifouzili',
           op: 'eq',
           value: this.select.shifouzili ? this.select.shifouzili : ''
+        }, {
+          key: 'shifouxunihuojia',
+          op: 'eq',
+          value: this.select.shifouxunihuojia ? this.select.shifouxunihuojia : ''
         }]
 
       })

src/views/virtual/index.vue

@@ -6,11 +6,16 @@
       <div class="aside-header">
         <h3>仓库列表</h3>
       </div>
-      <el-menu :default-active="activeRepository" class="repository-menu" @select="handleSelectRepository">
-        <el-menu-item v-for="repo in repositories" :key="repo.id" :index="repo.id.toString()">
-          <span>{{ repo.cangkumingcheng }}</span>
-        </el-menu-item>
-      </el-menu>
+      <div class="repository-list">
+        <div 
+          v-for="repo in repositories" 
+          :key="repo.id" 
+          :class="['repository-item', { 'active': activeRepository === repo.id.toString() }]"
+          @click="handleSelectRepository(repo.id.toString())"
+        >
+          {{ repo.cangkumingcheng }}
+        </div>
+      </div>
     </el-aside>
 
     <!-- 右侧概览图和货架点位展示区 -->
@@ -198,6 +203,10 @@
                   key: 'shifouzili',
                   op: 'eq',
                   value: '是'
+                }, {
+                  key: 'shifouxunihuojia',
+                  op: 'eq',
+                  value: '是'
                 }]
               })
               this.repositories = res.data
@@ -371,6 +380,39 @@
     flex: 1;
   }
 
+  /* 仓库列表样式 */
+  .repository-list {
+    flex: 1;
+    padding: 0;
+  }
+
+  .repository-item {
+    padding: 12px 20px;
+    cursor: pointer;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fff;
+    transition: all 0.3s;
+    word-wrap: break-word;
+    word-break: break-all;
+    white-space: normal;
+    line-height: 1.4;
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .repository-item:hover {
+    background-color: #f5f7fa;
+    color: #409eff;
+    cursor: pointer;
+  }
+
+  .repository-item.active {
+    background-color: #ecf5ff;
+    color: #409eff;
+    border-right: 3px solid #409eff;
+    font-weight: 600;
+  }
+
   /* 右侧主要内容区样式 */
   .repository-main {
     flex: 1;