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)!, | ... | ... |