fix:简化ns-step组件 设备告警样式 设备告警 能源告警 添加字段
This commit is contained in:
zhaohy
@@ -8,18 +8,66 @@
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||
<div style="margin-left: 52px">
|
||||
应用规则:
|
||||
<a-switch
|
||||
:checked="infoObject?.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject?.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject?.enableRules === 1 ? false : true,
|
||||
}"
|
||||
style="margin-left: 6px"
|
||||
@change="changeSwitch" />
|
||||
</div>
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item name="alarmTitle" label="告警标题">
|
||||
<ns-input allowClear v-model:value="infoObject.alarmTitle" placeholder="请输入告警标题" />
|
||||
</a-form-item>
|
||||
<a-form-item label="告警频率" name="alarmFrequency">
|
||||
<a-select
|
||||
v-model:value="infoObject.alarmFrequency"
|
||||
placeholder="请选择告警频率"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="alarmFrequencyData" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="infoObject.alarmFrequency === 2" name="repetitions" label="重复次数">
|
||||
<ns-input-number v-model:value="infoObject.repetitions" placeholder="请输入重复次数" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="infoObject.alarmFrequency === 2" name="intervalDuration" label="间隔时长">
|
||||
<ns-input-number
|
||||
style="width: 60%"
|
||||
v-model:value="infoObject.intervalDuration"
|
||||
placeholder="请输入间隔时长" />
|
||||
<a-select
|
||||
v-model:value="infoObject.intervalDurationUnit"
|
||||
placeholder="请选择间隔时长单位"
|
||||
style="width: 40%"
|
||||
allowClear
|
||||
:options="intervalDurationUnitData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="优先级" name="priority">
|
||||
<a-select
|
||||
v-model:value="infoObject.priority"
|
||||
placeholder="请选择优先级"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="priorityData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="监测频率" name="monitorFrequency">
|
||||
<a-select
|
||||
v-model:value="infoObject.monitorFrequency"
|
||||
placeholder="请选择监测频率"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="monitorFrequencyData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则">
|
||||
<a-switch
|
||||
:checked="infoObject?.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject?.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject?.enableRules === 1 ? false : true,
|
||||
}"
|
||||
style="margin-left: 6px"
|
||||
@change="changeSwitch" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否创建工单" name="createWorkOrder">
|
||||
<a-radio-group v-model:value="infoObject.createWorkOrder">
|
||||
<a-radio value="1">是 </a-radio>
|
||||
<a-radio value="0">否 </a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -31,175 +79,147 @@
|
||||
const visible = ref(false);
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
alarmTitle: null,
|
||||
alarmFrequency: null,
|
||||
priority: null,
|
||||
monitorFrequency: null,
|
||||
createWorkOrder: null,
|
||||
enableRules: 0,
|
||||
});
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['editObject']);
|
||||
const alarmFrequencyData = ref([
|
||||
{
|
||||
label: '单次',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重复',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '累计',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const priorityData = ref([
|
||||
{
|
||||
label: '紧急',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重要',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const intervalDurationUnitData = ref([
|
||||
{
|
||||
label: '分',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '时',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '天',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const monitorFrequencyData = ref([
|
||||
{
|
||||
label: '小时',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '每日',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '每周',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '月度',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: '年度',
|
||||
value: 5,
|
||||
},
|
||||
]);
|
||||
const rules = {
|
||||
alarmTitle: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入告警标题',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
alarmFrequency: [{ required: true, message: '请选择告警频率', trigger: 'change' }],
|
||||
intervalDuration: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的间隔时长',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, intervalDuration: any, cbfn: any) => {
|
||||
if (intervalDuration && intervalDuration > 0) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的间隔时长');
|
||||
}
|
||||
if (!infoObject.value.intervalDurationUnit) {
|
||||
cbfn('请选择间隔时长单位');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的重复次数',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, repetitions: any, cbfn: any) => {
|
||||
if (repetitions && repetitions > 0) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的重复次数');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
createWorkOrder: [{ required: true, message: '请选择是否创建工单', trigger: 'change' }],
|
||||
monitorFrequency: [{ required: true, message: '请选择监测频率', trigger: 'change' }],
|
||||
priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
|
||||
monitorTimeUnit: [{ required: true, message: '请选择监测时长单位', trigger: 'change' }],
|
||||
};
|
||||
const toggle = (value: any) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
infoObject.value = value;
|
||||
} else {
|
||||
infoObject.value = {
|
||||
alarmTitle: null,
|
||||
alarmFrequency: null,
|
||||
priority: null,
|
||||
monitorFrequency: null,
|
||||
createWorkOrder: null,
|
||||
enableRules: 0,
|
||||
};
|
||||
}
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
const schemas = [
|
||||
{
|
||||
field: 'basicInfo',
|
||||
label: '',
|
||||
displayFormItem: false,
|
||||
class: 'ns-form-item-full',
|
||||
component: 'NsChildForm',
|
||||
componentProps: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'alarmTitle',
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '告警标题不能为空',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
placeholder: '请输入告警标题',
|
||||
maxLength: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'repetitions',
|
||||
label: '重复次数',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '重复次数不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择重复次数',
|
||||
|
||||
options: [
|
||||
{
|
||||
label: '单次',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重复',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '累计',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'priority',
|
||||
label: '优先级',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '优先级不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择优先级',
|
||||
options: [
|
||||
{
|
||||
label: '紧急',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重要',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'monitorFrequency',
|
||||
label: '监测频率',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '监测频率不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择优先级',
|
||||
options: [
|
||||
{
|
||||
label: '小时',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '每日',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '每周',
|
||||
value: 3,
|
||||
},
|
||||
{
|
||||
label: '月度',
|
||||
value: 4,
|
||||
},
|
||||
{
|
||||
label: '年度',
|
||||
value: 5,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '是否创建工单',
|
||||
field: 'createWorkOrder',
|
||||
component: 'NsRadioGroup',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '是否创建工单不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
radioType: 'radio',
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
//开关
|
||||
const changeSwitch = () => {
|
||||
switch (infoObject.value.enableRules) {
|
||||
@@ -213,9 +233,16 @@
|
||||
};
|
||||
const btnClick = () => {
|
||||
//表单校验
|
||||
formRef.value.triggerSubmit().then(() => {
|
||||
formRef.value.validate().then(() => {
|
||||
let data = { ...infoObject.value };
|
||||
data.createWorkOrder = Number(data.createWorkOrder);
|
||||
if (data.alarmFrequency !== 2) {
|
||||
data.repetitions = null;
|
||||
data.intervalDuration = null;
|
||||
data.intervalDurationUnit = null;
|
||||
}
|
||||
//调用接口
|
||||
http.post(energyAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
http.post(energyAlarms.addOrUpNewData, data).then(() => {
|
||||
emit('editObject', null);
|
||||
if (infoObject.value.id) {
|
||||
NsMessage.success('告警编辑成功');
|
||||
@@ -228,8 +255,13 @@
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.formElRef.clearValidate();
|
||||
formRef.value.resetFields();
|
||||
infoObject.value = {
|
||||
alarmTitle: null,
|
||||
alarmFrequency: null,
|
||||
priority: null,
|
||||
monitorFrequency: null,
|
||||
createWorkOrder: null,
|
||||
enableRules: 0,
|
||||
};
|
||||
visible.value = false;
|
||||
@@ -269,4 +301,9 @@
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
:deep(.ant-form-item-label) {
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
width: 23%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -190,7 +190,7 @@
|
||||
//获取该类型设备
|
||||
getDevicePage({
|
||||
orgId: orgId.value,
|
||||
code: selectedOptions[selectedOptions.length - 1].code,
|
||||
deviceCode: selectedOptions[selectedOptions.length - 1].code,
|
||||
pageNum: 1,
|
||||
pageSize: 999,
|
||||
});
|
||||
|
||||
@@ -8,18 +8,72 @@
|
||||
:cancel="handleClose"
|
||||
placement="right"
|
||||
@close="handleClose">
|
||||
<ns-form ref="formRef" :schemas="schemas" :model="infoObject" formLayout="vertical" />
|
||||
<div style="margin-left: 52px">
|
||||
应用规则:
|
||||
<a-switch
|
||||
:checked="infoObject?.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject?.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject?.enableRules === 1 ? false : true,
|
||||
}"
|
||||
style="margin-left: 6px"
|
||||
@change="changeSwitch" />
|
||||
</div>
|
||||
<a-form ref="formRef" :model="infoObject" :rules="rules">
|
||||
<a-form-item name="alarmTitle" label="告警标题">
|
||||
<ns-input allowClear v-model:value="infoObject.alarmTitle" placeholder="请输入告警标题" />
|
||||
</a-form-item>
|
||||
<a-form-item label="告警频率" name="alarmFrequency">
|
||||
<a-select
|
||||
v-model:value="infoObject.alarmFrequency"
|
||||
placeholder="请选择告警频率"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="alarmFrequencyData" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="infoObject.alarmFrequency === 2" name="repetitions" label="重复次数">
|
||||
<ns-input-number v-model:value="infoObject.repetitions" placeholder="请输入重复次数" />
|
||||
</a-form-item>
|
||||
<a-form-item v-if="infoObject.alarmFrequency === 2" name="intervalDuration" label="间隔时长">
|
||||
<ns-input-number
|
||||
style="width: 60%"
|
||||
v-model:value="infoObject.intervalDuration"
|
||||
placeholder="请输入间隔时长" />
|
||||
<a-select
|
||||
v-model:value="infoObject.intervalDurationUnit"
|
||||
placeholder="请选择间隔时长单位"
|
||||
style="width: 40%"
|
||||
allowClear
|
||||
:options="intervalDurationUnitData" />
|
||||
</a-form-item>
|
||||
<a-form-item name="monitorTime" label="监测时长">
|
||||
<ns-input-number
|
||||
allowClear
|
||||
v-model:value="infoObject.monitorTime"
|
||||
placeholder="请输入监测时长" />
|
||||
</a-form-item>
|
||||
<a-form-item label="监测时长单位" name="monitorTimeUnit">
|
||||
<a-select
|
||||
v-model:value="infoObject.monitorTimeUnit"
|
||||
placeholder="请选择监测时长单位"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="monitorTimeUnitData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="优先级" name="priority">
|
||||
<a-select
|
||||
v-model:value="infoObject.priority"
|
||||
placeholder="请选择优先级"
|
||||
style="width: 100%"
|
||||
allowClear
|
||||
:options="priorityData" />
|
||||
</a-form-item>
|
||||
<a-form-item label="启用规则">
|
||||
<a-switch
|
||||
:checked="infoObject?.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': infoObject?.enableRules === 1 ? true : false,
|
||||
'grey-background': infoObject?.enableRules === 1 ? false : true,
|
||||
}"
|
||||
style="margin-left: 6px"
|
||||
@change="changeSwitch" />
|
||||
</a-form-item>
|
||||
<a-form-item label="是否创建工单" name="createWorkOrder">
|
||||
<a-radio-group v-model:value="infoObject.createWorkOrder">
|
||||
<a-radio value="1">是 </a-radio>
|
||||
<a-radio value="0">否 </a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</ns-drawer>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
@@ -32,11 +86,72 @@
|
||||
//表单数据
|
||||
const infoObject = ref({
|
||||
id: null,
|
||||
accountNo: null,
|
||||
alarmTitle: null,
|
||||
alarmFrequency: null,
|
||||
monitorTime: null,
|
||||
monitorTimeUnit: null,
|
||||
priority: null,
|
||||
createWorkOrder: null,
|
||||
enableRules: 0,
|
||||
});
|
||||
const formRef = ref();
|
||||
const emit = defineEmits(['editObject']);
|
||||
const alarmFrequencyData = ref([
|
||||
{
|
||||
label: '单次',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重复',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '累计',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const monitorTimeUnitData = ref([
|
||||
{
|
||||
label: '分',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '时',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '天',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const intervalDurationUnitData = ref([
|
||||
{
|
||||
label: '分',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '时',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '天',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const priorityData = ref([
|
||||
{
|
||||
label: '紧急',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重要',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 3,
|
||||
},
|
||||
]);
|
||||
const toggle = (value: any) => {
|
||||
//判断 是新增 还是修改
|
||||
if (value) {
|
||||
@@ -50,174 +165,69 @@
|
||||
}
|
||||
visible.value = !visible.value;
|
||||
};
|
||||
const schemas = [
|
||||
{
|
||||
field: 'basicInfo',
|
||||
label: '',
|
||||
displayFormItem: false,
|
||||
class: 'ns-form-item-full',
|
||||
component: 'NsChildForm',
|
||||
componentProps: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'alarmTitle',
|
||||
label: '告警标题',
|
||||
component: 'NsInput',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '告警标题不能为空',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
placeholder: '请输入告警标题',
|
||||
maxLength: 20,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'repetitions',
|
||||
label: '重复次数',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '重复次数不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
component: 'NsSelect',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择重复次数',
|
||||
|
||||
options: [
|
||||
{
|
||||
label: '单次',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重复',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '累计',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'monitorTime',
|
||||
label: '检测时长',
|
||||
component: 'NsInputNumber',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rules: any, value: any, cbfn: any) => {
|
||||
if (value && /^[0-9]*$/.test(value)) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的监测时长');
|
||||
}
|
||||
},
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
placeholder: '请输入监测时长',
|
||||
// maxLength: 30,
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'monitorTimeUnit',
|
||||
label: '监测时长单位',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '监测时长单位不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择监测时长单位',
|
||||
options: [
|
||||
{
|
||||
label: '分',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '时',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '天',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'priority',
|
||||
label: '优先级',
|
||||
component: 'NsSelect',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '优先级不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请选择优先级',
|
||||
options: [
|
||||
{
|
||||
label: '紧急',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '重要',
|
||||
value: 2,
|
||||
},
|
||||
{
|
||||
label: '一般',
|
||||
value: 3,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '是否创建工单',
|
||||
field: 'createWorkOrder',
|
||||
component: 'NsRadioGroup',
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '是否创建工单不能为空',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
componentProps: {
|
||||
radioType: 'radio',
|
||||
options: [
|
||||
{ label: '是', value: 1 },
|
||||
{ label: '否', value: 0 },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
//表单 判断规格
|
||||
const rules = {
|
||||
alarmTitle: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入告警标题',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, alarmTitle: any, cbfn: any) => {
|
||||
if (alarmTitle && alarmTitle.trim() !== '') {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('告警标题不能为空');
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
],
|
||||
alarmFrequency: [{ required: true, message: '请选择告警频率', trigger: 'change' }],
|
||||
monitorTime: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的监测时长',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, monitorTime: any, cbfn: any) => {
|
||||
if (monitorTime && monitorTime > 0) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的监测时长');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
intervalDuration: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的间隔时长',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, monitorTime: any, cbfn: any) => {
|
||||
if (monitorTime && monitorTime > 0) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的间隔时长');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
repetitions: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入正确的重复次数',
|
||||
trigger: 'change',
|
||||
validator: (rules: any, repetitions: any, cbfn: any) => {
|
||||
if (repetitions && repetitions > 0) {
|
||||
cbfn();
|
||||
} else {
|
||||
cbfn('请输入正确的重复次数');
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
createWorkOrder: [{ required: true, message: '请选择是否创建工单', trigger: 'change' }],
|
||||
priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
|
||||
monitorTimeUnit: [{ required: true, message: '请选择监测时长单位', trigger: 'change' }],
|
||||
};
|
||||
//开关
|
||||
const changeSwitch = () => {
|
||||
switch (infoObject.value.enableRules) {
|
||||
@@ -231,9 +241,16 @@
|
||||
};
|
||||
const btnClick = () => {
|
||||
//表单校验
|
||||
formRef.value.triggerSubmit().then(() => {
|
||||
formRef.value.validate().then(() => {
|
||||
//调用接口
|
||||
http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
|
||||
let data = { ...infoObject.value };
|
||||
data.createWorkOrder = Number(data.createWorkOrder);
|
||||
if (data.alarmFrequency !== 2) {
|
||||
data.repetitions = null;
|
||||
data.intervalDuration = null;
|
||||
data.intervalDurationUnit = null;
|
||||
}
|
||||
http.post(deviceAlarms.addOrUpNewData, data).then(() => {
|
||||
if (infoObject.value.id) {
|
||||
NsMessage.success('告警编辑成功');
|
||||
} else {
|
||||
@@ -246,7 +263,7 @@
|
||||
};
|
||||
const handleClose = () => {
|
||||
// 清楚校验错误信息
|
||||
formRef.value.formElRef.clearValidate();
|
||||
formRef.value.resetFields();
|
||||
visible.value = false;
|
||||
};
|
||||
defineExpose({
|
||||
@@ -284,4 +301,9 @@
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: grey !important;
|
||||
}
|
||||
:deep(.ant-form-item-label) {
|
||||
z-index: 20;
|
||||
text-align: right;
|
||||
width: 23%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -48,14 +48,26 @@
|
||||
{{
|
||||
record.monitorTime && record.monitorTimeUnit
|
||||
? record.monitorTime + '' + record.monitorTimeUnit.label
|
||||
: '-'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'repetition'">
|
||||
{{ record.repetitions.label }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'prioritys'">
|
||||
{{ record.priority ? record.priority.label : '-' }}
|
||||
{{ record.priority ? record.priority.label : '' }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'alarmFrequency'">
|
||||
{{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'repetitions'">
|
||||
{{
|
||||
record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : ''
|
||||
}}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'interval'">
|
||||
{{
|
||||
record.intervalDuration && record.alarmFrequency.value === 2
|
||||
? record.intervalDuration + '' + record.intervalDurationUnit.label
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
@@ -89,14 +101,26 @@
|
||||
clickSwitch({ type: 3, enableRules: record.enableRules, record: record })
|
||||
" />
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'monitorFrequencys'">
|
||||
<template v-if="column.dataIndex === 'monitorFrequency'">
|
||||
{{ record.monitorFrequency.label }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'rep'">
|
||||
{{ record.repetitions.label }}
|
||||
<template v-if="column.dataIndex === 'alarmFrequency'">
|
||||
{{ record.alarmFrequency ? record.alarmFrequency.label : '' }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'prioritys'">
|
||||
{{ record.priority ? record.priority.label : '-' }}
|
||||
<template v-if="column.dataIndex === 'priority'">
|
||||
{{ record.priority ? record.priority.label : '' }}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'repetitions'">
|
||||
{{
|
||||
record.repetitions && record.alarmFrequency.value === 2 ? record.repetitions : ''
|
||||
}}
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'interval'">
|
||||
{{
|
||||
record.intervalDuration && record.alarmFrequency.value === 2
|
||||
? record.intervalDuration + '' + record.intervalDurationUnit.label
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<a-modal
|
||||
<ns-modal
|
||||
v-model:visible="show"
|
||||
width="1100px"
|
||||
style="top: 50%; transform: translateY(-50%); overflow-y: hidden"
|
||||
style="overflow-y: hidden"
|
||||
title="添加联系人"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
@@ -65,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</ns-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
@@ -12,7 +12,7 @@ const tableKeyMap = [
|
||||
},
|
||||
{
|
||||
title: '优先级',
|
||||
dataIndex: 'prioritys',
|
||||
dataIndex: 'priority',
|
||||
},
|
||||
{
|
||||
title: '告警标题',
|
||||
@@ -22,13 +22,21 @@ const tableKeyMap = [
|
||||
title: '错误码',
|
||||
dataIndex: 'errorCode',
|
||||
},
|
||||
{
|
||||
title: '告警频率',
|
||||
dataIndex: 'alarmFrequency',
|
||||
},
|
||||
{
|
||||
title: '重复次数',
|
||||
dataIndex: 'rep',
|
||||
dataIndex: 'repetitions',
|
||||
},
|
||||
{
|
||||
title: '频率间隔',
|
||||
dataIndex: 'interval',
|
||||
},
|
||||
{
|
||||
title: '监测时长',
|
||||
dataIndex: 'monitorFrequencys',
|
||||
dataIndex: 'monitorFrequency',
|
||||
},
|
||||
{
|
||||
title: '是否启用',
|
||||
@@ -99,9 +107,24 @@ export const energyAlarmConfigs = (
|
||||
dynamicParams: ['uuid', 'appealType'],
|
||||
handle: (data: any) => {
|
||||
const obj = { ...data };
|
||||
obj.monitorFrequency = data.monitorFrequency.value;
|
||||
obj.priority = data.priority.value;
|
||||
obj.repetitions = data.repetitions.value;
|
||||
if (obj.alarmFrequency) {
|
||||
obj.alarmFrequency = data.alarmFrequency.value;
|
||||
}
|
||||
if (obj.intervalDurationUnit) {
|
||||
obj.intervalDurationUnit = data.intervalDurationUnit.value;
|
||||
}
|
||||
if (obj.monitorFrequency) {
|
||||
obj.monitorFrequency = data.monitorFrequency.value;
|
||||
}
|
||||
if (obj.createWorkOrder) {
|
||||
obj.createWorkOrder = data.createWorkOrder + '';
|
||||
}
|
||||
if (obj.alarmFrequency !== 2) {
|
||||
obj.repetitions = null;
|
||||
obj.intervalDuration = null;
|
||||
obj.intervalDurationUnit = null;
|
||||
}
|
||||
editeEnergyAlarm.value.toggle(obj);
|
||||
},
|
||||
},
|
||||
|
||||
@@ -22,9 +22,17 @@ const tableKeyMap = [
|
||||
title: '错误码',
|
||||
dataIndex: 'errorCode',
|
||||
},
|
||||
{
|
||||
title: '告警频率',
|
||||
dataIndex: 'alarmFrequency',
|
||||
},
|
||||
{
|
||||
title: '重复次数',
|
||||
dataIndex: 'repetition',
|
||||
dataIndex: 'repetitions',
|
||||
},
|
||||
{
|
||||
title: '频率间隔',
|
||||
dataIndex: 'interval',
|
||||
},
|
||||
{
|
||||
title: '监测时长',
|
||||
@@ -101,7 +109,20 @@ export const equipmentAlarmTableConfig = (
|
||||
handle: (data: any) => {
|
||||
const obj = { ...data };
|
||||
obj.priority = data.priority.value;
|
||||
obj.repetitions = data.repetitions.value;
|
||||
if (obj.alarmFrequency) {
|
||||
obj.alarmFrequency = data.alarmFrequency.value;
|
||||
}
|
||||
if (obj.intervalDurationUnit) {
|
||||
obj.intervalDurationUnit = data.intervalDurationUnit.value;
|
||||
}
|
||||
if (obj.createWorkOrder) {
|
||||
obj.createWorkOrder = data.createWorkOrder + '';
|
||||
}
|
||||
if (obj.alarmFrequency !== 2) {
|
||||
obj.repetitions = null;
|
||||
obj.intervalDuration = null;
|
||||
obj.intervalDurationUnit = null;
|
||||
}
|
||||
obj.monitorTimeUnit = data.monitorTimeUnit.value;
|
||||
editEquipmentAlarm.value.toggle(obj);
|
||||
},
|
||||
|
||||
@@ -10,15 +10,7 @@
|
||||
@close="handleClose">
|
||||
<div style="width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden">
|
||||
<!-- top -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
border-bottom: 1px solid #2778ff; /* 设置底部边框为1像素实线，并指定颜色 */
|
||||
">
|
||||
<div class="box">
|
||||
<div class="card"></div>
|
||||
<div style="left: 25px; position: absolute; height: 35px; line-height: 35px">
|
||||
告警编号：20230310001
|
||||
@@ -201,7 +193,7 @@
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 0,
|
||||
color: '#6395F9',
|
||||
color: '#2778FF',
|
||||
},
|
||||
},
|
||||
symbol: 'circle', // 数据点的形状，这里设置为圆形
|
||||
@@ -227,13 +219,21 @@
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
font-size: @font-size-base;
|
||||
border-bottom: 1px solid @primary-color;
|
||||
}
|
||||
.card {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 5px;
|
||||
height: 35px;
|
||||
background-color: #2778ff;
|
||||
background-color: @primary-color;
|
||||
}
|
||||
:deep(.ant-descriptions-item-label) {
|
||||
width: 25%;
|
||||
|
||||
@@ -19,12 +19,19 @@
|
||||
placeholder="请选择设备点位"
|
||||
style="width: 85%"
|
||||
:options="statusOptions"
|
||||
:disabled="showEdit"
|
||||
:filter-option="filterDevicePoint" />
|
||||
<ns-icon
|
||||
size="20"
|
||||
@click="() => (showEdit = !showEdit)"
|
||||
style="margin-left: 20px"
|
||||
:name="showEdit ? 'bianji' : 'baocun'" />
|
||||
</a-form-item>
|
||||
<a-form-item label="备注" name="desc">
|
||||
<a-textarea
|
||||
v-model:value="infoObject.desc"
|
||||
placeholder="请输入异常描述"
|
||||
:disabled="showEdit"
|
||||
style="width: 85%"
|
||||
:autoSize="{ minRows: 4, maxRows: 4 }" />
|
||||
</a-form-item>
|
||||
@@ -53,6 +60,7 @@
|
||||
|
||||
setup() {
|
||||
const visible = ref(false);
|
||||
const showEdit = ref(true);
|
||||
const infoObject = ref({});
|
||||
const statusOptions = ref([
|
||||
{ value: '0', label: '待处理' },
|
||||
@@ -62,11 +70,11 @@
|
||||
{ value: '4', label: '已关闭' },
|
||||
]);
|
||||
const logList = ref([
|
||||
{ name: '李四', status: '2' },
|
||||
{ name: '王五', status: '4' },
|
||||
{ name: '王五', status: '3' },
|
||||
{ name: '王五', status: '1' },
|
||||
{ name: '赵六', status: '0' },
|
||||
{ name: '李四', status: '2', time: '2024-03-10 10:00:00', desc: '完成' },
|
||||
{ name: '王五', status: '4', time: '2024-03-10 10:00:00' },
|
||||
{ name: '王五', status: '3', time: '2024-03-10 10:00:00' },
|
||||
{ name: '王五', status: '1', time: '2024-03-10 10:00:00', desc: '创建工单' },
|
||||
{ name: '赵六', status: '0', time: '2024-03-10 10:00:00' },
|
||||
]);
|
||||
const config = ref({
|
||||
size: logList.value.length,
|
||||
@@ -79,9 +87,26 @@
|
||||
console.log('btnClick');
|
||||
};
|
||||
const toggle = (data) => {
|
||||
console.log(data, 'data');
|
||||
infoObject.value = logList.value[0];
|
||||
console.log(infoObject.value, 'infoObject.value');
|
||||
infoObject.value = { ...logList.value[0] };
|
||||
let statusMap = {
|
||||
0: '待处理',
|
||||
1: '处理中',
|
||||
2: '已完成',
|
||||
3: '超时',
|
||||
4: '已关闭',
|
||||
};
|
||||
let colorMap = {
|
||||
0: '#ff7602',
|
||||
1: '#00a1e6',
|
||||
2: '#04d919',
|
||||
3: '#d9001b',
|
||||
4: '#a6a6a6',
|
||||
};
|
||||
logList.value.forEach((item) => {
|
||||
item.statusName = statusMap[item.status];
|
||||
item.color = colorMap[item.status];
|
||||
item.src = 'status-' + item.status;
|
||||
});
|
||||
visible.value = true;
|
||||
};
|
||||
const createOrder = () => {
|
||||
@@ -112,6 +137,7 @@
|
||||
};
|
||||
return {
|
||||
infoObject,
|
||||
showEdit,
|
||||
statusOptions,
|
||||
btnClick,
|
||||
createOrder,
|
||||
|
||||
Reference in New Issue
Block a user