|
@@ -92,7 +92,7 @@
|
|
</a-select-option>
|
|
</a-select-option>
|
|
<a-select-option
|
|
<a-select-option
|
|
v-for="(item, index) in dataDimensionList"
|
|
v-for="(item, index) in dataDimensionList"
|
|
- :key="index"
|
|
|
|
|
|
+ :key="index + 1"
|
|
:value="item.projectId"
|
|
:value="item.projectId"
|
|
>
|
|
>
|
|
{{ item.projectName }}
|
|
{{ item.projectName }}
|
|
@@ -134,14 +134,14 @@
|
|
<div class="report-card-msg">
|
|
<div class="report-card-msg">
|
|
<span>
|
|
<span>
|
|
同比
|
|
同比
|
|
- <a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
|
- <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
|
|
|
+ <a-icon v-if="materialReportCardList.yearOnYearCompare >= 0" type="caret-down" style="color: green"/>
|
|
|
|
+ <a-icon v-else type="caret-up" style="color: #f00"/>
|
|
{{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
|
|
{{ Number(materialReportCardList.yearOnYearCompare * 100).toFixed(2) }}%
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span>
|
|
日环比
|
|
日环比
|
|
- <a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-up" style="color: green"/>
|
|
|
|
- <a-icon v-else type="caret-down" style="color: #f00"/>
|
|
|
|
|
|
+ <a-icon v-if="materialReportCardList.chainCompare >= 0" type="caret-down" style="color: green"/>
|
|
|
|
+ <a-icon v-else type="caret-up" style="color: #f00"/>
|
|
{{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
|
|
{{ Number(materialReportCardList.chainCompare * 100).toFixed(2) }}%
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@@ -160,8 +160,9 @@
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
</span>
|
|
</span>
|
|
<div class="report-card-result">
|
|
<div class="report-card-result">
|
|
- <div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
|
|
|
|
|
|
+ <div class="report-card-money">{{ accountIndexList.videoTotal || 0 }}</div>
|
|
<div
|
|
<div
|
|
|
|
+ v-if="timeShowEchartsStatus"
|
|
id="accountIndexEchart"
|
|
id="accountIndexEchart"
|
|
class="accountIndexEchart"
|
|
class="accountIndexEchart"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
@@ -171,7 +172,7 @@
|
|
</div>
|
|
</div>
|
|
<div class="report-card-line"></div>
|
|
<div class="report-card-line"></div>
|
|
<div class="report-card-radio">
|
|
<div class="report-card-radio">
|
|
- <span>素材使用率:{{ Number(materialReportCardList.useCompare).toFixed(2) }}%</span>
|
|
|
|
|
|
+ <span>素材使用率:{{ Number(accountIndexList.useCompare).toFixed(2) }}%</span>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -183,8 +184,9 @@
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
</span>
|
|
</span>
|
|
<div class="report-card-result">
|
|
<div class="report-card-result">
|
|
- <div class="report-card-money">{{ materialReportCardList.effectiveTotal || 0 }}</div>
|
|
|
|
|
|
+ <div class="report-card-money">{{ accountIndexList.effectiveTotal || 0 }}</div>
|
|
<div
|
|
<div
|
|
|
|
+ v-if="timeShowEchartsStatus"
|
|
class="accountIndexEchart"
|
|
class="accountIndexEchart"
|
|
id="effectiveVideoEcharts"
|
|
id="effectiveVideoEcharts"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
@@ -194,7 +196,7 @@
|
|
</div>
|
|
</div>
|
|
<div class="report-card-line"></div>
|
|
<div class="report-card-line"></div>
|
|
<div class="report-card-radio">
|
|
<div class="report-card-radio">
|
|
- <span>素材有效率:{{ Number(materialReportCardList.effectiveCompare).toFixed(2) }}%</span>
|
|
|
|
|
|
+ <span>素材有效率:{{ Number(accountIndexList.effectiveCompare).toFixed(2) }}%</span>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -206,8 +208,9 @@
|
|
</a-tooltip>
|
|
</a-tooltip>
|
|
</span>
|
|
</span>
|
|
<div class="report-card-result">
|
|
<div class="report-card-result">
|
|
- <div class="report-card-money">{{ materialReportCardList.hotTotal }}</div>
|
|
|
|
|
|
+ <div class="report-card-money">{{ popularVideoList.hotTotal }}</div>
|
|
<div
|
|
<div
|
|
|
|
+ v-if="timeShowEchartsStatus"
|
|
class="accountIndexEchart"
|
|
class="accountIndexEchart"
|
|
id="popularVideoEcharts"
|
|
id="popularVideoEcharts"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
@@ -219,15 +222,15 @@
|
|
<div class="report-card-radio">
|
|
<div class="report-card-radio">
|
|
<span>
|
|
<span>
|
|
同比
|
|
同比
|
|
- <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) }}%
|
|
|
|
|
|
+ <a-icon v-if="popularVideoList.hotYearOnYearCompare >= 0" type="caret-down" style="color: green"/>
|
|
|
|
+ <a-icon v-else type="caret-up" style="color: #f00"/>
|
|
|
|
+ {{ Number(popularVideoList.hotYearOnYearCompare * 100).toFixed(2) }}%
|
|
</span>
|
|
</span>
|
|
<span>
|
|
<span>
|
|
日环比
|
|
日环比
|
|
- <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) }}%
|
|
|
|
|
|
+ <a-icon v-if="popularVideoList.hostCompare >= 0" type="caret-down" style="color: green"/>
|
|
|
|
+ <a-icon v-else type="caret-up" style="color: #f00"/>
|
|
|
|
+ {{ Number(popularVideoList.hostCompare * 100).toFixed(2) }}%
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
@@ -283,9 +286,9 @@
|
|
<a-radio-button :value="1">素造</a-radio-button>
|
|
<a-radio-button :value="1">素造</a-radio-button>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
<a slot="extra" @click="getMoreVideoList">查看更多</a>
|
|
<a slot="extra" @click="getMoreVideoList">查看更多</a>
|
|
- <div v-if="videoList.length > 0">
|
|
|
|
|
|
+ <div v-if="!signatureStatus && videoList.length > 0">
|
|
<ul class="top-ul-style">
|
|
<ul class="top-ul-style">
|
|
- <li v-for="(item, index) in videoList" :key="index">
|
|
|
|
|
|
+ <li v-for="(item, index) in videoList" :key="item.signature">
|
|
<div style="display: flex; position: relative; width: 80%; cursor: pointer">
|
|
<div style="display: flex; position: relative; width: 80%; cursor: pointer">
|
|
<span style="position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px">
|
|
<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"/>
|
|
<img :src="require('./image/' + (index + 1) + '.png')" alt="" style="width: 25px; height: auto"/>
|
|
@@ -338,10 +341,10 @@
|
|
</p>
|
|
</p>
|
|
<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
|
|
<p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
|
|
<a-tag
|
|
<a-tag
|
|
- v-for="(items, index) in item.tag.split(',')"
|
|
|
|
- :key="index"
|
|
|
|
|
|
+ v-for="(items, val) in item.tag.split(',')"
|
|
|
|
+ :key="val + 1"
|
|
style="margin-right: 5px"
|
|
style="margin-right: 5px"
|
|
- v-if="index <= 3"
|
|
|
|
|
|
+ v-if="val <= 3"
|
|
>
|
|
>
|
|
{{ items }}
|
|
{{ items }}
|
|
</a-tag>
|
|
</a-tag>
|
|
@@ -355,6 +358,7 @@
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</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;">
|
|
<div v-else style="height: 200px;line-height: 200px;text-align: center;">
|
|
<a-spin/>
|
|
<a-spin/>
|
|
</div>
|
|
</div>
|
|
@@ -402,7 +406,7 @@ const columnsFixd = [
|
|
title: '排名',
|
|
title: '排名',
|
|
dataIndex: 'rowNumber',
|
|
dataIndex: 'rowNumber',
|
|
align: 'center',
|
|
align: 'center',
|
|
- customRender:(t, r, index) => {
|
|
|
|
|
|
+ customRender: (t, r, index) => {
|
|
return index + 1;
|
|
return index + 1;
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -432,7 +436,11 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ timeShowEchartsStatus: true,
|
|
|
|
+ signatureStatus: false,
|
|
materialReportCardList: {},
|
|
materialReportCardList: {},
|
|
|
|
+ accountIndexList: {},
|
|
|
|
+ popularVideoList: {},
|
|
materialRankValue: 0,
|
|
materialRankValue: 0,
|
|
designRankingValue: 1,
|
|
designRankingValue: 1,
|
|
designTopLoading: false,
|
|
designTopLoading: false,
|
|
@@ -690,6 +698,8 @@ export default {
|
|
this.spinning = true
|
|
this.spinning = true
|
|
Promise.all([
|
|
Promise.all([
|
|
this.getSumData(),
|
|
this.getSumData(),
|
|
|
|
+ this.getAccountIndexData(),
|
|
|
|
+ this.getPopularVideoData(),
|
|
this.getChartDataList(),
|
|
this.getChartDataList(),
|
|
this.getVideoTopList(),
|
|
this.getVideoTopList(),
|
|
this.getDesignTopList()
|
|
this.getDesignTopList()
|
|
@@ -716,6 +726,18 @@ export default {
|
|
this.specificLoading = false;
|
|
this.specificLoading = false;
|
|
if (res.success) {
|
|
if (res.success) {
|
|
this.dataDimensionList = res.result;
|
|
this.dataDimensionList = res.result;
|
|
|
|
+ // 找到重复的数据
|
|
|
|
+ // const changeData = res.result.map(item => item.projectId);
|
|
|
|
+ // let rep = [];
|
|
|
|
+ // changeData.forEach((item,index)=>{
|
|
|
|
+ // if(changeData.indexOf(item)!=index){ // 匹配数组元素第一个item位置和当前循环的index
|
|
|
|
+ // let obj = {};
|
|
|
|
+ // obj.key = (changeData.indexOf(item) + 1) + '|' + (index + 1); // 用'|'分隔两个重复项的下标
|
|
|
|
+ // obj.value = item;
|
|
|
|
+ // rep.push(obj);
|
|
|
|
+ // }
|
|
|
|
+ // });
|
|
|
|
+ // console.log(rep, 'newArr--newArr');
|
|
resolve(res.result);
|
|
resolve(res.result);
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
@@ -735,8 +757,46 @@ export default {
|
|
}).then(res => {
|
|
}).then(res => {
|
|
if (res.success) {
|
|
if (res.success) {
|
|
this.materialReportCardList = res.result;
|
|
this.materialReportCardList = res.result;
|
|
|
|
+ resolve(res.result);
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ reject(res.message);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getAccountIndexData() {
|
|
|
|
+ let that = this;
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ that.postDataAction('/overView/sumDataVideoNewEffective', {
|
|
|
|
+ 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 => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.accountIndexList = res.result;
|
|
this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
|
|
this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
|
|
this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
|
|
this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
|
|
|
|
+ resolve(res.result);
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ reject(res.message);
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ getPopularVideoData() {
|
|
|
|
+ let that = this;
|
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
|
+ that.postDataAction('/overView/sumDataVideoHot', {
|
|
|
|
+ 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 => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ this.popularVideoList = res.result;
|
|
this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
|
|
this.initEchart('popularVideoEcharts', this.handlePopularVideoEcharts(res.result));
|
|
resolve(res.result);
|
|
resolve(res.result);
|
|
}
|
|
}
|
|
@@ -772,6 +832,7 @@ export default {
|
|
},
|
|
},
|
|
getVideoTopList() {
|
|
getVideoTopList() {
|
|
this.videoList = []
|
|
this.videoList = []
|
|
|
|
+ this.signatureStatus = true;
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
this.postDataAction('/overView/materialTop', {
|
|
this.postDataAction('/overView/materialTop', {
|
|
mediaId: this.mediaDimension == 'a' ? 1 : 2,
|
|
mediaId: this.mediaDimension == 'a' ? 1 : 2,
|
|
@@ -780,13 +841,16 @@ export default {
|
|
channelType: this.materialRankValue,
|
|
channelType: this.materialRankValue,
|
|
projects: this.dataDimensionValue
|
|
projects: this.dataDimensionValue
|
|
}).then(res => {
|
|
}).then(res => {
|
|
|
|
+ this.signatureStatus = false;
|
|
if (res.success) {
|
|
if (res.success) {
|
|
- this.videoList = res.result;
|
|
|
|
|
|
+ this.videoList = res.result || [];
|
|
resolve(res.result);
|
|
resolve(res.result);
|
|
}
|
|
}
|
|
else {
|
|
else {
|
|
reject(res.message);
|
|
reject(res.message);
|
|
}
|
|
}
|
|
|
|
+ }).catch(error => {
|
|
|
|
+ this.signatureStatus = false;
|
|
});
|
|
});
|
|
});
|
|
});
|
|
},
|
|
},
|
|
@@ -845,6 +909,14 @@ export default {
|
|
handleSubmit() {
|
|
handleSubmit() {
|
|
this.spinning = true;
|
|
this.spinning = true;
|
|
this.searchLoading = true;
|
|
this.searchLoading = true;
|
|
|
|
+ const dataOne = new Date(this.dateValue[0]).getTime();
|
|
|
|
+ const dataTwo = new Date(this.dateValue[1]).getTime();
|
|
|
|
+ if (dataTwo === dataOne) {
|
|
|
|
+ this.timeShowEchartsStatus = false;
|
|
|
|
+ }
|
|
|
|
+ else {
|
|
|
|
+ this.timeShowEchartsStatus = true;
|
|
|
|
+ }
|
|
this.getData();
|
|
this.getData();
|
|
},
|
|
},
|
|
resetSubmit() {
|
|
resetSubmit() {
|