|
|
|
@ -2,13 +2,13 @@ |
|
|
|
<div class="app-container"> |
|
|
|
<el-form ref="form" :model="form" size="small"> |
|
|
|
<el-row class="in_release_item" type="flex" justify="space-between"> |
|
|
|
<el-col :span="3" class="item_title">创建即时发布</el-col> |
|
|
|
<el-col :span="3" class="item_title">创建{{ publishType === 0 ? "即时发布" : "定时发布" }}</el-col> |
|
|
|
<el-col :span="18"> |
|
|
|
<div class="input_wrap"> |
|
|
|
<span class="input_label">名称</span> |
|
|
|
<el-input |
|
|
|
v-model="form.name" |
|
|
|
placeholder="即时发布 2022-1-1" |
|
|
|
:placeholder="changePlaceholder" |
|
|
|
class="input_name" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
@ -36,6 +36,13 @@ |
|
|
|
label-width="100px" |
|
|
|
> |
|
|
|
<el-date-picker |
|
|
|
v-if="publishType === 0" |
|
|
|
v-model="form.date" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
/> |
|
|
|
<el-date-picker |
|
|
|
v-else |
|
|
|
v-model="form.date" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
@ -43,6 +50,39 @@ |
|
|
|
end-placeholder="结束日期" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="publishType === 1" |
|
|
|
label="设置周期" |
|
|
|
prop="timePeriod" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请设置周期：', trigger: 'change' }, |
|
|
|
]" |
|
|
|
:class="['set_weekly',{'no_margin': form.timePeriod === '每周'}]" |
|
|
|
label-width="100px" |
|
|
|
> |
|
|
|
<el-radio-group v-model="form.timePeriod" @change="clearCheckbox()"> |
|
|
|
<el-radio label="每天" value="everyday" /> |
|
|
|
<el-radio label="每周" value="weekly" /> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="form.timePeriod === '每周'" |
|
|
|
:class="{'weekly_margin': form.timePeriod === '每周'}" |
|
|
|
prop="onweek" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-checkbox-group v-model="form.onweek"> |
|
|
|
<el-checkbox label="周一" name="onweek" /> |
|
|
|
<el-checkbox label="周二" name="onweek" /> |
|
|
|
<el-checkbox label="周三" name="onweek" /> |
|
|
|
<el-checkbox label="周四" name="onweek" /> |
|
|
|
<el-checkbox label="周五" name="onweek" /> |
|
|
|
<el-checkbox label="周六" name="onweek" /> |
|
|
|
<el-checkbox label="周日" name="onweek" /> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-form-item> |
|
|
|
<!-- :rules="[ |
|
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' } |
|
|
|
]" --> |
|
|
|
@ -63,7 +103,7 @@ |
|
|
|
<div>内容总时长：0.00s</div> |
|
|
|
</div> |
|
|
|
<div class="step_select_list"> |
|
|
|
<div class="step_upload"></div> |
|
|
|
<div class="step_upload" @click="selectContVisible = true"></div> |
|
|
|
<draggable |
|
|
|
v-model="listData" |
|
|
|
class="drag_list" |
|
|
|
@ -137,6 +177,78 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-form> |
|
|
|
<!-- 选择素材 --> |
|
|
|
<div class="release_layer"> |
|
|
|
<el-dialog |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="selectContVisible" |
|
|
|
width="1000px" |
|
|
|
> |
|
|
|
<div slot="title" class="layer_tab_title"> |
|
|
|
<span :class="{'active': activeIndex === 0}" @click="tabAll(0)">素材库</span> |
|
|
|
<span :class="{'active': activeIndex === 1}" @click="tabAll(1)">主题库</span> |
|
|
|
</div> |
|
|
|
<!-- 素材库 --> |
|
|
|
<div v-if="activeIndex === 0"> |
|
|
|
<ul class="tab_item"> |
|
|
|
<li |
|
|
|
v-for="(item, index) in materialTabItem" |
|
|
|
:key="index" |
|
|
|
:class="{'active': activeItemIndex === index}" |
|
|
|
@click="tab(index)" |
|
|
|
>{{ item.name }}<span>{{ item.num }}</span></li> |
|
|
|
</ul> |
|
|
|
<div class="material_list"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in listData" |
|
|
|
:key="index" |
|
|
|
:class="['material_item', 'item_cont']" |
|
|
|
@click="selectedItem(item.id,item)" |
|
|
|
> |
|
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt /> |
|
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div> |
|
|
|
<div class="item_format"> |
|
|
|
<span class="item_type">{{ item.type }}</span> |
|
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
<div v-if="contentIds.includes(item.id)" class="select_handle"> |
|
|
|
<div class="select_delt" @click.stop="selectDelt(item.id,index)"> |
|
|
|
<svg class="font-icon icon1" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-guanbi2" /> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
<div class="select_edit" @click.stop="selectEdit()"> |
|
|
|
<svg class="font-icon icon1" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-bianji" /> |
|
|
|
</svg> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 主题库 --> |
|
|
|
<div v-if="activeIndex === 1"> |
|
|
|
<ul class="tab_item"> |
|
|
|
<li |
|
|
|
v-for="(item, index) in tabItem" |
|
|
|
:key="index" |
|
|
|
:class="{'active': activeItemIndex === index}" |
|
|
|
@click="tab(index)" |
|
|
|
>{{ item.name }}</li> |
|
|
|
</ul> |
|
|
|
<div class="theme_img"> |
|
|
|
<img |
|
|
|
v-for="(item, index) in 12" |
|
|
|
:key="index" |
|
|
|
src="@/assets/images/home/theme_Img_03.png" |
|
|
|
alt |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<!-- 编辑播放内容 --> |
|
|
|
<div class="upload_layer"> |
|
|
|
<el-dialog |
|
|
|
title="请选择播放内容" |
|
|
|
@ -144,6 +256,9 @@ |
|
|
|
:visible.sync="listEditVisible" |
|
|
|
width="800px" |
|
|
|
> |
|
|
|
<div class="total_time"> |
|
|
|
内容总时长：3m15s |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-for="(item, index) in selectedData" |
|
|
|
:key="index" |
|
|
|
@ -154,6 +269,29 @@ |
|
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div> |
|
|
|
<span class="">{{ index+1 }}</span> |
|
|
|
</div> |
|
|
|
<div class="edit_cont"> |
|
|
|
<div class="edit_cont_base"> |
|
|
|
<p>{{ item.name }}</p> |
|
|
|
<span>{{ item.type }}</span> |
|
|
|
<span>{{ item.size }}</span> |
|
|
|
</div> |
|
|
|
<div v-if="item.type === 'JPG'" class="edit_cont_set"> |
|
|
|
<div class="set_time"> |
|
|
|
<span>展示时长</span> |
|
|
|
<el-input v-model="time" type="text" style="width: 66px" /> |
|
|
|
<em>秒</em> |
|
|
|
</div> |
|
|
|
<div class="set_animation"> |
|
|
|
<span class="set_item">切换动效</span> |
|
|
|
<el-select v-model="animation" style="width:100px"> |
|
|
|
<el-option label="无动画" value="0">无动画</el-option> |
|
|
|
<el-option label="动画1" value="1">动画1</el-option> |
|
|
|
<el-option label="动画2" value="2">动画2</el-option> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div v-else class="edit_cont_other">内容时长：{{ item.time }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="upload_list_right"> |
|
|
|
<div class="save_btn">保存</div> |
|
|
|
@ -191,9 +329,11 @@ import draggable from 'vuedraggable' |
|
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud' |
|
|
|
const defaultForm = { |
|
|
|
name: '', |
|
|
|
date: [], |
|
|
|
date: null, |
|
|
|
isTop: null, |
|
|
|
deviceSelect: '' |
|
|
|
deviceSelect: '', |
|
|
|
timePeriod: null, |
|
|
|
onweek: [] |
|
|
|
} |
|
|
|
export default { |
|
|
|
name: 'ImmediateRelease', |
|
|
|
@ -210,8 +350,14 @@ export default { |
|
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
publishType: 0, |
|
|
|
time: 15, |
|
|
|
animation: null, |
|
|
|
selectDeviceVisible: false, |
|
|
|
listEditVisible: false, |
|
|
|
selectContVisible: false, |
|
|
|
activeIndex: 0, |
|
|
|
activeItemIndex: 0, |
|
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
deviceTags: [], |
|
|
|
listData: [ |
|
|
|
@ -219,40 +365,97 @@ export default { |
|
|
|
id: '1', |
|
|
|
name: '1', |
|
|
|
type: 'JPG', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '2', |
|
|
|
type: 'vedio', |
|
|
|
type: 'VEDIO', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '3', |
|
|
|
type: 'vedio', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
name: '4', |
|
|
|
type: 'vedio', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '5', |
|
|
|
name: '5', |
|
|
|
type: 'audio', |
|
|
|
size: '12kb', |
|
|
|
coverImg: '', |
|
|
|
time: '01:20' |
|
|
|
} |
|
|
|
], |
|
|
|
contentIds: [], |
|
|
|
selectedData: [] |
|
|
|
selectedData: [], |
|
|
|
materialTabItem: [ |
|
|
|
{ |
|
|
|
key: 1, |
|
|
|
name: '全部', |
|
|
|
num: '3' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 2, |
|
|
|
name: '图片', |
|
|
|
num: '1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 3, |
|
|
|
name: '视频', |
|
|
|
num: '1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 4, |
|
|
|
name: '音频', |
|
|
|
num: '1' |
|
|
|
} |
|
|
|
], |
|
|
|
tabItem: [ |
|
|
|
{ |
|
|
|
key: 1, |
|
|
|
name: '为你推荐' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 2, |
|
|
|
name: '人工智能' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 3, |
|
|
|
name: '党建文化' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 4, |
|
|
|
name: '节日节气' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 5, |
|
|
|
name: '艺术鉴赏' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 6, |
|
|
|
name: '名人介绍' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 7, |
|
|
|
name: '摄影' |
|
|
|
}, |
|
|
|
{ |
|
|
|
key: 8, |
|
|
|
name: '书法' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
changePlaceholder() { |
|
|
|
return this.publishType === 0 ? '即时发布 2022-01-01' : '定时发布 2022-01-01' |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
console.log(this.$route.query.tag) |
|
|
|
if (this.$route.query.tag) { |
|
|
|
this.publishType = this.$route.query.tag |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
@ -296,11 +499,23 @@ export default { |
|
|
|
}, |
|
|
|
clearDevice() { |
|
|
|
this.deviceTags = [] |
|
|
|
}, |
|
|
|
tabAll(index) { |
|
|
|
this.activeIndex = index |
|
|
|
this.activeItemIndex = 0 |
|
|
|
}, |
|
|
|
tab(index) { |
|
|
|
this.activeItemIndex = index |
|
|
|
}, |
|
|
|
clearCheckbox() { |
|
|
|
if (this.form.timePeriod === '每天') { |
|
|
|
this.form.onweek = [] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style rel="stylesheet/scss" lang="scss"> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.app-container { |
|
|
|
background: none; |
|
|
|
padding: 0; |
|
|
|
@ -335,7 +550,7 @@ export default { |
|
|
|
} |
|
|
|
.input_name { |
|
|
|
width: 194px; |
|
|
|
.el-input__inner { |
|
|
|
::v-deep .el-input__inner { |
|
|
|
border: none; |
|
|
|
background: #f5f6fa; |
|
|
|
} |
|
|
|
@ -361,6 +576,20 @@ export default { |
|
|
|
line-height: 54px; |
|
|
|
border-bottom: 1px solid #eee; |
|
|
|
} |
|
|
|
.set_weekly { |
|
|
|
::v-deep .el-form-item__label{ |
|
|
|
line-height: 40px; |
|
|
|
} |
|
|
|
} |
|
|
|
.no_margin { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.weekly_margin{ |
|
|
|
margin: 0 0 6px 100px; |
|
|
|
::v-deep .el-form-item__error{ |
|
|
|
top: 70%; |
|
|
|
} |
|
|
|
} |
|
|
|
.step_select{ |
|
|
|
display: flex; |
|
|
|
font-size: 14px; |
|
|
|
@ -420,10 +649,25 @@ export default { |
|
|
|
|
|
|
|
.drag_list{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
} |
|
|
|
.upload_return{ |
|
|
|
color: #8ebcfe; |
|
|
|
} |
|
|
|
.total_time{ |
|
|
|
position: absolute; |
|
|
|
top: 72px; |
|
|
|
right: 24px; |
|
|
|
font-size: 14px; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
.edit_material{ |
|
|
|
display: flex; |
|
|
|
padding: 12px 0; |
|
|
|
border-bottom: 1px solid #f2f6fd; |
|
|
|
&:nth-last-child(2){ |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
.edit_img{ |
|
|
|
position: relative; |
|
|
|
width: 58px; |
|
|
|
@ -443,8 +687,8 @@ export default { |
|
|
|
} |
|
|
|
span{ |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
top: -1px; |
|
|
|
left: -1px; |
|
|
|
display: block; |
|
|
|
width: 20px; |
|
|
|
height: 14px; |
|
|
|
@ -471,6 +715,143 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.edit_cont{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column ; |
|
|
|
justify-content: space-between; |
|
|
|
flex: 1; |
|
|
|
padding: 10px 0 8px 0; |
|
|
|
font-size: 14px; |
|
|
|
margin-left: 25px; |
|
|
|
.edit_cont_base{ |
|
|
|
display: flex; |
|
|
|
p{ |
|
|
|
margin-right: 14px; |
|
|
|
color: #000; |
|
|
|
} |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
padding: 0 5px; |
|
|
|
margin-right: 8px; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 16px; |
|
|
|
color: #3a8aeb; |
|
|
|
background: #cde4ff; |
|
|
|
border-radius: 2px; |
|
|
|
} |
|
|
|
} |
|
|
|
.edit_cont_set{ |
|
|
|
display: flex; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
line-height: 26px; |
|
|
|
.set_time{ |
|
|
|
display: flex; |
|
|
|
margin-right: 30px; |
|
|
|
span{ |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
em{ |
|
|
|
display: block; |
|
|
|
margin-left: 8px; |
|
|
|
font-style: normal; |
|
|
|
} |
|
|
|
} |
|
|
|
.set_animation{ |
|
|
|
display: flex; |
|
|
|
span.set_item{ |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.el-input__inner{ |
|
|
|
text-align: center; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
} |
|
|
|
.el-input__icon{ |
|
|
|
line-height: 26px; |
|
|
|
} |
|
|
|
} |
|
|
|
.edit_cont_other{ |
|
|
|
line-height: 26px; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.release_layer{ |
|
|
|
::v-deep .el-dialog__header{ |
|
|
|
padding: 0; |
|
|
|
height: 60px; |
|
|
|
} |
|
|
|
.layer_tab_title{ |
|
|
|
display: flex; |
|
|
|
span{ |
|
|
|
position: relative; |
|
|
|
display: block; |
|
|
|
margin-right: 32px; |
|
|
|
line-height: 60px; |
|
|
|
font-size: 18px; |
|
|
|
color: #666; |
|
|
|
cursor: pointer; |
|
|
|
&.active{ |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
&.active::after{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
height: 3px; |
|
|
|
background: #3a8aeb; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.tab_item{ |
|
|
|
display: flex; |
|
|
|
font-size: 14px; |
|
|
|
color: #666; |
|
|
|
margin: -14px 0 16px 0; |
|
|
|
li{ |
|
|
|
margin-right: 30px; |
|
|
|
cursor: pointer; |
|
|
|
span{ |
|
|
|
display: inline-block; |
|
|
|
margin-left: 4px; |
|
|
|
} |
|
|
|
&.active{ |
|
|
|
color: #3a8aeb; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.material_list{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
.item_cont{ |
|
|
|
margin: 0 27px 20px 0; |
|
|
|
&:nth-child(5n){ |
|
|
|
margin: 0 0 20px 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.theme_img { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
// padding-left: 26px; |
|
|
|
img { |
|
|
|
display: block; |
|
|
|
width: 134px; |
|
|
|
height: 182px; |
|
|
|
border: 1px solid #f0f0f0; |
|
|
|
border-radius: 4px; |
|
|
|
margin: 0 12px 24px 13px; |
|
|
|
overflow: hidden; |
|
|
|
&:nth-child(6n){ |
|
|
|
margin: 0 0 24px 13px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
