Merge branch 'ft' into 'main_dev'

feat(src/packages): 修复select和时间联动组件联动图表dataset视图未更新问题

See merge request yunteng/thingskit-view!79

+/**
+ * 重写select下拉框联动
+ */
+import {toRaw, toRefs} from 'vue'
+import {CreateComponentType} from '@/packages/index.d'
+import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import {customRequest} from "@/api/external/customRequest";
+import {useFilterFn} from "@/hooks/external/useFilterFn";
+
+// 获取类型
+type ChartEditStoreType = typeof useChartEditStore
+
+// Params 参数修改触发 api 更新图表请求
+export const useChartInteract = (
+    chartConfig: CreateComponentType,
+    useChartEditStore: ChartEditStoreType,
+    param: { [T: string]: any },
+    interactEventOn: string
+) => {
+    const chartEditStore = useChartEditStore()
+    const {interactEvents} = chartConfig.events
+    const fnOnEvent = interactEvents.filter(item => {
+        return item.interactOn === interactEventOn
+    })
+
+    if (fnOnEvent.length === 0) return
+    fnOnEvent.forEach(async (item) => {
+        const index = chartEditStore.fetchTargetIndex(item.interactComponentId)
+        if (index === -1) return
+        const {Params, Header} = toRefs(chartEditStore.componentList[index].request.requestParams)
+        Object.keys(item.interactFn).forEach(key => {
+            if (Params.value[key]) {
+                Params.value[key] = param[item.interactFn[key]]
+            }
+            if (Header.value[key]) {
+                Header.value[key] = param[item.interactFn[key]]
+            }
+        })
+        const res = await customRequest(toRaw(chartEditStore.componentList[index].request))
+        if (res) {
+            try {
+                const filter = chartEditStore.componentList[index].filter
+                const {value} = useFilterFn(filter, res)
+                if (!value) return
+                chartEditStore.componentList[index].option.dataset = value
+            } finally { 
+                console.log
+            }
+        }
+    })
+}
+
+// 联动事件触发的 type 变更时，清除当前绑定内容
+export const clearInteractEvent = (chartConfig: CreateComponentType) => {
+
+}

 <template>
   <v-chart
-    ref="vChartRef"
-    :init-options="initOptions"
-    :theme="themeColor"
-    :option="option"
-    :manual-update="isPreview()"
-    :update-options="{
+      ref="vChartRef"
+      :init-options="initOptions"
+      :theme="themeColor"
+      :option="option"
+      :manual-update="isPreview()"
+      :update-options="{
       replaceMerge: replaceMergeArr
     }"
-    autoresize
-    @mouseover="handleHighlight"
-    @mouseout="handleDownplay"
+      autoresize
+      @mouseover="handleHighlight"
+      @mouseout="handleDownplay"
   >
   </v-chart>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed, watch, PropType, onMounted } from 'vue'
+import {ref, nextTick, computed, watch, PropType, onMounted} from 'vue'
 import VChart from 'vue-echarts'
