Showing
7 changed files
with
65 additions
and
41 deletions
1 | 1 | import { ref, toRefs, toRaw, watch } from 'vue' |
2 | 2 | import type VChart from 'vue-echarts' |
3 | -import { customizeHttp } from '@/api/http' | |
4 | 3 | import { useChartDataPondFetch } from '@/hooks/' |
5 | 4 | import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d' |
6 | 5 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
7 | -import { RequestDataTypeEnum } from '@/enums/httpEnum' | |
8 | -import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' | |
6 | +import { isPreview, intervalUnitHandle } from '@/utils' | |
9 | 7 | import { setOption } from '@/packages/public/chart' |
8 | +import { useChartDataSocket } from './useChartDataSocket' | |
9 | +import { customRequest } from '@/api/external/customRequest' | |
10 | +import { useFilterFn } from './useFilterFn' | |
10 | 11 | |
11 | 12 | // 获取类型 |
12 | 13 | type ChartEditStoreType = typeof useChartEditStore |
... | ... | @@ -52,18 +53,13 @@ export const useChartDataFetch = ( |
52 | 53 | |
53 | 54 | // 目标组件 |
54 | 55 | const { |
55 | - requestDataType, | |
56 | 56 | requestUrl, |
57 | 57 | requestIntervalUnit: targetUnit, |
58 | 58 | requestInterval: targetInterval |
59 | 59 | } = toRefs(targetComponent.request) |
60 | 60 | |
61 | - // 非请求类型 | |
62 | - if (requestDataType.value !== RequestDataTypeEnum.AJAX) return | |
63 | - | |
64 | 61 | try { |
65 | - // 处理地址 | |
66 | - // @ts-ignore | |
62 | + // 处理地址 | |
67 | 63 | if (requestUrl?.value) { |
68 | 64 | // requestOriginUrl 允许为空 |
69 | 65 | const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value |
... | ... | @@ -72,14 +68,15 @@ export const useChartDataFetch = ( |
72 | 68 | clearInterval(fetchInterval) |
73 | 69 | |
74 | 70 | const fetchFn = async () => { |
75 | - const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig)) | |
71 | + const res = await customRequest(toRaw(targetComponent.request)) | |
76 | 72 | if (res) { |
77 | 73 | try { |
78 | 74 | const filter = targetComponent.filter |
79 | - echartsUpdateHandle(newFunctionHandle(res?.data, res, filter)) | |
75 | + const { value } = useFilterFn(filter, res) | |
76 | + echartsUpdateHandle(value) | |
80 | 77 | // 更新回调函数 |
81 | 78 | if (updateCallback) { |
82 | - updateCallback(newFunctionHandle(res?.data, res, filter)) | |
79 | + updateCallback(value) | |
83 | 80 | } |
84 | 81 | } catch (error) { |
85 | 82 | console.error(error) |
... | ... | @@ -113,10 +110,9 @@ export const useChartDataFetch = ( |
113 | 110 | } |
114 | 111 | |
115 | 112 | if (isPreview()) { |
116 | - // 判断是否是数据池类型 | |
117 | - targetComponent.request.requestDataType === RequestDataTypeEnum.Pond | |
118 | - ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) | |
119 | - : requestIntervalFn() | |
113 | + requestIntervalFn() | |
114 | + const { initial } = useChartDataSocket() | |
115 | + initial(targetComponent, useChartEditStore, updateCallback) | |
120 | 116 | } |
121 | 117 | return { vChartRef } |
122 | 118 | } | ... | ... |
... | ... | @@ -7,18 +7,21 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore |
7 | 7 | import { RequestDataTypeEnum } from '@/enums/httpEnum' |
8 | 8 | import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils' |
9 | 9 | import { setOption } from '@/packages/public/chart' |
10 | -import { useChartDataSocket } from './external/useChartDataSocket' | |
10 | + | |
11 | +// THINGS_KIT 重写默认方法 | |
12 | +export { useChartDataFetch } from './external/useChartDataFetch.hook' | |
11 | 13 | |
12 | 14 | // 获取类型 |
13 | 15 | type ChartEditStoreType = typeof useChartEditStore |
14 | 16 | |
17 | +// THINGS_KIT 重命名默认方法 | |
15 | 18 | /** |
16 | 19 | * setdata 数据监听与更改 |
17 | 20 | * @param targetComponent |
18 | 21 | * @param useChartEditStore 若直接引会报错,只能动态传递 |
19 | 22 | * @param updateCallback 自定义更新函数 |
20 | 23 | */ |
21 | -export const useChartDataFetch = ( | |
24 | +export const originUseChartDataFetch = ( | |
22 | 25 | targetComponent: CreateComponentType, |
23 | 26 | useChartEditStore: ChartEditStoreType, |
24 | 27 | updateCallback?: (...args: any) => any |
... | ... | @@ -119,9 +122,5 @@ export const useChartDataFetch = ( |
119 | 122 | ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle) |
120 | 123 | : requestIntervalFn() |
121 | 124 | } |
122 | - | |
123 | - // THINGS_KIT 添加socket支持 | |
124 | - const { initial } = useChartDataSocket() | |
125 | - initial(targetComponent, useChartEditStore, updateCallback) | |
126 | 125 | return { vChartRef } |
127 | 126 | } | ... | ... |
... | ... | @@ -37,7 +37,6 @@ export function createPermissionGuard(router: Router) { |
37 | 37 | } |
38 | 38 | |
39 | 39 | const token = userStore.getJwtToken |
40 | - console.log(token) | |
41 | 40 | |
42 | 41 | if (to.matched.find(item => whitePathList.includes(item.path))) { |
43 | 42 | if (to.path === PageEnum.BASE_LOGIN && token) { | ... | ... |
src/views/chart/ContentConfigurations/components/ChartData/external/components/DynamicForm/index.vue
1 | 1 | <script lang="ts" setup> |
2 | -import { ParamsItemType, PublicInterfaceRecord } from '@/api/external/dynamicRequest/model'; | |
3 | -import { RequestParams } from '@/enums/httpEnum'; | |
4 | -import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect } from 'naive-ui' | |
2 | +import { ParamsItemType } from '@/api/external/dynamicRequest/model'; | |
3 | +import { FormItemInst, NDatePicker, NForm, NFormItem, NInput, NSelect, NTreeSelect, NIcon, NTooltip } from 'naive-ui' | |
5 | 4 | import { computed, nextTick, ref, unref, watch } from 'vue'; |
6 | -import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | |
5 | +import { ComponentType, useDynamicPublicForm } from './useDynamicPublicForm'; | |
6 | +import { Help } from '@vicons/ionicons5' | |
7 | 7 | |
8 | 8 | const props = defineProps<{ |
9 | 9 | paramsItemList: ParamsItemType[] |
... | ... | @@ -16,7 +16,7 @@ const componentMap: { [key in ComponentType]?: any } = { |
16 | 16 | [ComponentType.DATE_PICKER]: NDatePicker |
17 | 17 | } |
18 | 18 | |
19 | -const getParamsItemList = computed(() => { | |
19 | +const getParamsItemList = computed(() => { | |
20 | 20 | return props.paramsItemList |
21 | 21 | }) |
22 | 22 | |
... | ... | @@ -35,7 +35,7 @@ const validate = async () => { |
35 | 35 | return unref(validFlag) |
36 | 36 | } |
37 | 37 | const setConfigurationData = async (params: Recordable) => { |
38 | - await nextTick() | |
38 | + await nextTick() | |
39 | 39 | setDynamicFormValue(params) |
40 | 40 | } |
41 | 41 | |
... | ... | @@ -60,9 +60,36 @@ defineExpose({ |
60 | 60 | <template> |
61 | 61 | <NForm> |
62 | 62 | <template v-for="item in getDynamicFormSchemas" :key="item.key"> |
63 | - <NFormItem ref="dynamicFormItemEl" :required="item.required" :label="item.name" :rule="item.rules"> | |
63 | + <NFormItem ref="dynamicFormItemEl" :required="item.required" :rule="item.rules"> | |
64 | + <template #label> | |
65 | + <div class="label-container"> | |
66 | + <span>{{ item.name }}</span> | |
67 | + <NTooltip v-if="item.name === 'entityType'" trigger="hover"> | |
68 | + <template #trigger> | |
69 | + <NIcon> | |
70 | + <Help /> | |
71 | + </NIcon> | |
72 | + </template> | |
73 | + 请填入DEVICE | |
74 | + </NTooltip> | |
75 | + </div> | |
76 | + </template> | |
64 | 77 | <component :is="componentMap[item.component]" v-bind="item.props" clearable /> |
65 | 78 | </NFormItem> |
66 | 79 | </template> |
67 | 80 | </NForm> |
68 | 81 | </template> |
82 | + | |
83 | +<style scoped lang="scss"> | |
84 | +.label-container { | |
85 | + display: flex; | |
86 | + align-items: center; | |
87 | + cursor: pointer; | |
88 | + gap: 5px; | |
89 | + | |
90 | + i { | |
91 | + border: 1px solid #000; | |
92 | + border-radius: 50%; | |
93 | + } | |
94 | +} | |
95 | +</style> | ... | ... |
... | ... | @@ -54,7 +54,7 @@ const handleFilter = (query: string, option: SelectOption) => { |
54 | 54 | |
55 | 55 | const requestHttpTypeRef = ref<RequestHttpEnum>() |
56 | 56 | |
57 | -const requestIntervalValueRef = ref<number>(30) | |
57 | +const requestIntervalValueRef = ref<undefined | number>(30) | |
58 | 58 | |
59 | 59 | const requestIntervalUnitRef = ref<RequestHttpIntervalEnum>(RequestHttpIntervalEnum.SECOND) |
60 | 60 | |
... | ... | @@ -112,12 +112,14 @@ const getConfigurationData = () => { |
112 | 112 | record.requestParams[RequestParamsTypeEnum.PARAMS] = getDynamicFormValue() |
113 | 113 | record.requestParams[RequestParamsTypeEnum.HEADER] = unref(headerRef) |
114 | 114 | record.requestParams[RequestParamsTypeEnum.BODY] = bodyValue |
115 | + record.requestInterval = unref(requestIntervalValueRef) | |
116 | + record.requestIntervalUnit = unref(requestIntervalUnitRef) | |
115 | 117 | return record |
116 | 118 | } |
117 | 119 | |
118 | 120 | const setConfigurationData = async (request: ExtraRequestConfigType) => { |
119 | 121 | await getPublicInterfaceList() |
120 | - const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType } = request | |
122 | + const { requestDataPondId, requestParams, requestParamsBodyType, requestContentType, requestHttpType, requestIntervalUnit, requestInterval } = request | |
121 | 123 | const { Header } = requestParams |
122 | 124 | selectedPublicInterface.value = requestDataPondId |
123 | 125 | requestContentTypeRef.value = requestContentType |
... | ... | @@ -125,6 +127,8 @@ const setConfigurationData = async (request: ExtraRequestConfigType) => { |
125 | 127 | headerRef.value = Header |
126 | 128 | requestParamsBodyTypeRef.value = requestParamsBodyType |
127 | 129 | requestBodyRef.value = requestParams |
130 | + requestIntervalUnitRef.value = requestIntervalUnit | |
131 | + requestIntervalValueRef.value = requestInterval | |
128 | 132 | await nextTick() |
129 | 133 | setDynamicFormValue(request) |
130 | 134 | } | ... | ... |
... | ... | @@ -124,7 +124,7 @@ const props = withDefaults( |
124 | 124 | maxRow: 50, |
125 | 125 | } |
126 | 126 | ) |
127 | - | |
127 | + | |
128 | 128 | |
129 | 129 | const emit = defineEmits(['update:value']) |
130 | 130 | |
... | ... | @@ -143,7 +143,7 @@ watch( |
143 | 143 | dataSource.value = Object.keys(props.value || {}).map(keyName => ({ ...createNewRow(), keyName, value: Reflect.get(props.value || {}, keyName) })) |
144 | 144 | } else { |
145 | 145 | dataSource.value = [createNewRow()] |
146 | - } | |
146 | + } | |
147 | 147 | }, |
148 | 148 | { |
149 | 149 | immediate: true, |
... | ... | @@ -167,11 +167,11 @@ const handleAddRow = (record: DataSource) => { |
167 | 167 | const handleSubtractRow = (record: DataSource) => { |
168 | 168 | const index = unref(dataSource).findIndex(item => item.id === record.id) |
169 | 169 | if (unref(dataSource).length === 1) { |
170 | - unref(dataSource)[index].keyName = '' | |
171 | - unref(dataSource)[index].value = '' | |
172 | - return | |
170 | + emit('update:value', {}) | |
171 | + } else { | |
172 | + unref(dataSource).splice(index, 1) | |
173 | + emit('update:value', getHeaderConfiguration()) | |
173 | 174 | } |
174 | - unref(dataSource).splice(index, 1) | |
175 | 175 | } |
176 | 176 | |
177 | 177 | |
... | ... | @@ -194,5 +194,5 @@ const getHeaderConfiguration = () => { |
194 | 194 | </script> |
195 | 195 | |
196 | 196 | <template> |
197 | - <NDataTable size="small" :columns="columns" :data="dataSource" max-height="300" /> | |
197 | + <NDataTable size="small" :columns="columns" :row-key="rowData => rowData.id" :data="dataSource" max-height="300" /> | |
198 | 198 | </template> | ... | ... |
... | ... | @@ -69,8 +69,7 @@ const getResult = () => { |
69 | 69 | |
70 | 70 | const handleSaveAction = async () => { |
71 | 71 | if (!(await validate())) return |
72 | - const value = getResult() | |
73 | - console.log(value) | |
72 | + const value = getResult() | |
74 | 73 | if (unref(selectTarget)) { |
75 | 74 | chartEditStore.updateComponentList(chartEditStore.fetchTargetIndex(), { |
76 | 75 | ...unref(selectTarget)!, | ... | ... |