|
@@ -239,9 +239,21 @@
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
|
|
+ </a-spin>
|
|
|
|
+ <a-spin :spinning="spinningChart">
|
|
<a-row :gutter="24" style="margin-top: 20px" id="getWidth">
|
|
<a-row :gutter="24" style="margin-top: 20px" id="getWidth">
|
|
<a-col :xl="18">
|
|
<a-col :xl="18">
|
|
<a-card title="数据趋势" style="width: 100%" :bordered="false">
|
|
<a-card title="数据趋势" style="width: 100%" :bordered="false">
|
|
|
|
+ <a-tabs v-model="active" @change="callback">
|
|
|
|
+ <a-tab-pane key="cost" tab="消耗">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="active" tab="激活数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="aclick" tab="曝光数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <!-- <a-tab-pane key="play_duration_3s" tab="3S播放率">
|
|
|
|
+ </a-tab-pane> -->
|
|
|
|
+ </a-tabs>
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<div class="echartBody">
|
|
<div class="echartBody">
|
|
<div
|
|
<div
|
|
@@ -261,6 +273,16 @@
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :xl="6">
|
|
<a-col :xl="6">
|
|
<a-card title="标签占比" style="width: 100%" :bordered="false">
|
|
<a-card title="标签占比" style="width: 100%" :bordered="false">
|
|
|
|
+ <a-tabs v-model="active" @change="callback" style="visibility:hidden;">
|
|
|
|
+ <a-tab-pane key="cost" tab="消耗">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="active" tab="激活数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="aclick" tab="曝光数">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane key="play_duration_3s" tab="3S播放率">
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ </a-tabs>
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<div class="echartBody">
|
|
<div class="echartBody">
|
|
<a-empty style="height: 350px; position: relative" />
|
|
<a-empty style="height: 350px; position: relative" />
|
|
@@ -276,118 +298,119 @@
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
- <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-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="!signatureStatus && videoList.length > 0">
|
|
|
|
- <ul class="top-ul-style">
|
|
|
|
- <li v-for="(item, index) in videoList" :key="item.signature">
|
|
|
|
- <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-spin>
|
|
|
|
+ <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-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="!signatureStatus && videoList.length > 0">
|
|
|
|
+ <ul class="top-ul-style">
|
|
|
|
+ <li v-for="(item, index) in videoList" :key="item.signature">
|
|
|
|
+ <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
|
|
<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"
|
|
|
|
- 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 v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
|
|
|
|
- <a-tag
|
|
|
|
- v-for="(items, val) in item.tag.split(',')"
|
|
|
|
- :key="val + 1"
|
|
|
|
- style="margin-right: 5px"
|
|
|
|
- v-if="val <= 3"
|
|
|
|
- >
|
|
|
|
- {{ items }}
|
|
|
|
- </a-tag>
|
|
|
|
- </p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
+ <img
|
|
|
|
+ :src="item.coverUrl || noImg"
|
|
|
|
+ style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
|
|
|
|
+ srcset=""
|
|
|
|
+ @click="
|
|
|
|
+ visibleVideo = true
|
|
|
|
+ videoUrlShow = item.url
|
|
|
|
+ "
|
|
|
|
+ />
|
|
</div>
|
|
</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 v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
|
|
|
|
+ <a-tag
|
|
|
|
+ v-for="(items, val) in item.tag.split(',')"
|
|
|
|
+ :key="val + 1"
|
|
|
|
+ style="margin-right: 5px"
|
|
|
|
+ v-if="val <= 3"
|
|
|
|
+ >
|
|
|
|
+ {{ items }}
|
|
|
|
+ </a-tag>
|
|
|
|
+ </p>
|
|
</div>
|
|
</div>
|
|
- </li>
|
|
|
|
- </ul>
|
|
|
|
- </div>
|
|
|
|
- <a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%"/>
|
|
|
|
- <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-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"
|
|
|
|
- :loading="designTopLoading"
|
|
|
|
- :pagination="false"
|
|
|
|
- bordered
|
|
|
|
- size="middle"
|
|
|
|
- >
|
|
|
|
- <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
|
|
|
|
- </a-table>
|
|
|
|
- </a-card>
|
|
|
|
- </a-col>
|
|
|
|
- </a-row>
|
|
|
|
- </a-spin>
|
|
|
|
|
|
+ </div>
|
|
|
|
+ <div class="li-cost">
|
|
|
|
+ <span>消耗</span>
|
|
|
|
+ <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <a-empty v-else-if="!signatureStatus && videoList.length === 0" style="margin-top: 20%"/>
|
|
|
|
+ <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-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"
|
|
|
|
+ :loading="designTopLoading"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ bordered
|
|
|
|
+ size="middle"
|
|
|
|
+ >
|
|
|
|
+ <span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
|
|
|
|
+ </a-table>
|
|
|
|
+ </a-card>
|
|
|
|
+ </a-col>
|
|
|
|
+ </a-row>
|
|
|
|
+
|
|
<a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
|
|
<a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
|
|
<video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
|
|
<video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
|
|
您的浏览器不支持 video 标签。
|
|
您的浏览器不支持 video 标签。
|
|
@@ -439,6 +462,7 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ active:'cost',
|
|
timeShowEchartsStatus: true,
|
|
timeShowEchartsStatus: true,
|
|
signatureStatus: false,
|
|
signatureStatus: false,
|
|
materialReportCardList: {},
|
|
materialReportCardList: {},
|
|
@@ -452,6 +476,7 @@ export default {
|
|
videoUrlShow: '',
|
|
videoUrlShow: '',
|
|
cost: '0',
|
|
cost: '0',
|
|
spinning: false,
|
|
spinning: false,
|
|
|
|
+ spinningChart:false,
|
|
loading: false,
|
|
loading: false,
|
|
chartList: [],
|
|
chartList: [],
|
|
videoList: [],
|
|
videoList: [],
|
|
@@ -699,13 +724,16 @@ export default {
|
|
},
|
|
},
|
|
getData() {
|
|
getData() {
|
|
this.spinning = true
|
|
this.spinning = true
|
|
|
|
+ this.spinningChart = true
|
|
|
|
+ this.active = 'cost'
|
|
|
|
+ this.getAccountIndexData()
|
|
|
|
+ this.getPopularVideoData()
|
|
|
|
+ this.getChartDataList()
|
|
|
|
+ this.getVideoTopList()
|
|
|
|
+ this.getDesignTopList()
|
|
Promise.all([
|
|
Promise.all([
|
|
this.getSumData(),
|
|
this.getSumData(),
|
|
- this.getAccountIndexData(),
|
|
|
|
- this.getPopularVideoData(),
|
|
|
|
- this.getChartDataList(),
|
|
|
|
- this.getVideoTopList(),
|
|
|
|
- this.getDesignTopList()
|
|
|
|
|
|
+
|
|
]).then(res => {
|
|
]).then(res => {
|
|
this.spinning = false;
|
|
this.spinning = false;
|
|
this.resetLoading = false;
|
|
this.resetLoading = false;
|
|
@@ -714,10 +742,10 @@ export default {
|
|
this.spinning = false;
|
|
this.spinning = false;
|
|
this.resetLoading = false;
|
|
this.resetLoading = false;
|
|
this.searchLoading = false;
|
|
this.searchLoading = false;
|
|
- this.$error({
|
|
|
|
- title: '页面数据加载出错',
|
|
|
|
- content: '请刷新重试或联系管理员查询'
|
|
|
|
- });
|
|
|
|
|
|
+ // this.$error({
|
|
|
|
+ // title: '页面数据加载出错',
|
|
|
|
+ // content: '请刷新重试或联系管理员查询'
|
|
|
|
+ // });
|
|
});
|
|
});
|
|
},
|
|
},
|
|
getProjectList() {
|
|
getProjectList() {
|
|
@@ -862,6 +890,9 @@ export default {
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ callback(){
|
|
|
|
+ this.initEchart('echart', this.handlerEchartOption(this.chartList, this.active));
|
|
|
|
+ },
|
|
getChartDataList() {
|
|
getChartDataList() {
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
this.postDataAction('/overView/chartData', {
|
|
this.postDataAction('/overView/chartData', {
|
|
@@ -870,6 +901,7 @@ export default {
|
|
endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
|
|
endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
|
|
projects: this.dataDimensionValue
|
|
projects: this.dataDimensionValue
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
|
+ this.spinningChart = false
|
|
if (res.success) {
|
|
if (res.success) {
|
|
this.chartList = res.result;
|
|
this.chartList = res.result;
|
|
if (res.result.length == 0) {
|
|
if (res.result.length == 0) {
|
|
@@ -877,7 +909,7 @@ export default {
|
|
myChart.dispose();
|
|
myChart.dispose();
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
- this.initEchart('echart', this.handlerEchartOption(res.result));
|
|
|
|
|
|
+ this.initEchart('echart', this.handlerEchartOption(res.result, 'cost'));
|
|
}
|
|
}
|
|
resolve(res.result);
|
|
resolve(res.result);
|
|
} else {
|
|
} else {
|
|
@@ -947,6 +979,9 @@ export default {
|
|
if (res.success) {
|
|
if (res.success) {
|
|
this.designTopLoading = false;
|
|
this.designTopLoading = false;
|
|
this.designTopList = res.result;
|
|
this.designTopList = res.result;
|
|
|
|
+ }else{
|
|
|
|
+ this.designTopLoading = false;
|
|
|
|
+ this.$message.error(this.message)
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -996,7 +1031,7 @@ export default {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- handlerEchartOption(data) {
|
|
|
|
|
|
+ handlerEchartOption(data, typeShow) {
|
|
let option = {
|
|
let option = {
|
|
noDataLoadingOption: {
|
|
noDataLoadingOption: {
|
|
text: '暂无数据',
|
|
text: '暂无数据',
|
|
@@ -1008,7 +1043,15 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: 'axis'
|
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ // formatter: function(params) {
|
|
|
|
+ // if(typeShow == 'play_duration_3s'){
|
|
|
|
+ // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}%`
|
|
|
|
+ // }else{
|
|
|
|
+ // return `${params[0].marker}${params[0].name}<br/>${params[0].seriesName}:${params[0].value}`
|
|
|
|
+ // }
|
|
|
|
+
|
|
|
|
+ // },
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
left: '3%',
|
|
left: '3%',
|
|
@@ -1066,11 +1109,25 @@ export default {
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
smooth: true,
|
|
smooth: true,
|
|
- name: '消耗',
|
|
|
|
|
|
+ name: typeShow == 'cost'?'消耗':typeShow == 'aclick'?'曝光数':typeShow == 'active'?'激活数':'3S播放率',
|
|
type: 'line',
|
|
type: 'line',
|
|
stack: '总量',
|
|
stack: '总量',
|
|
data: data.map(item => {
|
|
data: data.map(item => {
|
|
- return item.cost.toFixed(3);
|
|
|
|
|
|
+ switch (typeShow) {
|
|
|
|
+ case 'cost':
|
|
|
|
+ return item.cost.toFixed(3);
|
|
|
|
+ break;
|
|
|
|
+ case 'aclick':
|
|
|
|
+ return item.aclick
|
|
|
|
+ break;
|
|
|
|
+ case 'active':
|
|
|
|
+ return item.active
|
|
|
|
+ break;
|
|
|
|
+ case 'play_duration_3s':
|
|
|
|
+ return item.play_duration_3s.slice(0,item.play_duration_3s.length-1)
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+
|
|
}),
|
|
}),
|
|
symbol: 'circle',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
symbolSize: 6,
|