Merge branch 'ft' into 'main_dev'

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

See merge request yunteng/thingskit-view!109

@@ -3,6 +3,13 @@ import { onMounted, reactive } from 'vue'
 import { getAreaList } from '@/api/external/common/index'
 import { areaEnum } from '../config'
 
+const props = defineProps({
+  drillingIn:{
+    type:Boolean,
+    default:false
+  }
+})
+
 const emits = defineEmits(['submit'])
 
 const selectOptions = reactive({
@@ -12,7 +19,7 @@ const selectOptions = reactive({
 })
 
 const selectValues = reactive({
-  provinceValue: null,
+  provinceValue: 'china',
   cityValue: null,
   countyValue: null
 })
@@ -60,16 +67,19 @@ const onHandleSubmit = () => {
       :options="selectOptions.provinceOptions"
     />
     <n-select
+      v-if="!props.drillingIn"
       @change="onHandleSelectCity"
       placeholder="请选择城市"
       v-model:value="selectValues.cityValue"
       :options="selectOptions.cityOptions"
     />
-    <n-select
+    <!-- 保留待用（下钻到区以下） -->
+    <!-- <n-select
+      v-if="!drillingIn"
       placeholder="请选择区域"
       v-model:value="selectValues.countyValue"
       :options="selectOptions.countryOptions"
-    />
+    /> -->
     <n-button type="primary" @click="onHandleSubmit">确定</n-button>
   </div>
 </template>

@@ -2,18 +2,17 @@
   <!-- Echarts 全局设置 -->
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem name="地图" :expanded="true">
-    <SelectCity @submit="onHandleSelectValues" />
     <SettingItemBox name="开启下钻">
       <SettingItem name="">
         <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="显示返回图标">
+    <SettingItemBox name="返回图标">
       <SettingItem name="">
-        <n-switch v-model:value="optionData.showIcon" size="small"></n-switch>
+        <n-switch v-model:value="optionData.drillingIn" size="small"></n-switch>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="返回图标颜色">
+    <SettingItemBox name="图标颜色">
       <SettingItem name="">
         <n-color-picker
           size="small"
@@ -22,7 +21,7 @@
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-    <SettingItemBox name="返回图标距离">
+    <SettingItemBox name="图标距离">
       <SettingItem name="距右">
         <n-input-number
           v-model:value="optionData.iconDistanceRight"
@@ -40,6 +39,7 @@
         ></n-input-number>
       </SettingItem>
     </SettingItemBox>
+    <SelectCity :drillingIn="optionData.drillingIn" @submit="onHandleSelectValues" />
     <SettingItemBox name="区域颜色">
       <SettingItem name="0%处颜色">
         <n-color-picker

@@ -89,8 +89,8 @@ const toolBoxOption = ref({
 watch(
   () => props.chartConfig.option,
   newData => {
-    const { iconColor, showIcon, iconDistanceRight, iconDistanceTop } = newData
-    toolBoxOption.value.feature.myFullButton.show = showIcon
+    const { iconColor, drillingIn, iconDistanceRight, iconDistanceTop } = newData
+    toolBoxOption.value.feature.myFullButton.show = drillingIn
     toolBoxOption.value.feature.myFullButton.iconStyle.color = iconColor
     toolBoxOption.value.right = iconDistanceRight
     toolBoxOption.value.top = iconDistanceTop

 import { defineStore } from "pinia";
 import { KeyBoundComponentList, SocketComponentRecord, SocketReceiveMessageType, SocketSendMessageItemType, SocketSendMessageType, SocketStoreType, UnsubscribePoolType } from '@/store/external/modules/socketStore.d'
-import { CreateComponentGroupType, CreateComponentType } from "@/packages/index.d";
+import { CreateComponentType } from "@/packages/index.d";
 import { RequestContentTypeEnum } from "@/enums/external/httpEnum";
 import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
 import { pinia } from '@/store'
@@ -8,7 +8,7 @@ import { cloneDeep } from "lodash";
 import { useFilterFn } from "@/hooks/external/useFilterFn";
 
 
-const KEYS_SEPARATOR = ','
+// const KEYS_SEPARATOR = ','
 const chartEditStore = useChartEditStore(pinia)
 export const useSocketStore = defineStore({
   id: 'useSocketStore',
@@ -260,22 +260,28 @@ export const useSocketStore = defineStore({
        * 修改后的代码
        * 修改ws绑定单个文本组件，然后有多个，并且进行分组，显示的信息为原始信息，而非过滤函数返回的信息
        */
-      const target = chartEditStore.getComponentList?.reduce((prev: Array<CreateComponentType | CreateComponentGroupType>, acc) => {
-        acc?.isGroup ? (prev = [...(acc?.groupList as CreateComponentGroupType[])]) : prev?.push(acc)
-        return prev
-      }, [])
-      ?.filter(
-        item => (item?.request?.requestContentType as RequestContentTypeEnum) === RequestContentTypeEnum.WEB_SOCKET
-      )
-     target.forEach(item => {
-      if (item.id === id) {
-        const _value = this.getComponentValueByKeys(item, value)
-        const { filter } = item
-        const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
-        item.option.dataset = flag ? filterValue : reason
+     chartEditStore.getComponentList.forEach(targetItem => {
+      if (targetItem.isGroup) {
+        //分组
+        targetItem.groupList?.forEach(groupItem => {
+          if (groupItem.id === id) {
+              const _value = this.getComponentValueByKeys(groupItem, value)
+              const { filter } = groupItem
+              const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
+              groupItem.option.dataset = flag ? filterValue : reason
+          }
+        })
+      } else {
+         //单个
+        if (targetItem.id === id) {
+          const _value = this.getComponentValueByKeys(targetItem, value)
+              const { filter } = targetItem
+              const { value: filterValue, reason, flag } = useFilterFn(filter, _value)
+              targetItem.option.dataset = flag ? filterValue : reason
+          }
       }
+      //
     })
-    //
     },
 
     /**