Commit 15d14fe4fd8794c7733312c9cd93ab5a304bb2c8
1 parent
6cfe5ee1
feat(src/views): 输入框和日期联动组件新增支持post
Showing
10 changed files
with
155 additions
and
50 deletions
... | ... | @@ -164,12 +164,17 @@ |
164 | 164 | <template #header> |
165 | 165 | <n-switch v-model:value="yAxis.show" size="small"></n-switch> |
166 | 166 | </template> |
167 | + <setting-item-box name="范围"> | |
168 | + <setting-item name="开启" > | |
169 | + <n-switch v-model:value="yAxis.showRange" size="small"></n-switch> | |
170 | + </setting-item> | |
171 | + </setting-item-box> | |
167 | 172 | <setting-item-box name="范围" v-if="yAxis.showRange"> |
168 | 173 | <setting-item name="最小值" > |
169 | - <n-input-number v-model:value="yAxis.min" size="small" min="0"></n-input-number> | |
174 | + <n-input-number v-model:value="yAxis.minData" size="small" min="0"></n-input-number> | |
170 | 175 | </setting-item> |
171 | 176 | <setting-item name="最大值"> |
172 | - <n-input-number v-model:value="yAxis.max" size="small" min="0"></n-input-number> | |
177 | + <n-input-number v-model:value="yAxis.maxData" size="small" min="0"></n-input-number> | |
173 | 178 | </setting-item> |
174 | 179 | </setting-item-box> |
175 | 180 | <setting-item-box name="单位"> |
... | ... | @@ -418,13 +423,6 @@ const xAxis = computed(() => { |
418 | 423 | }) |
419 | 424 | |
420 | 425 | const yAxis = computed(() => { |
421 | - if((props.optionData?.yAxis as Recordable)){ | |
422 | - if(!(props.optionData?.yAxis as Recordable).showRange) { | |
423 | - //针对横向柱状图和热力图 | |
424 | - Reflect.deleteProperty((props.optionData.yAxis as Recordable),'min'); | |
425 | - Reflect.deleteProperty((props.optionData.yAxis as Recordable),'max'); | |
426 | - } | |
427 | - } | |
428 | 426 | return props.optionData.yAxis |
429 | 427 | }) |
430 | 428 | ... | ... |
... | ... | @@ -12,6 +12,7 @@ import dayjs from 'dayjs' |
12 | 12 | import { RequestDataPondItemType } from '@/store/modules/chartEditStore/chartEditStore.d' |
13 | 13 | import { JSONParse, convertToCascadingData, findItemByLabel } from '@/utils/external/utils' |
14 | 14 | import { CascaderOption } from 'naive-ui' |
15 | +import { useUserStore } from '@/store/external/modules/user' | |
15 | 16 | |
16 | 17 | |
17 | 18 | // 获取类型 |
... | ... | @@ -102,10 +103,11 @@ export const useChartDataFetch = ( |
102 | 103 | (toRaw(targetComponent.request).requestParams.Params.endTs as unknown as number) = endTs as unknown as number |
103 | 104 | } |
104 | 105 | //处理过期 |
106 | + const userStore = useUserStore(); | |
105 | 107 | const findCurrentPond = () => { |
106 | 108 | return chartEditStore.getRequestGlobalConfig.requestDataPond.find((pondItem: RequestDataPondItemType) => |
107 | - pondItem.dataPondId === targetComponent?.request?.requestDataPondId && targetComponent.request.thirdTokenIsExp) | |
108 | - } | |
109 | + pondItem.dataPondId === targetComponent?.request?.requestDataPondId && userStore.getThirdTokenIsExp) | |
110 | + } | |
109 | 111 | const handleExecuteRequest = async () => { |
110 | 112 | try { |
111 | 113 | if(findCurrentPond()?.dataPondRequestConfig?.pondRequestOriginUrl){ |
... | ... | @@ -127,11 +129,11 @@ export const useChartDataFetch = ( |
127 | 129 | console.error(e) |
128 | 130 | } |
129 | 131 | } |
130 | - // 定时时间 | |
131 | - const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value | |
132 | + // 定时时间 | |
133 | + const time = targetInterval && targetInterval.value ? targetInterval.value : pondRequestGlobalInterval?.value?pondRequestGlobalInterval?.value: globalRequestInterval.value | |
132 | 134 | // 单位 |
133 | - const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value | |
134 | - setInterval(handleExecuteRequest, intervalUnitHandle(time, unit)) | |
135 | + const unit = targetInterval && targetInterval.value ? targetUnit.value :pondRequestGlobalIntervalUnit?.value?pondRequestGlobalIntervalUnit?.value: globalUnit.value | |
136 | + setInterval(handleExecuteRequest, intervalUnitHandle(time, (unit as unknown as any))) | |
135 | 137 | // |
136 | 138 | const res = await customRequest(toRaw(targetComponent.request)) |
137 | 139 | if (res) { | ... | ... |
... | ... | @@ -2,8 +2,9 @@ |
2 | 2 | * 重写select下拉框联动 |
3 | 3 | */ |
4 | 4 | import { toRefs } from 'vue' |
5 | -import { CreateComponentType } from '@/packages/index.d' | |
5 | +import { CreateComponentType } from '@/packages/index.d' | |
6 | 6 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
7 | +import { JSONParse } from '@/utils/external/utils' | |
7 | 8 | |
8 | 9 | // 获取类型 |
9 | 10 | type ChartEditStoreType = typeof useChartEditStore |
... | ... | @@ -32,9 +33,19 @@ export const useChartInteract = ( |
32 | 33 | chartEditStore.getComponentList.forEach(targetItem => { |
33 | 34 | if (targetItem.isGroup) { |
34 | 35 | targetItem.groupList?.forEach(groupItem => { |
36 | + let jsonBody: any = null | |
35 | 37 | if (groupItem.id === item.interactComponentId) { |
36 | - const { Params, Header } = toRefs(groupItem.request.requestParams) | |
38 | + const { Params, Header, Body } = toRefs(groupItem.request.requestParams) | |
37 | 39 | Object.keys(item.interactFn).forEach(key => { |
40 | + if (Body.value['json']) { | |
41 | + jsonBody = JSONParse(Body.value['json']) | |
42 | + const splitDaterange = param['daterange'].split('-') | |
43 | + jsonBody[item.interactFn[key][0]] = decodeURIComponent(splitDaterange[0]) | |
44 | + jsonBody[item.interactFn[key][1]] = decodeURIComponent(splitDaterange[1]) | |
45 | + } | |
46 | + if (jsonBody) { | |
47 | + Body.value['json'] = JSON.stringify(jsonBody) | |
48 | + } | |
38 | 49 | if (Params.value[key]) { |
39 | 50 | Params.value[key] = param[item.interactFn[key]] |
40 | 51 | } |
... | ... | @@ -45,9 +56,19 @@ export const useChartInteract = ( |
45 | 56 | } |
46 | 57 | }) |
47 | 58 | } else { |
59 | + let jsonBody: any = null | |
48 | 60 | if (targetItem.id === item.interactComponentId) { |
49 | - const { Params, Header } = toRefs(targetItem.request.requestParams) | |
61 | + const { Params, Header, Body } = toRefs(targetItem.request.requestParams) | |
50 | 62 | Object.keys(item.interactFn).forEach(key => { |
63 | + if (Body.value['json']) { | |
64 | + jsonBody = JSONParse(Body.value['json']) | |
65 | + const splitDaterange = param['daterange'].split('-') | |
66 | + jsonBody[item.interactFn[key][0]] = decodeURIComponent(splitDaterange[0]) | |
67 | + jsonBody[item.interactFn[key][1]] = decodeURIComponent(splitDaterange[1]) | |
68 | + } | |
69 | + if (jsonBody) { | |
70 | + Body.value['json'] = JSON.stringify(jsonBody) | |
71 | + } | |
51 | 72 | if (Params.value[key]) { |
52 | 73 | Params.value[key] = param[item.interactFn[key]] |
53 | 74 | } | ... | ... |
... | ... | @@ -4,6 +4,7 @@ |
4 | 4 | import { toRefs } from 'vue' |
5 | 5 | import { CreateComponentType } from '@/packages/index.d' |
6 | 6 | import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' |
7 | +import { JSONParse } from '@/utils' | |
7 | 8 | |
8 | 9 | // 获取类型 |
9 | 10 | type ChartEditStoreType = typeof useChartEditStore |
... | ... | @@ -33,21 +34,38 @@ export const useChartInteract = ( |
33 | 34 | if (targetItem.isGroup) { |
34 | 35 | targetItem.groupList?.forEach(groupItem => { |
35 | 36 | if (groupItem.id === item.interactComponentId) { |
36 | - const { Params, Header } = toRefs(groupItem.request.requestParams) | |
37 | - Object.keys(item.interactFn).forEach(key => { | |
38 | - Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) | |
39 | - if(Reflect.has(Params.value, 'attrName')) { | |
40 | - Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
41 | - } | |
42 | - if (key in Header.value) { | |
43 | - Header.value[key] = param[item.interactFn[key]] | |
37 | + const { Params, Header, Body } = toRefs(groupItem.request.requestParams) | |
38 | + //特殊处理 只针对两个下拉选择器,一个是产品下拉,一个是设备下拉,选择了产品,设备列表选择值清空 | |
39 | + if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) { | |
40 | + if (window.location.href.includes('preview')) { | |
41 | + if (window.sessionStorage.getItem('deviceProfileSelectStatus') === 'selected') { | |
42 | + targetItem.option.selectValue = "'" | |
44 | 43 | } |
44 | + } | |
45 | + } | |
46 | + // | |
47 | + let jsonBody: any = null | |
48 | + Object.keys(item.interactFn).forEach(key => { | |
49 | + Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) | |
50 | + if (Body.value['json']) { | |
51 | + jsonBody = JSONParse(Body.value['json']) | |
52 | + jsonBody[item.interactFn[key]] = decodeURIComponent(param['data']) | |
53 | + } | |
54 | + if (jsonBody) { | |
55 | + Body.value['json'] = JSON.stringify(jsonBody) | |
56 | + } | |
57 | + if (Reflect.has(Params.value, 'attrName')) { | |
58 | + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
59 | + } | |
60 | + if (key in Header.value) { | |
61 | + Header.value[key] = param[item.interactFn[key]] | |
62 | + } | |
45 | 63 | }) |
46 | 64 | } |
47 | 65 | }) |
48 | 66 | } else { |
49 | 67 | if (targetItem.id === item.interactComponentId) { |
50 | - const { Params, Header } = toRefs(targetItem.request.requestParams) | |
68 | + const { Params, Header, Body } = toRefs(targetItem.request.requestParams) | |
51 | 69 | //特殊处理 只针对两个下拉选择器,一个是产品下拉,一个是设备下拉,选择了产品,设备列表选择值清空 |
52 | 70 | if (targetItem.chartConfig.title.includes('设备列表下拉选择器')) { |
53 | 71 | if (window.location.href.includes('preview')) { |
... | ... | @@ -57,14 +75,22 @@ export const useChartInteract = ( |
57 | 75 | } |
58 | 76 | } |
59 | 77 | // |
78 | + let jsonBody: any = null | |
60 | 79 | Object.keys(item.interactFn).forEach(key => { |
61 | - Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) | |
62 | - if(Reflect.has(Params.value, 'attrName')) { | |
63 | - Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
64 | - } | |
65 | - if (key in Header.value) { | |
66 | - Header.value[key] = param[item.interactFn[key]] | |
67 | - } | |
80 | + Params.value[key] = decodeURIComponent(param[item.interactFn[key]]) | |
81 | + if (Body.value['json']) { | |
82 | + jsonBody = JSONParse(Body.value['json']) | |
83 | + jsonBody[item.interactFn[key]] = decodeURIComponent(param['data']) | |
84 | + } | |
85 | + if (jsonBody) { | |
86 | + Body.value['json'] = JSON.stringify(jsonBody) | |
87 | + } | |
88 | + if (Reflect.has(Params.value, 'attrName')) { | |
89 | + Params.value['attrName'] = attrNames as unknown as string // 修改联动选择,lengend未实时更新 | |
90 | + } | |
91 | + if (key in Header.value) { | |
92 | + Header.value[key] = param[item.interactFn[key]] | |
93 | + } | |
68 | 94 | }) |
69 | 95 | } |
70 | 96 | } | ... | ... |
... | ... | @@ -32,6 +32,7 @@ interface UserState { |
32 | 32 | shareJwtToken?: string; |
33 | 33 | shareRefreshToken?: string; |
34 | 34 | outTarget?: string; |
35 | + thirdTokenIsExp?: boolean; | |
35 | 36 | } |
36 | 37 | |
37 | 38 | const storage = createLocalStorage(); |
... | ... | @@ -57,9 +58,14 @@ export const useUserStore = defineStore({ |
57 | 58 | sessionTimeout: false, |
58 | 59 | // Last fetch time |
59 | 60 | lastUpdateTime: 0, |
61 | + // 用于三方接口Token是否过期 | |
62 | + thirdTokenIsExp: false | |
60 | 63 | }), |
61 | 64 | |
62 | 65 | getters: { |
66 | + getThirdTokenIsExp(): boolean { | |
67 | + return this.thirdTokenIsExp!; | |
68 | + }, | |
63 | 69 | getPlatInfo(): any { |
64 | 70 | return this.platInfo; |
65 | 71 | }, |
... | ... | @@ -87,6 +93,9 @@ export const useUserStore = defineStore({ |
87 | 93 | }, |
88 | 94 | }, |
89 | 95 | actions: { |
96 | + setThirdTokenIsExp(expStatus:boolean) { | |
97 | + this.thirdTokenIsExp = expStatus | |
98 | + }, | |
90 | 99 | setPlatInfo(platInfo: any) { |
91 | 100 | this.platInfo = platInfo; |
92 | 101 | }, | ... | ... |
... | ... | @@ -129,6 +129,9 @@ export class VAxios { |
129 | 129 | const currentTime = (new Date().getTime() + (config.timeout || 0)) / 1000; |
130 | 130 | if (currentTime >= res?.exp) { |
131 | 131 | targetData.value.request.thirdTokenIsExp = true |
132 | + userStore.setThirdTokenIsExp(true) | |
133 | + }else{ | |
134 | + userStore.setThirdTokenIsExp(false) | |
132 | 135 | } |
133 | 136 | } else { |
134 | 137 | //此平台逻辑 | ... | ... |
... | ... | @@ -91,7 +91,7 @@ |
91 | 91 | </setting-item-box> |
92 | 92 | <!-- THINGS_KIT 修改多画布切换相关代码 用于切换画布 --> |
93 | 93 | |
94 | - <setting-item-box v-if="!interactActionsIsPageChange&&fnDimensionsAndSource(item.interactOn).length" name="查询结果" :alone="true"> | |
94 | + <setting-item-box v-if="!interactActionsIsPageChange && fnDimensionsAndSource(item.interactOn, null, null)!.length" name="查询结果" :alone="true"> | |
95 | 95 | <n-table size="small" striped> |
96 | 96 | <thead> |
97 | 97 | <tr> |
... | ... | @@ -99,9 +99,9 @@ |
99 | 99 | </tr> |
100 | 100 | </thead> |
101 | 101 | <tbody> |
102 | - <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn)" :key="index"> | |
103 | - <td>{{ cItem.value }}</td> | |
104 | - <td>{{ cItem.label }}</td> | |
102 | + <tr v-for="(cItem, index) in fnDimensionsAndSource(item.interactOn, null, null)" :key="index"> | |
103 | + <td>{{ cItem?.value }}</td> | |
104 | + <td>{{ cItem?.label }}</td> | |
105 | 105 | </tr> |
106 | 106 | </tbody> |
107 | 107 | </n-table> |
... | ... | @@ -123,8 +123,10 @@ |
123 | 123 | <n-select |
124 | 124 | size="tiny" |
125 | 125 | v-model:value="item.interactFn[ovlKey]" |
126 | - :options="fnDimensionsAndSource(item.interactOn)" | |
126 | + :options="fnDimensionsAndSource(item.interactOn, item.interactComponentId!, requestParamsItem)" | |
127 | 127 | clearable |
128 | + multiple | |
129 | + @update:value="(value: string, options: Recordable[])=>handleSelectInteract(value,options,item.interactOn,requestParamsItem)" | |
128 | 130 | ></n-select> |
129 | 131 | </setting-item> |
130 | 132 | <n-text |
... | ... | @@ -149,13 +151,13 @@ import { RequestParamsTypeEnum, RequestDataTypeEnum } from '@/enums/httpEnum' |
149 | 151 | import { InteractEventOn, COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum' |
150 | 152 | import { icon } from '@/plugins' |
151 | 153 | import noData from '@/assets/images/canvas/noData.png' |
152 | -import { goDialog } from '@/utils' | |
154 | +import { JSONParse, goDialog } from '@/utils' | |
153 | 155 | import { useTargetData } from '../../../hooks/useTargetData.hook' |
154 | 156 | import {PageChartEditStoreType} from '@/store/modules/chartEditStore/chartEditStore.d' |
155 | 157 | |
156 | 158 | const { CloseIcon, AddIcon, HelpOutlineIcon } = icon.ionicons5 |
157 | 159 | const { targetData, chartEditStore } = useTargetData() |
158 | -const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.HEADER] | |
160 | +const requestParamsTypeList = [RequestParamsTypeEnum.PARAMS, RequestParamsTypeEnum.BODY, RequestParamsTypeEnum.HEADER] | |
159 | 161 | |
160 | 162 | |
161 | 163 | // THINGS_KIT 修改多画布切换相关代码 用于切换画布 |
... | ... | @@ -186,19 +188,40 @@ const fnGetRequest = (id: string | undefined, key: RequestParamsTypeEnum) => { |
186 | 188 | const globalConfigPindApr = chartEditStore.getRequestGlobalConfig.requestDataPond.find(item => { |
187 | 189 | return item.dataPondId === id |
188 | 190 | })?.dataPondRequestConfig.requestParams |
189 | - | |
190 | 191 | if (globalConfigPindApr) return globalConfigPindApr[key] |
191 | 192 | return chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)]?.request.requestParams[key] |
192 | 193 | } |
193 | 194 | |
195 | +const handleSelectInteract = (value: string, options: SelectOption[], interactOn: InteractEventOn | undefined, requestParamsItem: RequestParamsTypeEnum | null) => { | |
196 | + console.log(value) | |
197 | + console.log(options) | |
198 | + console.log(interactOn) | |
199 | + console.log(requestParamsItem) | |
200 | + console.log(targetData.value) | |
201 | +} | |
202 | + | |
194 | 203 | // 查询结果 |
195 | -const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined) => { | |
204 | +const fnDimensionsAndSource = (interactOn: InteractEventOn | undefined, id?: string | null, key?: RequestParamsTypeEnum | null) => { | |
196 | 205 | if (!interactOn || !targetData.value.interactActions) return [] |
197 | 206 | const tableData = targetData.value.interactActions.find(item => { |
198 | 207 | return item.interactType === interactOn |
199 | 208 | }) |
200 | - | |
201 | - return tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || [] | |
209 | + // 新增支持Body | |
210 | + let bodyJsonList: SelectOption[]= [] | |
211 | + if (id) { | |
212 | + const { request } = chartEditStore.getComponentList[chartEditStore.fetchTargetIndex(id)] | |
213 | + const { requestParams } = request | |
214 | + const { Body } = requestParams | |
215 | + const { json } = Body | |
216 | + if (!json) return | |
217 | + const jsonDict = JSONParse(json) | |
218 | + if (key === RequestParamsTypeEnum.BODY) { | |
219 | + bodyJsonList = Object.keys(jsonDict)?.map(bodyItem=>({label: bodyItem, value: bodyItem})) | |
220 | + } | |
221 | + } | |
222 | + // | |
223 | + const paramsTableData: SelectOption[] = tableData?.componentEmitEvents[option.value[COMPONENT_INTERACT_EVENT_KET]] || [] | |
224 | + return [...paramsTableData, ...bodyJsonList] as unknown as SelectOption[] | |
202 | 225 | } |
203 | 226 | |
204 | 227 | // 绑定组件列表 |
... | ... | @@ -263,7 +286,6 @@ const fnEventsOptions = (): Array<SelectOption | SelectGroupOption> => { |
263 | 286 | } |
264 | 287 | }) |
265 | 288 | }) |
266 | -console.log(tarArr) | |
267 | 289 | return tarArr |
268 | 290 | } |
269 | 291 | ... | ... |
... | ... | @@ -16,7 +16,32 @@ |
16 | 16 | <script setup lang="ts"> |
17 | 17 | import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting' |
18 | 18 | import { useTargetData } from '../hooks/useTargetData.hook' |
19 | +import { watch } from 'vue' | |
20 | +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' | |
21 | + | |
19 | 22 | const { targetData, chartEditStore } = useTargetData() |
23 | + | |
24 | +watch( | |
25 | + () => targetData.value, | |
26 | + (newValue: CreateComponentType | CreateComponentGroupType) => { | |
27 | + if (!newValue) return | |
28 | + if (!('yAxis' in newValue.option)) return | |
29 | + try { | |
30 | + if (!newValue?.option?.yAxis?.showRange) { | |
31 | + Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'min') | |
32 | + Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'max') | |
33 | + } else { | |
34 | + Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'min', newValue?.option?.yAxis.minData) | |
35 | + Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'max', newValue?.option?.yAxis.maxData) | |
36 | + } | |
37 | + } catch (e) { | |
38 | + console.log('🚀 ~ e:', e) | |
39 | + } | |
40 | + }, | |
41 | + { | |
42 | + deep: true | |
43 | + } | |
44 | +) | |
20 | 45 | </script> |
21 | 46 | |
22 | 47 | <style lang="scss" scoped> | ... | ... |