DeXun/fad-dashboard
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
砂糖
2025-11-08 10:38:36 +08:00
commit 3beeec7296
1626 changed files with 198488 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

286
frontend/packages/BigScreenList/CatalogEditForm.vue Normal file
View File

@@ -0,0 +1,286 @@
<template>
<div>
<el-dialog
:close-on-click-modal="false"
title="分组管理"
:visible.sync="formVisible"
:append-to-body="true"
destroy-on-close
class="bs-dialog-wrap bs-el-dialog catalog-edit-wrap "
>
<el-form
v-if="formVisible"
ref="dataForm"
label-position="right"
label-width="100px"
class="bs-el-form"
>
<el-input
v-model="searchKey"
class="bs-el-input"
placeholder="请输入分组名称"
prefix-icon="el-icon-search"
clearable
@clear="reSearch"
@keyup.enter.native="reSearch"
/>
<el-button
type="primary"
@click="reSearch"
>
搜索
</el-button>
<el-button
type="primary"
@click="addCatalog"
>
新增
</el-button>
<el-table
class="bs-el-table"
height="100%"
:data="tableList"
>
<el-empty />
<el-table-column
show-overflow-tooltip
label="名称"
prop="name"
align="center"
/>
<el-table-column
show-overflow-tooltip
label="排序"
prop="orderNum"
align="center"
/>
<el-table-column
label="操作"
width="150"
align="center"
>
<template slot-scope="scope">
<el-button
type="text"
@click="editCatalog(scope.row)"
>
编辑
</el-button>
<el-button
type="text"
@click="catalogDel(scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
</el-dialog>
<!-- 新增或编辑目录弹窗 -->
<el-dialog
:title="currentCatalog.code ? '编辑分组':'新增分组'"
:visible.sync="catalogVisible"
custom-class="bs-el-dialog"
width="30%"
class="bs-dialog-wrap bs-el-dialog"
@close="handleClose"
>
<el-form
ref="form"
:model="currentCatalog"
label-width="80px"
:rules="formRules"
class="bs-el-form"
>
<el-form-item
label="分组名称"
prop="name"
>
<el-input
v-model.trim="currentCatalog.name"
class="bs-el-input"
clearable
/>
</el-form-item>
<el-form-item
label="排序"
>
<el-input-number
v-model="currentCatalog.orderNum"
:min="0"
:max="30000"
controls-position="right"
class="bs-el-input-number"
/>
</el-form-item>
</el-form>
<span
slot="footer"
class="dialog-footer"
>
<el-button
class="bs-el-button-default"
@click="catalogVisible = false"
>
取消
</el-button>
<el-button
type="primary"
@click="addOrEditCatalog"
>
确定
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import cloneDeep from 'lodash/cloneDeep'
export default {
name: 'CatalogEditForm',
components: {
},
props: {
catalogType: {
type: String,
default: ''
},
catalogList: {
type: Array,
default: () => {}
}
},
data () {
const validateName = (rule, value, callback) => {
this.$dataRoomAxios.post('/bigScreen/type/nameRepeat', {
id: this.currentCatalog.id,
name: value,
type: this.catalogType
}, true).then((r) => {
if (r.data) {
callback(new Error('分组名称已存在'))
} else {
callback()
}
})
}
return {
searchKey: '', // 分组查询
catalogVisible: false,
currentCatalog: {},
formVisible: false,
formRules: {
name: [
{ required: true, message: '分组名称不能为空', trigger: 'blur' },
{ validator: validateName, trigger: 'blur' }
]
}
}
},
computed: {
tableList: {
get () {
return cloneDeep(this.catalogList)
},
set () {
}
}
},
watch: {
},
mounted () {
// this.getCatalogList()
},
methods: {
reSearch () {
},
// 获取分组列表
getCatalogList () {
this.$dataRoomAxios.get(`/bigScreen/type/list/${this.catalogType}`)
.then((data) => {
this.tableList = data
})
.catch(() => {})
},
// 新增编辑目录（点击确定）
addOrEditCatalog () {
this.$refs.form.validate(async (valid) => {
if (!valid) {
return
}
if (!this.currentCatalog.id) {
this.$dataRoomAxios.post('/bigScreen/type/add',
{
...this.currentCatalog,
type: this.catalogType
}).then(data => {
this.catalogVisible = false
this.getCatalogList()
}).catch(() => {
})
} else {
this.$dataRoomAxios.post('/bigScreen/type/update', { ...this.currentCatalog, type: this.type || 'bigScreenCatalog' }).then(data => {
this.catalogVisible = false
this.getCatalogList()
}).catch(() => {
})
}
})
},
addCatalog () {
this.currentCatalog = {
name: '',
id: '',
code: '',
orderNum: 0
}
this.catalogVisible = true
},
editCatalog (row) {
this.currentCatalog = cloneDeep(row)
this.catalogVisible = true
},
// 删除目录
catalogDel (catalog) {
this.$confirm('确定删除该目录？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'bs-el-message-box'
}).then(async () => {
this.$dataRoomAxios.post(`/bigScreen/type/delete/${catalog.id}`).then(() => {
this.$message({
type: 'success',
message: '删除成功'
})
this.getCatalogList()
}).catch(() => {
this.$message({
type: 'error',
message: '删除失败!'
})
})
}).catch()
},
// 关闭目录弹窗
handleClose () {
this.catalogVisible = false
this.$refs.form.clearValidate()
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.catalog-edit-wrap{
.el-input {
width: 200px;
margin-right: 20px
}
}
</style>

592
frontend/packages/BigScreenList/EditForm.vue Normal file
View File

@@ -0,0 +1,592 @@
<template>
<div>
<el-dialog
:close-on-click-modal="false"
:title="title ? '编辑大屏' : '新增大屏'"
:visible.sync="formVisible"
:append-to-body="true"
class="bs-dialog-wrap bs-el-dialog"
@close="closeAddDialog"
>
<el-form
ref="dataForm"
:model="dataForm"
:rules="dataFormRules"
label-position="right"
label-width="100px"
class="bs-el-form"
>
<el-form-item
label="名称"
prop="name"
>
<el-input
v-model="dataForm.name"
autocomplete="off"
placeholder="请输入名称"
clearable
maxlength="30"
class="bs-el-input"
/>
</el-form-item>
<el-form-item
v-if="!!dataForm.id"
label="大屏编码"
>
<el-input
style="width: 200px"
v-model="dataForm.code"
readonly
class="bs-el-input"
/>
<el-button
style="margin-left: 10px;"
type="text"
@click="copyCode"
class="bs-el-button"
>
<i class="el-icon-document-copy" />
</el-button>
</el-form-item>
<el-form-item
label="推荐分辨率"
>
<el-select
v-model="resolutionRatioValue"
class="bs-el-select"
popper-class="bs-el-select"
placeholder="请选择分辨率"
clearable
>
<el-option
v-for="resolutionRatioItem in resolutionRatioOptions"
:key="resolutionRatioItem.value"
:label="resolutionRatioItem.label"
:value="resolutionRatioItem.value"
/>
</el-select>
</el-form-item>
<el-form-item
label="大屏宽度"
>
<el-input-number
v-model="resolutionRatio.w"
:min="100"
:max="8000"
class="bs-el-input-number"
/>
</el-form-item>
<el-form-item
label="大屏高度"
>
<el-input-number
v-model="resolutionRatio.h"
:min="100"
:max="8000"
class="bs-el-input-number"
/>
</el-form-item>
<el-form-item label="分组">
<el-select
v-model="dataForm.parentCode"
class="bs-el-select"
popper-class="bs-el-select"
clearable
filterable
>
<el-option
v-for="catalogItem in catalogList"
:key="catalogItem.id"
:label="catalogItem.name"
:value="catalogItem.code"
/>
</el-select>
</el-form-item>
<el-form-item label="排序">
<el-input-number
v-model="dataForm.orderNum"
:min="0"
:max="30000"
controls-position="right"
class="bs-el-input-number"
/>
</el-form-item>
</el-form>
<div
slot="footer"
class="dialog-footer"
>
<el-button
class="bs-el-button-default"
@click="closeAddDialog"
>
取消
</el-button>
<el-button
v-if="title"
type="primary"
:loading="toDesignLoading"
:disabled="toDesignDisabled"
@click="addOrUpdate(true)"
>
设计
</el-button>
<el-button
type="primary"
:loading="sureLoading"
:disabled="sureDisabled"
@click="addOrUpdate(!title)"
>
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import Icon from 'data-room-ui/assets/images/dataSourceIcon/export'
export default {
name: 'EditForm',
components: {
},
props: {
type: {
type: String,
default: ''
}
},
data () {
return {
resolutionRatioValue: '',
resolutionRatio: {},
catalogList: [],
resolutionRatioOptions: [
{
value: '1024*768',
label: '1024*768'
},
{
value: '1280*720',
label: '1280*720'
},
{
value: '1920*1080',
label: '1920*1080'
},
{
value: '2560*1440',
label: '2560*1440'
},
{
value: '3840*2160',
label: '3840*2160'
},
{
value: '5120*2880',
label: '5120*2880'
},
{
value: '7680*4320',
label: '7680*4320'
}
],
formVisible: false,
title: '', // 弹框标题(新增/编辑)
dataForm: {
id: '',
type: '',
name: '',
icon: '',
code: '',
remark: '',
iconColor: '#007aff',
components: '',
style: '',
formType: '',
formConfig: '',
pageTemplateId: ''
},
dataFormRules: {
name: [
{ required: true, message: '名称不能为空', trigger: 'blur' },
// 名称重复自定义校验
{
validator: (rule, value, callback) => {
if (value) {
this.$dataRoomAxios.post('/bigScreen/design/name/repeat', {
name: value,
type: this.type,
id: this.dataForm.id
}).then((resp) => {
if (resp) {
callback(new Error('名称已存在'))
} else {
callback()
}
})
} else {
callback()
}
},
trigger: 'change'
}
]
},
sureLoading: false,
toDesignLoading: false,
sureDisabled: false,
toDesignDisabled: false
}
},
computed: {
},
watch: {
resolutionRatioValue (val) {
if (val) {
this.resolutionRatio.w = val.split('*')[0]
this.resolutionRatio.h = val.split('*')[1]
} else {
this.resolutionRatio.w = this.type === 'component' ? 1024 : 1920
this.resolutionRatio.h = this.type === 'component' ? 768 : 1080
}
}
},
mounted () {
this.initResolution()
},
methods: {
initResolution () {
this.resolutionRatioValue = this.type === 'component' ? '1024*768' : '1920*1080'
if (this.type === 'component') {
this.resolutionRatio = {
w: 1024,
h: 768
}
} else {
this.resolutionRatio = {
w: 1920,
h: 1080
}
}
},
// 关闭弹窗时
closeAddDialog () {
this.formVisible = false
this.$refs.dataForm.resetFields()
},
// 初始化
init (nodeData, parentNode) {
this.title = ''
const code = nodeData ? nodeData.code : ''
this.formVisible = true
this.$nextTick(() => {
this.$dataRoomAxios.get('/bigScreen/type/list/bigScreenCatalog').then((resp) => {
this.catalogList = resp
})
if (code) {
this.$dataRoomAxios.get(`/bigScreen/design/info/code/${code}`).then((resp) => {
this.$set(this, 'title', resp.name)
this.$set(this.dataForm, 'name', resp.name)
this.$set(this.dataForm, 'chartList', resp.chartList)
this.$set(this.dataForm, 'code', resp.code)
this.$set(this.dataForm, 'icon', resp.icon)
this.$set(this.dataForm, 'iconColor', resp.iconColor)
this.$set(this.dataForm, 'id', resp.id)
this.$set(this.dataForm, 'parentCode', resp.parentCode === '0' ? '' : resp.parentCode)
this.$set(this.dataForm, 'remark', resp.remark)
this.$set(this.dataForm, 'style', resp.style)
this.$set(this.dataForm, 'type', resp.type)
this.$set(this.dataForm, 'orderNum', nodeData.orderNum)
this.$set(this.dataForm, 'pageTemplateId', resp?.pageTemplateId)
this.$set(this.dataForm, 'pageConfig', resp?.pageConfig)
const { w, h } = resp.pageConfig
this.resolutionRatio.w = w
this.resolutionRatio.h = h
this.resolutionRatioValue = `${w}*${h}`
})
} else {
this.$set(this.dataForm, 'name', '')
this.$set(this.dataForm, 'chartList', [])
this.$set(this.dataForm, 'code', '')
this.$set(this.dataForm, 'icon', Icon.getNameList()[0])
this.$set(this.dataForm, 'iconColor', '#007aff')
this.$set(this.dataForm, 'id', '')
this.$set(this.dataForm, 'parentCode', parentNode.code)
this.$set(this.dataForm, 'remark', '')
this.$set(this.dataForm, 'style', '')
this.$set(this.dataForm, 'type', this.type)
this.$set(this.dataForm, 'orderNum', 0)
this.$set(this.dataForm, 'pageTemplateId', '')
this.$set(this.dataForm, 'pageConfig', {
w: this.type === 'component' ? 1024 : 1920,
h: this.type === 'component' ? 768 : 1080,
bgColor: '#151a26',
lightBgColor: '#f5f7fa',
opacity: 100,
customTheme: 'dark',
bg: null,
lightBg: null,
fitMode: 'auto'
})
this.resolutionRatio.w = this.type === 'component' ? 1024 : 1920
this.resolutionRatio.h = this.type === 'component' ? 768 : 1080
}
})
},
// 点击确定时
addOrUpdate (isToDesign = false) {
this.addOrUpdateBigScreen(isToDesign)
},
// 大屏 新增/编辑
async addOrUpdateBigScreen (isToDesign) {
this.$refs.dataForm.validate(async (valid) => {
if (!valid) {
return
}
const addOrUpdateHandel = !this.dataForm.code
? (form) => this.$dataRoomAxios.post('/bigScreen/design/add', form)
: (form) => this.$dataRoomAxios.post('/bigScreen/design/update', form)
const form = {
className: 'com.gccloud.dataroom.core.module.manage.dto.DataRoomPageDTO',
chartList: this.dataForm.chartList,
code: this.dataForm.code,
icon: this.dataForm.icon,
iconColor: this.dataForm.iconColor,
id: this.dataForm.id,
name: this.dataForm.name,
parentCode: this.dataForm.parentCode,
remark: this.dataForm.remark,
style: this.dataForm.style,
orderNum: this.dataForm.orderNum,
pageConfig: { ...this.dataForm.pageConfig, w: this.resolutionRatio.w, h: this.resolutionRatio.h },
pageTemplateId: this.dataForm.pageTemplateId,
type: this.type || 'bigScreen'
}
if (isToDesign) {
this.toDesignLoading = true
this.sureDisabled = true
} else {
this.sureLoading = true
this.toDesignDisabled = true
}
addOrUpdateHandel(form)
.then((code) => {
this.formVisible = false
const message = this.dataForm.code ? '更新成功' : '新增成功'
this.$message.success(message)
this.$emit('refreshData', form, this.dataForm.id)
if (isToDesign) {
this.toDesignLoading = false
this.sureDisabled = false
form.code = code || this.dataForm.code
this.toDesign({ ...form })
} else {
this.sureLoading = false
this.toDesignDisabled = false
}
})
.catch(() => {
this.sureLoading = false
this.toDesignLoading = false
this.sureDisabled = false
this.toDesignDisabled = false
})
})
},
// 跳转设计态
toDesign (form) {
// const { href: bigScreenHref } = this.$router.resolve({
// path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
// query: {
// code: form.code
// }
// })
// window.open(bigScreenHref, '_self')
this.$router.push({
path: window.BS_CONFIG?.routers?.designUrl || '/big-screen/design',
query: {
code: form.code
}
})
},
/**
* 复制大屏编码
*/
copyCode () {
try {
let code = this.dataForm.code
const transfer = document.createElement('input')
document.body.appendChild(transfer)
transfer.value = code
transfer.focus()
transfer.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
transfer.blur()
transfer.style.display = 'none'
this.$message.success('复制成功')
} catch (e) {
this.$message.error('复制失败, 请手动复制')
}
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.el-scrollbar {
height: 300px;
overflow-x: hidden;
::v-deep .el-scrollbar__view {
overflow-x: hidden;
}
}
.color-picker {
display: flex;
align-items: center;
}
.icon-svg {
width: 25px;
height: 25px;
}
.color-select {
width: 350px;
display: flex;
margin-top: 5px;
align-items: center;
justify-content: space-between;
div {
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
}
::v-deep .el-color-picker__trigger {
top: 0;
right: 0;
width: 21px;
height: 21px;
padding: 0;
}
.el-icon-check {
font-size: 20px;
color: #ffffff;
position: absolute;
}
}
.icon-list {
margin-top: 15px;
padding: 5px;
border-radius: 5px;
border: 1px solid #e8e8e8;
.el-button--mini {
min-width: 37px;
padding: 5px !important;
border: 1px solid transparent !important;
&:hover {
background-color: rgba(217, 217, 217, 0.3);
}
}
}
.icon-uploader {
width: 60px;
height: 60px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.icon-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}
.icon {
width: 60px;
height: 60px;
display: block;
}
.default-layout-box {
display: flex;
flex-wrap: wrap;
.default-layout-item {
cursor: pointer;
margin: 9px;
display: flex;
flex-direction: column;
align-items: center;
.component-name {
font-size: 12px;
}
.sampleImg {
margin: 0 auto;
width: 102px;
height: 73px;
display: block;
}
.img_dispaly {
margin: 0 auto;
text-align: center;
width: 100px;
height: 70px;
line-height: 70px;
background-color: #D7D7D7;
color: #999;
}
.demonstration {
text-align: center;
}
}
.default-layout-item:hover {
cursor: pointer;
}
::v-deep .el-radio__label {
display: none;
}
}
/*滚动条样式*/
::v-deep ::-webkit-scrollbar {
width: 6px;
border-radius: 4px;
height: 4px;
}
::v-deep ::-webkit-scrollbar-thumb {
background: #dddddd !important;
border-radius: 10px;
}
.catalog-cascader {
width: 100% !important;
}
</style>

BIN
frontend/packages/BigScreenList/images/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 436 KiB

BIN
frontend/packages/BigScreenList/images/defaultImg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 265 KiB

501
frontend/packages/BigScreenList/index.vue Normal file
View File

@@ -0,0 +1,501 @@
<template>
<div class="big-screen-list-wrap">
<div class="internal-box">
<div class="top-search-wrap">
<el-input v-model="searchKey" class="bs-el-input bs-el-input-search"
:placeholder="type === 'bigScreenCatalog' ? '请输入大屏名称' : '请输入组件名称'" prefix-icon="el-icon-search" clearable
@clear="reSearch" @keyup.enter.native="reSearch" />
<el-button type="primary" @click="reSearch">
搜索
</el-button>
</div>
<div v-loading="loading" class="list-wrap bs-scrollbar" element-loading-text="加载中" :style="{
display: gridComputed ? 'grid' : 'flex',
justifyContent: gridComputed ? 'space-around' : 'flex-start'
}">
<!-- 第一个是新增大屏卡片 -->
<div class="big-screen-card-wrap" :style="{
width: gridComputed ? 'auto' : '290px'
}" @click="add">
<div class="big-screen-card-inner big-screen-card-inner-add">
<div class="add-big-screen-card">
<div class="add-big-screen-card-inner">
<div class="add-big-screen-card-text">
新增{{ type === 'bigScreenCatalog' ? '大屏' : '组件' }}
</div>
</div>
</div>
</div>
</div>
<!-- 后面遍历 list -->
<div v-for="screen in list" :key="screen.id" class="big-screen-card-wrap" :style="{
width: gridComputed ? 'auto' : '290px'
}">
<div class="big-screen-card-inner">
<div class="screen-card__hover">
<div class="screen-card__hover-box">
<div class="preview">
<div class="screen-card__oper-label circle" @click="preview(screen)">
<span>访问</span>
</div>
<div class="circle" @click="design(screen)">
<span>设计</span>
</div>
<div class="circle" @click="edit(screen)">
<span>编辑</span>
</div>
<div class="circle" @click="copy(screen)">
<span>复制</span>
</div>
<div class="circle" @click="del(screen)">
<span>删除</span>
</div>
</div>
</div>
</div>
<div class="big-screen-card-img">
<el-image :src="getCoverPicture(screen.coverPicture) || require('./images/default.png')" fit="fill" style="width: 100%; height: 100%">
<div slot="placeholder" class="image-slot">
加载中···
</div>
<div slot="error" class="image-slot" style="font-size: 20px">
<div class="error-img-text">
{{ screen.name }}
</div>
</div>
</el-image>
</div>
<div class="big-screen-bottom">
<div class="left-bigscreen-title" :title="screen.name">
{{ screen.name }}
</div>
</div>
</div>
</div>
</div>
<div class="footer-pagination-wrap">
<div class="bs-pagination">
<el-pagination class="bs-el-pagination" popper-class="bs-el-pagination" background
layout="total, prev, pager, next, sizes" :page-size="size" prev-text="上一页" next-text="下一页"
:total="totalCount" :page-sizes="[10, 20, 50, 100]" :current-page="current"
@current-change="currentChangeHandle" @size-change="sizeChangeHandle" />
</div>
</div>
</div>
<!-- 新增或编辑弹窗 -->
<EditForm ref="EditForm" :type="pageType" @refreshData="reSearch" />
</div>
</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',
mixins: [pageMixins],
props: {
type: {
type: String,
default: 'bigScreenCatalog'
},
catalogInfo: {
type: Object,
default: () => { }
}
},
components: { EditForm },
data() {
return {
templateLoading: false,
searchKey: '',
list: [],
loading: false
}
},
computed: {
hint() {
return this.pageType === 'bigScreen' ? '大屏' : '组件'
},
code() {
return this.catalogInfo?.page?.code
},
gridComputed() {
return this.list.length > 2
},
pageType() {
return this.type === 'bigScreenCatalog' ? 'bigScreen' : 'component'
}
},
watch: {
code(value) {
this.current = 1
this.getDataList()
}
},
mounted() {
this.getDataList()
},
methods: {
getDataList() {
this.loading = true
this.$dataRoomAxios.get('/bigScreen/design/page', {
parentCode: this.code || null,
current: this.current,
size: this.size,
searchKey: this.searchKey,
type: this.pageType
})
.then((data) => {
this.list = data.list
this.totalCount = data.totalCount
})
.finally(() => {
this.loading = false
})
},
preview(screen) {
const { href } = this.$router.resolve({
path: window.BS_CONFIG?.routers?.previewUrl || '/big-screen/preview', // 这里写的是要跳转的路由地址
query: {
code: screen.code
}
})
window.open(href, '_blank')
},
design(screen) {
const path = window.BS_CONFIG?.routers?.designUrl || '/big-screen/design'
// const { href } = this.$router.resolve({
// path,
// query: {
// code: screen.code
// }
// })
// window.open(href, '_self')
this.$router.push({
path,
query: {
code: screen.code
}
})
},
add() {
const page = {
code: '',
type: 'bigScreen'
}
this.$refs.EditForm.init(page, this.catalogInfo.page)
console.log('this.catalogInfo.page: ', this.catalogInfo.page);
},
edit(screen) {
this.$refs.EditForm.init(screen, this.catalogInfo.page)
},
del(screen) {
this.$confirm(`确定删除该${this.hint}？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'bs-el-message-box'
})
.then(async () => {
this.$dataRoomAxios.post(`/bigScreen/design/delete/${screen.code}`)
.then(() => {
this.$message({
type: 'success',
message: '删除成功'
})
this.getDataList()
})
.catch(() => {
this.$message({
type: 'error',
message: '删除失败!'
})
})
})
.catch()
},
copy(screen) {
this.$confirm(`确定复制该${this.hint}？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
customClass: 'bs-el-message-box'
})
.then(async () => {
this.$dataRoomAxios.post(`/bigScreen/design/copy/${screen.code}`)
.then(() => {
this.$message({
type: 'success',
message: '复制成功'
})
this.getDataList()
})
.catch(() => {
this.$message({
type: 'error',
message: '复制失败!'
})
})
})
.catch((e) => {
console.error(e)
})
},
/**
* 获取封面图片,如果是相对路径则拼接上文件访问前缀地址
* @param url
* @returns {*}
*/
getCoverPicture(url) {
return getFileUrl(url)
}
}
}
</script>
<style lang="scss" scoped>
@import '../assets/style/bsTheme.scss';
.big-screen-list-wrap {
.el-select {
display: inline-block !important;
position: relative !important;
width: auto !important;
}
position: relative;
height: 100%;
// margin:0 16px;
margin-left: 16px;
// padding: 16px;
color: #9ea9b2;
background-color: var(--bs-background-2) !important;
.internal-box {
height: calc(100% - 32px);
padding: 16px;
}
.top-search-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 16px;
.el-input {
width: 200px;
margin-right: 20px;
::v-deep .el-input__inner {
background-color: var(--bs-background-1) !important;
}
}
}
.list-wrap {
/* display: grid; */
overflow: auto;
padding-right: 5px;
// 间隙自适应
justify-content: space-around;
// max-height: calc(100vh - 304px);
max-height: calc(100% - 90px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 15px;
padding-bottom: 10px;
// ::v-deep .el-loading-mask {
// display: flex;
// align-items: center;
// justify-content: center;
// height: calc(100vh - 260px) !important;
// z-index: 999;
// top: 50px;
// }
.big-screen-card-wrap {
position: relative;
height: 180px;
cursor: pointer;
&:hover {
.screen-card__hover {
height: 180px;
}
}
.screen-card__hover {
position: absolute;
z-index: 999;
top: 0;
right: 0;
left: 0;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
height: 0;
transition: height 0.4s;
background: #00000099;
.screen-card__hover-box {
position: absolute;
width: 100%;
height: 100%;
background: #00000080;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
}
.preview {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
cursor: pointer;
color: var(--bs-el-color-primary);
.circle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--bs-el-color-primary);
border-radius: 50%;
&:hover {
color: #fff;
background: var(--bs-el-color-primary);
}
span {
font-size: 12px;
}
}
}
}
.big-screen-card-inner {
overflow: hidden;
width: 100%;
height: 100%;
cursor: pointer;
background-color: var(--bs-background-2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
color: var(--bs-el-title);
border: 1px solid var(--bs-background-1);
&:hover {
color: var(--bs-el-text);
border: 1px solid var(--bs-el-color-primary);
}
.add-big-screen-card-text {
color: var(--bs-el-color-primary);
font-size: 24px;
}
.big-screen-card-img {
width: 100%;
height: 150px;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
::v-deep .image-slot {
height: 100%;
background-color: var(--bs-background-2);
display: flex;
align-items: center;
justify-content: center;
}
::v-deep .el-image__error {
background-color: #1d1d1d;
}
}
.big-screen-bottom {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
/*height: 26px;*/
padding: 0 10px;
height: calc(100% - 150px);
color: var(--bs-el-title);
background-color: var(--bs-background-2);
.left-bigscreen-title {
font-size: 14px;
overflow: hidden;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.right-bigscreen-time-title {
font-size: 14px;
overflow: hidden;
width: 140px;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.big-screen-card-text {
font-size: 14px;
padding: 10px;
text-align: center;
color: #333;
}
}
.big-screen-card-inner-add {
display: flex;
align-items: center;
justify-content: center;
}
}
.error-img-text {
overflow: hidden;
padding: 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
}
.el-loading-parent--relative {
position: unset !important;
}
.footer-pagination-wrap {
width: 100%;
position: absolute;
bottom: 16px;
right: 16px;
}
}
.bs-pagination {
::v-deep .el-input__inner {
width: 110px !important;
border: none;
background: var(--bs-el-background-1);
}
}
</style>