wans

src/config/defaultSettings.js

@@ -3,7 +3,7 @@
  * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 localStorage
  * navTheme - sidebar theme ['dark', 'light'] 两种主题
  * colorWeak - 色盲模式
- * layout - 整体布局方式 ['sidemenu', 'topmenu'] 两种布局
+ * layout - 整体布局方式 ['sidemenu', 'topmenu','mixmenu] 两种布局
  * fixedHeader - 固定 Header : boolean
  * fixSiderbar - 固定左侧菜单栏 ： boolean
  * autoHideHeader - 向下滚动时，隐藏 Header : boolean
@@ -15,8 +15,8 @@
 
 export default {
   primaryColor: '#52C41A', // primary color of ant design
-  navTheme: 'dark', // theme for nav menu
-  layout: 'sidemenu', // nav menu position: sidemenu or topmenu
+  navTheme: 'light', // theme for nav menu
+  layout: 'mixmenu', // nav menu position: sidemenu or topmenu
   contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
   fixedHeader: false, // sticky header
   fixSiderbar: true, // sticky siderbar

src/views/idle-assets-map/IdleAssetsStoreMap.vue

@@ -2,25 +2,34 @@
   <a-card>
     <a-tabs :default-active-key="defaultActive" @change="handleClick">
       <a-tab-pane v-for="(item, index) in positionsList" :tab="item.name" :key="index">
-        <div style="position: relative;">
-          <div class="point" v-for="store in storeList" :key="store.id" :style="computPosition(store.positionX, store.positionY)" />
+        <div style="position: relative;" v-show="visible">
+          <div class="point" v-for="store in storeList" :key="store.id" :style="computPosition(store.positionX, store.positionY)" @click="handleView(store)">
+            {{ store.name }}
+          </div>
           <img v-if="item.opcImg" :src="item.opcImg" width="100%" alt="">
           <a-empty v-else description="暂无底图，请上传" />
         </div>
       </a-tab-pane>
     </a-tabs>
+    <StoreDetailMap ref="storeDetailMap" @ok="handleOk" />
+
   </a-card>
 </template>
 
 <script>
 import { querySbPosition } from '@/api/sb/position'
 import { fetchStorePosition, fetchStoreStore } from '@/api/store/store'
+import StoreDetailMap from './modules/StoreDetailMap.vue'
 export default {
+  components: {
+    StoreDetailMap
+  },
   data () {
     return {
       positionsList: [],
       defaultActive: 0,
-      storeList: []
+      storeList: [],
+      visible: true
     }
   },
 
@@ -35,22 +44,34 @@ export default {
       })
     },
     computPosition (x, y) {
-      const left = x + '%'
-      const top = y + '%'
+      const left = `calc(${x}% - 35px)`
+      const top = `calc(${y}% - 85px)`
       return {
         left, top
       }
     },
     handleClick (i) {
       this.defaultActive = i
+      this.visible = true
+      this.$refs.storeDetailMap.handleCancel()
       fetchStorePosition({ id: this.positionsList[i].id }).then(res => {
         this.storeList = res.data
       })
     },
-    handleClickImg (e) {
-      console.log(e.offsetX, e.offsetY)
-      console.log(e.target.width, e.target.height)
-      // console.log(e.offsetX, e.offsetY)
+    handleView (store) {
+      if (!store.existPosition) {
+        this.$message.warning('该仓库不存在库位！')
+      } else if (!store.backGroundMap) {
+        this.$message.warning('该仓库未上传底图！')
+      } else {
+        fetchStoreStore({ id: store.id }).then(res => {
+          this.visible = false
+          this.$refs.storeDetailMap.base(res.data, store.backGroundMap)
+        })
+      }
+    },
+    handleOk () {
+      this.visible = true
     }
   }
 }
@@ -59,9 +80,18 @@ export default {
 <style lang="less" scoped>
 .point {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  background: red;
   border-radius: 50%;
+  background: url(~@/assets/a/6.png) repeat;
+  background-size: 100% 100%;
+  // border: 2px solid #fff;
+  color: #fff;
+  height: 80px;
+  width: 70px;
+display: flex;
+justify-content: center;
+align-items: center;
+text-align: center;
+  font-size: 12px;
+  cursor: pointer;
 }
 </style>

src/views/idle-assets-map/modules/StoreDetailMap.vue

@@ -0,0 +1,67 @@
+<template>
+  <div v-show="visible">
+    <div class="btn">
+      <a-button type="primary" @click="handleCancel">返回</a-button>
+    </div>
+    <div style="position: relative;">
+      <div class="point" v-for="store in dataList" :key="store.id" :style="computPosition(store.positionX, store.positionY)">
+        {{ store.name }}
+      </div>
+      <img v-if="opcImg" :src="opcImg" width="100%" alt="">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      dataList: [],
+      opcImg: ''
+    }
+  },
+  methods: {
+    base (record, imgUrl) {
+      this.visible = true
+      this.dataList = record
+      this.opcImg = imgUrl
+    },
+    computPosition (x, y) {
+      const left = `calc(${x}% - 35px)`
+      const top = `calc(${y}% - 85px)`
+      return {
+        left,
+        top
+      }
+    },
+    handleCancel () {
+      this.$emit('ok')
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.point {
+  position: absolute;
+  border-radius: 50%;
+  background: url(~@/assets/a/6.png) repeat;
+  background-size: 100% 100%;
+  // border: 2px solid #fff;
+  color: #fff;
+  height: 80px;
+  width: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn {
+  margin-bottom: 20px;
+  text-align: right;
+}
+</style>