fix:告警管理，页面展示调整，接口对接联调

src/views/alarmControl/components/form.vue

+<template>
+    <el-dialog
+      v-model="open"
+      :title="title"
+      width="800px"
+      append-to-body
+    >
+    <el-descriptions
+      class="margin-top"
+      title=""
+      :column="1"
+      :size="size"
+      border
+    >
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            预警等级
+          </div>
+        </template>
+        {{form.alarmLevelId}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            预警类型
+          </div>
+        </template>
+        {{form.alarmType}}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            预警时间
+          </div>
+        </template>
+        {{ changeTime(form.alarmTime) }}
+      </el-descriptions-item>
+      <el-descriptions-item>
+        <template #label>
+          <div class="cell-item">
+            预警图片
+          </div>
+        </template>
+        <ImagePreview style="width: 400px;height: 225px;" :src="form.alarmImg"/>
+      </el-descriptions-item>
+    </el-descriptions>
+      <template #footer>
+        <div class="dialog-footer">
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+</template>
+
+<script setup>
+ import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
+  import moment from 'moment'
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const open = ref(false);
+const title = ref("");
+const ids = ref([]);
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    algorithmEnglish: undefined,
+    algorithmName: undefined,
+    status: undefined
+  },
+  rules: {
+    algorithmName: [{ required: true, message: "算法名称不能为空", trigger: "blur" }],
+    algorithmEnglish: [{ required: true, message: "算法英文不能为空", trigger: "blur" }],
+    algorithmPlat: [{ required: true, message: "岗位顺序不能为空", trigger: "blur" }],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+
+function changeTime(val){
+    return moment(val).format('YYYY/MM/DD HH:mm:ss')
+  }
+
+function getImageUrl(url){
+form.value.cardImg=url
+console.log("🚀 ~ getImageUrl ~ orm.cardImg:", form)
+}
+
+/** 表单重置 */
+function reset() {
+  form.value = {
+    id: undefined,
+    algorithmEnglish: undefined,
+    algorithmName: undefined,
+    algorithmPlat: 0,
+    status: "0",
+    remark: undefined
+  };
+  proxy.resetForm("algRef");
+}
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  open.value = true;
+  title.value = "添加算法";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const id = row.id || ids.value;
+  detailAlarm(id).then(response => {
+    form.value = response.data;
+    open.value = true;
+    title.value = "预警详情";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["algRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != undefined) {
+        updateAlg(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          emit("getList");
+        });
+      } else {
+        addAlg(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          emit("getList");
+        });
+      }
+    }
+  });
+}
+/** 取消按钮 */
+function cancel() {
+  open.value = false;
+  reset();
+}
+defineExpose({ handleAdd , handleUpdate })
+</script>
+
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+:deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+</style>
\ No newline at end of file

src/views/alarmControl/index.vue

@@ -3,7 +3,7 @@
       <TabTitle :text="nowText" />
       <el-row :gutter="10">
         <el-col :xs="24" :sm="24" :md="24" :lg="24">
-          <el-scrollbar height="700px">
+          <el-scrollbar height="730px">
             <el-card class="right-list">
             <template v-slot:header>
               <el-form :model="queryParams" ref="queryRef" :inline="true" >
@@ -28,14 +28,14 @@
                   ></el-date-picker>
                 </el-form-item>
                 <el-form-item label="算法场景" prop="applicationScenarios">
-                  <el-select v-model="queryParams.deptName" placeholder="请选择所属部门" clearable style="width: 200px">
-                      <el-option
-                        v-for="dict in algList"
-                        :key="dict.id"
-                        :label="dict.algorithmName"
-                        :value="dict.id"
-                      />
-                  </el-select>
+                  <el-select v-model="queryParams.applicationScenarios" placeholder="请选择算法场景" clearable style="width: 200px">
+                            <el-option 
+                            v-for="disc in algorithm_scen"
+                            :key="disc.value"
+                            :label="disc.label"
+                             :value="disc.value"
+                            />
+                          </el-select>
                 </el-form-item>
                 <el-form-item>
                   <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
@@ -48,57 +48,60 @@
                   <el-button
                      type="primary"
                      plain
+                     @click="changeDivision(12,4)"
                   >四分屏</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                    @click="changeDivision(8,6)"
                   >六分屏</el-button>
                </el-col>
                <el-col :span="1.5">
                   <el-button
                      type="primary"
                      plain
+                  @click="changeDivision(6,12)"
                   >十二分屏</el-button>
                </el-col>
             </el-row>
             <div class="alg-list" >
