ak/zn-admin-vue3-wcs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

编辑地图 网格大小 路线宽度都做成用户自己设置

Browse Source
This commit is contained in:
yyy 2025-04-11 16:29:08 +08:00
parent 712e40fe51
commit 5083bb4013
6 changed files with 116 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/ToolHeader.vue
View File

@ -52,7 +52,7 @@ export default defineComponent({
'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
'dark:bg-[var(--el-bg-color)]'
]}
style="height:61px"
style="height:51px"
>
{layout.value !== 'top' ? (
<div class="h-full flex items-center">

2
src/layout/components/useRenderLayout.tsx
View File

@ -55,7 +55,7 @@ export const useRenderLayout = () => {
'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:50px;display: flex;
align-items: center;"
></Logo>
) : undefined}

2
src/styles/var.css
View File

@ -34,7 +34,7 @@
--top-header-hover-color: #215bd8;
/* --top-tool-height: var(--logo-height); */
--top-tool-height: 60px;
--top-tool-height: 50px;
--top-tool-p-x: 0;

2
src/views/mapPage/realTimeMap/components-tool/textFormToolDialog.vue
View File

@ -77,7 +77,7 @@ const emit = defineEmits(['textFormSuccess'])
.text-form-dialog {
background-color: #fff;
position: absolute;
top: 76px;
top: 62px;
left: 30%;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
padding: 18px 20px 0 20px;

2
src/views/mapPage/realTimeMap/components/indexPage.vue
View File

@ -1033,7 +1033,7 @@ onBeforeUnmount(() => {
}
.is-full-screen {
height: calc(100vh - 8.125rem) !important;
height: calc(100vh - 120px);
overflow: auto;
}
}

162
src/views/mapPage/realTimeMap/editMap.vue
View File

@ -22,7 +22,7 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
@ -75,6 +75,40 @@
</div>
</el-form>
</el-popover>
<el-popover
placement="bottom"
:width="170"
trigger="click"
v-else-if="item.switchType === 'grid'"
>
<template #reference>
<div
class="tool-item"
:class="
toolbarSwitchType === item.switchType
? 'tool-active'
: item.isActive
? 'right-tool-active'
: ''
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
<!-- 网格 -->
<el-form :model="state.gridForm" v-if="item.switchType === 'grid'" class="mt-2">
<el-form-item label="网格">
<el-select v-model="state.gridForm.gridNum" placeholder="选择">
<el-option label="0.5米" value="10px" />
<el-option label="1米" value="20px" />
<el-option label="2米" value="40px" />
<el-option label="3米" value="60px" />
</el-select>
</el-form-item>
</el-form>
</el-popover>
<!-- 线库 -->
<el-popover
placement="bottom"
@ -96,7 +130,7 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
@ -136,7 +170,7 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
@ -175,7 +209,7 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
@ -230,7 +264,7 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
<!-- 分隔线 -->
@ -278,8 +312,38 @@
"
@click="toolbarClick(item)"
>
<Icon :icon="item.icon" :size="24" />
<div class="name"> {{ item.name }} </div>
<el-popover
placement="bottom"
:width="170"
trigger="click"
v-if="item.switchType === 'routeWidth'"
>
<template #reference>
<div class="tool-item" @click="toolbarClick(item)">
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</template>
<!-- 网格 -->
<el-form
:model="state.routeWidthForm"
v-if="item.switchType === 'routeWidth'"
class="mt-2"
>
<el-form-item label="路线宽度">
<el-select v-model="state.routeWidthForm.routeWidth" placeholder="选择">
<el-option label="2" :value="2" />
<el-option label="3" :value="3" />
<el-option label="4" :value="4" />
<el-option label="5" :value="5" />
</el-select>
</el-form-item>
</el-form>
</el-popover>
<div v-else>
<Icon :icon="item.icon" :size="20" />
<div class="name"> {{ item.name }} </div>
</div>
</div>
</div>
</div>
@ -308,11 +372,7 @@
ref="mapBackgroundRef"
class="map-box-inner"
@click="mapClick"
:class="state.isShowGrid ? 'grid-show' : ''"
:style="{
width: imgBgObj.width + 'px',
height: imgBgObj.height + 'px'
}"
:style="gradientBackground"
v-if="interfaceRefreshed"
>
<VueDragResizeRotate
@ -505,7 +565,7 @@
:x2="Number(state.currentDrawX)"
:y2="Number(state.currentDrawY)"
stroke="#2d72d9"
stroke-width="5"
:stroke-width="state.routeWidthForm.routeWidth"
/>
<template v-if="state.mapRouteList.length > 0">
<template v-for="(curve, index) in state.mapRouteList" :key="index">
@ -517,7 +577,7 @@
:x2="Number(curve.endPointX)"
:y2="Number(curve.endPointY)"
:stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
stroke-width="5"
:stroke-width="state.routeWidthForm.routeWidth"
@click="handleChooseRoute(curve, index)"
/>
<text
@ -539,7 +599,7 @@
id="curvePath"
:d="getCurvePath(curve)"
:stroke="curve.isSelected ? '#f48924' : '#2d72d9'"
stroke-width="5"
:stroke-width="state.routeWidthForm.routeWidth"
fill="none"
@click="handleChooseRoute(curve, index)"
/>
@ -875,7 +935,6 @@ const getLocationNumberStyle = (item, index) => {
top: Number(item.locationDeepPx) / 2 - 2 + 'px'
}
}
//库位的样式
const binLocationStyle = (item, index) => {
let laneId
@ -1382,6 +1441,12 @@ const state = reactive({
name: '节点序号',
icon: 'ep:chat-dot-square',
isActive: false
},
{
switchType: 'routeWidth',
name: '路线宽度',
icon: 'ep:semi-select',
isActive: false
}
],
isShowToolbar: false, //工具栏展示隐藏
@ -1445,6 +1510,27 @@ const state = reactive({
actualLocation: {
x: '',
y: ''
},
gridForm: {
gridNum: 20 + 'px'
},
routeWidthForm: {
routeWidth: 3
}
})
//网格的样式
const gradientBackground = computed(() => {
return {
backgroundImage: `
linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px)
`,
backgroundSize: `
${state.gridForm.gridNum} ${state.gridForm.gridNum},
${state.gridForm.gridNum} ${state.gridForm.gridNum}
`,
width: `${imgBgObj.width}px`,
height: `${imgBgObj.height}px`
}
})
@ -1861,9 +1947,7 @@ const markFormSubmit = async () => {
if (res) {
//点
let point = JSON.parse(res)
console.log(point)
let pointPx = convertActualToBrowser(point.x, point.y)
console.log(pointPx)
if (state.currentItemIndex !== -1) {
state.allMapPointInfo[state.currentItemIndex].locationYaw = point.yaw
@ -3260,7 +3344,7 @@ onUnmounted(() => {
width: 100%;
overflow: auto;
// height: 85vh;
height: calc(100vh - 8.75rem);
height: calc(100vh - 120px);
.map-bg {
background-size: contain;
@ -3287,7 +3371,7 @@ onUnmounted(() => {
text-align: center;
background-color: #fff;
padding: 0 0.75rem;
height: 4.375rem;
height: 60px;
box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
.top-tool-item {
@ -3296,8 +3380,8 @@ onUnmounted(() => {
.tool-item {
cursor: pointer;
width: 3.125rem;
height: 4.375rem;
width: 44px;
height: 60px;
display: flex;
flex-direction: column;
align-items: center;
@ -3309,7 +3393,7 @@ onUnmounted(() => {
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 0.875rem;
font-size: 13px;
color: #0d162a;
line-height: 1.25rem;
text-align: center;
@ -3318,7 +3402,7 @@ onUnmounted(() => {
}
}
.line {
margin: 0 0.75rem;
margin: 0 4px;
width: 0.0625rem;
height: 2.9375rem;
border: 0.0625rem solid #cccccc;
@ -3329,7 +3413,7 @@ onUnmounted(() => {
.right-tool-list {
position: absolute;
right: 0;
top: 7.125rem;
top: 80px;
background-color: #fff;
z-index: 999;
text-align: center;
@ -3337,15 +3421,14 @@ onUnmounted(() => {
.tool-item {
cursor: pointer;
padding: 0.625rem;
padding: 8px;
.name {
font-family:
PingFangSC,
PingFang SC;
font-weight: 400;
font-size: 0.875rem;
font-size: 13px;
color: #0d162a;
line-height: 1.25rem;
text-align: center;
font-style: normal;
}
@ -3365,29 +3448,6 @@ onUnmounted(() => {
margin-left: 0.25rem;
}
.grid-show {
// background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) .0625rem, transparent .0625rem),
// linear-gradient(rgba(0, 0, 0, 0.1) .0625rem, transparent .0625rem);
// background-size:
// 1.25rem 1.25rem,
// 1.25rem 1.25rem;
background-image: repeating-linear-gradient(
to right,
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1) 0.0625rem,
transparent 0.0625rem,
transparent 3.125rem
),
repeating-linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1) 0.0625rem,
transparent 0.0625rem,
transparent 3.125rem
);
}
.svg-div {
z-index: 99999;