告警信息

SafeCampus.WEB/src/api/modules/warn/zjrq.ts

@@ -38,6 +38,10 @@ const warnZJRQApi = {
   warnGroup(params: ReqId) {
     return http.get("getInfo", params);
   },
+  /** 获取告警分组 */
+  warnType(params: ReqId) {
+    return http.get("getAlarmType", params);
+  },
 };
 
 export { warnZJRQApi };

SafeCampus.WEB/src/views/monitor/live/components/moveForm.vue

@@ -0,0 +1,106 @@
+<!-- 
+ * @Description: 表单
+ * @Author: huguodong 
+ * @Date: 2023-12-15 15:45:28
+!-->
+<template>
+  <div>
+    <form-container v-model="visible" title="选择分组" form-size="600px">
+      <el-form
+        ref="liveFormRef"
+        :rules="rules"
+        :disabled="orgProps.disabled"
+        :model="orgProps.record"
+        :hide-required-asterisk="orgProps.disabled"
+        label-width="auto"
+        label-suffix=" :"
+      >
+        <s-form-item label="所属学校" prop="parentId">
+          <org-selector v-model:org-value="orgProps.record.parentId" :org-tree-api="bizOrgApi.tree" :show-all="false" />
+        </s-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="onClose"> 取消 </el-button>
+        <el-button v-show="!orgProps.disabled" type="primary" @click="handleSubmit"> 确定 </el-button>
+      </template>
+    </form-container>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SysOrg, SysUser, bizOrgApi, bizPositionApi, sysRoleApi, bizUserApi } from "@/api";
+import { FormOptEnum, SysDictEnum } from "@/enums";
+import { required } from "@/utils/formRules";
+import { FormInstance } from "element-plus";
+import { useDictStore } from "@/stores/modules";
+
+const visible = ref(false); //是否显示表单
+const dictStore = useDictStore(); //字典仓库
+
+// 通用状态选项
+const statusOptions = dictStore.getDictList(SysDictEnum.COMMON_STATUS);
+
+// 表单参数
+const orgProps = reactive<FormProps.Base<SysOrg.SysOrgInfo>>({
+  opt: FormOptEnum.ADD,
+  record: {},
+  disabled: false
+});
+
+// 表单验证规则
+const rules = reactive({
+  parentId: [required("请选择所属学校")]
+});
+
+/**
+ * 打开表单
+ * @param props 表单参数
+ */
+function omMove(props: FormProps.Base<SysOrg.SysOrgInfo>) {
+  Object.assign(orgProps, props); //合并参数
+  if (props.opt == FormOptEnum.ADD) {
+    //如果是新增,设置默认值
+    orgProps.record.sortCode = 99;
+    // orgProps.record.status = statusOptions[0].value;
+  }
+  visible.value = true; //显示表单
+  if (props.record.id) {
+    //如果传了id，就去请求api获取record
+    bizOrgApi.detail({ id: props.record.id }).then(res => {
+      orgProps.record = res.data;
+    });
+  }
+}
+
+// 提交数据（新增/编辑）
+const liveFormRef = ref<FormInstance>();
+/** 提交表单 */
+async function handleSubmit() {
+  liveFormRef.value?.validate(async valid => {
+    if (!valid) return; //表单验证失败
+    console.log(orgProps);
+    return;
+    //提交表单
+    await bizOrgApi
+      .submitForm(orgProps.record, orgProps.record.id != undefined)
+      .then(() => {
+        orgProps.successful!(); //调用父组件的successful方法
+      })
+      .finally(() => {
+        onClose();
+      });
+  });
+}
+
+/** 关闭表单*/
+function onClose() {
+  visible.value = false;
+}
+
+// 暴露给父组件的方法
+defineExpose({
+  omMove
+});
+</script>
+
+<style lang="scss" scoped></style>

SafeCampus.WEB/src/views/monitor/live/index.vue

@@ -58,7 +58,7 @@
             :disabled="!scope.isSelected"
             @click="onDelete(scope.selectedListIds, '删除所选数据')"
           />
-          <el-button plain @click="move(scope.selectedListIds, '移动至分组')" type="success">移动至分组</el-button>
+          <el-button plain @click="omMove(FormOptEnum.ADD)" type="success">移动至分组</el-button>
         </template>
         <!-- 表格 菜单类型 按钮 -->
         <!-- <template #menuType="scope">
@@ -100,7 +100,8 @@
       <Form ref="formRef" />
       <!-- 人员选择 -->
       <userForm ref="userFormRef" />
-
+      <!-- 移动至分组 -->
+      <moveForm ref="moveFormRef" />
       <!-- 视频详情 -->
       <el-dialog v-model="visible" :title="detailData.title" width="830px" :before-close="closeGroup">
         <div>