-              <el-card  v-for="item in algList" :key="item.name" class="alg-item" shadow="hover" >
-                <!-- <template v-slot:header>
-                  <div class="cleartitle">
-                    <span>{{item.algorithmName}}</span>
-                    <el-tag
-                      :type="'success'"
-                      effect="dark"
-                    >
-                      {{ 'success'}}
-                    </el-tag>
-                  </div>
-                </template> -->
-                <template v-slot:default >
-                  <div   style="width: 100%;max-height: 200px;overflow: hidden;">
-                    <img
-                      :src="'http://192.168.4.206' +item.alarmImg"
-                      style="width: 100%;"
-                    />
-                  </div>
-                  <h2>{{ item.alarmType }}</h2>
-                  <p style="color: #999999;font-size: 12px;">
-                    {{ changeTime(item.alarmTime) }}
-                  </p>
-                  <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
-                    <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >详情</el-button>
-                    <!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
-                    <el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->
-                  </div>
-                </template>
-              </el-card>
+              <el-row :gutter="10">
+                <el-col :span="division"  v-for="item in algList" :key="item.name">
+                  <el-card  class="alg-item" shadow="hover" >
+                    <template v-slot:default >
+                      <div style="width: 100%;overflow: hidden;">
+                        <ImagePreview style="width: 100%;" :src="item.alarmImg"/>
+                      </div>
+                      <h2>{{ item.alarmType }}</h2>
+                      <p style="color: #999999;font-size: 12px;">
+                        {{ changeTime(item.alarmTime) }}
+                      </p>
+                      <div style="display: flex;justify-content: flex-end;position: absolute;right: 15px;bottom: 10px;" >
+                        <el-button link type="primary" icon="Edit" @click.stop="handleDetials(item)" >详情</el-button>
+                        <!-- <el-button link type="primary" icon="Edit" @click.stop="handleUpdate(item)" >修改</el-button>
+                        <el-button link type="primary" icon="Delete" @click.stop="handleDelete(item)">删除</el-button> -->
+                      </div>
+                    </template>
+                  </el-card>
+                </el-col>
+              </el-row>
+       
             </div>
-          </el-card>
+            <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getList"
+                :layout="'total, prev, pager, next, jumper'"
+            />
+            </el-card>
           </el-scrollbar>
         </el-col>
       </el-row>
+      <alarmDetial ref="alarmDetialRef"/>
     </div>
 </template>
   
@@ -106,14 +109,17 @@
   import { listAlarm, detailAlarm } from "@/api/alarmControl/index.js";
   import { listDevice, } from "@/api/yunshou/device";
   import moment from 'moment'
-  // import algForm from './components/algorithmDown.vue'
+  const { proxy } = getCurrentInstance();
+  const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
+  import alarmDetial from './components/form.vue'
   import { ArrowDown } from '@element-plus/icons-vue'
   import { Search } from '@element-plus/icons-vue'
   const router = useRouter();
-  const { proxy } = getCurrentInstance();
-  const algorithmDownRef = ref(null)
+  const alarmDetialRef = ref(null)
   const nowText=ref('告警管理')
   const ids = ref([]);
+  const total = ref(0);
+  const division = ref(12);
   const deviceList = ref([]);
   const algorithmList=reactive([
     {
@@ -163,7 +169,9 @@
     queryParams: {
       postCode: undefined,
       searchValue: '',
-      status: undefined
+      status: undefined,
+      pageSize: 4,
+      pageNum: 1,
     },
     rules: {
       postName: [{ required: true, message: "岗位名称不能为空", trigger: "blur" }],
@@ -177,6 +185,12 @@
   function changeTime(val){
     return moment(val).format('YYYY/MM/DD HH:mm:ss')
   }
+
+  function changeDivision(val,pageSize){
+    division.value=val
+    queryParams.value.pageSize=pageSize
+    getList()
+  }
   
  /** 查询定时任务列表 */
  function getDeviceList() {
@@ -199,8 +213,8 @@
   /** 查询算法列表 */
   function getList() {
     listAlarm(queryParams.value).then(response => {
-      // console.log("🚀 ~ listAlg ~ response:", response)
       algList.value = response.rows
+      total.value = response.total;
     });
   }
   function handeAdd(row){
@@ -219,8 +233,8 @@
     //   title.value = "修改岗位";
     // });
   }
-  function handleUpdate(row) {
-    algorithmDownRef.value.handleUpdate(row)
+  function handleDetials(row) {
+    alarmDetialRef.value.handleUpdate(row)
   }
   
   /** 删除按钮操作 */
@@ -256,10 +270,11 @@
     min-height: 700px;
     .alg-list{
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      // grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
       gap: 16px;
       .alg-item{
         width: 100%;
+        margin-top: 10px;
         min-height: 350px;
         cursor: pointer;
         position: relative;