|
@@ -68,10 +68,18 @@
|
|
|
<div class="feature-legend" v-if="layoutStore.floatPanels.layers_legend">
|
|
|
<div class="title-sub">图例</div>
|
|
|
<ul>
|
|
|
- <li v-for="item in featureLists">
|
|
|
- <i :style="{ background: item.color }"></i>
|
|
|
- <span>{{ item.label }}</span>
|
|
|
- </li>
|
|
|
+ <template v-for="item in featureLists">
|
|
|
+ <li>
|
|
|
+ <i v-if="item.color" :style="{ background: item.color }"></i>
|
|
|
+ <span :class="{ bold: item.colors }">{{ item.label }}</span>
|
|
|
+ </li>
|
|
|
+ <template v-if="item.colors">
|
|
|
+ <div v-for="(childColor, childLabel) in item.colors">
|
|
|
+ <i :style="{ background: childColor }"></i>
|
|
|
+ <span>{{ childLabel }}</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</Transition>
|
|
@@ -98,11 +106,14 @@ let shifeiStatus = false
|
|
|
onBeforeMount(() => {
|
|
|
getLists()
|
|
|
addAreaColors()
|
|
|
+ if (layoutStore.sceneType === 'ue') {
|
|
|
+ contentShow.b1 = false
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
function addAreaColors() {
|
|
|
featureLists.value.forEach((i) => {
|
|
|
- if (!i.color) {
|
|
|
+ if (!i.color && !i.colors) {
|
|
|
i.color = airSpaceTypes.find((t) => t.label === i.label).color
|
|
|
}
|
|
|
})
|
|
@@ -229,7 +240,15 @@ const featureLists = ref([
|
|
|
{ label: '禁飞区', type: 'area', show: false, check: false, icon: 'jfqu', children: [] },
|
|
|
{ label: '净空区', type: 'area', show: false, check: false, icon: 'jkqu', children: [] },
|
|
|
{ label: '适飞区', type: 'area', show: false, check: false, icon: 'sfqu', children: [] },
|
|
|
- { label: '已批复空域', type: 'area', show: false, check: false, icon: 'ypfkyu', children: [] },
|
|
|
+ {
|
|
|
+ label: '已批复空域',
|
|
|
+ type: 'area',
|
|
|
+ show: false,
|
|
|
+ check: false,
|
|
|
+ icon: 'ypfkyu',
|
|
|
+ children: [],
|
|
|
+ colors: { '120米以下': '#ccff66', '300米以下': '#ffcc66', '600米以下': '#feb2b2' },
|
|
|
+ },
|
|
|
{ label: '航线', type: 'route', show: false, check: false, icon: 'hxian', children: [], color: '#ffff00' },
|
|
|
{ label: '起降场', type: 'plot', show: false, check: false, icon: 'qjchang', children: [], color: '#45dcb5' },
|
|
|
])
|
|
@@ -286,9 +305,16 @@ function handleCheck(item, type) {
|
|
|
// console.log(item)
|
|
|
item.check = !item.check
|
|
|
let color
|
|
|
+ const shapeObj = JSON.parse(item.shape)
|
|
|
switch (type) {
|
|
|
case 'area':
|
|
|
- color = hexToRgb(airSpaceTypes.find((i) => i.value === item.spaceType).color, 0.5)
|
|
|
+ if (item.spaceType !== '6') {
|
|
|
+ color = hexToRgb(airSpaceTypes.find((i) => i.value === item.spaceType).color, 0.5)
|
|
|
+ } else {
|
|
|
+ const colorArr = Object.values(featureLists.value.find((i) => i.label === '已批复空域').colors)
|
|
|
+ color = +shapeObj.height < 120 ? colorArr[0] : +shapeObj.height < 300 ? colorArr[1] : colorArr[2]
|
|
|
+ color = hexToRgb(color, 0.5)
|
|
|
+ }
|
|
|
break
|
|
|
case 'plot':
|
|
|
color = hexToRgb(featureLists.value.find((i) => i.type === 'plot').color, 0.7)
|
|
@@ -300,7 +326,7 @@ function handleCheck(item, type) {
|
|
|
{
|
|
|
type: type === 'route' ? item.type : item.geoType,
|
|
|
shape: {
|
|
|
- ...JSON.parse(item.shape),
|
|
|
+ ...shapeObj,
|
|
|
color,
|
|
|
},
|
|
|
},
|
|
@@ -613,7 +639,7 @@ const vCollapse = {
|
|
|
position: absolute;
|
|
|
bottom: var(--panel-gap);
|
|
|
left: calc(var(--panel-left) - var(--panel-gap));
|
|
|
- width: 130px;
|
|
|
+ width: 140px;
|
|
|
padding: 10px 15px 15px;
|
|
|
background-color: rgba(0, 17, 50, 0.5);
|
|
|
border: 1px solid #055f8d;
|
|
@@ -625,12 +651,11 @@ const vCollapse = {
|
|
|
|
|
|
ul {
|
|
|
margin-top: 5px;
|
|
|
- li {
|
|
|
+ li,
|
|
|
+ div {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- &:not(:last-child) {
|
|
|
- margin-bottom: 2px;
|
|
|
- }
|
|
|
+
|
|
|
i {
|
|
|
display: block;
|
|
|
width: 10px;
|
|
@@ -643,6 +668,17 @@ const vCollapse = {
|
|
|
color: #ccc;
|
|
|
}
|
|
|
}
|
|
|
+ li {
|
|
|
+ &:not(:last-child) {
|
|
|
+ margin: 5px 0;
|
|
|
+ }
|
|
|
+ span.bold {
|
|
|
+ font-size: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ padding-left: 15px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|