增加插件
This commit is contained in:
xhf
parent
ecfe1b6145
commit
fe82ab49d4
2
.env.dev
2
.env.dev
@ -4,7 +4,7 @@ NODE_ENV=production
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://api-dashboard.yudao.iocoder.cn'
|
||||
VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
|
||||
@ -4,7 +4,7 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://localhost:48080'
|
||||
VITE_BASE_URL='http://192.168.0.189:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
|
||||
31743
package-lock.json
generated
Normal file
31743
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -28,6 +28,7 @@
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@form-create/designer": "^3.2.6",
|
||||
"@form-create/element-ui": "^3.2.11",
|
||||
"@gausszhou/vue3-drag-resize-rotate": "^3.0.2",
|
||||
"@iconify/iconify": "^3.1.1",
|
||||
"@microsoft/fetch-event-source": "^2.0.1",
|
||||
"@videojs-player/vue": "^1.0.0",
|
||||
|
||||
7
src/api/map/map.ts
Normal file
7
src/api/map/map.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import request from '@/config/axios'
|
||||
|
||||
|
||||
//agv 下载
|
||||
export const agvDownload = async (params) => {
|
||||
return await request.download({ url: `/system/position-map/agvDownload`, params })
|
||||
}
|
||||
BIN
src/assets/imgs/map.png
Normal file
BIN
src/assets/imgs/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -41,7 +41,8 @@ import '@/plugins/tongji' // 百度统计
|
||||
import Logger from '@/utils/Logger'
|
||||
|
||||
import VueDOMPurifyHTML from 'vue-dompurify-html' // 解决v-html 的安全隐患
|
||||
|
||||
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate";
|
||||
import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css";
|
||||
// 创建实例
|
||||
const setupAll = async () => {
|
||||
const app = createApp(App)
|
||||
@ -65,7 +66,7 @@ const setupAll = async () => {
|
||||
await router.isReady()
|
||||
|
||||
app.use(VueDOMPurifyHTML)
|
||||
|
||||
app.use(VueDragResizeRotate)
|
||||
app.mount('#app')
|
||||
}
|
||||
|
||||
|
||||
123
src/views/mapPage/realTimeMap/components/editMap.vue
Normal file
123
src/views/mapPage/realTimeMap/components/editMap.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<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>
|
||||
</div>
|
||||
</VueDragResizeRotate>
|
||||
<!-- :handles="['tl','mr','ml','bl','bm','br','rot']" 八个方向 rot是旋转-->
|
||||
<!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
|
||||
<!-- :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')" -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
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' },
|
||||
];
|
||||
|
||||
const elements = ref([
|
||||
{
|
||||
x: -54.4,
|
||||
y: -34.2,
|
||||
w: 100,
|
||||
h: 100,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '元素1'
|
||||
},
|
||||
{
|
||||
x: -30,
|
||||
y: -20,
|
||||
w: 80,
|
||||
h: 80,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '元素2'
|
||||
}
|
||||
]);
|
||||
|
||||
// 添加元素的方法
|
||||
const addElement = () => {
|
||||
const newElement = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
w: 60,
|
||||
h: 60,
|
||||
minWidth: 10,
|
||||
minHeight: 10,
|
||||
isDraggable: true,
|
||||
isResizable: true,
|
||||
isRotatable: true,
|
||||
rotationHandle: 'r',
|
||||
resizeHandles: ['tl', 'tc', 'tr', 'cl', 'cr', 'bl', 'bc', 'br'],
|
||||
content: '新元素'
|
||||
};
|
||||
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);
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map-box {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
.map-box-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.map-box-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.map-box-inner-dot {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sdiv{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
28
src/views/mapPage/realTimeMap/index.vue
Normal file
28
src/views/mapPage/realTimeMap/index.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<ContentWrap>
|
||||
<div>
|
||||
<div @click="downAgv">导出</div>
|
||||
<editMap ref="editMapRef" />
|
||||
</div>
|
||||
</ContentWrap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import editMap from './components/editMap.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)
|
||||
defineOptions({ name: 'MapPageRealTimeMap' })
|
||||
const downAgv = async () => {
|
||||
const data = await MapApi.agvDownload({
|
||||
floor: 1,
|
||||
area: 'A区域'
|
||||
})
|
||||
download.zip(data, 'agv.zip')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
Reference in New Issue
Block a user