@@ -139,6 +140,7 @@
   import { useDictStore } from "@/stores/modules";
   import Form from "./components/form.vue";
   import userForm from "./components/userForm.vue";
+  import moveForm from "./components/moveForm.vue";
   import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums";
   // import './aliyun-rts-sdk.js'
   import './ali.js'
@@ -291,29 +293,13 @@ const remove = (node: Node, data: Tree) => {
     await useHandleData(monitorLIVEApi.delete, { ids }, msg);
     RefreshTable();
   }
-  async function move(ids: string[], msg: string) {
-    return new Promise((resolve, reject) => {
-    ElMessageBox.confirm(`是否${msg}?`, "温馨提示", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-      type: 'warning',
-      draggable: true
-    })
-      .then(async () => {
 
-        // const res = await api(params);
-        // if (!res) return reject(false);
-        // ElMessage({
-        //   type: "success",
-        //   message: `${message}成功!`
-        // });
-        resolve(true);
-      })
-      .catch(() => {
-        //啥也不干
-      });
-    })
-  }
+
+
+  const moveFormRef = ref<InstanceType<typeof Form> | null>(null);
+    function omMove(opt: FormOptEnum, record: {} | SysOrg.SysOrgInfo = {}) {
+      moveFormRef.value?.omMove({ opt: opt, record: record, successful: RefreshTable });
+}
   /**
    * 刷新表格
    */

SafeCampus.WEB/src/views/warn/zjrq/index.vue

@@ -110,7 +110,28 @@ import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
 import { useDictStore } from "@/stores/modules";
 import { FormOptEnum, SysDictEnum, MenuTypeDictEnum } from "@/enums";
 const visible = ref(false); //是否显示表单
-
+onMounted(() => {
+  getWarnTypeList();
+});
+let warnOptions = ref([]);
+function getWarnTypeList() {
+  setTimeout(async ()=> {
+    await warnZJRQApi.warnType({}).then(res => {
+    let { code, data } = res;
+   
+    if (code == 200) {
+      warnOptions.value = data.map(item => {
+        return {
+          label: item.name,
+          value: item.code
+        };
+      })
+      
+    }
+  });
+  })
+  
+}
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTable = ref<ProTableInstance>();
 const dictStore = useDictStore();
@@ -118,7 +139,7 @@ const dictStore = useDictStore();
 // 表格配置项
 const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
   { type: "selection", fixed: "left", width: 80 },
-  { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false },
+  // { prop: "searchKey", label: "关键字", search: { el: "input" }, isShow: false },
   // { prop: "cameraId", label: "所属摄像头", search: { el: "input" }, isShow: false },
   // { prop: "alarmTypeDesc", label: "告警类型", search: { el: "input" }, isShow: false },
   {
@@ -151,21 +172,75 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
     }
   },
   {
-    prop: "alarmTypeDesc",
-    label: "告警类型"
+    prop: "alarmType",
+    label: "告警类型",
+    enum: warnOptions, 
+    search: { 
+      el: "tree-select",
+      // span: 1
+    } 
   },
   {
     prop: "warnHand",
     label: "处理状态",
+    enum: [
+      {
+        label: "已处理",
+        value: 1
+      },
+      {
+        label: "未处理",
+        value: 0
+      }
+    ], 
     render: scope => {
       if (scope.row.warnHand === 1) {
         return "已处理";
       } else {
         return "未处理";
       }
-    }
+    },
+    search: { 
+      el: "tree-select",
+      // span: 1 
+    } 
   },
-  { prop: "tick", label: "预警时间" },
+  { 
+    prop: "tick", 
+    label: "预警时间",
+    search: {
+      // 自定义 search 组件
+      span: 1,
+      render: ({ searchParam }) => {
+        return (
+          <div class="flex-center">
+            <el-date-picker
+              style="150px; flex-shink: 1;"
+              v-model={searchParam.StartTick}
+              type="datetime"
+              placeholder="开始时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              date-format="YYYY-MM-DD"
+              time-format="HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+            <span class="mr10 ml10">-</span>
+            <el-date-picker
+              style="150px;"
+              v-model={searchParam.EndTick}
+              type="datetime"
+              placeholder="结束时间"
+              format="YYYY-MM-DD HH:mm:ss"
+              date-format="YYYY-MM-DD"
+              time-format="HH:mm:ss"
+              value-format="YYYY-MM-DD HH:mm:ss"
+            />
+          </div>
+        );
+      }
+    }
+
+   },
   { prop: "operation", label: "操作", width: 250, fixed: "right" }
 ];