|
@@ -22,10 +22,11 @@
|
|
|
<a-col :md="8" :sm="8" :xxl="6">
|
|
|
<a-form-item label="素材状态">
|
|
|
<a-select
|
|
|
- v-decorator="['status']"
|
|
|
+ v-decorator="['status',{initialValue:''}]"
|
|
|
placeholder="请选择"
|
|
|
allow-clear
|
|
|
>
|
|
|
+ <a-select-option :value="''">不限</a-select-option>
|
|
|
<a-select-option :value="0">可用</a-select-option>
|
|
|
<a-select-option :value="1">删除</a-select-option>
|
|
|
</a-select>
|
|
@@ -35,10 +36,11 @@
|
|
|
<a-col :md="8" :sm="8" :xxl="6">
|
|
|
<a-form-item label="素材渠道">
|
|
|
<a-select
|
|
|
- v-decorator="['channelType']"
|
|
|
+ v-decorator="['channelType',{initialValue:''}]"
|
|
|
placeholder="请选择"
|
|
|
allow-clear
|
|
|
>
|
|
|
+ <a-select-option :value="''">不限</a-select-option>
|
|
|
<a-select-option :value="0">自产</a-select-option>
|
|
|
<a-select-option :value="1">素造</a-select-option>
|
|
|
</a-select>
|
|
@@ -55,13 +57,78 @@
|
|
|
</a-form>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
+ <a-row :gutter="24" class="material-total" v-if="totalData">
|
|
|
+ <a-col :sm="24" :md="12" :xl="6">
|
|
|
+ <chart-card title="素材总数" :total="totalData.total + ''">
|
|
|
+ <a-tooltip title="此项目的素材总数" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <!-- <div slot="percentage">
|
|
|
+ <trend :flag="costLink > 0 ? 'up' : 'down'">
|
|
|
+ <span slot="term">环比</span>
|
|
|
+ {{ (costLink * 100).toFixed(2) }}%
|
|
|
+ </trend>
|
|
|
+ </div> -->
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6">
|
|
|
+ <chart-card title="在投素材数" :total="totalData.validCount + ''">
|
|
|
+ <a-tooltip title="此项目的在投素材数总数" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <div slot="percentage">
|
|
|
+ <trend :flag="totalData.validCount >= totalData.yesterdayValidCount > 0 ? 'up' : 'down'">
|
|
|
+ <!-- <span slot="term">环比</span> -->
|
|
|
+ {{ totalData.validCount - totalData.yesterdayValidCount === 0 ? '0' : ((totalData.validCount - totalData.yesterdayValidCount)/totalData.yesterdayValidCount).toFixed(2) }}%
|
|
|
+ </trend>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6">
|
|
|
+ <chart-card title="今日同步素材数" :total="totalData.todayUpCount + ''">
|
|
|
+ <a-tooltip title="此项目今日同步素材数" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
|
|
|
+ <div slot="percentage">
|
|
|
+ <trend :flag="totalData.todayUpCount >= totalData.yesterdayUpCount > 0 ? 'up' : 'down'">
|
|
|
+ <!-- <span slot="term">环比</span> -->
|
|
|
+ {{ totalData.todayUpCount - totalData.yesterdayUpCount === 0 ? '0' : ((totalData.todayUpCount - totalData.yesterdayUpCount)/totalData.yesterdayUpCount).toFixed(2) }}%
|
|
|
+ </trend>
|
|
|
+ </div>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ <a-col :sm="24" :md="12" :xl="6">
|
|
|
+ <chart-card title="近一周同步素材数" :total="totalData.thisWeekCount + ''">
|
|
|
+ <a-tooltip title="此项目近一周同步素材数" slot="action">
|
|
|
+ <a-icon type="info-circle-o" />
|
|
|
+ </a-tooltip>
|
|
|
+ <div slot="percentage">
|
|
|
+ <trend :flag="totalData.thisWeekCount >= totalData.lastWeekCount > 0 ? 'up' : 'down'">
|
|
|
+ <!-- <span slot="term">环比</span> -->
|
|
|
+ {{ totalData.thisWeekCount - totalData.lastWeekCount === 0 ? '0' : ((totalData.thisWeekCount - totalData.lastWeekCount)/totalData.lastWeekCount).toFixed(2) }}%
|
|
|
+ </trend>
|
|
|
+ </div>
|
|
|
+ </chart-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
<a-card class="material-main">
|
|
|
<a-spin :spinning="spinning">
|
|
|
<div v-if="dataSource.length > 0">
|
|
|
<div class="home-card">
|
|
|
- <div class="home-item" v-for="(items, index) in dataSource" :key="index" >
|
|
|
+ <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="lookView(items)">
|
|
|
<img :src="items.coverUrl" alt="">
|
|
|
+ <div class="bottom-details">
|
|
|
+ <div class="bottom-title">
|
|
|
+ <h3>{{ items.photoName ? items.photoName : '-' }}</h3>
|
|
|
+ <a @click.stop="lowerMaterial(items)">下架素材</a>
|
|
|
+ </div>
|
|
|
+ <p>素材来源:{{ items.channelType === 0 ? '自产' : '素造' }}</p>
|
|
|
+ <p>上传日期:{{ items.statDate }}</p>
|
|
|
+ <p>素材状态:{{ items.status === 0 ? '可用' : '删除' }}</p>
|
|
|
+ <p></p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -77,23 +144,35 @@
|
|
|
@change="getDataSource"
|
|
|
/>
|
|
|
</div>
|
|
|
- <div v-else class="home-card">
|
|
|
-
|
|
|
+ <div v-else class="home-card" style="justify-content: center;align-items: center;">
|
|
|
+ <a-empty />
|
|
|
</div>
|
|
|
</a-spin>
|
|
|
</a-card>
|
|
|
+ <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
|
|
|
+ <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import moment from 'moment'
|
|
|
+import moment from 'moment';
|
|
|
import selectTable from '@/views/modules/Statistics/components/selectPagination.vue';
|
|
|
+import ChartCard from '@/components/ChartCard';
|
|
|
+import Trend from '@/components/Trend';
|
|
|
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
export default {
|
|
|
components: {
|
|
|
- selectTable
|
|
|
+ selectTable,
|
|
|
+ ChartCard,
|
|
|
+ Trend
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ visibleVideo: false,
|
|
|
+ videoUrlShow: null,
|
|
|
spinning: false,
|
|
|
form: this.$form.createForm(this),
|
|
|
projectId: '',
|
|
@@ -118,9 +197,29 @@ export default {
|
|
|
this.handleGetTableList({})
|
|
|
}
|
|
|
},
|
|
|
+ totalData: null
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ visibleVideo(n, o) {
|
|
|
+ if (!n) {
|
|
|
+ closeAllVideoFun()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ lowerMaterial(item) {
|
|
|
+
|
|
|
+ },
|
|
|
+ lookView(item) {
|
|
|
+ // this.visibleVideo = true
|
|
|
+ // this.videoUrlShow = item.url
|
|
|
+ var params = { md5: item.signature, url:item.url }
|
|
|
+ localStorage.setItem('materialDetail', JSON.stringify(params))
|
|
|
+ this.$router.push({
|
|
|
+ path: '/autoLaunch/material-all/material-detail',
|
|
|
+ })
|
|
|
+ },
|
|
|
getDataSource(current, pageSize) {
|
|
|
// 切换分页时的回调,
|
|
|
// 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
@@ -133,8 +232,10 @@ export default {
|
|
|
event.preventDefault();
|
|
|
const paramsData = this.form.getFieldsValue();
|
|
|
this.handleGetTableList(paramsData);
|
|
|
+ this.getVideoTotalNumber();
|
|
|
},
|
|
|
handleResetForm() {
|
|
|
+ this.totalData = null;
|
|
|
this.ipagination.current = 1;
|
|
|
this.form.resetFields();
|
|
|
this.projectId = undefined;
|
|
@@ -171,6 +272,21 @@ export default {
|
|
|
console.log(error, 'eeee');
|
|
|
});
|
|
|
},
|
|
|
+ getVideoTotalNumber() {
|
|
|
+ if(this.projectId !== '') {
|
|
|
+ let params = {};
|
|
|
+ params.projectId = this.projectId;
|
|
|
+ this.getAction('/kuaishouProjectVideoGet/getVideoTotalNumber', params).then(res => {
|
|
|
+ if(res.success) {
|
|
|
+ this.totalData = res.result;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.totalData = null;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
this.handleGetTableList({});
|