编辑地图 搜索节点 节点滚动到中间
This commit is contained in:
yyy
parent
ca0a561058
commit
9cec9dacb1
@ -4,9 +4,9 @@ NODE_ENV=development
|
||||
VITE_DEV=true
|
||||
|
||||
# 请求路径
|
||||
VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.74:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.153:48080'
|
||||
# VITE_BASE_URL='http://192.168.0.45:48080'
|
||||
VITE_BASE_URL='http://192.168.0.45:48080'
|
||||
|
||||
# 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持 S3 服务
|
||||
VITE_UPLOAD_TYPE=server
|
||||
|
||||
BIN
src/assets/search.png
Normal file
BIN
src/assets/search.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
@ -1,303 +1,334 @@
|
||||
<template>
|
||||
<div class="edit-map-page" @wheel="handleWheel">
|
||||
<div class="top-tool">
|
||||
<div class="top-tool-list">
|
||||
<div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="170"
|
||||
trigger="click"
|
||||
v-if="item.switchType === 'move' || item.switchType === 'revolve'"
|
||||
:disabled="state.currentItemIndex === -1"
|
||||
>
|
||||
<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.moveForm" v-if="item.switchType === 'move'" class="mt-2">
|
||||
<el-form-item label="X">
|
||||
<el-input-number
|
||||
v-model="state.moveForm.locationX"
|
||||
:min="0"
|
||||
:max="imgBgObj.width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y">
|
||||
<el-input-number
|
||||
v-model="state.moveForm.locationY"
|
||||
:min="0"
|
||||
:max="imgBgObj.height"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="moveFormSubmit()"
|
||||
>确认</el-button
|
||||
<div class="top-tool-list-container">
|
||||
<div class="top-tool-list">
|
||||
<div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
:width="170"
|
||||
trigger="click"
|
||||
v-if="item.switchType === 'move' || item.switchType === 'revolve'"
|
||||
:disabled="state.currentItemIndex === -1"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === item.switchType
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 旋转 -->
|
||||
<el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'" class="mt-2">
|
||||
<el-form-item label="角度">
|
||||
<el-input-number
|
||||
v-model="state.rotationForm.angle"
|
||||
:min="0"
|
||||
:max="259"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="rotationFormSubmit"
|
||||
>确认</el-button
|
||||
>
|
||||
</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"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'lineLibrary'"
|
||||
:popper-style="{ padding: '0rem' }"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === 'lineLibrary' ||
|
||||
toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'lineLibraryManage'
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'createLineLibrary' })"
|
||||
>生成线库</div
|
||||
>
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'lineLibraryManage' })"
|
||||
>线库管理</div
|
||||
>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 区域 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'region'"
|
||||
:popper-style="{ padding: '0rem' }"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === 'region' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'regionManage'
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="item.switchType === 'region'" class="drop-down-menu">
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'createRegion' })"
|
||||
>生成物料区域</div
|
||||
>
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'regionManage' })"
|
||||
>物料区域管理</div
|
||||
>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 标记 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'marker'"
|
||||
width="220"
|
||||
:visible="state.popoverVisible"
|
||||
>
|
||||
<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.markForm" class="mt-2" label-width="68">
|
||||
<el-form-item label="标记车辆">
|
||||
<el-select
|
||||
v-model="state.markForm.macAddress"
|
||||
placeholder="请选择"
|
||||
@change="macAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.mapMarkCarList"
|
||||
:key="item.id"
|
||||
:label="item.robotNo"
|
||||
:value="item.macAddress"
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 位置 -->
|
||||
<el-form :model="state.moveForm" v-if="item.switchType === 'move'" class="mt-2">
|
||||
<el-form-item label="X">
|
||||
<el-input-number
|
||||
v-model="state.moveForm.locationX"
|
||||
:min="0"
|
||||
:max="imgBgObj.width"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标记属性" v-if="state.markForm.markProperty">
|
||||
<el-input v-model="state.markForm.markProperty" style="width: 15rem" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="原节点" v-if="state.markForm.originalNode">
|
||||
<el-input v-model="state.markForm.originalNode" style="width: 15rem" disabled />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #efefef"
|
||||
@click="markFormCancel()"
|
||||
>取消</el-button
|
||||
</el-form-item>
|
||||
<el-form-item label="Y">
|
||||
<el-input-number
|
||||
v-model="state.moveForm.locationY"
|
||||
:min="0"
|
||||
:max="imgBgObj.height"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="moveFormSubmit()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
<!-- 旋转 -->
|
||||
<el-form
|
||||
:model="state.rotationForm"
|
||||
v-if="item.switchType === 'revolve'"
|
||||
class="mt-2"
|
||||
>
|
||||
<el-form-item label="角度">
|
||||
<el-input-number
|
||||
v-model="state.rotationForm.angle"
|
||||
:min="0"
|
||||
:max="259"
|
||||
controls-position="right"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="rotationFormSubmit"
|
||||
>确认</el-button
|
||||
>
|
||||
</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)"
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="markFormSubmit()"
|
||||
>确认</el-button
|
||||
<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"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'lineLibrary'"
|
||||
:popper-style="{ padding: '0rem' }"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === 'lineLibrary' ||
|
||||
toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'lineLibraryManage'
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="item.switchType === 'lineLibrary'" class="drop-down-menu">
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'createLineLibrary' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'createLineLibrary' })"
|
||||
>生成线库</div
|
||||
>
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'lineLibraryManage' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'lineLibraryManage' })"
|
||||
>线库管理</div
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
<div
|
||||
v-else
|
||||
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>
|
||||
<!-- 分隔线 -->
|
||||
<div
|
||||
class="line"
|
||||
v-if="
|
||||
item.switchType === 'save' ||
|
||||
item.switchType === 'delete' ||
|
||||
item.switchType === 'grid' ||
|
||||
(item.switchType === 'next' &&
|
||||
</el-popover>
|
||||
<!-- 区域 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'region'"
|
||||
:popper-style="{ padding: '0rem' }"
|
||||
>
|
||||
<template #reference>
|
||||
<div
|
||||
class="tool-item"
|
||||
:class="
|
||||
toolbarSwitchType === 'region' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'regionManage'
|
||||
? 'tool-active'
|
||||
: item.isActive
|
||||
? 'right-tool-active'
|
||||
: ''
|
||||
"
|
||||
@click="toolbarClick(item)"
|
||||
>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="item.switchType === 'region'" class="drop-down-menu">
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'createRegion' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'createRegion' })"
|
||||
>生成物料区域</div
|
||||
>
|
||||
<div
|
||||
class="drop-down-menu-item"
|
||||
:class="toolbarSwitchType === 'regionManage' ? 'right-tool-active' : ''"
|
||||
@click="toolbarClick({ switchType: 'regionManage' })"
|
||||
>物料区域管理</div
|
||||
>
|
||||
</div>
|
||||
</el-popover>
|
||||
<!-- 标记 -->
|
||||
<el-popover
|
||||
placement="bottom"
|
||||
trigger="click"
|
||||
v-else-if="item.switchType === 'marker'"
|
||||
width="220"
|
||||
:visible="state.popoverVisible"
|
||||
>
|
||||
<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.markForm" class="mt-2" label-width="68">
|
||||
<el-form-item label="标记车辆">
|
||||
<el-select
|
||||
v-model="state.markForm.macAddress"
|
||||
placeholder="请选择"
|
||||
@change="macAddressChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.mapMarkCarList"
|
||||
:key="item.id"
|
||||
:label="item.robotNo"
|
||||
:value="item.macAddress"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标记属性" v-if="state.markForm.markProperty">
|
||||
<el-input v-model="state.markForm.markProperty" style="width: 15rem" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="原节点" v-if="state.markForm.originalNode">
|
||||
<el-input v-model="state.markForm.originalNode" style="width: 15rem" disabled />
|
||||
</el-form-item>
|
||||
<div style="text-align: right">
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #efefef"
|
||||
@click="markFormCancel()"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
style="width: 4rem; height: 1.875rem; background: #00329f"
|
||||
color="#00329F"
|
||||
@click="markFormSubmit()"
|
||||
>确认</el-button
|
||||
>
|
||||
</div>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
<div
|
||||
v-else
|
||||
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>
|
||||
<!-- 分隔线 -->
|
||||
<div
|
||||
class="line"
|
||||
v-if="
|
||||
item.switchType === 'save' ||
|
||||
item.switchType === 'delete' ||
|
||||
item.switchType === 'grid' ||
|
||||
(item.switchType === 'next' &&
|
||||
(toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'drawRoute' ||
|
||||
toolbarSwitchType === 'generateLine' ||
|
||||
toolbarSwitchType === 'bulkDelete'))
|
||||
"
|
||||
></div>
|
||||
<el-button
|
||||
v-if="
|
||||
item.switchType === 'next' &&
|
||||
(toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'drawRoute' ||
|
||||
toolbarSwitchType === 'generateLine' ||
|
||||
toolbarSwitchType === 'bulkDelete'))
|
||||
"
|
||||
></div>
|
||||
<el-button
|
||||
v-if="
|
||||
item.switchType === 'next' &&
|
||||
(toolbarSwitchType === 'createLineLibrary' ||
|
||||
toolbarSwitchType === 'createRegion' ||
|
||||
toolbarSwitchType === 'drawRoute' ||
|
||||
toolbarSwitchType === 'generateLine' ||
|
||||
toolbarSwitchType === 'bulkDelete')
|
||||
"
|
||||
type="danger"
|
||||
class="selection-area-btn"
|
||||
@click="clickDrawSelectionArea"
|
||||
>确定</el-button
|
||||
toolbarSwitchType === 'bulkDelete')
|
||||
"
|
||||
type="danger"
|
||||
class="selection-area-btn"
|
||||
@click="clickDrawSelectionArea"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-select">
|
||||
<img
|
||||
class="search-icon"
|
||||
v-if="!state.isSearchSelectVisible"
|
||||
@click="toggleSelect"
|
||||
src="@/assets/search.png"
|
||||
/>
|
||||
<el-select
|
||||
class="!w-160px"
|
||||
v-else
|
||||
v-model="state.searchSelectedOption"
|
||||
@blur="toggleSelect"
|
||||
placeholder="请选择"
|
||||
@change="searchSelectChange"
|
||||
filterable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in state.haveSortNumMapPointInfo"
|
||||
:key="item.sortNum"
|
||||
:label="item.sortNum"
|
||||
:value="item.sortNum"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-tool-list" v-if="state.isShowToolbar">
|
||||
<div
|
||||
v-for="item in state.rightToolList"
|
||||
@ -340,6 +371,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-popover>
|
||||
|
||||
<div v-else>
|
||||
<Icon :icon="item.icon" :size="20" />
|
||||
<div class="name"> {{ item.name }} </div>
|
||||
@ -350,7 +382,7 @@
|
||||
|
||||
<div
|
||||
class="map-container"
|
||||
ref="mapContainer"
|
||||
ref="mapContainerRef"
|
||||
:style="{ cursor: state.cursorStyle }"
|
||||
v-if="imgBgObj.width && imgBgObj.height"
|
||||
>
|
||||
@ -840,6 +872,7 @@ const equipmentToolDialogRef = ref() //设备弹窗
|
||||
const textFormToolDialogRef = ref() //文字输入弹窗
|
||||
const editMapRouteDialogRef = ref() //编辑地图路线的弹窗
|
||||
const mapBackgroundRef = ref()
|
||||
const mapContainerRef = ref()
|
||||
const inputBoxRef = ref() //文字输入框
|
||||
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -1522,7 +1555,10 @@ const state = reactive({
|
||||
},
|
||||
routeWidthForm: {
|
||||
routeWidth: 3
|
||||
}
|
||||
},
|
||||
isSearchSelectVisible: false, //是否显示选择框
|
||||
searchSelectedOption: '',
|
||||
haveSortNumMapPointInfo: []
|
||||
})
|
||||
//网格的样式
|
||||
const gradientBackground = computed(() => {
|
||||
@ -2490,36 +2526,6 @@ const mapPointsToLine = (points, startPointId, endPointId) => {
|
||||
locationY: newY
|
||||
}
|
||||
})
|
||||
|
||||
// const dx = startPoint.locationX - endPoint.locationX
|
||||
// const dy = startPoint.locationY - endPoint.locationY
|
||||
|
||||
// // 处理垂直直线的情况
|
||||
// if (dx === 0) {
|
||||
// return points.map((point) => {
|
||||
// if (point === endPoint || point === startPoint) {
|
||||
// return point
|
||||
// }
|
||||
// return {
|
||||
// ...point,
|
||||
// locationX: endPoint.locationX
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// const slope = dy / dx
|
||||
// const intercept = endPoint.locationY - slope * endPoint.locationX
|
||||
|
||||
// return points.map((point) => {
|
||||
// if (point === endPoint || point === startPoint) {
|
||||
// return point
|
||||
// }
|
||||
// const newY = slope * point.locationX + intercept
|
||||
// return {
|
||||
// ...point,
|
||||
// locationY: newY
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
//计算是不是在同一条直线的
|
||||
@ -3088,6 +3094,11 @@ const getAllNodeList = async () => {
|
||||
|
||||
state.allMapPointInfo.push(item)
|
||||
})
|
||||
|
||||
//包含sortNumber的
|
||||
state.haveSortNumMapPointInfo = state.allMapPointInfo.filter((item) => {
|
||||
return item.sortNum
|
||||
})
|
||||
}
|
||||
//获取所有的路线
|
||||
const getAllMapRoute = async () => {
|
||||
@ -3384,6 +3395,37 @@ const computedCurveTextY = (item) => {
|
||||
4
|
||||
)
|
||||
}
|
||||
//搜索
|
||||
const toggleSelect = () => {
|
||||
state.isSearchSelectVisible = !state.isSearchSelectVisible
|
||||
state.searchSelectedOption = ''
|
||||
}
|
||||
const searchSelectChange = (sortNum) => {
|
||||
const currentIndex = state.allMapPointInfo.findIndex((item) => item.sortNum === sortNum)
|
||||
const currentItem = state.allMapPointInfo.find((item) => item.sortNum === sortNum)
|
||||
|
||||
// 计算并限制边界 滚动到指定位置
|
||||
const rect = mapContainerRef.value
|
||||
const maxScrollLeft = rect.scrollWidth - rect.clientWidth
|
||||
const maxScrollTop = rect.scrollHeight - rect.clientHeight
|
||||
const scrollToX = Math.max(
|
||||
0,
|
||||
Math.min(currentItem.locationX - rect.clientWidth / 2, maxScrollLeft)
|
||||
)
|
||||
const scrollToY = Math.max(
|
||||
0,
|
||||
Math.min(currentItem.locationY - rect.clientHeight / 2, maxScrollTop)
|
||||
)
|
||||
|
||||
rect.scrollTo({
|
||||
left: scrollToX,
|
||||
top: scrollToY,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
|
||||
state.currentItemIndex = currentIndex
|
||||
}
|
||||
|
||||
document.onmousedown = function (e) {
|
||||
//右击
|
||||
if (e.button == 2) {
|
||||
@ -3498,15 +3540,12 @@ onUnmounted(() => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
// height: 85vh;
|
||||
height: calc(100vh - 120px);
|
||||
|
||||
.map-bg {
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
// top: 1.125rem;
|
||||
// left: 1.125rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -3519,48 +3558,56 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.top-tool {
|
||||
margin-bottom: 0.125rem;
|
||||
.top-tool-list {
|
||||
margin-bottom: 2px;
|
||||
|
||||
.top-tool-list-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
padding: 0 0.75rem;
|
||||
height: 60px;
|
||||
box-shadow: rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.1875rem;
|
||||
height: 60px;
|
||||
padding: 0 0.75rem;
|
||||
|
||||
.top-tool-item {
|
||||
.top-tool-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
.tool-item {
|
||||
cursor: pointer;
|
||||
width: 44px;
|
||||
height: 60px;
|
||||
.top-tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
.tool-item {
|
||||
cursor: pointer;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #0d162a;
|
||||
line-height: 1.25rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
margin-top: 0.25rem;
|
||||
width: 44px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.name {
|
||||
cursor: pointer;
|
||||
font-family:
|
||||
PingFangSC,
|
||||
PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #0d162a;
|
||||
line-height: 1.25rem;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin: 0 4px;
|
||||
width: 0.0625rem;
|
||||
height: 2.9375rem;
|
||||
border: 0.0625rem solid #cccccc;
|
||||
}
|
||||
}
|
||||
.line {
|
||||
margin: 0 4px;
|
||||
width: 0.0625rem;
|
||||
height: 2.9375rem;
|
||||
border: 0.0625rem solid #cccccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3673,4 +3720,11 @@ onUnmounted(() => {
|
||||
font-size: 0.875rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
.search-icon {
|
||||
widows: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user