Showing
5 changed files
with
159 additions
and
52 deletions
1 | 1 | import { FormSchema } from '/@/components/Form'; |
2 | 2 | |
3 | 3 | export const scheme: FormSchema[] = [ |
4 | - { | |
5 | - field: 'effectScope', | |
6 | - label: '时间周期', | |
7 | - colProps: { span: 24 }, | |
8 | - component: 'Input', | |
9 | - defaultValue: 'effectScope', | |
10 | - componentProps: { | |
11 | - disabled: true, | |
12 | - }, | |
13 | - }, | |
4 | + // { | |
5 | + // field: 'effectScope', | |
6 | + // label: '时间周期', | |
7 | + // colProps: { span: 24 }, | |
8 | + // component: 'Input', | |
9 | + // defaultValue: 'effectScope', | |
10 | + // componentProps: { | |
11 | + // disabled: true, | |
12 | + // }, | |
13 | + // }, | |
14 | 14 | { |
15 | 15 | field: 'agg', |
16 | 16 | label: '聚合方式', | ... | ... |
... | ... | @@ -14,7 +14,7 @@ |
14 | 14 | </td> |
15 | 15 | <td style="width: 12vw"> |
16 | 16 | <Select |
17 | - :disabled="item.key === 'effectScope,agg,interval' ? true : false" | |
17 | + :disabled="item.key === 'agg,interval' ? true : false" | |
18 | 18 | v-model:value="item.key" |
19 | 19 | placeholder="请选择" |
20 | 20 | :options="selectOptions" |
... | ... | @@ -30,13 +30,9 @@ |
30 | 30 | <span>~</span> |
31 | 31 | <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" /> |
32 | 32 | </div> |
33 | - <div> | |
34 | - <a-checkbox | |
35 | - style="position: relative; left: -3.1vw" | |
36 | - @change="onHandleCheck" | |
37 | - v-model:checked="isDateRange" | |
38 | - >更多选项</a-checkbox | |
39 | - > | |
33 | + <div class="flex mt-2"> | |
34 | + <a-checkbox @change="onHandleCheck" v-model:checked="mores">更多选项</a-checkbox> | |
35 | + <span v-if="mores">{{ `聚合方式:agg` }}</span> | |
40 | 36 | </div> |
41 | 37 | </div> |
42 | 38 | <div v-else> |
... | ... | @@ -97,21 +93,21 @@ |
97 | 93 | |
98 | 94 | const dateRangeSelectRef = ref<InstanceType<typeof DateRangeSelect>>(); |
99 | 95 | |
100 | - const [registerModal, { openModal, closeModal }] = useModal(); | |
96 | + const [registerModal, { closeModal }] = useModal(); | |
101 | 97 | |
102 | - const isDateRange = ref(false); | |
98 | + const mores = ref(false); | |
103 | 99 | |
104 | 100 | const onHandleCheck = ({ target }) => { |
105 | - isDateRange.value = target?.checked; | |
106 | - if (isDateRange.value) { | |
107 | - openModal(true); | |
101 | + mores.value = target?.checked; | |
102 | + if (mores.value) { | |
103 | + // openModal(true); | |
108 | 104 | } |
109 | 105 | }; |
110 | 106 | |
111 | 107 | const handleCancelModal = () => { |
112 | 108 | closeModal(); |
113 | 109 | dateRangeSelectRef.value?.resetValue(); |
114 | - isDateRange.value = false; | |
110 | + mores.value = false; | |
115 | 111 | }; |
116 | 112 | |
117 | 113 | const getDateRangeValue = ref<any>({}); |
... | ... | @@ -202,28 +198,28 @@ |
202 | 198 | return { |
203 | 199 | key: it.key, |
204 | 200 | value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value, |
201 | + mores: it.key === 'date_range' ? mores.value : null, | |
205 | 202 | editDisabled: it.editDisabled, |
206 | 203 | required: it.required, |
207 | 204 | }; |
208 | 205 | }); |
209 | - assemblyData = assemblyData.filter((item) => item.key !== 'effectScope,agg,interval'); | |
210 | - if (getDateRangeValue.value) { | |
211 | - const joinStr = Object.keys(getDateRangeValue.value)?.join(','); | |
212 | - if (isDateRange.value) { | |
213 | - assemblyData.push({ | |
214 | - key: joinStr, | |
215 | - value: '', | |
216 | - isDateRange: isDateRange.value, | |
217 | - }); | |
218 | - } | |
219 | - } | |
206 | + // assemblyData = assemblyData.filter((item) => item.key !== 'agg,interval'); | |
207 | + // if (getDateRangeValue.value) { | |
208 | + // const joinStr = Object.keys(getDateRangeValue.value)?.join(','); | |
209 | + // if (mores.value) { | |
210 | + // assemblyData.push({ | |
211 | + // key: joinStr, | |
212 | + // value: '', | |
213 | + // mores: mores.value, | |
214 | + // }); | |
215 | + // } | |
216 | + // } | |
220 | 217 | return assemblyData; |
221 | 218 | }; |
222 | 219 | |
223 | 220 | //设置数据 |
224 | 221 | const setValue = async (data) => { |
225 | 222 | await nextTick(); |
226 | - console.log(data); | |
227 | 223 | let assemblyData = data.map((it) => { |
228 | 224 | return { |
229 | 225 | key: it.key, |
... | ... | @@ -234,18 +230,15 @@ |
234 | 230 | date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '', |
235 | 231 | }; |
236 | 232 | }); |
237 | - const findIsDateRange = data.find((it) => it?.isDateRange === true); | |
238 | - if (findIsDateRange?.isDateRange) { | |
239 | - isDateRange.value = findIsDateRange?.isDateRange; | |
233 | + const findIsDateRange = data.find((it) => it?.mores === true); | |
234 | + if (findIsDateRange?.mores) { | |
235 | + mores.value = findIsDateRange?.mores; | |
240 | 236 | getDateRangeValue.value = { |
241 | - effectScope: 'effectScope', | |
242 | 237 | agg: 'agg', |
243 | 238 | interval: 'interval', |
244 | 239 | }; |
245 | 240 | } else { |
246 | - assemblyData = assemblyData.filter( | |
247 | - (item) => item?.isDateRange == false || !item?.isDateRange | |
248 | - ); | |
241 | + assemblyData = assemblyData.filter((item) => item?.mores == false || !item?.mores); | |
249 | 242 | } |
250 | 243 | tableArray.content = assemblyData; |
251 | 244 | tableArray.content.forEach(() => { |
... | ... | @@ -255,7 +248,7 @@ |
255 | 248 | |
256 | 249 | //重置数据 |
257 | 250 | const resetValue = () => { |
258 | - isDateRange.value = false; | |
251 | + mores.value = false; | |
259 | 252 | tableArray.content = []; |
260 | 253 | tableArray.content.push({ |
261 | 254 | key: undefined, | ... | ... |
... | ... | @@ -145,12 +145,17 @@ |
145 | 145 | await nextTick(() => { |
146 | 146 | //拆分"xx,xx,xx"多个 |
147 | 147 | const getSingleKey = props.data?.list; |
148 | - const findDateRange = [getSingleKey.find((item) => item?.key == 'effectScope,agg,interval')]; | |
149 | - const getMuteKey = props.data?.list?.filter( | |
150 | - (it: any) => it.key?.split(',').length > 1 && it?.key !== 'effectScope,agg,interval' | |
148 | + let getMuteDateRangeKeys: any = null; | |
149 | + const findDateRange = getSingleKey.find( | |
150 | + (item) => item?.key == 'date_range' && item?.mores === true | |
151 | 151 | ); |
152 | + if (findDateRange) { | |
153 | + getMuteDateRangeKeys = getMultipleKeys([{ key: 'agg', value: '' }]); | |
154 | + } else { | |
155 | + getMuteDateRangeKeys = []; | |
156 | + } | |
157 | + const getMuteKey = props.data?.list?.filter((it: any) => it.key?.split(',').length > 1); | |
152 | 158 | const getMuteKeys = getMultipleKeys(getMuteKey); |
153 | - const getMuteDateRangeKeys = getMultipleKeys(findDateRange); | |
154 | 159 | let mergeKeys = [...getSingleKey, ...getMuteKeys, ...getMuteDateRangeKeys]?.filter( |
155 | 160 | (it: any) => it.key?.split(',').length === 1 |
156 | 161 | ); |
... | ... | @@ -163,6 +168,7 @@ |
163 | 168 | const getTestTableKeyValue = () => { |
164 | 169 | //把日期拆分成多个 |
165 | 170 | const keyValueList: any = []; |
171 | + console.log(testEditCellTableRef.value?.getValue()); | |
166 | 172 | testEditCellTableRef.value?.getValue()?.forEach((item: any) => { |
167 | 173 | const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : []; |
168 | 174 | const splitDateValue = item?.key === 'date_range' ? item?.dateValue : []; |
... | ... | @@ -186,9 +192,12 @@ |
186 | 192 | ? moment(it?.fixed_date_value).valueOf() |
187 | 193 | : it?.value; |
188 | 194 | const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key; |
195 | + const limit = it?.limit; | |
196 | + console.log(limit); | |
189 | 197 | return { |
190 | 198 | key, |
191 | 199 | value, |
200 | + limit, | |
192 | 201 | required: it.required, |
193 | 202 | }; |
194 | 203 | }); |
... | ... | @@ -203,10 +212,19 @@ |
203 | 212 | throw new Error('参数不能为空'); |
204 | 213 | } |
205 | 214 | const params: any = {}; |
206 | - getTable?.map((it) => (params[it.key!] = it.value!)); | |
215 | + getTable?.map((it) => { | |
216 | + console.log(it); | |
217 | + params[it.key!] = it.value!; | |
218 | + if (it.key === 'agg') { | |
219 | + params.limit = it.limit; | |
220 | + } | |
221 | + }); | |
207 | 222 | if (params['keys']) { |
208 | 223 | Reflect.set(params, 'keys', params['keys'].join(',')); |
209 | 224 | } |
225 | + if (params['agg'] !== 'NONE') { | |
226 | + Reflect.set(params, 'limit', null); | |
227 | + } | |
210 | 228 | excuteData.value = { |
211 | 229 | params, |
212 | 230 | token: getToken.value, | ... | ... |
1 | 1 | <!-- eslint-disable vue/valid-v-model --> |
2 | 2 | <template> |
3 | + <!-- {{ tableTestArray.content }} --> | |
3 | 4 | <div class="table-content"> |
4 | 5 | <!-- TODO: 待优化测试表格 --> |
5 | 6 | <table align="center"> |
... | ... | @@ -74,6 +75,9 @@ |
74 | 75 | mode="multiple" |
75 | 76 | allowClear |
76 | 77 | /> |
78 | + <!-- <div v-else-if="item.value === 'NONE'"> | |
79 | + <a-input-number id="inputNumber" v-model:value="item.value" :min="7" :max="5000000" /> | |
80 | + </div> --> | |
77 | 81 | <div v-else-if="item.key === 'date_range'"> |
78 | 82 | <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button> |
79 | 83 | <span>~</span> |
... | ... | @@ -88,6 +92,33 @@ |
88 | 92 | return triggerNode.parentNode; |
89 | 93 | } |
90 | 94 | " |
95 | + v-else-if="item.key === 'agg'" | |
96 | + v-model:value="item.value" | |
97 | + @change="onHandleAgg" | |
98 | + placeholder="请选择" | |
99 | + notFoundContent="请选择" | |
100 | + :options="aggOptions" | |
101 | + allowClear | |
102 | + /> | |
103 | + <Select | |
104 | + :getPopupContainer=" | |
105 | + (triggerNode) => { | |
106 | + return triggerNode.parentNode; | |
107 | + } | |
108 | + " | |
109 | + v-else-if="item.key === 'interval' && item.value !== 'NONE'" | |
110 | + v-model:value="item.value" | |
111 | + placeholder="请选择" | |
112 | + notFoundContent="请选择" | |
113 | + :options="intervalOptions" | |
114 | + allowClear | |
115 | + /> | |
116 | + <Select | |
117 | + :getPopupContainer=" | |
118 | + (triggerNode) => { | |
119 | + return triggerNode.parentNode; | |
120 | + } | |
121 | + " | |
91 | 122 | v-else |
92 | 123 | v-model:value="item.value" |
93 | 124 | placeholder="请选择" |
... | ... | @@ -113,17 +144,27 @@ |
113 | 144 | /> |
114 | 145 | <a-range-picker |
115 | 146 | v-else-if="item.key == 'date_range'" |
116 | - style="width: 6.5vw" | |
147 | + style="width: 10vw" | |
117 | 148 | v-model:value="item.dateValue" |
118 | - :show-time="{ format: 'HH:mm' }" | |
119 | - format="YYYY-MM-DD HH:mm" | |
149 | + :disabled-date="disabledDate" | |
150 | + :show-time="{ format: 'HH:mm:ss' }" | |
151 | + @calendarChange="calendarPriceRangeChange" | |
152 | + @change="changePriceRangeDate" | |
153 | + format="YYYY-MM-DD HH:mm:ss" | |
120 | 154 | :placeholder="['开始', '结束']" |
121 | 155 | /> |
156 | + <a-input-number | |
157 | + v-else-if="item.value == 'NONE'" | |
158 | + v-model:value="item.limit" | |
159 | + :min="7" | |
160 | + :max="50000" | |
161 | + /> | |
122 | 162 | <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" /> |
123 | 163 | </td> |
124 | 164 | </tr> |
125 | 165 | </tbody> |
126 | 166 | </table> |
167 | + <!-- {{ tableTestArray.content }} --> | |
127 | 168 | </div> |
128 | 169 | </template> |
129 | 170 | <script lang="ts" setup name="editCellTable"> |
... | ... | @@ -136,6 +177,10 @@ |
136 | 177 | import { tableItems, selectType } from '../../../types'; |
137 | 178 | import { editTestCellTableTHeadConfig } from '../../../config'; |
138 | 179 | import { QuestionCircleOutlined } from '@ant-design/icons-vue'; |
180 | + import moment from 'moment'; | |
181 | + import { AggregateDataEnum } from '/@/views/report/config/timeConfig'; | |
182 | + import { getPacketIntervalByRange } from '/@/views/device/localtion/cpns/TimePeriodForm/helper'; | |
183 | + import { uniqBy } from 'lodash'; | |
139 | 184 | |
140 | 185 | const props = defineProps({ |
141 | 186 | method: { |
... | ... | @@ -147,6 +192,14 @@ |
147 | 192 | }); |
148 | 193 | |
149 | 194 | onMounted(async () => { |
195 | + aggOptions.value = [ | |
196 | + { label: '最小值', value: AggregateDataEnum.MIN }, | |
197 | + { label: '最大值', value: AggregateDataEnum.MAX }, | |
198 | + { label: '平均值', value: AggregateDataEnum.AVG }, | |
199 | + { label: '求和', value: AggregateDataEnum.SUM }, | |
200 | + { label: '计数', value: AggregateDataEnum.COUNT }, | |
201 | + { label: '空', value: AggregateDataEnum.NONE }, | |
202 | + ]; | |
150 | 203 | const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' }); |
151 | 204 | selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue })); |
152 | 205 | selectOptions.value.push({ |
... | ... | @@ -167,6 +220,10 @@ |
167 | 220 | |
168 | 221 | const attributeOptions = ref<selectType[]>([]); |
169 | 222 | |
223 | + const aggOptions = ref<selectType[]>([]); | |
224 | + | |
225 | + const intervalOptions = ref<selectType[]>([]); | |
226 | + | |
170 | 227 | const treeData = ref([]); |
171 | 228 | |
172 | 229 | const tableTestArray = reactive<{ |
... | ... | @@ -177,12 +234,50 @@ |
177 | 234 | key: undefined, |
178 | 235 | value: undefined, |
179 | 236 | keyValue: null, |
237 | + limit: 7, | |
180 | 238 | editDisabled: false, |
181 | 239 | dateValue: null, |
182 | 240 | }, |
183 | 241 | ], |
184 | 242 | }); |
185 | 243 | |
244 | + const onHandleAgg = (e) => { | |
245 | + if (e === 'NONE') { | |
246 | + tableTestArray.content = tableTestArray.content.filter((item) => item.key !== 'interval'); | |
247 | + } else { | |
248 | + tableTestArray.content.push({ | |
249 | + key: 'interval', | |
250 | + value: '', | |
251 | + }); | |
252 | + tableTestArray.content = uniqBy(tableTestArray.content, 'key'); | |
253 | + } | |
254 | + }; | |
255 | + | |
256 | + const selectPriceDate = ref(''); | |
257 | + | |
258 | + const offsetDays = 86400000 * 365; | |
259 | + | |
260 | + const calendarPriceRangeChange = (date) => { | |
261 | + selectPriceDate.value = date[0]; | |
262 | + intervalOptions.value = getPacketIntervalByRange(date) as any; | |
263 | + }; | |
264 | + | |
265 | + const changePriceRangeDate = () => { | |
266 | + selectPriceDate.value = ''; | |
267 | + }; | |
268 | + | |
269 | + const disabledDate = (current) => { | |
270 | + if (selectPriceDate.value) { | |
271 | + let selectV = moment(selectPriceDate.value, 'YYYY-MM-DD').valueOf(); | |
272 | + return ( | |
273 | + current > moment(new Date(selectV + offsetDays), 'YYYY-MM-DD') || | |
274 | + current < moment(new Date(selectV - offsetDays), 'YYYY-MM-DD') | |
275 | + ); | |
276 | + } else { | |
277 | + return false; | |
278 | + } | |
279 | + }; | |
280 | + | |
186 | 281 | //设置数据 |
187 | 282 | const setTableArray = (data) => { |
188 | 283 | const list = cloneDeep(data); | ... | ... |