|
@@ -222,7 +222,7 @@ a {
|
|
|
|
|
|
<a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
|
|
<a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
|
|
<a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
|
|
<a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
|
|
- <div v-if="item.value != 'join' && item.value != 'success'">
|
|
|
|
|
|
+ <div v-if="item.value != 'join' && item.value != 'job' && item.value != 'success'">
|
|
<div v-if="dataSource.length > 0">
|
|
<div v-if="dataSource.length > 0">
|
|
<a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
<a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
<div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
|
|
<div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
|
|
@@ -287,7 +287,7 @@ a {
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <div v-else>
|
|
|
|
|
|
+ <div v-else-if="item.value == 'join'">
|
|
<div style="margin-bottom:20px">
|
|
<div style="margin-bottom:20px">
|
|
<a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
|
|
<a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
|
|
<a-button type="primary" @click="joinMatemal">开始拼接</a-button>
|
|
<a-button type="primary" @click="joinMatemal">开始拼接</a-button>
|
|
@@ -299,7 +299,7 @@ a {
|
|
</span>
|
|
</span>
|
|
<span slot="VIDEO_HEAD" slot-scope="text, record, index">
|
|
<span slot="VIDEO_HEAD" slot-scope="text, record, index">
|
|
<div v-if="text != ''" style="position:relative">
|
|
<div v-if="text != ''" style="position:relative">
|
|
- <video class="video" :src="text" controls="controls" style="height:160px">
|
|
|
|
|
|
+ <video class="video" :src="text.url" controls="controls" style="height:160px">
|
|
您的浏览器不支持 video 标签。
|
|
您的浏览器不支持 video 标签。
|
|
</video>
|
|
</video>
|
|
<a-icon
|
|
<a-icon
|
|
@@ -316,16 +316,16 @@ a {
|
|
<div>
|
|
<div>
|
|
<video
|
|
<video
|
|
class="video"
|
|
class="video"
|
|
- :src="item"
|
|
|
|
|
|
+ :src="item.url"
|
|
controls="controls"
|
|
controls="controls"
|
|
style="height:160px"
|
|
style="height:160px"
|
|
v-for="item of text"
|
|
v-for="item of text"
|
|
- :key="item"
|
|
|
|
|
|
+ :key="item.id"
|
|
draggable="true"
|
|
draggable="true"
|
|
- @dragstart="handleDragStart($event, item)"
|
|
|
|
- @dragover.prevent="handleDragOver($event, item)"
|
|
|
|
- @dragenter="handleDragEnter($event, item)"
|
|
|
|
- @dragend="handleDragEnd($event, item)"
|
|
|
|
|
|
+ @dragstart="handleDragStart($event, item.code)"
|
|
|
|
+ @dragover.prevent="handleDragOver($event, item.code)"
|
|
|
|
+ @dragenter="handleDragEnter($event, item.code)"
|
|
|
|
+ @dragend="handleDragEnd($event, item.code)"
|
|
>
|
|
>
|
|
> 您的浏览器不支持 video 标签。
|
|
> 您的浏览器不支持 video 标签。
|
|
</video>
|
|
</video>
|
|
@@ -336,7 +336,7 @@ a {
|
|
</span>
|
|
</span>
|
|
<span slot="VIDEO_TAIL" slot-scope="text, record, index">
|
|
<span slot="VIDEO_TAIL" slot-scope="text, record, index">
|
|
<div v-if="text != ''" style="position:relative">
|
|
<div v-if="text != ''" style="position:relative">
|
|
- <video class="video" :src="text" controls="controls" style="height:160px">
|
|
|
|
|
|
+ <video class="video" :src="text.url" controls="controls" style="height:160px">
|
|
您的浏览器不支持 video 标签。
|
|
您的浏览器不支持 video 标签。
|
|
</video>
|
|
</video>
|
|
<a-icon
|
|
<a-icon
|
|
@@ -351,6 +351,64 @@ a {
|
|
</span>
|
|
</span>
|
|
</a-table>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
|
|
+ <div v-else-if="item.value == 'job'">
|
|
|
|
+ <a-table :columns="columnsJob" :dataSource="dataSource" :pagination="false" :loading="loading" bordered>
|
|
|
|
+ <span slot="status" slot-scope="text">
|
|
|
|
+ {{ text == 'TranscodeSuccess' ? '已完成' : '提交中' }}
|
|
|
|
+ </span>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else-if="item.value == 'success'">
|
|
|
|
+ <a-button @click="dirVideoGetPublish" type="primary">发布到项目</a-button>
|
|
|
|
+ <div v-if="dataSource.length > 0">
|
|
|
|
+ <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
|
|
+ <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetailElse(items)">
|
|
|
|
+ <div class="home-right">
|
|
|
|
+ <span
|
|
|
|
+ style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
|
+ >
|
|
|
|
+ {{ items.jobId }}
|
|
|
|
+ </span>
|
|
|
|
+ <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
|
|
|
|
+ <video
|
|
|
|
+ :src="items.videoUrl"
|
|
|
|
+ @canplay="a(items)"
|
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:10;"
|
|
|
|
+ />
|
|
|
|
+ <img
|
|
|
|
+ src="./timg.gif"
|
|
|
|
+ v-if="!items.showVideo"
|
|
|
|
+ alt=""
|
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:11;"
|
|
|
|
+ @click.stop
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
|
|
|
|
+ {{ items.createTime | getDate }}
|
|
|
|
+ <a-checkbox :value="items.videoId" style="float:right"></a-checkbox
|
|
|
|
+ ></span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ <a-pagination
|
|
|
|
+ size="small"
|
|
|
|
+ :showTotal="ipagination.showTotal"
|
|
|
|
+ style="float:right"
|
|
|
|
+ v-if="dataSource.length > 0"
|
|
|
|
+ showQuickJumper
|
|
|
|
+ :pageSize.sync="ipagination.pageSize"
|
|
|
|
+ :total="ipagination.total"
|
|
|
|
+ v-model="ipagination.current"
|
|
|
|
+ @change="getDataSource"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
|
+ <img
|
|
|
|
+ src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tabs>
|
|
<a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
|
|
<a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :maskClosable="false">
|
|
@@ -454,6 +512,30 @@ a {
|
|
</a-form>
|
|
</a-form>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
|
|
|
|
+ <a-modal
|
|
|
|
+ title="发布到项目"
|
|
|
|
+ v-model="visiblePublish"
|
|
|
|
+ @ok="handleOkPublich"
|
|
|
|
+ @cancel="closePublish"
|
|
|
|
+ :maskClosable="false"
|
|
|
|
+ >
|
|
|
|
+ <a-form :form="form">
|
|
|
|
+ <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="选择项目">
|
|
|
|
+ <a-select
|
|
|
|
+ v-decorator="[
|
|
|
|
+ 'projectId', // 给表单赋值或拉取表单时,该input对应的key
|
|
|
|
+ { rules: [{ required: true, message: '请选择项目!' }] }
|
|
|
|
+ ]"
|
|
|
|
+ @change="getProjectId"
|
|
|
|
+ >
|
|
|
|
+ <a-select-option :value="item.projectId" v-for="item of dataElse" :key="item.id">
|
|
|
|
+ {{ item.projectName }}
|
|
|
|
+ </a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-form>
|
|
|
|
+ </a-modal>
|
|
|
|
+
|
|
<a-modal title="素材详情" v-model="visibleDetail" width="70%">
|
|
<a-modal title="素材详情" v-model="visibleDetail" width="70%">
|
|
<div style="display:flex;height:700px">
|
|
<div style="display:flex;height:700px">
|
|
<div
|
|
<div
|
|
@@ -572,6 +654,31 @@ export default {
|
|
align: 'center'
|
|
align: 'center'
|
|
}
|
|
}
|
|
],
|
|
],
|
|
|
|
+ columnsJob: [
|
|
|
|
+ {
|
|
|
|
+ title: '',
|
|
|
|
+ dataIndex: '',
|
|
|
|
+ key: 'rowIndex',
|
|
|
|
+ width: 50,
|
|
|
|
+ align: 'center',
|
|
|
|
+ customRender: function(t, r, index) {
|
|
|
|
+ return parseInt(index) + 1
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '任务Id',
|
|
|
|
+ dataIndex: 'jobId',
|
|
|
|
+ scopedSlots: { customRender: 'jobId' },
|
|
|
|
+ align: 'center'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '状态',
|
|
|
|
+ dataIndex: 'status',
|
|
|
|
+ scopedSlots: { customRender: 'status' },
|
|
|
|
+ align: 'center'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ dataJob: [],
|
|
dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
dataList: [{ key: 1, VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
inputVisible: false,
|
|
inputVisible: false,
|
|
inputValue: '',
|
|
inputValue: '',
|
|
@@ -595,6 +702,7 @@ export default {
|
|
show: true,
|
|
show: true,
|
|
visible: false,
|
|
visible: false,
|
|
visibleDetail: false,
|
|
visibleDetail: false,
|
|
|
|
+ visiblePublish: false,
|
|
activeKey: 'video',
|
|
activeKey: 'video',
|
|
active: 'VIDEO_HEAD',
|
|
active: 'VIDEO_HEAD',
|
|
examinelList: [
|
|
examinelList: [
|
|
@@ -602,6 +710,7 @@ export default {
|
|
{ value: 'VIDEO_PART', tab: '片段' },
|
|
{ value: 'VIDEO_PART', tab: '片段' },
|
|
{ value: 'VIDEO_TAIL', tab: '片尾' },
|
|
{ value: 'VIDEO_TAIL', tab: '片尾' },
|
|
{ value: 'join', tab: '视频拼接' },
|
|
{ value: 'join', tab: '视频拼接' },
|
|
|
|
+ { value: 'job', tab: '任务列表' },
|
|
{ value: 'success', tab: '成品' }
|
|
{ value: 'success', tab: '成品' }
|
|
],
|
|
],
|
|
// 表头
|
|
// 表头
|
|
@@ -739,6 +848,7 @@ export default {
|
|
this.setDir()
|
|
this.setDir()
|
|
},
|
|
},
|
|
joinMatemal() {
|
|
joinMatemal() {
|
|
|
|
+ console.log(this.dataList)
|
|
var data = this.dataList.filter(item => {
|
|
var data = this.dataList.filter(item => {
|
|
return item.VIDEO_PART.length > 0
|
|
return item.VIDEO_PART.length > 0
|
|
})
|
|
})
|
|
@@ -747,13 +857,15 @@ export default {
|
|
// {"startPart":"","endPart":"","parts":["",""]}
|
|
// {"startPart":"","endPart":"","parts":["",""]}
|
|
var params = this.dataList.map(item => {
|
|
var params = this.dataList.map(item => {
|
|
return {
|
|
return {
|
|
- startPart: item.VIDEO_HEAD,
|
|
|
|
- parts: item.VIDEO_PART,
|
|
|
|
- endPart: item.VIDEO_TAIL
|
|
|
|
|
|
+ startPart: item.VIDEO_HEAD.id,
|
|
|
|
+ parts: item.VIDEO_PART.map(item => {
|
|
|
|
+ return item.id
|
|
|
|
+ }),
|
|
|
|
+ endPart: item.VIDEO_TAIL.id
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- // params = qs.stringify({ videoMergeList: params })
|
|
|
|
- postAction('/ctop/materialpart/merge', { videoMergeList: params }).then(res => {
|
|
|
|
|
|
+ // var paramsString = qs.stringify({ videoMergeList: params })
|
|
|
|
+ postAction('/ctop/materialpart/merge', params).then(res => {
|
|
console.log(res)
|
|
console.log(res)
|
|
})
|
|
})
|
|
} else {
|
|
} else {
|
|
@@ -765,6 +877,9 @@ export default {
|
|
console.log(this.defaultDir)
|
|
console.log(this.defaultDir)
|
|
this.setDir()
|
|
this.setDir()
|
|
},
|
|
},
|
|
|
|
+ dirVideoGetPublish() {
|
|
|
|
+ this.visiblePublish = true
|
|
|
|
+ },
|
|
setDir() {
|
|
setDir() {
|
|
let date = new Date()
|
|
let date = new Date()
|
|
let y = date.getFullYear()
|
|
let y = date.getFullYear()
|
|
@@ -844,8 +959,7 @@ export default {
|
|
this.onChangeCheck(this.checkArr)
|
|
this.onChangeCheck(this.checkArr)
|
|
},
|
|
},
|
|
searchRe() {
|
|
searchRe() {
|
|
- this.queryParam.projectId = ''
|
|
|
|
- this.queryParam.createTime = ''
|
|
|
|
|
|
+ this.queryParam = { projectId: '', createTime: '' }
|
|
this.loadData()
|
|
this.loadData()
|
|
},
|
|
},
|
|
getList(value) {
|
|
getList(value) {
|
|
@@ -937,6 +1051,11 @@ export default {
|
|
this.detail = res
|
|
this.detail = res
|
|
})
|
|
})
|
|
},
|
|
},
|
|
|
|
+ showDetailElse(item) {
|
|
|
|
+ this.visibleDetail = true
|
|
|
|
+ this.showUrl = item.videoUrl
|
|
|
|
+ this.id = item.id
|
|
|
|
+ },
|
|
okEditShow(item, editStatus) {
|
|
okEditShow(item, editStatus) {
|
|
if (editStatus == '2') {
|
|
if (editStatus == '2') {
|
|
var params = {}
|
|
var params = {}
|
|
@@ -1026,6 +1145,27 @@ export default {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ handleOkPublich() {
|
|
|
|
+ console.log(this.checkArr)
|
|
|
|
+ this.form.validateFieldsAndScroll((err, values) => {
|
|
|
|
+ console.log(values)
|
|
|
|
+ if (!err) {
|
|
|
|
+ var params = {}
|
|
|
|
+ params.materialIds = this.checkArr
|
|
|
|
+ params.projectId = values.projectId
|
|
|
|
+ postAction('/ctop/materialInfo/batchEdit', params).then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.visiblePublish = false
|
|
|
|
+ } else {
|
|
|
|
+ that.$message.error(res.message)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ closePublish() {
|
|
|
|
+ this.visiblePublish = false
|
|
|
|
+ },
|
|
handleOk() {
|
|
handleOk() {
|
|
this.form.validateFieldsAndScroll((err, values) => {
|
|
this.form.validateFieldsAndScroll((err, values) => {
|
|
if (err) {
|
|
if (err) {
|
|
@@ -1094,14 +1234,30 @@ export default {
|
|
callbackTwo(key) {
|
|
callbackTwo(key) {
|
|
this.checkArr = []
|
|
this.checkArr = []
|
|
|
|
|
|
- this.queryParam.type = key
|
|
|
|
- this.loadData()
|
|
|
|
- if (key == 'VIDEO_HEAD') {
|
|
|
|
- this.checkArr[0] = this.joinVideo.head
|
|
|
|
- } else if (key == 'VIDEO_TAIL') {
|
|
|
|
- this.checkArr[0] = this.joinVideo.foot
|
|
|
|
- } else if (key == 'VIDEO_PART') {
|
|
|
|
- this.checkArr = this.joinVideo.content
|
|
|
|
|
|
+ // if (key == 'VIDEO_HEAD') {
|
|
|
|
+ // this.checkArr[0] = this.joinVideo.head
|
|
|
|
+ // } else if (key == 'VIDEO_TAIL') {
|
|
|
|
+ // this.checkArr[0] = this.joinVideo.foot
|
|
|
|
+ // } else if (key == 'VIDEO_PART') {
|
|
|
|
+ // this.checkArr = this.joinVideo.content
|
|
|
|
+ // } else
|
|
|
|
+ if (key == 'job') {
|
|
|
|
+ this.queryParam.type = ''
|
|
|
|
+ this.queryParam.jobId = ''
|
|
|
|
+ this.queryParam.status = ''
|
|
|
|
+ this.url.list = '/ctop/videoMergeTask/list'
|
|
|
|
+ this.loadData()
|
|
|
|
+ } else if (key == 'success') {
|
|
|
|
+ this.queryParam.type = ''
|
|
|
|
+ this.queryParam.status = 'TranscodeSuccess'
|
|
|
|
+ // this.queryParam.jobId = '8ed27f6a9e7b456db0dde2ac4081e6c9'
|
|
|
|
+ // this.url.list = '/ctop/videoPart/list'
|
|
|
|
+ this.url.list = '/ctop/videoMergeTask/list'
|
|
|
|
+ this.loadData()
|
|
|
|
+ } else {
|
|
|
|
+ this.url.list = '/ctop/materialInfo/list'
|
|
|
|
+ this.queryParam.type = key
|
|
|
|
+ this.loadData()
|
|
}
|
|
}
|
|
if (this.form.getFieldValue('projectId')) {
|
|
if (this.form.getFieldValue('projectId')) {
|
|
this.form.setFieldsValue({ projectId: '' })
|
|
this.form.setFieldsValue({ projectId: '' })
|