书架管理-2

src/views/deviceManage/bookshelf/index.vue

@@ -81,22 +81,33 @@
           <span class="right-top-line" />
           <span class="left-bottom-line" />
           <ul class="tab-nav">
-            <li class="active-tab-nav">区域书架<i /></li>
+            <li class="active-tab-nav"> {{ selectRegionVal && selectRegionVal.mapType===1 ? '区域书架' : '3D区域书架' }}<i /></li>
             <!-- 最右侧装饰img -->
             <span class="tab-right-img" />
-            <el-button size="mini" class="venue-mark" :disabled="crud.selections.length !== 1" @click="handleMark">
+            <el-button v-if="selectRegionVal && selectRegionVal.mapType===1" size="mini" class="venue-mark" :disabled="crud.selections.length !== 1" @click="handleMark">
               <i class="el-icon-edit" />
               书架标注
             </el-button>
           </ul>
-          <div class="venue-preview">
-            <!-- <img :src="imageUrl" :onerror="defaultImg" alt=""> -->
+          <!-- <div class="venue-preview">
             <div v-show="currentMarkData && currentMarkData.signPoint">
               <canvas id="canvasPreview" :width="width" :height="height" />
             </div>
             <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt="">
             <img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt="">
+          </div> -->
+          <div v-show="selectRegionVal && selectRegionVal.mapType===1" class="venue-preview">
+            <div v-show="currentMarkData && currentMarkData.signPoint ">
+              <!-- <canvas :id="`canvasPreview${currentMarkData && currentMarkData.id}`" :width="width" :height="height" /> -->
+              <canvas id="canvasPreview" :width="width" :height="height" />
+            </div>
+            <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt="">
+            <img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt="">
           </div>
+          <div v-if="selectRegionVal && selectRegionVal.mapType===2" class="venue-preview">
+            <PreviewMapRight ref="rightMap" :map-data="currentMapData" />
+          </div>
+
         </div>
       </div>
     </div>
@@ -214,6 +225,7 @@
 <script>
 import { FetchLibraryFloorListAll } from '@/api/floor/index'
 import { FetchInitLibraryRegionList } from '@/api/area/index'
+import { FetchMapDetails } from '@/api/map/index'
 import crudShelf from '@/api/shelf/index'
 import CRUD, { presenter, header, form, crud } from '@crud/crud'
 import crudOperation from '@crud/CRUD.operation'
@@ -223,10 +235,12 @@ import defaultImg from '@/assets/images/system/default-img.jpg'
 import MarkCover from '@/views/components/mark.vue'
 import { fabric } from 'fabric'
 
