diff --git a/src/api/http.ts b/src/api/http.ts
index 33950baa..0d433a73 100644
--- a/src/api/http.ts
+++ b/src/api/http.ts
@@ -163,7 +163,6 @@ export const customizeHttp = (targetParams: RequestConfigType, globalParams: Req
params = translateStr(params)
// form 类型处理
let formData: FormData = new FormData()
- formData.set('default', 'defaultData')
// 类型处理
switch (requestParamsBodyType) {
diff --git a/src/hooks/useChartDataFetch.hook.ts b/src/hooks/useChartDataFetch.hook.ts
index c39cc34e..91271e8d 100644
--- a/src/hooks/useChartDataFetch.hook.ts
+++ b/src/hooks/useChartDataFetch.hook.ts
@@ -90,12 +90,12 @@ export const useChartDataFetch = (
// 普通初始化与组件交互处理监听
watch(
- () => targetComponent.request,
+ () => targetComponent.request.requestParams,
() => {
fetchFn()
},
{
- immediate: true,
+ immediate: false,
deep: true
}
)
@@ -105,7 +105,11 @@ export const useChartDataFetch = (
// 单位
const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
// 开启轮询
- if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+ if (time) {
+ fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
+ } else {
+ fetchFn()
+ }
}
// eslint-disable-next-line no-empty
} catch (error) {
@@ -114,10 +118,11 @@ export const useChartDataFetch = (
}
if (isPreview()) {
- // 判断是否是数据池类型
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
: requestIntervalFn()
+ } else {
+ requestIntervalFn()
}
return { vChartRef }
}
diff --git a/src/hooks/useChartDataPondFetch.hook.ts b/src/hooks/useChartDataPondFetch.hook.ts
index 24ac7660..a506f274 100644
--- a/src/hooks/useChartDataPondFetch.hook.ts
+++ b/src/hooks/useChartDataPondFetch.hook.ts
@@ -1,4 +1,4 @@
-import { toRaw } from 'vue'
+import { toRaw, watch, computed, ComputedRef } from 'vue'
import { customizeHttp } from '@/api/http'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -20,7 +20,7 @@ const mittDataPondMap = new Map<string, DataPondMapType[]>()
// 创建单个数据项轮询接口
const newPondItemInterval = (
requestGlobalConfig: RequestGlobalConfigType,
- requestDataPondItem: RequestDataPondItemType,
+ requestDataPondItem: ComputedRef<RequestDataPondItemType>,
dataPondMapItem?: DataPondMapType[]
) => {
if (!dataPondMapItem) return
@@ -31,8 +31,7 @@ const newPondItemInterval = (
// 请求
const fetchFn = async () => {
try {
- const res = await customizeHttp(toRaw(requestDataPondItem.dataPondRequestConfig), toRaw(requestGlobalConfig))
-
+ const res = await customizeHttp(toRaw(requestDataPondItem.value.dataPondRequestConfig), toRaw(requestGlobalConfig))
if (res) {
try {
// 遍历更新回调函数
@@ -49,19 +48,32 @@ const newPondItemInterval = (
}
}
+ watch(
+ () => requestDataPondItem.value.dataPondRequestConfig.requestParams.Params,
+ () => {
+ fetchFn()
+ },
+ {
+ immediate: false,
+ deep: true
+ }
+ )
+
+
// 立即调用
fetchFn()
- const targetInterval = requestDataPondItem.dataPondRequestConfig.requestInterval
- const targetUnit = requestDataPondItem.dataPondRequestConfig.requestIntervalUnit
+
+ const targetInterval = requestDataPondItem.value.dataPondRequestConfig.requestInterval
+ const targetUnit = requestDataPondItem.value.dataPondRequestConfig.requestIntervalUnit
const globalRequestInterval = requestGlobalConfig.requestInterval
const globalUnit = requestGlobalConfig.requestIntervalUnit
// 定时时间
- const time = targetInterval ? targetInterval : globalRequestInterval
+ const time = targetInterval ? targetInterval : globalRequestInterval
// 单位
- const unit = targetInterval ? targetUnit : globalUnit
+ const unit = targetInterval ? targetUnit : globalUnit
// 开启轮询
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
}
@@ -96,13 +108,16 @@ export const useChartDataPondFetch = () => {
}
// 初始化数据池
- const initDataPond = (requestGlobalConfig: RequestGlobalConfigType) => {
- const { requestDataPond } = requestGlobalConfig
+ const initDataPond = (useChartEditStore: ChartEditStoreType) => {
+ const { requestGlobalConfig } = useChartEditStore()
+ const chartEditStore = useChartEditStore()
// 根据 mapId 查找对应的数据池配置
for (let pondKey of mittDataPondMap.keys()) {
- const requestDataPondItem = requestDataPond.find(item => item.dataPondId === pondKey)
+ const requestDataPondItem = computed(() => {
+ return requestGlobalConfig.requestDataPond.find(item => item.dataPondId === pondKey)
+ }) as ComputedRef<RequestDataPondItemType>
if (requestDataPondItem) {
- newPondItemInterval(requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
+ newPondItemInterval(chartEditStore.requestGlobalConfig, requestDataPondItem, mittDataPondMap.get(pondKey))
}
}
}
diff --git a/src/hooks/useChartInteract.hook.ts b/src/hooks/useChartInteract.hook.ts
index efa2ae73..aa0b1ed6 100644
--- a/src/hooks/useChartInteract.hook.ts
+++ b/src/hooks/useChartInteract.hook.ts
@@ -1,4 +1,5 @@
import { toRefs } from 'vue'
+import { isPreview } from '@/utils'
import { CreateComponentType } from '@/packages/index.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -12,6 +13,7 @@ export const useChartInteract = (
param: { [T: string]: any },
interactEventOn: string
) => {
+ if (!isPreview()) return
const chartEditStore = useChartEditStore()
const { interactEvents } = chartConfig.events
const fnOnEvent = interactEvents.filter(item => {
@@ -20,20 +22,37 @@ export const useChartInteract = (
if (fnOnEvent.length === 0) return
fnOnEvent.forEach(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 globalConfigPindAprndex = chartEditStore.requestGlobalConfig.requestDataPond.findIndex(cItem =>
+ cItem.dataPondId === item.interactComponentId
+ )
+ if (globalConfigPindAprndex !== -1) {
+ const { Params, Header } = toRefs(chartEditStore.requestGlobalConfig.requestDataPond[globalConfigPindAprndex].dataPondRequestConfig.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]]
+ }
+ })
+ } else {
+ 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]]
+ }
+ })
+ }
})
}
-
// 联动事件触发的 type 变更时，清除当前绑定内容
export const clearInteractEvent = (chartConfig: CreateComponentType) => {
diff --git a/src/packages/components/Charts/Pies/PieCircle/config.vue b/src/packages/components/Charts/Pies/PieCircle/config.vue
index a3206946..f343aa23 100644
--- a/src/packages/components/Charts/Pies/PieCircle/config.vue
+++ b/src/packages/components/Charts/Pies/PieCircle/config.vue
@@ -7,6 +7,22 @@
</n-input-number>
</SettingItem>
</SettingItemBox>
+ <!-- 中心标题 -->
+ <SettingItemBox v-if="config.title" name="标题">
+ <SettingItem name="颜色">
+ <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
+ </SettingItem>
+ <SettingItem name="字体大小">
+ <n-input-number
+ v-model:value="config.title.textStyle.fontSize"
+ :min="0"
+ :step="1"
+ size="small"
+ placeholder="字体大小"
+ >
+ </n-input-number>
+ </SettingItem>
+ </SettingItemBox>
<!-- Echarts 全局设置 -->
<SettingItemBox name="进度条">
<SettingItem name="颜色">
@@ -31,24 +47,8 @@
></n-color-picker>
</SettingItem>
</SettingItemBox>
- <!-- 中心标题 -->
- <SettingItemBox v-if="config.title" name="标题">
- <SettingItem name="颜色">
- <n-color-picker size="small" :modes="['hex']" v-model:value="config.title.textStyle.color"></n-color-picker>
- </SettingItem>
- <SettingItem name="字体大小">
- <n-input-number
- v-model:value="config.title.textStyle.fontSize"
- :min="0"
- :step="1"
- size="small"
- placeholder="字体大小"
- >
- </n-input-number>
- </SettingItem>
- </SettingItemBox>
<!-- 其他样式 -->
- <SettingItemBox name="轨道样式">
+ <SettingItemBox name="轨道">
<SettingItem name="颜色">
<n-color-picker size="small" :modes="['hex']" v-model:value="item.data[1].itemStyle.color"></n-color-picker>
</SettingItem>
@@ -69,6 +69,18 @@
v-model:value="item.data[1].itemStyle.shadowColor"
></n-color-picker>
</SettingItem>
+ <SettingItem name="轨道宽度">
+ <n-select
+ v-model:value="item.radius[0]"
+ size="small"
+ :options="[
+ { label: '窄', value: '75%' },
+ { label: '中', value: '60%' },
+ { label: '宽', value: '45%' },
+ { label: '更宽', value: '30%' }
+ ]"
+ />
+ </SettingItem>
</SettingItemBox>
</CollapseItem>
</template>
diff --git a/src/packages/components/Charts/Pies/PieCircle/index.vue b/src/packages/components/Charts/Pies/PieCircle/index.vue
index 26bda2a7..bf6250cd 100644
--- a/src/packages/components/Charts/Pies/PieCircle/index.vue
+++ b/src/packages/components/Charts/Pies/PieCircle/index.vue
@@ -41,7 +41,7 @@ const option = reactive({
const dataHandle = (newData: any) => {
const d = parseFloat(`${newData}`) * 100
let config = props.chartConfig.option
- config.title.text = d.toFixed(2) + '%'
+ config.title.text = `${+d.toFixed(2)}%`
config.series[0].data[0].value[0] = d
config.series[0].data[1].value[0] = 100 - d
option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
@@ -68,7 +68,7 @@ watch(
useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
let d = parseFloat(`${resData}`) * 100
// @ts-ignore
- option.value.title.text = d.toFixed(2) + '%'
+ option.value.title.text = `${+d.toFixed(2)}%`
// @ts-ignore
option.value.series[0].data[0].value[0] = d
// @ts-ignore
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
index b5a74bd4..614b3d15 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventInteraction/index.vue
@@ -58,7 +58,7 @@
<help-outline-icon></help-outline-icon>
</n-icon>
</template>
- <n-text>不支持「静态组件」</n-text>
+ <n-text>不支持「静态组件」支持「组件」「公共APi」</n-text>
</n-tooltip>
</template>
<n-select
@@ -89,7 +89,7 @@
</n-table>
</setting-item-box>
- <n-tag :bordered="false" type="primary"> 关联目标组件请求参数 </n-tag>
+ <n-tag :bordered="false" type="primary"> 关联目标请求参数 </n-tag>
<setting-item-box
:name="requestParamsItem"
@@ -125,7 +125,7 @@ import { VNodeChild, computed } from 'vue'
import { SelectOption, SelectGroupOption } from 'naive-ui'
import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
import { CreateComponentType, CreateComponentGroupType, ChartFrameEnum } from '@/packages/index.d'
-import { RequestParamsTypeEnum } from '@/enums/httpEnum'
+import { RequestParamsTypeEnum, RequestDataTypeEnum } from '@/enums/httpEnum'
import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
import { icon } from '@/plugins'
import noData from '@/assets/images/canvas/noData.png'
@@ -154,6 +154,11 @@ const option = computed(() => {
// 绑定组件数据 request
const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => {
if (!id) return {}
+ const globalConfigPindApr = chartEditStore.requestGlobalConfig.requestDataPond.find(item => {
+ return item.dataPondId === id
+ })?.dataPondRequestConfig.requestParams
+
+ if (globalConfigPindApr) return globalConfigPindApr[key]
return chartEditStore.componentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key]
}
@@ -178,12 +183,10 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
iter: Array<CreateComponentType | CreateComponentGroupType>,
val: CreateComponentType | CreateComponentGroupType
) => {
- if (val.groupList && val.groupList.length > 0) {
- iter.push(val)
- } else {
+ if (!val.groupList && val.request.requestDataType === RequestDataTypeEnum.AJAX && val.request.requestUrl) {
iter.push(val)
}
- return val.groupList ? [...iter, ...fnFlattern(val.groupList)] : iter
+ return val.groupList && val.groupList.length > 0 ? [...iter, ...fnFlattern(val.groupList)] : iter
},
[]
)
@@ -203,18 +206,26 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => {
const mapOptionList = filterOptionList.map(item => ({
id: item.id,
title: item.chartConfig.title,
- disabled: false
+ disabled: false,
+ type: 'componentList'
}))
+ const requestDataPond = chartEditStore.requestGlobalConfig.requestDataPond.map(item => ({
+ id: item.dataPondId,
+ title: item.dataPondName,
+ disabled: false,
+ type: 'requestDataPond'
+ }))
+ const tarArr = requestDataPond.concat(mapOptionList)
targetData.value.events.interactEvents?.forEach(iaItem => {
- mapOptionList.forEach(optionItem => {
+ tarArr.forEach(optionItem => {
if (optionItem.id === iaItem.interactComponentId) {
optionItem.disabled = true
}
})
})
- return mapOptionList
+ return tarArr
}
// 新增模块
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index f685f983..07675175 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -74,7 +74,7 @@ const themeColor = computed(() => {
// 组件渲染结束初始化数据池
clearMittDataPondMap()
onMounted(() => {
- initDataPond(chartEditStore.requestGlobalConfig)
+ initDataPond(useChartEditStore)
})
</script>
diff --git a/types/shims-vue.d.ts b/types/shims-vue.d.ts
index fbfc8922..fa19c5db 100644
--- a/types/shims-vue.d.ts
+++ b/types/shims-vue.d.ts
@@ -5,4 +5,5 @@ declare module '*.vue' {
}
declare module 'lodash/*'
-declare module 'dom-helpers'
\ No newline at end of file
+declare module 'dom-helpers'
+declare module '@iconify/vue'
\ No newline at end of file