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

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

@ -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', // 整体背景色

@ -117,7 +117,7 @@ export default {
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// idid
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) {

@ -289,7 +289,7 @@ export default {
let mapInfoUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/info/${config.customize.mapId}`
// idid
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

@ -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;

@ -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>

@ -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': [
//
{
validator: (rule, value, callback) => {
if (value) {
const reg = /^(http|https):\/\/([\w.]+\/?)\S*/
if (!reg.test(value)) {
callback(new Error('请输入正确的URL地址'))
} else {
callback()
}
} else {
callback()
}
},
trigger: 'blur'
}
// NOTE url
// {
// validator: (rule, value, callback) => {
// if (value) {
// const reg = /^(http|https):\/\/([\w.]+\/?)\S*/
// if (!reg.test(value)) {
// callback(new Error('URL'))
// } else {
// callback()
// }
// } else {
// callback()
// }
// },
// trigger: 'blur'
// }
]
}
}
@ -230,7 +231,15 @@ export default {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isLt2M
}
},
/**
* 获取图片访问地址,如果是相对路径则拼接上文件访问前缀地址
* @param url
* @returns {*}
*/
getCoverPicture (url) {
return getFileUrl(url)
},
}
}
</script>

@ -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>

@ -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>

@ -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>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 265 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.6 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.4 KiB

@ -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>

After

Width:  |  Height:  |  Size: 723 B

@ -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>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -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>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -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"
:on-error="uploadError"
multiple
:data="{ module: code }"
: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"
popper-class="bs-el-pagination"
:current-page="current"
: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"
:page-sizes="[10, 20, 50, 100]"
:current-page="current"
popper-class="bs-el-pagination"
prev-text="上一页"
@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 },
data () {
components: {EditForm},
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) {
window.open(screen.url, '_blank')
preview(screen) {
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>

@ -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
}

@ -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)

@ -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)

Loading…
Cancel
Save