|
@@ -50,10 +50,7 @@
|
|
|
<div class="card-containers">
|
|
|
<a-tabs type="card">
|
|
|
<a-tab-pane key="1">
|
|
|
- <span slot="tab">
|
|
|
- <a-icon type="unordered-list" />
|
|
|
- 大盘
|
|
|
- </span>
|
|
|
+ <span slot="tab"><a-icon type="unordered-list"/>大盘</span>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
<div class="option" style="justify-content: space-between">
|
|
@@ -81,16 +78,16 @@
|
|
|
<a-radio-button value="b" disabled>设计组</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
<a-select
|
|
|
+ v-model="dataDimensionValue"
|
|
|
style="width: 300px; margin-left: 10px"
|
|
|
mode="multiple"
|
|
|
:maxTagCount="2"
|
|
|
- v-model="dataDimensionValue"
|
|
|
- allowClear
|
|
|
:loading="specificLoading"
|
|
|
- showSearch
|
|
|
:filterOption="filterOption"
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
>
|
|
|
- <a-select-option value="no" disabled v-if="dataDimensionList.length == 0 && specificLoading">
|
|
|
+ <a-select-option v-if="dataDimensionList.length == 0 && specificLoading" value="no" disabled>
|
|
|
数据请求中,请稍后。。。
|
|
|
</a-select-option>
|
|
|
<a-select-option
|
|
@@ -105,18 +102,18 @@
|
|
|
</div>
|
|
|
<div class="item" style="float: right">
|
|
|
<a-button
|
|
|
- @click="handleSubmit"
|
|
|
- type="primary"
|
|
|
:loading="searchLoading"
|
|
|
:disabled="dateValue.length == 0"
|
|
|
+ type="primary"
|
|
|
+ @click="handleSubmit"
|
|
|
>
|
|
|
搜索
|
|
|
</a-button>
|
|
|
<a-button
|
|
|
- @click="resetSubmit"
|
|
|
- style="margin-left: 15px"
|
|
|
:disabled="spinning"
|
|
|
:loading="resetLoading"
|
|
|
+ style="margin-left: 15px"
|
|
|
+ @click="resetSubmit"
|
|
|
>
|
|
|
重置
|
|
|
</a-button>
|
|
@@ -165,8 +162,8 @@
|
|
|
<div class="report-card-result">
|
|
|
<div class="report-card-money">{{ materialReportCardList.videoTotal || 0 }}</div>
|
|
|
<div
|
|
|
+ id="accountIndexEchart"
|
|
|
class="accountIndexEchart"
|
|
|
- id="accountIndexEchart"
|
|
|
style="width:100%; height:50px; margin:0 auto;"
|
|
|
ref="accountIndexEchart"
|
|
|
>
|
|
@@ -249,8 +246,8 @@
|
|
|
>
|
|
|
</div>
|
|
|
<a-empty
|
|
|
- style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
|
|
|
v-if="chartList.length == 0"
|
|
|
+ style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -325,7 +322,6 @@
|
|
|
<img
|
|
|
:src="item.coverUrl || noImg"
|
|
|
style="width: auto; height: 100%; max-width: 100%; position: relative; z-index: 2"
|
|
|
- alt=""
|
|
|
srcset=""
|
|
|
@click="
|
|
|
visibleVideo = true
|
|
@@ -340,7 +336,7 @@
|
|
|
<p style="margin-left: 10px; color: #1890ff">
|
|
|
{{ item.materialName ? item.materialName : '无素材名称' }}
|
|
|
</p>
|
|
|
- <p style="margin-left: 10px; margin-bottom: 0" v-if="item.tag">
|
|
|
+ <p v-if="item.tag" style="margin-left: 10px; margin-bottom: 0">
|
|
|
<a-tag
|
|
|
v-for="(items, index) in item.tag.split(',')"
|
|
|
:key="index"
|
|
@@ -374,10 +370,10 @@
|
|
|
<a-table
|
|
|
:columns="columns"
|
|
|
:data-source="designTopList"
|
|
|
- bordered
|
|
|
- size="middle"
|
|
|
:loading="designTopLoading"
|
|
|
:pagination="false"
|
|
|
+ bordered
|
|
|
+ size="middle"
|
|
|
>
|
|
|
<span slot="cost" slot-scope="text, records">{{ text | decimalsHandle }}</span>
|
|
|
</a-table>
|
|
@@ -394,7 +390,6 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import moment from 'moment';
|
|
|
-import {getAction, postAction, downFile, downFilePost} from '@/api/manage';
|
|
|
import YoutTable from '@/components/youtTable/YoutTable';
|
|
|
import ChartCard from '@/components/ChartCard';
|
|
|
import Trend from '@/components/Trend';
|
|
@@ -407,7 +402,7 @@ const columnsFixd = [
|
|
|
title: '排名',
|
|
|
dataIndex: 'rowNumber',
|
|
|
align: 'center',
|
|
|
- customRender:(t, r, index)=> {
|
|
|
+ customRender:(t, r, index) => {
|
|
|
return index + 1;
|
|
|
}
|
|
|
},
|
|
@@ -445,11 +440,6 @@ export default {
|
|
|
visibleVideo: false,
|
|
|
videoUrlShow: '',
|
|
|
cost: '0',
|
|
|
- costLink: 0,
|
|
|
- videoTotal: '0',
|
|
|
- newVideo: 0,
|
|
|
- hotTotal: '0',
|
|
|
- xiaoTotal: '0',
|
|
|
spinning: false,
|
|
|
loading: false,
|
|
|
chartList: [],
|
|
@@ -472,8 +462,6 @@ export default {
|
|
|
dataDimensionValue: [],
|
|
|
dataDimensionList: [],
|
|
|
specificLoading: false,
|
|
|
- order: 'descend',
|
|
|
- target: 'cost',
|
|
|
clientWidth: 0,
|
|
|
resetLoading: false,
|
|
|
searchLoading: false
|
|
@@ -705,11 +693,11 @@ export default {
|
|
|
this.getChartDataList(),
|
|
|
this.getVideoTopList(),
|
|
|
this.getDesignTopList()
|
|
|
- ]).then((res) => {
|
|
|
+ ]).then(res => {
|
|
|
this.spinning = false;
|
|
|
this.resetLoading = false;
|
|
|
this.searchLoading = false;
|
|
|
- }).catch((error) => {
|
|
|
+ }).catch(error => {
|
|
|
this.spinning = false;
|
|
|
this.resetLoading = false;
|
|
|
this.searchLoading = false;
|
|
@@ -724,30 +712,28 @@ export default {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
this.postDataAction(
|
|
|
'/overView/getProjects?userId=' + this.userInfo().id + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
|
|
|
- ).then((res) => {
|
|
|
+ ).then(res => {
|
|
|
this.specificLoading = false;
|
|
|
if (res.success) {
|
|
|
this.dataDimensionList = res.result;
|
|
|
resolve(res.result);
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ else {
|
|
|
reject(res.message);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
getSumData() {
|
|
|
- var that = this;
|
|
|
+ let that = this;
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- that
|
|
|
- .postDataAction('/overView/sumData', {
|
|
|
+ that.postDataAction('/overView/sumData', {
|
|
|
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) => {
|
|
|
+ }).then(res => {
|
|
|
if (res.success) {
|
|
|
- console.log(res, 'res--res--res');
|
|
|
this.materialReportCardList = res.result;
|
|
|
this.initEchart('accountIndexEchart', this.initAccountIndexEchart(res.result));
|
|
|
this.initEchart('effectiveVideoEcharts', this.handleEffectiveVideoEcharts(res.result));
|
|
@@ -767,7 +753,7 @@ export default {
|
|
|
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) => {
|
|
|
+ }).then(res => {
|
|
|
if (res.success) {
|
|
|
this.chartList = res.result;
|
|
|
if (res.result.length == 0) {
|
|
@@ -822,7 +808,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
toDetail(md5) {
|
|
|
- var params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
|
|
|
+ let params = {md5: md5, mediaId: this.mediaDimension == 'a' ? 1 : 2};
|
|
|
localStorage.setItem('videoInfo', JSON.stringify(params));
|
|
|
this.$router.push({
|
|
|
path: '/materialReport/marterialDetail'
|
|
@@ -846,10 +832,11 @@ export default {
|
|
|
},
|
|
|
getTagProportionAnalyseList() {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- this.postDataAction('/overView/tagProportionAnalyse', {}).then((res) => {
|
|
|
+ this.postDataAction('/overView/tagProportionAnalyse', {}).then(res => {
|
|
|
if (res.success) {
|
|
|
resolve(res.result);
|
|
|
- } else {
|
|
|
+ }
|
|
|
+ else {
|
|
|
reject(res.message);
|
|
|
}
|
|
|
});
|
|
@@ -870,7 +857,7 @@ export default {
|
|
|
},
|
|
|
//获取echart的值
|
|
|
initEchart(idName, optionName) {
|
|
|
- var that = this;
|
|
|
+ let that = this;
|
|
|
const chart = this.$refs[idName];
|
|
|
if (chart) {
|
|
|
const myChart = echarts.init(document.getElementById(idName));
|
|
@@ -882,164 +869,150 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
handlerEchartOption(data) {
|
|
|
- var option = {
|
|
|
+ let option = {
|
|
|
noDataLoadingOption: {
|
|
|
- text: '暂无数据',
|
|
|
- effect: 'bubble',
|
|
|
- effectOption: {
|
|
|
- effect: {
|
|
|
- n: 0,
|
|
|
- },
|
|
|
- },
|
|
|
+ text: '暂无数据',
|
|
|
+ effect: 'bubble',
|
|
|
+ effectOption: {
|
|
|
+ effect: {
|
|
|
+ n: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- // title: {
|
|
|
- // text: '折线图堆叠'
|
|
|
- // },
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
+ trigger: 'axis'
|
|
|
},
|
|
|
- // legend: {
|
|
|
- // data: ['邮件营销', '联盟广告', ]
|
|
|
- // },
|
|
|
grid: {
|
|
|
- left: '3%',
|
|
|
- right: '4%',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
legend: {
|
|
|
- icon: 'circle',
|
|
|
- top: '5%',
|
|
|
- right: '5%',
|
|
|
- itemWidth: 6,
|
|
|
- itemGap: 20,
|
|
|
- textStyle: {
|
|
|
- color: '#556677',
|
|
|
- },
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- // feature: {
|
|
|
- // saveAsImage: {}
|
|
|
- // }
|
|
|
+ icon: 'circle',
|
|
|
+ top: '5%',
|
|
|
+ right: '5%',
|
|
|
+ itemWidth: 6,
|
|
|
+ itemGap: 20,
|
|
|
+ textStyle: {
|
|
|
+ color: '#556677'
|
|
|
+ }
|
|
|
},
|
|
|
xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data.map((item) => {
|
|
|
- return item.statDate
|
|
|
- }),
|
|
|
- boundaryGap: false,
|
|
|
- // 坐标轴线
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#999',
|
|
|
- },
|
|
|
- },
|
|
|
- // 分割线
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: '#e5e5e5',
|
|
|
+ type: 'category',
|
|
|
+ data: data.map(item => {
|
|
|
+ return item.statDate;
|
|
|
+ }),
|
|
|
+ boundaryGap: false,
|
|
|
+ // 坐标轴线
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
+ // 分割线
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#e5e5e5'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: '#999',
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: '#e5e5e5',
|
|
|
+ type: 'value',
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#999'
|
|
|
+ }
|
|
|
},
|
|
|
- },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dashed',
|
|
|
+ color: '#e5e5e5'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
series: [
|
|
|
- {
|
|
|
- smooth: true,
|
|
|
- name: '消耗',
|
|
|
- type: 'line',
|
|
|
- stack: '总量',
|
|
|
- data: data.map((item) => {
|
|
|
- return item.cost.toFixed(3)
|
|
|
- }),
|
|
|
- symbol: 'circle',
|
|
|
- symbolSize: 6,
|
|
|
- lineStyle: {
|
|
|
- normal: {
|
|
|
- width: 2,
|
|
|
- // color: '#0bcd74'
|
|
|
- },
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderColor: '#ffffff',
|
|
|
- borderWidth: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ {
|
|
|
+ smooth: true,
|
|
|
+ name: '消耗',
|
|
|
+ type: 'line',
|
|
|
+ stack: '总量',
|
|
|
+ data: data.map(item => {
|
|
|
+ return item.cost.toFixed(3);
|
|
|
+ }),
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 6,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ width: 2
|
|
|
+ }
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#ffffff',
|
|
|
+ borderWidth: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
return option;
|
|
|
},
|
|
|
handlerAgeOption(data) {
|
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'];
|
|
|
- var option = {
|
|
|
+ let option = {
|
|
|
color: colorList,
|
|
|
backgroundColor: '#fff',
|
|
|
-
|
|
|
tooltip: {
|
|
|
- formatter: '{b}:{c}',
|
|
|
+ formatter: '{b}:{c}'
|
|
|
},
|
|
|
-
|
|
|
legend: {
|
|
|
- orient: 'horizontal',
|
|
|
- top: 'top',
|
|
|
- icon: 'circle',
|
|
|
- width: '100%',
|
|
|
- data: ['形式标签', '场景标签', '基调标签', '其他'],
|
|
|
+ orient: 'horizontal',
|
|
|
+ top: 'top',
|
|
|
+ icon: 'circle',
|
|
|
+ width: '100%',
|
|
|
+ data: ['形式标签', '场景标签', '基调标签', '其他']
|
|
|
},
|
|
|
series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- center: ['50%', '50%'],
|
|
|
- data: [
|
|
|
- { value: 0, name: '形式标签' },
|
|
|
- { value: 0, name: '基调标签' },
|
|
|
- { value: 0, name: '场景标签' },
|
|
|
- { value: 0, name: '其他' },
|
|
|
- ],
|
|
|
- labelLine: {
|
|
|
- length: 5,
|
|
|
- length2: 5,
|
|
|
- },
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center',
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- fontSize: '18',
|
|
|
- fontWeight: 'bold',
|
|
|
- },
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 5,
|
|
|
- color: (params) => {
|
|
|
- return colorList[params.dataIndex]
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['40%', '70%'],
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ data: [
|
|
|
+ {value: 0, name: '形式标签'},
|
|
|
+ {value: 0, name: '基调标签'},
|
|
|
+ {value: 0, name: '场景标签'},
|
|
|
+ {value: 0, name: '其他'}
|
|
|
+ ],
|
|
|
+ labelLine: {
|
|
|
+ length: 5,
|
|
|
+ length2: 5
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '18',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5,
|
|
|
+ color: params => {
|
|
|
+ return colorList[params.dataIndex];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
};
|
|
|
return option;
|
|
|
},
|