woka
/
cesium-map-object
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

航线编辑样式修改

wxp
ctw 2 months ago
parent
6c83a6d378
commit
20aa6fce5f
1 changed files with 363 additions and 164 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 527
      ruoyi-ui/src/views/dialogs/RouteEditDialog.vue

527
ruoyi-ui/src/views/dialogs/RouteEditDialog.vue
View File

@ -1,162 +1,194 @@
<template>
<el-dialog
title="编辑航线"
:visible.sync="visible"
width="560px"
:close-on-click-modal="false"
append-to-body
custom-class="blue-dialog route-edit-dialog"
custom-class="blue-dialog route-edit-dialog route-edit-dialog-no-title"
>
<el-tabs v-model="activeTab" type="card" class="route-edit-tabs">
<el-tab-pane label="基础" name="basic">
<div class="route-edit-tab-bar">
<button type="button" class="tab-bar-item" :class="{ active: activeTab === 'basic' }" @click="activeTab = 'basic'">基础</button>
<button type="button" class="tab-bar-item" :class="{ active: activeTab === 'platform' }" @click="activeTab = 'platform'">平台</button>
</div>
<div v-show="activeTab === 'basic'" class="tab-pane-wrap">
<div class="tab-pane-body basic-tab-content">
<el-form :model="form" label-width="88px" size="small" class="route-edit-form" @submit.native.prevent>
<el-form-item label="航线名称">
<el-input v-model="form.name" placeholder="请输入航线名称" clearable />
</el-form-item>
<el-divider content-position="left">航点样式</el-divider>
<div class="form-row two-col">
<el-form-item label="大小" class="col-item">
<el-slider v-model="styleForm.waypoint.pixelSize" :min="4" :max="20" :step="1" show-input />
</el-form-item>
<el-form-item label="边框粗细" class="col-item">
<el-slider v-model="styleForm.waypoint.outlineWidth" :min="1" :max="5" :step="1" show-input />
<el-form :model="form" label-width="88px" size="small" class="route-edit-form style-form" @submit.native.prevent>
<div class="form-section">
<div class="form-section-label">基本信息</div>
<el-form-item label="航线名称">
<el-input v-model="form.name" placeholder="请输入航线名称" clearable />
</el-form-item>
</div>
<div class="form-row two-col">
<el-form-item label="填充颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.waypoint.color" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.waypoint.color }}</span>
</div>
</el-form-item>
<el-form-item label="边框颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.waypoint.outlineColor" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.waypoint.outlineColor }}</span>
</div>
</el-form-item>
</div>
<el-divider content-position="left">航线样式</el-divider>
<div class="form-row two-col">
<el-form-item label="线段样式" class="col-item">
<el-select v-model="styleForm.line.style" placeholder="请选择" style="width: 100%">
<el-option label="实线" value="solid" />
<el-option label="虚线" value="dash" />
</el-select>
</el-form-item>
<el-form-item label="线宽" class="col-item">
<el-slider v-model="styleForm.line.width" :min="2" :max="12" :step="1" show-input />
</el-form-item>
<div class="form-section">
<div class="form-section-label">航点样式</div>
<div class="form-row two-col">
<el-form-item label="大小" class="col-item">
<el-input-number v-model="styleForm.waypoint.pixelSize" :min="4" :max="20" :step="1" size="small" controls-position="right" style="width: 100%" />
</el-form-item>
<el-form-item label="边框粗细" class="col-item">
<el-input-number v-model="styleForm.waypoint.outlineWidth" :min="1" :max="5" :step="1" size="small" controls-position="right" style="width: 100%" />
</el-form-item>
</div>
<div class="form-row two-col">
<el-form-item label="填充颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.waypoint.color" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.waypoint.color }}</span>
</div>
</el-form-item>
<el-form-item label="边框颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.waypoint.outlineColor" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.waypoint.outlineColor }}</span>
</div>
</el-form-item>
</div>
</div>
<div class="form-row two-col">
<el-form-item label="线条颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.line.color" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.line.color }}</span>
</div>
</el-form-item>
<el-form-item v-if="styleForm.line.style === 'dash'" label="间隔颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.line.gapColor" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.line.gapColor }}</span>
</div>
</el-form-item>
<div class="form-section">
<div class="form-section-label">航线样式</div>
<div class="form-row two-col">
<el-form-item label="线段样式" class="col-item">
<el-select v-model="styleForm.line.style" placeholder="请选择" style="width: 100%">
<el-option label="实线" value="solid" />
<el-option label="虚线" value="dash" />
</el-select>
</el-form-item>
<el-form-item label="线宽" class="col-item">
<el-input-number v-model="styleForm.line.width" :min="2" :max="12" :step="1" size="small" controls-position="right" style="width: 100%" />
</el-form-item>
</div>
<div class="form-row two-col">
<el-form-item label="线条颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.line.color" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.line.color }}</span>
</div>
</el-form-item>
<el-form-item v-if="styleForm.line.style === 'dash'" label="间隔颜色" class="col-item">
<div class="color-picker-wrap">
<el-color-picker v-model="styleForm.line.gapColor" size="small" :predefine="presetColors" />
<span class="color-value">{{ styleForm.line.gapColor }}</span>
</div>
</el-form-item>
</div>
</div>
</el-form>
</div>
</el-tab-pane>
<el-tab-pane label="平台" name="platform">
</div>
<div v-show="activeTab === 'platform'" class="tab-pane-wrap">
<div class="tab-pane-body platform-tab-content">
<div v-if="platformLoading" class="platform-loading">加载中...</div>
<template v-else>
<el-tabs v-model="platformCategory" type="border-card" size="small">
<el-tab-pane label="空中" name="Air">
<div class="platform-list">
<div
v-for="platform in airPlatforms"
:key="platform.id"
class="platform-item"
>
<div class="platform-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
<i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
</div>
<div class="platform-info">
<div class="platform-name">{{ platform.name }}</div>
</div>
<el-button
size="mini"
type="primary"
:plain="selectedPlatformId !== platform.id"
class="select-btn"
@click="selectPlatform(platform)"
>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</el-button>
</div>
<div v-if="airPlatforms.length === 0" class="empty-tip">暂无空中平台</div>
<div class="platform-segmented">
<button
type="button"
class="seg-item"
:class="{ active: platformCategory === 'Air' }"
@click="platformCategory = 'Air'"
>
<i class="seg-icon seg-icon-air"></i>
<span>空中</span>
</button>
<button
type="button"
class="seg-item"
:class="{ active: platformCategory === 'Sea' }"
@click="platformCategory = 'Sea'"
>
<i class="seg-icon seg-icon-sea"></i>
<span>海上</span>
</button>
<button
type="button"
class="seg-item"
:class="{ active: platformCategory === 'Ground' }"
@click="platformCategory = 'Ground'"
>
<i class="seg-icon seg-icon-ground"></i>
<span>地面</span>
</button>
</div>
<div v-show="platformCategory === 'Air'" class="platform-list">
<div
v-for="platform in airPlatforms"
:key="platform.id"
class="platform-card"
>
<div class="platform-card-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
<i v-else class="card-icon-placeholder el-icon-s-promotion"></i>
</div>
<div class="platform-card-info">
<div class="platform-card-name">{{ platform.name }}</div>
<div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
</div>
<button
type="button"
class="platform-card-btn"
:class="{ selected: selectedPlatformId === platform.id }"
@click="selectPlatform(platform)"
>
<i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</button>
</div>
<div v-if="airPlatforms.length === 0" class="empty-tip">暂无空中平台</div>
</div>
<div v-show="platformCategory === 'Sea'" class="platform-list">
<div
v-for="platform in seaPlatforms"
:key="platform.id"
class="platform-card"
>
<div class="platform-card-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
<i v-else class="card-icon-placeholder el-icon-s-flag"></i>
</div>
</el-tab-pane>
<el-tab-pane label="海上" name="Sea">
<div class="platform-list">
<div
v-for="platform in seaPlatforms"
:key="platform.id"
class="platform-item"
>
<div class="platform-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
<i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
</div>
<div class="platform-info">
<div class="platform-name">{{ platform.name }}</div>
</div>
<el-button
size="mini"
type="primary"
:plain="selectedPlatformId !== platform.id"
class="select-btn"
@click="selectPlatform(platform)"
>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</el-button>
</div>
<div v-if="seaPlatforms.length === 0" class="empty-tip">暂无海上平台</div>
<div class="platform-card-info">
<div class="platform-card-name">{{ platform.name }}</div>
<div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
</div>
</el-tab-pane>
<el-tab-pane label="地面" name="Ground">
<div class="platform-list">
<div
v-for="platform in groundPlatforms"
:key="platform.id"
class="platform-item"
>
<div class="platform-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" />
<i v-else :class="platform.icon || 'el-icon-picture-outline'"></i>
</div>
<div class="platform-info">
<div class="platform-name">{{ platform.name }}</div>
</div>
<el-button
size="mini"
type="primary"
:plain="selectedPlatformId !== platform.id"
class="select-btn"
@click="selectPlatform(platform)"
>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</el-button>
</div>
<div v-if="groundPlatforms.length === 0" class="empty-tip">暂无地面平台</div>
<button
type="button"
class="platform-card-btn"
:class="{ selected: selectedPlatformId === platform.id }"
@click="selectPlatform(platform)"
>
<i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</button>
</div>
<div v-if="seaPlatforms.length === 0" class="empty-tip">暂无海上平台</div>
</div>
<div v-show="platformCategory === 'Ground'" class="platform-list">
<div
v-for="platform in groundPlatforms"
:key="platform.id"
class="platform-card"
>
<div class="platform-card-icon">
<img v-if="isImg(platform.imageUrl)" :src="formatImg(platform.imageUrl)" class="platform-img" alt="" />
<i v-else class="card-icon-placeholder el-icon-van"></i>
</div>
<div class="platform-card-info">
<div class="platform-card-name">{{ platform.name }}</div>
<div class="platform-card-desc">{{ platformTypeLabel(platform.type) }}</div>
</div>
</el-tab-pane>
</el-tabs>
<button
type="button"
class="platform-card-btn"
:class="{ selected: selectedPlatformId === platform.id }"
@click="selectPlatform(platform)"
>
<i :class="selectedPlatformId === platform.id ? 'el-icon-check' : 'el-icon-plus'"></i>
{{ selectedPlatformId === platform.id ? '已选择' : '选择' }}
</button>
</div>
<div v-if="groundPlatforms.length === 0" class="empty-tip">暂无地面平台</div>
</div>
</template>
</div>
</el-tab-pane>
</el-tabs>
</div>
<span slot="footer" class="dialog-footer">
<el-button size="mini" @click="visible = false">取 消</el-button>
@ -272,6 +304,10 @@ export default {
const backendUrl = process.env.VUE_APP_BACKEND_URL || ''
return backendUrl + cleanPath
},
platformTypeLabel(type) {
const map = { Air: '空中平台', Sea: '海上平台', Ground: '地面平台' }
return map[type] || type || ''
},
selectPlatform(platform) {
this.selectedPlatformId = platform.id
this.selectedPlatform = { id: platform.id, name: platform.name, imageUrl: platform.imageUrl }
@ -332,7 +368,56 @@ export default {
}
</script>
<style>
/* 无标题弹窗：隐藏“编辑航线”标题，仅保留关闭按钮 */
.route-edit-dialog-no-title .el-dialog__title { display: none !important; }
.route-edit-dialog-no-title .el-dialog__header { margin-bottom: 0; padding: 10px 20px 8px; }
/* 弹窗垂直居中 */
.route-edit-dialog .el-dialog {
margin-top: 50vh !important;
transform: translateY(-50%);
}
.route-edit-dialog .el-dialog__body { padding-top: 12px; }
</style>
<style scoped>
.route-edit-tab-bar {
display: flex;
gap: 24px;
margin-bottom: 0;
padding-bottom: 12px;
border-bottom: 1px solid #e4e7ed;
}
.tab-bar-item {
padding: 0;
border: none;
background: none;
font-size: 14px;
color: #909399;
cursor: pointer;
position: relative;
padding-bottom: 12px;
margin-bottom: -12px;
outline: none;
}
.tab-bar-item:hover {
color: #606266;
}
.tab-bar-item.active {
color: #008aff;
font-weight: 500;
}
.tab-bar-item.active::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: #008aff;
}
.tab-pane-wrap {
padding-top: 4px;
}
.tab-pane-body {
min-height: 380px;
box-sizing: border-box;
@ -340,6 +425,22 @@ export default {
.basic-tab-content {
padding-right: 4px;
}
.form-section {
background: #f8f9fb;
border-radius: 8px;
padding: 12px 14px;
margin-bottom: 14px;
}
.form-section:last-of-type {
margin-bottom: 0;
}
.form-section-label {
font-size: 13px;
font-weight: 600;
color: #303133;
margin-bottom: 10px;
padding-left: 2px;
}
.basic-tab-content .form-row {
display: flex;
gap: 16px;
@ -355,74 +456,172 @@ export default {
.basic-tab-content .form-row.two-col .el-form-item {
margin-bottom: 14px;
}
.basic-tab-content .form-section .el-form-item:last-child {
margin-bottom: 0;
}
.color-picker-wrap {
display: inline-flex;
align-items: center;
gap: 8px;
}
.route-edit-form .color-value {
font-size: 12px;
color: #909399;
vertical-align: middle;
}
.route-edit-form .el-slider {
margin-right: 12px;
}
/* 平台页：分段选择 */
.platform-tab-content {
min-height: 380px;
max-height: 380px;
overflow-y: auto;
}
.platform-segmented {
display: flex;
gap: 0;
background: #eef1f6;
border-radius: 8px;
padding: 4px;
margin-bottom: 14px;
}
.seg-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 12px;
border: none;
border-radius: 6px;
font-size: 13px;
color: #909399;
background: transparent;
cursor: pointer;
transition: all 0.2s;
}
.seg-item:hover {
color: #606266;
}
.seg-item.active {
background: #008aff;
color: #fff;
font-weight: 500;
}
.seg-icon {
width: 18px;
height: 18px;
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.9;
}
.seg-item.active .seg-icon {
opacity: 1;
filter: brightness(0) invert(1);
}
.seg-icon-air {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E");
}
.seg-icon-sea {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 21c-1.39 0-2.78-.47-4-1.32-2.44 1.71-5.56 1.71-8 0C6.78 20.53 5.39 21 4 21H2v2h2c1.38 0 2.74-.35 4-.99 2.52 1.29 5.48 1.29 8 0 1.26.65 2.62.99 4 .99h2v-2h-2zM3.95 19H4c1.6 0 3.02-.88 4-2 .98 1.12 2.4 2 4 2h.05l1.89-6.68c.08-.26.06-.54-.06-.78-.12-.24-.32-.42-.57-.5L20 10.62V6c0-1.1-.9-2-2-2h-3V1H9v3H6c-1.1 0-2 .9-2 2v4.62l-1.29.42c-.25.08-.45.26-.57.5-.12.24-.14.52-.06.78L3.95 19zM6 6h12v3.97L12 8 6 9.97V6z'/%3E%3C/svg%3E");
}
.seg-icon-ground {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909399'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}
/* 平台卡片列表 */
.platform-loading,
.empty-tip {
padding: 20px;
color: #909399;
text-align: center;
font-size: 13px;
}
.platform-list {
display: flex;
flex-direction: column;
gap: 8px;
gap: 10px;
}
.platform-item {
.platform-card {
display: flex;
align-items: center;
padding: 8px;
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 12px 14px;
background: #f8f9fb;
border-radius: 8px;
border: 1px solid #eef1f6;
transition: border-color 0.2s;
}
.platform-icon {
width: 36px;
height: 36px;
.platform-card:hover {
border-color: #dcdfe6;
}
.platform-card-icon {
width: 44px;
height: 44px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
background: #f5f7fa;
border-radius: 4px;
margin-right: 12px;
background: #e0f0ff;
border-radius: 50%;
}
.platform-img {
max-width: 32px;
max-height: 32px;
.platform-card-icon .platform-img {
width: 28px;
height: 28px;
object-fit: contain;
}
.platform-info {
.platform-card-icon .card-icon-placeholder {
font-size: 22px;
color: #008aff;
}
.platform-card-info {
flex: 1;
min-width: 0;
}
.platform-name {
font-size: 13px;
.platform-card-name {
font-size: 14px;
font-weight: 600;
color: #303133;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.select-btn {
flex-shrink: 0;
}
.route-edit-form .el-divider__text {
.platform-card-desc {
font-size: 12px;
color: #909399;
}
.platform-card-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 14px;
border-radius: 6px;
font-size: 13px;
border: 1px solid #dcdfe6;
background: #fff;
color: #606266;
cursor: pointer;
transition: all 0.2s;
}
.route-edit-form .color-value {
font-size: 12px;
color: #909399;
vertical-align: middle;
.platform-card-btn:hover {
border-color: #008aff;
color: #008aff;
}
.route-edit-form .el-slider {
margin-right: 12px;
.platform-card-btn.selected {
background: #008aff;
border-color: #008aff;
color: #fff;
}
.platform-card-btn i {
font-size: 12px;
}
.blue-btn {
background: #008aff;
border-color: #008aff;

Write Preview
Loading…
Cancel
Save