refactor(图表): 自定义区域界面样式优化

This commit is contained in:
wisonic 2024-11-28 10:49:27 +08:00
parent 77edc49870
commit c602cf1abe

View File

@ -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;