简柏林 / thingskit-front · Commits

Commit afb14a27504b7d2b9e60521428051b75f0483c6b

Authored by sqy
1 parent e7235fa8

feat:新增场景联动的启用规则功能

Inline Side-by-side
Showing 9 changed files with 497 additions and 66 deletions
@@ -181,9 +181,21 @@ @@ -181,9 +181,21 @@
181 setEditAlarmConfig(skipUnwrap.actionItemRefs, editAlarmConfigData); 181 setEditAlarmConfig(skipUnwrap.actionItemRefs, editAlarmConfigData);
182 }); 182 });
183 183
  184 + const map = {
  185 + ANY_TIME: 0,
  186 + SPECIFIC_TIME: 1,
  187 + CUSTOM: 2,
  188 + };
184 // 回显触发器数据---此处是个闭包! 189 // 回显触发器数据---此处是个闭包!
185 triggers.forEach((trigger, index) => { 190 triggers.forEach((trigger, index) => {
186 nextTick(async () => { 191 nextTick(async () => {
  192 + // 回显启用规则
  193 + unref(skipUnwrap.triggerItemRefs)[index].currentIndex =
  194 + map[trigger.triggerCondition.schedule.type];
  195 + unref(skipUnwrap.triggerItemRefs)[index].scheduleData = trigger.triggerCondition.schedule;
  196 + unref(skipUnwrap.triggerItemRefs)[index].isUpdate = true;
  197 + unref(skipUnwrap.triggerItemRefs)[index].alarmScheduleRef.scheduleData =
  198 + trigger.triggerCondition.schedule;
187 unref(skipUnwrap.triggerItemRefs)[index].setFieldsFormValueFun({ 199 unref(skipUnwrap.triggerItemRefs)[index].setFieldsFormValueFun({
188 triggered: trigger?.triggerCondition?.condition?.spec?.type, 200 triggered: trigger?.triggerCondition?.condition?.spec?.type,
189 device: trigger?.entityType, 201 device: trigger?.entityType,
@@ -235,6 +247,14 @@ @@ -235,6 +247,14 @@
235 247
236 doConditions.forEach((condition, index) => { 248 doConditions.forEach((condition, index) => {
237 nextTick(async () => { 249 nextTick(async () => {
  250 + // 回显启用规则
  251 + unref(skipUnwrap.conditionItemRefs)[index].currentIndex =
  252 + map[condition.triggerCondition.schedule.type];
  253 + unref(skipUnwrap.conditionItemRefs)[index].scheduleData =
  254 + condition.triggerCondition.schedule;
  255 + unref(skipUnwrap.conditionItemRefs)[index].isUpdate = true;
  256 + unref(skipUnwrap.conditionItemRefs)[index].alarmScheduleRef.scheduleData =
  257 + condition.triggerCondition.schedule;
238 unref(skipUnwrap.conditionItemRefs)[index].setFieldsFormValueFun({ 258 unref(skipUnwrap.conditionItemRefs)[index].setFieldsFormValueFun({
239 triggered: condition?.triggerCondition?.condition?.spec?.type, 259 triggered: condition?.triggerCondition?.condition?.spec?.type,
240 device: condition?.entityType, 260 device: condition?.entityType,
@@ -311,6 +331,13 @@ @@ -311,6 +331,13 @@
311 nextTick(async () => { 331 nextTick(async () => {
312 unref(skipUnwrap.actionItemRefs)[index].refItem.clearRuleRefs.value.map( 332 unref(skipUnwrap.actionItemRefs)[index].refItem.clearRuleRefs.value.map(
313 (item, index) => { 333 (item, index) => {
  334 + // 回显启用规则
  335 + item.currentIndex =
  336 + map[action.doContext.clearRule[index].triggerCondition.schedule.type];
  337 + item.scheduleData = action.doContext.clearRule[index].triggerCondition.schedule;
  338 + item.isUpdate = true;
  339 + item.alarmScheduleRef.scheduleData =
  340 + action.doContext.clearRule[index].triggerCondition.schedule;
314 item.setFieldsFormValueFun({ 341 item.setFieldsFormValueFun({
315 triggered: 342 triggered:
316 action.doContext.clearRule[index].triggerCondition.condition.spec.type, 343 action.doContext.clearRule[index].triggerCondition.condition.spec.type,
@@ -459,15 +486,15 @@ @@ -459,15 +486,15 @@
459 * 获取触发器、执行条件、执行动作表单值--多个 486 * 获取触发器、执行条件、执行动作表单值--多个
460 */ 487 */
461 const getFormValueFunc = () => { 488 const getFormValueFunc = () => {
462 - getTriggerFormValue.value = unref(skipUnwrap.triggerItemRefs)?.map((item) => {  
463 - return genTriggerOrConditionData(item.getFieldsValueFunc());  
464 - });  
465 - getConditionFormValue.value = unref(skipUnwrap.conditionItemRefs).map((item) => {  
466 - return genTriggerOrConditionData(item.getFieldsValueFunc());  
467 - });  
468 - getActionFormValue.value = unref(skipUnwrap.actionItemRefs).map((item) => {  
469 - return genActionData(item.getFieldsValueFunc());  
470 - }); 489 + getTriggerFormValue.value = unref(skipUnwrap.triggerItemRefs)?.map((item) =>
  490 + genTriggerOrConditionData(item.getFieldsValueFunc())
  491 + );
  492 + getConditionFormValue.value = unref(skipUnwrap.conditionItemRefs).map((item) =>
  493 + genTriggerOrConditionData(item.getFieldsValueFunc())
  494 + );
  495 + getActionFormValue.value = unref(skipUnwrap.actionItemRefs).map((item) =>
  496 + genActionData(item.getFieldsValueFunc())
  497 + );
471 }; 498 };
472 const handleSubmit = async () => { 499 const handleSubmit = async () => {
473 let basicFormValue = await validate(); 500 let basicFormValue = await validate();
1 import { ref } from 'vue'; 1 import { ref } from 'vue';
2 import { BasicColumn, FormSchema } from '/@/components/Table'; 2 import { BasicColumn, FormSchema } from '/@/components/Table';
3 import { screenLinkOrganizationGetApi } from '/@/api/ruleengine/ruleengineApi'; 3 import { screenLinkOrganizationGetApi } from '/@/api/ruleengine/ruleengineApi';
  4 +import { scheduleOptions } from './formatData';
4 5
5 import { copyTransFun } from '/@/utils/fnUtils'; 6 import { copyTransFun } from '/@/utils/fnUtils';
6 7
@@ -392,3 +393,79 @@ export const actionSchema: FormSchema[] = [ @@ -392,3 +393,79 @@ export const actionSchema: FormSchema[] = [
392 slot: 'clearAlarm', 393 slot: 'clearAlarm',
393 }, 394 },
394 ]; 395 ];
  396 +
  397 +export const alarmScheduleSchemas: FormSchema[] = [
  398 + {
  399 + field: 'schedule',
  400 + label: '',
  401 + component: 'Select',
  402 + componentProps({ formActionType }) {
  403 + const { resetFields } = formActionType;
  404 + return {
  405 + options: scheduleOptions,
  406 + allowClear: false,
  407 + onChange(value) {
  408 + console.log(value);
  409 + resetFields();
  410 + },
  411 + };
  412 + },
  413 + },
  414 + {
  415 + field: 'timezone',
  416 + label: '时区',
  417 + component: 'Select',
  418 + defaultValue: 'Asia/Shanghai',
  419 + componentProps: {
  420 + options: [
  421 + {
  422 + label: 'Asia/Shanghai',
  423 + value: 'Asia/Shanghai',
  424 + },
  425 + ],
  426 + allowClear: false,
  427 + },
  428 + ifShow: ({ values }) => values.schedule !== 'ANY_TIME',
  429 + },
  430 + {
  431 + field: 'daysOfWeek',
  432 + label: '天',
  433 + component: 'CheckboxGroup',
  434 + rules: [
  435 + {
  436 + message: '请至少选择一天',
  437 + required: true,
  438 + },
  439 + ],
  440 + componentProps: {
  441 + options: [
  442 + { label: '星期一', value: 1 },
  443 + { label: '星期二', value: 2 },
  444 + { label: '星期三', value: 3 },
  445 + { label: '星期四', value: 4 },
  446 + { label: '星期五', value: 5 },
  447 + { label: '星期六', value: 6 },
  448 + { label: '星期日', value: 7 },
  449 + ],
  450 + },
  451 + colProps: {
  452 + span: 24,
  453 + },
  454 + ifShow: ({ values }) => values.schedule === 'SPECIFIC_TIME',
  455 + },
  456 + {
  457 + field: 'time',
  458 + label: '时间',
  459 + labelWidth: 40,
  460 + component: 'RangePicker',
  461 + ifShow: ({ values }) => values.schedule === 'SPECIFIC_TIME',
  462 + slot: 'timing',
  463 + },
  464 + {
  465 + field: 'day',
  466 + label: '天',
  467 + component: 'CheckboxGroup',
  468 + slot: 'customEnable',
  469 + ifShow: ({ values }) => values.schedule === 'CUSTOM',
  470 + },
  471 +];
@@ -60,13 +60,7 @@ export const genTriggerOrConditionData = (triggerData) => { @@ -60,13 +60,7 @@ export const genTriggerOrConditionData = (triggerData) => {
60 }, 60 },
61 }, 61 },
62 }, 62 },
63 - schedule: {  
64 - type: schedule,  
65 - // timezone: 'Asia/Shanghai',  
66 - // daysOfWeek: [2, 3],  
67 - // startsOn: 8700000,  
68 - // endsOn: 30300000,  
69 - }, 63 + schedule,
70 }, 64 },
71 }; 65 };
72 }; 66 };
@@ -81,6 +75,7 @@ export const genActionData = (actionData) => { @@ -81,6 +75,7 @@ export const genActionData = (actionData) => {
81 device, 75 device,
82 deviceId, 76 deviceId,
83 } = actionData; 77 } = actionData;
  78 + console.log(actionData);
84 const clearRule = clearRules.map((item) => { 79 const clearRule = clearRules.map((item) => {
85 const mapPredicate = item.predicate.map((pred) => { 80 const mapPredicate = item.predicate.map((pred) => {
86 return { 81 return {
@@ -117,13 +112,7 @@ export const genActionData = (actionData) => { @@ -117,13 +112,7 @@ export const genActionData = (actionData) => {
117 }, 112 },
118 }, 113 },
119 }, 114 },
120 - schedule: {  
121 - type: item.schedule,  
122 - // timezone: 'Asia/Shanghai',  
123 - // daysOfWeek: [2, 3],  
124 - // startsOn: 8700000,  
125 - // endsOn: 30300000,  
126 - }, 115 + schedule: item.schedule,
127 }, 116 },
128 }; 117 };
129 }); 118 });
  1 +<template>
  2 + <BasicModal
  3 + v-bind="$attrs"
  4 + :width="600"
  5 + title="编辑报警日程"
  6 + centered
  7 + @register="registerModal"
  8 + @ok="handleOk"
  9 + @cancel="handleCancel"
  10 + >
  11 + <BasicForm @register="registerForm" ref="basicFormRef">
  12 + <template #customEnable>
  13 + <template v-for="(item, optionIndex) in options" :key="item.flag">
  14 + <div :class="optionIndex >= 1 ? 'mt-4' : ''">
  15 + <Checkbox v-model:checked="item.enabled">星期{{ item.flag }}</Checkbox>
  16 + <TimePicker
  17 + size="small"
  18 + placeholder="开始时间"
  19 + v-model:value="item.startsOn"
  20 + value-format="x"
  21 + format="HH:mm"
  22 + :disabled="!item.enabled"
  23 + />
  24 + ~
  25 + <TimePicker
  26 + size="small"
  27 + placeholder="结束时间"
  28 + v-model:value="item.endsOn"
  29 + value-format="x"
  30 + format="HH:mm"
  31 + :disabled="!item.enabled"
  32 + /> </div
  33 + ></template>
  34 + </template>
  35 + <template #timing>
  36 + <TimePicker
  37 + size="small"
  38 + placeholder="开始时间"
  39 + v-model:value="timeState.startsOn"
  40 + value-format="x"
  41 + format="HH:mm"
  42 + />
  43 + ~
  44 + <TimePicker
  45 + size="small"
  46 + placeholder="结束时间"
  47 + v-model:value="timeState.endsOn"
  48 + value-format="x"
  49 + format="HH:mm"
  50 + />
  51 + </template>
  52 + </BasicForm>
  53 + </BasicModal>
  54 +</template>
  55 +
  56 +<script lang="ts" setup>
  57 + import { reactive, ref, watch, nextTick } from 'vue';
  58 + import { useModalInner, BasicModal } from '/@/components/Modal';
  59 + import { BasicForm, useForm } from '/@/components/Form';
  60 + import { alarmScheduleSchemas } from '../config/config.data.ts';
  61 + import { Checkbox, TimePicker } from 'ant-design-vue';
  62 + const emit = defineEmits(['register', 'cancel']);
  63 + const [registerForm, { setFieldsValue, getFieldsValue }] = useForm({
  64 + showActionButtonGroup: false,
  65 + schemas: alarmScheduleSchemas,
  66 + });
  67 + const timeState = reactive({
  68 + startsOn: null,
  69 + endsOn: null,
  70 + });
  71 +
  72 + const options = ref([
  73 + {
  74 + enabled: false,
  75 + dayOfWeek: 1,
  76 + flag: '一',
  77 + endsOn: null,
  78 + startsOn: null,
  79 + },
  80 + {
  81 + enabled: false,
  82 + dayOfWeek: 2,
  83 + flag: '二',
  84 + endsOn: null,
  85 + startsOn: null,
  86 + },
  87 + {
  88 + enabled: false,
  89 + dayOfWeek: 3,
  90 + flag: '三',
  91 + endsOn: null,
  92 + startsOn: null,
  93 + },
  94 + {
  95 + enabled: false,
  96 + dayOfWeek: 4,
  97 + flag: '四',
  98 + endsOn: null,
  99 + startsOn: null,
  100 + },
  101 + {
  102 + enabled: false,
  103 + dayOfWeek: 5,
  104 + flag: '五',
  105 + endsOn: null,
  106 + startsOn: null,
  107 + },
  108 + {
  109 + enabled: false,
  110 + dayOfWeek: 6,
  111 + flag: '六',
  112 + endsOn: null,
  113 + startsOn: null,
  114 + },
  115 + {
  116 + enabled: false,
  117 + dayOfWeek: 7,
  118 + flag: '日',
  119 + endsOn: null,
  120 + startsOn: null,
  121 + },
  122 + ]);
  123 + const basicFormRef = ref<InstanceType<typeof BasicForm>>();
  124 + let index = ref(null);
  125 + watch(
  126 + options,
  127 + (newValue) => {
  128 + const arr = [];
  129 + for (let item of newValue) {
  130 + if (item.enabled && item.startsOn && item.endsOn) {
  131 + arr.push(true);
  132 + } else if ((!item.enabled && item.startsOn && item.endsOn) || item.enabled) {
  133 + arr.push(false);
  134 + }
  135 + }
  136 + console.log(arr);
  137 + const flag = arr.length ? !arr.every((item) => item) : true;
  138 + console.log(flag);
  139 + nextTick(() => {
  140 + setModalProps({
  141 + okButtonProps: {
  142 + disabled: flag,
  143 + },
  144 + });
  145 + });
  146 + },
  147 + {
  148 + deep: true,
  149 + }
  150 + );
  151 +
  152 + const [registerModal, { closeModal, setModalProps }] = useModalInner((data) => {
  153 + watch([timeState, basicFormRef.value.formModel], ([timeState, formModel]) => {
  154 + setModalProps({
  155 + okButtonProps: {
  156 + disabled:
  157 + timeState.startsOn === null ||
  158 + timeState.endsOn === null ||
  159 + !formModel.daysOfWeek?.length,
  160 + },
  161 + });
  162 + watch(
  163 + () => formModel.schedule,
  164 + () => {
  165 + timeState.startsOn = null;
  166 + timeState.endsOn = null;
  167 + }
  168 + );
  169 + });
  170 + const { value, currentIndex, isUpdate, scheduleData } = data;
  171 + index.value = currentIndex;
  172 + const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
  173 + // 编辑
  174 + setFieldsValue({
  175 + schedule: value,
  176 + });
  177 + if (isUpdate) {
  178 + nextTick(() => {
  179 + // 回显定时启用
  180 + if (scheduleData.type === 'SPECIFIC_TIME') {
  181 + setFieldsValue({
  182 + daysOfWeek: scheduleData.daysOfWeek,
  183 + });
  184 + timeState.startsOn = scheduleData.startsOn + dayZenoTime + '';
  185 + timeState.endsOn = scheduleData.endsOn + dayZenoTime + '';
  186 + }
  187 + // 回显自定义启用
  188 + if (scheduleData.type === 'CUSTOM') {
  189 + for (let [index, item] of scheduleData?.items.entries()) {
  190 + if (item.enabled) {
  191 + options.value[index].enabled = item.enabled;
  192 + options.value[index].startsOn = item.startsOn + dayZenoTime + '';
  193 + options.value[index].endsOn = item.endsOn + dayZenoTime + '';
  194 + }
  195 + }
  196 + }
  197 + });
  198 + }
  199 + });
  200 + const scheduleData = ref({
  201 + type: 'ANY_TIME',
  202 + });
  203 + const handleOk = () => {
  204 + const { schedule: type, timezone, daysOfWeek } = getFieldsValue();
  205 + // 获取当天0时时间戳
  206 + const dayZenoTime = Math.round(new Date(new Date().toLocaleDateString()).getTime());
  207 + if (type === 'CUSTOM') {
  208 + const items = options.value.map((item) => {
  209 + return {
  210 + startsOn: item.startsOn ? item.startsOn - dayZenoTime : 0,
  211 + endsOn: item.endsOn ? item.endsOn - dayZenoTime : 0,
  212 + dayOfWeek: item.dayOfWeek,
  213 + enabled: item.enabled,
  214 + };
  215 + });
  216 + scheduleData.value = {
  217 + type,
  218 + timezone,
  219 + items,
  220 + };
  221 + } else if (type === 'SPECIFIC_TIME') {
  222 + scheduleData.value = {
  223 + type,
  224 + timezone,
  225 + daysOfWeek,
  226 + startsOn: timeState.startsOn - dayZenoTime,
  227 + endsOn: timeState.endsOn - dayZenoTime,
  228 + };
  229 + }
  230 + closeModal();
  231 + };
  232 + const handleCancel = () => {
  233 + emit('cancel', index.value);
  234 + };
  235 +
  236 + defineExpose({
  237 + scheduleData,
  238 + });
  239 +</script>
  240 +
  241 +<style lang="less" scoped></style>
@@ -2,9 +2,18 @@ @@ -2,9 +2,18 @@
2 <div> 2 <div>
3 <CollapseContainer style="background-color: #f2f2f2" title="清除告警" :canExpan="false"> 3 <CollapseContainer style="background-color: #f2f2f2" title="清除告警" :canExpan="false">
4 <template #action> 4 <template #action>
5 - <div>  
6 - <span class="mr-2">启用规则</span>  
7 - <RadioGroup v-model:value="schedule" :options="scheduleOptions" /> 5 + <div class="flex">
  6 + <div class="flex">
  7 + <span class="mr-2">启用规则:</span>
  8 + <template v-for="(item, scheduleIndex) in scheduleOptions" :key="item.label">
  9 + <div
  10 + :class="{ 'ml-4': scheduleIndex >= 1, active: scheduleIndex === currentIndex }"
  11 + class="cursor-pointer"
  12 + @click="handleScheduleChange(item.value)"
  13 + >{{ item.label }}</div
  14 + >
  15 + </template>
  16 + </div>
8 <Tooltip title="移除" class="ml-4"> 17 <Tooltip title="移除" class="ml-4">
9 <Icon 18 <Icon
10 icon="fluent:delete-off-20-regular" 19 icon="fluent:delete-off-20-regular"
@@ -45,19 +54,22 @@ @@ -45,19 +54,22 @@
45 /> 54 />
46 </Card> 55 </Card>
47 </CollapseContainer> 56 </CollapseContainer>
  57 + <AlarmSchedule ref="alarmScheduleRef" @register="registerModal" @cancel="handleCancel" />
48 </div> 58 </div>
49 </template> 59 </template>
50 <script lang="ts" setup> 60 <script lang="ts" setup>
51 - import { ref, provide } from 'vue'; 61 + import { ref, provide, nextTick } from 'vue';
52 import { CollapseContainer } from '/@/components/Container/index'; 62 import { CollapseContainer } from '/@/components/Container/index';
53 import { BasicForm, useForm } from '/@/components/Form/index'; 63 import { BasicForm, useForm } from '/@/components/Form/index';
54 - import { Radio, Card, Select, Input, Tooltip } from 'ant-design-vue'; 64 + import { Card, Select, Input, Tooltip } from 'ant-design-vue';
55 import { trigger_condition_schema } from '../config/config.data.ts'; 65 import { trigger_condition_schema } from '../config/config.data.ts';
56 import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; 66 import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
57 import ConditionScreening from './ConditionScreening.vue'; 67 import ConditionScreening from './ConditionScreening.vue';
58 import { scheduleOptions, timeUnitOptions, options } from '../config/formatData.ts'; 68 import { scheduleOptions, timeUnitOptions, options } from '../config/formatData.ts';
59 -  
60 import { Icon } from '/@/components/Icon'; 69 import { Icon } from '/@/components/Icon';
  70 + import AlarmSchedule from './AlarmSchedule.vue';
  71 + import { useModal } from '/@/components/Modal';
  72 +
61 defineProps({ 73 defineProps({
62 index: { 74 index: {
63 type: Number, 75 type: Number,
@@ -69,13 +81,21 @@ @@ -69,13 +81,21 @@
69 }, 81 },
70 }); 82 });
71 const emit = defineEmits(['delete']); 83 const emit = defineEmits(['delete']);
72 - const RadioGroup = Radio.Group;  
73 - 84 + const isUpdate = ref(false);
  85 + const conditionScreeningRef = ref();
74 const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({ 86 const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
75 schemas: trigger_condition_schema, 87 schemas: trigger_condition_schema,
76 showActionButtonGroup: false, 88 showActionButtonGroup: false,
77 }); 89 });
78 90
  91 + const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
  92 + const getFieldsValueFunc = () => {
  93 + const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map(
  94 + (item) => item.getFieldsValue()
  95 + );
  96 + return { ...getFieldsValue(), predicate, schedule: alarmScheduleRef.value.scheduleData };
  97 + };
  98 +
79 const updateFieldDeviceId = (deviceList: any[]) => { 99 const updateFieldDeviceId = (deviceList: any[]) => {
80 updateSchema({ 100 updateSchema({
81 field: 'entityId', 101 field: 'entityId',
@@ -89,7 +109,7 @@ @@ -89,7 +109,7 @@
89 }, 109 },
90 }); 110 });
91 }; 111 };
92 - const conditionScreeningRef = ref(); 112 +
93 const resetFieldsValueFunc = () => resetFields(); 113 const resetFieldsValueFunc = () => resetFields();
94 // 回显数据函数 114 // 回显数据函数
95 const setFieldsFormValueFun = (fieldsValue) => { 115 const setFieldsFormValueFun = (fieldsValue) => {
@@ -115,10 +135,50 @@ @@ -115,10 +135,50 @@
115 const operationType = ref<string>(''); 135 const operationType = ref<string>('');
116 provide('operationType', operationType); 136 provide('operationType', operationType);
117 137
118 - const childGetFieldsValue = () => getFieldsValue();  
119 const handleDelete = (index: number) => { 138 const handleDelete = (index: number) => {
120 emit('delete', index); 139 emit('delete', index);
121 }; 140 };
  141 +
  142 + // 子组件获取父组件的值
  143 + const childGetFieldsValue = () => getFieldsValue();
  144 +
  145 + // 获取conditionScreeningForm的组件
  146 + const getRefItemConditionScreeningRefs = async () => {
  147 + await nextTick();
  148 + return conditionScreeningRef.value.refItem.conditionScreeningRefs;
  149 + };
  150 +
  151 + const setConditionScreeningList = (list) => {
  152 + conditionScreeningRef.value.conditionScreeningList = list;
  153 + };
  154 + const setRichText = (list) => {
  155 + conditionScreeningRef.value.otherAttribute = list;
  156 + };
  157 +
  158 + const currentIndex = ref(0);
  159 + const [registerModal, { openModal }] = useModal();
  160 + const handleScheduleChange = (value) => {
  161 + const index = scheduleOptions.findIndex((item) => item.value === value);
  162 + // 报警日程弹窗
  163 + if (index !== 0) {
  164 + openModal(true, {
  165 + isUpdate: isUpdate.value,
  166 + value,
  167 + currentIndex: currentIndex.value,
  168 + scheduleData,
  169 + });
  170 + } else {
  171 + alarmScheduleRef.value.scheduleData = {
  172 + type: value,
  173 + };
  174 + console.log(value);
  175 + }
  176 + currentIndex.value = index;
  177 + };
  178 + const handleCancel = (index) => {
  179 + currentIndex.value = index;
  180 + };
  181 + const scheduleData = ref(null);
122 defineExpose({ 182 defineExpose({
123 getFieldsValue, 183 getFieldsValue,
124 updateFieldDeviceId, 184 updateFieldDeviceId,
@@ -128,5 +188,18 @@ @@ -128,5 +188,18 @@
128 conditionScreeningRef, 188 conditionScreeningRef,
129 schedule, 189 schedule,
130 operationType, 190 operationType,
  191 + getFieldsValueFunc,
  192 + getRefItemConditionScreeningRefs,
  193 + setConditionScreeningList,
  194 + setRichText,
  195 + currentIndex,
  196 + scheduleData,
  197 + isUpdate,
  198 + alarmScheduleRef,
131 }); 199 });
132 </script> 200 </script>
  201 +<style>
  202 + .active {
  203 + color: #377dff;
  204 + }
  205 +</style>
@@ -54,6 +54,7 @@ @@ -54,6 +54,7 @@
54 label: '和', 54 label: '和',
55 component: 'Input', 55 component: 'Input',
56 slot: 'and', 56 slot: 'and',
  57 + labelWidth: 50,
57 colProps: { span: 3 }, 58 colProps: { span: 3 },
58 }, 59 },
59 'value' 60 'value'
@@ -74,7 +74,4 @@ @@ -74,7 +74,4 @@
74 padding: 1rem 0 0.5rem; 74 padding: 1rem 0 0.5rem;
75 border-radius: 0.25rem; 75 border-radius: 0.25rem;
76 } 76 }
77 - .ant-input-number {  
78 - width: 200px;  
79 - }  
80 </style> 77 </style>
@@ -3,13 +3,16 @@ @@ -3,13 +3,16 @@
3 <CollapseContainer style="background-color: #f2f2f2" :title="`${title} ${index + 1}`"> 3 <CollapseContainer style="background-color: #f2f2f2" :title="`${title} ${index + 1}`">
4 <template #action> 4 <template #action>
5 <div class="flex"> 5 <div class="flex">
6 - <div>  
7 - <span class="mr-2">启用规则</span>  
8 - <RadioGroup  
9 - v-model:value="schedule"  
10 - :options="scheduleOptions"  
11 - @change="handleRadioGroupChange"  
12 - /> 6 + <div class="flex">
  7 + <span class="mr-2">启用规则:</span>
  8 + <template v-for="(item, scheduleIndex) in scheduleOptions" :key="item.label">
  9 + <div
  10 + :class="{ 'ml-4': scheduleIndex >= 1, active: scheduleIndex === currentIndex }"
  11 + class="cursor-pointer"
  12 + @click="handleScheduleChange(item.value)"
  13 + >{{ item.label }}</div
  14 + >
  15 + </template>
13 </div> 16 </div>
14 <Tooltip title="移除" class="ml-4"> 17 <Tooltip title="移除" class="ml-4">
15 <Icon 18 <Icon
@@ -50,6 +53,7 @@ @@ -50,6 +53,7 @@
50 /> 53 />
51 </Card> 54 </Card>
52 </CollapseContainer> 55 </CollapseContainer>
  56 + <AlarmSchedule ref="alarmScheduleRef" @register="registerModal" @cancel="handleCancel" />
53 </div> 57 </div>
54 </template> 58 </template>
55 <script lang="ts" setup> 59 <script lang="ts" setup>
@@ -57,12 +61,13 @@ @@ -57,12 +61,13 @@
57 import { CollapseContainer } from '/@/components/Container/index'; 61 import { CollapseContainer } from '/@/components/Container/index';
58 import { BasicForm, useForm } from '/@/components/Form/index'; 62 import { BasicForm, useForm } from '/@/components/Form/index';
59 import { Icon } from '/@/components/Icon'; 63 import { Icon } from '/@/components/Icon';
60 - import { Tooltip, Radio, Card, Select, Input } from 'ant-design-vue'; 64 + import { Tooltip, Card, Select, Input } from 'ant-design-vue';
61 import { trigger_condition_schema } from '../config/config.data.ts'; 65 import { trigger_condition_schema } from '../config/config.data.ts';
62 import { getAttribute } from '/@/api/ruleengine/ruleengineApi'; 66 import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
63 import ConditionScreening from './ConditionScreening.vue'; 67 import ConditionScreening from './ConditionScreening.vue';
64 import { scheduleOptions, timeUnitOptions, options } from '../config/formatData.ts'; 68 import { scheduleOptions, timeUnitOptions, options } from '../config/formatData.ts';
65 - const RadioGroup = Radio.Group; 69 + import AlarmSchedule from './AlarmSchedule.vue';
  70 + import { useModal } from '/@/components/Modal';
66 71
67 defineProps({ 72 defineProps({
68 title: { 73 title: {
@@ -75,19 +80,20 @@ @@ -75,19 +80,20 @@
75 }, 80 },
76 }); 81 });
77 const emit = defineEmits(['delete']); 82 const emit = defineEmits(['delete']);
  83 + const isUpdate = ref(false);
78 const conditionScreeningRef = ref(); 84 const conditionScreeningRef = ref();
79 const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({ 85 const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
80 schemas: trigger_condition_schema, 86 schemas: trigger_condition_schema,
81 showActionButtonGroup: false, 87 showActionButtonGroup: false,
82 }); 88 });
83 89
  90 + const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
84 const getFieldsValueFunc = () => { 91 const getFieldsValueFunc = () => {
85 const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map( 92 const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map(
86 - (item) => {  
87 - return item.getFieldsValue();  
88 - } 93 + (item) => item.getFieldsValue()
89 ); 94 );
90 - return { ...getFieldsValue(), predicate, schedule: schedule.value }; 95 +
  96 + return { ...getFieldsValue(), predicate, schedule: alarmScheduleRef.value.scheduleData };
91 }; 97 };
92 const updateFieldDeviceId = (deviceList: any[]) => { 98 const updateFieldDeviceId = (deviceList: any[]) => {
93 updateSchema({ 99 updateSchema({
@@ -108,8 +114,8 @@ @@ -108,8 +114,8 @@
108 setFieldsValue(fieldsValue); 114 setFieldsValue(fieldsValue);
109 }; 115 };
110 const updateFieldAttributeFunc = async () => { 116 const updateFieldAttributeFunc = async () => {
111 - const data1 = await getAttribute();  
112 - const options = data1.map((m) => { 117 + const data = await getAttribute();
  118 + const options = data.map((m) => {
113 return { 119 return {
114 label: m, 120 label: m,
115 value: m, 121 value: m,
@@ -127,8 +133,6 @@ @@ -127,8 +133,6 @@
127 const handleDelete = (params: { index: number; title: string }) => { 133 const handleDelete = (params: { index: number; title: string }) => {
128 emit('delete', params); 134 emit('delete', params);
129 }; 135 };
130 -  
131 - const schedule = ref('ANY_TIME');  
132 const operationType = ref<string>(''); 136 const operationType = ref<string>('');
133 provide('operationType', operationType); 137 provide('operationType', operationType);
134 138
@@ -148,16 +152,30 @@ @@ -148,16 +152,30 @@
148 conditionScreeningRef.value.otherAttribute = list; 152 conditionScreeningRef.value.otherAttribute = list;
149 }; 153 };
150 154
151 - const handleRadioGroupChange = (e) => {  
152 - const { value } = e.target;  
153 - if (value === 'SPECIFIC_TIME') {  
154 - console.log('定时启用');  
155 - // 定时启用  
156 - } else if (value === 'CUSTOM') {  
157 - console.log('自定义启用');  
158 - // 自定义启用 155 + const [registerModal, { openModal }] = useModal();
  156 + const currentIndex = ref(0);
  157 + const handleScheduleChange = (value) => {
  158 + const index = scheduleOptions.findIndex((item) => item.value === value);
  159 + // 报警日程弹窗
  160 + if (index !== 0) {
  161 + openModal(true, {
  162 + isUpdate: isUpdate.value,
  163 + value,
  164 + currentIndex: currentIndex.value,
  165 + scheduleData,
  166 + });
  167 + } else {
  168 + alarmScheduleRef.value.scheduleData = {
  169 + type: value,
  170 + };
  171 + console.log(value);
159 } 172 }
  173 + currentIndex.value = index;
  174 + };
  175 + const handleCancel = (index) => {
  176 + currentIndex.value = index;
160 }; 177 };
  178 + const scheduleData = ref(null);
161 defineExpose({ 179 defineExpose({
162 getFieldsValueFunc, 180 getFieldsValueFunc,
163 updateFieldDeviceId, 181 updateFieldDeviceId,
@@ -168,6 +186,15 @@ @@ -168,6 +186,15 @@
168 getRefItemConditionScreeningRefs, 186 getRefItemConditionScreeningRefs,
169 setConditionScreeningList, 187 setConditionScreeningList,
170 setRichText, 188 setRichText,
171 - setFormList, 189 + currentIndex,
  190 + scheduleData,
  191 + isUpdate,
  192 + alarmScheduleRef,
172 }); 193 });
173 </script> 194 </script>
  195 +
  196 +<style>
  197 + .active {
  198 + color: #377dff;
  199 + }
  200 +</style>
@@ -123,19 +123,19 @@ @@ -123,19 +123,19 @@
123 const predicate = item.conditionScreeningRef?.refItem?.conditionScreeningRefs?.value?.map( 123 const predicate = item.conditionScreeningRef?.refItem?.conditionScreeningRefs?.value?.map(
124 (item) => item.getFieldsValue() 124 (item) => item.getFieldsValue()
125 ); 125 );
126 -  
127 return { 126 return {
128 ...item.getFieldsValue(), 127 ...item.getFieldsValue(),
129 predicate, 128 predicate,
130 - schedule: item?.schedule, 129 + schedule: item.alarmScheduleRef.scheduleData,
131 }; 130 };
132 }); 131 });
133 return { 132 return {
134 ...getFieldsValue(), 133 ...getFieldsValue(),
135 - doContext: unref(jsonInstance.value).get(), 134 + doContext: unref(jsonInstance.value)?.get(),
136 clearRule, 135 clearRule,
137 }; 136 };
138 }; 137 };
  138 +
139 const setFieldsFormValueFun = (fieldsValue) => { 139 const setFieldsFormValueFun = (fieldsValue) => {
140 setFieldsValue(fieldsValue); 140 setFieldsValue(fieldsValue);
141 }; 141 };
@@ -163,7 +163,6 @@ @@ -163,7 +163,6 @@
163 options: alarmConfigList, 163 options: alarmConfigList,
164 }, 164 },
165 }); 165 });
166 - hasDisabled.value = false;  
167 userStore.setOutTarget('DEVICE_OUT'); 166 userStore.setOutTarget('DEVICE_OUT');
168 }; 167 };
169 168