12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475 |
- <style>
- #material-card .ant-tabs-tab {
- border: 1px solid gainsboro !important;
- }
- #material-card .ant-tabs-top-bar {
- position: relative;
- z-index: 100;
- }
- #material-card .ant-badge-count {
- top: -10px;
- }
- .detail .ant-form-item {
- margin-bottom: 10px !important;
- }
- </style>
- <style lang="scss" scoped>
- @media (min-width: 1024px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(50% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- }
- }
- /*>=1024的设备*/
- // @media (min-width: 1100px) {
- // .checkbox_item_container {
- // width:70%
- // }
- // } /*>=1100的设备*/
- @media (min-width: 1280px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(25% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- }
- }
- /*>=1280的设备*/
- // @media (min-width: 1366px) {
- // }
- // @media (min-width: 1440px) {
- // }
- // @media (min-width: 1680px) {
- // }
- @media (min-width: 1920px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(25% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- cursor: pointer;
- }
- }
- .actor-photo-list {
- display: flex;
- padding-left: 0;
- li {
- width: 25%;
- margin: 10px;
- position: relative;
- height: 250px;
- border: 1px solid #f2f2f2;
- img,
- video {
- width: 100%;
- margin-top: auto;
- margin-bottom: auto;
- top: 0;
- bottom: 0;
- position: absolute;
- max-height: 250px;
- }
- }
- }
- .home-card {
- width: 100%;
- overflow: hidden;
- padding: 10px 0px;
- display: flex;
- flex-wrap: wrap;
- margin-right: -10px;
- .home-right {
- width: 100%;
- }
- .bg:after {
- content: '';
- width: 110%;
- height: 110%;
- position: absolute;
- left: -5%;
- top: -5%;
- background: inherit;
- filter: blur(10px);
- z-index: 2;
- }
- }
- .bh {
- height: 60px;
- line-height: 30px;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 2;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- }
- a {
- font-size: 14px;
- }
- .actor-photo-list {
- display: flex;
- padding-left: 0;
- li {
- width: 25%;
- margin: 10px;
- position: relative;
- height: 250px;
- border: 1px solid #f2f2f2;
- img,
- video {
- width: 100%;
- margin-top: auto;
- margin-bottom: auto;
- top: 0;
- bottom: 0;
- position: absolute;
- max-height: 250px;
- }
- }
- }
- </style>
- <template>
- <a-card :bordered="false">
- <!-- 查询区域 -->
- <div class="table-page-search-wrapper">
- <a-form layout="inline">
- <a-row :gutter="24">
- <a-col :md="6" :sm="8">
- <a-form-item label="选择项目">
- <a-select placeholder="请输入项目名称" v-model="queryParam.projectId" @change="getList">
- <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-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="时间选择">
- <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
- <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
- <a-button type="primary" @click="searchRe" icon="reload" style="margin-left: 8px">重置</a-button>
- </span>
- </a-col>
- </a-row>
- </a-form>
- </div>
- <!-- table区域-begin -->
- <!-- <div> -->
- <!-- 操作按钮区域 -->
- <div class="table-operator" style="position:relative;z-index:100">
- <a-button @click="dirVideoGet" type="primary" icon="plus">新增</a-button>
- <a-button @click="onCheckAllChange" v-if="active == 'VIDEO_PART'">{{
- checkAll ? '取消 ( ' + checkArr.length + ' )' : '全选'
- }}</a-button>
- </div>
- <!-- :show-upload-list="false" -->
- <!-- <a-upload name="file" :multiple="true" list-type="picture-card" class="avatar-uploader"
- action="https://media-1301855440.cos.ap-chongqing.myqcloud.com/" :before-upload="beforeUpload"
- @change="handleChange" accept='image/*' :file-list="fileList" :remove="removeFile" @preview="handlePreview">
- <div>
- <a-progress v-if='loadingElse' :percent="percent" :show-info="false" />
- <div class="ant-upload-text">
- Upload
- </div>
- </div>
- </a-upload> -->
- <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
- <img alt="example" style="width: 100%" :src="previewImage" />
- </a-modal>
- <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">
- <div v-if="item.value != 'join' && item.value != 'job' && item.value != 'success'">
- <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="showDetail(items)">
- <div class="home-right">
- <a-badge v-if="active == 'VIDEO_PART'"
- :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
- :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%">
- <span
- style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
- {{ items.materialName }}
- </span>
- </a-badge>
- <span v-else
- style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
- {{ items.materialName }}
- </span>
- <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
- <video :src="items.url" @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>
- <!-- <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div> -->
- <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
- {{ items.createTime | getDate }}
- <a-checkbox :value="items.id" 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>
- <div v-else-if="item.value == 'join'">
- <div style="margin-bottom:20px">
- <a-button @click="addMatemal" type="primary" icon="plus" style="margin-right:15px">新增一行</a-button>
- <a-button type="primary" @click="joinMatemal">开始拼接</a-button>
- </div>
- <a-table :columns="columns" :dataSource="dataList" :pagination="false">
- <span slot="action" slot-scope="text, record, index">
- <a @click="removeMatemal(index)">删除</a>
- </span>
- <span slot="VIDEO_HEAD" slot-scope="text, record, index">
- <div v-if="text != ''" style="position:relative">
- <video class="video" :src="text.url" controls="controls" style="height:160px">
- 您的浏览器不支持 video 标签。
- </video>
- <a-icon type="close-circle"
- style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
- @click="deteleVideo('VIDEO_HEAD', record)" />
- </div>
- <a-button @click="checkMatemal('VIDEO_HEAD', index, record)" type="primary" icon="plus" v-else>选择素材
- </a-button>
- </span>
- <span slot="VIDEO_PART" slot-scope="text, record, index">
- <div>
- <video class="video" :src="item.url" controls="controls" style="height:160px" v-for="item of text"
- :key="item.id" draggable="true" @dragstart="handleDragStart($event, item.code)"
- @dragover.prevent="handleDragOver($event, item.code)" @dragenter="handleDragEnter($event, item.code)"
- @dragend="handleDragEnd($event, item.code)">
- > 您的浏览器不支持 video 标签。
- </video>
- </div>
- <a-button @click="checkMatemal('VIDEO_PART', index, record)" type="primary" icon="plus">选择素材</a-button>
- </span>
- <span slot="VIDEO_TAIL" slot-scope="text, record, index">
- <div v-if="text != ''" style="position:relative">
- <video class="video" :src="text.url" controls="controls" style="height:160px">
- 您的浏览器不支持 video 标签。
- </video>
- <a-icon type="close-circle"
- style="position:absolute;top:-5px;right:30%;color:red;z-index:10;cursor: pointer;"
- @click="deteleVideo('VIDEO_TAIL', record)" />
- </div>
- <a-button @click="checkMatemal('VIDEO_TAIL', index, record)" type="primary" icon="plus" v-else>选择素材
- </a-button>
- </span>
- </a-table>
- </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-tabs>
- <a-modal title="添加素材" v-model="visible" @ok="handleOk" @cancel="close" :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-item :label-col="labelCol" :wrapper-col="wrapperCol" label="片段种类">
- <a-select v-decorator="[
- 'type', // 给表单赋值或拉取表单时,该input对应的key
- { rules: [{ required: true, message: '请选择片段种类!' }], initialValue: 'VIDEO_HEAD' }
- ]" @change="getDir">
- <a-select-option value="VIDEO_HEAD">片头</a-select-option>
- <a-select-option value="VIDEO_PART">片段</a-select-option>
- <a-select-option value="VIDEO_TAIL">片尾</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
- <uploadFile :value.sync="urlList.url" :fileCount="1" uploadType="video" :multiple="false" />
- <!-- <upload-to-ali :customDomain="customDomain" preview :region="region" :bucket="bucket" :accept="acceptVideo"
- :max="10" :size="1024000" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"
- :before-upload="file" :dir="dirVideo" @loaded="overUpload" v-decorator="[
- 'url', // 给表单赋值或拉取表单时,该input对应的key
- { rules: [{ required: true, message: '请上传图片!' }] }
- ]"></upload-to-ali> -->
- </a-form-item>
- <a-form-item :label-col="labelCol" :wrapper-col="{
- xs: { span: 24 },
- sm: { span: 18 }
- }" label="标签">
- <template v-for="(tag, index) in tags">
- <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
- <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
- {{ `${tag.slice(0, 20)}...` }}
- </a-tag>
- </a-tooltip>
- <a-tag v-else :key="tag" :closable="true" :afterClose="() => handleClose(tag)">
- {{ tag }}
- </a-tag>
- </template>
- <a-input v-if="inputVisible" ref="input" type="text" size="small" :style="{ width: '78px' }"
- :value="inputValue" @change="handleInputChange" @blur="handleInputConfirm"
- @keyup.enter="$event.target.blur" />
- <a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
- <a-icon type="plus" /> New Tag
- </a-tag>
- </a-form-item>
- <a-form-item :label-col="labelCol" :wrapper-col="{
- xs: { span: 24 },
- sm: { span: 18 }
- }" label="描述">
- <a-textarea placeholder="请输入描述" v-decorator="[
- 'materialDescribe' // 给表单赋值或拉取表单时,该input对应的key
- ]" :autosize="{ minRows: 3, maxRows: 10 }" />
- </a-form-item>
- </a-form>
- </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%">
- <div style="display:flex;height:700px">
- <div
- style="width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
- <video class="video" :src="showUrl" controls="controls" style="width:100%">
- 您的浏览器不支持 video 标签。
- </video>
- </div>
- <div style="flex:3;padding:10px;box-sizing:border-box;">
- <a-form v-if="detail" class="detail">
- <div v-if="detail.parameter">
- <a-form-item label="视频时长" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
- v-if="detail.parameter.second">
- {{ detail.parameter.second }}秒
- </a-form-item>
- <a-form-item label="尺寸" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
- v-if="detail.parameter.width">
- {{ detail.parameter.width }}*{{ detail.parameter.height }}
- </a-form-item>
- <a-form-item label="大小" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.parameter.size">
- {{ detail.parameter.size }}
- </a-form-item>
- </div>
- <a-form-item label="标签" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" v-if="detail.tag">
- <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
- </a-form-item>
- </a-form>
- </div>
- </div>
- </a-modal>
- <account-check ref="check" @synchro="implement"></account-check>
- <check-matemal ref="matemal" @showVideo="showVideoFun" />
- </a-card>
- </template>
- <script>
- import {
- JeecgListMixin
- } from '@/mixins/JeecgListMixin'
- import JEllipsis from '@/components/jeecg/JEllipsis'
- import UploadToAli from '@femessage/upload-to-ali'
- import uploadFile from '@/components/uploadFile.vue'
- import {
- fileCheck,
- fileInsert,
- fileEdit
- } from '@/api/actor'
- import {
- getAction,
- postAction,
- postFile
- } from '@/api/manage'
- import {
- stopOtherVideo,
- closeAllVideoFun
- } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- import {
- mapGetters
- } from 'vuex'
- import moment from 'moment'
- import BMF from 'browser-md5-file'
- import qs from 'qs'
- import accountCheck from './accountCheck'
- import checkMatemal from './checkMatemal'
- var COS = require('cos-js-sdk-v5');
- var cos = new COS({
- SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
- SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
- });
- var i = 0
- function getBase64(file) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = () => resolve(reader.result);
- reader.onerror = error => reject(error);
- });
- }
- export default {
- name: 'YardList',
- mixins: [JeecgListMixin],
- components: {
- JEllipsis,
- UploadToAli,
- accountCheck,
- checkMatemal,
- uploadFile
- },
- data() {
- return {
- fileList: [],
- dragging: null,
- dataKey: 0,
- columns: [{
- title: '片头',
- dataIndex: 'VIDEO_HEAD',
- scopedSlots: {
- customRender: 'VIDEO_HEAD'
- },
- align: 'center'
- },
- {
- title: '内容',
- dataIndex: 'VIDEO_PART',
- scopedSlots: {
- customRender: 'VIDEO_PART'
- },
- align: 'center'
- },
- {
- title: '片尾',
- dataIndex: 'VIDEO_TAIL',
- scopedSlots: {
- customRender: 'VIDEO_TAIL'
- },
- align: 'center'
- },
- {
- title: '操作',
- dataIndex: 'action',
- scopedSlots: {
- customRender: 'action'
- },
- 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: ''
- }],
- inputVisible: false,
- inputValue: '',
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 6
- }
- },
- wrapperCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 12
- }
- },
- noImgUrl: require('@/assets/img/noImg.png'),
- queryParam: {},
- dataElse: [],
- ascription: {
- clipId: [], //剪辑人id
- shotId: [], //拍摄人id
- planId: [], //策划id
- planeId: [] //平面id
- },
- show: true,
- visible: false,
- visibleDetail: false,
- visiblePublish: false,
- activeKey: 'video',
- active: 'VIDEO_HEAD',
- examinelList: [{
- value: 'VIDEO_HEAD',
- tab: '片头'
- },
- {
- value: 'VIDEO_PART',
- tab: '片段'
- },
- {
- value: 'VIDEO_TAIL',
- tab: '片尾'
- },
- {
- value: 'join',
- tab: '视频拼接'
- },
- {
- value: 'job',
- tab: '任务列表'
- },
- {
- value: 'success',
- tab: '成品'
- }
- ],
- // 表头
- urlList: {
- url: '',
- md5: '',
- name: ''
- },
- url: {
- list: '/ctop/materialInfo/list'
- },
- detail: false,
- form: this.$form.createForm(this),
- tags: [],
- refuseFile: [],
- refuseReason: '',
- creativeCopywriter: '',
- customDomain: '',
- region: 'oss-cn-beijing',
- bucket: 'ctop-part',
- acceptVideo: 'video/mpeg,video/mp4',
- acceptImage: 'image/jpeg,image/jpg,image/png',
- accessKeyId: 'LTAIbNbqWzSOklQV',
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
- checkArr: [],
- checkAll: false,
- showUrl: '',
- showUrlWater: '',
- materialDescribe: '',
- name: '',
- detail: null,
- add: true,
- id: '',
- role: {
- roleCode: '',
- roleName: ''
- },
- key: '0',
- mediaId: null,
- dirVideo: '',
- defaultDir: 'VIDEO_HEAD',
- joinVideo: {
- head: '',
- content: [],
- foot: ''
- },
- loadingElse: false,
- imageUrl: '',
- percent: 0,
- previewVisible: false,
- previewImage: '',
- }
- },
- filters: {
- getDate(value) {
- let date = new Date(value)
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return y + '-' + MM + '-' + d
- }
- },
- updated() {
- stopOtherVideo()
- },
- computed: {
- dirImg() {
- let date = new Date()
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return 'image/' + y + '-' + MM + '-' + d + '/'
- }
- },
- created() {
- this.queryParam.type = this.active
- this.queryParam.userId = this.userInfo().id
- this.ipagination.pageSize = 8
- this.getParticipateList()
- // /sys/user/getRoleInfo
- getAction('/sys/user/getRoleInfo', {
- userId: this.userInfo().id
- }).then(res => {
- this.role = res
- })
- },
- watch: {
- $route: function (n, o) {
- if (n.path == '/modules/material/materialList') {
- this.queryParam.userId = this.userInfo().id
- this.queryParam.type = this.active
- this.loadData()
- }
- }
- },
- methods: {
- handleCancel() {
- this.previewVisible = false;
- },
- handleChange(info) {
- if (info.file.status === 'uploading') {
- this.loading = true;
- return;
- }
- if (info.file.status === 'done') {
- // Get this url from response in real world.
- getBase64(info.file.originFileObj, imageUrl => {
- this.imageUrl = imageUrl;
- this.loading = false;
- });
- }
- },
- removeFile(file) {
- console.log(file)
- var index = this.fileList.findIndex(v => v.uid === file.uid)
- this.fileList.splice(index, 1)
- },
- async handlePreview(file) {
- if (!file.url && !file.preview) {
- file.preview = await getBase64(file.originFileObj);
- }
- this.previewImage = file.url || file.preview;
- this.previewVisible = true;
- },
- beforeUpload(file) {
- console.log(file)
- this.loadingElse = true
- var that = this
- let date = new Date()
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- return new Promise(function (resolve, reject) {
- cos.putObject({
- Bucket: 'media-1301855440',
- /* 必须 */
- Region: 'ap-chongqing',
- /* 存储桶所在地域,必须字段 */
- Key: 'image/' + y + '-' + MM + '-' + d + '/' + file.name,
- /* 必须 */
- StorageClass: 'STANDARD',
- Body: file, // 上传文件对象
- onProgress: function (progressData) {
- console.log(typeof JSON.stringify(progressData));
- console.log(progressData.percent);
- that.percent = (progressData.percent * 100)
- },
- onTaskReady: function (tid) {
- console.log('onTaskReady', tid);
- },
- onTaskStart: function (info) {
- console.log('onTaskStart', info);
- },
- }, function (err, data) {
- if (err) {
- console.log(err);
- return;
- }
- console.log('成功', data)
- // alert('成功')
- that.loadingElse = false
- that.fileList.push({
- uid: i++,
- name: file.name,
- status: 'done',
- url: 'http://' + data.Location,
- })
- });
- })
- reject()
- },
- startConcat() {
- console.log(this.dataList)
- },
- handleDragStart(e, item) {
- this.dragging = item
- },
- handleDragEnd(e, item) {
- this.dragging = null
- },
- //首先把div变成可以放置的元素,即重写dragenter/dragover
- handleDragOver(e) {
- e.dataTransfer.dropEffect = 'move' // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
- },
- handleDragEnter(e, item) {
- e.dataTransfer.effectAllowed = 'move' //为需要移动的元素设置dragstart事件
- if (item === this.dragging) {
- return
- }
- console.log(this.dataKey)
- const newItems = [...this.dataList[this.dataKey].VIDEO_PART]
- console.log(newItems)
- const src = newItems.indexOf(this.dragging)
- const dst = newItems.indexOf(item)
- newItems.splice(dst, 0, ...newItems.splice(src, 1))
- this.dataList[this.dataKey].VIDEO_PART = newItems
- },
- checkMatemal(type, number, item) {
- this.$refs.matemal.showCheck(type, number, item)
- },
- addMatemal() {
- var num = this.dataList.length + 1
- this.dataList.push({
- key: num,
- VIDEO_HEAD: '',
- VIDEO_PART: [],
- VIDEO_TAIL: ''
- })
- },
- removeMatemal(index) {
- this.dataList.splice(index, 1)
- },
- deteleVideo(type, item) {
- item[type] = ''
- },
- moment,
- a(item) {
- item.showVideo = true
- },
- getDir(value) {
- this.defaultDir = value
- this.setDir()
- },
- joinMatemal() {
- console.log(this.dataList)
- var data = this.dataList.filter(item => {
- return item.VIDEO_PART.length > 0
- })
- console.log(data)
- if (data.length > 0) {
- // {"startPart":"","endPart":"","parts":["",""]}
- var params = this.dataList.map(item => {
- return {
- startPart: item.VIDEO_HEAD.id,
- parts: item.VIDEO_PART.map(item => {
- return item.id
- }),
- endPart: item.VIDEO_TAIL.id
- }
- })
- // var paramsString = qs.stringify({ videoMergeList: params })
- postAction('/ctop/materialpart/merge', params).then(res => {
- console.log(res)
- if (res.success) {
- that.$message.error(res.message)
- this.dataList = []
- }
- })
- } else {
- that.$message.error('还未选择素材片段')
- }
- },
- dirVideoGet() {
- this.visible = true
- console.log(this.defaultDir)
- this.setDir()
- },
- dirVideoGetPublish() {
- if (this.checkArr.length > 0) {
- this.visiblePublish = true
- } else {
- this.$message.error('请选择需要发布的视频')
- }
- },
- setDir() {
- let date = new Date()
- let y = date.getFullYear()
- let MM = date.getMonth() + 1
- MM = MM < 10 ? '0' + MM : MM
- let d = date.getDate()
- d = d < 10 ? '0' + d : d
- this.dirVideo = 'input/' + this.defaultDir + '/' + y + '-' + MM + '-' + d + '/'
- },
- tongbu() {
- this.$refs.check.getData('/ctop/userAllocation/getAccountList', {
- userId: this.userInfo().id,
- projectId: this.queryParam.projectId
- })
- },
- implement(data) {
- var params = {}
- params.mediaId = this.mediaId
- params.materialArray = JSON.stringify(this.checkArr)
- params.accountArray = JSON.stringify(data)
- postAction('/ctop/materialUpload/uploadAccount', params).then(res => {
- if (res.code == 0) {
- this.checkArr = []
- this.checkAll = false
- }
- })
- },
- showVideoFun(data, typeName) {
- console.log(data)
- if (typeName == 'VIDEO_HEAD') {
- //片头
- this.dataList[data.key].VIDEO_HEAD = data.head
- } else if (typeName == 'VIDEO_TAIL') {
- this.dataList[data.key].VIDEO_TAIL = data.foot
- } else {
- this.dataList[data.key].VIDEO_PART = data.content
- this.dataKey = data.key
- }
- },
- downloadByBlob() {
- fetch(this.showUrlWater)
- .then(res => res.blob())
- .then(blob => {
- const a = document.createElement('a')
- document.body.appendChild(a)
- a.style.display = 'none'
- // 使用获取到的blob对象创建的url
- const url = window.URL.createObjectURL(blob)
- a.href = url
- // 指定下载的文件名
- a.download = this.name
- a.click()
- document.body.removeChild(a)
- // 移除blob对象的url
- window.URL.revokeObjectURL(url)
- })
- },
- download(href, name) {
- let eleLink = document.createElement('a')
- eleLink.download = name
- eleLink.href = href
- eleLink.click()
- eleLink.remove()
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- onCheckAllChange() {
- if (this.checkAll) {
- this.checkArr = []
- } else {
- this.checkArr = this.dataSource.map(item => {
- return item.id
- })
- }
- this.checkAll = !this.checkAll
- this.onChangeCheck(this.checkArr)
- },
- searchRe() {
- this.queryParam = {
- projectId: '',
- createTime: ''
- }
- this.loadData()
- },
- getList(value) {
- this.mediaId = this.dataElse.filter(item => {
- if (value == item.projectId) {
- return item
- }
- })[0].mediaId
- this.loadData()
- },
- onChangeCheck(checkedList) {
- // { value: 'VIDEO_HEAD', tab: '片头' },
- // { value: 'VIDEO_PART', tab: '片段' },
- // { value: 'VIDEO_TAIL', tab: '片尾' }
- if (this.active == 'VIDEO_HEAD') {
- //片头
- if (this.checkArr.length > 1) {
- this.checkArr.shift()
- this.joinVideo.head = checkedList[0]
- } else if (this.checkArr.length == 1) {
- this.joinVideo.head = checkedList[0]
- } else if (this.checkArr.length == 0) {
- this.joinVideo.head = ''
- }
- } else if (this.active == 'VIDEO_TAIL') {
- //片尾
- if (this.checkArr.length > 1) {
- this.checkArr.shift()
- this.joinVideo.foot = checkedList[0]
- } else if (this.checkArr.length == 1) {
- this.joinVideo.foot = checkedList[0]
- } else if (this.checkArr.length == 0) {
- this.joinVideo.foot = ''
- }
- } else {
- //内容
- if (checkedList.length == 0) {
- this.checkAll = false
- }
- this.joinVideo.content = checkedList
- }
- },
- handleClose(removedTag) {
- const tags = this.tags.filter(tag => tag !== removedTag)
- this.tags = tags
- },
- showInput() {
- this.inputVisible = true
- this.$nextTick(function () {
- this.$refs.input.focus()
- })
- },
- handleInputChange(e) {
- this.inputValue = e.target.value
- },
- handleInputConfirm() {
- const inputValue = this.inputValue
- let tags = this.tags
- if (inputValue && tags.indexOf(inputValue) === -1) {
- tags = [...tags, inputValue]
- }
- Object.assign(this, {
- tags,
- inputVisible: false,
- inputValue: ''
- })
- },
- showDetail(item) {
- this.visibleDetail = true
- this.showUrl = item.url
- this.showUrlWater = item.watermarkUrl ? item.watermarkUrl : null
- this.name = item.watermarkMaterialName ? item.watermarkMaterialName : null
- this.id = item.id
- if (this.active == '2') {
- this.refuseReason = item.refuseReason
- this.refuseFile = item.refuseFile ? JSON.parse(item.refuseFile) : null
- } else if (this.active == '1') {
- this.creativeCopywriter = item.creativeCopywriter
- this.refuseReason = ''
- this.refuseFile = []
- } else {
- this.refuseReason = ''
- this.refuseFile = []
- }
- getAction('/ctop/materialInfo/getDetail', {
- materialId: item.id
- }).then(res => {
- this.detail = res
- })
- },
- showDetailElse(item) {
- this.visibleDetail = true
- this.showUrl = item.videoUrl
- this.id = item.id
- getAction('/ctop/materialInfo/getDetail', {
- materialId: item.videoId
- }).then(res => {
- this.detail = res
- })
- },
- okEditShow(item, editStatus) {
- if (editStatus == '2') {
- var params = {}
- params.id = item.id
- params.auditorId = this.userInfo().id
- params.refuseReason = this.refuseReason
- var data = this.refuseFile.map(item => {
- return 'https:' + item
- })
- params.refuseFile = JSON.stringify(data)
- params.status = editStatus
- fileEdit(params).then(res => {
- this.refuseFile = []
- this.refuseReason = ''
- this.loadData()
- })
- } else if (editStatus == '1') {
- var params = {}
- params.id = item.id
- params.auditorId = this.userInfo().id
- params.creativeCopywriter = this.refuseReason
- params.status = editStatus
- fileEdit(params).then(res => {
- this.refuseReason = ''
- this.loadData()
- })
- }
- },
- okEdit(e) {
- this.edit(null, this.active, '2')
- },
- edit(item, status, editStatus) {
- if (status == '0' || status == '1') {
- if (editStatus == '2') {
- var params = {}
- params.id = this.id
- params.auditorId = this.userInfo().id
- params.refuseReason = this.refuseReason
- var data = this.refuseFile.map(item => {
- return 'https:' + item
- })
- params.refuseFile = JSON.stringify(data)
- params.status = editStatus
- fileEdit(params).then(res => {
- this.refuseFile = []
- this.refuseReason = ''
- this.loadData()
- this.visibleDetail = false
- })
- } else {
- fileEdit({
- id: this.id,
- status: editStatus,
- auditorId: this.userInfo().id
- }).then(res => {
- this.refuseFile = []
- this.refuseReason = ''
- this.loadData()
- this.visibleDetail = false
- })
- }
- } else {
- this.add = false
- this.visible = true
- this.getProjectId(item.projectId)
- getAction('/ctop/materialInfo/getDetail', {
- materialId: item.id
- }).then(res => {
- if (this.activeKey == 'image') {
- this.form.setFieldsValue({
- projectId: item.projectId,
- clipId: res.ascription.clipId,
- planeId: res.ascription.planeId,
- materialDescribe: item.materialDescribe
- })
- } else {
- this.form.setFieldsValue({
- projectId: item.projectId,
- clipId: res.ascription.clipId,
- planId: res.ascription.planId,
- shotId: res.ascription.shotId,
- materialDescribe: item.materialDescribe
- })
- }
- this.tags = res.tag
- this.urlList.url = item.url
- this.urlList.md5 = item.code
- this.urlList.name = item.materialName
- this.watermarkUrl.url = item.watermarkUrl
- this.watermarkUrl.md5 = item.watermarkCode
- this.watermarkUrl.name = item.watermarkMaterialName
- this.id = item.id
- })
- }
- },
- 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() {
- this.form.validateFieldsAndScroll((err, values) => {
- if (err) {
- // 这里做逻辑处理
- } else {
- var params = {}
- var roleCode = {}
- for (const key in this.role) {
- if (key == 'roleCode') {
- this.role[key] = this.role[key] + 'Id'
- roleCode[this.role[key]] = this.userInfo().id
- }
- }
- params.id = this.add ? null : this.id
- params.code = this.urlList.md5
- params.url = this.urlList.url
- params.materialName = this.urlList.name
- params.userId = this.userInfo().id
- params.projectId = values.projectId
- params.materialDescribe = values.materialDescribe
- params.ascription = roleCode
- params.type = values.type
- params.tag = this.tags
- if (this.add) {
- fileInsert(params).then(res => {
- this.form.resetFields()
- this.urlList = {
- url: '',
- md5: '',
- name: ''
- }
- this.watermarkUrl = {
- url: '',
- md5: '',
- name: ''
- }
- this.tags = []
- this.loadData()
- this.visible = false
- this.add = true
- for (const key in this.role) {
- if (key == 'roleCode') {
- this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
- }
- }
- })
- } else {
- fileEdit({
- ...params,
- status: '0'
- }).then(res => {
- this.form.resetFields()
- this.urlList = {
- url: '',
- md5: '',
- name: ''
- }
- this.watermarkUrl = {
- url: '',
- md5: '',
- name: ''
- }
- this.tags = []
- this.loadData()
- this.visible = false
- this.add = true
- for (const key in this.role) {
- if (key == 'roleCode') {
- this.role[key] = this.role[key].substr(0, this.role[key].length - 2)
- }
- }
- })
- }
- }
- })
- },
- close() {
- var that = this
- that.form.resetFields()
- that.urlList = {
- url: '',
- md5: '',
- name: ''
- }
- that.watermarkUrl = {
- url: '',
- md5: '',
- name: ''
- }
- that.tags = []
- },
- onChange(date, dateString) {},
- callbackTwo(key) {
- this.checkArr = []
- // 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.status = ''
- this.queryParam.type = key
- this.loadData()
- }
- if (this.form.getFieldValue('projectId')) {
- this.form.setFieldsValue({
- projectId: ''
- })
- }
- },
- overUpload(urlAll) {
- console.log(urlAll)
- this.form.setFieldsValue({
- url: urlAll
- })
- },
- file(file) {
- var bmf = new BMF()
- var that = this
- return new Promise(function (resolve, reject) {
- bmf.md5(file[0], (err, md5) => {
- that.urlList.name = file[0].name
- that.urlList.md5 = md5
- fileCheck({
- code: md5
- }).then(res => {
- if (res.code == 0) {
- that.$message.error('此素材已经上传')
- reject()
- } else {
- resolve()
- // reject()
- }
- })
- })
- })
- },
- fileWater(file) {
- var bmf = new BMF()
- var that = this
- return new Promise(function (resolve, reject) {
- bmf.md5(file[0], (err, md5) => {
- that.watermarkUrl.name = file[0].name
- that.watermarkUrl.md5 = md5
- fileCheck({
- code: md5
- }).then(res => {
- if (res.code == 0) {
- that.$message.error('此素材已经上传')
- reject()
- } else {
- resolve()
- }
- })
- })
- })
- },
- getParticipateList() {
- getAction('/ctop/projectMember/participateList', {
- userId: this.userInfo().id
- }).then(res => {
- if (res.code == 0) {
- this.dataElse = res.result
- }
- })
- },
- getProjectId(items) {
- getAction('/ctop/projectMember/getMemberList', {
- projectId: items
- }).then(res => {
- if (res.code == 0) {
- this.ascription.clipId = res.result.filter(item => {
- if (item.roleCode == 'clip') {
- return {
- userId: item.userId,
- userName: item.userName
- }
- }
- })
- this.ascription.shotId = res.result.filter(item => {
- if (item.roleCode == 'shot') {
- return {
- userId: item.userId,
- userName: item.userName
- }
- }
- })
- this.ascription.planId = res.result.filter(item => {
- if (item.roleCode == 'plan') {
- return {
- userId: item.userId,
- userName: item.userName
- }
- }
- })
- this.ascription.planeId = res.result.filter(item => {
- if (item.roleCode == 'plane') {
- return {
- userId: item.userId,
- userName: item.userName
- }
- }
- })
- }
- })
- },
- getDataSource(page, pageSize) {
- this.ipagination.current = page
- this.checkArr = []
- this.checkAll = false
- this.loadData()
- }
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|