地图编辑
This commit is contained in:
yyy
parent
21ef0251a6
commit
9d0cc0b096
@ -80,7 +80,7 @@ watch(
|
|||||||
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
|
layout === 'topLeft' || layout === 'top' || layout === 'cutMenu'
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
style="font-size: 14px"
|
style="font-size: 13px"
|
||||||
>
|
>
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -55,7 +55,7 @@ export const useRenderLayout = () => {
|
|||||||
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
|
'w-[var(--left-menu-max-width)]': !appStore.getCollapse
|
||||||
}
|
}
|
||||||
]}
|
]}
|
||||||
style="transition: all var(--transition-time-02);height:60px;display: flex;
|
style="transition: all var(--transition-time-02);height:59px;display: flex;
|
||||||
align-items: center;"
|
align-items: center;"
|
||||||
></Logo>
|
></Logo>
|
||||||
) : undefined}
|
) : undefined}
|
||||||
|
|||||||
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
--login-bg-color: #293146;
|
--login-bg-color: #293146;
|
||||||
|
|
||||||
--left-menu-max-width: 220px;
|
--left-menu-max-width: 200px;
|
||||||
|
|
||||||
--left-menu-min-width: 64px;
|
--left-menu-min-width: 64px;
|
||||||
|
|
||||||
|
|||||||
@ -1,152 +1,117 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<ContentWrap>
|
<div class="top-tool-list">
|
||||||
<div class="tool-list">
|
<div v-for="item in state.topToolList" :key="item.id" class="top-tool-item">
|
||||||
<div class="tool-item">
|
<el-popover
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
placement="bottom"
|
||||||
<div class="name"> 打开 </div>
|
:width="80"
|
||||||
</div>
|
trigger="click"
|
||||||
<div class="tool-item" @click="saveMap">
|
v-if="item.id === 5"
|
||||||
<Icon icon="ep:folder-checked" :size="24" />
|
:disabled="currentItemIndex === -1"
|
||||||
<div class="name"> 保存 </div>
|
>
|
||||||
</div>
|
<template #reference>
|
||||||
<div class="tool-item">
|
<div
|
||||||
<Icon icon="ep:folder-opened" :size="24" />
|
class="tool-item"
|
||||||
<div class="name"> 另存为 </div>
|
:class="
|
||||||
</div>
|
toolbarTypeIndex === item.id
|
||||||
<div class="line"></div>
|
? 'tool-active'
|
||||||
<div class="tool-item">
|
: item.isActive
|
||||||
<Icon icon="ep:position" :size="24" />
|
? 'right-tool-active'
|
||||||
<div class="name"> 选择 </div>
|
: ''
|
||||||
</div>
|
"
|
||||||
<div class="tool-item">
|
@click="toolbarClick(item)"
|
||||||
<Icon icon="ep:rank" :size="24" />
|
>
|
||||||
<div class="name"> 移动 </div>
|
<Icon :icon="item.icon" :size="24" />
|
||||||
</div>
|
<div class="name"> {{ item.name }} </div>
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 旋转 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:document" :size="24" />
|
|
||||||
<div class="name"> 复制 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:copy-document" :size="24" />
|
|
||||||
<div class="name"> 粘贴 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:delete" :size="24" />
|
|
||||||
<div class="name"> 删除 </div>
|
|
||||||
</div>
|
|
||||||
<div class="line"></div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:briefcase" :size="24" />
|
|
||||||
<div class="name"> 工具 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 线库 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 区域 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 文字 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 设备 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 车辆 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 测距 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 图层 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 标记 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 网格 </div>
|
|
||||||
</div>
|
|
||||||
<div class="line"></div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 放大 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 缩小 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item" @click="backPreviousStep">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 撤回 </div>
|
|
||||||
</div>
|
|
||||||
<div class="tool-item" @click="backNextStep">
|
|
||||||
<Icon icon="ep:folder-add" :size="24" />
|
|
||||||
<div class="name"> 重做 </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <el-button type="primary" @click="drawNodes" :disabled="formLoading"> 绘制节点 </el-button> -->
|
|
||||||
</ContentWrap>
|
|
||||||
<div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
|
|
||||||
<div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
|
|
||||||
<img :src="imgBgObj.imgUrl" class="map-box-img" id="mapBg" />
|
|
||||||
<div class="map-box-inner-dot" @click="mapClick">
|
|
||||||
<VueDragResizeRotate
|
|
||||||
v-for="(item, index) in allHistoryList[currentIndex]"
|
|
||||||
:key="index"
|
|
||||||
:parent="true"
|
|
||||||
:x="item.x"
|
|
||||||
:y="item.y"
|
|
||||||
:w="item.w"
|
|
||||||
:h="item.h"
|
|
||||||
:r="item.angle"
|
|
||||||
@rotatestop="(degree) => rotateEnd(degree, item, index)"
|
|
||||||
@dragstop="(x, y) => dragEnd(x, y, item, index)"
|
|
||||||
@resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
|
|
||||||
@activated="() => activatedHandle(item, index)"
|
|
||||||
@deactivated="deactivatedHandle"
|
|
||||||
:draggable="item.draggable"
|
|
||||||
:resizable="item.resizable"
|
|
||||||
:rotatable="item.rotatable"
|
|
||||||
:lockAspectRatio="item.lockAspectRatio"
|
|
||||||
>
|
|
||||||
<div class="sdiv">
|
|
||||||
<img
|
|
||||||
v-if="item.labelType === 'icon'"
|
|
||||||
:src="item.img"
|
|
||||||
alt=""
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="item.labelType === 'node'"
|
|
||||||
style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
</VueDragResizeRotate>
|
</template>
|
||||||
<!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
|
<el-form :model="state.moveForm">
|
||||||
|
<el-form-item label="X">
|
||||||
|
<el-input v-model="state.moveForm.x" placeholder="请输入" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Y">
|
||||||
|
<el-input v-model="state.moveForm.y" placeholder="请输入" />
|
||||||
|
</el-form-item>
|
||||||
|
<div style="text-align: right">
|
||||||
|
<el-button size="small" color="#00329F" @click="moveFormSubmit">确认</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</el-popover>
|
||||||
|
<div
|
||||||
|
v-if="item.id !== 5"
|
||||||
|
class="tool-item"
|
||||||
|
:class="
|
||||||
|
toolbarTypeIndex === item.id ? 'tool-active' : item.isActive ? 'right-tool-active' : ''
|
||||||
|
"
|
||||||
|
@click="toolbarClick(item)"
|
||||||
|
>
|
||||||
|
<Icon :icon="item.icon" :size="24" />
|
||||||
|
<div class="name"> {{ item.name }} </div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="line" v-if="item.id === 3 || item.id === 10 || item.id === 19"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-tool-list">
|
||||||
|
<div
|
||||||
|
v-for="item in state.rightToolList"
|
||||||
|
:key="item.id"
|
||||||
|
class="tool-item"
|
||||||
|
:class="
|
||||||
|
toolbarTypeIndex === item.id ? 'tool-active' : item.isActive ? 'right-tool-active' : ''
|
||||||
|
"
|
||||||
|
@click="toolbarClick(item)"
|
||||||
|
>
|
||||||
|
<Icon :icon="item.icon" :size="24" />
|
||||||
|
<div class="name"> {{ item.name }} </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<editNodeProperties
|
|
||||||
ref="editNodePropertiesRef"
|
|
||||||
:positionMapId="imgBgObj.positionMapId"
|
|
||||||
@submitNodeSuccess="submitNodeSuccess"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="map-box" ref="imgWrap" @mousewheel.prevent="rollImg" style="overflow: hidden">
|
||||||
|
<div class="map-box-inner" ref="image" @mousedown.prevent="moveImg">
|
||||||
|
<img :src="imgBgObj.imgUrl" class="map-box-img" id="mapBg" />
|
||||||
|
<div class="map-box-inner-dot" @click="mapClick" :class="state.isShowGrid ? 'grid-show' : ''">
|
||||||
|
<VueDragResizeRotate
|
||||||
|
v-for="(item, index) in allHistoryList[currentIndex]"
|
||||||
|
:key="index"
|
||||||
|
:parent="true"
|
||||||
|
:x="item.x"
|
||||||
|
:y="item.y"
|
||||||
|
:w="item.w"
|
||||||
|
:h="item.h"
|
||||||
|
:r="item.angle"
|
||||||
|
@rotatestop="(degree) => rotateEnd(degree, item, index)"
|
||||||
|
@dragstop="(x, y) => dragEnd(x, y, item, index)"
|
||||||
|
@resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
|
||||||
|
@activated="() => activatedHandle(item, index)"
|
||||||
|
@deactivated="deactivatedHandle"
|
||||||
|
:draggable="item.draggable"
|
||||||
|
:resizable="item.resizable"
|
||||||
|
:rotatable="item.rotatable"
|
||||||
|
:lockAspectRatio="item.lockAspectRatio"
|
||||||
|
>
|
||||||
|
<div class="sdiv">
|
||||||
|
<img
|
||||||
|
v-if="item.labelType === 'icon'"
|
||||||
|
:src="item.img"
|
||||||
|
alt=""
|
||||||
|
style="width: 100%; height: 100%"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-if="item.labelType === 'node'"
|
||||||
|
style="width: 100%; height: 100%; background-color: #000; border-radius: 50%"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</VueDragResizeRotate>
|
||||||
|
<!-- 文档 https://github.com/a7650/vue3-draggable-resizable/blob/main/docs/document_zh.md#resizable -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<editNodeProperties
|
||||||
|
ref="editNodePropertiesRef"
|
||||||
|
:positionMapId="imgBgObj.positionMapId"
|
||||||
|
@submitNodeSuccess="submitNodeSuccess"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -161,7 +126,7 @@ const formLoading = ref(false)
|
|||||||
|
|
||||||
const allHistoryList = ref([]) //全部的历史记录
|
const allHistoryList = ref([]) //全部的历史记录
|
||||||
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
const currentIndex = ref(0) //用于记录是哪条历史记录的
|
||||||
const currentItemIndex = ref(0) //用于记录是在编辑那个具体的节点、图标等
|
const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
|
||||||
const imgBgObj = reactive({
|
const imgBgObj = reactive({
|
||||||
imgUrl: '',
|
imgUrl: '',
|
||||||
positionMapId: ''
|
positionMapId: ''
|
||||||
@ -229,7 +194,9 @@ const activatedHandle = (item, index) => {
|
|||||||
console.log('选中', item)
|
console.log('选中', item)
|
||||||
currentItemIndex.value = index
|
currentItemIndex.value = index
|
||||||
if (item.labelType === 'node') {
|
if (item.labelType === 'node') {
|
||||||
editNodePropertiesRef.value.open(item)
|
if (toolbarTypeIndex.value === 25) {
|
||||||
|
editNodePropertiesRef.value.open(item)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//非选中
|
//非选中
|
||||||
@ -271,19 +238,10 @@ const backNextStep = () => {
|
|||||||
message.warning('没了老铁')
|
message.warning('没了老铁')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//绘制节点
|
|
||||||
const toolTypeIndex = ref(0)
|
|
||||||
const cursorType = ref('')
|
|
||||||
const drawNodes = () => {
|
|
||||||
if (toolTypeIndex.value === 1) {
|
|
||||||
toolTypeIndex.value = 0
|
|
||||||
} else {
|
|
||||||
toolTypeIndex.value = 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//地图点击
|
//地图点击
|
||||||
const mapClick = (e) => {
|
const mapClick = (e) => {
|
||||||
if (toolTypeIndex.value === 1) {
|
if (toolbarTypeIndex.value === 24) {
|
||||||
//绘制节点
|
//绘制节点
|
||||||
imgList.value.push({
|
imgList.value.push({
|
||||||
x: e.offsetX,
|
x: e.offsetX,
|
||||||
@ -297,7 +255,6 @@ const mapClick = (e) => {
|
|||||||
img: '',
|
img: '',
|
||||||
labelType: 'node'
|
labelType: 'node'
|
||||||
})
|
})
|
||||||
console.log(imgList.value)
|
|
||||||
currentIndex.value++
|
currentIndex.value++
|
||||||
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
allHistoryList.value.push(JSON.parse(JSON.stringify(imgList.value)))
|
||||||
}
|
}
|
||||||
@ -338,6 +295,273 @@ const submitNodeSuccess = (item) => {
|
|||||||
allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
|
allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//工具栏点击
|
||||||
|
const toolbarTypeIndex = ref(0)
|
||||||
|
const state = reactive({
|
||||||
|
topToolList: [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: '打开',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
name: '保存',
|
||||||
|
icon: 'ep:folder-checked',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
name: '另存为',
|
||||||
|
icon: 'ep:folder-opened',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
name: '选择',
|
||||||
|
icon: 'ep:position',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
name: '移动',
|
||||||
|
icon: 'ep:rank',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
name: '旋转',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
name: '复制',
|
||||||
|
icon: 'ep:document',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
name: '粘贴',
|
||||||
|
icon: 'ep:copy-document',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
name: '删除',
|
||||||
|
icon: 'ep:delete',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
name: '工具',
|
||||||
|
icon: 'ep:briefcase',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
name: '线库',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
name: '区域',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
name: '文字',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
name: '设备',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
name: '车辆',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
name: '测距',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
name: '图层',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
name: '标记',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
name: '网格',
|
||||||
|
icon: 'ep:folder-add',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
name: '放大',
|
||||||
|
icon: 'ep:zoom-in',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 21,
|
||||||
|
name: '缩小',
|
||||||
|
icon: 'ep:zoom-out',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 22,
|
||||||
|
name: '撤回',
|
||||||
|
icon: 'ep:top-left',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 23,
|
||||||
|
name: '重做',
|
||||||
|
icon: 'ep:top-right',
|
||||||
|
isActive: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rightToolList: [
|
||||||
|
{
|
||||||
|
id: 24,
|
||||||
|
name: '绘制节点',
|
||||||
|
icon: 'ep:circle-plus-filled',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 25,
|
||||||
|
name: '编辑节点',
|
||||||
|
icon: 'ep:circle-plus-filled',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 26,
|
||||||
|
name: '绘制路线',
|
||||||
|
icon: 'ep:semi-select',
|
||||||
|
isActive: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 27,
|
||||||
|
name: '编辑路线',
|
||||||
|
icon: 'ep:semi-select',
|
||||||
|
isActive: false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
isShowGrid: false,
|
||||||
|
moveForm: {
|
||||||
|
x: '',
|
||||||
|
y: ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const toolbarClick = (item) => {
|
||||||
|
let type = item.id
|
||||||
|
if (currentItemIndex.value === -1 && type === 5) {
|
||||||
|
message.warning('请先选择要操作的图标')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (toolbarTypeIndex.value === type) {
|
||||||
|
toolbarTypeIndex.value = 0
|
||||||
|
} else {
|
||||||
|
toolbarTypeIndex.value = type
|
||||||
|
}
|
||||||
|
switch (type) {
|
||||||
|
case 1:
|
||||||
|
break
|
||||||
|
case 2:
|
||||||
|
saveMap()
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
break
|
||||||
|
case 4:
|
||||||
|
break
|
||||||
|
case 5:
|
||||||
|
break
|
||||||
|
case 6:
|
||||||
|
break
|
||||||
|
case 7:
|
||||||
|
break
|
||||||
|
case 8:
|
||||||
|
break
|
||||||
|
case 9:
|
||||||
|
break
|
||||||
|
case 10:
|
||||||
|
break
|
||||||
|
case 11:
|
||||||
|
break
|
||||||
|
case 12:
|
||||||
|
break
|
||||||
|
case 13:
|
||||||
|
break
|
||||||
|
case 14:
|
||||||
|
break
|
||||||
|
case 15:
|
||||||
|
break
|
||||||
|
case 16:
|
||||||
|
break
|
||||||
|
case 17:
|
||||||
|
break
|
||||||
|
case 18:
|
||||||
|
break
|
||||||
|
case 19:
|
||||||
|
//网格
|
||||||
|
if (toolbarTypeIndex.value === 19) {
|
||||||
|
state.isShowGrid = true
|
||||||
|
item.isActive = true
|
||||||
|
} else {
|
||||||
|
state.isShowGrid = false
|
||||||
|
item.isActive = false
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 20:
|
||||||
|
break
|
||||||
|
case 21:
|
||||||
|
break
|
||||||
|
case 22:
|
||||||
|
//上一步
|
||||||
|
backPreviousStep()
|
||||||
|
break
|
||||||
|
case 23:
|
||||||
|
//下一步
|
||||||
|
backNextStep()
|
||||||
|
break
|
||||||
|
case 24:
|
||||||
|
drawNodes()
|
||||||
|
break
|
||||||
|
case 25:
|
||||||
|
break
|
||||||
|
case 26:
|
||||||
|
break
|
||||||
|
case 27:
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//移动工具表单提交
|
||||||
|
const moveFormSubmit = () => {
|
||||||
|
allHistoryList.value[currentIndex.value][currentItemIndex.value].x = state.moveForm.x
|
||||||
|
allHistoryList.value[currentIndex.value][currentItemIndex.value].y = state.moveForm.y
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
imgList.value = [
|
imgList.value = [
|
||||||
{
|
{
|
||||||
@ -389,6 +613,9 @@ onMounted(() => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-show {
|
||||||
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
|
||||||
linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
|
||||||
background-size:
|
background-size:
|
||||||
@ -403,32 +630,84 @@ onMounted(() => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-list {
|
.top-tool-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: -20px;
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-right: -20px;
|
||||||
|
padding: 0 14px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
||||||
|
height: 70px;
|
||||||
|
|
||||||
.tool-item {
|
.top-tool-item {
|
||||||
width: 50px;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
|
||||||
.name {
|
.tool-item {
|
||||||
font-family:
|
cursor: pointer;
|
||||||
PingFangSC,
|
width: 52px;
|
||||||
PingFang SC;
|
height: 70px;
|
||||||
font-weight: 400;
|
display: flex;
|
||||||
font-size: 14px;
|
flex-direction: column;
|
||||||
color: #0d162a;
|
align-items: center;
|
||||||
line-height: 20px;
|
justify-content: center;
|
||||||
text-align: center;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
.name {
|
||||||
margin: 0 14px;
|
font-family:
|
||||||
width: 1px;
|
PingFangSC,
|
||||||
height: 47px;
|
PingFang SC;
|
||||||
border: 1px solid #cccccc;
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #0d162a;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
margin: 0 14px;
|
||||||
|
width: 1px;
|
||||||
|
height: 47px;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.right-tool-list {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 94px;
|
||||||
|
background-color: #fff;
|
||||||
|
z-index: 999;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
|
||||||
|
|
||||||
|
.tool-item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px;
|
||||||
|
.name {
|
||||||
|
font-family:
|
||||||
|
PingFangSC,
|
||||||
|
PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #0d162a;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-active {
|
||||||
|
background: #ebf1ff;
|
||||||
|
border-bottom: 2px solid #1677ff;
|
||||||
|
}
|
||||||
|
.right-tool-active {
|
||||||
|
background: #ebf1ff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user