Commit b2ef0e5988e3fd9a97bde918f2746864c6e26809

Authored by fengwotao
1 parent bfde1c1d

perf(src/packages/): 优化图表地图用户体验

@@ -3,6 +3,13 @@ import { onMounted, reactive } from 'vue' @@ -3,6 +3,13 @@ import { onMounted, reactive } from 'vue'
3 import { getAreaList } from '@/api/external/common/index' 3 import { getAreaList } from '@/api/external/common/index'
4 import { areaEnum } from '../config' 4 import { areaEnum } from '../config'
5 5
  6 +const props = defineProps({
  7 + drillingIn:{
  8 + type:Boolean,
  9 + default:false
  10 + }
  11 +})
  12 +
6 const emits = defineEmits(['submit']) 13 const emits = defineEmits(['submit'])
7 14
8 const selectOptions = reactive({ 15 const selectOptions = reactive({
@@ -12,7 +19,7 @@ const selectOptions = reactive({ @@ -12,7 +19,7 @@ const selectOptions = reactive({
12 }) 19 })
13 20
14 const selectValues = reactive({ 21 const selectValues = reactive({
15 - provinceValue: null, 22 + provinceValue: 'china',
16 cityValue: null, 23 cityValue: null,
17 countyValue: null 24 countyValue: null
18 }) 25 })
@@ -60,16 +67,19 @@ const onHandleSubmit = () => { @@ -60,16 +67,19 @@ const onHandleSubmit = () => {
60 :options="selectOptions.provinceOptions" 67 :options="selectOptions.provinceOptions"
61 /> 68 />
62 <n-select 69 <n-select
  70 + v-if="!props.drillingIn"
63 @change="onHandleSelectCity" 71 @change="onHandleSelectCity"
64 placeholder="请选择城市" 72 placeholder="请选择城市"
65 v-model:value="selectValues.cityValue" 73 v-model:value="selectValues.cityValue"
66 :options="selectOptions.cityOptions" 74 :options="selectOptions.cityOptions"
67 /> 75 />
68 - <n-select 76 + <!-- 保留待用(下钻到区以下) -->
  77 + <!-- <n-select
  78 + v-if="!drillingIn"
69 placeholder="请选择区域" 79 placeholder="请选择区域"
70 v-model:value="selectValues.countyValue" 80 v-model:value="selectValues.countyValue"
71 :options="selectOptions.countryOptions" 81 :options="selectOptions.countryOptions"
72 - /> 82 + /> -->
73 <n-button type="primary" @click="onHandleSubmit">确定</n-button> 83 <n-button type="primary" @click="onHandleSubmit">确定</n-button>
74 </div> 84 </div>
75 </template> 85 </template>
@@ -2,18 +2,17 @@ @@ -2,18 +2,17 @@
2 <!-- Echarts 全局设置 --> 2 <!-- Echarts 全局设置 -->
3 <global-setting :optionData="optionData"></global-setting> 3 <global-setting :optionData="optionData"></global-setting>
4 <CollapseItem name="地图" :expanded="true"> 4 <CollapseItem name="地图" :expanded="true">
5 - <SelectCity @submit="onHandleSelectValues" />  
6 <SettingItemBox name="开启下钻"> 5 <SettingItemBox name="开启下钻">
7 <SettingItem name=""> 6 <SettingItem name="">
8 <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch> 7 <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
9 </SettingItem> 8 </SettingItem>
10 </SettingItemBox> 9 </SettingItemBox>
11 - <SettingItemBox name="显示返回图标"> 10 + <SettingItemBox name="返回图标">
12 <SettingItem name=""> 11 <SettingItem name="">
13 - <n-switch v-model:value="optionData.showIcon" size="small"></n-switch> 12 + <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
14 </SettingItem> 13 </SettingItem>
15 </SettingItemBox> 14 </SettingItemBox>
16 - <SettingItemBox name="返回图标颜色"> 15 + <SettingItemBox name="图标颜色">
17 <SettingItem name=""> 16 <SettingItem name="">
18 <n-color-picker 17 <n-color-picker
19 size="small" 18 size="small"
@@ -22,7 +21,7 @@ @@ -22,7 +21,7 @@
22 ></n-color-picker> 21 ></n-color-picker>
23 </SettingItem> 22 </SettingItem>
24 </SettingItemBox> 23 </SettingItemBox>
25 - <SettingItemBox name="返回图标距离"> 24 + <SettingItemBox name="图标距离">
26 <SettingItem name="距右"> 25 <SettingItem name="距右">
27 <n-input-number 26 <n-input-number
28 v-model:value="optionData.iconDistanceRight" 27 v-model:value="optionData.iconDistanceRight"
@@ -40,6 +39,7 @@ @@ -40,6 +39,7 @@
40 ></n-input-number> 39 ></n-input-number>
41 </SettingItem> 40 </SettingItem>
42 </SettingItemBox> 41 </SettingItemBox>
  42 + <SelectCity :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
43 <SettingItemBox name="区域颜色"> 43 <SettingItemBox name="区域颜色">
44 <SettingItem name="0%处颜色"> 44 <SettingItem name="0%处颜色">
45 <n-color-picker 45 <n-color-picker
@@ -89,8 +89,8 @@ const toolBoxOption = ref({ @@ -89,8 +89,8 @@ const toolBoxOption = ref({
89 watch( 89 watch(
90 () => props.chartConfig.option, 90 () => props.chartConfig.option,
91 newData => { 91 newData => {
92 - const { iconColor, showIcon, iconDistanceRight, iconDistanceTop } = newData  
93 - toolBoxOption.value.feature.myFullButton.show = showIcon 92 + const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
  93 + toolBoxOption.value.feature.myFullButton.show = drillingIn
94 toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor 94 toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
95 toolBoxOption.value.right = iconDistanceRight 95 toolBoxOption.value.right = iconDistanceRight
96 toolBoxOption.value.top = iconDistanceTop 96 toolBoxOption.value.top = iconDistanceTop