fix: 算法列表编辑，在线体验案例图片/视频优化修复，视频预览，实时预警对接

src/api/algorithmList/index.js

@@ -30,6 +30,16 @@ export function listAlg(query) {
     })
   }
   
+
+// 查询算法文件列表
+export function listAlgFile(query) {
+    return request({
+      url: '/yunshou/aiAlgorithmFile/list',
+      method: 'get',
+      params: query
+    })
+  }
+  
 // 查询算法列表x详情
 export function detailAlg(id) {
     return request({

src/components/ImgVideoUpload/index.vue

 <template>
   <div class="component-upload-image">
-    <div class="media-list" v-for="(item, index) in fileList" :key="index">
-      <el-image
-        class="media-file image-file"
-        v-if="getFileType(item.name)=='img'"
-        :src="baseUrl+item.url"
-      ></el-image>
-      <video
-        class="media-file video-file"
-        v-if="getFileType(item.name)=='video'"
-        :src="baseUrl+item.url"
-        controls
-      ></video>
-      <i
-        class="el-icon-zoom-in zoom-in-file"
-        v-if="getFileType(item.name)=='img'"
-        @click="handlePreview(item)"
-      ></i>
-      <i
-        class="el-icon-delete-solid delete-file"
-        @click="handleDelete(item)"
-      ></i>
+    <div v-if="isImgLayout">
+      <div class="media-list" v-for="(item, index) in fileList" :key="index">
+        <el-image
+          class="media-file image-file"
+          v-if="getFileType(item.name)=='img'"
+          :src="item.url"
+        ></el-image>
+        <video
+          class="media-file video-file"
+          v-if="getFileType(item.name)=='video'"
+          :src="item.url"
+          controls
+        ></video>
+        <div class="upload_operate">
+          <el-icon  style="cursor: pointer;"  @click="handlePictureCardPreview(item)"><ZoomIn /></el-icon>
+          <el-icon  @click="handleDelete(item)" style="margin-left: 1rem; cursor: pointer;"><DeleteFilled /></el-icon>
+        </div>
+      </div>
     </div>
+
     <el-upload
       multiple
       :action="uploadImgUrl"
-      list-type="picture-card"
+      :list-type="isImgLayout?'picture-card':''"
       :on-success="handleUploadSuccess"
       :before-upload="handleBeforeUpload"
       :limit="limit"
@@ -38,7 +36,10 @@
       :on-preview="handlePictureCardPreview"
       :class="{ hide: fileList.length >= limit }"
     >
-      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+      <el-icon v-if="isImgLayout" class="avatar-uploader-icon"><plus /></el-icon>
+      <el-button type="primary" v-else>
+        上传本地文件<el-icon class="el-icon--left"><Upload /></el-icon>
+      </el-button>
     </el-upload>
     <!-- 上传提示 -->
     <div class="el-upload__tip" v-if="showTip">
@@ -56,9 +57,16 @@
       v-model="dialogVisible"
       title="预览"
       width="800px"
+      style="text-align: center;"
       append-to-body
     >
+      <video
+        v-if="getFileType(dialogImageUrl)=='video'"
+        :src="dialogImageUrl"
+        controls
+      ></video>
       <img
+        v-else
         :src="dialogImageUrl"
         style="display: block; max-width: 100%; margin: 0 auto"
       />
@@ -90,6 +98,11 @@ const props = defineProps({
   isShowTip: {
     type: Boolean,
     default: true
+  },
+   // 是否按照 照片墙布局
+   isImgLayout: {
+    type: Boolean,
+    default: true
   },
   // 是否显示提示
   defaultUrl: {
@@ -124,7 +137,6 @@ watch(() => props.modelValue, val => {
       if (typeof item === "string") {
         if (item.indexOf(baseUrl) === -1) {
           item = { name: baseUrl + item, url: baseUrl + item };
-          console.log("🚀 ~ watch ~ item:", item)
         } else {
           item = { name: item, url: item };
         }
@@ -207,7 +219,6 @@ function uploadedSuccessfully() {
     uploadList.value = [];
     number.value = 0;
     emit("update:modelValue", listToString(fileList.value));
-    console.log("🚀 ~ handleDelete ~ listToString(fileList.value):", listToString(fileList.value))
     proxy.$modal.closeLoading();
   }
 }
@@ -237,10 +248,9 @@ function listToString(list, separator) {
 }
 // 判断当前文件类型
 function getFileType(fileName) {
-    console.log("🚀 ~ getFileType ~ fileName:", fileName)
     const videoType =['mp4','avi','mov','wmv','flv','mkv','rmvb','3gp','mpg','mpeg','webm']
     const ImgType = ['jpg','jpeg','png','gif','bmp','tiff','webp',]
-    let fileType = fileName.split(".")[1];
+    let fileType = fileName.split(".").pop();
     if (videoType.includes(fileType)) {
       return "video";
 
@@ -260,10 +270,10 @@ function getFileType(fileName) {
 .media-list {
   position: relative;
 }
-.media-list:hover .delete-file,
-.media-list:hover .zoom-in-file {
-  display: inline-block;
-}
+// .media-list:hover .delete-file,
+// .media-list:hover .zoom-in-file {
+//   display: inline-block;
+// }
 .media-file {
   width: 148px;
   height: 148px;
@@ -277,28 +287,30 @@ function getFileType(fileName) {
 }
 // .audio-file {}
 .delete-file {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  display: none;
-  font-size: 24px;
-  color: #f56c6c;
-  position: absolute;
-  top: 5%;
-  right: 15%;
-  z-index: 100;
+
 }
 .zoom-in-file {
-  cursor: pointer;
-  width: 20px;
-  height: 20px;
-  display: none;
-  font-size: 24px;
-  color: #009ad6;
-  position: absolute;
-  top: 5%;
-  right: 38%;
-  z-index: 100;
+
+}
+
+.upload_operate{
+    align-items: center;
+    background-color: var(--el-overlay-color-lighter);
+    color: #fff;
+    cursor: default;
+    display: inline-flex;
+    font-size: 20px;
+    height: 148px;
+    width: 148px;
+    justify-content: center;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    transition: opacity var(--el-transition-duration);
+}
+.upload_operate:hover{
+  opacity: 1;
 }
 // .el-upload--picture-card 控制加号部分
 :deep(.hide .el-upload--picture-card) {

src/views/algorithmControl/components/form.vue

@@ -92,7 +92,7 @@
           </el-col>
           </el-row>
           <el-card class="left-list">
-            <el-table  :data="postList" >
+            <el-table  :data="wrapList" >
               <el-table-column label="文件名称" align="center" prop="postId" />
               <el-table-column label="状态" align="center" prop="postCode" />
               <el-table-column label="MD5核对结果" align="center" prop="postName" />
@@ -162,14 +162,14 @@
                         </el-form-item>
                       </el-col>
                     </el-row>
-              <!-- <el-row :gutter="10" class="mb8" style="justify-content: space-between;">
+              <el-row :gutter="10" class="mb8" style="justify-content: space-between;">
                 <el-col :span="1.5">
                   <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
                     <span>算法维护</span>
                   </div>
               </el-col>
               <el-col :span="6.8" style="display: flex;">
-                  <el-button
+                  <!-- <el-button
                     type="primary"
                     plain
                     icon="Search"
@@ -180,7 +180,7 @@
                     plain
                     icon="Refresh"
                     @click="handleUpdate"
-                  >版本更新</el-button>
+                  >版本更新</el-button> -->
                   <el-button
                     type="success"
                     plain
@@ -190,11 +190,22 @@
               </el-col>
               </el-row>
               <el-card class="left-list">
-                <el-table  :data="postList" >
-                  <el-table-column label="文件名称" align="center" prop="postId" />
-                  <el-table-column label="状态" align="center" prop="postCode" />
-                  <el-table-column label="MD5核对结果" align="center" prop="postName" />
-                  <el-table-column label="文件大小" align="center" prop="postSort" />
+                <el-table  :data="wrapList" >
+                  <el-table-column type="expand">
+                    <template #default="props">
+                      <div m="4">
+                        <p m="t-0 b-2">State: {{props + 'props.row.state' }}</p>
+                        <p m="t-0 b-2">City: {{ 'props.row.city' }}</p>
+                        <p m="t-0 b-2">Address: {{ 'props.row.address' }}</p>
+                        <p m="t-0 b-2">Zip: {{ 'props.row.zip' }}</p>
+                        <h3>Family</h3>
+                      </div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column label="文件名称" align="center" prop="algorithmName" />
+                  <el-table-column label="状态" align="center" prop="algorithmStatus" />
+                  <el-table-column label="MD5核对结果" align="center" prop="md5Result" />
+                  <el-table-column label="文件大小" align="center" prop="fileSize" />
                   <el-table-column label="进度" align="center" prop="postSort" />
                   <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
                       <template #default="scope">
@@ -203,7 +214,7 @@
                       </template>
                   </el-table-column>
                 </el-table>
-              </el-card> -->
+              </el-card>
             </el-tab-pane>
             <el-tab-pane label="算法详情" name="算法详情">
               <el-row :gutter="10" class="mb8">
@@ -214,7 +225,7 @@
               <el-row :gutter="10" class="mb8">
                 <el-col :span="12">
                   <el-form-item label-width="130px" label="算法Banner" prop="algorithmBanner">
-                    <ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getImageUrl"/>
+                    <ImageUpload :modelValue="form.algorithmBanner" :limit='1' :fileSize="5" @update:modelValue="getAlgorithmBanner"/>
                   </el-form-item>
                 </el-col>
               </el-row>
@@ -252,7 +263,7 @@
               <el-row :gutter="10" class="mb8">
                 <el-col :span="12">
                   <el-form-item label-width="130px" label="banner上算法视频" prop="algorithmBannerVideo">
-                    <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/>
+                    <ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['rmvb', 'avi', 'mp4']"  :limit='1' :fileSize="100" :isShowTip="true" @update:modelValue="getAlgorithmBannerVideo"/>
                   </el-form-item>
                 </el-col>
               </el-row> 
@@ -264,7 +275,7 @@
               <el-row :gutter="10" class="mb8">
                 <el-col :span="24">
                   <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
-                    <ImgVideoUpload :fileType="['png', 'jpg', 'mp4']"  :limit='5' :fileSize="20" :isShowTip="true"/>
+                    <ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['png', 'jpg', 'mp4']"  :limit='5' :fileSize="20" :isShowTip="true"/>
                     <!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->
                   </el-form-item>
                 </el-col>
@@ -443,12 +454,11 @@
 </template>
 
 <script setup>
-import { addAlg, updateAlg , detailAlg} from "@/api/algorithmList/index.js";
+import { addAlg, updateAlg , detailAlg , listAlgFile} from "@/api/algorithmList/index.js";
 import { listScene, detailScene , addScene, updateScene, deleteScene} from "@/api/algorithmList/scene.js";
 import { listBoundary, detailBoundary , addBoundary, updateBoundary, deleteBoundary} from "@/api/algorithmList/boundary.js";
 const { proxy } = getCurrentInstance();
 const { algorithm_scen, algorithm_case } = proxy.useDict("algorithm_scen", "algorithm_case");
-console.log("🚀 ~ algorithm_case:", algorithm_case)
 const emit = defineEmits();
 const open = ref(false);
 const openScene = ref(false);
@@ -458,7 +468,15 @@ const title = ref("");
 const titleScene = ref("");
 const titleBoundary = ref("");
 const activeName = ref("基础信息");
-const postList = ref([]);
+const wrapList = ref([
+  {
+    algorithmId:'1',
+    algorithmStatus:'1',
+    fileSize:'500M',
+    md5Result:'一致',
+    algorithmName:'火焰算法',
+  }
+]);
 const sceneList = ref([]);
 const boundaryList = ref([]);
 const ids = ref([]);
@@ -486,6 +504,12 @@ const { queryParams, form, formScene,formBoundary, rules } = toRefs(data);
 function getImageUrl(url){
     form.value.cardImg=url
 }
+function getAlgorithmBannerVideo(url){
+    form.value.algorithmBannerVideo=url
+}
+function getAlgorithmBanner(url){
+    form.value.algorithmBanner=url
+}
 function getBoundaryImageUrl(url){
     formBoundary.value.caseFile=url
 }
@@ -693,7 +717,7 @@ function submitBoundaryRefForm() {
           proxy.$modal.msgSuccess("新增成功");
           openBoundary.value = false;
           getBoundaryList()
-        });
+        }); 
       }
     }
   });

src/views/algorithmControl/index.vue

@@ -80,11 +80,11 @@
        </el-row>
  
        <el-table v-loading="loading" :data="algList" @selection-change="handleSelectionChange">
-          <el-table-column label="算法名称" width="100" align="center" prop="algorithmName" />
+          <el-table-column label="算法名称" width="150" align="center" prop="algorithmName"  :show-overflow-tooltip="true" />
           <el-table-column label="算法英文" align="center" prop="algorithmEnglish" :show-overflow-tooltip="true" />
-          <el-table-column label="硬件平台" align="center" prop="algorithmPlat">
+          <el-table-column label="硬件平台" align="center" width="100" prop="algorithmPlat">
           </el-table-column>
-          <el-table-column label="算法场景" align="center" prop="applicationScenarios" :show-overflow-tooltip="true" />
+          <el-table-column label="算法场景" align="center" width="100" prop="applicationScenarios" :show-overflow-tooltip="true" />
           <el-table-column label="卡片文案" align="center" prop="cardCopywriting" :show-overflow-tooltip="true" />
           <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template #default="scope">
@@ -155,7 +155,7 @@
  
  const { queryParams, form, rules } = toRefs(data);
  
- /** 查询定时任务列表 */
+ /** 任务列表 */
  function getList() {
    loading.value = true;
    listAlg(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {

src/views/algorithmList/components/details.vue

@@ -13,14 +13,19 @@
     <el-row :gutter="10">
       <el-col :xs="24" :sm="24" :md="24" :lg="24">
         <el-card class="right-list">
-          <div class="backcolor" style="height: 350px;width: 100%; padding: 10px;">
+          <div class="backcolor"  v-if="videoLoading" :style="backImg" >
               <div style="width: 500px;">
                 <h2 style="font-weight: 700;font-style: normal;font-size: 28px;color: #FFFFFF;">{{form.algorithmName}}</h2>
                 <p style="font-weight: 700;font-style: normal;font-size: 17px;color: rgba(255, 255, 255, 0.6);line-height: 21px;">
                   {{form.cardCopywriting}}
                 </p>
-              </div>  
-              <ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>
+              </div> 
+              <div style="width: 400px;height: 225px;" >
+                <video  v-if="videoLoading" controls ref="videoEle" class="drawImg">
+                  <source :src="backVideo" type="video/mp4" />
+                </video>
+              </div> 
+              <!-- <ImagePreview :src="form.cardImg"/> -->
           </div>
 
 
@@ -45,34 +50,50 @@
           <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
               <span>算法试用</span>
           </div>
-          <div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;">
-                <el-card >
+          <div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;min-height: 650px;">
+                <el-card style="position: relative;">
                   <div class="upload-box">
-                    <div style="height: 100px;" v-for="item in invalidList" :key="item.id">
-                       <img height="100%" :src="'http://192.168.4.206'+item.caseFile" alt=""> 
+                    <div style="height: 130px;width: 100%; margin: 5px; overflow: hidden;cursor: pointer;"
+                     v-for="item in invalidList" :key="item.id"
+                     @click="handBuiltImg(item.caseFile)"
+                     >
+                       <img width="100%" :src="'http://192.168.4.206'+item.caseFile" alt=""> 
                     </div>
-                   ww
+                    <ImgVideoUpload 
+                      style="position: absolute;bottom: 5px;left: 26%;" 
+                      :modelValue="uploadUrl" 
+                      :fileType="['png', 'jpg', 'mp4']"
+                      :isImgLayout="false" 
+                      :limit='5' :fileSize="20" 
+                      :isShowTip="false"
+                      @update:modelObj="getImgObj"
+                     />
                     <!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
                   </div>
                 </el-card>
                 <el-card >
                   原始数据
                   <div class="img-box" v-if="nowImg.length==0">
-                    <img src="@/assets/images/default.png" height="100%"/>
+                    <img src="@/assets/images/default.png" height="350px"/>
                   </div>
                   <div class="img-box" v-else>
-                    <img :src="nowImg" height="100%"/>
+                    <ImagePreview :src="nowImg" height="100%"/>
                   </div>
+                  <el-button type="primary" plain>开始识别</el-button>
                 </el-card>
                 <el-card >
                   算法识别结果
                   <div class="img-box" v-if="outFilePath.length==0">
                     <div>{{ resultStr }}</div>
-                    <img src="@/assets/images/default.png" height="100%"/>
+                    <img src="@/assets/images/default.png" height="350px"/>
                   </div>
                   <div class="img-box" v-else>
                     <ImagePreview :src="outFilePath" height="100%"/>
                   </div>
+                  <div style="display: flex;justify-content: space-between;">
+                    <el-button type="primary" plain>重置区域</el-button>
+                    <el-button type="primary" plain>下载识别视频</el-button>
+                  </div>
                 </el-card>
           </div>
           <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
@@ -88,8 +109,8 @@
                     <img src="@/assets/images/default.png" height="100%"/>
                   </div>
                   <div class="img-box  gird-layout" v-else>
-                    <div v-for="item in effectiveList" :key="item.id">
-                      <ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
+                    <div  class="img-item"  v-for="item in effectiveList" :key="item.id">
+                      <ImagePreview style="height: 100%;" :src="item.caseFile"/>
                     </div>
                   </div>
                 </el-card>
@@ -102,8 +123,8 @@
                     <img src="@/assets/images/default.png" height="100%"/>
                   </div>
                   <div class="img-box gird-layout" v-else >
-                    <div v-for="item in invalidList" :key="item.id">
-                      <ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
+                    <div class="img-item" v-for="item in invalidList" :key="item.id">
+                      <ImagePreview style="height: 100%;" :src="item.caseFile"/>
                     </div>
                   </div>
                 </el-card>
@@ -128,10 +149,15 @@ const nowImg=ref('')
 const { roleId } =route.params
 const { proxy } = getCurrentInstance();
 const algFormRef = ref(null)
+const uploadUrl = ref('')
+const videoLoading = ref(false)
+const backImg = ref({})
+const backVideo = ref({})
 const applicationList = ref([])
 const effectiveList = ref([])
 const invalidList = ref([])
 const nowText=ref('算法详情')
+const baseUrl = 'http://192.168.4.206'
 const data = reactive({
   form: {},
   queryParams: {
@@ -148,9 +174,16 @@ const data = reactive({
 const { queryParams, form, rules } = toRefs(data);
 
 function getDetials(){
+  videoLoading.value=false
   detailAlg(roleId).then(res=>{
     console.log(res)
     form.value=res.data
+    const banner=  new URL(judgeImgUrl(res.data.algorithmBanner))
+    backImg.value = {
+      backgroundImage: `url(${banner})`,
+    }
+    backVideo.value = judgeImgUrl(res.data.algorithmBannerVideo)
+    videoLoading.value=true
   })
   listScene({ algorithmId: roleId}).then(res => {
     applicationList.value = res.rows
@@ -164,7 +197,21 @@ function getImgObj(obj){
     nowImg.value = obj.url
     handeUpload(obj)
 }
+function judgeImgUrl(item){
+    if(item&&item!=null){
+      if (item.indexOf(baseUrl) === -1) {
+        return baseUrl + item
+      } else {
+        return item
+      }
+    }else{
+      return 'http://192.168.4.206/profile/upload/2024/08/28/banner%20background_20240828095250A003.png'
+    }
 
+}
+function handBuiltImg(item){
+  nowImg.value = item
+}
 getDetials()
 
 </script>
@@ -173,13 +220,14 @@ getDetials()
 
     .upload-box{
       // width: 500px;
-      height: 365px;
       border-radius: 5px;
-      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
     }
     .img-box{
       // width: 500px;
-      height: 365px;
+      min-height: 365px;
       // border: 1px solid #d8dce5;
       border-radius: 5px;
       text-align: center;
@@ -248,8 +296,12 @@ getDetials()
     justify-content: space-between;
   }
   .backcolor{
+    height: 350px;
+    width: 100%;
+    padding: 10px;
     border-radius: 10px;
     background-image: linear-gradient(to right, #6f86d6 0%, #48c6ef 100%);
+    background-size:100% 350px ;
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -292,9 +344,14 @@ getDetials()
   }
  .gird-layout{
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     gap: 16px;
     padding: 16px;
   }
+  .img-item{
+    border: 1px solid #279bda;
+    width: 150px;
+    height: 150px;
+  }
 </style>
 

src/views/deviceControl/index.vue

@@ -111,8 +111,8 @@
           </el-table-column>
           <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
              <template #default="scope">
-                <el-tooltip content="禁用" placement="top">
-                   <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
+                <el-tooltip :content="scope.row.isOpen === '0'? '禁用' : '启用'" placement="top">
+                   <el-button link type="primary" :icon="scope.row.isOpen === '0'? 'Close' : 'Check'" @click="handleStatusChange(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
                 </el-tooltip>
                 <el-tooltip content="修改" placement="top">
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['monitor:job:edit']"></el-button>
@@ -179,7 +179,7 @@
  </template>
  
  <script setup name="Job">
- import { listDevice, deleteDevice, addDevice, updateDevice, detailDevice } from "@/api/yunshou/device";
+ import { listDevice, deleteDevice, addDevice, updateDevice, detailDevice,updateStatusDevice } from "@/api/yunshou/device";
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  const { sys_job_group, sys_job_status } = proxy.useDict("sys_job_group", "sys_job_status");
@@ -269,20 +269,15 @@
  
  // 任务状态修改
  function handleStatusChange(row) {
-   let text = row.status === "0" ? "启用" : "停用";
-   proxy.$modal.confirm('确认要"' + text + '""' + row.jobName + '"任务吗?').then(function () {
-     return changeJobStatus(row.id, row.status);
+   let text = row.isOpen === "0" ? "禁用" : "启用";
+   proxy.$modal.confirm('确认要"' + text + '""' + row.deviceName + '"设备吗?').then(function () {
+     return updateStatusDevice({id:row.id,status:row.status});
    }).then(() => {
      proxy.$modal.msgSuccess(text + "成功");
    }).catch(function () {
      row.status = row.status === "0" ? "1" : "0";
    });
  }
- 
-
-
-
- 
 
  /** 新增按钮操作 */
  function handleAdd() {

src/views/videoControl/pointControl/components/drawPoint.vue

@@ -176,15 +176,15 @@
       </el-col>
     </el-row>
   </el-dialog>
-  <el-dialog title="算法配置" v-model="aiAlgorithm.visible.value" width="30%">
+  <el-dialog :title="unref(aiAlgorithm.form).algorithmName" v-model="aiAlgorithm.visible.value" width="50%">
     <el-form
       ref="algorithmManage.formRef"
       :model="aiAlgorithm.form"
-      label-width="80px"
+      label-width="160px"
     >
-      <el-form-item label="算法名称" prop="algorithmName">
+      <!-- <el-form-item label="算法名称" prop="algorithmName">
         <el-input v-model="unref(aiAlgorithm.form).algorithmName" readonly />
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item label="告警间隔" prop="alarmInterval">
         <el-input
           placeholder="单位/秒"
@@ -203,6 +203,18 @@
       <el-form-item label="标签阈值" prop="labelThreshold">
         <el-input v-model="unref(aiAlgorithm.form).labelThreshold" />
       </el-form-item>
+      <el-table  :data="wrapList" >
+        <el-table-column label="识别标签" align="center" prop="md5Result" />
+        <el-table-column label="标签阈值" align="center" prop="fileSize" />
+        <el-table-column label="状态" align="center" prop="postSort" />
+        <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:post:edit']">修改</el-button>
+              <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:post:remove']">删除</el-button> -->
+            </template>
+        </el-table-column>
+      </el-table>
+
       <div class="right">
         <el-button type="primary" @click="sureConfig">确认</el-button>
         <el-button type="primary" plain @click="aiAlgorithm.toClose"

src/views/videoControl/videoPreview/index.vue

@@ -79,14 +79,14 @@
                 shadow="hover"
               >
               <template v-slot:default>
-                <img src="@/assets/images/default.png" style="width: 100%" />
+                <ImagePreview :src="item.alarmImg" style="width: 100%" />
                 <el-form :model="form" label-width="100px">
-                  <el-form-item label="预警设备：">{{ form.title }} </el-form-item>
+                  <!-- <el-form-item label="预警设备：">{{ form.title }} </el-form-item>
                   <el-form-item label="登录信息：">{{ form.title }}</el-form-item>
-                  <el-form-item label="预警区域：">{{ form.title }}</el-form-item>
-                  <el-form-item label="预警类型：">{{ form.title }}</el-form-item>
-                  <el-form-item label="预警时间：">{{ form.title }}</el-form-item>
-                  <el-form-item label="预警等级："><el-tag :type="'danger'" effect="dark">{{ '一级预警'}} </el-tag></el-form-item>
+                  <el-form-item label="预警区域：">{{ form.title }}</el-form-item> -->
+                  <el-form-item label="预警类型：">{{ item.alarmType }}</el-form-item>
+                  <el-form-item label="预警时间：">{{  parseTime(item.alarmTime)  }}</el-form-item>
+                  <el-form-item label="预警等级："><el-tag :type="'danger'" effect="dark">{{ item.alarmLevelId+'级预警'}} </el-tag></el-form-item>
                </el-form>
               </template>
               </el-card>
@@ -103,13 +103,14 @@ import { ArrowDown } from "@element-plus/icons-vue";
 import { Search } from "@element-plus/icons-vue";
 import '@/utils/jsmpeg.min'
 import { listAiRegionManage } from "@/api/videoControl/videoPreview";
+import { listAlarm } from "@/api/alarmControl/index.js";
 import { onMounted, reactive, ref, } from "vue";
 const { proxy } = getCurrentInstance();
 const algFormRef = ref(null);
 const nowText = ref("视频预览");
 const deptName = ref("");
 const deptOptions = ref(undefined);
-const algorithmList = reactive([
+const algorithmList = ref([
   {
     name: "我的算法",
     value: 1,
@@ -183,8 +184,13 @@ function getTreeData() {
       deptOptions.value=res.data
   })
 }
+function getWaringData() {
+  listAlarm().then((res) => {
+    algorithmList.value=res.rows
+  })
+}
 getTreeData()
-
+getWaringData()
 function getVideos(){
     let canvas = document.getElementById('video')
     let url = 'rtsp://192.168.20.211:554/av0_0'
@@ -275,7 +281,7 @@ function handleDelete(row) {
   min-height: 700px;
   .alg-list {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    grid-template-columns: repeat(minmax(180px, 1fr));
     gap: 16px;
     .el-card {
       border: 1px soild #ff6700;