|
|
|
@ -7,20 +7,11 @@ |
|
|
|
<el-col :span="18"> |
|
|
|
<div class="input_wrap"> |
|
|
|
<span class="input_label">名称</span> |
|
|
|
<el-input |
|
|
|
v-model="form.relaase_name" |
|
|
|
:placeholder="changePlaceholder" |
|
|
|
class="input_name" |
|
|
|
/> |
|
|
|
<el-input v-model="form.relaase_name" :placeholder="changePlaceholder" class="input_name" /> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4" class="release_right"> |
|
|
|
<el-button |
|
|
|
round |
|
|
|
class="release_btn" |
|
|
|
type="primary" |
|
|
|
@click="releaseSubmit" |
|
|
|
>发布</el-button> |
|
|
|
<el-button round class="release_btn" type="primary" @click="releaseSubmit">发布</el-button> |
|
|
|
<el-button round type="primary">关闭</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -28,54 +19,23 @@ |
|
|
|
<el-row class="in_release_item"> |
|
|
|
<el-col class="step_1">第一步：设置时间</el-col> |
|
|
|
<el-col class="step_form"> |
|
|
|
<el-form-item |
|
|
|
label="发布时间" |
|
|
|
prop="release_start" |
|
|
|
:rules="[ |
|
|
|
<el-form-item label="发布时间" prop="release_start" :rules="[ |
|
|
|
{ required: true, message: '请选择发布时间', trigger: 'change' } |
|
|
|
]" |
|
|
|
label-width="100px" |
|
|
|
> |
|
|
|
<el-date-picker |
|
|
|
v-if="publishType == 0" |
|
|
|
v-model="form.release_start" |
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
type="date" |
|
|
|
placeholder="选择日期" |
|
|
|
/> |
|
|
|
<el-date-picker |
|
|
|
v-else |
|
|
|
v-model="form.release_start" |
|
|
|
value-format="yyyy-MM-dd HH:mm:ss" |
|
|
|
type="daterange" |
|
|
|
range-separator="至" |
|
|
|
start-placeholder="开始日期" |
|
|
|
end-placeholder="结束日期" |
|
|
|
/> |
|
|
|
]" label-width="100px"> |
|
|
|
<el-date-picker v-if="publishType == 0" v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期" /> |
|
|
|
<el-date-picker v-else v-model="form.release_start" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="publishType == 1" |
|
|
|
label="设置周期" |
|
|
|
prop="release_cycle" |
|
|
|
:rules="[ |
|
|
|
<el-form-item v-if="publishType == 1" label="设置周期" prop="release_cycle" :rules="[ |
|
|
|
{ required: true, message: '请设置周期：', trigger: 'change' }, |
|
|
|
]" |
|
|
|
:class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]" |
|
|
|
label-width="100px" |
|
|
|
> |
|
|
|
]" :class="['set_weekly',{'no_margin': form.release_cycle === '每周'}]" label-width="100px"> |
|
|
|
<el-radio-group v-model="form.release_cycle" @change="clearCheckbox()"> |
|
|
|
<el-radio label="每天" value="everyday" /> |
|
|
|
<el-radio label="每周" value="weekly" /> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
v-if="form.release_cycle === '每周'" |
|
|
|
:class="{'weekly_margin': form.release_cycle === '每周'}" |
|
|
|
prop="release_weekly" |
|
|
|
:rules="[ |
|
|
|
<el-form-item v-if="form.release_cycle === '每周'" :class="{'weekly_margin': form.release_cycle === '每周'}" prop="release_weekly" :rules="[ |
|
|
|
{ required: true, message: '请选择每周开机时间', trigger: 'change' }, |
|
|
|
]" |
|
|
|
> |
|
|
|
]"> |
|
|
|
<el-checkbox-group v-model="form.release_weekly"> |
|
|
|
<el-checkbox label="周一" name="release_weekly" /> |
|
|
|
<el-checkbox label="周二" name="release_weekly" /> |
|
|
|
@ -89,11 +49,7 @@ |
|
|
|
<!-- :rules="[ |
|
|
|
{ required: true, message: '请选择是否置顶', trigger: 'change' } |
|
|
|
]" --> |
|
|
|
<el-form-item |
|
|
|
label="是否置顶" |
|
|
|
prop="is_topping" |
|
|
|
label-width="100px" |
|
|
|
> |
|
|
|
<el-form-item label="是否置顶" prop="is_topping" label-width="100px"> |
|
|
|
<!-- <el-radio v-model="form.is_topping" label="1">置顶</el-radio> --> |
|
|
|
<el-checkbox v-model="form.is_topping">置顶</el-checkbox> |
|
|
|
</el-form-item> |
|
|
|
@ -106,29 +62,20 @@ |
|
|
|
<div class="step_select"> |
|
|
|
<div>已选内容： 0</div> |
|
|
|
<div>内容总时长：0.00s</div> |
|
|
|
<div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button></div> |
|
|
|
<div>添加BGM：<el-button class="step_select_audio" type="primary" round @click="selectAudioCont">选择文件</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="step_select_list"> |
|
|
|
<div class="step_upload" @click="selectContVisible = true"></div> |
|
|
|
<draggable |
|
|
|
v-model="materialSelected" |
|
|
|
class="drag_list" |
|
|
|
@end="dragEnd" |
|
|
|
> |
|
|
|
<div |
|
|
|
v-for="(item, index) in materialSelected" |
|
|
|
:key="'list-'+index" |
|
|
|
:class="['material_item', 'item_cont']" |
|
|
|
@click="selectedItem(item.material_id,item)" |
|
|
|
> |
|
|
|
<draggable v-model="selectedMaterial" class="drag_list" @end="dragEnd"> |
|
|
|
<div v-for="(item, index) in selectedMaterial" :key="'list-'+index" :class="['material_item', 'item_cont']" @click="clickMaterialItem(item.material_id,item)"> |
|
|
|
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt /> |
|
|
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> |
|
|
|
<div class="item_format"> |
|
|
|
<span class="item_type">{{ 1 }}</span> |
|
|
|
<span class="item_type">{{ materialPostfix[index] }}</span> |
|
|
|
<span v-if="item.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.material_name }}</div> |
|
|
|
<!-- <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item)"></span> --> |
|
|
|
<div v-if="contentIds.includes(item.material_id)" class="select_handle"> |
|
|
|
<div class="select_delt" @click.stop="selectDelt(item.material_id,index)"> |
|
|
|
<svg class="font-icon icon1" aria-hidden="true"> |
|
|
|
@ -150,36 +97,24 @@ |
|
|
|
<el-row class="in_release_item"> |
|
|
|
<el-col class="step_1">第三步：选择设备</el-col> |
|
|
|
<el-col class="step_form"> |
|
|
|
<el-form-item |
|
|
|
label="" |
|
|
|
prop="release_device" |
|
|
|
:rules="[ |
|
|
|
<el-form-item label="" prop="release_device" :rules="[ |
|
|
|
{ required: true, message: '请选择设备', trigger: 'change' }, |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-radio-group v-model="form.release_device"> |
|
|
|
<el-radio label="all" value="all">所有设备</el-radio> |
|
|
|
<el-radio label="other" value="other">部分设备<i v-if="form.deviceSelect === 'other'" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio> |
|
|
|
]"> |
|
|
|
<el-radio-group v-model="form.release_device" @change="clearDevice()"> |
|
|
|
<el-radio label="1">所有设备</el-radio> |
|
|
|
<el-radio label="2">部分设备<i v-if="form.release_device == 2" class="radio_tip" @click="addDeviceTag()">添加</i></el-radio> |
|
|
|
</el-radio-group> |
|
|
|
</el-form-item> |
|
|
|
<div v-if="form.release_device === 'all'" class="select_all_tip">所有设备都将被发送</div> |
|
|
|
<div v-if="deviceTags.length > 0 && form.release_device === 'other'" class="select_other"> |
|
|
|
<div v-if="form.release_device == 1" class="select_all_tip">所有设备都将被发送</div> |
|
|
|
<div v-if="deviceTags.length > 0 && form.release_device == 2" class="select_other"> |
|
|
|
<el-row> |
|
|
|
<el-col :span="10" class="other_tip">以下设备都将被发送<span>总计{{ deviceTags.length }}个设备</span></el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<el-button round class="delt_btn" @click="clearDevice()">清空</el-button> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-tag |
|
|
|
v-for="tag in deviceTags" |
|
|
|
:key="tag" |
|
|
|
closable |
|
|
|
:disable-transitions="true" |
|
|
|
:hit="false" |
|
|
|
color="#cbe3ff" |
|
|
|
@close="deltTags(tag)" |
|
|
|
> |
|
|
|
{{ tag }} |
|
|
|
<el-tag v-for="tag in deviceTags" :key="tag.device_id" closable :disable-transitions="true" :hit="false" color="#cbe3ff" @close="deltTags(tag)"> |
|
|
|
{{ tag.device_name }} |
|
|
|
</el-tag> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
@ -187,12 +122,7 @@ |
|
|
|
</el-form> |
|
|
|
<!-- 第二步：选择内容 - 选择素材 --> |
|
|
|
<div class="release_layer upload_layer"> |
|
|
|
<el-dialog |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="selectContVisible" |
|
|
|
width="1200px" |
|
|
|
> |
|
|
|
<el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectContVisible" width="1200px"> |
|
|
|
<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> |
|
|
|
@ -200,40 +130,17 @@ |
|
|
|
<!-- 素材库 --> |
|
|
|
<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 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',{ 'item_multi': uploadContentIds.includes(item.id) }]" |
|
|
|
> |
|
|
|
<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.material_type != '0'" class="item_time">{{ item.duration | getSeconds }}</span> --> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedListItem(item.id, item.type)"></span> |
|
|
|
</div> |
|
|
|
<div class="material_list" style="min-height: 260px"> |
|
|
|
<MaterialList ref="MaterialList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 主题库 --> |
|
|
|
<div v-if="activeIndex === 1" class="theme_cont"> |
|
|
|
<!-- 主题库list --> |
|
|
|
<ThemeGalleryList |
|
|
|
ref="ThemeGalleryList" |
|
|
|
:is-multi-selected="isMultiSelected" |
|
|
|
:mulit-text="mulitText" |
|
|
|
:show-item-info="false" |
|
|
|
/> |
|
|
|
<ThemeGalleryList ref="ThemeGalleryList" :is-multi-selected="isMultiSelected" :mulit-text="mulitText" :show-item-info="false" /> |
|
|
|
</div> |
|
|
|
<div class="upload_list_right"> |
|
|
|
<div class="mulit_btn" @click="multiSelectBtn">{{ mulitText }}</div> |
|
|
|
@ -246,19 +153,11 @@ |
|
|
|
</div> |
|
|
|
<!-- 编辑播放内容 --> |
|
|
|
<div class="upload_layer"> |
|
|
|
<el-dialog |
|
|
|
title="请选择播放内容" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="listEditVisible" |
|
|
|
> |
|
|
|
<el-dialog title="请选择播放内容" :close-on-click-modal="false" :visible.sync="listEditVisible"> |
|
|
|
<div class="total_time"> |
|
|
|
内容总时长：3m15s |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-for="(item, index) in selectedData" |
|
|
|
:key="index" |
|
|
|
class="edit_material" |
|
|
|
> |
|
|
|
<div v-for="(item, index) in selectedEditData" :key="index" class="edit_material"> |
|
|
|
<div class="edit_img"> |
|
|
|
<img v-if="item.img_path || item.material_type == 1" :src="item.img_path" :onerror="defaultImg" alt /> |
|
|
|
<div v-if="!item.img_path && item.material_type == 2" class="radio_img"></div> |
|
|
|
@ -267,67 +166,62 @@ |
|
|
|
<div class="edit_cont"> |
|
|
|
<div class="edit_cont_base"> |
|
|
|
<p>{{ item.material_name }}</p> |
|
|
|
<span>{{ item.material_type }}</span> |
|
|
|
<span>{{ item.size }}</span> |
|
|
|
<span>{{ materialPostfix[index] }}</span> |
|
|
|
<span>{{ item.file_size | formatBytes }}</span> |
|
|
|
</div> |
|
|
|
<div v-if="item.material_type == 0" class="edit_cont_set"> |
|
|
|
<!-- <div v-if="item.material_type == 0" class="edit_cont_set"> --> |
|
|
|
<el-form v-if="item.material_type == 0" :ref="setMaterialForm" :model="setMaterialForm.form" class="edit_cont_set" size="small"> |
|
|
|
<div class="set_time"> |
|
|
|
<span>展示时长</span> |
|
|
|
<el-input v-model="time" type="text" style="width: 66px" /> |
|
|
|
<el-form-item :prop="'form.'+index+'.showTime'" style="width: 100px"> |
|
|
|
<el-input v-model="item.showTime" type="text" style="width: 66px" /> |
|
|
|
</el-form-item> |
|
|
|
<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-form-item :prop="'form.'+index+'.showAnimation'" style="width: 100px"> |
|
|
|
<el-select v-model="item.showAnimationName" size="small" class="filter-item" value-key="name" @change="selectAnimation($event, item)"> |
|
|
|
<el-option v-for="items in animationData" :key="items.key" :label="items.name" :value="items" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
</div> |
|
|
|
<div class="set_time set_audio"> |
|
|
|
<span>音频：</span> |
|
|
|
<p class="audio_name">audio.mp3</p> |
|
|
|
<p class="audio_name">{{ showAudioName }}</p> |
|
|
|
<!-- 主题库音频文件不可选择 --> |
|
|
|
<el-button type="primary" round @click="selectAudioCont">选择文件</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-form> |
|
|
|
<!-- </div> --> |
|
|
|
<div v-else class="edit_cont_other">内容时长：{{ item.duration | getSeconds }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round @click="submitForm('form')">保 存</el-button> |
|
|
|
<el-button type="primary" round @click="editMaterialSubmit()">保 存</el-button> |
|
|
|
<el-button round @click="listEditVisible = false">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<!-- 素材库 - 音频选择 --> |
|
|
|
<div class="release_layer upload_layer"> |
|
|
|
<el-dialog |
|
|
|
:close-on-click-modal="false" |
|
|
|
:show-close="false" |
|
|
|
:visible.sync="selectAudioVisible" |
|
|
|
width="1200px" |
|
|
|
> |
|
|
|
<el-dialog :close-on-click-modal="false" :show-close="false" :visible.sync="selectAudioVisible" width="1200px"> |
|
|
|
<div slot="title" class="layer_tab_title"> |
|
|
|
<span class="active">素材库</span> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<ul class="tab_item"> |
|
|
|
<li>音频<span>3</span></li> |
|
|
|
<li>音频<span>{{ audioListData.length }}</span></li> |
|
|
|
</ul> |
|
|
|
<div class="material_list"> |
|
|
|
<div |
|
|
|
v-for="(item, index) in listData" |
|
|
|
:key="index" |
|
|
|
:class="['material_item', 'item_cont',{ 'item_multi': audioChecked === index }]" |
|
|
|
> |
|
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt /> |
|
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div> |
|
|
|
<div v-for="(item, index) in audioListData" :key="index" :class="['material_item', 'item_cont',{ 'item_multi': audioChecked == index }]"> |
|
|
|
<img v-if="item.img_path" :src="item.img_path" alt /> |
|
|
|
<div v-else 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> |
|
|
|
<span class="item_type">mp3</span> |
|
|
|
<span class="item_time">{{ item.duration | getSeconds }}</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
<div class="file_name">{{ item.material_name }}</div> |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="audioCheckedHandle(index)"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -336,29 +230,16 @@ |
|
|
|
<div class="mulit_btn" @click="multiSelectBtn('audio')">{{ mulitText }}</div> |
|
|
|
</div> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" round>确 定</el-button> |
|
|
|
<el-button type="primary" round @click="audioCheckedSubmit">确 定</el-button> |
|
|
|
<el-button round @click="cancelContSelect('audio')">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
<!-- 添加发布的设备 --> |
|
|
|
<div class="add_device_layer"> |
|
|
|
<el-dialog |
|
|
|
title="请选择设备" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="selectDeviceVisible" |
|
|
|
width="400px" |
|
|
|
> |
|
|
|
<el-tag |
|
|
|
v-for="tag in deviceAllTags" |
|
|
|
:key="tag" |
|
|
|
:disable-transitions="true" |
|
|
|
:hit="false" |
|
|
|
color="#cbe3ff" |
|
|
|
class="all_tags" |
|
|
|
@click="tagHandle(tag)" |
|
|
|
> |
|
|
|
{{ tag }} |
|
|
|
<el-dialog title="请选择设备" :close-on-click-modal="false" :visible.sync="selectDeviceVisible" width="400px"> |
|
|
|
<el-tag v-for="tag in deviceAllTags" :key="tag.device_id" :disable-transitions="true" :hit="false" color="#cbe3ff" class="all_tags" @click="tagHandle(tag)"> |
|
|
|
{{ tag.device_name }} |
|
|
|
</el-tag> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
@ -368,36 +249,46 @@ |
|
|
|
<script> |
|
|
|
import draggable from 'vuedraggable' |
|
|
|
import ThemeGalleryList from '../components/ThemeGalleryList.vue' |
|
|
|
import { getSeconds } from '@/utils/index.js' |
|
|
|
import MaterialList from '../components/MaterialCompontentList.vue' |
|
|
|
import { getMaterialByType } from '@/api/material/material' |
|
|
|
import { ReqDeviceList } from '@/api/device/deviceList.js' |
|
|
|
import { getSeconds, formatBytes } from '@/utils/index.js' |
|
|
|
export default { |
|
|
|
name: 'ImmediateRelease', |
|
|
|
components: { |
|
|
|
draggable, |
|
|
|
ThemeGalleryList |
|
|
|
ThemeGalleryList, |
|
|
|
MaterialList |
|
|
|
}, |
|
|
|
filters: { |
|
|
|
getSeconds (s) { |
|
|
|
return getSeconds(s) |
|
|
|
}, |
|
|
|
formatBytes (bytes, decimals) { |
|
|
|
return formatBytes(bytes, decimals) |
|
|
|
} |
|
|
|
}, |
|
|
|
data () { |
|
|
|
return { |
|
|
|
materialSelected: [], // 从其他页面选择带过来的素材 |
|
|
|
orga_id: '133221333123111', |
|
|
|
selectedMaterial: [], // 从其他页面选择带过来的素材 |
|
|
|
materialPostfix: [], |
|
|
|
publishType: 0, // 判断是定时发布还是即时发布页面 |
|
|
|
time: 15, |
|
|
|
audio_name: 'audio.mp3', |
|
|
|
animation: null, |
|
|
|
selectDeviceVisible: false, |
|
|
|
listEditVisible: false, |
|
|
|
selectContVisible: false, |
|
|
|
activeIndex: 0, |
|
|
|
activeItemIndex: 0, |
|
|
|
selectAudioVisible: false, |
|
|
|
audioChecked: null, |
|
|
|
deviceAllTags: ['GCXR1', 'GCXR2', 'GCXR3', 'GCXR4', 'GCXR5'], |
|
|
|
deviceTags: [], |
|
|
|
themeType: null, |
|
|
|
page: 1, |
|
|
|
pageSize: 10, |
|
|
|
audioListData: [], // |
|
|
|
|
|
|
|
selectDeviceVisible: false, // 设备list - layer |
|
|
|
deviceAllTags: [], // 设备list |
|
|
|
deviceTags: [], // 已选择设备list |
|
|
|
selectContVisible: false, // 选择内容素材/主题 - layer |
|
|
|
selectAudioVisible: false, // 音频list-layer |
|
|
|
audioChecked: null, // 音频已选中的 |
|
|
|
|
|
|
|
mulitText: '多选', |
|
|
|
isMultiSelected: false, |
|
|
|
|
|
|
|
form: { |
|
|
|
name: '', |
|
|
|
date: null, |
|
|
|
@ -409,6 +300,7 @@ export default { |
|
|
|
actual_end: '', // “实际结束时间 yyyy-MM-dd HH:mm:ss”, |
|
|
|
is_topping: false, // 是否置顶, |
|
|
|
orga_id: '', // "机构id" |
|
|
|
bgm_main: '', |
|
|
|
relaase_name: '', // 发布名称 |
|
|
|
release_cycle: '', // 发布周期 0.无 1.每天 2.每周 |
|
|
|
release_weekly: '', // 发布每周 如果设置为每天则为空 |
|
|
|
@ -431,44 +323,33 @@ export default { |
|
|
|
release_start: '', // 发布开始时间 yyyy-MM-dd HH:mm:ss |
|
|
|
release_type: '' // 发布类型 |
|
|
|
}, |
|
|
|
listData: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
name: '1', |
|
|
|
type: 'JPG', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
}, |
|
|
|
contentIds: [], |
|
|
|
listEditVisible: false, // 可编辑list素材-layer |
|
|
|
selectedEditData: [], // 可编辑list内容 - 选择的item |
|
|
|
showAudioName: '', |
|
|
|
showAudioUrl: '', |
|
|
|
// formListData: [] |
|
|
|
setMaterialForm: [], |
|
|
|
// setMaterialForm: { |
|
|
|
// showTime: 15, |
|
|
|
// showAnimation: 0, |
|
|
|
// showAnimationName: '' |
|
|
|
// }, |
|
|
|
animationData: [ |
|
|
|
{ |
|
|
|
id: '2', |
|
|
|
name: '2', |
|
|
|
type: 'JPG', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '' |
|
|
|
key: '0', |
|
|
|
name: '无动画' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '3', |
|
|
|
name: '4', |
|
|
|
type: 'VEDIO', |
|
|
|
size: '12kb', |
|
|
|
coverImg: require('@/assets/images/background.jpg'), |
|
|
|
time: '03:00' |
|
|
|
key: '1', |
|
|
|
name: '动画1' |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '4', |
|
|
|
name: '4', |
|
|
|
type: 'audio', |
|
|
|
size: '12kb', |
|
|
|
coverImg: '', |
|
|
|
time: '01:20' |
|
|
|
key: '2', |
|
|
|
name: '动画2' |
|
|
|
} |
|
|
|
], |
|
|
|
contentIds: [], |
|
|
|
uploadContentIds: [], |
|
|
|
selectedData: [], // 选择内容 - 选择的item |
|
|
|
materialTabItem: [ |
|
|
|
materialTabItem: [ // 素材库 - tab切换title |
|
|
|
{ |
|
|
|
key: 1, |
|
|
|
name: '全部', |
|
|
|
@ -489,7 +370,10 @@ export default { |
|
|
|
name: '音频', |
|
|
|
num: '1' |
|
|
|
} |
|
|
|
] |
|
|
|
], |
|
|
|
activeIndex: 0, |
|
|
|
activeItemIndex: 0, |
|
|
|
uploadContentIds: [] // 素材 / 主题库已选择的 |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -501,8 +385,15 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
created () { |
|
|
|
this.materialSelected = JSON.parse(localStorage.getItem('selectedMaterial')) |
|
|
|
console.log(this.materialSelected) |
|
|
|
this.selectedMaterial = JSON.parse(localStorage.getItem('selectedMaterial')) |
|
|
|
console.log(this.selectedMaterial) |
|
|
|
// 素材类型格式处理 |
|
|
|
this.selectedMaterial.forEach((item, key) => { |
|
|
|
this.materialPostfix[key] = item.deposit_url.substring( |
|
|
|
item.deposit_url.lastIndexOf('.') + 1, |
|
|
|
item.deposit_url.length |
|
|
|
) |
|
|
|
}) |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
console.log(this.$route.query.tag) |
|
|
|
@ -512,6 +403,7 @@ export default { |
|
|
|
if (this.$route.query.tag) { |
|
|
|
this.publishType = this.$route.query.tag |
|
|
|
} |
|
|
|
this.ReqDeviceList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 发布提交 |
|
|
|
@ -520,35 +412,209 @@ export default { |
|
|
|
console.log(this.form.relaase_name) |
|
|
|
console.log(this.form.release_start) |
|
|
|
console.log(this.form.is_topping) |
|
|
|
console.log(this.form.release_device) |
|
|
|
if (this.form.release_device == 1) { |
|
|
|
this.form.release_deviceDTOs = [] |
|
|
|
} else { |
|
|
|
if (this.deviceTags.length == 0) { |
|
|
|
this.$message.error('请选择设备 ！') |
|
|
|
return |
|
|
|
} |
|
|
|
this.form.release_deviceDTOs = this.deviceTags.map(item => { |
|
|
|
const json = {} |
|
|
|
json.device_id = item.device_id |
|
|
|
return json |
|
|
|
}) |
|
|
|
} |
|
|
|
console.log(this.form.release_deviceDTOs) |
|
|
|
this.form.release_type = this.publishType |
|
|
|
console.log(this.form.release_type) |
|
|
|
this.form.release_end = this.publishType ? '' : this.form.release_start |
|
|
|
console.log(this.form.release_end) |
|
|
|
console.log('-----------------------------') |
|
|
|
console.log(this.selectedMaterial) |
|
|
|
console.log('-----------------------------') |
|
|
|
console.log("看这里这里") |
|
|
|
console.log(this.selectedEditData) |
|
|
|
console.log(this.selectedMaterial) |
|
|
|
console.log("看这里这里") |
|
|
|
this.form.release_materialDTOs = this.selectedMaterial.map(item => { |
|
|
|
const json = {} |
|
|
|
if (item.material_type == 0 && (item.showTime || item.showAnimationName || item.showAnimation)) { |
|
|
|
json.duration = item.showTime |
|
|
|
json.effect = item.showAnimation |
|
|
|
json.bgm_path = '' |
|
|
|
} else { |
|
|
|
json.duration = 0 |
|
|
|
json.effect = 0 |
|
|
|
json.bgm_path = null |
|
|
|
} |
|
|
|
json.material_id = item.material_id |
|
|
|
json.material_name = item.material_name |
|
|
|
json.img_path = item.img_path |
|
|
|
json.file_size = item.file_size |
|
|
|
json.rm_id = null |
|
|
|
return json |
|
|
|
}) |
|
|
|
console.log(this.form.release_materialDTOs) |
|
|
|
console.log("看这里release_materialDTOs") |
|
|
|
const isBgm = this.selectedMaterial.find(item => { |
|
|
|
return item.material_type == 2 |
|
|
|
}) |
|
|
|
console.log(this.form.bgm_main) |
|
|
|
}, |
|
|
|
|
|
|
|
selectEdit() { |
|
|
|
this.listEditVisible = true |
|
|
|
// console.log(this.selectedData) |
|
|
|
// 获取设备列表 |
|
|
|
ReqDeviceList () { |
|
|
|
const params = { |
|
|
|
device_id: '', |
|
|
|
device_name: '', |
|
|
|
is_state: '', |
|
|
|
page: 1, |
|
|
|
size: 10 |
|
|
|
} |
|
|
|
ReqDeviceList(params).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.deviceAllTags = res.data.content |
|
|
|
// this.total = res.data.totalElements |
|
|
|
// this.queryInfo.size = res.data.size |
|
|
|
} else { |
|
|
|
return this.$message.error('获取设备列表失败！') |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
dragEnd() { |
|
|
|
// console.log(this.listData) |
|
|
|
// console.log(this.selectedData) |
|
|
|
// 设备list - show |
|
|
|
addDeviceTag () { |
|
|
|
this.selectDeviceVisible = true |
|
|
|
}, |
|
|
|
// 设备选中list |
|
|
|
tagHandle (tag) { |
|
|
|
if (this.deviceTags.length == 0) { |
|
|
|
this.deviceTags.push(tag) |
|
|
|
} else { |
|
|
|
const result = this.deviceTags.find((item) => { |
|
|
|
return item == tag |
|
|
|
}) |
|
|
|
if (!result) { |
|
|
|
this.deviceTags.push(tag) |
|
|
|
} else { |
|
|
|
this.$message.error('已选择过了~') |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 删除已选择的设备 |
|
|
|
deltTags (tag) { |
|
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1) |
|
|
|
}, |
|
|
|
// 清空已选择的设备 |
|
|
|
clearDevice () { |
|
|
|
this.deviceTags = [] |
|
|
|
}, |
|
|
|
// 根据素材类型获取素材 |
|
|
|
getMaterialByType () { |
|
|
|
const params = { |
|
|
|
'theme_name': '', |
|
|
|
'theme_type': this.themeType, |
|
|
|
'theme_type_not': '', |
|
|
|
'orga_id': this.orga_id, |
|
|
|
'page': this.page, |
|
|
|
'size': this.pageSize |
|
|
|
} |
|
|
|
getMaterialByType(params).then(res => { |
|
|
|
if (res.code == 200) { |
|
|
|
this.audioListData = res.data.content |
|
|
|
// 素材类型格式处理 |
|
|
|
this.audioListData.forEach((item, key) => { |
|
|
|
this.materialPostfix[key] = item.deposit_url.substring( |
|
|
|
item.deposit_url.lastIndexOf('.') + 1, |
|
|
|
item.deposit_url.length |
|
|
|
) |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
message: res.msg, |
|
|
|
type: 'error' |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// 删除选择的素材 |
|
|
|
selectDelt (id, i) { |
|
|
|
const index = this.contentIds.indexOf(id) |
|
|
|
this.contentIds.splice(index, 1) |
|
|
|
this.selectedData.splice(index, 1) |
|
|
|
this.listSelectedData.splice(i, 1) |
|
|
|
this.selectedEditData.splice(index, 1) |
|
|
|
this.selectedMaterial.splice(i, 1) |
|
|
|
}, |
|
|
|
selectedItem(id, item) { |
|
|
|
// 选中可编辑的 |
|
|
|
clickMaterialItem (id, item) { |
|
|
|
const arr = this.contentIds |
|
|
|
if (arr.includes(id)) { |
|
|
|
const index = arr.indexOf(id) |
|
|
|
if (index > -1) { |
|
|
|
arr.splice(index, 1) |
|
|
|
this.selectedData.splice(index, 1) |
|
|
|
this.selectedEditData.splice(index, 1) |
|
|
|
} |
|
|
|
} else { |
|
|
|
this.contentIds.push(id) |
|
|
|
this.selectedData.push(item) |
|
|
|
this.selectedEditData.push(item) |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
// 编辑-已选择的 |
|
|
|
selectEdit () { |
|
|
|
this.listEditVisible = true |
|
|
|
let form = { |
|
|
|
showTime: 15, |
|
|
|
showAnimation: '', |
|
|
|
showAnimationName: '' |
|
|
|
} |
|
|
|
this.selectedEditData.map((item, index) => { |
|
|
|
if (item.material_type == 0) { |
|
|
|
this.setMaterialForm.push(form) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
dragEnd () { |
|
|
|
// console.log(this.selectedEditData) |
|
|
|
// console.log(this.selectedMaterial) |
|
|
|
}, |
|
|
|
// 选择音频 |
|
|
|
selectAudioCont () { |
|
|
|
this.isMultiSelected = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.selectAudioVisible = true |
|
|
|
this.themeType = 2 |
|
|
|
this.getMaterialByType() |
|
|
|
}, |
|
|
|
// 音频选中-单选 |
|
|
|
audioCheckedHandle (index) { |
|
|
|
if (index != this.audioChecked) { |
|
|
|
this.audioChecked = index |
|
|
|
} else { |
|
|
|
this.audioChecked = -1 |
|
|
|
} |
|
|
|
}, |
|
|
|
audioCheckedSubmit () { |
|
|
|
this.selectAudioVisible = false |
|
|
|
if (this.audioChecked != -1) { |
|
|
|
const index = this.audioChecked |
|
|
|
this.showAudioName = this.audioListData[index].material_name |
|
|
|
this.showAudioUrl = this.audioListData[index].deposit_url |
|
|
|
} else { |
|
|
|
this.showAudioName = '' |
|
|
|
this.showAudioUrl = '' |
|
|
|
} |
|
|
|
}, |
|
|
|
// 动画切换 |
|
|
|
selectAnimation (event, item) { |
|
|
|
console.log(event) |
|
|
|
console.log(item) |
|
|
|
console.log(event.key + ".." + event.name) |
|
|
|
item.showAnimationName = event.name |
|
|
|
item.showAnimation = event.key |
|
|
|
}, |
|
|
|
// 提交 - 编辑素材 |
|
|
|
editMaterialSubmit () { |
|
|
|
this.listEditVisible = false |
|
|
|
}, |
|
|
|
// 多选btn |
|
|
|
multiSelectBtn (type) { |
|
|
|
@ -556,9 +622,9 @@ export default { |
|
|
|
if (this.isMultiSelected) { |
|
|
|
this.mulitText = '取消' |
|
|
|
} else { |
|
|
|
if (type === 'audio') { |
|
|
|
if (type == 'audio') { |
|
|
|
this.mulitText = '选择' |
|
|
|
this.audioChecked = null |
|
|
|
this.audioChecked = -1 |
|
|
|
} else { |
|
|
|
this.mulitText = '多选' |
|
|
|
this.uploadContentIds = [] |
|
|
|
@ -577,23 +643,6 @@ export default { |
|
|
|
this.uploadContentIds.push(id) |
|
|
|
} |
|
|
|
}, |
|
|
|
// 设备选择 |
|
|
|
addDeviceTag() { |
|
|
|
this.selectDeviceVisible = true |
|
|
|
}, |
|
|
|
tagHandle(tag) { |
|
|
|
console.log(tag) |
|
|
|
this.deviceTags.push(tag) |
|
|
|
}, |
|
|
|
// 删除已选择的设备 |
|
|
|
deltTags(tag) { |
|
|
|
this.deviceTags.splice(this.deviceTags.indexOf(tag), 1) |
|
|
|
console.log(this.deviceTags) |
|
|
|
}, |
|
|
|
// 清空已选择的设备 |
|
|
|
clearDevice() { |
|
|
|
this.deviceTags = [] |
|
|
|
}, |
|
|
|
// 选择内容-素材库/主题库 tab |
|
|
|
tabAll (index) { |
|
|
|
this.activeIndex = index |
|
|
|
@ -611,24 +660,14 @@ export default { |
|
|
|
this.form.onweek = [] |
|
|
|
} |
|
|
|
}, |
|
|
|
// 选择音频 |
|
|
|
selectAudioCont() { |
|
|
|
this.isMultiSelected = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.selectAudioVisible = true |
|
|
|
}, |
|
|
|
// 音频选中-单选 |
|
|
|
audioCheckedHandle(index) { |
|
|
|
this.audioChecked = index |
|
|
|
console.log(this.audioChecked) |
|
|
|
}, |
|
|
|
|
|
|
|
// 素材选择 - 取消按钮 |
|
|
|
cancelContSelect (type) { |
|
|
|
this.isMultiSelected = false |
|
|
|
if (type === 'audio') { |
|
|
|
if (type == 'audio') { |
|
|
|
this.selectAudioVisible = false |
|
|
|
this.mulitText = '选择' |
|
|
|
this.audioChecked = null |
|
|
|
this.audioChecked = -1 |
|
|
|
} else { |
|
|
|
this.selectContVisible = false |
|
|
|
this.mulitText = '多选' |
|
|
|
@ -754,7 +793,7 @@ export default { |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 44px; |
|
|
|
background: rgba(0,0,0,.5); |
|
|
|
background: rgba(0, 0, 0, 0.5); |
|
|
|
text-align: center; |
|
|
|
.font-icon { |
|
|
|
width: 16px; |
|
|
|
@ -823,7 +862,6 @@ export default { |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
line-height: 14px; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
&:nth-child(odd) { |
|
|
|
@ -872,6 +910,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
font-size: 12px; |
|
|
|
color: #666; |
|
|
|
height: 26px; |
|
|
|
line-height: 26px; |
|
|
|
.set_time { |
|
|
|
display: flex; |
|
|
|
@ -891,8 +930,15 @@ export default { |
|
|
|
span.set_item { |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
::v-deep .el-form-item__content { |
|
|
|
height: 28px; |
|
|
|
} |
|
|
|
::v-deep .el-input__suffix { |
|
|
|
height: 26px; |
|
|
|
} |
|
|
|
} |
|
|
|
.set_audio { |
|
|
|
flex: 1; |
|
|
|
.audio_name { |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
@ -989,5 +1035,4 @@ export default { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
