wans

src/api/store/store.js

@@ -82,7 +82,36 @@ export function fetchStore (parameter) {
     }
   })
 }
-
+/**
+ * fetch single func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function fetchStorePosition (parameter) {
+  return axios({
+    url: '/store/stores/position/' + parameter.id,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+/**
+ * fetch single func
+ * parameter: { }
+ * @param parameter
+ * @returns {*}
+ */
+export function fetchStoreStore (parameter) {
+  return axios({
+    url: '/store/stores/store/' + parameter.id,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
 /**
  * query list func
  * parameter: { }

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

@@ -1,47 +1,51 @@
 <template>
   <a-card>
-    <a-row :gutter="20">
-      <a-col :span="4">
-        <div
-          class="box"
-          :class="{'box-act':i === key}"
-          v-for="(item,i) in positionsList.slice(0, 2)"
-          :key="item.id"
-          style="text-align: center;"
-          @click="handleClick(i)">{{ item.name }}</div>
-      </a-col>
-      <a-col :span="20">
-        <img v-if="key" :src="img1" width="100%" alt="" >
-        <img v-else :src="img2" width="100%" alt="" @click="handleClickImg">
-      </a-col>
-    </a-row>
+    <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)" />
+          <img v-if="item.opcImg" :src="item.opcImg" width="100%" alt="">
+          <a-empty v-else description="暂无底图，请上传" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
   </a-card>
 </template>
 
 <script>
-import img1 from '@/assets/a/1.png'
-import img2 from '@/assets/a/3.png'
 import { querySbPosition } from '@/api/sb/position'
+import { fetchStorePosition, fetchStoreStore } from '@/api/store/store'
 export default {
   data () {
     return {
-      img1,
-      img2,
       positionsList: [],
-      key: 0
+      defaultActive: 0,
+      storeList: []
     }
   },
+
   created () {
     this.getInfo()
   },
   methods: {
     getInfo () {
-      querySbPosition().then(res => {
+      querySbPosition({ type: 1 }).then(res => {
         this.positionsList = res.data
+        this.handleClick(this.defaultActive)
       })
     },
+    computPosition (x, y) {
+      const left = x + '%'
+      const top = y + '%'
+      return {
+        left, top
+      }
+    },
     handleClick (i) {
-      this.key = i
+      this.defaultActive = i
+      fetchStorePosition({ id: this.positionsList[i].id }).then(res => {
+        this.storeList = res.data
+      })
     },
     handleClickImg (e) {
       console.log(e.offsetX, e.offsetY)
@@ -53,20 +57,11 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.box{
- width: 100%;
- height: 100px;
- background: #fff;
- color: #000;
- text-align: center;
- line-height: 100px;
- border: 1px solid #ccc;
- border-radius: 5px;
- margin-bottom: 10px;
- cursor: pointer;
-}
-.box-act{
-  background: #1890ff;
-  color: #fff;
+.point {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: red;
+  border-radius: 50%;
 }
 </style>