fix: 算法接口地址调整，案例图片接口联调

.env.development

@@ -8,4 +8,4 @@ VITE_APP_ENV = 'development'
 VITE_APP_BASE_API = '/dev-api'
 
 # 图片服务器地址
-VITE_IMG_BASE_PATH = 'http://192.168.4.206'
+VITE_IMG_BASE_PATH = 'http://192.168.3.82'

.env.production

@@ -11,4 +11,4 @@ VITE_APP_BASE_API = '/ai'
 VITE_BUILD_COMPRESS = gzip
 
 # 图片服务器地址
-VITE_IMG_BASE_PATH = 'http://192.168.4.206'
\ No newline at end of file
+VITE_IMG_BASE_PATH = 'http://192.168.3.82'
\ No newline at end of file

.env.staging

@@ -11,4 +11,4 @@ VITE_APP_BASE_API = '/stage-api'
 VITE_BUILD_COMPRESS = gzip
 
 # 图片服务器地址
-VITE_IMG_BASE_PATH = 'http://192.168.4.206'
\ No newline at end of file
+VITE_IMG_BASE_PATH = 'http://192.168.3.82'
\ No newline at end of file

src/api/algorithmList/index.js

@@ -84,4 +84,22 @@ export function updateAlgState(data) {
     method: 'post',
     data: data
   })