+import PreviewMapRight from '../map3d/mapRight'
+
 const defaultForm = { id: null, floorName: null, floorId: null, regionName: null, rowType: 1, toward: 1, shelfRow: '', shelfName: '', shelfShelf: null, shelfFloor: null, startShelf: null, shelfType: 1, floorType: 1, shelfRule: 1, shelfErrorJudge: 2, signPoint: '' }
 export default {
   name: 'Bookshelf',
-  components: { crudOperation, pagination, MarkCover },
+  components: { crudOperation, pagination, MarkCover, PreviewMapRight },
   cruds() {
     return CRUD({ title: '书架', idField: 'shelfId', url: 'api/bookShelf/initBookShelfList', crudMethod: { ...crudShelf }, sort: [], optShow: {
       add: true,
@@ -304,6 +318,7 @@ export default {
       markVisible: false, // 区域标注
       titleMark: '书架标注',
       currentMarkData: null,
+      currentMapData: null,
 
       canvasPreview: {},
       width: 900,
@@ -411,11 +426,15 @@ export default {
     },
     [CRUD.HOOK.afterRefresh](crud) {
       console.log(crud.data)
+      if (this.selectRegionVal && this.selectRegionVal.mapType === 2) {
+        this.getMapDetails(this.selectRegionVal.mapId)
+      } else {
         if (this.selectRegionVal && this.selectRegionVal.regionMap) {
           this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + this.selectRegionVal.regionMap
         } else {
           this.imageUrl = defaultImg
         }
+      }
     },
     // 新增与编辑前做的操作
     [CRUD.HOOK.afterToCU](crud, form) {
@@ -500,6 +519,7 @@ export default {
       })
     },
     changeBeforeFloor(val) {
+      this.$refs.table.clearSelection()
       if (this.$route.query.formArea) {
         localStorage.removeItem('formArea')
       }
@@ -510,6 +530,7 @@ export default {
       }
     },
     changeBeforeRegion(val) {
+      this.$refs.table.clearSelection()
       if (this.$route.query.formArea) {
         localStorage.removeItem('formArea')
       }
@@ -518,11 +539,34 @@ export default {
         this.selectRegionVal = val
         this.crud.query.regionId = val.id
         this.crud.toQuery()
+
+        if (this.selectRegionVal && this.selectRegionVal.mapType === 2) {
+          this.getMapDetails(this.selectRegionVal.mapId)
+        } else {
+          if (this.selectRegionVal && this.selectRegionVal.regionMap) {
+            this.imageUrl = this.baseApi + '/api/fileRelevant/getImg?imgType=1&imgId=' + this.selectRegionVal.regionMap
+          } else {
+            this.imageUrl = defaultImg
+          }
+        }
       }
     },
     selectionChangeHandler(val) {
       this.crud.selections = val
       // 处理选择项为1且有签名点的情况
+      console.log('this.selectRegionVal', this.selectRegionVal)
+      console.log('this.selectRegionVal.mapId', this.selectRegionVal.mapId)
+      if (this.selectRegionVal && this.selectRegionVal.mapType === 2) {
+        //  && this.crud.selections[0].signPoint
+        if (this.crud.selections.length === 1) {
+          this.currentMarkData = val[0]
+          // 数据模拟
+          this.currentMarkData.fid = '1026050201806'
+        } else {
+          this.currentMarkData = null
+        }
+        this.getMapDetails(this.selectRegionVal.mapId)
+      } else {
         if (this.crud.selections.length === 1 && this.crud.selections[0].signPoint) {
           this.currentMarkData = val[0]
           if (this.canvasPreview.lowerCanvasEl) {
@@ -542,6 +586,7 @@ export default {
           this.currentMarkData = null
           this.setImageUrlBasedOnRegionMap()
         }
+      }
     },
     setImageUrlBasedOnRegionMap() {
       if (this.selectRegionVal && this.selectRegionVal.regionMap) {
@@ -587,6 +632,38 @@ export default {
       this.$router.push({ path: '/deviceManage/shelfManage/shelf3dPosition', query: { 'floorName': row.floorName, 'regionName': row.regionName }})
       localStorage.setItem('shelf3dPositionRow', JSON.stringify(row))
     },
+    getMapDetails(id) {
+      const params = {
+        'id': id
+      }
+      FetchMapDetails(params).then(res => {
+        this.currentMapData = res
+        this.$nextTick(() => {
+          if (this.$refs.rightMap) {
+            this.$refs.rightMap.dispose()
+          }
+          console.log('currentMapData', this.currentMapData)
+          console.log('currentMarkData', this.currentMarkData)
+          console.log('selectFloorVal', this.selectFloorVal)
+
+          // currentMarkData
+          if (this.selectFloorVal && this.selectFloorVal.mapLevel) {
+            this.$refs.rightMap.level = Number(this.selectFloorVal.mapLevel)
+          } else {
+            this.$refs.rightMap.level = 1
+          }
+          if (this.currentMarkData && this.currentMarkData.fid) {
+            this.$refs.rightMap.areaFid = this.currentMarkData.fid
+          } else if (this.selectRegionVal && this.selectRegionVal.fid) {
+            this.$refs.rightMap.areaFid = this.selectRegionVal.fid
+          } else {
+            this.$refs.rightMap.areaFid = null
+          }
+          this.$refs.rightMap.initMap()
+        })
+      }).catch(() => {
+      })
+    },
     toDelete(datas) {
       this.$confirm('此操作将删除当前所选书架<span>你是否还要继续？</span>', '提示', {
         confirmButtonText: '继续',

src/views/deviceManage/map3d/mapRight.vue

@@ -122,8 +122,11 @@ export default {
             const floor = this.map.getFloor(this.level)
             console.log('floor', floor)
             const model = floor.getLayers(fengmap.FMType.MODEL_LAYER)[0].getFeatures().find(item => item.FID === this.areaFid)
+            if (!model) {
+              console.log('模拟数据没找到指定的模型')
+            }
             console.log('model', model)
-            console.log('model', model.getData())
+            // console.log('model', model.getData())
             // const feature = model.getData()
 
             this.marker = new fengmap.FMImageMarker({

src/views/deviceManage/shelfManage/shelf3dPosition.vue

@@ -713,13 +713,13 @@ export default {
 
 .position-top-left,
 .position-top-right{
-  width: 250px;
+  width: 300px;
 }
 
 .shelf-bind-card{
-  width: 250px;
+  width: 280px;
   margin-top: 20px;
-  font-size: 14px;
+  font-size: 16px;
   .shelf-bind-tab{
     display: flex;
     justify-content: space-between;
@@ -739,7 +739,7 @@ export default {
 }
 
 .shelf-bind-list{
-  font-size: 12px;
+  font-size: 14px;
   margin-top: 8px;
   height: 155px;
   overflow-y: scroll;

src/views/deviceManage/shelfManage/shelfAllSearch.vue

@@ -78,6 +78,16 @@
               <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt="">
               <img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt="">
             </div>
+            <!-- <div v-show="selectRegionVal && selectRegionVal.mapType===1" class="venue-preview">
+            <div v-show="currentMarkData && currentMarkData.signPoint ">
+              <canvas :id="`canvasPreview${currentMarkData && currentMarkData.id}`" :width="width" :height="height" />
+              </div>
+              <img v-if="currentMarkData && !currentMarkData.signPoint" :src="imageUrl" :onerror="defaultImg" alt="">
+              <img v-if="!currentMarkData" :src="imageUrl" :onerror="defaultImg" alt="">
+            </div>
+            <div v-if="selectRegionVal && selectRegionVal.mapType===2" class="venue-preview">
+              <PreviewMapRight ref="rightMap" :map-data="currentMapData" />
+            </div> -->
           </div>
           <div class="position-right">
             <h5>书架图</h5>