-import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
-import { use } from 'echarts/core'
-import { CanvasRenderer } from 'echarts/renderers'
-import { BarChart } from 'echarts/charts'
-import config, { includes, seriesItem } from './config'
-import { mergeTheme } from '@/packages/public/chart'
-import { useChartDataFetch } from '@/hooks'
-import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import {useCanvasInitOptions} from '@/hooks/useCanvasInitOptions.hook'
+import {use} from 'echarts/core'
+import {CanvasRenderer} from 'echarts/renderers'
+import {BarChart} from 'echarts/charts'
+import config, {includes, seriesItem} from './config'
+import {mergeTheme} from '@/packages/public/chart'
+import {useChartDataFetch} from '@/hooks'
+import {CreateComponentType} from '@/packages/index.d'
+import {useChartEditStore} from '@/store/modules/chartEditStore/chartEditStore'
+import {isPreview} from '@/utils'
+import {DatasetComponent, GridComponent, TooltipComponent, LegendComponent} from 'echarts/components'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
-import { useFullScreen } from '../../utls/fullScreen'
+import {useFullScreen} from '../../utls/fullScreen'
 
 const props = defineProps({
   themeSetting: {
@@ -69,7 +69,7 @@ const toolBoxOption = {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const domName = document.getElementById(getEchartDom.id) as HTMLElement
-        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
         useFullScreen(domName, htmlName)
       }
     }
@@ -77,33 +77,33 @@ const toolBoxOption = {
 }
 props.chartConfig.option = {
   ...props.chartConfig.option,
-  ...{ toolbox: toolBoxOption }
+  ...{toolbox: toolBoxOption}
 }
 
 // dataset 无法变更条数的补丁
 watch(
-  () => props.chartConfig.option.dataset,
-  (newData: { dimensions: any }, oldData) => {
-    try {
-      if (!isObject(newData) || !('dimensions' in newData)) return
-      if (Array.isArray(newData?.dimensions)) {
-        const seriesArr = []
-        for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+    () => props.chartConfig.option.dataset,
+    (newData: { dimensions: any }, oldData) => {
+      try {
+        if (!isObject(newData) || !('dimensions' in newData)) return
+        if (Array.isArray(newData?.dimensions)) {
+          const seriesArr = []
+          for (let i = 0; i < newData.dimensions.length - 1; i++) {
+            seriesArr.push(seriesItem)
+          }
+          replaceMergeArr.value = ['series']
+          props.chartConfig.option.series = seriesArr
+          nextTick(() => {
+            replaceMergeArr.value = []
+          })
         }
-        replaceMergeArr.value = ['series']
-        props.chartConfig.option.series = seriesArr
-        nextTick(() => {
-          replaceMergeArr.value = []
-        })
+      } catch (error) {
+        console.log(error)
       }
-    } catch (error) {
-      console.log(error)
+    },
+    {
+      deep: false
     }
-  },
-  {
-    deep: false
-  }
 )
 
 let seriesDataNum = -1
@@ -167,20 +167,31 @@ const handleDownplay = () => {
 }
 
 watch(
-  () => props.chartConfig.option.isCarousel,
-  newData => {
-    if (newData) {
-      addPieInterval(undefined, true)
-      props.chartConfig.option.legend.show = false
-    } else {
-      props.chartConfig.option.legend.show = true
-      clearPieInterval()
+    () => props.chartConfig.option.isCarousel,
+    newData => {
+      if (newData) {
+        addPieInterval(undefined, true)
+        props.chartConfig.option.legend.show = false
+      } else {
+        props.chartConfig.option.legend.show = true
+        clearPieInterval()
+      }
     }
-  }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = (newData: any) => {
+  if (!newData) return
+  vChartRef.value?.clear()
+  vChartRef.value?.setOption({
+    ...option.value,
+    dataset: newData
+  })
+}
+
+const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
   // addPieInterval(newData)
+  updateVChart(newData)
 })
 
 onMounted(() => {

@@ -68,7 +68,7 @@ const toolBoxOption = {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const domName = document.getElementById(getEchartDom.id) as HTMLElement
-        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
         useFullScreen(domName, htmlName)
       }
     }
@@ -177,10 +177,22 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = (newData: any) => {
+  if (!newData) return
+  vChartRef.value?.clear()
+  vChartRef.value?.setOption({
+    ...option.value,
+    dataset: newData
+  })
+}
+
+const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
   // addPieInterval(newData)
+  updateVChart(newData)
 })
 
+
 onMounted(() => {
   seriesDataMaxLength = dataJson.source.length
   if (props.chartConfig.option.isCarousel) {

@@ -62,7 +62,7 @@ const toolBoxOption = {
       onclick: () => {
         const getEchartDom = vChartRef.value?.getDom()
         const domName = document.getElementById(getEchartDom.id) as HTMLElement
-        const htmlName = document.querySelector('html') as HTMLHtmlElement 
+        const htmlName = document.querySelector('html') as HTMLHtmlElement
         useFullScreen(domName, htmlName)
       }
     }
@@ -184,8 +184,19 @@ watch(
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = (newData: any) => {
+  if (!newData) return
+  vChartRef.value?.clear()
+  vChartRef.value?.setOption({
+    ...option.value,
+    dataset: newData
+  })
+}
+
+const {vChartRef} = useChartDataFetch(props.chartConfig, useChartEditStore, (newData) => {
   // addPieInterval(newData)
+  updateVChart(newData)
 })
 
 onMounted(() => {

@@ -14,7 +14,7 @@ import { PropType, toRefs, ref, shallowReactive, watch } from 'vue'
 import dayjs from 'dayjs'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks'
+import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 
@@ -50,9 +50,9 @@ const onChange = (v: number | number[]) => {
       props.chartConfig,
       useChartEditStore,
       {
-        [ComponentInteractParamsEnum.DATE_START]: v[0],
-        [ComponentInteractParamsEnum.DATE_END]: v[1],
-        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0]}-${v[1]}`
+        [ComponentInteractParamsEnum.DATE_START]: v[0] || dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_END]: v[1] || dayjs().valueOf(),
+        [ComponentInteractParamsEnum.DATE_RANGE]: `${v[0] || dayjs().valueOf()}-${v[1] || dayjs().valueOf()}`
       },
       InteractEventOn.CHANGE
     )
@@ -61,7 +61,7 @@ const onChange = (v: number | number[]) => {
     useChartInteract(
       props.chartConfig,
       useChartEditStore,
-      { [ComponentInteractParamsEnum.DATE]: v },
+      { [ComponentInteractParamsEnum.DATE]: v || dayjs().valueOf() },
       InteractEventOn.CHANGE
     )
   }

@@ -12,6 +12,6 @@ export const OverrideInputsTabConfig: ConfigType = {
   category: ChatCategoryEnum.MORE,
   categoryName: ChatCategoryEnumName.MORE,
   package: PackagesCategoryEnum.INFORMATIONS,
-  chartFrame: ChartFrameEnum.STATIC,
+  chartFrame: ChartFrameEnum.COMMON,
   image: 'inputs_tab.png'
 }

@@ -10,7 +10,7 @@ export const option = {
   // 时间组件展示类型，必须和 interactActions 中定义的数据一致
   [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
   // 默认值
-  selectValue: '1',
+  selectValue: [],
   // 暴露配置内容给用户
   dataset: [
     {

@@ -2,7 +2,7 @@
   <collapse-item name="下拉配置" :expanded="true">
     <setting-item-box name="选择项" :alone="true">
       <SettingItem name="选择项">
-        <n-select size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
+        <n-select multiple  size="small" v-model:value="optionData.selectValue" :options="optionData.dataset" />
       </SettingItem>
     </setting-item-box>
     <setting-item-box name="文字颜色" :alone="true">

 <template>
   <n-select
+    multiple
     v-model:value="option.value.selectValue"
     :options="option.value.dataset"
     :style="`width:${w}px;`"
@@ -12,7 +13,7 @@
 import { PropType, toRefs, shallowReactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartInteract } from '@/hooks'
+import { useChartInteract } from '@/hooks/external/useChartSelectInteract.hook'
 import { InteractEventOn } from '@/enums/eventEnum'
 import { ComponentInteractParamsEnum } from './interact'
 
@@ -42,7 +43,7 @@ const option = shallowReactive({
 })
 
 // 监听事件改变
-const onChange = (v: string) => {
+const onChange = (v: string[]) => {
   // 存储到联动数据
   useChartInteract(
     props.chartConfig,