提交首页接口对接

1.地图接口下载

src/api/map/map.ts

@@ -5,3 +5,20 @@ import request from '@/config/axios'
 export const agvDownload = async (params) => {
   return await request.download({ url: `/system/position-map/agvDownload`, params })
 }
+//点位地图列表 
+export const getPositionMapList = async (params) => {
+  return await request.get({ url: `/system/position-map/list`, params })
+}
+//点位地图列表  map分好组
+export const getPositionMapGetMap = async (params) => {
+  return await request.get({ url: `/system/position-map/getMap`, params })
+}
+
+//点位地图列表 详细数据
+export const getPositionMapDownloadPng = async (params) => {
+  return await request.get({ url: `/system/position-map/downloadPng`, params })
+}
+//点位地图 base64
+export const getPositionMapdDwnloadPngBase64 = async (params) => {
+  return await request.get({ url: `/system/position-map/downloadPngBase64`, params })
+}

src/views/mapPage/realTimeMap/components/editMap.vue

@@ -1,13 +1,29 @@
 <template>
-  <div class="map-box" ref="imgWrap"  @mousewheel.prevent="rollImg" style="overflow: hidden;">
+  <div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
     <div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
       <img src="@/assets/imgs/map.png" class="map-box-img" />
       <div class="map-box-inner-dot">
-        
+        <VueDragResizeRotate
-        <VueDragResizeRotate v-for="(item, index) in imglist" :x="item.xind" :y="item.yind" :key="index" :parent="true" @rotating="(...args) => rotating(...args, item,index)" @dragging="(...args) => dragging(...args, item,index)" @resizing="(...args) => resizing(...args, item,index)" :handles="['tl','tr','bl','br','rot']" :rotatable="true" :resizable="true" :lockAspectRatio="true">
+          v-for="(item, index) in imglist"
-          <div class="sdiv" >
+          :x="item.xind"
-            <img :src="'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%A4%B4%E5%83%8F&step_word=&lid=7485741068352028048&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2737564108,367317649&os=3340864790,1338694200&simid=4283020451,692828818&pn=61&rn=1&di=7445700328764211201&ln=1697&fr=&fmq=1736476621863_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=3c&objurl=https%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F007s8q6sgy1hs06lj4bqoj30rs0rsq7i.jpg&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxMiwzLDEsMiwxMyw3LDYsNSw5'" alt="" style="width:100%;height: 100%;" />
+          :y="item.yind"
-            <p style="position: absolute;top:32%;left: 42%;color: white;">{{ item.con }}</p>
+          :key="index"
+          :parent="true"
+          @rotating="(...args) => rotating(...args, item, index)"
+          @dragging="(...args) => dragging(...args, item, index)"
+          @resizing="(...args) => resizing(...args, item, index)"
+          :handles="['tl', 'tr', 'bl', 'br', 'rot']"
+          :rotatable="true"
+          :resizable="true"
+          :lockAspectRatio="true"
+        >
+          <div class="sdiv">
+            <img
+              :src="'https://image.baidu.com/search/detail?ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=%E5%A4%B4%E5%83%8F&step_word=&lid=7485741068352028048&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=2737564108,367317649&os=3340864790,1338694200&simid=4283020451,692828818&pn=61&rn=1&di=7445700328764211201&ln=1697&fr=&fmq=1736476621863_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=3c&objurl=https%3A%2F%2Fww4.sinaimg.cn%2Fmw690%2F007s8q6sgy1hs06lj4bqoj30rs0rsq7i.jpg&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&dyTabStr=MCwxMiwzLDEsMiwxMyw3LDYsNSw5'"
+              alt=""
+              style="width: 100%; height: 100%"
+            />
+            <p style="position: absolute; top: 32%; left: 42%; color: white">{{ item.con }}</p>
           </div>
         </VueDragResizeRotate>
         <!-- :handles="['tl','mr','ml','bl','bm','br','rot']" 八个方向 rot是旋转-->
@@ -15,20 +31,32 @@
         <!-- :disabledX="disabledX" :draggable="true" :resizable="true" :parent="true"
         :containment="'parent'" @activated="print('activated')" @deactivated="print('deactivated')"
         @drag-start="print('drag-start')" @resize-start="print('resize-start')" @dragging="print('dragging')"
-        @resizing="print('resizing')" @drag-end="print('drag-end')" @resize-end="print('resize-end')" -->
+        @resizing="print('resizing')" @drag-end="print('drag-end')" @resize-end="print('resize-end')"
-
+         -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, defineComponent, reactive, nextTick, onMounted } from "vue";
+import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 
 const imglist = [
-  { id: '01', con: '图一', xind: 10, yind: 20, img: 'https://ts1.cn.mm.bing.net/th/id/R-C.5a49085e4afe4261c8994e7b2ad91842?rik=VxQQBSuFk%2f%2ftaA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fbbs4%2f200810%2f17%2f1224206085128.jpg&ehk=QaHcMJfNlSmAGrzRh6DkCiRkBlEs9J5Tw95WfADpO9E%3d&risl=&pid=ImgRaw&r=0' },
+  {
-  { id: '02', con: '图二', xind: 500, yind: 300, img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0' },
+    id: '01',
-];
+    con: '图一',
+    xind: 10,
+    yind: 20,
+    img: 'https://ts1.cn.mm.bing.net/th/id/R-C.5a49085e4afe4261c8994e7b2ad91842?rik=VxQQBSuFk%2f%2ftaA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fbbs4%2f200810%2f17%2f1224206085128.jpg&ehk=QaHcMJfNlSmAGrzRh6DkCiRkBlEs9J5Tw95WfADpO9E%3d&risl=&pid=ImgRaw&r=0'
+  },
+  {
+    id: '02',
+    con: '图二',
+    xind: 500,
+    yind: 300,
+    img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0'
+  }
+]
 
 const elements = ref([
   {
@@ -59,7 +87,7 @@ const elements = ref([
     resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
     content: '元素2'
   }
-]);
+])
 
 // 添加元素的方法
 const addElement = () => {
@@ -76,23 +104,23 @@ const addElement = () => {
     rotationHandle: 'r',
     resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
     content: '新元素'
-  };
+  }
-  elements.value.push(newElement);
+  elements.value.push(newElement)
-};
+}
+// 缩放
+const resizing = (x, y, w, h, val, i) => {
+  console.log(x, y, w, h, val, i)
+}
+// 旋转
+const rotating = (angle, val, i) => {
+  console.log(angle, val, i)
+}
+// 拖拽
+const dragging = (x, y, val, i) => {
+  console.log(x, y, val, i)
+}
 
