|
@@ -1,22 +1,21 @@
|
|
|
<template>
|
|
|
<div class="autoLaunchReport">
|
|
|
-
|
|
|
<div class="topOptions">
|
|
|
- <span class="OptinItem" style="position:relative;top:12px;margin-right:20px">
|
|
|
+ <span class="OptinItem" style="position: relative; top: 12px; margin-right: 20px">
|
|
|
<Treeselect
|
|
|
:appId.sync="accountIds"
|
|
|
:multiple="true"
|
|
|
request="2,4"
|
|
|
ref="treeSelect"
|
|
|
style="width: 600px"
|
|
|
- :limit='1'
|
|
|
+ :limit="1"
|
|
|
/>
|
|
|
</span>
|
|
|
<span class="OptinItem">
|
|
|
<a-range-picker @change="dateChange" v-model="dateRange" :disabled-date="disabledDate" style="width: 300px" />
|
|
|
</span>
|
|
|
<span>
|
|
|
- <a-button type="primary" style="position:absolute;right:10px;top:45px" @click="search">查询</a-button>
|
|
|
+ <a-button type="primary" style="position: absolute; right: 10px; top: 45px" @click="search">查询</a-button>
|
|
|
<!-- <a-button type='default' @click="reset">重置</a-button> -->
|
|
|
</span>
|
|
|
</div>
|
|
@@ -270,64 +269,58 @@ const regionColumns = [
|
|
|
// },
|
|
|
]
|
|
|
|
|
|
-const province =[
|
|
|
+const province = [
|
|
|
{
|
|
|
title: '省份',
|
|
|
dataIndex: 'province',
|
|
|
key: 'province',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'province' },
|
|
|
-
|
|
|
},
|
|
|
]
|
|
|
-const city =[
|
|
|
+const city = [
|
|
|
{
|
|
|
title: '城市',
|
|
|
dataIndex: 'city',
|
|
|
key: 'city',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'city' },
|
|
|
-
|
|
|
},
|
|
|
]
|
|
|
-const ageSegment =[
|
|
|
+const ageSegment = [
|
|
|
{
|
|
|
title: '年龄',
|
|
|
dataIndex: 'ageSegment',
|
|
|
key: 'ageSegment',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'ageSegment' },
|
|
|
-
|
|
|
},
|
|
|
]
|
|
|
-const gender =[
|
|
|
+const gender = [
|
|
|
{
|
|
|
title: '性别',
|
|
|
dataIndex: 'gender',
|
|
|
key: 'gender',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'gender' },
|
|
|
-
|
|
|
},
|
|
|
]
|
|
|
-const businessInterestTags =[
|
|
|
+const businessInterestTags = [
|
|
|
{
|
|
|
title: '商业兴趣',
|
|
|
dataIndex: 'businessInterestTags',
|
|
|
key: 'businessInterestTags',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'businessInterestTags' },
|
|
|
-
|
|
|
- }
|
|
|
+ },
|
|
|
]
|
|
|
-const client =[
|
|
|
+const client = [
|
|
|
{
|
|
|
title: '系统',
|
|
|
dataIndex: 'client',
|
|
|
key: 'client',
|
|
|
align: 'center',
|
|
|
scopedSlots: { customRender: 'client' },
|
|
|
-
|
|
|
},
|
|
|
]
|
|
|
|
|
@@ -371,7 +364,7 @@ export default {
|
|
|
accountList: [],
|
|
|
directionalId: undefined,
|
|
|
value: 1,
|
|
|
- columns: [...province,...regionColumns],
|
|
|
+ columns: [...province, ...regionColumns],
|
|
|
tableData: [],
|
|
|
dateRange: [moment().subtract(2, 'day'), moment().subtract(2, 'day')],
|
|
|
topOption: JSON.parse(JSON.stringify(option)),
|
|
@@ -407,7 +400,6 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
filterOption(input, option) {
|
|
|
- console.log(input, option)
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
},
|
|
|
|
|
@@ -422,29 +414,24 @@ export default {
|
|
|
},
|
|
|
tableTypeChange(e) {
|
|
|
// console.log('radio checked', e.target.value)
|
|
|
- if (e.target.value == 'province') {
|
|
|
- this.columns = [...province, ...regionColumns]
|
|
|
- } else if (e.target.value == 'city') {
|
|
|
- this.columns = [...city, ...regionColumns]
|
|
|
- } else if (e.target.value == 'gender') {
|
|
|
- this.columns = [...gender, ...regionColumns]
|
|
|
- }
|
|
|
- else if (e.target.value == 'ageSegment') {
|
|
|
- this.columns = [...ageSegment, ...regionColumns]
|
|
|
- }
|
|
|
- else if (e.target.value == 'clientId') {
|
|
|
- this.columns = [...client, ...regionColumns]
|
|
|
- }
|
|
|
- else if (e.target.value == 'businessInterestTags') {
|
|
|
- this.columns = [...businessInterestTags, ...regionColumns]
|
|
|
- }
|
|
|
+ if (e.target.value == 'province') {
|
|
|
+ this.columns = [...province, ...regionColumns]
|
|
|
+ } else if (e.target.value == 'city') {
|
|
|
+ this.columns = [...city, ...regionColumns]
|
|
|
+ } else if (e.target.value == 'gender') {
|
|
|
+ this.columns = [...gender, ...regionColumns]
|
|
|
+ } else if (e.target.value == 'ageSegment') {
|
|
|
+ this.columns = [...ageSegment, ...regionColumns]
|
|
|
+ } else if (e.target.value == 'clientId') {
|
|
|
+ this.columns = [...client, ...regionColumns]
|
|
|
+ } else if (e.target.value == 'businessInterestTags') {
|
|
|
+ this.columns = [...businessInterestTags, ...regionColumns]
|
|
|
+ }
|
|
|
this.ipagination.current = 1
|
|
|
this.getDetailTableData()
|
|
|
},
|
|
|
|
|
|
- directionalIdChange(val) {
|
|
|
- console.log(val)
|
|
|
- },
|
|
|
+ directionalIdChange(val) {},
|
|
|
//获取echart的值
|
|
|
initEchart(idName, optionName) {
|
|
|
const chart = this.$refs[idName]
|
|
@@ -456,8 +443,11 @@ export default {
|
|
|
// });
|
|
|
|
|
|
myChart.setOption(optionName)
|
|
|
+ var that = this
|
|
|
window.addEventListener('resize', function () {
|
|
|
- myChart.resize()
|
|
|
+ that.$nextTick(() => {
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
},
|
|
@@ -469,6 +459,41 @@ export default {
|
|
|
handlerMapEchartOption(province, data) {
|
|
|
var res = []
|
|
|
var dataEnd = []
|
|
|
+ var smallValue = [
|
|
|
+ {
|
|
|
+ min: 100000,
|
|
|
+ color: '#73240D',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 50000,
|
|
|
+ max: 100000,
|
|
|
+ color: '#BB0000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 30000,
|
|
|
+ max: 50000,
|
|
|
+ color: '#BD430A',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 10000,
|
|
|
+ max: 30000,
|
|
|
+ color: '#E08150',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 5000,
|
|
|
+ max: 10000,
|
|
|
+ color: '#E9B090',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 1000,
|
|
|
+ max: 5000,
|
|
|
+ color: '#F2DDD2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ color: '#F1eeee',
|
|
|
+ },
|
|
|
+ ]
|
|
|
if (this.value == 1) {
|
|
|
res = data.map((item) => {
|
|
|
return item.photoShow
|
|
@@ -489,10 +514,80 @@ export default {
|
|
|
res = data.map((item) => {
|
|
|
return item.photoClickRatio
|
|
|
})
|
|
|
+ smallValue = [
|
|
|
+ {
|
|
|
+ min: 55,
|
|
|
+ color: '#73240D',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 45,
|
|
|
+ max: 55,
|
|
|
+ color: '#BB0000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 35,
|
|
|
+ max: 45,
|
|
|
+ color: '#BD430A',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 25,
|
|
|
+ max: 35,
|
|
|
+ color: '#E08150',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 15,
|
|
|
+ max: 25,
|
|
|
+ color: '#E9B090',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 5,
|
|
|
+ max: 15,
|
|
|
+ color: '#F2DDD2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ color: '#F1eeee',
|
|
|
+ },
|
|
|
+ ]
|
|
|
} else if (this.value == 6) {
|
|
|
res = data.map((item) => {
|
|
|
return item.actionRatio
|
|
|
})
|
|
|
+ smallValue = [
|
|
|
+ {
|
|
|
+ min: 55,
|
|
|
+ color: '#73240D',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 45,
|
|
|
+ max: 55,
|
|
|
+ color: '#BB0000',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 35,
|
|
|
+ max: 45,
|
|
|
+ color: '#BD430A',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 25,
|
|
|
+ max: 35,
|
|
|
+ color: '#E08150',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 15,
|
|
|
+ max: 25,
|
|
|
+ color: '#E9B090',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 5,
|
|
|
+ max: 15,
|
|
|
+ color: '#F2DDD2',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ color: '#F1eeee',
|
|
|
+ },
|
|
|
+ ]
|
|
|
}
|
|
|
|
|
|
for (var j = 0; j < province.length; j++) {
|
|
@@ -501,6 +596,7 @@ export default {
|
|
|
value: res[j],
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
var that = this
|
|
|
var option = {
|
|
|
title: {
|
|
@@ -520,44 +616,11 @@ export default {
|
|
|
return str
|
|
|
},
|
|
|
},
|
|
|
+ layoutCenter: ['30%', '30%'],
|
|
|
visualMap: {
|
|
|
type: 'piecewise',
|
|
|
// text: ['头', '尾'],
|
|
|
- pieces: [
|
|
|
- {
|
|
|
- min: 100000,
|
|
|
- color: '#73240D',
|
|
|
- },
|
|
|
- {
|
|
|
- min: 50000,
|
|
|
- max: 100000,
|
|
|
- color: '#BB0000',
|
|
|
- },
|
|
|
- {
|
|
|
- min: 30000,
|
|
|
- max: 50000,
|
|
|
- color: '#BD430A',
|
|
|
- },
|
|
|
- {
|
|
|
- min: 10000,
|
|
|
- max: 30000,
|
|
|
- color: '#E08150',
|
|
|
- },
|
|
|
- {
|
|
|
- min: 5000,
|
|
|
- max: 10000,
|
|
|
- color: '#E9B090',
|
|
|
- },
|
|
|
- {
|
|
|
- min: 1000,
|
|
|
- max: 5000,
|
|
|
- color: '#F2DDD2',
|
|
|
- },
|
|
|
- {
|
|
|
- value: 0,
|
|
|
- color: '#F1eeee',
|
|
|
- },
|
|
|
- ],
|
|
|
+ pieces: smallValue,
|
|
|
orient: 'vertical',
|
|
|
itemSymbol: 'circle',
|
|
|
itemWidth: 20,
|
|
@@ -573,9 +636,11 @@ export default {
|
|
|
grid: {
|
|
|
right: '5%',
|
|
|
top: '20%',
|
|
|
- left: '20%',
|
|
|
+ left: '60%',
|
|
|
bottom: '10%',
|
|
|
- width: '20%',
|
|
|
+ width: '100%',
|
|
|
+ x: '40%',
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
xAxis: {
|
|
|
min: 0,
|
|
@@ -612,7 +677,6 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
- console.log(option)
|
|
|
return option
|
|
|
},
|
|
|
|
|
@@ -647,7 +711,7 @@ export default {
|
|
|
color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b} : {c} ({d}%)',
|
|
|
+ formatter: '{b} : {c} ',
|
|
|
},
|
|
|
toolbox: {
|
|
|
show: true,
|
|
@@ -657,23 +721,27 @@ export default {
|
|
|
// subtext: '仅供参考',
|
|
|
left: 'left',
|
|
|
},
|
|
|
- legend: {
|
|
|
- type: 'scroll',
|
|
|
- orient: 'vertical',
|
|
|
- left: '10%',
|
|
|
- align: 'left',
|
|
|
- top: 'middle',
|
|
|
- textStyle: {
|
|
|
- color: '#8C8C8C',
|
|
|
- },
|
|
|
- height: 100,
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
+ // legend: {
|
|
|
+ // type: 'scroll',
|
|
|
+ // orient: 'vertical',
|
|
|
+ // left: '10%',
|
|
|
+ // align: 'left',
|
|
|
+ // top: 'middle',
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#8C8C8C',
|
|
|
+ // },
|
|
|
+ // height: 100,
|
|
|
+ // },
|
|
|
series: [
|
|
|
{
|
|
|
type: 'pie',
|
|
|
radius: [0, 100],
|
|
|
|
|
|
data: res,
|
|
|
+ minAngle: 10,
|
|
|
},
|
|
|
],
|
|
|
}
|
|
@@ -758,7 +826,7 @@ export default {
|
|
|
borderRadius: 1,
|
|
|
padding: [1, -1, 1, -1]
|
|
|
*/
|
|
|
- formatter: '{a|{b}:}{b|{d}%}',
|
|
|
+ formatter: '{a|{b} }',
|
|
|
rich: {
|
|
|
a: {
|
|
|
padding: [0, 0, 0, 10],
|
|
@@ -844,7 +912,7 @@ export default {
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
- type: 'value',
|
|
|
+ type: 'log',
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
@@ -927,7 +995,7 @@ export default {
|
|
|
],
|
|
|
yAxis: [
|
|
|
{
|
|
|
- type: 'value',
|
|
|
+ type: 'log',
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
@@ -944,7 +1012,6 @@ export default {
|
|
|
},
|
|
|
//点击分页
|
|
|
sort(pagination, filters, sorter, { currentDataSource }) {
|
|
|
- console.log(pagination, sorter)
|
|
|
this.ipagination.current = pagination.current
|
|
|
this.ipagination.pageSize = pagination.pageSize
|
|
|
|
|
@@ -958,7 +1025,6 @@ export default {
|
|
|
this.getTableData()
|
|
|
},
|
|
|
materialTableChange(pagination, filters, sorter, { currentDataSource }) {
|
|
|
- console.log(pagination)
|
|
|
this.materialipagination.current = pagination.current
|
|
|
this.materialipagination.pageSize = pagination.pageSize
|
|
|
},
|
|
@@ -995,68 +1061,62 @@ export default {
|
|
|
},
|
|
|
|
|
|
getRelativeData() {
|
|
|
-
|
|
|
let params = this.handlerParams()
|
|
|
// params.dataType=this.tableValue
|
|
|
- if(params.accountIds){
|
|
|
- this.spinning = true
|
|
|
- getAction('/audienceReport/queryAllReportForm', params).then((res) => {
|
|
|
- console.log(res)
|
|
|
- this.spinning = false
|
|
|
- if (res.success) {
|
|
|
- this.province = res.result.province.map((item) => {
|
|
|
- return item.province
|
|
|
- })
|
|
|
- this.provinceData = res.result.province
|
|
|
- this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
|
|
|
- this.sexData = res.result.gender
|
|
|
- this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
|
|
|
- this.ageData = res.result.ageSegment
|
|
|
- this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
|
|
|
- this.businessData = res.result.businessInterestTags
|
|
|
- this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
|
|
|
- this.systemData = res.result.client
|
|
|
- this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
|
|
|
- } else {
|
|
|
- this.$message.error(res.message)
|
|
|
- this.province = []
|
|
|
- this.provinceData = []
|
|
|
- this.sexData = []
|
|
|
- this.ageData = []
|
|
|
- this.businessData = []
|
|
|
- this.systemData = []
|
|
|
- this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
|
|
|
- this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
|
|
|
- this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
|
|
|
- this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
|
|
|
- this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
+ if (params.accountIds) {
|
|
|
+ this.spinning = true
|
|
|
+ getAction('/audienceReport/queryAllReportForm', params).then((res) => {
|
|
|
+ this.spinning = false
|
|
|
+ if (res.success) {
|
|
|
+ this.province = res.result.province.map((item) => {
|
|
|
+ return item.province
|
|
|
+ })
|
|
|
+ this.provinceData = res.result.province
|
|
|
+ this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
|
|
|
+ this.sexData = res.result.gender
|
|
|
+ this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
|
|
|
+ this.ageData = res.result.ageSegment
|
|
|
+ this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
|
|
|
+ this.businessData = res.result.businessInterestTags
|
|
|
+ this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
|
|
|
+ this.systemData = res.result.client
|
|
|
+ this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.message)
|
|
|
+ this.province = []
|
|
|
+ this.provinceData = []
|
|
|
+ this.sexData = []
|
|
|
+ this.ageData = []
|
|
|
+ this.businessData = []
|
|
|
+ this.systemData = []
|
|
|
+ this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
|
|
|
+ this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
|
|
|
+ this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
|
|
|
+ this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
|
|
|
+ this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
getTableData() {
|
|
|
-
|
|
|
let params = this.handlerParams() || {}
|
|
|
- if(params.accountIds){
|
|
|
- this.materialloading = true
|
|
|
- params.audienceType = this.tableValue
|
|
|
- params.pageNo = this.ipagination.current
|
|
|
- params.pageSize = this.ipagination.pageSize
|
|
|
- params.orderType = this.target
|
|
|
- params.upOrDown = this.order
|
|
|
- // params.dataType=this.tableValue
|
|
|
- getAction('/audienceReport/queryPageList', params).then((res) => {
|
|
|
- console.log(res)
|
|
|
- this.materialloading = false
|
|
|
- if (res) {
|
|
|
- this.tableData = res.list
|
|
|
- this.ipagination.total = res.total
|
|
|
- } else {
|
|
|
- this.$message.error('出错了')
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
+ if (params.accountIds) {
|
|
|
+ this.materialloading = true
|
|
|
+ params.audienceType = this.tableValue
|
|
|
+ params.pageNo = this.ipagination.current
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.orderType = this.target
|
|
|
+ params.upOrDown = this.order
|
|
|
+ // params.dataType=this.tableValue
|
|
|
+ getAction('/audienceReport/queryPageList', params).then((res) => {
|
|
|
+ this.materialloading = false
|
|
|
+ if (res) {
|
|
|
+ this.tableData = res.list
|
|
|
+ this.ipagination.total = res.total
|
|
|
+ } else {
|
|
|
+ this.$message.error('出错了')
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
search() {
|
|
@@ -1073,16 +1133,13 @@ export default {
|
|
|
this.spinning = false
|
|
|
return
|
|
|
} else {
|
|
|
- params.accountIds ='';
|
|
|
- this.accountIds.forEach((item,index)=>{
|
|
|
-
|
|
|
- if(index!=this.accountIds.length-1){
|
|
|
- params.accountIds+=`${item},`
|
|
|
- }else{
|
|
|
- params.accountIds+=`${item}`
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
+ params.accountIds = ''
|
|
|
+ this.accountIds.forEach((item, index) => {
|
|
|
+ if (index != this.accountIds.length - 1) {
|
|
|
+ params.accountIds += `${item},`
|
|
|
+ } else {
|
|
|
+ params.accountIds += `${item}`
|
|
|
+ }
|
|
|
})
|
|
|
}
|
|
|
|
|
@@ -1225,7 +1282,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
}
|
|
|
</script>
|
|
|
|