fix: 算法详情界面重新布局，根据美工设计图，编写页面样式

src/api/algorithmList/index.js

@@ -65,3 +65,13 @@ export function deleteAlg(ids) {
     method: 'delete'
   })
 }
+
+
+// 启用禁用算法
+export function updateAlgState(data) {
+  return request({
+    url: '/yunshou/aiAlgorithmConfig/updateRunningState',
+    method: 'post',
+    data: data
+  })
+}
\ No newline at end of file

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>
+    <el-upload
+      multiple
+      :action="uploadImgUrl"
+      list-type="picture-card"
+      :on-success="handleUploadSuccess"
+      :before-upload="handleBeforeUpload"
+      :limit="limit"
+      :on-error="handleUploadError"
+      :on-exceed="handleExceed"
+      ref="imageUpload"
+      :before-remove="handleDelete"
+      :show-file-list="false"
+      :headers="headers"
+      :on-preview="handlePictureCardPreview"
+      :class="{ hide: fileList.length >= limit }"
+    >
+      <el-icon class="avatar-uploader-icon"><plus /></el-icon>
+    </el-upload>
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize">
+        大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
+      </template>
+      <template v-if="fileType">
+        格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
+      </template>
+      的文件
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      title="预览"
+      width="800px"
+      append-to-body
+    >
+      <img
+        :src="dialogImageUrl"
+        style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { getToken } from "@/utils/auth";
+
+const props = defineProps({
+  modelValue: [String, Object, Array],
+  // 图片数量限制
+  limit: {
+    type: Number,
+    default: 5,
+  },
+  // 大小限制(MB)
+  fileSize: {
+    type: Number,
+    default: 5,
+  },
+  // 文件类型, 例如['png', 'jpg', 'jpeg']
+  fileType: {
+    type: Array,
+    default: () => ["png", "jpg", "jpeg"],
+  },
+  // 是否显示提示
+  isShowTip: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示提示
+  defaultUrl: {
+    type: String,
+    default: import.meta.env.VITE_APP_BASE_API
+  },
+});
+
+const { proxy } = getCurrentInstance();
+const emit = defineEmits();
+const number = ref(0);
+const uploadList = ref([]);
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const baseUrl = 'http://192.168.4.206'
+const uploadImgUrl = computed(
+  () => props.defaultUrl + "/common/upload"
+);
+// const uploadImgUrl = ref(import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址
+const headers = ref({ Authorization: "Bearer " + getToken() });
+const fileList = ref([]);
+const showTip = computed(
+  () => props.isShowTip && (props.fileType || props.fileSize)
+);
+
+watch(() => props.modelValue, val => {
+  if (val) {
+    // 首先将值转为数组
+    const list = Array.isArray(val) ? val : props.modelValue.split(",");
+    // 然后将数组转为对象数组
+    fileList.value = list.map(item => {
+      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 };
+        }
+      }
+      return item;
+    });
+  } else {
+    fileList.value = [];
+    return [];
+  }
+},{ deep: true, immediate: true });
+
+// 上传前loading加载
+function handleBeforeUpload(file) {
+  let isImg = false;
+  if (props.fileType.length) {
+    let fileExtension = "";
+    if (file.name.lastIndexOf(".") > -1) {
+      fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+    }
+    isImg = props.fileType.some(type => {
+      if (file.type.indexOf(type) > -1) return true;
+      if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+      return false;
+    });
+  } else {
+    isImg = file.type.indexOf("image") > -1;
+  }
+  if (!isImg) {
+    proxy.$modal.msgError(
+      `文件格式不正确, 请上传${props.fileType.join("/")}图片格式文件!`
+    );
+    return false;
+  }
+  if (props.fileSize) {
+    const isLt = file.size / 1024 / 1024 < props.fileSize;
+    if (!isLt) {
+      proxy.$modal.msgError(`上传头像图片大小不能超过 ${props.fileSize} MB!`);
+      return false;
+    }
+  }
+  proxy.$modal.loading("正在上传图片，请稍候...");
+  number.value++;
+}
+
+// 文件个数超出
+function handleExceed() {
+  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`);
+}
+
+// 上传成功回调
+function handleUploadSuccess(res, file) {
+  if (res.code === 200) {
+    uploadList.value.push({ name: res.fileName, url: res.fileName });
+    uploadedSuccessfully();
+    emit("update:modelObj", res);
+  } else {
+    number.value--;
+    proxy.$modal.closeLoading();
+    proxy.$modal.msgError(res.msg);
+    proxy.$refs.imageUpload.handleRemove(file);
+    uploadedSuccessfully();
+  }
+}
+
+// 删除图片
+function handleDelete(file) {
+  const findex = fileList.value.map(f => f.name).indexOf(file.name);
+  if (findex > -1 && uploadList.value.length === number.value) {
+    fileList.value.splice(findex, 1);
+    emit("update:modelValue", listToString(fileList.value));
+    return false;
+  }
+}
+
+// 上传结束处理
+function uploadedSuccessfully() {
+  if (number.value > 0 && uploadList.value.length === number.value) {
+    fileList.value = fileList.value.filter(f => f.url !== undefined).concat(uploadList.value);
+    uploadList.value = [];
+    number.value = 0;
+    emit("update:modelValue", listToString(fileList.value));
+    console.log("🚀 ~ handleDelete ~ listToString(fileList.value):", listToString(fileList.value))
+    proxy.$modal.closeLoading();
+  }
+}
+
+// 上传失败
+function handleUploadError() {
+  proxy.$modal.msgError("上传图片失败");
+  proxy.$modal.closeLoading();
+}
+
+// 预览
+function handlePictureCardPreview(file) {
+  dialogImageUrl.value = file.url;
+  dialogVisible.value = true;
+}
+
+// 对象转成指定字符串分隔
+function listToString(list, separator) {
+  let strs = "";
+  separator = separator || ",";
+  for (let i in list) {
+    if (undefined !== list[i].url && list[i].url.indexOf("blob:") !== 0) {
+      strs += list[i].url.replace(baseUrl, "") + separator;
+    }
+  }
+  return strs != "" ? strs.substr(0, strs.length - 1) : "";
+}
+// 判断当前文件类型
+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];
+    if (videoType.includes(fileType)) {
+      return "video";
+
+    }
+    if (ImgType.includes(fileType)) {
+      return "img";
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+.component-upload-image{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+.media-list {
+  position: relative;
+}
+.media-list:hover .delete-file,
+.media-list:hover .zoom-in-file {
+  display: inline-block;
+}
+.media-file {
+  width: 148px;
+  height: 148px;
+  border: 1px dashed #c0ccda;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+// .image-file {}
+.video-file {
+  object-fit: fill;
+}
+// .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;
+}
+// .el-upload--picture-card 控制加号部分
+:deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+</style>
\ No newline at end of file

src/main.js

@@ -37,6 +37,8 @@ import Editor from "@/components/Editor"
 import FileUpload from "@/components/FileUpload"
 // 图片上传组件
 import ImageUpload from "@/components/ImageUpload"
+// 图片视频上传组件
+import ImgVideoUpload from "@/components/ImgVideoUpload"
 // 图片预览组件
 import ImagePreview from "@/components/ImagePreview"
 // 自定义树选择组件
@@ -64,6 +66,7 @@ app.component('Pagination', Pagination)
 app.component('TreeSelect', TreeSelect)
 app.component('FileUpload', FileUpload)
 app.component('ImageUpload', ImageUpload)
+app.component('ImgVideoUpload', ImgVideoUpload)
 app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)

src/views/algorithmControl/components/form.vue

@@ -256,6 +256,19 @@
                   </el-form-item>
                 </el-col>
               </el-row> 
+              <el-row :gutter="10" class="mb8">
+                <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
+                      <span>在线体验案例图片/视频（内置）</span>
+                  </div>
+              </el-row>
+              <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"/>
+                    <!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->
+                  </el-form-item>
+                </el-col>
+              </el-row> 
               <!-- <el-row :gutter="10" class="mb8">
                 <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
                       <span>在线体验案例图片/视频（内置）</span>

src/views/algorithmList/components/details.vue

 <template>
   <div class="app-container home">
-    <TabTitle :text="nowText" />
-
+    <!-- <TabTitle :text="nowText" /> -->
+    <el-card class="tab-title">
+      <div class="cleartitle" style="justify-content: flex-start">
+        <img src="@/assets/images/logo_video.png" width="25px" alt=""> <span>{{nowText}}</span>
+      </div>
+    </el-card>
     <div class="add-but">
           <el-button  plain @click="router.go('-1')">返回</el-button>
     </div>
@@ -18,10 +22,12 @@
               </div>  
               <ImagePreview style="width: 400px;height: 225px;" :src="form.cardImg"/>
           </div>
+
+
           <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
               <span>应用场景</span>
           </div>
-          <div class="alg-list" >
+          <div class="alg-list" style="background-color: #E6F3FF;">
             <div v-if="applicationList.length==0">
               暂无数据
             </div>
@@ -34,18 +40,22 @@
               </template>
             </el-card>
           </div>
+
+
           <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
               <span>算法试用</span>
           </div>
-          <div>
-              <el-row :gutter="10">
-                <el-col :xs="4" :sm="4" :md="4" :lg="4">
-                  图片上传
+          <div style="background-color: #E6F3FF;display: grid;grid-template-columns: 1fr 2fr 2fr; gap: 16px;padding: 16px;">
+                <el-card >
                   <div class="upload-box">
-                    <ImageUpload  :defaultUrl="'/upload-api'" :defaultBaseUrl="'http://192.168.3.71:9081'+ '/prod-api'" :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/>
+                    <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>
+                   ww
+                    <!-- <ImageUpload :limit='1' :fileSize="5" :isShowTip="false" @update:modelObj="getImgObj"/> -->
                   </div>
-                </el-col>
-                <el-col :xs="10" :sm="10" :md="10" :lg="10">
+                </el-card>
+                <el-card >
                   原始数据
                   <div class="img-box" v-if="nowImg.length==0">
                     <img src="@/assets/images/default.png" height="100%"/>
@@ -53,53 +63,50 @@
                   <div class="img-box" v-else>
                     <img :src="nowImg" height="100%"/>
                   </div>
-                </el-col>
-                <el-col :xs="10" :sm="10" :md="10" :lg="10">
+                </el-card>
+                <el-card >
                   算法识别结果
                   <div class="img-box" v-if="outFilePath.length==0">
                     <div>{{ resultStr }}</div>
                     <img src="@/assets/images/default.png" height="100%"/>
                   </div>
                   <div class="img-box" v-else>
-                    <img :src="outFilePath" height="100%"/>
+                    <ImagePreview :src="outFilePath" height="100%"/>
                   </div>
-                </el-col>
-              </el-row>
+                </el-card>
           </div>
           <div class="form-title" style="display: flex;justify-content: flex-start;align-items: center;">
               <span>算法边界</span>
           </div>
-          <div>
-              <el-row :gutter="10">
-                <el-col :xs="12" :sm="12" :md="12" :lg="12">
+          <div style="background-color: #E6F3FF;display: grid;grid-template-columns:  1fr 1fr; gap: 16px;padding: 16px;">
+                <el-card>
+                  <div class="text-boundary">
                   有效的拍摄方式：
+                      <div v-for="(item,index) in effectiveList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
+                  </div>
                   <div class="img-box" v-if="effectiveList.length==0">
                     <img src="@/assets/images/default.png" height="100%"/>
                   </div>
-                  <div class="img-box" v-else>
+                  <div class="img-box  gird-layout" v-else>
                     <div v-for="item in effectiveList" :key="item.id">
-                      <p>
-                        {{item.remark}}
-                      </p>
                       <ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
                     </div>
                   </div>
-                </el-col>
-                <el-col :xs="12" :sm="12" :md="12" :lg="12">
+                </el-card>
+                <el-card >
+                  <div class="text-boundary">
                   无效的拍摄方式：
+                      <div v-for="(item,index) in invalidList" :key="item.id" style="text-indent: 10px;">{{index+1}}、{{item.remark}}</div>
+                  </div>
                   <div class="img-box" v-if="invalidList.length==0">
                     <img src="@/assets/images/default.png" height="100%"/>
                   </div>
-                  <div class="img-box" v-else>
+                  <div class="img-box gird-layout" v-else >
                     <div v-for="item in invalidList" :key="item.id">
-                      <p>
-                        {{item.remark}}
-                      </p>
                       <ImagePreview style="width: 400px;height: 225px;" :src="item.caseFile"/>
                     </div>
                   </div>
-                </el-col>
-              </el-row>
+                </el-card>
           </div>
         </el-card>
       </el-col>
@@ -163,38 +170,44 @@ getDetials()
 </script>
 
 <style scoped lang="scss">
+
     .upload-box{
       // width: 500px;
       height: 365px;
-      border: 1px solid #d8dce5;
       border-radius: 5px;
       text-align: center;
     }
     .img-box{
       // width: 500px;
       height: 365px;
-      border: 1px solid #d8dce5;
+      // border: 1px solid #d8dce5;
       border-radius: 5px;
       text-align: center;
     }
    .form-title{
       display: flex;
       align-items:center;/*for vertical align*/
+      background-image: url('../../../assets/images/details_top.png');
+      background-size: 100% 40px; /* 设置背景图的高度为200px，宽度自动 */
+      height: 40px;
+      font-family: PingFang SC, PingFang SC;
       font-size: 16px;
       font-weight: 600;
+      font-style: normal;
+      text-transform: none;
       border-radius: 5px;
-      padding: 0;
-      margin: 10px 0;
-    }
-    .form-title::before{
-      content:"";
-      display: inline-block;
-      width: 10px; /* 矩形的宽度 */
-      height: 30px; /* 矩形的高度 */
-      background-color: #1890FF; /* 矩形的背景颜色 */
-      margin-right: 10px;
-      border-radius: 8px;
+      padding-left: 15px;
+      margin-top: 10px;
     }
+    // .form-title::before{
+    //   content:"";
+    //   display: inline-block;
+    //   width: 10px; /* 矩形的宽度 */
+    //   height: 30px; /* 矩形的高度 */
+    //   background-color: #1890FF; /* 矩形的背景颜色 */
+    //   margin-right: 10px;
+    //   border-radius: 8px;
+    // }
    .search-input{
     display: flex;
     width: 400px;
@@ -213,13 +226,18 @@ getDetials()
     min-height: 700px;
     .alg-list{
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+      padding: 16px;
       gap: 16px;
       .alg-item{
         width: 100%;
-        min-height: 300px;
+        background-image: url('../../../assets/images/alg_item.png') !important;
+        background-size: 100% 235px; /* 设置背景图的高度为200px，宽度自动 */
+        min-height: 235px;
         cursor: pointer;
         position: relative;
+        background-color: #ffffff00;
+        border: 0;
       }
     }
    }
@@ -236,5 +254,47 @@ getDetials()
     align-items: center;
     justify-content: space-around;
   }
+  .tab-title {
+    display: flex;
+    align-items: center;
+    /*for vertical align*/
+    font-size: 20px;
+    height: 50px;
+    color: #1890FF;
+    background-color: #fff;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    padding: 0;
+
+  .el-card__body {
+    padding: 0 !important;
+  }
+  }
+  .tab-title::before {
+    content: "";
+    display: none;
+    width: 0px;
+    height: 28px;
+    background-color: #1890FF;
+    margin-right: 8px;
+    border-radius: 8px;
+    margin-left: 8px;
+}
+  .text-boundary{
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 600;
+    font-size: 14px;
+    color: #292D32;
+    // line-height: 34px;
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+ .gird-layout{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    gap: 16px;
+    padding: 16px;
+  }
 </style>
 

src/views/algorithmList/components/websockt.js

@@ -16,8 +16,7 @@ export function useWebSockets() {
         // 定义点击事件 myFn
         function handeUpload(e){
             uploadData.value = e
-            console.log("🚀 ~ handeUpload ~ uploadData.value:", uploadData.value)
-            client.value = new WebSocketManager('ws://192.168.3.71:8080/sf',websocketMessage)
+            client.value = new WebSocketManager('ws://192.168.4.206:8111/ai/sf',websocketMessage)
             client.value.connect();
         }
         function websocketMessage(e) {
@@ -26,6 +25,7 @@ export function useWebSockets() {
                 client.value.sendMessage({
                     sessionId: e,
                     algorithmType: roleId,
+                    algorithmId: roleId,
                     fileType:uploadData.value.fileType,
                     type: 0, //0 图片 1视频
                     filePath:uploadData.value.url,
@@ -39,7 +39,7 @@ export function useWebSockets() {
                     resultStr.value = '未检测到预警';
                     outFilePath.value=''
                 }else {
-                    outFilePath.value = 'http://192.168.3.71:9081'+ '/prod-api' + '/profile/endfile' + result.data.outFilePath;
+                    outFilePath.value =  result.data.outFilePath;
                     proxy.$modal.msgSuccess("算法处理成功");
                 }
             

src/views/algorithmList/index.vue

@@ -104,7 +104,7 @@
                     {{item.cardCopywriting}}
                   </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="handleEnable(item)" >{{item.algorithmStatus=='0'?'停用':'启用' }}</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>
                     <!-- <el-dropdown trigger="click" @command.stop="handleSetSize">
@@ -139,7 +139,7 @@
 </template>
   
 <script setup name="Index">
-  import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg, } from "@/api/algorithmList/index.js";
+  import { listAlg, detailAlg, addAlg, updateAlg, deleteAlg,updateAlgState } from "@/api/algorithmList/index.js";
   import algorithmDown from './components/algorithmDown.vue'
   // import algForm from './components/algorithmDown.vue'
   const { proxy } = getCurrentInstance();
@@ -227,7 +227,6 @@
     router.push("/algorithmList/details/info/" + row.id);
   }
   function handleSetSize(row) {
-    console.log('%c [ row ]-170', 'font-size:13px; background:pink; color:#bf2c9f;', row)
     // reset();
     // const postId = row.postId || ids.value;
     // getPost(postId).then(response => {
@@ -244,9 +243,20 @@
     queryParams.value.applicationScenarios=row.index
     nowTopTitle.value=row.index
     getList()
-    console.log("🚀 ~ handMenuClick ~ row:", row)
   }
   
+  function handleEnable(row){
+    const params={
+      algorithmStatus: row.algorithmStatus=='1'?"0":"1",
+      id:row.id
+    }
+    updateAlgState(params).then((res) => {
+      console.log("🚀 ~ updateAlgState ~ res:", res)
+      getList()
+    })
+
+  }
+
   /** 删除按钮操作 */
   function handleDelete(row) {
     const id = row.id || ids.value;

src/views/login.vue

@@ -178,6 +178,8 @@ getCookie();
 }
 
 .login-form {
+  position: absolute;
+  right: 10%;
   border-radius: 6px;
   background: #ffffff;
   width: 400px;