简柏林 / thingskit-front · Commits

Commit e570aa3d3358f3e21aeb7c1904f99fbf6960f111

Authored by fengwotao
1 parent d15cd7f7

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

Inline Side-by-side
Showing 5 changed files with 159 additions and 52 deletions
1 import { FormSchema } from '/@/components/Form'; 1 import { FormSchema } from '/@/components/Form';
2 2
3 export const scheme: FormSchema[] = [ 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 field: 'agg', 15 field: 'agg',
16 label: '聚合方式', 16 label: '聚合方式',
@@ -14,7 +14,7 @@ @@ -14,7 +14,7 @@
14 </td> 14 </td>
15 <td style="width: 12vw"> 15 <td style="width: 12vw">
16 <Select 16 <Select
17 - :disabled="item.key === 'effectScope,agg,interval' ? true : false" 17 + :disabled="item.key === 'agg,interval' ? true : false"
18 v-model:value="item.key" 18 v-model:value="item.key"
19 placeholder="请选择" 19 placeholder="请选择"
20 :options="selectOptions" 20 :options="selectOptions"
@@ -30,13 +30,9 @@ @@ -30,13 +30,9 @@
30 <span>~</span> 30 <span>~</span>
31 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" /> 31 <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
32 </div> 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 </div> 36 </div>
41 </div> 37 </div>
42 <div v-else> 38 <div v-else>
@@ -97,21 +93,21 @@ @@ -97,21 +93,21 @@
97 93
98 const dateRangeSelectRef = ref<InstanceType<typeof DateRangeSelect>>(); 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 const onHandleCheck = ({ target }) => { 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 const handleCancelModal = () => { 107 const handleCancelModal = () => {
112 closeModal(); 108 closeModal();
113 dateRangeSelectRef.value?.resetValue(); 109 dateRangeSelectRef.value?.resetValue();
114 - isDateRange.value = false; 110 + mores.value = false;
115 }; 111 };
116 112
117 const getDateRangeValue = ref<any>({}); 113 const getDateRangeValue = ref<any>({});
@@ -202,28 +198,28 @@ @@ -202,28 +198,28 @@
202 return { 198 return {
203 key: it.key, 199 key: it.key,
204 value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value, 200 value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
  201 + mores: it.key === 'date_range' ? mores.value : null,
205 editDisabled: it.editDisabled, 202 editDisabled: it.editDisabled,
206 required: it.required, 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 return assemblyData; 217 return assemblyData;
221 }; 218 };
222 219
223 //设置数据 220 //设置数据
224 const setValue = async (data) => { 221 const setValue = async (data) => {
225 await nextTick(); 222 await nextTick();
226 - console.log(data);  
227 let assemblyData = data.map((it) => { 223 let assemblyData = data.map((it) => {
228 return { 224 return {
229 key: it.key, 225 key: it.key,
@@ -234,18 +230,15 @@ @@ -234,18 +230,15 @@
234 date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '', 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 getDateRangeValue.value = { 236 getDateRangeValue.value = {
241 - effectScope: 'effectScope',  
242 agg: 'agg', 237 agg: 'agg',
243 interval: 'interval', 238 interval: 'interval',
244 }; 239 };
245 } else { 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 tableArray.content = assemblyData; 243 tableArray.content = assemblyData;
251 tableArray.content.forEach(() => { 244 tableArray.content.forEach(() => {
@@ -255,7 +248,7 @@ @@ -255,7 +248,7 @@
255 248
256 //重置数据 249 //重置数据
257 const resetValue = () => { 250 const resetValue = () => {
258 - isDateRange.value = false; 251 + mores.value = false;
259 tableArray.content = []; 252 tableArray.content = [];
260 tableArray.content.push({ 253 tableArray.content.push({
261 key: undefined, 254 key: undefined,
@@ -145,12 +145,17 @@ @@ -145,12 +145,17 @@
145 await nextTick(() => { 145 await nextTick(() => {
146 //拆分"xx,xx,xx"多个 146 //拆分"xx,xx,xx"多个
147 const getSingleKey = props.data?.list; 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 const getMuteKeys = getMultipleKeys(getMuteKey); 158 const getMuteKeys = getMultipleKeys(getMuteKey);
153 - const getMuteDateRangeKeys = getMultipleKeys(findDateRange);  
154 let mergeKeys = [...getSingleKey, ...getMuteKeys, ...getMuteDateRangeKeys]?.filter( 159 let mergeKeys = [...getSingleKey, ...getMuteKeys, ...getMuteDateRangeKeys]?.filter(
155 (it: any) => it.key?.split(',').length === 1 160 (it: any) => it.key?.split(',').length === 1
156 ); 161 );
@@ -163,6 +168,7 @@ @@ -163,6 +168,7 @@
163 const getTestTableKeyValue = () => { 168 const getTestTableKeyValue = () => {
164 //把日期拆分成多个 169 //把日期拆分成多个
165 const keyValueList: any = []; 170 const keyValueList: any = [];
  171 + console.log(testEditCellTableRef.value?.getValue());
166 testEditCellTableRef.value?.getValue()?.forEach((item: any) => { 172 testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
167 const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : []; 173 const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
168 const splitDateValue = item?.key === 'date_range' ? item?.dateValue : []; 174 const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
@@ -186,9 +192,12 @@ @@ -186,9 +192,12 @@
186 ? moment(it?.fixed_date_value).valueOf() 192 ? moment(it?.fixed_date_value).valueOf()
187 : it?.value; 193 : it?.value;
188 const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key; 194 const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
  195 + const limit = it?.limit;
  196 + console.log(limit);
189 return { 197 return {
190 key, 198 key,
191 value, 199 value,
  200 + limit,
192 required: it.required, 201 required: it.required,
193 }; 202 };
194 }); 203 });
@@ -203,10 +212,19 @@ @@ -203,10 +212,19 @@
203 throw new Error('参数不能为空'); 212 throw new Error('参数不能为空');
204 } 213 }
205 const params: any = {}; 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 if (params['keys']) { 222 if (params['keys']) {
208 Reflect.set(params, 'keys', params['keys'].join(',')); 223 Reflect.set(params, 'keys', params['keys'].join(','));
209 } 224 }
  225 + if (params['agg'] !== 'NONE') {
  226 + Reflect.set(params, 'limit', null);
  227 + }
210 excuteData.value = { 228 excuteData.value = {
211 params, 229 params,
212 token: getToken.value, 230 token: getToken.value,
1 <!-- eslint-disable vue/valid-v-model --> 1 <!-- eslint-disable vue/valid-v-model -->
2 <template> 2 <template>
  3 + <!-- {{ tableTestArray.content }} -->
3 <div class="table-content"> 4 <div class="table-content">
4 <!-- TODO: 待优化测试表格 --> 5 <!-- TODO: 待优化测试表格 -->
5 <table align="center"> 6 <table align="center">
@@ -74,6 +75,9 @@ @@ -74,6 +75,9 @@
74 mode="multiple" 75 mode="multiple"
75 allowClear 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 <div v-else-if="item.key === 'date_range'"> 81 <div v-else-if="item.key === 'date_range'">
78 <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button> 82 <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
79 <span>~</span> 83 <span>~</span>
@@ -88,6 +92,33 @@ @@ -88,6 +92,33 @@
88 return triggerNode.parentNode; 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 v-else 122 v-else
92 v-model:value="item.value" 123 v-model:value="item.value"
93 placeholder="请选择" 124 placeholder="请选择"
@@ -113,17 +144,27 @@ @@ -113,17 +144,27 @@
113 /> 144 />
114 <a-range-picker 145 <a-range-picker
115 v-else-if="item.key == 'date_range'" 146 v-else-if="item.key == 'date_range'"
116 - style="width: 6.5vw" 147 + style="width: 10vw"
117 v-model:value="item.dateValue" 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 :placeholder="['开始', '结束']" 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 <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" /> 162 <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" />
123 </td> 163 </td>
124 </tr> 164 </tr>
125 </tbody> 165 </tbody>
126 </table> 166 </table>
  167 + <!-- {{ tableTestArray.content }} -->
127 </div> 168 </div>
128 </template> 169 </template>
129 <script lang="ts" setup name="editCellTable"> 170 <script lang="ts" setup name="editCellTable">
@@ -136,6 +177,10 @@ @@ -136,6 +177,10 @@
136 import { tableItems, selectType } from '../../../types'; 177 import { tableItems, selectType } from '../../../types';
137 import { editTestCellTableTHeadConfig } from '../../../config'; 178 import { editTestCellTableTHeadConfig } from '../../../config';
138 import { QuestionCircleOutlined } from '@ant-design/icons-vue'; 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 const props = defineProps({ 185 const props = defineProps({
141 method: { 186 method: {
@@ -147,6 +192,14 @@ @@ -147,6 +192,14 @@
147 }); 192 });
148 193
149 onMounted(async () => { 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 const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' }); 203 const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
151 selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue })); 204 selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
152 selectOptions.value.push({ 205 selectOptions.value.push({
@@ -167,6 +220,10 @@ @@ -167,6 +220,10 @@
167 220
168 const attributeOptions = ref<selectType[]>([]); 221 const attributeOptions = ref<selectType[]>([]);
169 222
  223 + const aggOptions = ref<selectType[]>([]);
  224 +
  225 + const intervalOptions = ref<selectType[]>([]);
  226 +
170 const treeData = ref([]); 227 const treeData = ref([]);
171 228
172 const tableTestArray = reactive<{ 229 const tableTestArray = reactive<{
@@ -177,12 +234,50 @@ @@ -177,12 +234,50 @@
177 key: undefined, 234 key: undefined,
178 value: undefined, 235 value: undefined,
179 keyValue: null, 236 keyValue: null,
  237 + limit: 7,
180 editDisabled: false, 238 editDisabled: false,
181 dateValue: null, 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 const setTableArray = (data) => { 282 const setTableArray = (data) => {
188 const list = cloneDeep(data); 283 const list = cloneDeep(data);
@@ -15,6 +15,7 @@ export type tableItems = { @@ -15,6 +15,7 @@ export type tableItems = {
15 editDisabled?: boolean; 15 editDisabled?: boolean;
16 required?: boolean; 16 required?: boolean;
17 data_range_select?: boolean; 17 data_range_select?: boolean;
  18 + limit?: number;
18 isDateRange?: boolean; 19 isDateRange?: boolean;
19 date1?: string; 20 date1?: string;
20 date2?: string; 21 date2?: string;