|
|
@@ -0,0 +1,503 @@
|
|
|
+<template>
|
|
|
+ <el-form :inline="true" :model="formInline" ref="formRef" class="form-inline" label-position="top">
|
|
|
+ <div style="display: flex;flex-direction: column;">
|
|
|
+ <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="20">
|
|
|
+ <el-radio-group v-model="radio1">
|
|
|
+ <el-radio-button label="日常策略" value="日常策略" plain/>
|
|
|
+ <el-radio-button label="任务策略" value="任务策略" plain/>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" v-if="radio1==='任务策略'">
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-button type="primary" plain style="margin-top: 15px;" @click="handleUpdateTask">新增</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" v-if="radio1==='日常策略'">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 58vh" >
|
|
|
+ <!-- 表格主体 -->
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData" size="small">
|
|
|
+ <template v-for="item in columns" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ <template v-if="item.prop === 'operation'">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="编辑"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button type="primary" link @click="handleUpdate">
|
|
|
+ <el-icon >
|
|
|
+ <Edit />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" v-if="radio1==='任务策略'">
|
|
|
+ <el-col :span="24">
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 53vh" >
|
|
|
+ <!-- 表格主体 -->
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData2" size="small">
|
|
|
+ <template v-for="item in columns2" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="disposition-bottom">
|
|
|
+ <el-button > 取消 </el-button>
|
|
|
+ <el-button type="primary" plain> 上一步 </el-button>
|
|
|
+ <el-button type="primary"> 下一步 </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <!-- 日常策略 添加或修改对话框 -->
|
|
|
+ <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body class="tactics">
|
|
|
+ <el-form ref="formRef" :model="dailyForm" :rules="rules" >
|
|
|
+ <div class="disposition-title">警告设置</div>
|
|
|
+ <el-form-item label="触发条件:" prop="relationship" style="display: flex;align-items: center">
|
|
|
+ <el-radio-group v-model="dailyForm.relationship">
|
|
|
+ <el-radio value="1" size="large">条件并且</el-radio>
|
|
|
+ <el-radio value="2" size="large">条件或者</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="触发周期:" prop="cycle" style="display: flex;align-items: center">
|
|
|
+ <div class="flex-center">
|
|
|
+ <el-input v-model="dailyForm.cycle" style="width: 150px" />
|
|
|
+ <div style="margin-left: 10px">分钟</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 160px">
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData3" size="small" >
|
|
|
+ <template v-for="item in columns3" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ <template v-if="item.prop === 'operation'">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button type="primary" link >
|
|
|
+ <el-icon >
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="disposition-title">消警设置</div>
|
|
|
+ <el-form-item label="解除条件:" prop="relationship" style="display: flex;align-items: center">
|
|
|
+ <el-radio-group v-model="dailyForm.relationship">
|
|
|
+ <el-radio value="1" size="large">条件并且</el-radio>
|
|
|
+ <el-radio value="2" size="large">条件或者</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="解除周期:" prop="cycle" style="display: flex;align-items: center">
|
|
|
+ <div class="flex-center">
|
|
|
+ <el-input v-model="dailyForm.cycle" style="width: 150px" />
|
|
|
+ <div style="margin-left: 10px">分钟</div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 160px">
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData4" size="small" >
|
|
|
+ <template v-for="item in columns4" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ <template v-if="item.prop === 'operation'">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button type="primary" link >
|
|
|
+ <el-icon >
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 任务策略 添加或修改对话框 -->
|
|
|
+ <el-dialog :title="dialogTask.title" v-model="dialogTask.visible" width="800px" append-to-body class="tactics">
|
|
|
+ <el-form ref="formRef" :model="taskForm" :rules="rules" style="overflow: auto;height: 70vh;overflow-x: hidden;">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="任务名称:" prop="name" style="display: flex;align-items: center">
|
|
|
+ <el-input v-model="taskForm.name" style="width: 240px" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 10px">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="开始时间:" prop="startTime" style="display: flex;align-items: center">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 240px"
|
|
|
+ v-model="taskForm.startTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="结束时间:" prop="endTime" style="display: flex;align-items: center">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 240px"
|
|
|
+ v-model="taskForm.endTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item style="display: flex;align-items: center; margin-top: 10px">
|
|
|
+ <el-radio-group v-model="taskForm.type">
|
|
|
+ <el-radio-button label="能见度" value="能见度" plain/>
|
|
|
+ <el-radio-button label="风速" value="风速" plain/>
|
|
|
+ <el-radio-button label="大气电场" value="大气电场" plain/>
|
|
|
+ <el-radio-button label="云量" value="云量" plain/>
|
|
|
+ <el-radio-button label="云高" value="云高" plain/>
|
|
|
+ <el-radio-button label="温度" value="温度" plain/>
|
|
|
+ <el-radio-button label="湿度" value="湿度" plain/>
|
|
|
+ <el-radio-button label="小时雨量" value="小时雨量" plain/>
|
|
|
+ <el-radio-button label="累年平均值" value="累年平均值" plain/>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="disposition-title">警告设置</div>
|
|
|
+ <el-form-item label="触发关系:" prop="relationship" style="display: flex;align-items: center">
|
|
|
+ <el-radio-group v-model="dailyForm.relationship">
|
|
|
+ <el-radio value="1" size="large">条件并且</el-radio>
|
|
|
+ <el-radio value="2" size="large">条件或者</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="告警方式:" prop="manner" style="display: flex;align-items: center">
|
|
|
+ <el-radio-group v-model="dailyForm.manner">
|
|
|
+ <el-radio value="1" size="large">字幕提示</el-radio>
|
|
|
+ <el-radio value="2" size="large">声音提示</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 160px">
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData3" size="small" >
|
|
|
+ <template v-for="item in columns3" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ <template v-if="item.prop === 'operation'">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button type="primary" link >
|
|
|
+ <el-icon >
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="disposition-title">消警设置</div>
|
|
|
+ <el-form-item label="触发关系:" prop="relationship" style="display: flex;align-items: center">
|
|
|
+ <el-radio-group v-model="dailyForm.relationship">
|
|
|
+ <el-radio value="1" size="large">条件并且</el-radio>
|
|
|
+ <el-radio value="2" size="large">条件或者</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button type="primary" plain style="margin-top: 10px">新增</el-button>
|
|
|
+ <div class="table-box" style="margin-top: 10px;height: 160px">
|
|
|
+ <el-table stripe ref="tableRef" :border="true" :data="processTableData4" size="small" >
|
|
|
+ <template v-for="item in columns4" :key="item">
|
|
|
+ <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
|
|
|
+ <template v-if="item.prop === 'operation'">
|
|
|
+ <el-tooltip
|
|
|
+ class="box-item"
|
|
|
+ effect="dark"
|
|
|
+ content="删除"
|
|
|
+ placement="top"
|
|
|
+ >
|
|
|
+ <el-button type="primary" link >
|
|
|
+ <el-icon >
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 无数据 -->
|
|
|
+ <template #empty>
|
|
|
+ <div class="table-empty">
|
|
|
+ <slot name="empty">
|
|
|
+ <img src="@/assets/images/notData.png" alt="notData" />
|
|
|
+ <div>暂无数据</div>
|
|
|
+ </slot>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="tsx">
|
|
|
+import {reactive, ref} from "vue";
|
|
|
+import {ColumnProps} from "@/components/ProTable/interface";
|
|
|
+
|
|
|
+const rules = ref<any>(
|
|
|
+ {
|
|
|
+ name: [{ required: true, message: "任务名称不能为空", trigger: "blur" }],
|
|
|
+ startTime: [{ required: true, message: "开始时间不能为空", trigger: "blur" }],
|
|
|
+ endTime: [{ required: true, message: "结束时间不能为空", trigger: "blur" }],
|
|
|
+ }
|
|
|
+);
|
|
|
+const dialog = reactive<any>({
|
|
|
+ visible: false,
|
|
|
+ title: '',
|
|
|
+ isMode: true
|
|
|
+});
|
|
|
+
|
|
|
+const dialogTask = reactive<any>({
|
|
|
+ visible: false,
|
|
|
+ title: '',
|
|
|
+ isMode: true
|
|
|
+});
|
|
|
+
|
|
|
+const dailyForm = ref<any>({
|
|
|
+ relationship: "1",
|
|
|
+ cycle:"",
|
|
|
+ manner:""
|
|
|
+});
|
|
|
+
|
|
|
+const taskForm = ref<any>({
|
|
|
+ relationship: "1",
|
|
|
+ cycle:"",
|
|
|
+ manner:"",
|
|
|
+ name:"",
|
|
|
+ startTime:"",
|
|
|
+ endTime:"",
|
|
|
+ type:""
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+const handleUpdateTask = async (row?: any) => {
|
|
|
+ reset();
|
|
|
+ dialogTask.visible = true;
|
|
|
+ dialogTask.title = "策略管理";
|
|
|
+ dialogTask.isMode = false;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/** 修改按钮操作 */
|
|
|
+const handleUpdate = async (row?: any) => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = true;
|
|
|
+ dialog.title = "策略管理";
|
|
|
+ dialog.isMode = false;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/** 取消按钮 */
|
|
|
+const cancel = () => {
|
|
|
+ reset();
|
|
|
+ dialog.visible = false;
|
|
|
+}
|
|
|
+/** 表单重置 */
|
|
|
+const reset = () => {
|
|
|
+ dailyForm.value = { ...dailyForm };
|
|
|
+ formRef.value?.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+const formRef = ref<any>();
|
|
|
+const formInline = ref<any>({
|
|
|
+
|
|
|
+})
|
|
|
+
|
|
|
+/** 提交按钮 */
|
|
|
+const submitForm = () => {
|
|
|
+ formRef.value?.validate(async (valid: boolean) => {
|
|
|
+ if (valid) {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const radio1 = ref('日常策略')
|
|
|
+
|
|
|
+const processTableData = ref([
|
|
|
+ {
|
|
|
+ a: "能见度",
|
|
|
+ d: "1",
|
|
|
+ e: "告警时间",
|
|
|
+ f: "字幕告警",
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+// 表格配置项
|
|
|
+const columns = reactive<ColumnProps[]>([
|
|
|
+ { prop: "a", label: "策略名称"},
|
|
|
+ { prop: "b", label: "告警条件"},
|
|
|
+ { prop: "c", label: "消警条件" },
|
|
|
+ { prop: "d", label: "告警时间" },
|
|
|
+ { prop: "e", label: "消警时间" },
|
|
|
+ { prop: "f", label: "告警方式" },
|
|
|
+ { prop: "operation", label: "操作", width:150,align: 'center' }
|
|
|
+]);
|
|
|
+
|
|
|
+const processTableData2 = ref([
|
|
|
+
|
|
|
+]);
|
|
|
+
|
|
|
+// 表格配置项
|
|
|
+const columns2 = reactive<ColumnProps[]>([
|
|
|
+ { prop: "a", label: "任务名称"},
|
|
|
+ { prop: "b", label: "开始时间"},
|
|
|
+ { prop: "c", label: "结束时间" },
|
|
|
+ { prop: "d", label: "能见度" },
|
|
|
+ { prop: "e", label: "风速" },
|
|
|
+ { prop: "f", label: "大气电场" },
|
|
|
+ { prop: "g", label: "云量" },
|
|
|
+ { prop: "h", label: "云高" },
|
|
|
+ { prop: "i", label: "气温" },
|
|
|
+ { prop: "j", label: "湿度" },
|
|
|
+ { prop: "k", label: "降水" },
|
|
|
+ { prop: "l", label: "启停" }
|
|
|
+]);
|
|
|
+
|
|
|
+
|
|
|
+const processTableData3 = ref([
|
|
|
+
|
|
|
+]);
|
|
|
+
|
|
|
+// 表格配置项
|
|
|
+const columns3 = reactive<ColumnProps[]>([
|
|
|
+ { prop: "a", label: "告警要素"},
|
|
|
+ { prop: "b", label: "告警条件"},
|
|
|
+ { prop: "c", label: "告警阈值" },
|
|
|
+ { prop: "operation", label: "操作", width:100,align: 'center' }
|
|
|
+]);
|
|
|
+
|
|
|
+const processTableData4 = ref([
|
|
|
+
|
|
|
+]);
|
|
|
+
|
|
|
+// 表格配置项
|
|
|
+const columns4 = reactive<ColumnProps[]>([
|
|
|
+ { prop: "a", label: "消警要素"},
|
|
|
+ { prop: "b", label: "消警条件"},
|
|
|
+ { prop: "c", label: "消警阈值" },
|
|
|
+ { prop: "operation", label: "操作", width:100,align: 'center' }
|
|
|
+]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.table-box{
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.flex-center{
|
|
|
+ display: flex;
|
|
|
+ align-items: center
|
|
|
+}
|
|
|
+
|
|
|
+.tactics .el-form-item--default {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+</style>
|
cxs