提交首页接口对接
1.地图接口下载
This commit is contained in:
xhf
parent
fe82ab49d4
commit
50815e06f5
@ -4,4 +4,21 @@ import request from '@/config/axios'
|
||||
//agv 下载
|
||||
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 })
|
||||
}
|
||||
|
||||
@ -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 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">
|
||||
<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©right=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>
|
||||
<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"
|
||||
>
|
||||
<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©right=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) => {
|
||||
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(() => {
|
||||
|
||||
})
|
||||
onMounted(() => {})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -116,7 +144,7 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.sdiv{
|
||||
.sdiv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
127
src/views/mapPage/realTimeMap/components/indexPage.vue
Normal file
127
src/views/mapPage/realTimeMap/components/indexPage.vue
Normal file
@ -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>
|
||||
@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<ContentWrap>
|
||||
<div>
|
||||
<div @click="downAgv">导出</div>
|
||||
<editMap ref="editMapRef" />
|
||||
<div class="">
|
||||
<!-- <div @click="downAgv">导出zip</div> -->
|
||||
<!-- 首页 -->
|
||||
<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({
|
||||
floor: 1,
|
||||
area: 'A区域'
|
||||
})
|
||||
download.zip(data, 'agv.zip')
|
||||
const data = await MapApi.agvDownload()
|
||||
download.zip(data, `agv-${new Date().getTime()}.zip`)
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user