|
@@ -86,6 +86,9 @@
|
|
showSearch
|
|
showSearch
|
|
:filterOption="filterOption"
|
|
:filterOption="filterOption"
|
|
>
|
|
>
|
|
|
|
+ <a-select-option value="no" disabled v-if="dataDimensionList.length==0&&specificLoading">
|
|
|
|
+ 数据请求中,请稍后。。。
|
|
|
|
+ </a-select-option>
|
|
<a-select-option v-for="(item, index) in dataDimensionList" :key="index" :value="item.projectId">
|
|
<a-select-option v-for="(item, index) in dataDimensionList" :key="index" :value="item.projectId">
|
|
{{ item.projectName }}
|
|
{{ item.projectName }}
|
|
</a-select-option>
|
|
</a-select-option>
|
|
@@ -94,8 +97,10 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="item" style="float: right">
|
|
<div class="item" style="float: right">
|
|
- <a-button @click="handleSubmit" type="primary" :loading="spinning">搜索</a-button>
|
|
|
|
- <a-button @click="handleSubmit" style="margin-left: 15px" :loading="spinning">重置</a-button>
|
|
|
|
|
|
+ <a-button @click="handleSubmit" type="primary" :loading="spinning" :disabled="dateValue.length == 0"
|
|
|
|
+ >搜索</a-button
|
|
|
|
+ >
|
|
|
|
+ <a-button @click="resetSubmit" style="margin-left: 15px" :loading="spinning">重置</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -113,7 +118,7 @@
|
|
</trend> -->
|
|
</trend> -->
|
|
<trend :flag="costLink > 0 ? 'up' : 'down'">
|
|
<trend :flag="costLink > 0 ? 'up' : 'down'">
|
|
<span slot="term">环比</span>
|
|
<span slot="term">环比</span>
|
|
- {{ costLink * 100 }}%
|
|
|
|
|
|
+ {{ (costLink * 100).toFixed(2) }}%
|
|
</trend>
|
|
</trend>
|
|
</div>
|
|
</div>
|
|
<!-- <template slot="footer">
|
|
<!-- <template slot="footer">
|
|
@@ -176,14 +181,21 @@
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
|
|
|
|
- <a-row :gutter="24" style="margin-top: 20px">
|
|
|
|
|
|
+ <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">
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<div class="echartBody">
|
|
<div class="echartBody">
|
|
- <div id="echart" ref="echart" style="width: 100%; height: 350px">
|
|
|
|
- <!-- <a-empty style="position: relative; top: 50%; margin-top: -65px" /> -->
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div
|
|
|
|
+ id="echart"
|
|
|
|
+ ref="echart"
|
|
|
|
+ style="height: 350px"
|
|
|
|
+ :style="{ width: (clientWidth / 24) * 18 - 48 - 24 + 'px' }"
|
|
|
|
+ ></div>
|
|
|
|
+ <a-empty
|
|
|
|
+ style="width: 100%; height: 350px; position: absolute; top: 30%; z-index: 100; left: 0"
|
|
|
|
+ v-if="chartList.length == 0"
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-card>
|
|
</a-card>
|
|
@@ -192,7 +204,12 @@
|
|
<a-card title="标签占比" style="width: 100%" :bordered="false">
|
|
<a-card title="标签占比" style="width: 100%" :bordered="false">
|
|
<div class="echart">
|
|
<div class="echart">
|
|
<div class="echartBody">
|
|
<div class="echartBody">
|
|
- <div id="echartCircular" ref="echartCircular" style="width: 100%; height: 350px">
|
|
|
|
|
|
+ <div
|
|
|
|
+ id="echartCircular"
|
|
|
|
+ ref="echartCircular"
|
|
|
|
+ style="height: 350px"
|
|
|
|
+ :style="{ width: (clientWidth / 24) * 6 - 48 - 24 + 'px' }"
|
|
|
|
+ >
|
|
<!-- <a-empty style="position: relative; top: 50%; margin-top: -65px" /> -->
|
|
<!-- <a-empty style="position: relative; top: 50%; margin-top: -65px" /> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -203,9 +220,9 @@
|
|
|
|
|
|
<a-row :gutter="24" style="margin-top: 20px">
|
|
<a-row :gutter="24" style="margin-top: 20px">
|
|
<a-col :xl="12">
|
|
<a-col :xl="12">
|
|
- <a-card title="top素材排行榜" style="width: 100%; min-height: 600px" :bordered="false">
|
|
|
|
- <a slot="extra" href="#">查看更多</a>
|
|
|
|
- <ul class="top-ul-style">
|
|
|
|
|
|
+ <a-card title="top素材排行榜" style="width: 100%; min-height: 700px" :bordered="false">
|
|
|
|
+ <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">
|
|
<li v-for="(item, index) in videoList" :key="index">
|
|
<div style="display: flex; position: relative; width: 80%">
|
|
<div style="display: flex; position: relative; width: 80%">
|
|
<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"
|
|
@@ -219,32 +236,48 @@
|
|
videoUrlShow = item.url
|
|
videoUrlShow = item.url
|
|
"
|
|
"
|
|
>
|
|
>
|
|
- <img :src="item.coverUrl||noImg" style="width: auto; height: 100%" alt="" srcset="" />
|
|
|
|
|
|
+ <img
|
|
|
|
+ :src="item.coverUrl || noImg"
|
|
|
|
+ style="width: auto; height: 100%; max-width: 100%"
|
|
|
|
+ alt=""
|
|
|
|
+ srcset=""
|
|
|
|
+ />
|
|
</div>
|
|
</div>
|
|
- <div style="display: flex; flex-flow: column; justify-content: space-between">
|
|
|
|
- <p style="margin-left: 10px">{{ 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">{{items}}</a-tag>
|
|
|
|
|
|
+ <div
|
|
|
|
+ style="display: flex; flex-flow: column; justify-content: space-between; width: 60%"
|
|
|
|
+ @click.stop="toDetail(item.signature)"
|
|
|
|
+ >
|
|
|
|
+ <p style="margin-left: 10px">{{ 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">{{
|
|
|
|
+ items
|
|
|
|
+ }}</a-tag>
|
|
</p>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="li-cost">
|
|
<div class="li-cost">
|
|
<span>消耗</span>
|
|
<span>消耗</span>
|
|
- <span>{{ (item.charge?item.charge:item.cost) | decimalsHandle }}</span>
|
|
|
|
|
|
+ <span>{{ (item.charge ? item.charge : item.cost) | decimalsHandle }}</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</li>
|
|
</ul>
|
|
</ul>
|
|
|
|
+ <a-empty v-else style="margin-top: 20%" />
|
|
</a-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
<a-col :xl="12">
|
|
<a-col :xl="12">
|
|
- <a-card title="top设计排行榜" style="width: 100%; min-height: 600px" :bordered="false">
|
|
|
|
- <ul class="top-ul-style">
|
|
|
|
- <li>card content</li>
|
|
|
|
- <li>card content</li>
|
|
|
|
- <li>card content</li>
|
|
|
|
- <li>card content</li>
|
|
|
|
- <li>card content</li>
|
|
|
|
- </ul>
|
|
|
|
|
|
+ <a-card title="top设计排行榜" style="width: 100%; min-height: 700px" :bordered="false">
|
|
|
|
+ <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-card>
|
|
</a-card>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
@@ -270,36 +303,28 @@ var echarts = require('echarts')
|
|
const columnsFixd = [
|
|
const columnsFixd = [
|
|
{
|
|
{
|
|
title: '排名',
|
|
title: '排名',
|
|
- dataIndex: 'date',
|
|
|
|
- scopedSlots: { customRender: 'date' },
|
|
|
|
|
|
+ dataIndex: 'rowNumber',
|
|
|
|
+ scopedSlots: { customRender: 'rowNumber' },
|
|
align: 'center',
|
|
align: 'center',
|
|
key: 'date',
|
|
key: 'date',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '设计人员',
|
|
title: '设计人员',
|
|
- dataIndex: 'accountId',
|
|
|
|
|
|
+ dataIndex: 'userName',
|
|
align: 'center',
|
|
align: 'center',
|
|
- scopedSlots: { customRender: 'accountId' },
|
|
|
|
|
|
+ scopedSlots: { customRender: 'userName' },
|
|
},
|
|
},
|
|
{
|
|
{
|
|
title: '角色',
|
|
title: '角色',
|
|
- dataIndex: 'authName',
|
|
|
|
|
|
+ dataIndex: 'roleName',
|
|
align: 'center',
|
|
align: 'center',
|
|
},
|
|
},
|
|
{
|
|
{
|
|
- title: '消耗',
|
|
|
|
|
|
+ title: '消耗(元)',
|
|
dataIndex: 'cost',
|
|
dataIndex: 'cost',
|
|
align: 'center',
|
|
align: 'center',
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '有效视频',
|
|
|
|
- dataIndex: 'valid',
|
|
|
|
- align: 'center',
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '爆款视频',
|
|
|
|
- dataIndex: 'authName',
|
|
|
|
- align: 'hot',
|
|
|
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
|
+ sorter: () => {},
|
|
},
|
|
},
|
|
]
|
|
]
|
|
export default {
|
|
export default {
|
|
@@ -310,7 +335,8 @@ export default {
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- noImg:require('@/assets/noImg.png'),
|
|
|
|
|
|
+ designTopLoading: false,
|
|
|
|
+ noImg: require('@/assets/noImg.png'),
|
|
visibleVideo: false,
|
|
visibleVideo: false,
|
|
videoUrlShow: '',
|
|
videoUrlShow: '',
|
|
cost: '0',
|
|
cost: '0',
|
|
@@ -321,8 +347,10 @@ export default {
|
|
xiaoTotal: '0',
|
|
xiaoTotal: '0',
|
|
spinning: false,
|
|
spinning: false,
|
|
loading: false,
|
|
loading: false,
|
|
|
|
+ chartList: [],
|
|
videoList: [],
|
|
videoList: [],
|
|
- column: [...columnsFixd], //table的表头
|
|
|
|
|
|
+ designTopList: [],
|
|
|
|
+ columns: [...columnsFixd], //table的表头
|
|
columnsFixd,
|
|
columnsFixd,
|
|
ipagination: {
|
|
ipagination: {
|
|
current: 1,
|
|
current: 1,
|
|
@@ -332,8 +360,8 @@ export default {
|
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
},
|
|
},
|
|
showQuickJumper: true,
|
|
showQuickJumper: true,
|
|
- showSizeChanger: true,
|
|
|
|
- pageSizeOptions: ['10', '30', '50'],
|
|
|
|
|
|
+ // showSizeChanger: true,
|
|
|
|
+ // pageSizeOptions: ['10', '30', '50'],
|
|
total: 0,
|
|
total: 0,
|
|
onChange: (current, pageSize) => {
|
|
onChange: (current, pageSize) => {
|
|
// 切换分页时的回调,
|
|
// 切换分页时的回调,
|
|
@@ -357,6 +385,9 @@ export default {
|
|
dataDimensionValue: [],
|
|
dataDimensionValue: [],
|
|
dataDimensionList: [],
|
|
dataDimensionList: [],
|
|
specificLoading: false,
|
|
specificLoading: false,
|
|
|
|
+ order: 'descend',
|
|
|
|
+ target: 'cost',
|
|
|
|
+ clientWidth: 0,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
watch: {
|
|
watch: {
|
|
@@ -366,20 +397,35 @@ export default {
|
|
closeAllVideoFun()
|
|
closeAllVideoFun()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ 'ipagination.current': function (n, o) {
|
|
|
|
+ if (n != o) {
|
|
|
|
+ this.getDesignTopList()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
...mapGetters(['userInfo']),
|
|
...mapGetters(['userInfo']),
|
|
filterOption(input, option) {
|
|
filterOption(input, option) {
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
},
|
|
},
|
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }) {
|
|
|
|
+ // console.log(pagination, filters, sorter)
|
|
|
|
+ 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() {
|
|
getData() {
|
|
this.spinning = true
|
|
this.spinning = true
|
|
|
|
+ this.initEchart('echartCircular', this.handlerAgeOption([]))
|
|
Promise.all([
|
|
Promise.all([
|
|
- this.getProjectList(),
|
|
|
|
this.getSumData(),
|
|
this.getSumData(),
|
|
this.getChartDataList(),
|
|
this.getChartDataList(),
|
|
this.getVideoTopList(),
|
|
this.getVideoTopList(),
|
|
- // this.getDesignTopList(),
|
|
|
|
|
|
+ this.getDesignTopList({ target: 'cost', order: 'descend' }),
|
|
// this.getTagProportionAnalyseList(),
|
|
// this.getTagProportionAnalyseList(),
|
|
])
|
|
])
|
|
.then((res) => {
|
|
.then((res) => {
|
|
@@ -422,12 +468,12 @@ export default {
|
|
})
|
|
})
|
|
.then((res) => {
|
|
.then((res) => {
|
|
if (res.success) {
|
|
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
|
|
|
|
|
|
+ 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'
|
|
resolve(res.result)
|
|
resolve(res.result)
|
|
} else {
|
|
} else {
|
|
reject(res.message)
|
|
reject(res.message)
|
|
@@ -444,7 +490,14 @@ export default {
|
|
projects: this.dataDimensionValue,
|
|
projects: this.dataDimensionValue,
|
|
}).then((res) => {
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
if (res.success) {
|
|
- this.initEchart('echart', this.handlerEchartOption(res.result))
|
|
|
|
|
|
+ this.chartList = res.result
|
|
|
|
+ if (res.result.length == 0) {
|
|
|
|
+ const myChart = echarts.init(document.getElementById('echart'))
|
|
|
|
+ myChart.dispose()
|
|
|
|
+ } else {
|
|
|
|
+ this.initEchart('echart', this.handlerEchartOption(res.result))
|
|
|
|
+ }
|
|
|
|
+
|
|
resolve(res.result)
|
|
resolve(res.result)
|
|
} else {
|
|
} else {
|
|
reject(res.message)
|
|
reject(res.message)
|
|
@@ -470,17 +523,75 @@ export default {
|
|
})
|
|
})
|
|
})
|
|
})
|
|
},
|
|
},
|
|
- getDesignTopList() {
|
|
|
|
|
|
+ getMoreVideoList() {
|
|
|
|
+ // this.postDataAction('/overView/materialTopViewMore', {
|
|
|
|
+ // 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,
|
|
|
|
+ // channelType: null,
|
|
|
|
+ // md5: null,
|
|
|
|
+ // target: null,
|
|
|
|
+ // order: null,
|
|
|
|
+ // pageSize: '5',
|
|
|
|
+ // pageNo: '1',
|
|
|
|
+ // }).then((res) => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ // })
|
|
|
|
+ var params = {
|
|
|
|
+ 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,
|
|
|
|
+ }
|
|
|
|
+ params = JSON.stringify(params)
|
|
|
|
+ localStorage.setItem('materialParams', params)
|
|
|
|
+ if (this.mediaDimension == 'a') {
|
|
|
|
+ this.$router.push({ path: '/materialReport/marterialTtList' })
|
|
|
|
+ } else {
|
|
|
|
+ this.$router.push({ path: '/materialReport/marterialList' })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ toDetail(md5) {
|
|
|
|
+ // /materialReport/marterialDetail
|
|
|
|
+ this.$router.push({
|
|
|
|
+ path: '/materialReport/marterialDetail?md5=' + md5 + '&mediaId=' + (this.mediaDimension == 'a' ? 1 : 2),
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getDesignTopList(data) {
|
|
|
|
+ this.designTopLoading = true
|
|
return new Promise((resolve, reject) => {
|
|
return new Promise((resolve, reject) => {
|
|
- this.postDataAction('/overView/designTop', {
|
|
|
|
- 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,
|
|
|
|
- pageSize: '5',
|
|
|
|
- pageNo: '1',
|
|
|
|
- }).then((res) => {
|
|
|
|
|
|
+ var params = {
|
|
|
|
+ // 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,
|
|
|
|
+ // userId: this.userInfo().id,
|
|
|
|
+ // pageSize: this.ipagination.pageSize,
|
|
|
|
+ // pageNo: this.ipagination.current,
|
|
|
|
+ // target: 'cost',
|
|
|
|
+ // order: 'desc',
|
|
|
|
+ }
|
|
|
|
+ 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) => {
|
|
|
|
+ this.designTopLoading = false
|
|
if (res.success) {
|
|
if (res.success) {
|
|
|
|
+ this.designTopList = res.result.list
|
|
|
|
+ this.ipagination.total = res.result.total
|
|
resolve(res.result)
|
|
resolve(res.result)
|
|
} else {
|
|
} else {
|
|
reject(res.message)
|
|
reject(res.message)
|
|
@@ -508,45 +619,23 @@ export default {
|
|
},
|
|
},
|
|
|
|
|
|
handleSubmit() {
|
|
handleSubmit() {
|
|
|
|
+ this.ipagination.current = 1
|
|
this.getData()
|
|
this.getData()
|
|
},
|
|
},
|
|
- //导出报表
|
|
|
|
- exportExcel() {
|
|
|
|
- console.log('触发导出事件')
|
|
|
|
- let column = this.columns.map((item, index) => {
|
|
|
|
- return item.dataIndex
|
|
|
|
- })
|
|
|
|
- let columns = column.splice(3)
|
|
|
|
- // console.log(columns)
|
|
|
|
- downFilePost('/ctop/kuaishou/dailyPage/report/excel', {
|
|
|
|
- mediaId: this.mediaId,
|
|
|
|
- discount: this.discount,
|
|
|
|
- accountIds: this.accountId,
|
|
|
|
- startDate: this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
|
- endDate: this.dateValue[1].format('YYYY-MM-DD'),
|
|
|
|
- hour: this.timeSelectValue,
|
|
|
|
- target: this.target,
|
|
|
|
- order: this.order,
|
|
|
|
- columns,
|
|
|
|
- }).then((res) => {
|
|
|
|
- let blob = new Blob([res], {
|
|
|
|
- type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
|
|
- })
|
|
|
|
- let downloadElement = document.createElement('a')
|
|
|
|
- let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
|
|
- downloadElement.href = href
|
|
|
|
- downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
|
|
|
|
- document.body.appendChild(downloadElement)
|
|
|
|
- downloadElement.click() //点击下载
|
|
|
|
- document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
|
- window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
|
- })
|
|
|
|
|
|
+ resetSubmit() {
|
|
|
|
+ this.dateValue = [moment().subtract(7, 'days'), moment()]
|
|
|
|
+ this.dataDimension = 'a'
|
|
|
|
+ this.mediaDimension = 'b'
|
|
|
|
+ this.dataDimensionValue = []
|
|
|
|
+ this.ipagination.current = 1
|
|
|
|
+ this.getData()
|
|
},
|
|
},
|
|
tableChange(data) {
|
|
tableChange(data) {
|
|
console.log(data)
|
|
console.log(data)
|
|
},
|
|
},
|
|
//获取echart的值
|
|
//获取echart的值
|
|
initEchart(idName, optionName) {
|
|
initEchart(idName, optionName) {
|
|
|
|
+ var that = this
|
|
const chart = this.$refs[idName]
|
|
const chart = this.$refs[idName]
|
|
// console.log(chart)
|
|
// console.log(chart)
|
|
if (chart) {
|
|
if (chart) {
|
|
@@ -557,12 +646,22 @@ export default {
|
|
|
|
|
|
myChart.setOption(optionName)
|
|
myChart.setOption(optionName)
|
|
window.addEventListener('resize', function () {
|
|
window.addEventListener('resize', function () {
|
|
|
|
+ that.clientWidth = document.documentElement.clientWidth - 224
|
|
myChart.resize()
|
|
myChart.resize()
|
|
})
|
|
})
|
|
}
|
|
}
|
|
},
|
|
},
|
|
handlerEchartOption(data) {
|
|
handlerEchartOption(data) {
|
|
var option = {
|
|
var option = {
|
|
|
|
+ noDataLoadingOption: {
|
|
|
|
+ text: '暂无数据',
|
|
|
|
+ effect: 'bubble',
|
|
|
|
+ effectOption: {
|
|
|
|
+ effect: {
|
|
|
|
+ n: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
// title: {
|
|
// title: {
|
|
// text: '折线图堆叠'
|
|
// text: '折线图堆叠'
|
|
// },
|
|
// },
|
|
@@ -662,7 +761,7 @@ export default {
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
|
|
const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
|
|
var that = this
|
|
var that = this
|
|
var option = {
|
|
var option = {
|
|
- color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c'],
|
|
|
|
|
|
+ color: colorList,
|
|
backgroundColor: '#fff',
|
|
backgroundColor: '#fff',
|
|
|
|
|
|
tooltip: {
|
|
tooltip: {
|
|
@@ -672,6 +771,7 @@ export default {
|
|
legend: {
|
|
legend: {
|
|
orient: 'horizontal',
|
|
orient: 'horizontal',
|
|
top: 'top',
|
|
top: 'top',
|
|
|
|
+ icon: 'circle',
|
|
width: '100%',
|
|
width: '100%',
|
|
data: ['形式标签', '场景标签', '基调标签', '其他'],
|
|
data: ['形式标签', '场景标签', '基调标签', '其他'],
|
|
},
|
|
},
|
|
@@ -679,7 +779,7 @@ export default {
|
|
{
|
|
{
|
|
name: '',
|
|
name: '',
|
|
type: 'pie',
|
|
type: 'pie',
|
|
- radius: '80%',
|
|
|
|
|
|
+ radius: ['40%', '70%'],
|
|
center: ['50%', '50%'],
|
|
center: ['50%', '50%'],
|
|
data: [
|
|
data: [
|
|
{ value: 0, name: '形式标签' },
|
|
{ value: 0, name: '形式标签' },
|
|
@@ -687,16 +787,28 @@ export default {
|
|
{ value: 0, name: '场景标签' },
|
|
{ value: 0, name: '场景标签' },
|
|
{ value: 0, name: '其他' },
|
|
{ value: 0, name: '其他' },
|
|
],
|
|
],
|
|
|
|
+ labelLine: {
|
|
|
|
+ length: 5,
|
|
|
|
+ length2: 5,
|
|
|
|
+ },
|
|
|
|
+ label: {
|
|
|
|
+ show: false,
|
|
|
|
+ position: 'center',
|
|
|
|
+ },
|
|
emphasis: {
|
|
emphasis: {
|
|
- itemStyle: {
|
|
|
|
- shadowBlur: 10,
|
|
|
|
- shadowOffsetX: 0,
|
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
|
|
|
|
+ label: {
|
|
|
|
+ show: true,
|
|
|
|
+ fontSize: '18',
|
|
|
|
+ fontWeight: 'bold',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- label: {
|
|
|
|
- normal: {
|
|
|
|
- show: false,
|
|
|
|
|
|
+ labelLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderRadius: 5,
|
|
|
|
+ color: (params) => {
|
|
|
|
+ return colorList[params.dataIndex]
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -709,18 +821,26 @@ export default {
|
|
return current && current > moment().endOf('day')
|
|
return current && current > moment().endOf('day')
|
|
},
|
|
},
|
|
dataDimensionChange(e) {
|
|
dataDimensionChange(e) {
|
|
- console.log(`checked = ${e.target.value}`)
|
|
|
|
|
|
+ // console.log(`checked = ${e.target.value}`)
|
|
},
|
|
},
|
|
mediaDimensionChange(e) {
|
|
mediaDimensionChange(e) {
|
|
- console.log(`checked = ${e.target.value}`)
|
|
|
|
|
|
+ this.dataDimensionList = []
|
|
|
|
+ this.dataDimensionValue = []
|
|
this.getProjectList()
|
|
this.getProjectList()
|
|
},
|
|
},
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+ this.clientWidth = document.documentElement.clientWidth - 224
|
|
this.$nextTick(() => {
|
|
this.$nextTick(() => {
|
|
|
|
+ this.getProjectList()
|
|
this.getData()
|
|
this.getData()
|
|
-
|
|
|
|
- this.initEchart('echartCircular', this.handlerAgeOption([]))
|
|
|
|
|
|
+ // this.getMoreVideoList()
|
|
|
|
+ // this.initEchart('echartCircular', this.handlerAgeOption([]))
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ activated() {
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.clientWidth = document.documentElement.clientWidth - 224
|
|
})
|
|
})
|
|
},
|
|
},
|
|
}
|
|
}
|