1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348 |
- <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-input placeholder="请输入创建者名称" v-model="queryParam.advertiserId"></a-input>
- </a-form-item>
- </a-col> -->
- <!-- <a-col :md="6" :sm="8">
- <a-form-item label="剪辑">
- <a-input placeholder="请输入剪辑者名称" v-model="queryParam.advertiserId"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="编导">
- <a-input placeholder="请输入编导" v-model="queryParam.responsible"></a-input>
- </a-form-item>
- </a-col>
- <a-col :md="6" :sm="8">
- <a-form-item label="拍摄">
- <a-input placeholder="请输入拍摄" v-model="queryParam.responsible"></a-input>
- </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>
- <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="视频素材上传">
- <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 { 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'
- export default {
- name: 'YardList',
- mixins: [JeecgListMixin],
- components: {
- JEllipsis,
- UploadToAli,
- accountCheck,
- checkMatemal
- },
- data() {
- return {
- 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: ''
- }
- }
- },
- 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: {
- 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 = values.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>
|