refactor(图表): 自定义区域界面样式优化
This commit is contained in:
parent
77edc49870
commit
c602cf1abe
@ -150,8 +150,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="sub-area-view" v-else>
|
<div class="sub-area-view" v-else>
|
||||||
<div id="map-container" class="map-container"></div>
|
<div id="map-container" class="map-container"></div>
|
||||||
<el-divider />
|
|
||||||
<div class="sub-area-editor">
|
<div class="sub-area-editor">
|
||||||
|
<el-divider />
|
||||||
<span class="header">
|
<span class="header">
|
||||||
<span class="label">
|
<span class="label">
|
||||||
<span>自定义区域</span>
|
<span>自定义区域</span>
|
||||||
@ -164,7 +164,7 @@
|
|||||||
<span>添加区域</span>
|
<span>添加区域</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<el-table :data="subAreaList" stripe style="width: 100%">
|
<el-table :data="subAreaList" stripe style="width: 100%" :height="300">
|
||||||
<el-table-column prop="name" label="区域名称">
|
<el-table-column prop="name" label="区域名称">
|
||||||
<template #default="{ row, $index }">
|
<template #default="{ row, $index }">
|
||||||
<span
|
<span
|
||||||
@ -650,7 +650,8 @@ const renderMap = async () => {
|
|||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
textAnchor: 'center'
|
textAnchor: 'center',
|
||||||
|
textAllowOverlap: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
if (mapInstance) {
|
if (mapInstance) {
|
||||||
@ -666,7 +667,7 @@ const renderMap = async () => {
|
|||||||
value: area => {
|
value: area => {
|
||||||
let color = 'white'
|
let color = 'white'
|
||||||
subAreaList.value?.forEach((subArea, i) => {
|
subAreaList.value?.forEach((subArea, i) => {
|
||||||
if (subArea.scope?.includes(area.adcode)) {
|
if (subArea.scopeArr?.includes('156' + area.adcode)) {
|
||||||
color = AREA_COLOR[i % AREA_COLOR.length]
|
color = AREA_COLOR[i % AREA_COLOR.length]
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -839,16 +840,17 @@ onBeforeMount(() => {
|
|||||||
.sub-area-view {
|
.sub-area-view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.map-container {
|
.map-container {
|
||||||
flex: 7;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.ed-divider {
|
.ed-divider {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
.sub-area-editor {
|
.sub-area-editor {
|
||||||
flex: 3;
|
height: 350px;
|
||||||
.header {
|
.header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user