仓库地图 旋转

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/config.js

@@ -238,14 +238,14 @@ var arrRe=[
   standardYLength: 160, // 点位标准竖直长度，用于控制占位
   rodeYLength: 100, // 通道
   standardZLength: 75, // 点位标准高度，用于控制占位， 二维暂时用不到
-  leftOffset: 0, // 整体向右偏移量
+  leftOffset: 500, // 整体向右偏移量
   topOffset: 0, // 整体向下偏移量0
   // leftOffsetCell: -9, // 整体向右偏移单元格个数
   // topOffsetCell: -8, // 整体向下偏移单元格个数
   leftOffsetCell: 0, // 整体向右偏移单元格个数
   topOffsetCell: 0, // 整体向下偏移单元格个数
-  textRotation: 0, // 文字旋转 （顺时针90°： -Math.PI / 2）
+  textRotation: Math.PI / 2, // 文字旋转 （顺时针90°： -Math.PI / 2）
-  eyePoint: [0, 1900, 0],
+  eyePoint: [1, 1800, 0],
   vehicleType: 1, // 1堆垛机 2四向车
   mutiLayer: false, // 不同层的货位分多层展示
   warehouseType: 1, // 1 堆垛机 2 四向车
@@ -335,11 +335,11 @@ var arrRe=[
       // color: '#fc427b'
 
     },
-     '2': {
+    //  '2': {
-      //天蓝
+    //   //天蓝
-      describe: '空台车',
+    //   describe: '空台车',
-      color: '#70a1ff'
+    //   color: '#70a1ff'
-    },
+    // },
      '4': {
       //深黄
       describe: '已分配',
@@ -503,12 +503,11 @@ var arrRe=[
     '4-18',
     '4-21'
   ],
+
+
   // 四向车仓库点阵数据
-   latticeForFourwayCar1:[
 
-  ],
+  latticeForFourwayCar1:[
-  // 堆垛机仓库模拟点阵数据
-  latticeForPiler:[
     [0,0,0,"0-0-0",1,1,100,100,100],
     [0,1,0,"0-1-0",1,0,100,100,100],
     [0,10,0,"0-10-0",1,0,100,100,100],
@@ -971,6 +970,8 @@ var arrRe=[
     [9,7,0,"9-7-0",0,0,100,100,100],
     [9,8,0,"9-8-0",1,0,100,100,100],
     [9,9,0,"9-9-0",1,0,100,100,100],
+  ],
+  latticeForFourwayCar2:[
     [0,0,2,"0-0-2",1,0,100,100,100],
 [0,1,2,"0-1-2",1,0,100,100,100],
 [0,10,2,"0-10-2",1,0,100,100,100],
@@ -1433,6 +1434,8 @@ var arrRe=[
 [9,7,2,"9-7-2",0,0,100,100,100],
 [9,8,2,"9-8-2",1,0,100,100,100],
 [9,9,2,"9-9-2",1,0,100,100,100],
+  ],
+  latticeForFourwayCar3:[
     [0,0,3,"0-0-3",1,0,100,100,100],
 [0,1,3,"0-1-3",1,0,100,100,100],
 [0,10,3,"0-10-3",1,0,100,100,100],
@@ -1790,6 +1793,8 @@ var arrRe=[
 [3,7,3,"3-7-3",0,0,100,100,100],
 [3,8,3,"3-8-3",1,0,100,100,100],
 [3,9,3,"3-9-3",1,0,100,100,100],
+  ],
+  latticeForFourwayCar4:[
     [4,0,3,"4-0-3",1,0,100,100,100],
     [4,1,3,"4-1-3",1,0,100,100,100],
     [4,10,3,"4-10-3",1,0,100,100,100],
@@ -2234,6 +2239,8 @@ var arrRe=[
     [9,7,4,"9-7-4",0,0,100,100,100],
     [9,8,4,"9-8-4",1,0,100,100,100],
     [9,9,4,"9-9-4",1,0,100,100,100],
+  ],
+  latticeForFourwayCar5:[
 [0,10,5,"0-10-5",1,0,100,100,100],
 [0,11,5,"0-11-5",1,0,100,100,100],
 [0,12,5,"0-12-5",0,0,100,100,100],

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':