11 changed files with 1374 additions and 223 deletions
-
20src/api/digitalScreen/index.js
-
BINsrc/assets/images/screen/book.jpg
-
BINsrc/assets/images/screen/book.png
-
82src/assets/styles/digitalScreen.scss
-
455src/views/digitalScreen/index.vue
-
313src/views/digitalScreen/module/advSetting.vue
-
45src/views/digitalScreen/module/areaSetting.vue
-
176src/views/digitalScreen/module/bookRecommend.vue
-
342src/views/digitalScreen/module/mediaSetting.vue
-
160src/views/digitalScreen/module/previewSetting.vue
-
4src/views/system/group/index.vue
@ -0,0 +1,20 @@ |
|||||
|
import request from '@/utils/request' |
||||
|
import qs from 'qs' |
||||
|
|
||||
|
export function FetchInitScreenSetting(params) { |
||||
|
return request({ |
||||
|
url: 'api/screenSetting/initScreenSetting' + '?' + qs.stringify(params, { indices: false }), |
||||
|
method: 'get' |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
// 编辑智慧大屏后台参数
|
||||
|
export function FetchEditScreenSetting(parameter) { |
||||
|
return request({ |
||||
|
url: 'api/screenSetting/editScreenSetting', |
||||
|
method: 'post', |
||||
|
data: parameter |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default { FetchInitScreenSetting, FetchEditScreenSetting } |
||||
|
After Width: 180 | Height: 180 | Size: 21 KiB |
|
After Width: 1080 | Height: 1920 | Size: 412 KiB |
@ -0,0 +1,313 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">播放设置</span> |
||||
|
<el-form ref="advForm" class="advForm" :model="advForm" size="small" label-width="100px"> |
||||
|
<el-form-item label="图片切换时长" prop="time"> |
||||
|
<div v-if="!editStatus.advForm.time" style="display: flex; justify-content: flex-start; width: 340px; height: 32px; align-items: flex-start;"> |
||||
|
<span class="edit-readonly" @dblclick="handleDblClick('advForm', 'time')"> {{ advForm.time || '' }} </span> |
||||
|
<span class="edit-slot">秒</span> |
||||
|
</div> |
||||
|
<el-input v-else ref="advFormtime" v-model="advForm.time" @blur="handleBlur('advForm', 'time')" @keyup.enter="handleBlur('advForm', 'time')"><template slot="append">秒</template></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
<div class="config-remarks">双击输入框可进行编辑，如有多张图片循环播放，则默认单张图片播放时长为5秒。</div> |
||||
|
</div> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">宣传图片</span> |
||||
|
<div class="upload-item"> |
||||
|
<p>图片列表</p> |
||||
|
<div class="book-swiper-wrapper"> |
||||
|
<swiper |
||||
|
ref="adImgSwiper" |
||||
|
:options="swiperOptions" |
||||
|
class="book-swiper" |
||||
|
> |
||||
|
<swiper-slide |
||||
|
v-for="(book, index) in advImgList" |
||||
|
:key="book.id" |
||||
|
class="book-list-item" |
||||
|
> |
||||
|
<img :src="book.url || require('@/assets/images/cover-bg.png')" alt="图书封面"> |
||||
|
<span style="position: absolute; top: 0; left: 0;">{{ book.id }}</span> |
||||
|
<div class="book-select" @click.stop="toggleBookSelect(index)"> |
||||
|
<i v-if="book.selected" class="iconfont icon-wancheng" /> |
||||
|
<i v-else class="iconfont icon-weixuan" /> |
||||
|
</div> |
||||
|
<div class="book-delete" @click.stop="deleteBook(index)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style="margin-left: 20px;"> |
||||
|
<div class="upload-btn"> |
||||
|
<input id="upFile" type="file" name="upFile" @change="changeFile($event)"> |
||||
|
<el-button size="mini" type="primary"><i class="iconfont icon-shangchuan" />图片上传</el-button> |
||||
|
</div> |
||||
|
<el-button size="mini" :disabled="!hasSelectedItems" style="margin-top: 10px;" @click="batchDelete"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
批量删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
import 'swiper/dist/css/swiper.css' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { getCurrentTime } from '@/utils/index' |
||||
|
// import { upload } from '@/utils/upload' |
||||
|
|
||||
|
export default { |
||||
|
name: 'AdvSetting', |
||||
|
components: { |
||||
|
swiper, |
||||
|
swiperSlide |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
advForm: { |
||||
|
time: null |
||||
|
}, |
||||
|
editStatus: { |
||||
|
advForm: { |
||||
|
time: false |
||||
|
} |
||||
|
}, |
||||
|
originalValues: { |
||||
|
advForm: {} |
||||
|
}, |
||||
|
advImgList: [ |
||||
|
{ id: 1, url: require('@/assets/images/screen/screen4.png'), selected: false }, |
||||
|
{ id: 2, url: require('@/assets/images/screen/screen4.png'), selected: true }, |
||||
|
{ id: 3, url: require('@/assets/images/screen/screen4.png'), selected: false }, |
||||
|
{ id: 4, url: require('@/assets/images/screen/screen4.png'), selected: false }, |
||||
|
{ id: 5, url: require('@/assets/images/screen/screen4.png'), selected: false } |
||||
|
], |
||||
|
swiperOptions: { |
||||
|
slidesPerView: 'auto', // 自动适应数量 |
||||
|
freeMode: true, // 自由滑动模式 |
||||
|
grabCursor: true, // 抓手光标 |
||||
|
on: { |
||||
|
resize: function() { |
||||
|
this.update() |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
file: null, // 附件 change |
||||
|
fileNames: '', // 附件 - name |
||||
|
formatType: '', // 附件 - type |
||||
|
postfix: '', // 附件 - 文件后缀 |
||||
|
fileSize: '', // 附件 - 大小 |
||||
|
filePath: '', // 附件 - path |
||||
|
px: '', // 附件 - 分辨率 |
||||
|
nowDate: '', // 当前时间 |
||||
|
fileJsonString: null, |
||||
|
imageUrl: null |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]), |
||||
|
hasSelectedItems() { |
||||
|
return this.advImgList.some(book => book.selected) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
updateSwiper() { |
||||
|
if (this.$refs.adImgSwiper && this.$refs.adImgSwiper.swiper) { |
||||
|
const swiper = this.$refs.adImgSwiper.swiper |
||||
|
swiper.update() |
||||
|
swiper.slideReset() |
||||
|
} |
||||
|
}, |
||||
|
handleDblClick(formName, field) { |
||||
|
this.originalValues[formName][field] = this[formName][field] |
||||
|
this.editStatus[formName][field] = true |
||||
|
this.$nextTick(() => { |
||||
|
const input = this.$refs[`${formName}${field}`] |
||||
|
if (input) input.focus() |
||||
|
}) |
||||
|
}, |
||||
|
handleBlur(formName, field) { |
||||
|
this.editStatus[formName][field] = false |
||||
|
if (this[formName][field] !== this.originalValues[formName][field]) { |
||||
|
this.saveEdit(formName, field) |
||||
|
} |
||||
|
}, |
||||
|
saveEdit(formName, field) { |
||||
|
const value = this[formName][field] |
||||
|
console.log(`保存${formName}.${field}：`, value) |
||||
|
if (!value) { |
||||
|
this.$message.warning(`${this.getFieldLabel(formName, field)}不能为空`) |
||||
|
this[formName][field] = this.originalValues[formName][field] |
||||
|
return |
||||
|
} |
||||
|
this.$message.success(`${this.getFieldLabel(formName, field)}更新成功`) |
||||
|
}, |
||||
|
toggleBookSelect(index) { |
||||
|
this.advImgList[index].selected = !this.advImgList[index].selected |
||||
|
}, |
||||
|
deleteBook(index) { |
||||
|
this.$confirm('确定要删除这本图书吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.advImgList.splice(index, 1) |
||||
|
this.$nextTick(() => { |
||||
|
this.updateSwiper() |
||||
|
}) |
||||
|
this.$message.success('删除成功！') |
||||
|
}).catch(() => { |
||||
|
// 取消删除不做处理 |
||||
|
}) |
||||
|
}, |
||||
|
batchDelete() { |
||||
|
const selectedCount = this.advImgList.filter(book => book.selected).length |
||||
|
if (selectedCount === 0) return |
||||
|
|
||||
|
this.$confirm(`确定要删除选中的 ${selectedCount} 本图书吗？`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.advImgList = this.advImgList.filter(book => !book.selected) |
||||
|
this.$nextTick(() => { |
||||
|
this.updateSwiper() |
||||
|
}) |
||||
|
this.$message.success(`已成功删除 ${selectedCount} 本图书`) |
||||
|
}) |
||||
|
}, |
||||
|
// 选择附件 |
||||
|
async changeFile(e) { |
||||
|
const file = e.target.files[0] |
||||
|
|
||||
|
if (file && file.type.startsWith('image/')) { |
||||
|
this.file = e.target.files[0] |
||||
|
this.fileSize = this.file.size |
||||
|
// this.formatType = this.file.type.substring(0, this.file.type.indexOf('/')) |
||||
|
this.fileNames = this.file.name |
||||
|
|
||||
|
const fileBase64 = await this.getBase64(this.file) |
||||
|
const res = await this.getImgPx(fileBase64) |
||||
|
this.imageUrl = fileBase64 |
||||
|
this.px = res.width + 'px*' + res.height + 'px' |
||||
|
// if (this.uploadType === 'book') { |
||||
|
// // 上传附件 |
||||
|
// upload(this.baseApi + '/api/fileRelevant/uploadBookImg', this.file).then(res => { |
||||
|
// console.log(res) |
||||
|
// if (res.data.code === 200) { |
||||
|
// this.filePath = res.data.data |
||||
|
// this.$emit('childCover', res.data.data) |
||||
|
// // this.uploadSave() |
||||
|
// } |
||||
|
// }) |
||||
|
// } else { |
||||
|
// // 上传附件 |
||||
|
// upload(this.baseApi + '/api/fileRelevant/uploadOtherImg', this.file).then(res => { |
||||
|
// console.log(res) |
||||
|
// if (res.data.code === 200) { |
||||
|
// this.filePath = res.data.data |
||||
|
// this.$emit('childCover', res.data.data) |
||||
|
// // this.uploadSave() |
||||
|
// } |
||||
|
// }) |
||||
|
// } |
||||
|
} else { |
||||
|
this.$message({ message: '只可上传图片', type: 'error', offset: 8 }) |
||||
|
this.imageUrl = null |
||||
|
} |
||||
|
}, |
||||
|
// 上传附件 - 选择上传即保存 |
||||
|
uploadSave() { |
||||
|
this.nowDate = getCurrentTime() |
||||
|
const json = { |
||||
|
'file_name': this.fileNames, |
||||
|
'file_size': this.fileSize, |
||||
|
'file_type': this.postfix, |
||||
|
'file_path': this.filePath, |
||||
|
'sequence': null, |
||||
|
'file_dpi': this.px, |
||||
|
'file_thumbnail': '', |
||||
|
'create_time': this.nowDate, |
||||
|
'id': null, |
||||
|
'is_quote': null, |
||||
|
'last_modified': this.file.lastModified |
||||
|
} |
||||
|
const arrayUpload = [] |
||||
|
arrayUpload.push(json) |
||||
|
// this.$emit('childCover', this.fileNames) |
||||
|
|
||||
|
this.fileJsonString = JSON.stringify(arrayUpload) |
||||
|
console.log(this.fileJsonString) |
||||
|
}, |
||||
|
// 将上传的图片转为base64 |
||||
|
getBase64(file) { |
||||
|
const reader = new FileReader() |
||||
|
reader.readAsDataURL(file) |
||||
|
return new Promise((resolve) => { |
||||
|
reader.onload = () => { |
||||
|
resolve(reader.result) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
// 获取图片的分辨率 |
||||
|
getImgPx(img) { |
||||
|
const image = new Image() |
||||
|
image.src = img |
||||
|
return new Promise((resolve) => { |
||||
|
image.onload = () => { |
||||
|
const width = image.width |
||||
|
const height = image.height |
||||
|
resolve({ width, height }) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/digitalScreen.scss"; |
||||
|
.edit-readonly{ |
||||
|
width: 289px !important; |
||||
|
border-right: none !important; |
||||
|
margin-right: 0 !important; |
||||
|
border-radius: 4px 0 0 4px !important; |
||||
|
} |
||||
|
.edit-slot { |
||||
|
background-color: #f5f7fa; |
||||
|
color: #909399; |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
border: 1px solid #dcdfe6; |
||||
|
border-radius: 0 4px 4px 0; |
||||
|
padding: 0 20px; |
||||
|
white-space: nowrap; |
||||
|
height: 32px; |
||||
|
} |
||||
|
.book-swiper-wrapper { |
||||
|
max-width: 1000px !important; |
||||
|
} |
||||
|
|
||||
|
.book-list-item{ |
||||
|
width: 480px !important; |
||||
|
height: 270px !important; |
||||
|
margin: 0 10px !important; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,176 @@ |
|||||
|
<template> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">图书推荐</span> |
||||
|
<div class="upload-item"> |
||||
|
<p>推荐列表</p> |
||||
|
<div class="book-swiper-wrapper"> |
||||
|
<swiper |
||||
|
ref="bookSwiper" |
||||
|
:options="swiperOptions" |
||||
|
class="book-swiper" |
||||
|
> |
||||
|
<swiper-slide |
||||
|
v-for="(book, index) in bookList" |
||||
|
:key="book.id" |
||||
|
class="book-list-item" |
||||
|
> |
||||
|
<img :src="book.url || require('@/assets/images/screen/book.jpg')" alt="图书封面"> |
||||
|
<span style="position: absolute; top: 0; left: 0;">{{ book.id }}</span> |
||||
|
<div class="book-select" @click.stop="toggleBookSelect(index)"> |
||||
|
<i v-if="book.selected" class="iconfont icon-wancheng" /> |
||||
|
<i v-else class="iconfont icon-weixuan" /> |
||||
|
</div> |
||||
|
<div class="book-delete" @click.stop="deleteBook(index)"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
</div> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
</div> |
||||
|
<!-- <div class="book-upload-btn" @click.stop="uploadBook"><i class="iconfont icon-shangchuan2" /></div> --> |
||||
|
</div> |
||||
|
<div style="display: flex; flex-direction: column; justify-content: flex-start; margin-left: 15px;"> |
||||
|
<el-button size="mini" type="primary" @click.stop="uploadBook"><i class="iconfont icon-shangchuan" />图书上传</el-button> |
||||
|
<el-button size="mini" style="margin-left: 0 !important; margin-top: 10px;" :disabled="!hasSelectedItems" @click="batchDelete"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
批量删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
<addBookDialog ref="addBookRef" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { swiper, swiperSlide } from 'vue-awesome-swiper' |
||||
|
import 'swiper/dist/css/swiper.css' |
||||
|
import addBookDialog from './addBookDialog' |
||||
|
import { mapGetters } from 'vuex' |
||||
|
// import { getCurrentTime } from '@/utils/index' |
||||
|
// import { upload } from '@/utils/upload' |
||||
|
|
||||
|
export default { |
||||
|
name: 'BookRecommend', |
||||
|
components: { |
||||
|
swiper, |
||||
|
swiperSlide, |
||||
|
addBookDialog |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
bookList: [ |
||||
|
{ id: 1, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 2, url: require('@/assets/images/screen/book.jpg'), selected: true }, |
||||
|
{ id: 3, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 4, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 5, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 6, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 7, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 8, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 9, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 10, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 11, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 12, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 13, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 14, url: require('@/assets/images/screen/book.jpg'), selected: false }, |
||||
|
{ id: 15, url: require('@/assets/images/screen/book.jpg'), selected: false } |
||||
|
], |
||||
|
swiperOptions: { |
||||
|
slidesPerView: 'auto', // 保持自动适应数量 |
||||
|
freeMode: true, // 自由滑动模式 |
||||
|
// 关键：添加间距配置（匹配 slide 的左右 margin 总和 5+5=10px） |
||||
|
spaceBetween: 10, |
||||
|
// 优化自由滑动动量，确保能滑到最末端 |
||||
|
freeModeMomentum: true, // 启用动量滑动 |
||||
|
freeModeMomentumRatio: 0.6, // 动量衰减比例（值越大滑动越远） |
||||
|
freeModeMomentumVelocityRatio: 1.2, // 动量速度比例 |
||||
|
freeModeSticky: true, // 滑动结束时自动吸附到最近的项（增强稳定性） |
||||
|
// 关键：在最后一个 slide 后添加 20px 缓冲空间，避免被容器遮挡 |
||||
|
slidesOffsetAfter: 20, |
||||
|
grabCursor: true, |
||||
|
on: { |
||||
|
resize: function() { |
||||
|
this.update() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]), |
||||
|
hasSelectedItems() { |
||||
|
return this.bookList.some(book => book.selected) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
updateBookSwiper() { |
||||
|
if (this.$refs.bookSwiper && this.$refs.bookSwiper.swiper) { |
||||
|
const swiper = this.$refs.bookSwiper.swiper |
||||
|
swiper.update() // 重新计算尺寸和位置 |
||||
|
swiper.slideTo(swiper.activeIndex, 0) // 重置当前位置（避免偏移） |
||||
|
setTimeout(() => { |
||||
|
swiper.update() |
||||
|
}, 0) |
||||
|
} |
||||
|
}, |
||||
|
// 图书推荐 |
||||
|
toggleBookSelect(index) { |
||||
|
this.bookList[index].selected = !this.bookList[index].selected |
||||
|
}, |
||||
|
deleteBook(index) { |
||||
|
this.$confirm('确定要删除这本图书吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
dangerouslyUseHTMLString: true |
||||
|
}).then(() => { |
||||
|
this.bookList.splice(index, 1) |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.bookSwiper.swiper.update() |
||||
|
}) |
||||
|
this.$message.success('删除成功！') |
||||
|
}).catch(() => { |
||||
|
// 取消删除不做处理 |
||||
|
}) |
||||
|
}, |
||||
|
uploadBook() { |
||||
|
this.$refs.addBookRef.addBookDialogVisible = true |
||||
|
|
||||
|
// const newBookId = Date.now() |
||||
|
// this.bookList.unshift({ |
||||
|
// id: newBookId, |
||||
|
// url: require('@/assets/images/screen/book.jpg'), |
||||
|
// selected: false |
||||
|
// }) |
||||
|
// this.$nextTick(() => { |
||||
|
// this.$refs.bookSwiper.swiper.update() |
||||
|
// this.$refs.bookSwiper.swiper.slideTo(0, 300) |
||||
|
// }) |
||||
|
}, |
||||
|
batchDelete() { |
||||
|
const selectedCount = this.bookList.filter(book => book.selected).length |
||||
|
if (selectedCount === 0) return |
||||
|
|
||||
|
this.$confirm(`确定要删除选中的 ${selectedCount} 本图书吗？`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.bookList = this.bookList.filter(book => !book.selected) |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.bookSwiper.swiper.update() |
||||
|
}) |
||||
|
this.$message.success(`已成功删除 ${selectedCount} 本图书`) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/digitalScreen.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,342 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">重要通知</span> |
||||
|
<div class="upload-item" style="align-items: flex-start;"> |
||||
|
<p>通知列表</p> |
||||
|
<el-card class="box-card" style="padding: 20px;"> |
||||
|
<el-table |
||||
|
:data="tableData" |
||||
|
style="width: 100%" |
||||
|
max-height="360" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="name" label="标题" width="200" /> |
||||
|
<el-table-column prop="startTime" label="开始时间" width="200" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" width="200" /> |
||||
|
<el-table-column fixed="right" label="操作" width="100"> |
||||
|
<template> |
||||
|
<!-- slot-scope="scope" --> |
||||
|
<el-button style="padding: 5px 6px !important;"><i class="iconfont icon-bianji" />编辑</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
style="margin: 34px 0 10px 0 !important;" |
||||
|
:current-page="page.page" |
||||
|
:total="page.total" |
||||
|
:page-size="page.size" |
||||
|
:pager-count="5" |
||||
|
layout="total, prev, pager, next, sizes" |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentPage" |
||||
|
/> |
||||
|
</el-card> |
||||
|
<!-- @click="toDelete(crud.selections)" --> |
||||
|
<div style="display: flex; flex-direction: column; justify-content: flex-start; margin-left: 15px;"> |
||||
|
<el-button size="mini" @click="noticeDialogVisible=true"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button size="mini" style="margin-left: 0; margin-top: 14px;"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="config-item"> |
||||
|
<div class="config-item-main"> |
||||
|
<span class="data-title">宣传视频</span> |
||||
|
<div class="upload-item" style="align-items: flex-start;"> |
||||
|
<p>视频列表</p> |
||||
|
<el-card class="box-card" style="padding: 20px;"> |
||||
|
<el-table |
||||
|
:data="videoTableData" |
||||
|
style="width: 100%" |
||||
|
max-height="360" |
||||
|
> |
||||
|
<el-table-column type="selection" align="center" width="55" /> |
||||
|
<el-table-column prop="name" label="标题" width="200" /> |
||||
|
<el-table-column prop="startTime" label="开始时间" width="200" /> |
||||
|
<el-table-column prop="endTime" label="结束时间" width="200" /> |
||||
|
<el-table-column fixed="right" label="操作" width="100"> |
||||
|
<template> |
||||
|
<!-- slot-scope="scope" --> |
||||
|
<el-button style="padding: 5px 6px !important;"><i class="iconfont icon-bianji" />编辑</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
style="margin: 34px 0 10px 0 !important;" |
||||
|
:current-page="videoPage.page" |
||||
|
:total="videoPage.total" |
||||
|
:page-size="videoPage.size" |
||||
|
:pager-count="5" |
||||
|
layout="total, prev, pager, next, sizes" |
||||
|
@size-change="handleVideoSizeChange" |
||||
|
@current-change="handleVideoCurrentPage" |
||||
|
/> |
||||
|
</el-card> |
||||
|
<!-- @click="toDelete(crud.selections)" --> |
||||
|
<div style="display: flex; flex-direction: column; justify-content: flex-start; margin-left: 15px;"> |
||||
|
<el-button size="mini" @click="videoDialogVisible=true"> |
||||
|
<i class="iconfont icon-xinzeng" /> |
||||
|
新增 |
||||
|
</el-button> |
||||
|
<el-button size="mini" style="margin-left: 0; margin-top: 14px;"> |
||||
|
<i class="iconfont icon-shanchu" /> |
||||
|
删除 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-dialog class="auto-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose" :visible.sync="noticeDialogVisible" title="新增通知"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="90px"> |
||||
|
<div> |
||||
|
<el-form-item label="标题" prop="title"> |
||||
|
<el-input v-model="form.title" placeholder="请输入" style="width: 586px;" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item label="开始时间" prop="startTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.startTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
default-time="12:00:00" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="endTime"> |
||||
|
<el-date-picker |
||||
|
v-model="form.endTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
default-time="12:00:00" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<div> |
||||
|
<el-form-item label="通知内容" prop="remarks"> |
||||
|
<el-input v-model="form.remarks" type="textarea" rows="5" placeholder="请输入" style="width: 586px;" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="handleClose">取消</el-button> |
||||
|
<el-button :loading="btnLoading" type="primary" @click="handleComfired('form')">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog class="auto-dialog" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose" :visible.sync="videoDialogVisible" title="新增宣传视频"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="videoForm" :inline="true" :model="videoForm" :rules="rules" size="small" label-width="90px"> |
||||
|
<div> |
||||
|
<el-form-item label="标题" prop="title"> |
||||
|
<el-input v-model="videoForm.title" placeholder="请输入" style="width: 586px;" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<el-form-item label="开始时间" prop="startTime"> |
||||
|
<el-date-picker |
||||
|
v-model="videoForm.startTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
default-time="12:00:00" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="结束时间" prop="endTime"> |
||||
|
<el-date-picker |
||||
|
v-model="videoForm.endTime" |
||||
|
type="datetime" |
||||
|
placeholder="选择日期时间" |
||||
|
default-time="12:00:00" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<div> |
||||
|
<el-form-item class="book-cover-upload" label="宣传视频" prop="fileNames"> |
||||
|
<el-input v-model="videoForm.fileNames" placeholder="请上传" :readonly="true" /> |
||||
|
<div class="upload-btn"> |
||||
|
<!-- @change="changeFile($event)" --> |
||||
|
<input id="upFile" type="file" name="upFile"> |
||||
|
<el-button size="small" type="primary"><i class="iconfont icon-shangchuan" />上传</el-button> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button type="text" @click="handleClose">取消</el-button> |
||||
|
<el-button :loading="btnLoading" type="primary" @click="handleComfired('videoForm')">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
|
||||
|
export default { |
||||
|
name: 'MediaSetting', |
||||
|
components: { }, |
||||
|
data() { |
||||
|
return { |
||||
|
tableData: [ |
||||
|
{ name: 'XXXX通知', startTime: '2025-05-01 10:05:00', endTime: '2025-05-01 10:05:00' }, |
||||
|
{ name: 'XXXX通知', startTime: '2025-05-01 10:05:00', endTime: '2025-05-01 10:05:00' } |
||||
|
], |
||||
|
page: { |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
total: 0 |
||||
|
}, |
||||
|
noticeDialogVisible: false, |
||||
|
form: { |
||||
|
title: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
remarks: '' |
||||
|
}, |
||||
|
videoTableData: [ |
||||
|
{ name: 'XXXX宣传视频', startTime: '2025-05-01 10:05:00', endTime: '2025-05-01 10:05:00' }, |
||||
|
{ name: 'XXXX宣传视频', startTime: '2025-05-01 10:05:00', endTime: '2025-05-01 10:05:00' } |
||||
|
], |
||||
|
videoDialogVisible: false, |
||||
|
videoForm: { |
||||
|
title: '', |
||||
|
startTime: '', |
||||
|
endTime: '', |
||||
|
videoUrl: '' |
||||
|
}, |
||||
|
videoPage: { |
||||
|
page: 1, |
||||
|
size: 10, |
||||
|
total: 0 |
||||
|
}, |
||||
|
rules: { |
||||
|
title: [ |
||||
|
{ required: true, message: '标题不可为空', trigger: 'blur' } |
||||
|
], |
||||
|
startTime: [ |
||||
|
{ required: true, message: '请选择开始时间', trigger: 'change' } |
||||
|
], |
||||
|
endTime: [ |
||||
|
{ required: true, message: '请选择结束时间', trigger: 'change' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClose() { |
||||
|
this.noticeDialogVisible = false |
||||
|
this.videoDialogVisible = false |
||||
|
}, |
||||
|
handleSizeChange(size) { |
||||
|
this.page.size = size |
||||
|
this.page.page = 1 |
||||
|
}, |
||||
|
handleCurrentPage(val) { |
||||
|
this.page.page = val |
||||
|
}, |
||||
|
handleVideoSizeChange(size) { |
||||
|
this.videoPage.size = size |
||||
|
this.videoPage.page = 1 |
||||
|
}, |
||||
|
handleVideoCurrentPage(val) { |
||||
|
this.videoPage.page = val |
||||
|
}, |
||||
|
handleComfired(form) { |
||||
|
this.$refs[form].validate((valid) => { |
||||
|
if (valid) { |
||||
|
this.addBookDialogVisible = false |
||||
|
// const ids = [] |
||||
|
// this.selectBookData.forEach(val => { |
||||
|
// ids.push(val.id) |
||||
|
// }) |
||||
|
// const params = { |
||||
|
// 'gridId': this.selectGridVal.id, |
||||
|
// 'ids': ids |
||||
|
// } |
||||
|
// console.log('params', params) |
||||
|
// FetchManualShelving(params).then(() => { |
||||
|
// this.$message({ message: '批量上架成功', type: 'success', offset: 8 }) |
||||
|
// this.handleCloseDialog() |
||||
|
// }).catch(err => { |
||||
|
// console.log(err) |
||||
|
// this.addBookDialogVisible = false |
||||
|
// }) |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/digitalScreen.scss"; |
||||
|
::v-deep .book-cover-upload { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
.el-form-item__content{ |
||||
|
position: relative; |
||||
|
width: 580px !important; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-left: 0 !important; |
||||
|
.input-style{ |
||||
|
width: 490px; |
||||
|
height: 34px; |
||||
|
line-height: 34px; |
||||
|
padding: 0 20px; |
||||
|
border: 1px solid #e6e8ed; |
||||
|
border-radius: 3px; |
||||
|
&.error-box{ |
||||
|
border-color: #ed4a41; |
||||
|
} |
||||
|
} |
||||
|
.error-tip{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -26px; |
||||
|
font-size: 12px; |
||||
|
color: #ff4949; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.upload-btn{ |
||||
|
position: relative; |
||||
|
width: 62px; |
||||
|
margin-right: 0 !important; |
||||
|
margin-left: 10px; |
||||
|
overflow: initial !important; |
||||
|
#upFile{ |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 84px; |
||||
|
height: 34px; |
||||
|
} |
||||
|
.el-button{ |
||||
|
margin-top: -2px; |
||||
|
font-weight: bold; |
||||
|
border-color: #0348f3; |
||||
|
color: #0348f3; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,160 @@ |
|||||
|
<template> |
||||
|
<div style="position: absolute; right: 0; top: 2px;"> |
||||
|
<el-button size="mini"> |
||||
|
<i class="iconfont icon-sulan" /> |
||||
|
大屏预览 |
||||
|
</el-button> |
||||
|
<el-button :loading="resetLoading" size="mini" style="padding: 7px 6px 7px 10px;" @click="toVerify('reset')"> |
||||
|
<i class="iconfont icon-zishebeiguanli" /> |
||||
|
</el-button> |
||||
|
|
||||
|
<el-dialog class="tip-dialog tip-middle-dialog" title="操作提示" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="verifyDialogVisible" :before-close="handleClose"> |
||||
|
<div class="setting-dialog"> |
||||
|
<div class="tip-content"> |
||||
|
<p class="tipMsg">大屏预览网址设置成功后，即可点击按钮预览大屏（建议全屏观看）！</p> |
||||
|
<p class="delt-tip"><span>注意：此操作需超级管理员输入维护验证码后完成设置，暂不对普通用户开放！</span></p> |
||||
|
</div> |
||||
|
<el-form ref="verfiyForm" :model="verfiyForm" style="margin-top:30px;" @submit.native.prevent> |
||||
|
<el-form-item label="维护验证码" label-width="110px"> |
||||
|
<el-input v-model="verfiyForm.verifyCode" show-password style="width: 480px;" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消 </el-button> |
||||
|
<el-button type="primary" @click.native="handleConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
<el-dialog class="tip-dialog tip-middle-dialog" title="大屏预览网址" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="previewDialog" :before-close="handleClose"> |
||||
|
<div class="setting-dialog"> |
||||
|
<el-form ref="form" :model="form" :rules="rules"> |
||||
|
<el-form-item label="网址" label-width="110px" prop="link"> |
||||
|
<el-input v-model="form.link" style="width: 480px;" /> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="handleClose">取消 </el-button> |
||||
|
<el-button type="primary" @click.native="handleUrlConfirm">确定</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from 'vuex' |
||||
|
import { encrypt } from '@/utils/rsaEncrypt' |
||||
|
import { verifyMaintenance } from '@/api/system/param' |
||||
|
|
||||
|
export default { |
||||
|
name: 'PreviewSetting', |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
verifyDialogVisible: false, |
||||
|
verfiyForm: { |
||||
|
verifyCode: '' |
||||
|
}, |
||||
|
verifyStatus: '', |
||||
|
showVerifyDialog: true, |
||||
|
resetLoading: false, |
||||
|
previewDialog: false, |
||||
|
form: { |
||||
|
link: '' |
||||
|
}, |
||||
|
rules: { |
||||
|
link: [ |
||||
|
{ required: true, message: '网址不可为空', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapGetters([ |
||||
|
'baseApi' |
||||
|
]) |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
methods: { |
||||
|
toVerify(btn) { |
||||
|
this.verifyStatus = btn |
||||
|
this.verifyDialogVisible = true |
||||
|
// if (btn === 'reset') { |
||||
|
// this.verifyDialogVisible = true |
||||
|
// } else { |
||||
|
// if (this.form.ip) { |
||||
|
// if (this.showVerifyDialog) { |
||||
|
// this.verifyDialogVisible = true |
||||
|
// return false |
||||
|
// } |
||||
|
// } else { |
||||
|
// this.$refs.form.validateField(['ip'], err => { |
||||
|
// console.log('err', err) |
||||
|
// if (err) { |
||||
|
// return |
||||
|
// } |
||||
|
// }) |
||||
|
// } |
||||
|
// } |
||||
|
}, |
||||
|
handleConfirm() { |
||||
|
verifyMaintenance(encrypt(this.verfiyForm.verifyCode)).then((res) => { |
||||
|
if (res) { |
||||
|
this.verifyDialogVisible = false |
||||
|
this.verfiyForm.verifyCode = '' |
||||
|
this.showVerifyDialog = false |
||||
|
this.previewDialog = true |
||||
|
// if (this.verifyStatus === 'add') { |
||||
|
// crudStockTask.FetchEditSetting(this.crud.form).then(res => { |
||||
|
// this.$message({ message: '修改成功', type: 'success', offset: 8 }) |
||||
|
// this.initData() |
||||
|
// }).catch(() => { |
||||
|
// }) |
||||
|
// } else { |
||||
|
// this.resetLoading = true |
||||
|
// // 重启服务 |
||||
|
// this.handleConnectAIService() |
||||
|
// } |
||||
|
} else { |
||||
|
this.$message({ message: '验证码错误！', type: 'error', offset: 8 }) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleUrlConfirm() { |
||||
|
this.$refs.form.validate((valid) => { |
||||
|
if (valid) { |
||||
|
console.log('submit!') |
||||
|
this.previewDialog = false |
||||
|
this.form.link = '' |
||||
|
} else { |
||||
|
console.log('error submit!!') |
||||
|
return false |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleClose() { |
||||
|
if (this.$refs.verfiyForm) { |
||||
|
this.verfiyForm.verifyCode = '' |
||||
|
this.$refs.verfiyForm.resetFields() |
||||
|
this.verifyDialogVisible = false |
||||
|
} |
||||
|
if (this.$refs.form) { |
||||
|
this.previewDialog = false |
||||
|
this.form.link = '' |
||||
|
this.$refs.form.resetFields() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
@import "~@/assets/styles/digitalScreen.scss"; |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue