仓库地图 旋转

src/api/util/mapDrawing.js

@@ -50,6 +50,7 @@ class MapDrawing extends EventEmitter {
         otherPoint: [],
         pointChild: [],
         levels: {
+          // nowLevel: localStorage.getItem('level').slice(6, 7)
           nowLevel: localStorage.getItem('level').slice(6, 7)
         }
       },
@@ -628,21 +629,8 @@ class MapDrawing extends EventEmitter {
           // 制作矩形
        ctx.fillStyle = 'black'
         ctx.font = '600  40px "宋体"'
-      this.property.latticeForPiler1.forEach(item=>{
-        if(row == item.locationCode){
-          if(item.locationStatus == '7' && item.locationColumn!='14'&& item.locationCode!='1-26-18' 
-          && item.locationCode!='1-26-19' && item.locationCode!='1-27-20' && item.locationCode!='1-27-21'&& item.locationCode!='1-24-18'&& item.locationCode!='1-26-13'&& item.locationCode!='1-26-12'&& item.locationCode!='1-26-11'&& item.locationCode!='1-25-11' && item.locationCode!='1-26-13'&& item.locationCode!='1-26-12'&& item.locationCode!='1-40-11'&& item.locationCode!='1-41-13'&& item.locationCode!='1-41-12'&& item.locationCode!='1-41-11'&& item.locationCode!='1-42-21'&& item.locationCode!='1-42-20'&& item.locationCode!='1-44-21'&& item.locationCode!='1-44-20'&& item.locationCode!='1-41-19'&& item.locationCode!='1-41-18'&& item.locationCode!='1-43-18'&& item.locationCode!='1-49-18'&& item.locationCode!='1-16-13'&& item.locationCode!='1-55-13'&& item.locationCode!='2-27-21'&& item.locationCode!='2-27-20'&& item.locationCode!='2-26-19'&& item.locationCode!='2-26-18'&& item.locationCode!='2-26-13'&& item.locationCode!='2-41-13'&& item.locationCode!='2-41-12'&& item.locationCode!='3-27-18'&& item.locationCode!='3-27-19'&& item.locationCode!='3-27-20'&& item.locationCode!='3-27-21'&& item.locationCode!='3-26-13'&& item.locationCode!='3-26-12'&& item.locationCode!='3-41-12'&& item.locationCode!='3-41-13'&& item.locationCode!='3-41-19'&& item.locationCode!='3-27-20'
-          && item.locationColumn!='17'){
-            ctx.fillStyle = '#d63031'
-            ctx.fillRect(0, 0, info.width, info.height)
-            // ctx.fillStyle = 'black'
-            ctx.font = '800 bold 52px "宋体"'
-          }
-
-        }
-      })
 
-      ctx.font = '600 40px "宋体"'
+      // ctx.font = '600 40px "宋体"'
       // ctx.color = 'red'
       ctx.fillStyle = 'black'
       ctx.fillText(row, 5, info.lineHeight * index + 60)
@@ -767,10 +755,7 @@ class MapDrawing extends EventEmitter {
       let stateDictionary = this.property.config.tileStateDictionary[this.property.config.tileStateDictionary.hasOwnProperty(storageRack.state) ? storageRack.state : '0']
       //疑似仓库地图 点位`1
       console.log(this.property.layer.levels.nowLevel);
-      // || storageRack.id=="10-9"  || storageRack.id=="11-9"
+
-      // if(this.property.layer.levels.nowLevel == 1){
-      //   if(storageRack.id=="12-21" || storageRack.id=="12-20"|| storageRack.id=="12-19"   || storageRack.id=="16-19"  || storageRack.id=="16-20" || storageRack.id=="16-21" || storageRack.id=="24-19"   || storageRack.id=="24-20" || storageRack.id=="24-21" || storageRack.id=="25-19" || storageRack.id=="25-20" || storageRack.id=="25-21" || storageRack.id=="28-19" || storageRack.id=="28-20" || storageRack.id=="28-21" || storageRack.id=="35-19" || storageRack.id=="35-20" || storageRack.id=="35-21" || storageRack.id=="40-19" || storageRack.id=="40-20" || storageRack.id=="40-21" || storageRack.id=="43-19" || storageRack.id=="43-20" || storageRack.id=="43-21" || storageRack.id=="49-19" || storageRack.id=="49-20" || storageRack.id=="49-21"){return   }
-      // }
         let storageRackInfo = {
           id: storageRack.id,
           type: 'storageRack',
@@ -794,7 +779,7 @@ class MapDrawing extends EventEmitter {
         // console.log('你好,Mr.sun',storageRackInfo);
         storageRack.childNodes = self.drawRactangleInParentWithLevel(storageRackInfo, freightSpaces, dictionary)
       } else {
-        // console.log(2222);
+        console.log(2222);
         storageRack.childNodes = self.drawRactangleInParent(storageRackInfo, freightSpaces, dictionary)
       }
     })
@@ -1736,7 +1721,6 @@ class MapDrawing extends EventEmitter {
 
   initWarehouse () {
     if (this.property.warehouseInfo) {
-     
       this.drawWarehouses()
       if (this.property.config.vehicleType === 1) {
         // this.drawPilers()

src/views/libraryManage/warehouseMap/index.vue

@@ -121,7 +121,88 @@
 
       </Form>
     </div>
+    <div style="height: 60px;">
+      <el-checkbox
+        :checked="layer['level-0']"
+        v-model="layer['level-0']"
+        @change="layerHandler('level-0')"
+        style="font-size:22px"
+      >一层</el-checkbox>
+      <el-checkbox
+        :checked="layer['level-2']"
+        v-model="layer['level-2']"
+        @change="layerHandler('level-2')"
+        style="font-size:22px"
+      >二层</el-checkbox>
+      <el-checkbox
+        :checked="layer['level-3']"
+        v-model="layer['level-3']"
+        @change="layerHandler('level-3')"
+        style="font-size:22px"
+      >三层</el-checkbox>
+      <el-checkbox
+        :checked="layer['level-4']"
+        v-model="layer['level-4']"
+        @change="layerHandler('level-4')"
+        style="font-size:18px"
+      >四层</el-checkbox>
+      <el-checkbox
+        :checked="layer['level-5']"
+        v-model="layer['level-5']"
+        @change="layerHandler('level-5')"
+        style="font-size:18px"
+      >五层</el-checkbox>
 
+      <i
+        class="el-icon-location-information"
+        @click="searchModel.show = true"
+        style="font-size:28px;margin-left:60px;cursor: pointer;"
+      ></i>
+
+      <!-- v-model="checked" -->
+
+      <div style="display: inline-block;margin-left:80px">
+        <ul style="list-style-type:none;display:flex">
+
+          <li>空</li>
+          <li style="width: 30px;height: 20px;background-color: #ecf0f1;margin-left:8px;margin-right:20px"></li>
+          <li>有货</li>
+          <li style="width: 30px;height: 20px;background-color: #3742fa;margin-left:8px;margin-right:20px"></li>
+          <!-- <li>空台车</li>
+          <li style="width: 30px;height: 20px;background-color: #70a1ff;margin-left:8px;margin-right:20px"></li> -->
+          <li>已分配</li>
+          <li style="width: 30px;height: 20px;background-color: #eccc68;margin-left:8px;margin-right:20px"></li>
+          <li>锁定库存</li>
+          <li style="width: 30px;height: 20px;background-color: #ff7675;margin-left:8px;margin-right:20px"></li>
+          <li>禁用库存</li>
+          <li style="width: 30px;height: 20px;background-color: #d63031;margin-left:8px;margin-right:20px"></li>
+        </ul>
+      </div>
+      <div style="display:inline-block;">
+        <div style="margin-left:50px;display: flex;">
+          <p style="width: 60px;display: flex;flex-direction:column;border-right:1px solid #ccc">
+            <span style="font-size:16px">库位数</span>
+            <span v-show="layer['level-1']">{{locationObj.num1}}</span>
+            <span v-show="layer['level-2']">{{locationObj.num2}}</span>
+            <span v-show="layer['level-3']">{{locationObj.num3}}</span>
+            <span v-show="layer['level-4']">{{locationObj.num4}}</span>
+          </p>
+          <p style="width: 78px;display: flex;flex-direction:column;border-right:1px solid #ccc">
+            <span style="font-size:16px">已用库位</span>
+            <span v-show="layer['level-1']">{{locationObj2.num1}}</span>
+            <span v-show="layer['level-2']">{{locationObj2.num2}}</span>
+            <span v-show="layer['level-3']">{{locationObj2.num3}}</span>
+            <span v-show="layer['level-4']">{{locationObj2.num4}}</span>
+          </p>
+          <p style="width: 60px;display: flex;flex-direction:column;border-right:1px solid #ccc">
+            <span style="font-size:16px">总库位</span>
+            <span>1604</span>
+          </p>
+
+        </div>
+      </div>
+
+    </div>
     <div
       id="mapContainer"
       class="map-container"
@@ -190,7 +271,7 @@ export default {
           }
         }
       },
-      layer: JSON.parse(localStorage.getItem('layerItem')) || { freightSpace: true, pointId: false, 'level-1': true, 'level-2': false, 'level-3': false, 'level-4': false },
+      layer: JSON.parse(localStorage.getItem('layerItem')) || { freightSpace: true, pointId: false, 'level-0': true, 'level-2': false, 'level-3': false, 'level-4': false, 'level-5': false },
       lattice: {}, // 点阵关系对照
       searchModel: {
         show: false,
@@ -308,8 +389,10 @@ export default {
   },
   mounted() {
     //   this.startMap()
-    // this.init('fourwayCar')
+    this.init('fourwayCar')
-    this.init('piler')
+    var layerId1 = localStorage.getItem('level') || 'level-1'
+    this.mapControl.layerControl(layerId1, this.layer[layerId1], layerId1.slice(6, 7))
+    // this.init('piler')
     //   var layerId1 = localStorage.getItem('level') || 'level-1'
     //   this.mapControl.layerControl(layerId1, this.layer[layerId1], layerId1.slice(6, 7))
     //   console.log(layerId1, this.layer[layerId1], layerId1.slice(6, 7), this.layer)
@@ -394,7 +477,7 @@ export default {
               // console.log(111)
               var layerId1 = localStorage.getItem('level')
               console.log(layerId1)
-              if (layerId1 === 'level-1') {
+              if (layerId1 === 'level-0') {
                 this.initWareHouseInfo(this.config.latticeForFourwayCar1)
               } else if (layerId1 === 'level-2') {
                 this.initWareHouseInfo(this.config.latticeForFourwayCar2)
@@ -402,6 +485,8 @@ export default {
                 this.initWareHouseInfo(this.config.latticeForFourwayCar3)
               } else if (layerId1 === 'level-4') {
                 this.initWareHouseInfo(this.config.latticeForFourwayCar4)
+              } else if (layerId1 === 'level-5') {
+                this.initWareHouseInfo(this.config.latticeForFourwayCar5)
               }
               break
             case 'piler':