fix: 修改资源文件获取逻辑

- 现在组件库只保存相对路径，完整的路径由前端组装，新增配置项window.BS_CONFIG.httpConfigs.fileUrlPrefix，默认值使用baseUrl加/static
- 修改大屏前端使用到资源文件的地方，自行组装文件访问地址；
- 资源库新增其他文件类型默认图标，非图片类型文件，不直接显示

data-room-ui/example/main.js

@@ -40,7 +40,9 @@ registerConfig(
       componentUrl: '/big-screen-components'
     },
     httpConfigs: {
-      baseURL: window.CONFIG?.baseUrl
+      baseURL: window.CONFIG?.baseUrl,
+      // 现在文件路径保存的是相对路径，所以需要加上前缀,这个值一般和后端的gc.starter.file.urlPrefix一致
+      fileUrlPrefix: window.CONFIG.fileUrlPrefix ? window.CONFIG.fileUrlPrefix : window.CONFIG?.baseUrl + '/static',
     },
     customTheme: {
       '--bs-background-1': '#151a26', // 整体背景色

data-room-ui/packages/BasicComponents/FlyMap/index.vue

@@ -117,7 +117,7 @@ export default {
       let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
       // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
       if (!hasMapId) {
-        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/worldMap/world.json`
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/worldMap/world.json`
       }
       this.$dataRoomAxios.get(mapInfoUrl, {}, true).then(res => {
         if (this.config.option.data) {

data-room-ui/packages/BasicComponents/Map/index.vue

@@ -289,7 +289,7 @@ export default {
       let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
       // 如果设置了地图id，就用地图id获取地图数据，否则用默认的世界地图
       if (!hasMapId) {
-        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/static/chinaMap/country/中华人民共和国.json`
+        mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}/chinaMap/country/中华人民共和国.json`
       }
       const mapResp = await this.$dataRoomAxios.get(decodeURI(mapInfoUrl), {}, true)
       const map = hasMapId ? JSON.parse(mapResp.data.geoJson) : mapResp

data-room-ui/packages/BasicComponents/Map/setting.vue

@@ -445,7 +445,7 @@ export default {
 .lc-field-body {
   padding: 12px 16px;
 }
-/deep/.bs-el-slider-dark {
+::v-deep.bs-el-slider-dark {
 
   .el-slider__runway {
     background-color: var(--bs-el-background-1) !important;

data-room-ui/packages/BasicComponents/Picture/index.vue

@@ -2,7 +2,7 @@
   <div class="bs-design-wrap bs-picture">
     <div class="content-box">
       <el-image
-        :src="config.customize.url || noImageUrl"
+        :src="getCoverPicture(config.customize.url) || noImageUrl"
         fit="fill"
         :style="{
           width: '100%',
@@ -23,6 +23,7 @@
   </div>
 </template>
 <script>
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
 
 export default {
@@ -44,7 +45,14 @@ export default {
   watch: {},
   mounted () {},
   methods: {
-
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
+    },
   }
 }
 </script>

data-room-ui/packages/BasicComponents/Picture/setting.vue

@@ -79,7 +79,7 @@
             >
               <img
                 class="el-upload-list__item-thumbnail"
-                :src="file.url"
+                :src="getCoverPicture(file.url)"
                 alt=""
               >
               <span class="el-upload-list__item-actions">
@@ -122,6 +122,7 @@
 import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
 export default {
   name: 'PicSetting',
@@ -146,22 +147,22 @@ export default {
       hideUpload: false,
       rules: {
         'customize.url': [
-          // 地址校验
+          // 地址校验 NOTE 暂时移除校验，因为通过系统上传的图片，url是相对路径，无法通过校验
-          {
+          // {
-            validator: (rule, value, callback) => {
+          //   validator: (rule, value, callback) => {
-              if (value) {
+          //     if (value) {
-                const reg = /^(http|https):\/\/([\w.]+\/?)\S*/
+          //       const reg = /^(http|https):\/\/([\w.]+\/?)\S*/
-                if (!reg.test(value)) {
+          //       if (!reg.test(value)) {
-                  callback(new Error('请输入正确的URL地址'))
+          //         callback(new Error('请输入正确的URL地址'))
-                } else {
+          //       } else {
-                  callback()
+          //         callback()
-                }
+          //       }
-              } else {
+          //     } else {
-                callback()
+          //       callback()
-              }
+          //     }
-            },
+          //   },
-            trigger: 'blur'
+          //   trigger: 'blur'
-          }
+          // }
         ]
       }
     }
@@ -230,7 +231,15 @@ export default {
         this.$message.error('上传图片大小不能超过 2MB!')
       }
       return isLt2M
-    }
+    },
+    /**
+     * 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
+    },
   }
 }
 </script>

data-room-ui/packages/BigScreenList/index.vue

@@ -93,7 +93,7 @@
             </div>
             <div class="big-screen-card-img">
               <el-image
-                :src="screen.coverPicture"
+                :src="getCoverPicture(screen.coverPicture)"
                 fit="fill"
                 style="width: 100%; height: 100%"
               >
@@ -156,6 +156,7 @@
 </template>
 <script>
 import { pageMixins } from 'data-room-ui/js/mixins/page'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 import EditForm from './EditForm.vue'
 export default {
   name: 'BigScreenList',
@@ -176,7 +177,6 @@ export default {
       templateLoading: false,
       searchKey: '',
       list: [],
-      defaultImg: require('./images/defaultImg.png'),
       loading: false
     }
   },
@@ -301,7 +301,15 @@ export default {
         .catch((e) => {
           console.error(e)
         })
-    }
+    },
+    /**
+     * 获取封面图片,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
+    },
   }
 }
 </script>

data-room-ui/packages/ComponentList/index.vue

@@ -122,7 +122,7 @@
             </div>
             <div class="big-screen-card-img">
               <el-image
-                :src="catalogInfo !== 'system' ? screen.coverPicture : screen.img"
+                :src="catalogInfo !== 'system' ? getCoverPicture(screen.coverPicture) : screen.img"
                 fit="fill"
                 style="width: 100%; height: 100%"
               >
@@ -196,6 +196,7 @@
 </template>
 <script>
 import { pageMixins } from 'data-room-ui/js/mixins/page'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
 import EditForm from './EditForm.vue'
 import CatalogEditForm from './CatalogEditForm'
 import innerRemoteComponents, { getRemoteComponents } from 'data-room-ui/RemoteComponents/remoteComponentsList'
@@ -216,7 +217,6 @@ export default {
       templateLoading: false,
       searchKey: '',
       list: [],
-      defaultImg: require('./images/defaultImg.png'),
       loading: false,
       catalogList: [], // 分组列表
       catalogCode: ''
@@ -418,7 +418,15 @@ export default {
         .catch((e) => {
           console.error(e)
         })
-    }
+    },
+    /**
+     * 获取封面图片,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
+    },
   }
 }
 </script>

data-room-ui/packages/SourceList/images/audio.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991594397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1987" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M147.2 0C102.4 0 65.6 36.8 65.6 81.6v860.8c0 44.8 36.8 81.6 81.6 81.6h731.2c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0H147.2z" fill="#379FD3" p-id="1988"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-108.8c0 0 3.2 92.8 96 92.8H960z" fill="#2987C8" p-id="1989"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1990"></path><path d="M540.8 544l-227.2 30.4v214.4c-11.2-3.2-25.6-4.8-40-1.6-32 6.4-52.8 27.2-46.4 46.4 6.4 20.8 36.8 30.4 68.8 24 28.8-4.8 48-22.4 48-40V646.4l166.4-20.8v132.8c-11.2-3.2-25.6-3.2-40 0-33.6 6.4-54.4 27.2-48 46.4 6.4 19.2 36.8 30.4 70.4 24 28.8-6.4 49.6-24 48-41.6V544z" fill="#FFFFFF" p-id="1991"></path></svg>

data-room-ui/packages/SourceList/images/excel.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991575786" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1673" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#45B058" p-id="1674"></path><path d="M374.4 862.4c-3.2 0-6.4-1.6-8-3.2l-59.2-80-60.8 80c-1.6 1.6-4.8 3.2-8 3.2-6.4 0-11.2-4.8-11.2-11.2 0-1.6 0-4.8 1.6-6.4l62.4-81.6-57.6-78.4c-1.6-1.6-3.2-3.2-3.2-6.4 0-4.8 4.8-11.2 11.2-11.2 4.8 0 8 1.6 9.6 4.8l56 73.6 54.4-73.6c1.6-3.2 4.8-4.8 8-4.8 6.4 0 12.8 4.8 12.8 11.2 0 3.2-1.6 4.8-1.6 6.4l-59.2 76.8 62.4 83.2c1.6 1.6 3.2 4.8 3.2 6.4 0 6.4-6.4 11.2-12.8 11.2z m160-1.6H448c-9.6 0-17.6-8-17.6-17.6V678.4c0-6.4 4.8-11.2 12.8-11.2 6.4 0 11.2 4.8 11.2 11.2v161.6h80c6.4 0 11.2 4.8 11.2 9.6 0 6.4-4.8 11.2-11.2 11.2z m112 3.2c-28.8 0-51.2-9.6-67.2-24-3.2-1.6-3.2-4.8-3.2-8 0-6.4 3.2-12.8 11.2-12.8 1.6 0 4.8 1.6 6.4 3.2 12.8 11.2 32 20.8 54.4 20.8 33.6 0 44.8-19.2 44.8-33.6 0-49.6-113.6-22.4-113.6-89.6 0-32 27.2-54.4 65.6-54.4 24 0 46.4 8 60.8 20.8 3.2 1.6 4.8 4.8 4.8 8 0 6.4-4.8 12.8-11.2 12.8-1.6 0-4.8-1.6-6.4-3.2-14.4-11.2-32-16-49.6-16-24 0-40 11.2-40 30.4 0 43.2 113.6 17.6 113.6 89.6 0 27.2-19.2 56-70.4 56z" fill="#FFFFFF" p-id="1675"></path><path d="M960 326.4v16H755.2s-102.4-20.8-99.2-108.8c0 0 3.2 92.8 96 92.8h208z" fill="#349C42" p-id="1676"></path><path d="M656 0v233.6c0 25.6 19.2 92.8 99.2 92.8H960L656 0z" fill="#FFFFFF" opacity=".5" p-id="1677"></path></svg>

data-room-ui/packages/SourceList/images/pdf.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991649675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2144" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8C181A" p-id="2145"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-107.2c0 0 3.2 91.2 96 91.2H960z" fill="#6B0D12" p-id="2146"></path><path d="M657.6 0v233.6c0 27.2 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="2147"></path><path d="M302.4 784h-52.8v65.6c0 6.4-4.8 11.2-12.8 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 8-17.6 17.6-17.6h59.2c38.4 0 60.8 27.2 60.8 57.6 0 32-22.4 57.6-60.8 57.6z m-1.6-94.4h-51.2v73.6h51.2c22.4 0 38.4-14.4 38.4-36.8s-16-36.8-38.4-36.8z m166.4 171.2h-48c-9.6 0-17.6-8-17.6-17.6v-156.8c0-9.6 8-17.6 17.6-17.6h48c59.2 0 99.2 41.6 99.2 96s-38.4 96-99.2 96z m0-171.2h-41.6v148.8h41.6c46.4 0 73.6-33.6 73.6-75.2 1.6-40-25.6-73.6-73.6-73.6z m260.8 0h-92.8V752h91.2c6.4 0 9.6 4.8 9.6 11.2s-4.8 9.6-9.6 9.6h-91.2v76.8c0 6.4-4.8 11.2-12.8 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 8-17.6 17.6-17.6h99.2c6.4 0 9.6 4.8 9.6 11.2 1.6 4.8-3.2 9.6-9.6 9.6z" fill="#FFFFFF" p-id="2148"></path></svg>

data-room-ui/packages/SourceList/images/ppt.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991587019" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1830" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#E34221" p-id="1831"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#DC3119" p-id="1832"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1833"></path><path d="M304 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V686.4c0-9.6 8-17.6 17.6-17.6H304c38.4 0 59.2 25.6 59.2 57.6S340.8 784 304 784z m-3.2-94.4h-51.2v73.6h51.2c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8zM480 784h-54.4v67.2c0 6.4-4.8 11.2-11.2 11.2-6.4 0-11.2-4.8-11.2-11.2V686.4c0-9.6 6.4-17.6 16-17.6H480c38.4 0 59.2 25.6 59.2 57.6S518.4 784 480 784z m-3.2-94.4h-49.6v73.6h49.6c22.4 0 38.4-16 38.4-36.8 0-22.4-16-36.8-38.4-36.8z m225.6 0h-52.8v161.6c0 6.4-4.8 11.2-11.2 11.2-6.4 0-12.8-4.8-12.8-11.2V689.6h-51.2c-6.4 0-11.2-4.8-11.2-11.2 0-4.8 4.8-9.6 11.2-9.6h128c6.4 0 11.2 4.8 11.2 11.2 0 4.8-4.8 9.6-11.2 9.6z" fill="#FFFFFF" p-id="1834"></path></svg>

data-room-ui/packages/SourceList/images/unknown.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991872321" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2301" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8199AF" p-id="2302"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#617F9B" p-id="2303"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="2304"></path></svg>

data-room-ui/packages/SourceList/images/video.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991554216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1202" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M147.2 0C102.4 0 65.6 36.8 65.6 81.6v860.8c0 44.8 36.8 81.6 81.6 81.6h731.2c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0H147.2z" fill="#8E4C9E" p-id="1203"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#713985" p-id="1204"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1205"></path><path d="M456 728c0 6.4-1.6 12.8-6.4 16-3.2 3.2-84.8 70.4-190.4 113.6-1.6 1.6-4.8 1.6-8 1.6s-6.4-1.6-9.6-3.2c-6.4-3.2-9.6-8-11.2-16 0-1.6-4.8-54.4-4.8-112s4.8-108.8 4.8-112c1.6-6.4 4.8-11.2 11.2-16 3.2-1.6 6.4-3.2 9.6-3.2 3.2 0 6.4 1.6 8 3.2 105.6 41.6 187.2 110.4 190.4 113.6 4.8 3.2 6.4 9.6 6.4 14.4z" fill="#FFFFFF" p-id="1206"></path></svg>

data-room-ui/packages/SourceList/images/word.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991563849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1359" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#14A9DA" p-id="1360"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#0F93D0" p-id="1361"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1362"></path><path d="M291.2 862.4h-48c-9.6 0-17.6-8-17.6-17.6v-158.4c0-9.6 8-16 17.6-16h48c60.8 0 99.2 41.6 99.2 96s-38.4 96-99.2 96z m0-171.2h-41.6v148.8h41.6c48 0 75.2-33.6 75.2-73.6 0-41.6-27.2-75.2-75.2-75.2z m232 174.4c-57.6 0-96-43.2-96-99.2s38.4-99.2 96-99.2c56 0 94.4 41.6 94.4 99.2 0 56-38.4 99.2-94.4 99.2z m0-177.6c-43.2 0-70.4 33.6-70.4 78.4 0 44.8 27.2 76.8 70.4 76.8 41.6 0 70.4-32 70.4-76.8S564.8 688 523.2 688z m294.4 6.4c1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-3.2 0-6.4-1.6-8-3.2-11.2-14.4-30.4-22.4-48-22.4-41.6 0-73.6 32-73.6 78.4 0 44.8 32 76.8 73.6 76.8 17.6 0 35.2-6.4 48-20.8 1.6-3.2 4.8-4.8 8-4.8 6.4 0 11.2 6.4 11.2 12.8 0 3.2-1.6 4.8-3.2 8-14.4 16-35.2 27.2-64 27.2-56 0-99.2-40-99.2-99.2s43.2-99.2 99.2-99.2c28.8 0 49.6 11.2 64 27.2z" fill="#FFFFFF" p-id="1363"></path></svg>

data-room-ui/packages/SourceList/images/zip.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1696991566771" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1516" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40"><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#8199AF" p-id="1517"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#617F9B" p-id="1518"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="1519"></path><path d="M358.4 862.4h-120c-6.4 0-12.8-4.8-12.8-12.8 0-3.2 1.6-6.4 3.2-8l105.6-150.4h-99.2c-4.8 0-9.6-4.8-9.6-11.2 0-4.8 4.8-9.6 9.6-9.6h120c6.4 0 11.2 4.8 11.2 12.8 0 3.2 0 6.4-1.6 8l-107.2 150.4h100.8c6.4 0 11.2 4.8 11.2 9.6 0 6.4-4.8 11.2-11.2 11.2z m64 1.6c-6.4 0-11.2-4.8-11.2-11.2V680c0-6.4 4.8-11.2 12.8-11.2 6.4 0 11.2 4.8 11.2 11.2v172.8c0 6.4-4.8 11.2-12.8 11.2z m142.4-78.4H512v67.2c0 6.4-6.4 11.2-12.8 11.2s-11.2-4.8-11.2-11.2V688c0-9.6 6.4-17.6 16-17.6h60.8c38.4 0 60.8 27.2 60.8 57.6s-22.4 57.6-60.8 57.6z m-3.2-94.4H512v73.6h49.6c22.4 0 38.4-14.4 38.4-36.8 0-20.8-16-36.8-38.4-36.8z" fill="#FFFFFF" p-id="1520"></path></svg>

data-room-ui/packages/SourceList/index.vue

@@ -5,18 +5,18 @@
         <el-input
           v-model="searchKey"
           class="bs-el-input"
+          clearable
           placeholder="请输入图片名称"
           prefix-icon="el-icon-search"
-          clearable
           @clear="reSearch"
           @keyup.enter.native="reSearch"
         />
         <el-select
           v-model="extend"
           class="bs-el-select"
-          popper-class="bs-el-select"
-          placeholder="请选择图片格式"
           clearable
+          placeholder="请选择图片格式"
+          popper-class="bs-el-select"
           @change="reSearch"
         >
           <el-option
@@ -34,17 +34,16 @@
           搜索
         </el-button>
         <el-upload
-          accept="image/*, video/*"
-          class="upload-demo"
           :action="upLoadUrl"
-          :headers="headers"
-          :data="{ module: code }"
           :before-upload="beforeUpload"
-          :on-success="uploadSuccess"
+          :data="{ module: code }"
-          :on-error="uploadError"
-          multiple
           :file-list="fileList"
+          :headers="headers"
+          :on-error="uploadError"
+          :on-success="uploadSuccess"
           :show-file-list="false"
+          class="upload-demo"
+          multiple
         >
           <el-button
             type="primary"
@@ -56,21 +55,21 @@
       <div
         v-if="list.length !== 0"
         v-loading="loading"
-        class="list-wrap bs-scrollbar"
-        element-loading-text="加载中"
         :style="{
           display: gridComputed ? 'grid' : 'flex',
           justifyContent: gridComputed ? 'space-around' : 'flex-start'
         }"
+        class="list-wrap bs-scrollbar"
+        element-loading-text="加载中"
       >
         <!-- <div v-if="list.length !== 0"> -->
         <div
           v-for="screen in list"
           :key="screen.id"
-          class="big-screen-card-wrap"
           :style="{
             width: gridComputed ? 'auto' : '290px'
           }"
+          class="big-screen-card-wrap"
         >
           <div class="big-screen-card-inner">
             <div class="screen-card__hover">
@@ -103,9 +102,23 @@
                 </div>
               </div>
             </div>
-            <div class="big-screen-card-img">
+            <div v-if="imgExtends.includes(screen.extension)" class="big-screen-card-img">
               <el-image
-                :src="screen.url"
+                :src="getCoverPicture(screen.url)"
+                fit="contain"
+                style="width: 100%; height: 100%"
+              >
+                <div
+                  slot="placeholder"
+                  class="image-slot"
+                >
+                  加载中···
+                </div>
+              </el-image>
+            </div>
+            <div v-else class="big-screen-card-img">
+              <el-image
+                :src="getUrl(screen)"
                 fit="contain"
                 style="width: 100%; height: 100%"
               >
@@ -119,8 +132,8 @@
             </div>
             <div class="big-screen-bottom">
               <div
-                class="left-bigscreen-title"
                 :title="screen.originalName"
+                class="left-bigscreen-title"
               >
                 {{ screen.originalName }}
               </div>
@@ -141,16 +154,16 @@
       </div> -->
         <div class="bs-pagination">
           <el-pagination
-            class="bs-el-pagination"
+            :current-page="current"
-            popper-class="bs-el-pagination"
+            :page-size="size"
+            :page-sizes="[10, 20, 50, 100]"
+            :total="totalCount"
             background
+            class="bs-el-pagination"
             layout="total, prev, pager, next, sizes"
-            :page-size="size"
-            prev-text="上一页"
             next-text="下一页"
-            :total="totalCount"
+            popper-class="bs-el-pagination"
-            :page-sizes="[10, 20, 50, 100]"
+            prev-text="上一页"
-            :current-page="current"
             @current-change="currentChangeHandle"
             @size-change="sizeChangeHandle"
           />
@@ -166,8 +179,10 @@
   </div>
 </template>
 <script>
-import { pageMixins } from 'data-room-ui/js/mixins/page'
+import {pageMixins} from 'data-room-ui/js/mixins/page'
 import EditForm from './EditForm.vue'
+import { getFileUrl } from 'data-room-ui/js/utils/file'
+
 export default {
   name: 'BigScreenList',
   mixins: [pageMixins],
@@ -178,11 +193,12 @@ export default {
     },
     catalogInfo: {
       type: Object,
-      default: () => { }
+      default: () => {
+      }
     }
   },
-  components: { EditForm },
+  components: {EditForm},
-  data () {
+  data() {
     return {
       upLoadUrl: window.BS_CONFIG?.httpConfigs?.baseURL + '/bigScreen/file/upload',
       searchKey: '',
@@ -194,36 +210,66 @@ export default {
         ...window.BS_CONFIG?.httpConfigs?.headers
       },
       fileList: [],
-      defaultImg: require('./images/defaultImg.png'),
+      loading: false,
-      loading: false
+      imgExtends: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico'],
+      otherExtends: {
+        video: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'dat', 'ts', 'mts', 'vob'],
+        audio: ['mp3', 'wav', 'wma', 'ogg', 'aac', 'flac', 'ape', 'm4a', 'm4r', 'amr', 'ac3'],
+        excel: ['xls', 'xlsx'],
+        word: ['doc', 'docx'],
+        ppt: ['ppt', 'pptx'],
+        pdf: ['pdf']
+      }
     }
   },
   computed: {
-    code () {
+    code() {
       return this.catalogInfo?.page?.code
     },
-    gridComputed () {
+    gridComputed() {
       return this.list.length > 3
     }
   },
   watch: {
-    code (value) {
+    code(value) {
       this.current = 1
       this.getDataList()
     }
   },
-  mounted () {
+  mounted() {
     this.getOptions()
     this.getDataList()
   },
   methods: {
-    uploadError () {
+    getUrl(file) {
+      let extension = file.extension
+      if (this.otherExtends.video.includes(extension)) {
+        return require('./images/video.svg')
+      }
+      if (this.otherExtends.audio.includes(extension)) {
+        return require('./images/audio.svg')
+      }
+      if (this.otherExtends.excel.includes(extension)) {
+        return require('./images/excel.svg')
+      }
+      if (this.otherExtends.word.includes(extension)) {
+        return require('./images/word.svg')
+      }
+      if (this.otherExtends.ppt.includes(extension)) {
+        return require('./images/ppt.svg')
+      }
+      if (this.otherExtends.pdf.includes(extension)) {
+        return require('./images/pdf.svg')
+      }
+      return require('./images/unknown.svg')
+    },
+    uploadError() {
       this.$message({
         type: 'error',
         message: '上传失败'
       })
     },
-    beforeUpload (file) {
+    beforeUpload(file) {
       const isImage = file.type.startsWith('image/')
       const isVideo = file.type.startsWith('video/')
       const isValidFileType = isImage || isVideo
@@ -234,7 +280,7 @@ export default {
 
       return isValidFileType
     },
-    uploadSuccess (response, file, fileList) {
+    uploadSuccess(response, file, fileList) {
       if (response.code === 200) {
         this.$message({
           type: 'success',
@@ -248,16 +294,16 @@ export default {
         })
       }
     },
-    getOptions () {
+    getOptions() {
       this.$dataRoomAxios.get('/bigScreen/file/getAllFileSuffix').then((data) => {
         this.options = []
-        this.options.push({ label: '全部', value: '' })
+        this.options.push({label: '全部', value: ''})
         // 过滤data的空数据
         data = data.filter((item) => item)
-        data.forEach((item) => this.options.push({ label: item, value: item }))
+        data.forEach((item) => this.options.push({label: item, value: item}))
       })
     },
-    getDataList () {
+    getDataList() {
       this.loading = true
       this.$dataRoomAxios.get('/bigScreen/file', {
         module: this.catalogInfo.page.code,
@@ -274,13 +320,13 @@ export default {
           this.loading = false
         })
     },
-    preview (screen) {
+    preview(screen) {
-      window.open(screen.url, '_blank')
+      window.open(getFileUrl(screen.url), '_blank')
     },
-    downLoad (screen) {
+    downLoad(screen) {
       this.$dataRoomAxios.download(`/bigScreen/file/download/${screen.id}`)
     },
-    del (screen) {
+    del(screen) {
       this.$confirm('确定删除该资源？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -305,11 +351,11 @@ export default {
         })
         .catch()
     },
-    copy (screen) {
+    copy(screen) {
       this.$message.success('复制成功')
       const transfer = document.createElement('input')
       document.body.appendChild(transfer)
-      transfer.value = screen.url // 这里表示想要复制的内容
+      transfer.value = getFileUrl(screen.url) // 这里表示想要复制的内容
       transfer.focus()
       transfer.select()
       if (document.execCommand('copy')) {
@@ -317,7 +363,15 @@ export default {
       }
       transfer.blur()
       transfer.style.display = 'none'
-    }
+    },
+    /**
+     * 获取封面图片,如果是相对路径则拼接上文件访问前缀地址
+     * @param url
+     * @returns {*}
+     */
+    getCoverPicture (url) {
+      return getFileUrl(url)
+    },
   }
 }
 </script>

data-room-ui/packages/js/utils/file.js

@@ -0,0 +1,20 @@
+function getFileUrl(url){
+  // 如果是空的直接返回
+  if (!url) {
+    return url
+  }
+  // 如果是http开头的直接返回
+  if (/^http/.test(url)) {
+    return url
+  }
+  // 如果没有以/开头的加上/
+  if (!/^\//.test(url)) {
+    url = `/${url}`
+  }
+  return `${window.BS_CONFIG?.httpConfigs?.fileUrlPrefix}${url}`
+}
+
+
+export {
+  getFileUrl
+}

data-room-ui/public/config/index-development.js

@@ -1,6 +1,7 @@
 window.ENV = 'development'
 var developmentConfig = {
-  baseUrl: 'http://127.0.0.1:8081/bigScreenServer'
+  baseUrl: 'http://127.0.0.1:8081/bigScreenServer',
+  fileUrlPrefix: 'http://127.0.0.1:8081/bigScreenServer' + '/static'
 }
 // 必须的
 window.CONFIG = configDeepMerge(window.CONFIG, developmentConfig)

data-room-ui/public/config/index-production.js

@@ -1,6 +1,8 @@
 window.ENV = 'production'
 var productionConfig = {
-  baseUrl: 'http://gcpaas.gccloud.com/bigScreenServer'
+  baseUrl: 'http://gcpaas.gccloud.com/bigScreenServer',
+  fileUrlPrefix: 'http://gcpaas.gccloud.com/bigScreenServer' + '/static'
+
 }
 // 必须的
 window.CONFIG = configDeepMerge(window.CONFIG, productionConfig)