|
@@ -1,22 +1,16 @@
|
|
|
-
|
|
|
<template>
|
|
|
<div class="layout-pd">
|
|
|
<el-row>
|
|
|
-<!--操作-->
|
|
|
- <el-col :xs="24" >
|
|
|
- <el-card class="mt8" shadow="hover" >
|
|
|
-<el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom: -3vh;">
|
|
|
+ <!-- 操作 -->
|
|
|
+ <el-col :xs="24">
|
|
|
+ <el-card class="mt8" shadow="hover">
|
|
|
+ <el-form :model="state.filter" :inline="true" @submit.stop.prevent style="margin-bottom: -3vh;">
|
|
|
<el-form-item prop="name" style="width: 100%">
|
|
|
-<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="报警名称">
|
|
|
<el-input v-model="state.filter.alarmLevelName" placeholder="请输入报警名称" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
-<!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
- <el-form-item label="规则条件">
|
|
|
- <el-input v-model="state.filter.conditionsJson" placeholder="请输入规则条件" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col> -->
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="是否启用">
|
|
|
<el-select v-model="state.filter.isActive" placeholder="请选择启用状态" clearable>
|
|
@@ -25,44 +19,40 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="报警等级">
|
|
|
-<!-- 在报警等级下拉框组件中 -->
|
|
|
-<el-select
|
|
|
- v-model="state.filter.level"
|
|
|
- placeholder="请选择报警等级"
|
|
|
- clearable>
|
|
|
- <el-option
|
|
|
- v-for="item in state.alarmLevelDict"
|
|
|
- :key="item.id"
|
|
|
- :label="`${item.name}(${item.value})`"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
-</el-option>
|
|
|
-</el-select>
|
|
|
+ <el-select
|
|
|
+ v-model="state.filter.level"
|
|
|
+ placeholder="请选择报警等级"
|
|
|
+ clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in state.alarmLevelDict"
|
|
|
+ :key="item.id"
|
|
|
+ :label="`${item.name}(${item.value})`"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
-
|
|
|
-</el-form-item>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<el-row class="submit-button">
|
|
|
-<el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
-<el-button type="primary" icon="ele-Plus" @click="openDialog(undefined)"> 添加 </el-button>
|
|
|
- </el-row>
|
|
|
-</el-card>
|
|
|
+ <el-button type="primary" icon="ele-Search" @click="onQuery"> 查询 </el-button>
|
|
|
+ <el-button type="primary" icon="ele-Plus" @click="openDialog(undefined)"> 添加 </el-button>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
-<!--表格-->
|
|
|
- <el-col :xs="24" >
|
|
|
+ <!-- 表格 -->
|
|
|
+ <el-col :xs="24">
|
|
|
<el-card style="height: 70vh" class="my-fill mt8" shadow="hover">
|
|
|
-<el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
|
|
|
- <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label" >
|
|
|
- </el-table-column>
|
|
|
-<el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation" width="140">
|
|
|
- <template #default="{ row }" >
|
|
|
-<el-link
|
|
|
+ <el-table v-loading="state.loading" stripe :data="state.tableModel" row-key="id" style="width: 100%">
|
|
|
+ <el-table-column v-for="column in state.dynamicColumns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
|
|
|
+ <el-table-column label="操作" fixed="right" header-align="center" align="center" class="right-operation" width="140">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-link
|
|
|
class="my-el-link mr12 ml12"
|
|
|
type="primary"
|
|
|
icon="ele-EditPen"
|
|
@@ -78,10 +68,10 @@
|
|
|
:underline="false"
|
|
|
target="_blank"
|
|
|
>删除</el-link>
|
|
|
-</template>
|
|
|
+ </template>
|
|
|
</el-table-column>
|
|
|
-</el-table>
|
|
|
-<div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
+ </el-table>
|
|
|
+ <div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
<el-pagination
|
|
|
v-model:currentPage="pageState.pageInput.currentPage"
|
|
|
v-model:page-size="pageState.pageInput.pageSize"
|
|
@@ -94,15 +84,15 @@
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
/>
|
|
|
</div>
|
|
|
-</el-card>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
-</el-row>
|
|
|
+ </el-row>
|
|
|
|
|
|
- <!-- 报警等级添加/修改弹窗 -->
|
|
|
+ <!-- 报警等级添加/修改弹窗 -->
|
|
|
<el-dialog
|
|
|
v-model="dialogVisible"
|
|
|
:title="isEdit ? '修改报警等级' : '添加报警等级'"
|
|
|
- width="500px"
|
|
|
+ width="75%"
|
|
|
:before-close="handleDialogClose"
|
|
|
>
|
|
|
<el-form
|
|
@@ -110,49 +100,154 @@
|
|
|
:model="formData"
|
|
|
:rules="rules"
|
|
|
label-width="100px"
|
|
|
+ class="dialog-form"
|
|
|
>
|
|
|
<el-form-item label="报警等级名称" prop="alarmLevelName">
|
|
|
<el-input v-model="formData.alarmLevelName" placeholder="请输入报警等级名称"></el-input>
|
|
|
</el-form-item>
|
|
|
-<!-- 弹窗中的报警等级下拉框 -->
|
|
|
-<el-form-item label="报警等级" prop="level">
|
|
|
- <el-select v-model="formData.level" placeholder="请选择报警等级" clearable>
|
|
|
- <el-option
|
|
|
- v-for="item in state.alarmLevelDict"
|
|
|
- :key="item.id"
|
|
|
- :label="item.name"
|
|
|
- :value="item.value"
|
|
|
- ></el-option>
|
|
|
- </el-select>
|
|
|
-</el-form-item>
|
|
|
- <el-form-item label="规则条件" prop="conditionsJson">
|
|
|
- <el-input v-model="formData.conditionsJson" type="textarea" :rows="4" placeholder="请输入规则条件"></el-input>
|
|
|
+
|
|
|
+ <!-- 弹窗中的报警等级下拉框 -->
|
|
|
+ <el-form-item label="报警等级" prop="level">
|
|
|
+ <el-select v-model="formData.level" placeholder="请选择报警等级" clearable>
|
|
|
+ <el-option
|
|
|
+ v-for="item in state.alarmLevelDict"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="是否启用" prop="isActive">
|
|
|
+
|
|
|
+ <!-- 报警条件配置区域 -->
|
|
|
+ <div class="condition-section">
|
|
|
+ <div class="condition-header">
|
|
|
+ <span class="condition-title">报警条件配置</span>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Plus"
|
|
|
+ size="small"
|
|
|
+ @click="addCondition"
|
|
|
+ class="add-btn"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 报警条件部分 -->
|
|
|
+ <div v-if="showAlarmConditions" class="conditions-container">
|
|
|
+ <div
|
|
|
+ v-for="(condition, index) in conditions"
|
|
|
+ :key="index"
|
|
|
+ class="condition-item"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ :inline="true"
|
|
|
+ @submit.stop.prevent
|
|
|
+ :model="condition"
|
|
|
+ :rules="conditionRules"
|
|
|
+ class="condition-form"
|
|
|
+ >
|
|
|
+ <el-form-item
|
|
|
+ :label="index === 0 ? '条件:' : '附加条件:'"
|
|
|
+ class="condition-label"
|
|
|
+ >
|
|
|
+ <el-row :gutter="20" class="condition-row">
|
|
|
+ <!-- 报警设备 -->
|
|
|
+ <el-col :span="8" class="condition-col">
|
|
|
+ <div class="condition-field">
|
|
|
+ <span class="field-name">报警设备:</span>
|
|
|
+ <el-form-item prop="Left" class="field-input">
|
|
|
+ <el-select v-model="condition.Left" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in alarmEquipment"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 报警类型 -->
|
|
|
+ <el-col :span="8" class="condition-col">
|
|
|
+ <div class="condition-field">
|
|
|
+ <span class="field-name">报警类型:</span>
|
|
|
+ <el-form-item prop="inthe" class="field-input">
|
|
|
+ <el-select v-model="condition.inthe" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in alarmType"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <!-- 报警来源 -->
|
|
|
+ <el-col :span="8" class="condition-col">
|
|
|
+ <div class="condition-field">
|
|
|
+ <span class="field-name">报警来源:</span>
|
|
|
+ <el-form-item prop="Right" class="field-input">
|
|
|
+ <el-select v-model="condition.Right" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in alarmSource"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 删除按钮 -->
|
|
|
+ <el-button
|
|
|
+ v-if="conditions.length > 1"
|
|
|
+ type="primary"
|
|
|
+ icon="ele-Minus"
|
|
|
+ size="small"
|
|
|
+ @click="removeCondition(index)"
|
|
|
+ class="remove-btn"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-form-item label="是否启用" prop="isActive" class="form-item">
|
|
|
<el-select v-model="formData.isActive" placeholder="请选择启用状态">
|
|
|
<el-option label="启用" :value="true"></el-option>
|
|
|
<el-option label="停用" :value="false"></el-option>
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="启用时间" prop="activationTime">
|
|
|
+
|
|
|
+ <el-form-item label="启用时间" prop="activationTime" class="form-item">
|
|
|
<el-date-picker
|
|
|
v-model="formData.activationTime"
|
|
|
type="datetime"
|
|
|
placeholder="请选择启用时间"
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ :editable="false"
|
|
|
+ :input-readonly="true"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="停用时间" prop="deactivationTime">
|
|
|
+
|
|
|
+ <el-form-item label="停用时间" prop="deactivationTime" class="form-item">
|
|
|
<el-date-picker
|
|
|
v-model="formData.deactivationTime"
|
|
|
type="datetime"
|
|
|
placeholder="请选择停用时间"
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
+ :editable="false"
|
|
|
+ :input-readonly="true"
|
|
|
></el-date-picker>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="备注" prop="remark">
|
|
|
+
|
|
|
+ <el-form-item label="备注" prop="remark" class="form-item">
|
|
|
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注信息"></el-input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -165,17 +260,16 @@
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <script setup lang="ts">
|
|
|
- import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
|
|
|
- import eventBus from "/@/utils/mitt";
|
|
|
- import {Api} from "/@/api/admin/AlarmService/alarmLevel";
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { onBeforeMount, onMounted, reactive, ref, watch, nextTick } from "vue";
|
|
|
+import eventBus from "/@/utils/mitt";
|
|
|
+import { Api } from "/@/api/admin/AlarmService/alarmLevel";
|
|
|
import { AlarmLevelDto } from "/@/api/admin/AlarmService/alarmLevelDto";
|
|
|
import type { pageInput, ResultOutputPageOutputAlarmLevelDto } from "/@/api/admin/AlarmService/alarmLevelDto";
|
|
|
import { DictApi } from "/@/api/admin/Dict";
|
|
|
-
|
|
|
-
|
|
|
import { useDynamicPageSize } from "/@/composables/useDynamicPageSize";
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
+import { ElMessage, type FormRules } from "element-plus";
|
|
|
import { PageInputDictGetPageDto, ResultOutputPageOutputDictGetPageOutput } from "/@/api/admin/data-contracts";
|
|
|
|
|
|
interface DictItem {
|
|
@@ -196,44 +290,66 @@ const dialogVisible = ref(false);
|
|
|
const isEdit = ref(false); // 是否为编辑模式
|
|
|
const currentRowId = ref<number | undefined>(undefined); // 当前操作的记录ID
|
|
|
|
|
|
-/**数据对象*/
|
|
|
- const state = reactive({
|
|
|
- /**加载显示 */
|
|
|
- loading: false,
|
|
|
- /**条件查询模块 */
|
|
|
- filter: {
|
|
|
-/**报警等级名称 */
|
|
|
- alarmLevelName: "",
|
|
|
-/**规则条件 */
|
|
|
- conditionsJson: "",
|
|
|
-/**是否启用 */
|
|
|
- isActive: undefined,
|
|
|
- level:undefined
|
|
|
- },
|
|
|
- /**表格信息 */
|
|
|
-tableModel: [] as AlarmLevelDto[],
|
|
|
+// 报警条件相关状态 - 默认不显示
|
|
|
+const showAlarmConditions = ref(false);
|
|
|
+const conditions = ref([{
|
|
|
+ Left: '',
|
|
|
+ inthe: '',
|
|
|
+ Right: ''
|
|
|
+}]);
|
|
|
+
|
|
|
+// 报警条件验证规则
|
|
|
+const conditionRules = reactive<FormRules>({
|
|
|
+ Left: [{ required: true, message: '请选择报警设备', trigger: 'change' }],
|
|
|
+ inthe: [{ required: true, message: '请选择报警类型', trigger: 'change' }],
|
|
|
+ Right: [{ required: true, message: '请选择报警来源', trigger: 'change' }]
|
|
|
+});
|
|
|
+
|
|
|
+// 报警设备、类型和来源选项
|
|
|
+const alarmEquipment = ["安全装置", "编码器", "计控主板", "监控微处理器", "智能型控制阀",
|
|
|
+ "油气回收控制板", "显示屏", "计量器", "加油机", "油枪"];
|
|
|
+const alarmType = ["加油机离线", "通信异常", "非法部件", "厂商不符", "绑定错误",
|
|
|
+ "监控微处理器报警", "安全装置报警", "加油机报警", "检定"];
|
|
|
+const alarmSource = ['云平台', '安全装置'];
|
|
|
|
|
|
+/**数据对象 */
|
|
|
+const state = reactive({
|
|
|
+ /**加载显示 */
|
|
|
+ loading: false,
|
|
|
+ /**条件查询模块 */
|
|
|
+ filter: {
|
|
|
+ /**报警等级名称 */
|
|
|
+ alarmLevelName: "",
|
|
|
+ /**规则条件 */
|
|
|
+ conditionsJson: "",
|
|
|
+ /**是否启用 */
|
|
|
+ isActive: undefined,
|
|
|
+ level: undefined
|
|
|
+ },
|
|
|
+ /**表格信息 */
|
|
|
+ tableModel: [] as AlarmLevelDto[],
|
|
|
alarmLevelDict: [] as DictItem[], // 报警等级字典数据
|
|
|
- /**动态表头 */
|
|
|
- dynamicColumns: [
|
|
|
-{ prop: 'alarmLevelName', label: '报警等级名称' },
|
|
|
-{ prop: 'level', label: '报警等级' },
|
|
|
-{ prop: 'conditionsJson', label: '规则条件' },
|
|
|
-{ prop: 'isActive', label: '是否启用' },
|
|
|
-{ prop: 'activationTime', label: '启用时间' },
|
|
|
-{ prop: 'deactivationTime', label: '停用时间' },
|
|
|
-{ prop: 'remark', label: '备注' },],
|
|
|
-/**分页标识 */
|
|
|
- pageInput:{
|
|
|
- CurrentPage: 1,
|
|
|
- PageSize: 10,
|
|
|
- } as pageInput,
|
|
|
- /**分页总数 */
|
|
|
- total: 0,
|
|
|
-})
|
|
|
+ /**动态表头 */
|
|
|
+ dynamicColumns: [
|
|
|
+ { prop: 'alarmLevelName', label: '报警等级名称' },
|
|
|
+ { prop: 'level', label: '报警等级' },
|
|
|
+ { prop: 'conditionsJson', label: '规则条件' },
|
|
|
+ { prop: 'isActive', label: '是否启用' },
|
|
|
+ { prop: 'activationTime', label: '启用时间' },
|
|
|
+ { prop: 'deactivationTime', label: '停用时间' },
|
|
|
+ { prop: 'remark', label: '备注' },
|
|
|
+ ],
|
|
|
+ /**分页标识 */
|
|
|
+ pageInput: {
|
|
|
+ CurrentPage: 1,
|
|
|
+ PageSize: 10,
|
|
|
+ } as pageInput,
|
|
|
+ /**分页总数 */
|
|
|
+ total: 0,
|
|
|
+});
|
|
|
|
|
|
// 表单数据
|
|
|
-const formData = reactive<AlarmLevelDto>({
|
|
|
+const formData = reactive<AlarmLevelDto & { conditionsJson?: string }>({
|
|
|
alarmLevelName: "",
|
|
|
level: undefined,
|
|
|
conditionsJson: "",
|
|
@@ -244,13 +360,11 @@ const formData = reactive<AlarmLevelDto>({
|
|
|
});
|
|
|
|
|
|
// 表单验证规则
|
|
|
-const rules = {
|
|
|
+const rules = reactive<FormRules>({
|
|
|
alarmLevelName: [{ required: true, message: "请输入报警等级名称", trigger: "blur" }],
|
|
|
- level: [{ required: true, message: "请输入报警等级", trigger: "blur" }],
|
|
|
- conditionsJson: [{ required: true, message: "请输入规则条件", trigger: "blur" }],
|
|
|
+ level: [{ required: true, message: "请选择报警等级", trigger: "change" }],
|
|
|
isActive: [{ required: true, message: "请选择启用状态", trigger: "change" }],
|
|
|
-};
|
|
|
-
|
|
|
+});
|
|
|
|
|
|
onMounted(() => {
|
|
|
// 初始化分页大小
|
|
@@ -264,7 +378,6 @@ onMounted(() => {
|
|
|
eventBus.on('refreshView', async () => {
|
|
|
await init();
|
|
|
});
|
|
|
- console.log();
|
|
|
});
|
|
|
|
|
|
// 获取报警等级字典数据的函数
|
|
@@ -276,7 +389,7 @@ const fetchAlarmLevelDict = async () => {
|
|
|
CurrentPage: 1,
|
|
|
PageSize: 100,
|
|
|
Filter: {
|
|
|
- dictTypeId: 685895581360197,
|
|
|
+ dictTypeId: 685895581360197,
|
|
|
name: "" // 可选的名称筛选
|
|
|
}
|
|
|
};
|
|
@@ -298,23 +411,23 @@ const fetchAlarmLevelDict = async () => {
|
|
|
state.loading = false;
|
|
|
}
|
|
|
};
|
|
|
- /**
|
|
|
- * 监听变换
|
|
|
- */
|
|
|
- watch(() => {})
|
|
|
+
|
|
|
+/** 监听变换 */
|
|
|
+watch(() => { })
|
|
|
+
|
|
|
/**条件查询 */
|
|
|
- const onQuery = () => {
|
|
|
- init()
|
|
|
- }
|
|
|
+const onQuery = () => {
|
|
|
+ init();
|
|
|
+};
|
|
|
|
|
|
- /**初始化 */
|
|
|
- const init = async () => {
|
|
|
- state.loading = true
|
|
|
- const res: any = await new Api().getList({ ...pageState.pageInput, Filter: state.filter })
|
|
|
- state.tableModel = res?.data?.list ?? []
|
|
|
- state.total = res?.data?.total ?? 0
|
|
|
- state.loading = false
|
|
|
- }
|
|
|
+/**初始化 */
|
|
|
+const init = async () => {
|
|
|
+ state.loading = true;
|
|
|
+ const res: any = await new Api().getList({ ...pageState.pageInput, Filter: state.filter });
|
|
|
+ state.tableModel = res?.data?.list ?? [];
|
|
|
+ state.total = res?.data?.total ?? 0;
|
|
|
+ state.loading = false;
|
|
|
+};
|
|
|
|
|
|
/** 打开添加/编辑弹窗 */
|
|
|
const openDialog = (row: AlarmLevelDto | undefined) => {
|
|
@@ -329,15 +442,32 @@ const openDialog = (row: AlarmLevelDto | undefined) => {
|
|
|
// 填充表单数据
|
|
|
formData.alarmLevelName = row.alarmLevelName || "";
|
|
|
formData.level = row.level || 0;
|
|
|
- formData.conditionsJson = row.conditionsJson || "";
|
|
|
formData.isActive = row.isActive || undefined;
|
|
|
formData.activationTime = row.activationTime || "";
|
|
|
formData.deactivationTime = row.deactivationTime || "";
|
|
|
formData.remark = row.remark || "";
|
|
|
+
|
|
|
+ // 解析条件数据 - 有数据才显示
|
|
|
+ if (row.conditionsJson) {
|
|
|
+ try {
|
|
|
+ const parsedConditions = JSON.parse(row.conditionsJson);
|
|
|
+ conditions.value = parsedConditions.length ? parsedConditions : [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = true;
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析条件数据失败:', e);
|
|
|
+ conditions.value = [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ conditions.value = [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = false;
|
|
|
+ }
|
|
|
} else {
|
|
|
- // 添加模式
|
|
|
+ // 添加模式 - 默认不显示条件
|
|
|
isEdit.value = false;
|
|
|
currentRowId.value = undefined;
|
|
|
+ conditions.value = [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = false;
|
|
|
}
|
|
|
|
|
|
// 显示弹窗
|
|
@@ -347,13 +477,16 @@ const openDialog = (row: AlarmLevelDto | undefined) => {
|
|
|
/** 重置表单 */
|
|
|
const resetForm = () => {
|
|
|
formData.alarmLevelName = "";
|
|
|
- formData.level = 0;
|
|
|
+ formData.level = undefined;
|
|
|
formData.conditionsJson = "";
|
|
|
formData.isActive = undefined;
|
|
|
formData.activationTime = "";
|
|
|
formData.deactivationTime = "";
|
|
|
formData.remark = "";
|
|
|
|
|
|
+ conditions.value = [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = false; // 重置为不显示
|
|
|
+
|
|
|
if (formRef.value) {
|
|
|
formRef.value.validate(() => {});
|
|
|
}
|
|
@@ -364,17 +497,72 @@ const handleDialogClose = () => {
|
|
|
dialogVisible.value = false;
|
|
|
};
|
|
|
|
|
|
+/** 添加报警条件 - 点击加号才显示 */
|
|
|
+const addCondition = () => {
|
|
|
+ if (!showAlarmConditions.value) {
|
|
|
+ // 首次点击加号,显示条件区域
|
|
|
+ showAlarmConditions.value = true;
|
|
|
+ } else {
|
|
|
+ // 已有条件时,验证最后一个条件是否完整
|
|
|
+ const lastCondition = conditions.value[conditions.value.length - 1];
|
|
|
+ if (!lastCondition.Left || !lastCondition.inthe || !lastCondition.Right) {
|
|
|
+ ElMessage.warning('请先填写当前条件的所有字段');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 添加新条件
|
|
|
+ conditions.value.push({
|
|
|
+ Left: '',
|
|
|
+ inthe: '',
|
|
|
+ Right: ''
|
|
|
+ });
|
|
|
+
|
|
|
+ // 触发重渲染以更新验证规则
|
|
|
+ nextTick(() => {
|
|
|
+ if (formRef.value) {
|
|
|
+ formRef.value.validate(() => {});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/** 删除报警条件 */
|
|
|
+const removeCondition = (index: number) => {
|
|
|
+ if (conditions.value.length <= 1) {
|
|
|
+ // 只剩一个条件时,隐藏整个区域
|
|
|
+ conditions.value = [{ Left: '', inthe: '', Right: '' }];
|
|
|
+ showAlarmConditions.value = false;
|
|
|
+ } else {
|
|
|
+ // 移除指定条件
|
|
|
+ conditions.value.splice(index, 1);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
/** 提交表单 */
|
|
|
const handleSubmit = () => {
|
|
|
if (!formRef.value) return;
|
|
|
|
|
|
+ // 验证条件是否完整(如果显示的话)
|
|
|
+ if (showAlarmConditions.value) {
|
|
|
+ for (const cond of conditions.value) {
|
|
|
+ if (!cond.Left || !cond.inthe || !cond.Right) {
|
|
|
+ ElMessage.warning('请填写所有条件的字段');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
formRef.value.validate(async (isValid) => {
|
|
|
if (isValid) {
|
|
|
try {
|
|
|
+ // 将条件转换为JSON字符串(没显示则为空)
|
|
|
+ formData.conditionsJson = showAlarmConditions.value
|
|
|
+ ? JSON.stringify(conditions.value)
|
|
|
+ : "";
|
|
|
+
|
|
|
let res: any;
|
|
|
|
|
|
if (isEdit.value && currentRowId.value) {
|
|
|
- // 编辑请求 - 使用update接口而不是add接口
|
|
|
+ // 编辑请求
|
|
|
formData.id = currentRowId.value;
|
|
|
res = await new Api().addAlarmLevel(formData);
|
|
|
ElMessage.success('修改成功');
|
|
@@ -432,6 +620,7 @@ const handleDelete = async (id: number) => {
|
|
|
state.loading = false;
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
/** 页条大小变化 */
|
|
|
const onSizeChange = (val: number) => {
|
|
|
state.pageInput.PageSize = val;
|
|
@@ -448,13 +637,12 @@ const onCurrentChange = (val: number) => {
|
|
|
<style scoped lang="scss">
|
|
|
.el-input,
|
|
|
.el-select {
|
|
|
- width: 240px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
-/* 输入框标签固定四个字符宽度 */
|
|
|
+/* 输入框标签固定宽度 */
|
|
|
::v-deep .el-form-item__label {
|
|
|
- // 字体大小14,4个字符,12px右间距
|
|
|
- width: 14*4px+12px;
|
|
|
+ width: 100px;
|
|
|
justify-content: start;
|
|
|
}
|
|
|
|
|
@@ -466,4 +654,125 @@ const onCurrentChange = (val: number) => {
|
|
|
.el-link {
|
|
|
padding: 5px;
|
|
|
}
|
|
|
- </style>
|
|
|
+
|
|
|
+// 弹窗表单样式优化
|
|
|
+.dialog-form {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+// 条件配置区域样式
|
|
|
+.condition-section {
|
|
|
+ width: 100%;
|
|
|
+ margin: 15px 0;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #e5e7eb;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ border-bottom: 1px dashed #e5e7eb;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.add-btn {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.conditions-container {
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-item {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #f9fafb;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-form {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-label {
|
|
|
+ min-width: 80px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-row {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-col {
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.condition-field {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.field-name {
|
|
|
+ width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 10px;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.field-input {
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.remove-btn {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .condition-form .el-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .condition-form .el-select .el-input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// 日期选择器样式优化
|
|
|
+::v-deep .el-date-editor .el-input {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+// 禁用手动输入的日期选择器样式
|
|
|
+::v-deep .el-date-editor .el-input__inner[readonly] {
|
|
|
+ background-color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|