-const resizing = (x, y, w, h,val,i) => {
+onMounted(() => {})
-      console.log(x, y, w, h,val,i);
-    }
-    const  rotating = (angle,val,i) =>{
-      console.log(angle,val,i)
-    }
-    const dragging = (x, y,val,i) => {
-      console.log(x, y,val,i);
-    }
-
-onMounted(() => {
-  
-})
 </script>
 
 <style lang="scss" scoped>
@@ -116,7 +144,7 @@ onMounted(() => {
   }
 }
 
-.sdiv{
+.sdiv {
   width: 100%;
   height: 100%;
 }

src/views/mapPage/realTimeMap/components/indexPage.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="affix-container">
+    <el-affix target=".affix-container" :offset="80">
+      <div class="affix-container-top">
+        <el-scrollbar>
+          <div class="scrollbar-flex-content">
+            <el-dropdown
+              placement="bottom"
+              v-for="(item, index) in list"
+              :key="index"
+              style="border: none"
+            >
+              <div class="scrollbar-demo-item">
+                {{ item.floor }}
+              </div>
+              <template #dropdown v-if="item.children && item.children.length">
+                <el-dropdown-menu style="width: 100px">
+                  <el-dropdown-item
+                    v-for="(p, i) in item.children"
+                    :key="i"
+                    @click="getMapData(p)"
+                    >{{ p.area }}</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </el-scrollbar>
+      </div>
+      <!-- <div>
+        111
+      </div> -->
+    </el-affix>
+    <div class="indexpage-container">
+      <div class="indexpage-container-box">
+        <img :src="imgUrl" alt="" class="indexpage-container-box-img" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
+import * as MapApi from '@/api/map/map'
+const imgUrl = ref('')
+// getPositionMapList
+// getPositionMapDownloadPng
+const list = ref([])
+//获取地图点位
+const getList = async () => {
+  let data = await MapApi.getPositionMapGetMap()
+  let mapList = []
+  for (let key in data) {
+    mapList.push({
+      floor: key,
+      children: data[key]
+    })
+  }
+  console.log(mapList)
+  list.value = mapList
+}
+
+//获取扫描图
+const getMapData = async (item) => {
+  // console.log(item,import.meta.env.VITE_BASE_URL + item.pngUrl)
+  let data = await MapApi.getPositionMapdDwnloadPngBase64({
+    floor: item.floor,
+    area: item.area
+  })
+
+  let base64Url = 'data:image/png;base64,'
+  imgUrl.value = data
+  console.log(imgUrl.value)
+}
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.affix-container {
+  width: 100%;
+}
+.indexpage-container {
+  width: 100%;
+  position: relative;
+}
+.indexpage-container .affix-container-top {
+  width: 100%;
+  height: 80px;
+  background-color: #fff;
+  border-bottom: 1px solid #f5f5f5;
+}
+.scrollbar-flex-content {
+  display: flex;
+}
+.scrollbar-demo-item {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 50px;
+  margin: 10px;
+  text-align: center;
+  border-radius: 4px;
+  background: var(--el-color-primary-light-9);
+  color: var(--el-color-primary);
+  position: relative;
+}
+.scrollbar-demo-item {
+  cursor: pointer;
+  border: none;
+}
+
+:focus-visible {
+  outline: none;
+}
+.indexpage-container-box {
+  width: 100%;
+  position: relative;
+}
+.indexpage-container-box-img {
+  width: 100%;
+  height: auto;
+}
+</style>

src/views/mapPage/realTimeMap/index.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="">
     <ContentWrap>
-      <div>
+      <div class="">
-        <div @click="downAgv">导出</div>
+        <!-- <div @click="downAgv">导出zip</div> -->
-        <editMap ref="editMapRef" />
+        <!-- 首页 -->
+        <indexPage ref="indexPageRef" v-if="pageName === 'indexPage'"/>
+        <!-- 编辑地图 -->
+        <editMap ref="editMapRef"  v-if="pageName === 'editMap'"/>
+        
       </div>
     </ContentWrap>
   </div>
@@ -11,17 +15,21 @@
 
 <script setup>
 import editMap from './components/editMap.vue'
+import indexPage from './components/indexPage.vue'
 import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
 import * as MapApi from '@/api/map/map'
 import download from '@/utils/download'
 const editMapRef = ref(null)
+const indexPageRef = ref(null)
+const pageName = ref('indexPage')
 defineOptions({ name: 'MapPageRealTimeMap' })
+// {
+//     floor: 1,
+//     area: 'A区域'
+//   }
 const downAgv = async () => {
-  const data = await MapApi.agvDownload({
+  const data = await MapApi.agvDownload()
-    floor: 1,
+  download.zip(data, `agv-${new Date().getTime()}.zip`)
-    area: 'A区域'
-  })
-  download.zip(data, 'agv.zip')
 }
 </script>