|
@@ -133,36 +133,27 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<div class="report-card-result">
|
|
|
- <div class="report-card-money">¥125.67</div>
|
|
|
+ <div class="report-card-money">¥{{ materialReportCardList.costTotal || 0 }}</div>
|
|
|
<div class="report-card-msg">
|
|
|
<span>
|
|
|
- 周环比
|
|
|
- <a-icon type="caret-up" style="color: green"/>
|
|
|
- 12%
|
|
|
+ 同比
|
|
|
+ <a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
+ <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
+ {{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
|
|
|
</span>
|
|
|
<span>
|
|
|
日环比
|
|
|
- <a-icon type="caret-down" style="color: #f00"/>
|
|
|
- 12%
|
|
|
+ <a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
+ <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
+ {{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="report-card-line"></div>
|
|
|
<div class="report-card-radio">
|
|
|
- <span>昨日消耗:¥125.67</span>
|
|
|
+ <span>昨日消耗:¥{{ materialReportCardList.yesterdayCost }}</span>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
- <!-- <chart-card :loading="loading" title="总消耗" :total="cost | decimalsHandle">
|
|
|
- <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">
|
|
|
<a-card title="视频上新数" class="material-report-card">
|
|
@@ -172,7 +163,7 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<div class="report-card-result">
|
|
|
- <div class="report-card-money">8864</div>
|
|
|
+ <div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
|
|
|
<div
|
|
|
class="accountIndexEchart"
|
|
|
id="accountIndexEchart"
|
|
@@ -183,20 +174,9 @@
|
|
|
</div>
|
|
|
<div class="report-card-line"></div>
|
|
|
<div class="report-card-radio">
|
|
|
- <span>素材使用率:89.48%</span>
|
|
|
+ <span>素材使用率:{{ Number(materialReportCardList.useCompare).toFixed(2) }}%</span>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
- <!-- <chart-card :loading="loading" title="视频总数" :total="videoTotal + ''">
|
|
|
- <a-tooltip title="筛选时段内上新视频总数" slot="action">
|
|
|
- <a-icon type="info-circle-o"/>
|
|
|
- </a-tooltip>
|
|
|
- <div slot="percentage">
|
|
|
- <trend flag="up">
|
|
|
- <span slot="term">上新</span>
|
|
|
- {{ newVideo }}
|
|
|
- </trend>
|
|
|
- </div>
|
|
|
- </chart-card> -->
|
|
|
</a-col>
|
|
|
<a-col :sm="24" :md="12" :xl="6">
|
|
|
<a-card title="有效视频" class="material-report-card">
|
|
@@ -206,7 +186,7 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<div class="report-card-result">
|
|
|
- <div class="report-card-money">6560</div>
|
|
|
+ <div class="report-card-money">{{ materialReportCardList.effectiveTotal || 0 }}</div>
|
|
|
<div
|
|
|
class="accountIndexEchart"
|
|
|
id="effectiveVideoEcharts"
|
|
@@ -217,14 +197,9 @@
|
|
|
</div>
|
|
|
<div class="report-card-line"></div>
|
|
|
<div class="report-card-radio">
|
|
|
- <span>素材使用率:60%</span>
|
|
|
+ <span>素材有效率:{{ Number(materialReportCardList.effectiveCompare).toFixed(2) }}%</span>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
- <!-- <chart-card :loading="loading" title="爆款视频" total="-">
|
|
|
- <a-tooltip title="筛选时段内双周消耗大于等于5w的视频总数" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- </chart-card> -->
|
|
|
</a-col>
|
|
|
<a-col :sm="24" :md="12" :xl="6">
|
|
|
<a-card title="爆款视频" class="material-report-card">
|
|
@@ -234,7 +209,7 @@
|
|
|
</a-tooltip>
|
|
|
</span>
|
|
|
<div class="report-card-result">
|
|
|
- <div class="report-card-money">6560</div>
|
|
|
+ <div class="report-card-money">{{ materialReportCardList.hotTotal }}</div>
|
|
|
<div
|
|
|
class="accountIndexEchart"
|
|
|
id="popularVideoEcharts"
|
|
@@ -246,22 +221,19 @@
|
|
|
<div class="report-card-line"></div>
|
|
|
<div class="report-card-radio">
|
|
|
<span>
|
|
|
- 周环比
|
|
|
- <a-icon type="caret-up" style="color: green"/>
|
|
|
- 12%
|
|
|
+ 同比
|
|
|
+ <a-icon v-if="materialReportCardList.hotYearOnYearCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
+ <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
+ {{ Number(materialReportCardList.hotYearOnYearCompare * 100).toFixed(2) }}%
|
|
|
</span>
|
|
|
<span>
|
|
|
日环比
|
|
|
- <a-icon type="caret-down" style="color: #f00"/>
|
|
|
- 12%
|
|
|
+ <a-icon v-if="materialReportCardList.hostCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
+ <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
+ {{ Number(materialReportCardList.hostCompare * 100).toFixed(2) }}%
|
|
|
</span>
|
|
|
</div>
|
|
|
</a-card>
|
|
|
- <!-- <chart-card :loading="loading" title="有效视频" total="-">
|
|
|
- <a-tooltip title="筛选时段内一周消耗大于等于5000的视频总数" slot="action">
|
|
|
- <a-icon type="info-circle-o" />
|
|
|
- </a-tooltip>
|
|
|
- </chart-card> -->
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="24" style="margin-top: 20px" id="getWidth">
|
|
@@ -304,112 +276,111 @@
|
|
|
<a-row :gutter="24" style="margin-top: 20px">
|
|
|
<a-col :xl="12">
|
|
|
<a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
|
|
|
- <a-tabs v-model="materialRankValue" @change="handleMaterialRanking">
|
|
|
- <a-tab-pane key="1" tab="内部">
|
|
|
- <a slot="extra" @click="getMoreVideoList">查看更多</a>
|
|
|
- <ul class="top-ul-style" v-if="videoList.length > 0">
|
|
|
- <li v-for="(item, index) in videoList" :key="index">
|
|
|
- <div style="display: flex; position: relative; width: 80%; cursor: pointer">
|
|
|
- <span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
|
|
|
- <img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
|
|
|
- </span>
|
|
|
+ <a-radio-group
|
|
|
+ v-if="mediaDimension === 'b'"
|
|
|
+ v-model="materialRankValue"
|
|
|
+ style="margin-bottom: 15px;"
|
|
|
+ @change="handleMaterialRanking"
|
|
|
+ >
|
|
|
+ <a-radio-button :value="0">内部</a-radio-button>
|
|
|
+ <a-radio-button :value="1">素造</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <a slot="extra" @click="getMoreVideoList">查看更多</a>
|
|
|
+ <div v-if="videoList.length > 0">
|
|
|
+ <ul class="top-ul-style">
|
|
|
+ <li v-for="(item, index) in videoList" :key="index">
|
|
|
+ <div style="display: flex; position: relative; width: 80%; cursor: pointer">
|
|
|
+ <span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
|
|
|
+ <img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
|
|
|
+ </span>
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ width: 25%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+ background: #f2f2f2;
|
|
|
+ margin-left: 40px;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: relative;
|
|
|
+ "
|
|
|
+ >
|
|
|
<div
|
|
|
- style="
|
|
|
- width: 25%;
|
|
|
- height: 100%;
|
|
|
- text-align: center;
|
|
|
- background: #f2f2f2;
|
|
|
- margin-left: 40px;
|
|
|
- border-radius: 5px;
|
|
|
- position: relative;
|
|
|
+ :style="{
|
|
|
+ backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
|
|
|
+ backgroundSize: 'cover',
|
|
|
+ backgroundRepeat: 'no-repeat',
|
|
|
+ backgroundPosition: 'center center',
|
|
|
+ overflow: 'hidden',
|
|
|
+ position: 'absolute',
|
|
|
+ top: '0',
|
|
|
+ zIndex: '0',
|
|
|
+ }"
|
|
|
+ class="showShare bg"
|
|
|
+ @click="
|
|
|
+ visibleVideo = true
|
|
|
+ videoUrlShow = item.url
|
|
|
"
|
|
|
>
|
|
|
- <div
|
|
|
- :style="{
|
|
|
- backgroundImage: 'url(' + (item.coverUrl || noImg) + ')',
|
|
|
- backgroundSize: 'cover',
|
|
|
- backgroundRepeat: 'no-repeat',
|
|
|
- backgroundPosition: 'center center',
|
|
|
- overflow: 'hidden',
|
|
|
- position: 'absolute',
|
|
|
- top: '0',
|
|
|
- zIndex: '0',
|
|
|
- }"
|
|
|
- class="showShare bg"
|
|
|
- @click="
|
|
|
- visibleVideo = true
|
|
|
- videoUrlShow = item.url
|
|
|
- "
|
|
|
- >
|
|
|
- </div>
|
|
|
- <img
|
|
|
- :src="item.coverUrl || noImg"
|
|
|
- style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
|
|
|
- alt=""
|
|
|
- srcset=""
|
|
|
- @click="
|
|
|
- visibleVideo = true
|
|
|
- videoUrlShow = item.url
|
|
|
- "
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div
|
|
|
- style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
|
|
|
- @click.stop="toDetail(item.signature)"
|
|
|
- >
|
|
|
- <p style="margin-left: 10px; color: #1890ff">
|
|
|
- {{ item.materialName ? item.materialName : '无素材名称' }}
|
|
|
- </p>
|
|
|
- <p style="margin-left: 10px; margin-bottom: 0" v-if="item.tag">
|
|
|
- <a-tag
|
|
|
- v-for="(items, index) in item.tag.split(',')"
|
|
|
- :key="index"
|
|
|
- style="margin-right: 5px"
|
|
|
- v-if="index <= 3"
|
|
|
- >
|
|
|
- {{ items }}
|
|
|
- </a-tag>
|
|
|
- </p>
|
|
|
</div>
|
|
|
+ <img
|
|
|
+ :src="item.coverUrl || noImg"
|
|
|
+ style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
|
|
|
+ alt=""
|
|
|
+ srcset=""
|
|
|
+ @click="
|
|
|
+ visibleVideo = true
|
|
|
+ videoUrlShow = item.url
|
|
|
+ "
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div class="li-cost">
|
|
|
- <span>消耗</span>
|
|
|
- <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
|
|
|
+ <div
|
|
|
+ style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
|
|
|
+ @click.stop="toDetail(item.signature)"
|
|
|
+ >
|
|
|
+ <p style="margin-left: 10px; color: #1890ff">
|
|
|
+ {{ item.materialName ? item.materialName : '无素材名称' }}
|
|
|
+ </p>
|
|
|
+ <p style="margin-left: 10px; margin-bottom: 0" v-if="item.tag">
|
|
|
+ <a-tag
|
|
|
+ v-for="(items, index) in item.tag.split(',')"
|
|
|
+ :key="index"
|
|
|
+ style="margin-right: 5px"
|
|
|
+ v-if="index <= 3"
|
|
|
+ >
|
|
|
+ {{ items }}
|
|
|
+ </a-tag>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <a-empty v-else style="margin-top: 20%" />
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="素造">
|
|
|
- 这个是素造页面
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="li-cost">
|
|
|
+ <span>消耗</span>
|
|
|
+ <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div v-else style="height: 200px;line-height: 200px;text-align: center;">
|
|
|
+ <a-spin/>
|
|
|
+ </div>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
<a-col :xl="12">
|
|
|
<a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
|
|
|
- <a-tabs v-model="designRankingValue" @change="handleDesignRanking">
|
|
|
- <a-tab-pane key="1" tab="摄像">
|
|
|
- <a-table
|
|
|
- :columns="columns"
|
|
|
- :data-source="designTopList"
|
|
|
- bordered
|
|
|
- size="middle"
|
|
|
- :scroll="{y: 600}"
|
|
|
- :pagination="ipagination"
|
|
|
- :loading="designTopLoading"
|
|
|
- @change="sort"
|
|
|
- >
|
|
|
- <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
|
|
|
- </a-table>
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="剪切">
|
|
|
- 这个是剪切页面
|
|
|
- </a-tab-pane>
|
|
|
- <a-tab-pane key="3" tab="编导">
|
|
|
- 这个是编导页面
|
|
|
- </a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
+ <a-radio-group v-model="designRankingValue" style="margin-bottom: 15px;" @change="handleDesignRanking">
|
|
|
+ <a-radio-button :value="1">摄像</a-radio-button>
|
|
|
+ <a-radio-button :value="2">剪辑</a-radio-button>
|
|
|
+ <a-radio-button :value="3">编导</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="designTopList"
|
|
|
+ bordered
|
|
|
+ size="middle"
|
|
|
+ :loading="designTopLoading"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
|
|
|
+ </a-table>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
@@ -423,26 +394,27 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import moment from 'moment';
|
|
|
-import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
|
|
|
+import {getAction, postAction, downFile, downFilePost} from '@/api/manage';
|
|
|
import YoutTable from '@/components/youtTable/YoutTable';
|
|
|
import ChartCard from '@/components/ChartCard';
|
|
|
import Trend from '@/components/Trend';
|
|
|
-import { mapGetters } from 'vuex';
|
|
|
-import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
+import {mapGetters} from 'vuex';
|
|
|
+import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl'; // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
+
|
|
|
var echarts = require('echarts');
|
|
|
const columnsFixd = [
|
|
|
{
|
|
|
title: '排名',
|
|
|
dataIndex: 'rowNumber',
|
|
|
- scopedSlots: {customRender: 'rowNumber'},
|
|
|
align: 'center',
|
|
|
- key: 'date'
|
|
|
+ customRender:(t, r, index)=> {
|
|
|
+ return index + 1;
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
title: '设计人员',
|
|
|
dataIndex: 'userName',
|
|
|
- align: 'center',
|
|
|
- scopedSlots: {customRender: 'userName'}
|
|
|
+ align: 'center'
|
|
|
},
|
|
|
{
|
|
|
title: '角色',
|
|
@@ -453,10 +425,10 @@ const columnsFixd = [
|
|
|
title: '消耗(元)',
|
|
|
dataIndex: 'cost',
|
|
|
align: 'center',
|
|
|
- scopedSlots: {customRender: 'cost'},
|
|
|
- sorter: () => {}
|
|
|
+ scopedSlots: {customRender: 'cost'}
|
|
|
}
|
|
|
];
|
|
|
+
|
|
|
export default {
|
|
|
components: {
|
|
|
YoutTable,
|
|
@@ -465,8 +437,9 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- materialRankValue: '1',
|
|
|
- designRankingValue: '1',
|
|
|
+ materialReportCardList: {},
|
|
|
+ materialRankValue: 0,
|
|
|
+ designRankingValue: 1,
|
|
|
designTopLoading: false,
|
|
|
noImg: require('@/assets/noImg.png'),
|
|
|
visibleVideo: false,
|
|
@@ -484,24 +457,6 @@ export default {
|
|
|
designTopList: [],
|
|
|
columns: [...columnsFixd], // table的表头
|
|
|
columnsFixd,
|
|
|
- ipagination: {
|
|
|
- current: 1,
|
|
|
- pageSize: 10,
|
|
|
- // pageSizeOptions: ['10', '20', '30'],
|
|
|
- showTotal: (total, range) => {
|
|
|
- return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
- },
|
|
|
- showQuickJumper: true,
|
|
|
- // showSizeChanger: true,
|
|
|
- // pageSizeOptions: ['10', '30', '50'],
|
|
|
- total: 0,
|
|
|
- onChange: (current, pageSize) => {
|
|
|
- // 切换分页时的回调,
|
|
|
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
- this.ipagination.current = current
|
|
|
- this.ipagination.pageSize = pageSize
|
|
|
- },
|
|
|
- },
|
|
|
dateRanges: {
|
|
|
昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
|
|
近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
|
|
@@ -509,7 +464,7 @@ export default {
|
|
|
近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
|
|
|
近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
|
|
|
近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
|
|
|
- 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
|
|
|
+ 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')]
|
|
|
},
|
|
|
dateValue: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
dataDimension: 'a',
|
|
@@ -527,25 +482,24 @@ export default {
|
|
|
watch: {
|
|
|
visibleVideo(n, o) {
|
|
|
if (!n) {
|
|
|
- stopOtherVideo()
|
|
|
- closeAllVideoFun()
|
|
|
- }
|
|
|
- },
|
|
|
- 'ipagination.current': function (n, o) {
|
|
|
- if (n != o) {
|
|
|
- this.getDesignTopList()
|
|
|
+ stopOtherVideo();
|
|
|
+ closeAllVideoFun();
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
...mapGetters(['userInfo']),
|
|
|
- handleMaterialRanking(val) {
|
|
|
- this.materialRankValue = val;
|
|
|
+ handleMaterialRanking(e) {
|
|
|
+ this.materialRankValue = e.target.value;
|
|
|
+ this.getVideoTopList();
|
|
|
},
|
|
|
- handleDesignRanking(val) {
|
|
|
- this.designRankingValue = val;
|
|
|
+ handleDesignRanking(e) {
|
|
|
+ this.designRankingValue = e.target.value;
|
|
|
+ this.getDesignTopList();
|
|
|
},
|
|
|
- initAccountIndexEchart(data, type) {
|
|
|
+ initAccountIndexEchart(data) {
|
|
|
+ let xData = data.videoList.length && data.videoList.map(item => item.time);
|
|
|
+ let yData = data.videoList.length && data.videoList.map(item => item.count);
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
@@ -563,7 +517,7 @@ export default {
|
|
|
axisPointer: {
|
|
|
type: 'none'
|
|
|
},
|
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ data: xData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
@@ -572,7 +526,7 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
name: '上新数',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ data: yData,
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
@@ -609,7 +563,9 @@ export default {
|
|
|
};
|
|
|
return option;
|
|
|
},
|
|
|
- handleEffectiveVideoEcharts() {
|
|
|
+ handleEffectiveVideoEcharts(data) {
|
|
|
+ let xData = data.effectiveList.length && data.effectiveList.map(item => item.time);
|
|
|
+ let yData = data.effectiveList.length && data.effectiveList.map(item => item.count);
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
@@ -627,7 +583,7 @@ export default {
|
|
|
axisPointer: {
|
|
|
type: 'none'
|
|
|
},
|
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ data: xData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
@@ -636,7 +592,7 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
name: '上新数',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ data: yData,
|
|
|
type: 'bar',
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
@@ -673,7 +629,9 @@ export default {
|
|
|
};
|
|
|
return option;
|
|
|
},
|
|
|
- handlePopularVideoEcharts() {
|
|
|
+ handlePopularVideoEcharts(data) {
|
|
|
+ let xData = data.hotList.length && data.hotList.map(item => item.time);
|
|
|
+ let yData = data.hotList.length && data.hotList.map(item => item.count);
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
@@ -691,7 +649,7 @@ export default {
|
|
|
axisPointer: {
|
|
|
type: 'none'
|
|
|
},
|
|
|
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
|
|
+ data: xData
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
@@ -700,7 +658,7 @@ export default {
|
|
|
series: [
|
|
|
{
|
|
|
name: '上新数',
|
|
|
- data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ data: yData,
|
|
|
type: 'line',
|
|
|
smooth: true,
|
|
|
showSymbol: false,
|
|
@@ -740,22 +698,13 @@ export default {
|
|
|
filterOption(input, option) {
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
|
|
},
|
|
|
- sort(pagination, filters, sorter, { currentDataSource }) {
|
|
|
- this.ipagination.current = pagination.current;
|
|
|
- this.ipagination.pageSize = pagination.pageSize;
|
|
|
- if (sorter.order) {
|
|
|
- this.order = sorter.order ? sorter.order : 'descend';
|
|
|
- this.target = sorter.columnKey;
|
|
|
- this.getDesignTopList({ target: sorter.columnKey, order: sorter.order ? sorter.order : 'descend' });
|
|
|
- }
|
|
|
- },
|
|
|
getData() {
|
|
|
this.spinning = true
|
|
|
Promise.all([
|
|
|
this.getSumData(),
|
|
|
this.getChartDataList(),
|
|
|
this.getVideoTopList(),
|
|
|
- this.getDesignTopList({ target: 'cost', order: 'descend' })
|
|
|
+ this.getDesignTopList()
|
|
|
]).then((res) => {
|
|
|
this.spinning = false;
|
|
|
this.resetLoading = false;
|
|
@@ -798,12 +747,11 @@ export default {
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.success) {
|
|
|
- this.cost = res.result.cost ? res.result.cost : '0';
|
|
|
- this.videoTotal = res.result.video ? res.result.video : '0';
|
|
|
- this.hotTotal = res.result.hot ? res.result.hot : '0';
|
|
|
- this.xiaoTotal = res.result.valid ? res.result.valid : '0';
|
|
|
- this.costLink = res.result.costLink ? res.result.costLink : '0';
|
|
|
- this.newVideo = res.result.newVideo ? res.result.newVideo : '0';
|
|
|
+ console.log(res, 'res--res--res');
|
|
|
+ this.materialReportCardList = res.result;
|
|
|
+ this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
|
|
|
+ this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
|
|
|
+ this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
|
|
|
resolve(res.result);
|
|
|
}
|
|
|
else {
|
|
@@ -840,11 +788,12 @@ export default {
|
|
|
this.videoList = []
|
|
|
return new Promise((resolve, reject) => {
|
|
|
this.postDataAction('/overView/materialTop', {
|
|
|
- mediaId: this.mediaDimension == 'a' ? 1 : 2,
|
|
|
- startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
|
|
|
- endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
|
|
|
- projects: this.dataDimensionValue
|
|
|
- }).then((res) => {
|
|
|
+ mediaId: this.mediaDimension == 'a' ? 1 : 2,
|
|
|
+ startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
|
|
|
+ endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
|
|
|
+ channelType: this.materialRankValue,
|
|
|
+ projects: this.dataDimensionValue
|
|
|
+ }).then(res => {
|
|
|
if (res.success) {
|
|
|
this.videoList = res.result;
|
|
|
resolve(res.result);
|
|
@@ -879,39 +828,20 @@ export default {
|
|
|
path: '/materialReport/marterialDetail'
|
|
|
});
|
|
|
},
|
|
|
- getDesignTopList(data) {
|
|
|
- this.designTopLoading = true
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- var params = {};
|
|
|
- params.startDate = this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null;
|
|
|
- params.endDate = this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null;
|
|
|
- params.userId = this.userInfo().id;
|
|
|
- params.pageSize = this.ipagination.pageSize;
|
|
|
- params.pageNo = this.ipagination.current;
|
|
|
- if (data) {
|
|
|
- params.target = data.target;
|
|
|
- if (data.order == 'descend') {
|
|
|
- params.order = 'desc';
|
|
|
- }
|
|
|
- else {
|
|
|
- params.order = 'asc';
|
|
|
- }
|
|
|
- }
|
|
|
- else {
|
|
|
- params.target = this.target;
|
|
|
- params.order = this.order == 'descend' ? 'desc' : 'asc';
|
|
|
- }
|
|
|
- this.postDataAction('/overView/designTop', params).then((res) => {
|
|
|
+ getDesignTopList() {
|
|
|
+ this.designTopLoading = true;
|
|
|
+ const paramsData = {
|
|
|
+ startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
|
|
|
+ endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
|
|
|
+ mediaId: this.mediaDimension == 'a' ? 1 : 2,
|
|
|
+ projects: this.dataDimensionValue,
|
|
|
+ type: this.designRankingValue
|
|
|
+ };
|
|
|
+ this.postDataAction('/overView/designTop', paramsData).then(res => {
|
|
|
+ if (res.success) {
|
|
|
this.designTopLoading = false;
|
|
|
- if (res.success) {
|
|
|
- this.designTopList = res.result.list;
|
|
|
- this.ipagination.total = res.result.total;
|
|
|
- resolve(res.result);
|
|
|
- }
|
|
|
- else {
|
|
|
- reject(res.message);
|
|
|
- }
|
|
|
- });
|
|
|
+ this.designTopList = res.result;
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
getTagProportionAnalyseList() {
|
|
@@ -928,7 +858,6 @@ export default {
|
|
|
handleSubmit() {
|
|
|
this.spinning = true;
|
|
|
this.searchLoading = true;
|
|
|
- this.ipagination.current = 1;
|
|
|
this.getData();
|
|
|
},
|
|
|
resetSubmit() {
|
|
@@ -937,7 +866,6 @@ export default {
|
|
|
this.dataDimension = 'a';
|
|
|
this.mediaDimension = 'b';
|
|
|
this.dataDimensionValue = [];
|
|
|
- this.ipagination.current = 1;
|
|
|
this.getData();
|
|
|
},
|
|
|
//获取echart的值
|
|
@@ -1119,6 +1047,12 @@ export default {
|
|
|
return current && current > moment().subtract(1, 'days');
|
|
|
},
|
|
|
mediaDimensionChange(e) {
|
|
|
+ if (e.target.value === 'b') {
|
|
|
+ this.materialRankValue = 0;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.materialRankValue = '';
|
|
|
+ }
|
|
|
this.dataDimensionList = [];
|
|
|
this.dataDimensionValue = [];
|
|
|
this.getProjectList();
|
|
@@ -1129,9 +1063,6 @@ export default {
|
|
|
this.$nextTick(() => {
|
|
|
this.getProjectList();
|
|
|
this.getData();
|
|
|
- this.initEchart('accountIndexEchart', this.initAccountIndexEchart());
|
|
|
- this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts());
|
|
|
- this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts());
|
|
|
});
|
|
|
},
|
|
|
activated() {
|