config.vue 3.57 KB
<template>
  <!-- Echarts 全局设置 -->
  <global-setting :optionData="optionData"></global-setting>
  <CollapseItem name="地图" :expanded="true">
    <!-- <SettingItemBox name="开启下钻">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="返回图标">
      <SettingItem name="">
        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标颜色">
      <SettingItem name="">
        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.iconColor"></n-color-picker>
      </SettingItem>
    </SettingItemBox>
    <SettingItemBox name="图标距离">
      <SettingItem name="距右">
        <n-input-number
          v-model:value="optionData.iconDistanceRight"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
      <SettingItem name="距上">
        <n-input-number
          v-model:value="optionData.iconDistanceTop"
          :min="1"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox> -->
    <SelectCity :optionData="optionData" :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
    <SettingItemBox name="颜色">
      <SettingItem name="区域颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].itemStyle.color"></n-color-picker>
      </SettingItem>
      <SettingItem name="边框颜色">
        <n-color-picker
          size="small"
          :modes="['hex']"
          v-model:value="seriesList[0].itemStyle.borderColor"
        ></n-color-picker>
      </SettingItem>
      <SettingItem name="边框大小">
        <n-input-number
          v-model:value="seriesList[0].itemStyle.borderWidth"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox>
    <!-- <SettingItemBox name="标题">
      <SettingItem name="是否显示">
        <n-switch v-model:value="seriesList[0].label.show" size="small"></n-switch>
      </SettingItem>
      <SettingItem name="颜色">
        <n-color-picker size="small" :modes="['hex']" v-model:value="seriesList[0].label.color"></n-color-picker>
      </SettingItem>
      <SettingItem name="大小">
        <n-input-number
          v-model:value="seriesList[0].label.fontSize"
          :min="0"
          size="small"
          placeholder="请输入"
        ></n-input-number>
      </SettingItem>
    </SettingItemBox> -->
  </CollapseItem>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
import { GlobalSetting } from '@/components/Pages/ChartItemSetting'
import SelectCity from './components/SelectCity.vue'

const props = defineProps({
  optionData: {
    type: Object as PropType<GlobalThemeJsonType>,
    required: true
  }
})

const seriesList = computed(() => {
  return props.optionData.series
})

const onHandleSelectValues = (values: any) => {
  const { cityValue, countyValue, provinceValue } = values
  props.optionData.mapRegion.saveSelect = values
  props.optionData.mapRegion.adcode = countyValue
    ? countyValue
    : cityValue
    ? cityValue
    : provinceValue === 'china'
    ? 'china'
    : provinceValue
}
</script>