Merge branch 'ft' into 'main_dev'

fix(src/packages): 修改设备分布地图和3d地图，返回图标问题 See merge request yunteng/thingskit-view!135

Merge branch 'ft' into 'main_dev'
fix(src/packages): 修改设备分布地图和3d地图，返回图标问题 See merge request yunteng/thingskit-view!135
xp.Huang
2 parents e268d6d0 5850144d
Showing 6 changed files with 128 additions and 51 deletions
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
src/packages/components/external/Charts/Maps/OverrideMapAmap/config.vue
src/packages/components/external/Charts/Maps/OverrideMapAmap/index.ts
src/packages/components/external/Charts/Maps/OverrideMapBase/config.ts
src/packages/components/external/Charts/Maps/OverrideMapBase/index.vue
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/config.ts
View file @1dc4b8e
@@ -43,6 +43,9 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataMaps,
+  saveClickRegion: {
+    level: ''
+  },
   mapRegion: {
     adcode: 'china',
     showHainanIsLands: true,
--- a/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/AddThreeDimensionalMap/index.vue
View file @1dc4b8e
@@ -41,7 +41,7 @@ const toolBoxOption = ref({
   top: 20,
   feature: {
     myFullButton: {
-      show: true,
+      show: false,
       title: '返回',
       icon: iconStr.value,
       iconStyle: {
@@ -55,8 +55,34 @@ const toolBoxOption = ref({
 watch(
   () => props.chartConfig.option,
   newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
-    toolBoxOption.value.feature.myFullButton.show = drillingIn
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    if (drillingIn && !newData.saveClickRegion.level) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.COUNTRY &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.CITY &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    }
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
@@ -89,6 +115,7 @@ const watchAdcode = async () => {
     }
     const exist = await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
     if (exist) {
       //fix解决点击下钻返回后页面为空问题
       props.chartConfig.option.mapRegion.adcode = adcode
@@ -114,6 +141,7 @@ const handleMap3DClick = async (params: Recordable) => {
         if (level === 'DISTRICT') return
         if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
+        props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({
@@ -215,8 +243,18 @@ onMounted(() => {
 const handleDataPoint = (newData: string | number) => {
   if (newData === 'china') {
     props.chartConfig.option.dataset = dataMaps
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = dataMaps
+      }
+    })
   } else {
     props.chartConfig.option.dataset = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+    props.chartConfig.option.series.forEach((item: Recordable) => {
+      if (item.type === 'scatter3D') {
+        item.data = dataMaps.filter((item: dataPointI) => item.adcode === newData)
+      }
+    })
   }
 }
--- a/src/packages/components/external/Charts/Maps/OverrideMapAmap/config.vue
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/OverrideMapAmap/config.vue
View file @1dc4b8e
@@ -241,7 +241,8 @@ const MarkerOptions = [
   }
 ]
-/**通用函数封装 */
+const iconMarkerValue = ref<string | null>('1.png')
+
 const isHref = (url: string) => {
   try {
     new URL(url)
@@ -250,26 +251,8 @@ const isHref = (url: string) => {
     return false
   }
 }
-const renderCommonOption = (option: SelectOption, src: string) => {
-  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
-    h(NImage, {
-      width: 25,
-      src,
-      previewDisabled: true,
-      style: { height: '25px' }
-    } as Recordable),
-    h(NEllipsis, null, () => option.label)
-  ])
-}
-const getImagePath = (path: string, name: string) => {
-  return isHref(name) ? name : new URL(`${path}/${name}`, import.meta.url).href
-}
-/** */
-
-/** 图标选择 */
-const iconMarkerValue = ref<string | null>('1.png')
-// import.meta.glob 这里没有封装，不能通过传值传进去
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
 const iconMarkerOptions = computed(() => {
   const pathList = import.meta.glob('./images/marker/*')
   return Object.keys(pathList).map(item => {
@@ -277,55 +260,76 @@ const iconMarkerOptions = computed(() => {
     return {
       label: imgName,
       value: imgName
-    }
+    } as SelectOption
   })
 })
 //
-const getMarkerImagePath = (name: string) => getImagePath('./images/marker', name)
+const getMarkerImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`./images/marker/${name}`, import.meta.url).href
+}
-const renderOption = (option: SelectOption) => renderCommonOption(option, getMarkerImagePath(option.value as string))
+const renderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMarkerImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
 const selectHandle = (value: string) => {
   iconMarkerValue.value = value
   props.optionData.mapOptions.iconMarker = getMarkerImagePath(value)
 }
-/** */
-/** 弹窗选择 */
 const mapSelectBorderValue = ref<string | null>('border01.png')
 const needBorder = ['border01.png', 'border02.png', 'border03.png', 'border05.png', 'border07.png']
-// import.meta.glob 这里没有封装，不能通过传值传进去
+// import.meta.glob 这个不能封装，必须是字符串，不能通过传值传进去
 const mapBorderOptions = computed(() => {
   const pathList = import.meta.glob('../../../../../../assets/images/chart/decorates/*')
   return Object.keys(pathList)
     .map(item => {
       const imgName = item.split('/').at(-1) as string
-      if (!needBorder.includes(imgName)) return
-      return {
-        label: imgName,
-        value: imgName
-      } as SelectOption
+      if (needBorder.includes(imgName)) {
+        return {
+          label: imgName,
+          value: imgName
+        } as SelectOption
+      }
     })
     .filter(Boolean) as SelectOption[]
 })
 //
-const getMapBorderImagePath = (name: string) => getImagePath('../../../../../../assets/images/chart/decorates', name)
+const getMapBorderImagePath = (name: string) => {
+  return isHref(name) ? name : new URL(`../../../../../../assets/images/chart/decorates/${name}`, import.meta.url).href
+}
-const renderMapBorderOption = (option: SelectOption) =>
-  renderCommonOption(option, getMapBorderImagePath(option.value as string))
+const renderMapBorderOption = (option: SelectOption) => {
+  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
+    h(NImage, {
+      width: 25,
+      src: getMapBorderImagePath(option.value as string),
+      previewDisabled: true,
+      style: { height: '25px' }
+    } as Recordable),
+    h(NEllipsis, null, () => option.label)
+  ])
+}
 const selectMapBorderHandle = (value: string) => {
   mapSelectBorderValue.value = value
   const toLowerValue = value.toLocaleLowerCase()
   ;(props.optionData.mapOptions.mpBorderConfig as BaseSelectBorderIF) = {
-    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substring(1)?.split('.')[0]
-  } //这里首字母转大写，动态引入时匹配对应目录也是大写字母开头，即components\Decorates\Borders\Border01
+    value: toLowerValue[0]?.toUpperCase() + toLowerValue?.substr(1)?.split('.')[0]
+  }
 }
-/** */
 onMounted(() => {
   iconMarkerValue.value = props.optionData.mapOptions.iconMarker?.split('/')?.at(-1) as string
--- a/src/packages/components/external/Charts/Maps/OverrideMapAmap/index.ts
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/OverrideMapAmap/index.ts
View file @1dc4b8e
@@ -8,7 +8,7 @@ export const OverrideMapAmapConfig: ConfigType = {
   key,
   chartKey,
   conKey,
-  title: '高德地图',
+  title: '设备分布',
   category: ChatCategoryEnum.MAP,
   categoryName: ChatCategoryEnumName.MAP,
   package: PackagesCategoryEnum.CHARTS,
--- a/src/packages/components/external/Charts/Maps/OverrideMapBase/config.ts
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/OverrideMapBase/config.ts
View file @1dc4b8e
@@ -7,11 +7,11 @@ import dataJson from './data.json'
 //省市区枚举
 export const enum areaEnum {
-  PROVINCE = 'PROVINCE',//省份
-  CITY = 'CITY',//城市
-  COUNTY = 'COUNTY',//县
-  COUNTRY = 'COUNTRY',//国家
-  TOWN = 'TOWN'//镇
+  PROVINCE = 'PROVINCE', //省份
+  CITY = 'CITY', //城市
+  COUNTY = 'COUNTY', //县
+  COUNTRY = 'COUNTRY', //国家
+  TOWN = 'TOWN' //镇
 }
 export const includes = []
@@ -22,6 +22,9 @@ export const option = {
   iconDistanceTop: 20,
   drillingIn: false,
   dataset: dataJson,
+  saveClickRegion: {
+    level: ''
+  },
   mapRegion: {
     adcode: 'china',
     showHainanIsLands: true,
--- a/src/packages/components/external/Charts/Maps/OverrideMapBase/index.vue
View file @1dc4b8e
+++ b/src/packages/components/external/Charts/Maps/OverrideMapBase/index.vue
View file @1dc4b8e
@@ -74,7 +74,7 @@ const toolBoxOption = ref({
   top: 20,
   feature: {
     myFullButton: {
-      show: true,
+      show: false,
       title: '返回',
       icon: iconStr.value,
       iconStyle: {
@@ -88,22 +88,49 @@ const toolBoxOption = ref({
 watch(
   () => props.chartConfig.option,
   newData => {
-    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
-    toolBoxOption.value.feature.myFullButton.show = drillingIn
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop, mapRegion } = newData
+    if (drillingIn && !newData.saveClickRegion.level) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.COUNTRY &&
+      mapRegion.saveSelect.levelStr === areaEnum.COUNTRY
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.CITY &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = drillingIn
+    } else if (
+      drillingIn &&
+      newData.saveClickRegion.level === areaEnum.PROVINCE &&
+      mapRegion.saveSelect.levelStr === areaEnum.PROVINCE
+    ) {
+      toolBoxOption.value.feature.myFullButton.show = !drillingIn
+    }
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop
+    vEchartsSetOption()
   },
   {
-    deep: true
+    deep: true,
   }
 )
-
 props.chartConfig.option = {
   ...props.chartConfig.option,
   ...{ toolbox: toolBoxOption.value }
 }
+
 //地图点击返回 adcode=100000,名字必须是china
 const watchAdcode = async () => {
   if (props.chartConfig.option.drillingIn) {
@@ -121,6 +148,7 @@ const watchAdcode = async () => {
     }
     await getGeojson(saveAdcode)
     const adcode = saveAdcode === 100000 ? 'china' : saveAdcode
+    props.chartConfig.option.saveClickRegion.level = saveLevelStr.level
     props.chartConfig.option.geo.map = adcode
     props.chartConfig.option.series.forEach((item: any) => {
       if (item.type === 'map') item.map = adcode
@@ -324,6 +352,7 @@ const handleVChartClick = async (params: any) => {
         if (level === 'DISTRICT') return
         if (String(adcode).startsWith('15') && level === areaEnum.CITY) return
         props.chartConfig.option.mapRegion.adcode = adcode
+        props.chartConfig.option.saveClickRegion.level = level
         saveLevelStr.level = level
         handleDataPoint(adcode)
         saveHistoryParent.value.push({