Commit e570aa3d3358f3e21aeb7c1904f99fbf6960f111

Authored by fengwotao
1 parent d15cd7f7

feat: 公共接口管理新增聚合和最大条数

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);
... ...
... ... @@ -15,6 +15,7 @@ export type tableItems = {
15 15 editDisabled?: boolean;
16 16 required?: boolean;
17 17 data_range_select?: boolean;
  18 + limit?: number;
18 19 isDateRange?: boolean;
19 20 date1?: string;
20 21 date2?: string;
... ...