|
@@ -0,0 +1,959 @@
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .downLoad .ant-form-item-control-wrapper {
|
|
|
|
+ width: 70%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ #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: 0px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .detail .ant-form-item {
|
|
|
|
+ margin-bottom: 10px !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-carousel>>>.slick-slide {
|
|
|
|
+ text-align: center;
|
|
|
|
+ // height: 160px;
|
|
|
|
+ // line-height: 160px;
|
|
|
|
+ background: #364d79;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ad_cover_container .ant-card-body {
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-carousel>>>.slick-slide h3 {
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-carousel>>>.custom-slick-arrow {
|
|
|
|
+ width: 25px;
|
|
|
|
+ height: 25px;
|
|
|
|
+ font-size: 25px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background-color: rgba(31, 45, 61, 0.11);
|
|
|
|
+ opacity: 0.3;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-carousel>>>.custom-slick-arrow:before {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .ant-carousel>>>.custom-slick-arrow:hover {
|
|
|
|
+ opacity: 0.5;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .cover_carousel_con .slick-dots {
|
|
|
|
+ bottom: 55px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .add-image-material .draggable-list {
|
|
|
|
+ display: block !important;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ li.chouzhen.first:before {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ content: "首帧";
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 7px;
|
|
|
|
+ left: 5px;
|
|
|
|
+ width: 36px;
|
|
|
|
+ height: 20px;
|
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ }
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+ .chouzhen {
|
|
|
|
+ border-style: solid;
|
|
|
|
+ border-width: 1px;
|
|
|
|
+ border-color: #e4e4e4;
|
|
|
|
+ width: calc(20% - 10px);
|
|
|
|
+ padding: 10px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ background: #fff;
|
|
|
|
+ position: relative;
|
|
|
|
+ z-index: 99;
|
|
|
|
+ float: left
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .content {
|
|
|
|
+ display: flex !important;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .slick-dots {
|
|
|
|
+ bottom: 55px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .video-content {
|
|
|
|
+ width: 50%;
|
|
|
|
+ padding: 10px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ border-right: 1px solid #f2f2f2;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .tag-video {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0px;
|
|
|
|
+ top: 8px;
|
|
|
|
+ padding: 4px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #fff;
|
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-item {
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ @media only screen and (min-width: 1200px) {
|
|
|
|
+ .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 only screen and (min-width: 1250px) {
|
|
|
|
+ .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;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bhShow {
|
|
|
|
+ height: 100px;
|
|
|
|
+ line-height: 25px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .bhShow span {
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .show-data {
|
|
|
|
+ width: 50%;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: flex-start;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 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;
|
|
|
|
+ list-style: none;
|
|
|
|
+
|
|
|
|
+ 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="8" :sm="8">
|
|
|
|
+ <!-- <a-form-item label="项目名称"> -->
|
|
|
|
+ <selectTable :projectId.sync="queryParam.projectId"></selectTable>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
+ <a-form-item label="素材名称">
|
|
|
|
+ <a-input placeholder="请输入素材名称" v-model="queryParam.materialName"></a-input>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <!-- -->
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
+ <a-form-item label="时间选择">
|
|
|
|
+ <a-date-picker v-model="queryParam.createTime" format="YYYY-MM-DD" style="width:100%" />
|
|
|
|
+ <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :md="8" :sm="8">
|
|
|
|
+ <a-form-item label="供应商选择">
|
|
|
|
+ <a-select v-model="queryParam.supplierCode">
|
|
|
|
+ <a-select-option value="kuaishou_001">汇创</a-select-option>
|
|
|
|
+ <a-select-option value="kuaishou_002">鸣闻</a-select-option>
|
|
|
|
+ <a-select-option value="kuaishou_003">优效</a-select-option>
|
|
|
|
+ </a-select>
|
|
|
|
+ <!-- <a-input placeholder="请输入查询时间" v-model="queryParam.createTime"></a-input> -->
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </a-col>
|
|
|
|
+ <a-col :md="8" :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> -->
|
|
|
|
+
|
|
|
|
+ <!-- 操作按钮区域 -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <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="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)">
|
|
|
|
+ <span v-if="items.excellent == 0"></span>
|
|
|
|
+ <span v-else
|
|
|
|
+ style="position:absolute;top:30px;right:-105px;display:block;width:300px;height:30px;text-align:center;line-height;30px;background:red;transform:rotate(45deg);z-index:1000">优秀素材</span>
|
|
|
|
+ <div class="home-right">
|
|
|
|
+ <a-badge :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
|
|
|
|
+ :numberStyle="{ backgroundColor: '#52c41a' }" style="width:100%;display:flex" @click.stop>
|
|
|
|
+ <span
|
|
|
|
+ style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
|
|
|
+ :title="items.projectName">
|
|
|
|
+ {{ items.projectName }}
|
|
|
|
+ </span>
|
|
|
|
+ <span
|
|
|
|
+ style="color: #999; fontSize: 14px;padding-bottom:10px;display:inline-block;width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
|
|
|
|
+ :title="items.materialName">
|
|
|
|
+ {{items.materialName}}
|
|
|
|
+ </span>
|
|
|
|
+ </a-badge>
|
|
|
|
+ <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative;">
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <img :src="items.coverUrl" alt="" style="height:200px;max-width:100%;position:absolute;z-index:10;" />
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width:100%;height:1px;border-bottom:1px solid #f2f2f2;margin-top:5px"></div>
|
|
|
|
+ <span
|
|
|
|
+ style="color: black; fontSize: 16px;padding-top:10px;display:flex;width:100%;justify-content: space-between;"
|
|
|
|
+ @click.stop>
|
|
|
|
+ <span>{{ items.createTime | getDate }}</span>
|
|
|
|
+ <span>{{items.supplierCode|supplierName}}</span>
|
|
|
|
+
|
|
|
|
+ </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="" v-if="!loading" />
|
|
|
|
+ <img v-else src="./loading.gif" />
|
|
|
|
+ </div>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <a-modal title="素材详情" v-model="visibleDetail" width="70%" :footer="null">
|
|
|
|
+ <div style="display:flex;height:700px">
|
|
|
|
+ <div class="video-content"
|
|
|
|
+ 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="height:50%" controlsList="nodownload">
|
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
|
+ </video>
|
|
|
|
+ <div class="downLoad" style="height:50%;overflow:auto">
|
|
|
|
+ <ul class="actor-photo-list" :style="{ width: model.length>4?25 * model.length + '%':'100%' }"
|
|
|
|
+ v-if="model.length > 0">
|
|
|
|
+ <a-checkbox-group v-model="checkArrImage" style="width:100%; display: flex;padding-left: 0;"
|
|
|
|
+ @change="onChangeCheckImage">
|
|
|
|
+ <li v-for="(item, index) of model" :key="index">
|
|
|
|
+ <a-checkbox :value="item.id" style="position:absolute;z-index: 100"></a-checkbox><img class="video"
|
|
|
|
+ :src="item.url" @click="coverPreviewShowModal(item, index)" />
|
|
|
|
+ <span class="tag-video" :style="{
|
|
|
|
+ backgroundColor:
|
|
|
|
+ item.status == 0 ? 'rgba(0, 0, 0)' : item.status == 1 ? 'rgba(0, 180, 100)' : 'red'
|
|
|
|
+ }">{{ item.status == 0 ? '未审核' : item.status == 1 ? '已批准' : '已驳回' }}</span>
|
|
|
|
+ </li>
|
|
|
|
+ </a-checkbox-group>
|
|
|
|
+ </ul>
|
|
|
|
+ <div v-else style="height:100%;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>
|
|
|
|
+ <a-modal title="图片预览" v-model="coverPreviewVisible" :footer="null">
|
|
|
|
+ <a-carousel arrows class="cover_carousel_con">
|
|
|
|
+ <div v-for="(item, index) in modelNew" :key="index" class="content">
|
|
|
|
+ <img :src="item.url" :width="300" />
|
|
|
|
+ </div>
|
|
|
|
+ <a-icon type="left-circle" slot="prevArrow" slot-scope
|
|
|
|
+ style="left: 10px;zIndex: 9;font-size:30px;color:black" />
|
|
|
|
+ <a-icon type="right-circle" slot="nextArrow" slot-scope
|
|
|
|
+ style="right: 10px;zIndex: 9;font-size:30px;color:black" />
|
|
|
|
+ </a-carousel>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <div style="flex:3;padding:10px;box-sizing:border-box;">
|
|
|
|
+ <a-form v-if="detail" class="detail ant-advanced-search-form" layout="inline">
|
|
|
|
+ <div v-if="detail.parameter" style="display:flex;">
|
|
|
|
+ <a-form-item label="视频时长" v-if="detail.parameter.second" style="flex:1">
|
|
|
|
+ {{ detail.parameter.second }}秒
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="尺寸" style="flex:1" v-if="detail.parameter.width">
|
|
|
|
+ {{ detail.parameter.width }}*{{ detail.parameter.height }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="大小" style="flex:1" v-if="detail.parameter.size">
|
|
|
|
+ {{ detail.parameter.size }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div v-if="detail.ascription" style="display:flex;">
|
|
|
|
+ <a-form-item label="策划" style="flex:1">
|
|
|
|
+ {{ detail.ascription.planName }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="拍摄" style="flex:1">
|
|
|
|
+ {{ detail.ascription.shotName }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ <a-form-item label="剪辑" v-if="detail.ascription.clipName" style="flex:1">
|
|
|
|
+ {{ detail.ascription.clipName }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="水印链接" v-if="watermarkUrl">
|
|
|
|
+ <a-input v-model="watermarkUrl" type="text" style="width:200%" readonly />
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="标签" v-if="detail.tag">
|
|
|
|
+ <a-tag v-for="(item, index) of detail.tag" :key="index">{{ item }}</a-tag>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="审核人" v-if="active == '2' && detail.auditorName">
|
|
|
|
+ {{ detail.auditorName }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="广告语" v-if="active == '1'">
|
|
|
|
+ {{ creativeCopywriter ? creativeCopywriter : '无广告语' }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="驳回原因" v-if="active == '2'">
|
|
|
|
+ {{ refuseReason ? refuseReason : '无原因' }}
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <a-form-item label="截图" v-if="active == '2'">
|
|
|
|
+ <div v-if="refuseFile" style="width:100%">
|
|
|
|
+ <img style="width:100px;height:auto;margin:5px" @click="showBoHui(item)" :src="item"
|
|
|
|
+ v-for="(item,index) in refuseFile" :key="index" alt="">
|
|
|
|
+ </div>
|
|
|
|
+ <div v-else>无截图</div>
|
|
|
|
+ </a-form-item>
|
|
|
|
+ </div>
|
|
|
|
+ </a-form>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <a-modal title="查看截图" v-model="bohuiShow" :width="300" :footer="null">
|
|
|
|
+ <img :src="bohui" alt="" style="width:100%">
|
|
|
|
+ </a-modal>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </a-card>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import {
|
|
|
|
+ JeecgListMixin
|
|
|
|
+ } from '@/mixins/JeecgListMixin'
|
|
|
|
+ import JEllipsis from '@/components/jeecg/JEllipsis'
|
|
|
|
+ import UploadToAli from '@femessage/upload-to-ali'
|
|
|
|
+ import {
|
|
|
|
+ fileCheck,
|
|
|
|
+ fileInsertV2,
|
|
|
|
+ fileEdit,
|
|
|
|
+ fileCheckImage,
|
|
|
|
+ fileEditAll
|
|
|
|
+ } from '@/api/actor'
|
|
|
|
+ import {
|
|
|
|
+ getAction,
|
|
|
|
+ postAction,
|
|
|
|
+ postFile,
|
|
|
|
+ deleteAction,
|
|
|
|
+ putAction
|
|
|
|
+ } from '@/api/manage'
|
|
|
|
+ import qs from 'qs'
|
|
|
|
+ import {
|
|
|
|
+ mapGetters
|
|
|
|
+ } from 'vuex'
|
|
|
|
+ import moment from 'moment'
|
|
|
|
+
|
|
|
|
+ import selectTable from '@/views/modules/Statistics/components/selecTable.vue'
|
|
|
|
+
|
|
|
|
+ import BMF from 'browser-md5-file'
|
|
|
|
+ import uploadFile from '@/components/uploadFile.vue'
|
|
|
|
+ import {
|
|
|
|
+ stopOtherVideo,
|
|
|
|
+ closeAllVideoFun
|
|
|
|
+ } from '@/utils/videoControl'
|
|
|
|
+ import accountCheck from './accountCheck'
|
|
|
|
+ export default {
|
|
|
|
+ name: 'YardList',
|
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
|
+ components: {
|
|
|
|
+ JEllipsis,
|
|
|
|
+ UploadToAli,
|
|
|
|
+ accountCheck,
|
|
|
|
+ selectTable,
|
|
|
|
+ uploadFile
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ coverPreviewVisible: false,
|
|
|
|
+ chouzhen: false,
|
|
|
|
+ chouzhenList: [],
|
|
|
|
+ model: [],
|
|
|
|
+ modelNew: [],
|
|
|
|
+ goodsColumns: [{
|
|
|
|
+ title: '封面预览',
|
|
|
|
+ // dataIndex: 'coverUrl',
|
|
|
|
+ // key: 'coverUrl',
|
|
|
|
+ dataIndex: 'url',
|
|
|
|
+ align: 'center',
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'url'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '审核',
|
|
|
|
+ align: 'center',
|
|
|
|
+ dataIndex: 'action',
|
|
|
|
+ width: 100,
|
|
|
|
+ scopedSlots: {
|
|
|
|
+ customRender: 'action'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ addImageVisible: false,
|
|
|
|
+ addImageData: null,
|
|
|
|
+ projectId: '',
|
|
|
|
+ inputVisible: false,
|
|
|
|
+ inputValue: '',
|
|
|
|
+ labelCol: {
|
|
|
|
+ xs: {
|
|
|
|
+ span: 24
|
|
|
|
+ },
|
|
|
|
+ sm: {
|
|
|
|
+ span: 5
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ xs: {
|
|
|
|
+ span: 24
|
|
|
|
+ },
|
|
|
|
+ sm: {
|
|
|
|
+ span: 12
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ queryParam: {},
|
|
|
|
+ dataElse: [],
|
|
|
|
+ ascription: {
|
|
|
|
+ clipId: [], //剪辑人id
|
|
|
|
+ shotId: [], //拍摄人id
|
|
|
|
+ planId: [], //策划id
|
|
|
|
+ planeId: [] //平面id
|
|
|
|
+ },
|
|
|
|
+ show: true,
|
|
|
|
+ visible: false,
|
|
|
|
+ visibleDetail: false,
|
|
|
|
+ personVisible: false,
|
|
|
|
+ confirmLoading: false,
|
|
|
|
+ loading: false,
|
|
|
|
+ loadingImage: false,
|
|
|
|
+ loadingPerson: false,
|
|
|
|
+ activeKey: 'video',
|
|
|
|
+ active: '0',
|
|
|
|
+ examinelList: [{
|
|
|
|
+ value: '0',
|
|
|
|
+ tab: '未审核'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '1',
|
|
|
|
+ tab: '已批准'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ value: '2',
|
|
|
|
+ tab: '已驳回'
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ // 表头
|
|
|
|
+ columns: [],
|
|
|
|
+ urlList: {
|
|
|
|
+ url: '',
|
|
|
|
+ md5: '',
|
|
|
|
+ name: ''
|
|
|
|
+ },
|
|
|
|
+ urlListImage: {
|
|
|
|
+ url: [],
|
|
|
|
+ md5: [],
|
|
|
|
+ name: [],
|
|
|
|
+ size: []
|
|
|
|
+ },
|
|
|
|
+ watermarkUrl: "",
|
|
|
|
+ url: {
|
|
|
|
+ list: '/ctop/materialInfo/supplierList'
|
|
|
|
+ },
|
|
|
|
+ detail: false,
|
|
|
|
+ form: this.$form.createForm(this),
|
|
|
|
+ formPerson: this.$form.createForm(this),
|
|
|
|
+ tags: [],
|
|
|
|
+ refuseFile: [],
|
|
|
|
+ refuseReason: '',
|
|
|
|
+ refuseReasonImage: '',
|
|
|
|
+ creativeCopywriter: '',
|
|
|
|
+ customDomain: '',
|
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
|
+ bucket: 'ctop-media',
|
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
|
+ acceptImage: 'image/jpeg,image/jpg,image/png',
|
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
|
+ checkArr: [],
|
|
|
|
+ checkAll: false,
|
|
|
|
+ checkArrImage: [],
|
|
|
|
+ checkAllImage: false,
|
|
|
|
+ showUrl: '',
|
|
|
|
+ showUrlWater: '',
|
|
|
|
+ materialName: '',
|
|
|
|
+ materialDescribe: '',
|
|
|
|
+ name: '',
|
|
|
|
+ detail: null,
|
|
|
|
+ add: true,
|
|
|
|
+ id: '',
|
|
|
|
+ role: {
|
|
|
|
+ roleCode: '',
|
|
|
|
+ roleName: ''
|
|
|
|
+ },
|
|
|
|
+ key: '0',
|
|
|
|
+ mediaId: null,
|
|
|
|
+ sizeType: [],
|
|
|
|
+ size: null,
|
|
|
|
+ repeat: false,
|
|
|
|
+ excellent: 0,
|
|
|
|
+ code: '',
|
|
|
|
+ material: [],
|
|
|
|
+ imageArrList: [],
|
|
|
|
+ showDataBool: false,
|
|
|
|
+ kuaishouData: null,
|
|
|
|
+ douyinData: null,
|
|
|
|
+ bohui: "",
|
|
|
|
+ bohuiShow: false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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
|
|
|
|
+ },
|
|
|
|
+ supplierName(value) {
|
|
|
|
+ var data = {
|
|
|
|
+ 'kuaishou_001': "汇创",
|
|
|
|
+ "kuaishou_002": "鸣闻",
|
|
|
|
+ "kuaishou_003": "优效"
|
|
|
|
+ }
|
|
|
|
+ return data[value]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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 + '/'
|
|
|
|
+ },
|
|
|
|
+ dirVideo() {
|
|
|
|
+ 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 'video/' + y + '-' + MM + '-' + d + '/'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ this.queryParam.type = 'VIDEO'
|
|
|
|
+ this.queryParam.userId = this.userInfo().id
|
|
|
|
+ this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
|
|
|
|
+ this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
|
|
|
|
+ // this.queryParam.status = key
|
|
|
|
+ this.ipagination.pageSize = 8
|
|
|
|
+ this.getParticipateList()
|
|
|
|
+ // /sys/user/getRoleInfo
|
|
|
|
+ getAction('/sys/user/getRoleInfo', {
|
|
|
|
+ userId: this.userInfo().id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ this.role = res
|
|
|
|
+ })
|
|
|
|
+ getAction('/ctop/videoWatermarkTemplate/list').then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.sizeType = res.result.records
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ updated() {
|
|
|
|
+ stopOtherVideo()
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ $route: function (n, o) {
|
|
|
|
+ if (n.path == '/modules/material/videoMaterial') {
|
|
|
|
+ this.queryParam.userId = this.userInfo().id
|
|
|
|
+ this.queryParam.status = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
|
|
|
|
+ this.active = localStorage.getItem('key') ? localStorage.getItem('key') : '0'
|
|
|
|
+ this.loadData()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 'queryParam.projectId': function (n, o) {
|
|
|
|
+ if (n != '') {
|
|
|
|
+ this.getList(n)
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ visibleDetail: function (n, o) {
|
|
|
|
+ if (!n) {
|
|
|
|
+ this.refuseFile = []
|
|
|
|
+ this.refuseReason = ''
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ showBoHui(item) {
|
|
|
|
+ this.bohui = item
|
|
|
|
+ this.bohuiShow = true
|
|
|
|
+ },
|
|
|
|
+ getData(className) {
|
|
|
|
+ return this.form.getFieldValue(className)
|
|
|
|
+ },
|
|
|
|
+ filterOption(input, option) {
|
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
+ },
|
|
|
|
+ moment,
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
|
+ searchRe() {
|
|
|
|
+ this.queryParam = {
|
|
|
|
+ type: 'VIDEO',
|
|
|
|
+ userId: this.userInfo().id,
|
|
|
|
+ status: this.active
|
|
|
|
+ }
|
|
|
|
+ this.loadData(1)
|
|
|
|
+ },
|
|
|
|
+ getList(value) {
|
|
|
|
+ if (value) {
|
|
|
|
+ this.mediaId = this.dataElse.filter(item => {
|
|
|
|
+ if (value == item.projectId) {
|
|
|
|
+ return item
|
|
|
|
+ }
|
|
|
|
+ })[0].mediaId
|
|
|
|
+ }
|
|
|
|
+ this.loadData()
|
|
|
|
+ },
|
|
|
|
+ onChangeCheckImage(checkedList) {
|
|
|
|
+ if (checkedList.length == 0) {
|
|
|
|
+ this.checkAllImage = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ onChangeCheck(checkedList) {
|
|
|
|
+ if (checkedList.length == 0) {
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ showDetail(item) {
|
|
|
|
+ this.visibleDetail = true
|
|
|
|
+ this.showUrl = item.url
|
|
|
|
+ this.id = item.id
|
|
|
|
+ this.code = item.code
|
|
|
|
+ this.excellent = item.excellent
|
|
|
|
+ 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
|
|
|
|
+ this.size =
|
|
|
|
+ res.parameter.width == '1080' ? 3 : res.parameter.width == '1920' ? 1 : res.parameter.width == '1280' ?
|
|
|
|
+ 2 : 4
|
|
|
|
+ })
|
|
|
|
+ getAction('/ctop/supplierWatermark/list', {
|
|
|
|
+ videoSignature: item.code
|
|
|
|
+ }).then(res => {
|
|
|
|
+
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.watermarkUrl = res.result.records[0].watermarkUrl
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ getAction('/ctop/materialInfo/queryById', {
|
|
|
|
+ id: item.id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.showUrlWater = res.result.watermarkUrl
|
|
|
|
+ this.name = res.result.watermarkCode
|
|
|
|
+ this.materialName = res.result.materialName
|
|
|
|
+ } else {
|
|
|
|
+ this.showUrlWater = null
|
|
|
|
+ this.name = null
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ getAction('/ctop/MaterialImageInfo/list', {
|
|
|
|
+ videoId: item.code
|
|
|
|
+ }).then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.model = res.result.map((item, index) => {
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ key: index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ coverPreviewShowModal(item, index) {
|
|
|
|
+ console.log(this.model)
|
|
|
|
+ this.modelNew = this.model.filter(items => {
|
|
|
|
+ return items.status == 0
|
|
|
|
+ })
|
|
|
|
+ if (this.modelNew.length > 0) {
|
|
|
|
+ this.coverPreviewVisible = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ callbackTwo(key) {
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ this.checkArr = []
|
|
|
|
+
|
|
|
|
+ if (key == '3') {
|
|
|
|
+ this.url.list = "/ctop/materialInfo/effiMaterialInfo"
|
|
|
|
+ this.queryParam = {}
|
|
|
|
+ } else {
|
|
|
|
+ this.url.list = "/ctop/materialInfo/list"
|
|
|
|
+ this.queryParam = {
|
|
|
|
+ type: 'VIDEO',
|
|
|
|
+ userId: this.userInfo().id,
|
|
|
|
+ status: key,
|
|
|
|
+ projectId: this.queryParam.projectId
|
|
|
|
+ }
|
|
|
|
+ if (this.form.getFieldValue('projectId')) {
|
|
|
|
+ this.form.setFieldsValue({
|
|
|
|
+ projectId: ''
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ // if (this.form.getFieldValue('projectId')) {
|
|
|
|
+ // this.form.setFieldsValue({
|
|
|
|
+ // projectId: ''
|
|
|
|
+ // })
|
|
|
|
+ // }
|
|
|
|
+ // this.queryParam.status = key
|
|
|
|
+ this.loadData(1)
|
|
|
|
+ },
|
|
|
|
+ getParticipateList() {
|
|
|
|
+ getAction('/ctop/projectMember/participateList', {
|
|
|
|
+ userId: this.userInfo().id
|
|
|
|
+ }).then(res => {
|
|
|
|
+ if (res.code == 0) {
|
|
|
|
+ this.dataElse = res.result
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
|
+ this.ipagination.current = page
|
|
|
|
+ this.checkArr = []
|
|
|
|
+ this.checkAll = false
|
|
|
|
+ this.loadData()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+<style scoped>
|
|
|
|
+ @import '~@assets/less/common.less';
|
|
|
|
+</style>
|