简柏林 / thingskit-front · Commits

Commit 7dd3238dad1d201f988276d29b67230eb127cda8

Authored by xp.Huang
1 parent 42fe0cd9

perf: 优化场景联动显示

Inline Side-by-side
Showing 9 changed files with 109 additions and 27 deletions
@@ -471,7 +471,6 @@ export const formSchema: BFormSchema[] = [ @@ -471,7 +471,6 @@ export const formSchema: BFormSchema[] = [
471 dynamicRules: () => { 471 dynamicRules: () => {
472 return [ 472 return [
473 { 473 {
474 - // required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,  
475 required: true, 474 required: true,
476 message: '间隔时间为必填项', 475 message: '间隔时间为必填项',
477 type: 'number', 476 type: 'number',
@@ -479,7 +478,11 @@ export const formSchema: BFormSchema[] = [ @@ -479,7 +478,11 @@ export const formSchema: BFormSchema[] = [
479 ]; 478 ];
480 }, 479 },
481 ifShow({ values }) { 480 ifShow({ values }) {
482 - return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && exectueIsImmed(values.executeWay); 481 + return (
  482 + values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD &&
  483 + exectueIsImmed(values.executeWay) &&
  484 + values[SchemaFiled.DATA_TYPE] !== DataTypeEnum.ORIGINAL
  485 + );
483 }, 486 },
484 componentProps({ formModel, formActionType }) { 487 componentProps({ formModel, formActionType }) {
485 const options = 488 const options =
@@ -34,7 +34,12 @@ @@ -34,7 +34,12 @@
34 @change="(value) => handleChangeChars(value, item.device, item)" 34 @change="(value) => handleChangeChars(value, item.device, item)"
35 v-bind="createPickerSearch()" 35 v-bind="createPickerSearch()"
36 placeholder="请选择设备属性" 36 placeholder="请选择设备属性"
37 - :options="item?.attributes?.map((item1) => ({ label: item1, value: item1 }))" 37 + :options="
  38 + item?.attributes?.map((attrItem: any) => ({
  39 + label: attrItem.label,
  40 + value: attrItem.value,
  41 + }))
  42 + "
38 /> 43 />
39 </div> 44 </div>
40 <div class="w-full h-full flex justify-center items-center"> 45 <div class="w-full h-full flex justify-center items-center">
@@ -64,6 +69,8 @@ @@ -64,6 +69,8 @@
64 import { ExecuteReportRecord } from '/@/api/export/model/exportModel'; 69 import { ExecuteReportRecord } from '/@/api/export/model/exportModel';
65 import { Select, Spin, Empty } from 'ant-design-vue'; 70 import { Select, Spin, Empty } from 'ant-design-vue';
66 import { createPickerSearch } from '/@/utils/pickerSearch'; 71 import { createPickerSearch } from '/@/utils/pickerSearch';
  72 + import { getDeviceDetail } from '/@/api/device/deviceManager';
  73 + import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
67 74
68 interface ResponsData { 75 interface ResponsData {
69 attr: string; 76 attr: string;
@@ -141,20 +148,66 @@ @@ -141,20 +148,66 @@
141 return chartOption; 148 return chartOption;
142 }; 149 };
143 150
  151 + const handleDeviceProfileAttributes = async (entityId: string) => {
  152 + const deviceDetailRes = await getDeviceDetail(entityId);
  153 + const { deviceProfileId } = deviceDetailRes;
  154 + if (!deviceProfileId) return;
  155 + const attributeRes = await getAttribute(deviceProfileId);
  156 + return handleDataFormat(deviceDetailRes, attributeRes);
  157 + };
  158 +
  159 + const handleDataFormat = (deviceDetail: any, attributes: any) => {
  160 + const { name, tbDeviceId } = deviceDetail;
  161 + const attribute = attributes.map((item: any) => ({
  162 + identifier: item.identifier,
  163 + name: item.name,
  164 + detail: item.detail,
  165 + }));
  166 + return {
  167 + name,
  168 + tbDeviceId,
  169 + attribute,
  170 + };
  171 + };
  172 +
144 const [register, { setModalProps }] = useModalInner( 173 const [register, { setModalProps }] = useModalInner(
145 async (data: { record: ExecuteReportRecord }) => { 174 async (data: { record: ExecuteReportRecord }) => {
146 setModalProps({ loading: true }); 175 setModalProps({ loading: true });
147 try { 176 try {
148 currentRecord = data.record; 177 currentRecord = data.record;
149 const deviceInfo = data.record.executeCondition.executeAttributes || []; 178 const deviceInfo = data.record.executeCondition.executeAttributes || [];
150 - chartInstance.value = deviceInfo.map((item) => ({  
151 - ...item,  
152 - active: item.attributes.at(0),  
153 - })); 179 + let attributesList: Recordable[] = [];
  180 + // 处理为物模型里的标识符名
  181 + const reflectDeviceList = deviceInfo.map(async (item) => {
  182 + const { device, attributes } = item as Recordable;
  183 + if (!device) return;
  184 + const thingsModel = (await handleDeviceProfileAttributes(item.device)) as Recordable;
  185 + const { tbDeviceId, attribute } = thingsModel as Recordable;
  186 + if (!tbDeviceId) return;
  187 + if (device === tbDeviceId) {
  188 + attributesList = attributes.reduce((acc, curr) => {
  189 + attribute.forEach((item: Recordable) => {
  190 + if (item.identifier === curr) {
  191 + acc.push({
  192 + label: item.name,
  193 + value: item.identifier,
  194 + });
  195 + }
  196 + });
  197 + return [...acc];
  198 + }, []);
  199 + }
  200 + return {
  201 + ...item,
  202 + active: attributes.at(0),
  203 + attributes: attributesList,
  204 + };
  205 + });
  206 + chartInstance.value = (await Promise.all(reflectDeviceList)) as any as ChartInstance[];
154 for (const item of unref(chartInstance)) { 207 for (const item of unref(chartInstance)) {
155 const { attributes, device } = item; 208 const { attributes, device } = item;
156 209
157 - const keys = attributes.length ? attributes.at(0) : ''; 210 + const keys = attributes.length ? (attributes as any[]).at(0)?.value : '';
158 211
159 const sendParams = { 212 const sendParams = {
160 ...data.record.executeCondition.executeCondition, 213 ...data.record.executeCondition.executeCondition,
@@ -9,6 +9,7 @@ export const formSchemas: FormSchema[] = [ @@ -9,6 +9,7 @@ export const formSchemas: FormSchema[] = [
9 field: CheckExistenceFieldsEnum.MESSAGE_NAMES, 9 field: CheckExistenceFieldsEnum.MESSAGE_NAMES,
10 component: 'Select', 10 component: 'Select',
11 label: CheckExistenceFieldsNameEnum.MESSAGE_NAMES, 11 label: CheckExistenceFieldsNameEnum.MESSAGE_NAMES,
  12 + rules: [{ required: true, type: 'array' }],
12 componentProps: { 13 componentProps: {
13 mode: 'tags', 14 mode: 'tags',
14 open: false, 15 open: false,
@@ -20,6 +21,7 @@ export const formSchemas: FormSchema[] = [ @@ -20,6 +21,7 @@ export const formSchemas: FormSchema[] = [
20 field: CheckExistenceFieldsEnum.METADATA_NAMES, 21 field: CheckExistenceFieldsEnum.METADATA_NAMES,
21 component: 'Select', 22 component: 'Select',
22 label: CheckExistenceFieldsNameEnum.METADATA_NAMES, 23 label: CheckExistenceFieldsNameEnum.METADATA_NAMES,
  24 + rules: [{ required: true, type: 'array' }],
23 componentProps: { 25 componentProps: {
24 mode: 'tags', 26 mode: 'tags',
25 open: false, 27 open: false,
@@ -25,7 +25,7 @@ export const getFormSchemas = (route: RouteLocationNormalizedLoaded): FormSchema @@ -25,7 +25,7 @@ export const getFormSchemas = (route: RouteLocationNormalizedLoaded): FormSchema
25 component: 'ApiSearchSelect', 25 component: 'ApiSearchSelect',
26 componentProps: () => { 26 componentProps: () => {
27 return { 27 return {
28 - placeholder: '请选择所属产品', 28 + placeholder: '请选择规则链',
29 showSearch: true, 29 showSearch: true,
30 params: { 30 params: {
31 pageSize: 50, 31 pageSize: 50,
@@ -62,7 +62,7 @@ export const formSchemas: FormSchema[] = [ @@ -62,7 +62,7 @@ export const formSchemas: FormSchema[] = [
62 { 62 {
63 field: FormFieldsEnum.STATUS, 63 field: FormFieldsEnum.STATUS,
64 label: '状态', 64 label: '状态',
65 - component: 'Input', 65 + component: 'Select',
66 componentProps: { 66 componentProps: {
67 options: Object.keys(StatusEnum).map((value) => ({ label: StatusNameEnum[value], value })), 67 options: Object.keys(StatusEnum).map((value) => ({ label: StatusNameEnum[value], value })),
68 allowClear: true, 68 allowClear: true,
@@ -13,23 +13,26 @@ @@ -13,23 +13,26 @@
13 <template v-for="(item, optionIndex) in options" :key="item.flag"> 13 <template v-for="(item, optionIndex) in options" :key="item.flag">
14 <div :class="optionIndex >= 1 ? 'mt-4' : ''" class="flex"> 14 <div :class="optionIndex >= 1 ? 'mt-4' : ''" class="flex">
15 <div class="ml-4 mr-4 flex items-center"> 15 <div class="ml-4 mr-4 flex items-center">
16 - <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox> 16 + <Checkbox v-model:checked="item.enabled" :disabled="modalStatus"
  17 + >星期{{ item.flag }}</Checkbox
  18 + >
17 </div> 19 </div>
18 <TimePicker 20 <TimePicker
19 placeholder="开始时间" 21 placeholder="开始时间"
20 v-model:value="item.startsOn" 22 v-model:value="item.startsOn"
21 value-format="x" 23 value-format="x"
22 format="HH:mm" 24 format="HH:mm"
23 - :disabled="!item.enabled" 25 + @change="handleBlur(item.startsOn, item.endsOn, item)"
  26 + :disabled="!item.enabled || modalStatus"
24 /> 27 />
25 <span class="ml-4 mr-4 flex items-center">~</span> 28 <span class="ml-4 mr-4 flex items-center">~</span>
26 <TimePicker 29 <TimePicker
27 - @change="handleBlur(item.startsOn, item.endsOn)" 30 + @change="handleBlur(item.startsOn, item.endsOn, item)"
28 placeholder="结束时间" 31 placeholder="结束时间"
29 v-model:value="item.endsOn" 32 v-model:value="item.endsOn"
30 value-format="x" 33 value-format="x"
31 format="HH:mm" 34 format="HH:mm"
32 - :disabled="!item.enabled" 35 + :disabled="!item.enabled || modalStatus"
33 /> 36 />
34 </div> 37 </div>
35 </template> 38 </template>
@@ -40,6 +43,8 @@ @@ -40,6 +43,8 @@
40 v-model:value="timeState.startsOn" 43 v-model:value="timeState.startsOn"
41 value-format="x" 44 value-format="x"
42 format="HH:mm" 45 format="HH:mm"
  46 + :disabled="modalStatus"
  47 + @change="handleTimeBlur(timeState.startsOn, timeState.endsOn)"
43 /> 48 />
44 <span class="ml-4 mr-4">~</span> 49 <span class="ml-4 mr-4">~</span>
45 <TimePicker 50 <TimePicker
@@ -48,6 +53,7 @@ @@ -48,6 +53,7 @@
48 v-model:value="timeState.endsOn" 53 v-model:value="timeState.endsOn"
49 value-format="x" 54 value-format="x"
50 format="HH:mm" 55 format="HH:mm"
  56 + :disabled="modalStatus"
51 /> 57 />
52 </template> 58 </template>
53 </BasicForm> 59 </BasicForm>
@@ -55,7 +61,7 @@ @@ -55,7 +61,7 @@
55 </template> 61 </template>
56 62
57 <script lang="ts" setup> 63 <script lang="ts" setup>
58 - import { reactive, ref, watch, nextTick } from 'vue'; 64 + import { reactive, ref, watch, nextTick, unref } from 'vue';
59 import { useModalInner, BasicModal } from '/@/components/Modal'; 65 import { useModalInner, BasicModal } from '/@/components/Modal';
60 import { BasicForm, useForm } from '/@/components/Form'; 66 import { BasicForm, useForm } from '/@/components/Form';
61 import { alarmScheduleSchemas } from '../config/config.data'; 67 import { alarmScheduleSchemas } from '../config/config.data';
@@ -66,7 +72,7 @@ @@ -66,7 +72,7 @@
66 const title = ref(''); 72 const title = ref('');
67 const isUpdateFlag = ref(false); 73 const isUpdateFlag = ref(false);
68 const { createMessage } = useMessage(); 74 const { createMessage } = useMessage();
69 - const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({ 75 + const [registerForm, { setFieldsValue, getFieldsValue, setProps }] = useForm({
70 showActionButtonGroup: false, 76 showActionButtonGroup: false,
71 schemas: alarmScheduleSchemas, 77 schemas: alarmScheduleSchemas,
72 }); 78 });
@@ -143,7 +149,7 @@ @@ -143,7 +149,7 @@
143 nextTick(() => { 149 nextTick(() => {
144 setModalProps({ 150 setModalProps({
145 okButtonProps: { 151 okButtonProps: {
146 - disabled: flag, 152 + disabled: flag || unref(modalStatus),
147 }, 153 },
148 }); 154 });
149 }); 155 });
@@ -153,6 +159,7 @@ @@ -153,6 +159,7 @@
153 } 159 }
154 ); 160 );
155 161
  162 + const modalStatus = ref(false);
156 const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => { 163 const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
157 watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => { 164 watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
158 setModalProps({ 165 setModalProps({
@@ -160,7 +167,8 @@ @@ -160,7 +167,8 @@
160 disabled: 167 disabled:
161 timeState.startsOn === null || 168 timeState.startsOn === null ||
162 timeState.endsOn === null || 169 timeState.endsOn === null ||
163 - !formModel.daysOfWeek?.length, 170 + !formModel.daysOfWeek?.length ||
  171 + unref(modalStatus),
164 }, 172 },
165 }); 173 });
166 watch( 174 watch(
@@ -171,7 +179,7 @@ @@ -171,7 +179,7 @@
171 } 179 }
172 ); 180 );
173 }); 181 });
174 - const { value, currentIndex, isUpdate, scheduleData } = data; 182 + const { value, currentIndex, isUpdate, scheduleData, disabled } = data;
175 isUpdateFlag.value = isUpdate; 183 isUpdateFlag.value = isUpdate;
176 if (value === 'SPECIFIC_TIME') { 184 if (value === 'SPECIFIC_TIME') {
177 title.value = '定时启用'; 185 title.value = '定时启用';
@@ -179,6 +187,16 @@ @@ -179,6 +187,16 @@
179 title.value = '自定义启用'; 187 title.value = '自定义启用';
180 } 188 }
181 189
  190 + if (disabled) {
  191 + modalStatus.value = disabled;
  192 + setProps({ disabled });
  193 + setModalProps({
  194 + okButtonProps: {
  195 + disabled,
  196 + },
  197 + });
  198 + }
  199 +
182 index.value = currentIndex; 200 index.value = currentIndex;
183 const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime()); 201 const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
184 // 编辑 202 // 编辑
@@ -211,13 +229,15 @@ @@ -211,13 +229,15 @@
211 const scheduleData = ref({ 229 const scheduleData = ref({
212 type: 'ANY_TIME', 230 type: 'ANY_TIME',
213 }); 231 });
214 - const handleBlur = (eS, eE) => {  
215 - if (eS > eE) { 232 + const handleBlur = (eS, eE, item: Recordable) => {
  233 + if (eS && eE && eS > eE) {
  234 + item?.endsOn && (item.endsOn = null);
216 return createMessage.warn('开始时间不能大于结束时间'); 235 return createMessage.warn('开始时间不能大于结束时间');
217 } 236 }
218 }; 237 };
219 const handleTimeBlur = (eS, eE) => { 238 const handleTimeBlur = (eS, eE) => {
220 - if (eS > eE) { 239 + if (eS && eE && eS > eE) {
  240 + timeState.endsOn = null;
221 return createMessage.warn('开始时间不能大于结束时间'); 241 return createMessage.warn('开始时间不能大于结束时间');
222 } 242 }
223 }; 243 };
@@ -147,22 +147,24 @@ @@ -147,22 +147,24 @@
147 const currentIndex = ref(0); 147 const currentIndex = ref(0);
148 const [registerModal, { openModal }] = useModal(); 148 const [registerModal, { openModal }] = useModal();
149 const handleScheduleChange = (value) => { 149 const handleScheduleChange = (value) => {
150 - if (unref(disabled)) return; 150 + // if (unref(disabled)) return;
151 const index = scheduleOptions.findIndex((item) => item.value === value); 151 const index = scheduleOptions.findIndex((item) => item.value === value);
152 // 报警日程弹窗 152 // 报警日程弹窗
153 if (index !== 0) { 153 if (index !== 0) {
  154 + if (unref(disabled) && unref(currentIndex) !== index) return;
154 openModal(true, { 155 openModal(true, {
155 isUpdate: isUpdate.value, 156 isUpdate: isUpdate.value,
156 value, 157 value,
157 currentIndex: currentIndex.value, 158 currentIndex: currentIndex.value,
158 scheduleData, 159 scheduleData,
  160 + disabled: unref(disabled),
159 }); 161 });
160 } else { 162 } else {
161 alarmScheduleRef.value.scheduleData = { 163 alarmScheduleRef.value.scheduleData = {
162 type: value, 164 type: value,
163 }; 165 };
164 } 166 }
165 - currentIndex.value = index; 167 + if (!unref(disabled)) currentIndex.value = index;
166 }; 168 };
167 const handleCancel = (index) => { 169 const handleCancel = (index) => {
168 currentIndex.value = index; 170 currentIndex.value = index;
@@ -30,7 +30,7 @@ @@ -30,7 +30,7 @@
30 class="mt-4 mr-2" 30 class="mt-4 mr-2"
31 @click="preView" 31 @click="preView"
32 v-if="isPreview" 32 v-if="isPreview"
33 - >保存</a-button 33 + >添加</a-button
34 > 34 >
35 </div> 35 </div>
36 </div> 36 </div>
@@ -199,22 +199,24 @@ @@ -199,22 +199,24 @@
199 const [registerModal, { openModal }] = useModal(); 199 const [registerModal, { openModal }] = useModal();
200 const currentIndex = ref(0); 200 const currentIndex = ref(0);
201 const handleScheduleChange = (value) => { 201 const handleScheduleChange = (value) => {
202 - if (unref(disabled)) return; 202 + // if (unref(disabled)) return;
203 const index = scheduleOptions.findIndex((item) => item.value === value); 203 const index = scheduleOptions.findIndex((item) => item.value === value);
204 // 报警日程弹窗 204 // 报警日程弹窗
205 if (index !== 0) { 205 if (index !== 0) {
  206 + if (unref(disabled) && unref(currentIndex) !== index) return;
206 openModal(true, { 207 openModal(true, {
207 isUpdate: isUpdate.value, 208 isUpdate: isUpdate.value,
208 value, 209 value,
209 currentIndex: currentIndex.value, 210 currentIndex: currentIndex.value,
210 scheduleData, 211 scheduleData,
  212 + disabled: unref(disabled),
211 }); 213 });
212 } else { 214 } else {
213 alarmScheduleRef.value.scheduleData = { 215 alarmScheduleRef.value.scheduleData = {
214 type: value, 216 type: value,
215 }; 217 };
216 } 218 }
217 - currentIndex.value = index; 219 + if (!unref(disabled)) currentIndex.value = index;
218 }; 220 };
219 const handleCancel = (index) => { 221 const handleCancel = (index) => {
220 currentIndex.value = index; 222 currentIndex.value = index;