+}
+
+// 新增算法案例列表
+export function addListAlgorithmCase(data) {
+  return request({
+    url: '/yunshou/aiAlgorithmCase/addList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 查询算法案例列表
+export function listCase(query) {
+  return request({
+    url: '/yunshou/aiAlgorithmCase/list',
+    method: 'get',
+    params: query
+  })
 }
\ No newline at end of file

src/components/ImageUpload/index.vue

@@ -83,7 +83,7 @@ const number = ref(0);
 const uploadList = ref([]);
 const dialogImageUrl = ref("");
 const dialogVisible = ref(false);
-const baseUrl = 'http://192.168.4.206'
+const baseUrl = import.meta.env.VITE_IMG_BASE_PATH
 const uploadImgUrl = computed(
   () => props.defaultUrl + "/common/upload"
 );

src/components/ImgVideoUpload/index.vue

 <template>
   <div class="component-upload-image">
-    <div v-if="isImgLayout">
+    <div v-if="isImgLayout" style="display: flex">
       <div class="media-list" v-for="(item, index) in fileList" :key="index">
         <el-image
           class="media-file image-file"
@@ -117,7 +117,7 @@ const number = ref(0);
 const uploadList = ref([]);
 const dialogImageUrl = ref("");
 const dialogVisible = ref(false);
-const baseUrl = 'http://192.168.4.206'
+const baseUrl = import.meta.env.VITE_IMG_BASE_PATH
 const uploadImgUrl = computed(
   () => props.defaultUrl + "/common/upload"
 );
@@ -266,6 +266,7 @@ function getFileType(fileName) {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
+    flex-direction: column;
 }
 .media-list {
   position: relative;

src/main.js

@@ -25,7 +25,7 @@ import elementIcons from '@/components/SvgIcon/svgicon'
 import './permission' // permission control
 
 import { useDict } from '@/utils/dict'
-import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/ruoyi'
+import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels, isNotEmpty} from '@/utils/ruoyi'
 
 // 分页组件
 import Pagination from '@/components/Pagination'
@@ -59,6 +59,7 @@ app.config.globalProperties.handleTree = handleTree
 app.config.globalProperties.addDateRange = addDateRange
 app.config.globalProperties.selectDictLabel = selectDictLabel
 app.config.globalProperties.selectDictLabels = selectDictLabels
+app.config.globalProperties.isNotEmpty = isNotEmpty
 
 // 全局组件挂载
 app.component('DictTag', DictTag)

src/store/modules/user.js

@@ -36,8 +36,7 @@ const useUserStore = defineStore(
         return new Promise((resolve, reject) => {
           getInfo().then(res => {
             const user = res.user
-            console.log('%c [ user ]-38', 'font-size:13px; background:pink; color:#bf2c9f;', user)
-            const avatar = (user.avatar == "" || user.avatar == null) ? defAva : 'http://192.168.4.206'+ user.avatar;
+            const avatar = (user.avatar == "" || user.avatar == null) ? defAva : 'http://192.168.3.82'+ user.avatar;
             // const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
 
             if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组

src/utils/ruoyi.js

@@ -244,3 +244,8 @@ export function getNormalPath(p) {
 export function blobValidate(data) {
   return data.type !== 'application/json'
 }
+
+// 非空校验
+export function isNotEmpty(value) {
+  return  value !== null && value !== undefined && value !== '';
+}
\ No newline at end of file

src/views/algorithmControl/components/form.vue

@@ -275,7 +275,13 @@
               <el-row :gutter="10" class="mb8">
                 <el-col :span="24">
                   <el-form-item label-width="130px" label="在线体验案例图片/视频" prop="algorithmBannerVideo">
-                    <ImgVideoUpload :modelValue="form.algorithmBannerVideo" :fileType="['png', 'jpg', 'mp4']"  :limit='5' :fileSize="20" :isShowTip="true"/>
+                    <ImgVideoUpload 
+                    :modelValue="imgVideoData"
+                     :fileType="['png', 'jpg', 'mp4']"
+                      :limit='4'
+                     :fileSize="20"
+                     :isShowTip="true"
+                     @update:modelValue="getImgVideoData"/>
                     <!-- <ImageUpload :modelValue="form.algorithmBannerVideo" :limit='1' :fileSize="30" @update:modelValue="getImageUrl"/> -->
                   </el-form-item>
                 </el-col>
@@ -454,7 +460,7 @@
 </template>
 
 <script setup>
-import { addAlg, updateAlg , detailAlg , listAlgFile} from "@/api/algorithmList/index.js";
+import { addAlg, updateAlg , detailAlg , listAlgFile, addListAlgorithmCase , listCase} 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();
@@ -465,6 +471,7 @@ const openScene = ref(false);
 const openBoundary = ref(false);
 const isAdd = ref(true);
 const title = ref("");
+const imgVideoData = ref("");
 const titleScene = ref("");
 const titleBoundary = ref("");
 const activeName = ref("基础信息");
@@ -513,6 +520,9 @@ function getAlgorithmBanner(url){
 function getBoundaryImageUrl(url){
     formBoundary.value.caseFile=url
 }
+function getImgVideoData(url){
+    imgVideoData.value=url
+}
 
 /** 表单重置 */
 function reset() {
@@ -542,6 +552,7 @@ function handleUpdate(row) {
   const id = row.id || ids.value;
   ids.value = id;
   getSceneList();
+  getListCase();
   getBoundaryList()
   detailAlg(id).then(response => {
     form.value = response.data;
@@ -556,6 +567,7 @@ function submitForm() {
   proxy.$refs["algRef"].validate(valid => {
     if (valid) {
       if (form.value.id != undefined) {
+        addCaseFile()
         updateAlg(form.value).then(response => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
@@ -722,6 +734,7 @@ function submitBoundaryRefForm() {
     }
   });
 }
+
 /** 取消按钮 */
 function cancelBoundary() {
   openBoundary.value = false;
@@ -729,6 +742,53 @@ function cancelBoundary() {
 }
 
 
+/** 查询案例文件列表 */
+function getListCase() {
+  listCase({ algorithmId: ids.value,caseType:2}).then(response => {
+    imgVideoData.value = response.rows.map(item=>{
+      return item.caseFile
+    });
+  });
+}
+
+//新增案例文件
+function addCaseFile(){
+  console.log("🚀 ~ addCaseFile ~ imgVideoData.value:", imgVideoData.value)
+
+  if(proxy.isNotEmpty(imgVideoData.value)){
+    const params={
+      algorithmId:form.value.id,
+      list:[]
+    }
+    imgVideoData.value.split(",").forEach(item => {
+      params.list.push({
+        algorithmId:form.value.id,
+        caseFile:item,
+        caseType:2,
+        fileType:getFileType(item),
+      })
+
+    });
+    console.log("🚀 ~ addCaseFile ~ params:", params)
+    addListAlgorithmCase(params).then(res=>{
+      console.log(res)
+    })
+  }
+}
+
+// 判断当前文件类型
+function getFileType(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(".").pop();
+    if (videoType.includes(fileType)) {
+      return "1";
+
+    }
+    if (ImgType.includes(fileType)) {
+      return "0";
+    }
+}
 
 defineExpose({ handleAdd , handleUpdate })
 </script>

src/views/algorithmList/components/details.vue

@@ -57,7 +57,10 @@
                      v-for="item in invalidList" :key="item.id"
                      @click="handBuiltImg(item.caseFile)"
                      >
-                       <img width="100%" :src="'http://192.168.4.206'+item.caseFile" alt=""> 
+                       <img width="100%" v-if="getFileType(item.caseFile)=='0'" :src="'http://192.168.3.82'+item.caseFile" alt=""> 
+                       <video width="100%"  v-else controls  class="drawImg">
+                          <source :src="'http://192.168.3.82'+item.caseFile" type="video/mp4" />
+                        </video>
                     </div>
                     <ImgVideoUpload 
                       style="position: absolute;bottom: 5px;left: 26%;" 
@@ -157,7 +160,7 @@ const applicationList = ref([])
 const effectiveList = ref([])
 const invalidList = ref([])
 const nowText=ref('算法详情')
-const baseUrl = 'http://192.168.4.206'
+const baseUrl = 'http://192.168.3.82'
 const data = reactive({
   form: {},
   queryParams: {
@@ -205,13 +208,27 @@ function judgeImgUrl(item){
         return item
       }
     }else{
-      return 'http://192.168.4.206/profile/upload/2024/08/28/banner%20background_20240828095250A003.png'
+      return 'http://192.168.3.82/profile/upload/2024/08/28/banner%20background_20240828095250A003.png'
     }
 
 }
 function handBuiltImg(item){
   nowImg.value = item
 }
+
+// 判断当前文件类型
+function getFileType(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(".").pop();
+    if (videoType.includes(fileType)) {
+      return "1";
+
+    }
+    if (ImgType.includes(fileType)) {
+      return "0";
+    }
+}
 getDetials()
 
 </script>

src/views/algorithmList/components/websockt.js

@@ -16,7 +16,7 @@ export function useWebSockets() {
         // 定义点击事件 myFn
         function handeUpload(e){
             uploadData.value = e
-            client.value = new WebSocketManager('ws://192.168.4.206:8111/ai/sf',websocketMessage)
+            client.value = new WebSocketManager('ws://192.168.3.82:8111/ai/sf',websocketMessage)
             client.value.connect();
         }
         function websocketMessage(e) {

src/views/algorithmList/index.vue

@@ -96,7 +96,7 @@
                 <template v-slot:default >
                   <div   style="width: 100%;max-height: 200px;overflow: hidden;">
                     <img
-                      :src="'http://192.168.4.206' +item.cardImg"
+                      :src="'http://192.168.3.82' +item.cardImg"
                       style="width: 100%;"
                     />
                   </div>