123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431 |
- <template>
- <div class="autoLaunchReport">
- <div class="topOptions">
- <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"
- />
- </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='default' @click="reset">重置</a-button> -->
- </span>
- </div>
- <div class="chartBox">
- <div class="chartTop">
- <span>数据维度:</span>
- <a-radio-group v-model="value" @change="chartDataTypeChange">
- <a-radio :value="1"> 封面曝光数 </a-radio>
- <a-radio :value="2"> 封面点击数 </a-radio>
- <a-radio :value="3"> 素材曝光数 </a-radio>
- <a-radio :value="4"> 行为数 </a-radio>
- <a-radio :value="5"> 封面点击率 </a-radio>
- <a-radio :value="6"> 行为点击率 </a-radio>
- </a-radio-group>
- </div>
- <a-spin :spinning="spinning">
- <div class="chartBody">
- <div
- id="mapEchart"
- style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; line-height: 300px"
- ref="mapEchart"
- >
- <a-empty style="position: relative; top: 50%; margin-top: -65px" />
- </div>
- <div
- id="sexEchart"
- style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px"
- ref="sexEchart"
- >
- <a-empty style="position: relative; top: 50%; margin-top: -65px" />
- </div>
- <div
- id="ageEchart"
- style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px"
- ref="ageEchart"
- >
- <a-empty style="position: relative; top: 50%; margin-top: -65px" />
- </div>
- <div
- id="businessEchart"
- style="width: 65%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; margin-top: 20px"
- ref="businessEchart"
- >
- <a-empty style="position: relative; top: 50%; margin-top: -65px" />
- </div>
- <div
- id="systemEchart"
- style="width: 30%; height: 300px; border: 1px solid #e0e0e0; padding: 10px; margin-top: 20px"
- ref="systemEchart"
- >
- <a-empty style="position: relative; top: 50%; margin-top: -65px" />
- </div>
- </div>
- </a-spin>
- <div class="tableBox">
- <!-- <div class="tableTop">
- 关联定向
- </div> -->
- <div class="tableOpt">
- <span>表格类型:</span>
- <a-radio-group v-model="tableValue" @change="tableTypeChange">
- <a-radio value="province"> 省级地域分布 </a-radio>
- <a-radio value="city"> 地级地域分布 </a-radio>
- <a-radio value="gender"> 性别分布 </a-radio>
- <a-radio value="ageSegment"> 年龄分布 </a-radio>
- <a-radio value="clientId"> 系统分布 </a-radio>
- <a-radio value="businessInterestTags"> 商业兴趣分布 </a-radio>
- </a-radio-group>
- </div>
- <div class="tableBody">
- <a-table
- size="middle"
- :columns="columns"
- :dataSource="tableData"
- :pagination="ipagination"
- bordered
- id="outTable"
- :loading="materialloading"
- style="word-break: break-all; font-size: 16px; font-weight: 600"
- :scroll="{ x: true }"
- @change="sort"
- >
- <span slot="charge" slot-scope="charge">{{ charge | decimalsHandle }}</span>
- <span slot="eventNextDayStayRatio" slot-scope="eventNextDayStayRatio">{{
- eventNextDayStayRatio + '%'
- }}</span>
- </a-table>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import moment from 'moment'
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- import qs from 'qs'
- // 引入基本模板
- var echarts = require('echarts')
- import 'echarts/map/js/china'
- // 引入柱状图组件
- require('echarts/lib/chart/bar')
- // require('echarts/lib/chart/pie')
- require('echarts/lib/chart/line')
- require('echarts/lib/chart/map')
- // 引入提示框和title组件
- require('echarts/lib/component/tooltip')
- require('echarts/lib/component/title')
- require('echarts/lib/component/graphic')
- require('echarts/lib/component/toolbox')
- require('echarts/lib/component/legend')
- let option = {
- color: ['#1890ff'],
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- // 坐标轴指示器,坐标轴触发有效
- type: 'line', // 默认为直线,可选为:'line' | 'shadow'
- },
- },
- grid: {
- left: '0%',
- right: '0%',
- bottom: '0%',
- top: '12%',
- containLabel: false,
- },
- xAxis: [
- {
- type: 'category',
- data: [],
- show: true,
- axisTick: {
- alignWithLabel: true,
- },
- },
- ],
- yAxis: [
- {
- type: 'value',
- show: false,
- },
- ],
- series: [
- {
- name: '',
- type: 'bar',
- barWidth: '40%',
- smooth: true,
- areaStyle: {},
- itemStyle: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- { offset: 0, color: '#1890ff' },
- { offset: 1, color: '#FFF' },
- ]),
- },
- data: [],
- },
- ],
- }
- const regionColumns = [
- {
- title: '消耗',
- dataIndex: 'charge',
- key: 'charge',
- align: 'center',
- scopedSlots: { customRender: 'charge' },
- sorter: true,
- },
- {
- title: '次留数',
- dataIndex: 'eventNextDayStay',
- key: 'eventNextDayStay',
- align: 'center',
- scopedSlots: { customRender: 'eventNextDayStay' },
- sorter: true,
- },
- {
- title: '次留率',
- dataIndex: 'eventNextDayStayRatio',
- key: 'eventNextDayStayRatio',
- align: 'center',
- scopedSlots: { customRender: 'eventNextDayStayRatio' },
- sorter: true,
- },
- {
- title: '激活数',
- dataIndex: 'activation',
- key: 'activation',
- align: 'center',
- scopedSlots: { customRender: 'activation' },
- sorter: true,
- },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- // {
- // title: '地域',
- // dataIndex: 'region',
- // key: 'region',
- // align: 'center',
- // scopedSlots: { customRender: 'region' },
- // width: 120,
- // fixed: 'left',
- // },
- ]
- const province = [
- {
- title: '省份',
- dataIndex: 'province',
- key: 'province',
- align: 'center',
- scopedSlots: { customRender: 'province' },
- },
- ]
- const city = [
- {
- title: '城市',
- dataIndex: 'city',
- key: 'city',
- align: 'center',
- scopedSlots: { customRender: 'city' },
- },
- ]
- const ageSegment = [
- {
- title: '年龄',
- dataIndex: 'ageSegment',
- key: 'ageSegment',
- align: 'center',
- scopedSlots: { customRender: 'ageSegment' },
- },
- ]
- const gender = [
- {
- title: '性别',
- dataIndex: 'gender',
- key: 'gender',
- align: 'center',
- scopedSlots: { customRender: 'gender' },
- },
- ]
- const businessInterestTags = [
- {
- title: '商业兴趣',
- dataIndex: 'businessInterestTags',
- key: 'businessInterestTags',
- align: 'center',
- scopedSlots: { customRender: 'businessInterestTags' },
- },
- ]
- const client = [
- {
- title: '系统',
- dataIndex: 'client',
- key: 'client',
- align: 'center',
- scopedSlots: { customRender: 'client' },
- },
- ]
- export default {
- components: {
- Treeselect,
- },
- data() {
- return {
- order: '',
- target: '',
- searchShow: true,
- spinning: false,
- materialId: [],
- treeData: [],
- materialTreeData: [],
- userId: '',
- tabKey: 1,
- loading: false,
- ipagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- },
- },
- tableValue: 'province',
- accountIds: [],
- accountList: [],
- directionalId: undefined,
- value: 1,
- columns: [...province, ...regionColumns],
- tableData: [],
- dateRange: [moment().subtract(2, 'day'), moment().subtract(2, 'day')],
- topOption: JSON.parse(JSON.stringify(option)),
- scrollX: 0,
- materialipagination: {
- current: 1,
- pageSize: 10,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- showSizeChanger: true,
- pageSizeOptions: ['10', '30', '50'],
- total: 0,
- onChange: (current, pageSize) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- this.ipagination.pageSize = pageSize
- },
- },
- materialtableData: [],
- materialloading: false,
- materialscrollX: 4000,
- province: [],
- provinceData: [],
- sexData: [],
- ageData: [],
- businessData: [],
- systemData: [],
- }
- },
- methods: {
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- disabledDate(current) {
- return current && current > moment().subtract(2, 'day')
- },
- dateChange(date, dateString) {
- // console.log(date,dateString)
- },
- chartDataTypeChange(e) {
- this.getEchartData()
- },
- 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]
- }
- this.ipagination.current = 1
- this.getDetailTableData()
- },
- directionalIdChange(val) {},
- //获取echart的值
- initEchart(idName, optionName) {
- const chart = this.$refs[idName]
- // console.log(chart)
- if (chart) {
- const myChart = echarts.init(document.getElementById(idName))
- // myChart.showLoading({
- // text: "图表数据正在努力加载..."
- // });
- myChart.setOption(optionName)
- var that = this
- window.addEventListener('resize', function () {
- that.$nextTick(() => {
- myChart.resize()
- })
- })
- }
- },
- clearEchart(idName) {
- const myChart = echarts.init(document.getElementById(idName))
- myChart.dispose()
- },
- // province,data
- 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
- })
- } else if (this.value == 2) {
- res = data.map((item) => {
- return item.photoClick
- })
- } else if (this.value == 3) {
- res = data.map((item) => {
- return item.aclick
- })
- } else if (this.value == 4) {
- res = data.map((item) => {
- return item.bclick
- })
- } else if (this.value == 5) {
- 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++) {
- dataEnd.push({
- name: province[j],
- value: res[j],
- })
- }
- var that = this
- var option = {
- title: {
- text: '省级地域分布',
- // subtext: '仅供参考',
- left: 'left',
- },
- tooltip: {
- show: true,
- formatter: function (params) {
- var str = ''
- if (that.value == 5 || that.value == 6) {
- str = params.name + ':' + (params.value ? params.value + '%' : 0)
- } else {
- str = params.name + ':' + (params.value ? params.value : 0)
- }
- return str
- },
- },
- layoutCenter: ['30%', '30%'],
- visualMap: {
- type: 'piecewise',
- // text: ['头', '尾'],
- pieces: smallValue,
- orient: 'vertical',
- itemSymbol: 'circle',
- itemWidth: 20,
- itemHeight: 20,
- showLabel: true,
- seriesIndex: [0],
- textStyle: {
- color: '#7B93A7',
- },
- bottom: '10%',
- left: '5%',
- },
- grid: {
- right: '5%',
- top: '20%',
- left: '60%',
- bottom: '10%',
- width: '100%',
- x: '40%',
- containLabel: true,
- },
- xAxis: {
- min: 0,
- // max: 4000,
- show: false,
- },
- geo: {
- map: 'china',
- // right: '35%',
- left: '30%',
- label: {
- emphasis: {
- show: false,
- },
- },
- itemStyle: {
- emphasis: {
- areaColor: '#99FF99',
- },
- },
- },
- series: [
- {
- name: 'mapSer',
- type: 'map',
- map: 'china',
- roam: false,
- geoIndex: 0,
- label: {
- show: false,
- },
- data: dataEnd,
- },
- ],
- }
- return option
- },
- handlerSexOption(data) {
- var res = []
- if (this.value == 1) {
- res = data.map((item) => {
- return { value: item.photoShow, name: item.gender }
- })
- } else if (this.value == 2) {
- res = data.map((item) => {
- return { value: item.photoClick, name: item.gender }
- })
- } else if (this.value == 3) {
- res = data.map((item) => {
- return { value: item.aclick, name: item.gender }
- })
- } else if (this.value == 4) {
- res = data.map((item) => {
- return { value: item.bclick, name: item.gender }
- })
- } else if (this.value == 5) {
- res = data.map((item) => {
- return { value: item.photoClickRatio, name: item.gender }
- })
- } else if (this.value == 6) {
- res = data.map((item) => {
- return { value: item.actionRatio, name: item.gender }
- })
- }
- var option = {
- color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
- tooltip: {
- trigger: 'item',
- formatter: '{b} : {c} ',
- },
- toolbox: {
- show: true,
- },
- title: {
- text: '性别分布',
- // subtext: '仅供参考',
- left: 'left',
- },
- 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,
- },
- ],
- }
- return option
- },
- handlerAgeOption(data) {
- var res = []
- if (this.value == 1) {
- res = data.map((item) => {
- return { value: item.photoShow, name: item.ageSegment }
- })
- } else if (this.value == 2) {
- res = data.map((item) => {
- return { value: item.photoClick, name: item.ageSegment }
- })
- } else if (this.value == 3) {
- res = data.map((item) => {
- return { value: item.aclick, name: item.ageSegment }
- })
- } else if (this.value == 4) {
- res = data.map((item) => {
- return { value: item.bclick, name: item.ageSegment }
- })
- } else if (this.value == 5) {
- res = data.map((item) => {
- return { value: item.photoClickRatio, name: item.ageSegment }
- })
- } else if (this.value == 6) {
- res = data.map((item) => {
- return { value: item.actionRatio, name: item.ageSegment }
- })
- }
- const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
- var that = this
- var option = {
- tooltip: {
- show: true,
- formatter: function (params) {
- var str = ''
- if (that.value == 5 || that.value == 6) {
- str = params.name + ':' + (params.value ? params.value + '%' : 0)
- } else {
- str = params.name + ':' + (params.value ? params.value : 0)
- }
- return str
- },
- },
- title: {
- text: '年龄分布',
- // subtext: '仅供参考',
- left: 'left',
- },
- series: [
- {
- type: 'pie',
- // center: ['30%', '30%'],
- radius: ['30%', '60%'],
- minAngle: 10,
- avoidLabelOverlap: true,
- hoverOffset: 15,
- itemStyle: {
- color: (params) => {
- return colorList[params.dataIndex]
- },
- },
- label: {
- show: true,
- position: 'outer',
- alignTo: 'labelLine',
- // ·圆点
- backgroundColor: 'auto', //圆点颜色,auto:映射的系列色
- height: 0,
- width: 0,
- lineHeight: 0,
- // height,width.lineHeight必须为0
- distanceToLabelLine: 0, //圆点到labelline距离
- borderRadius: 2.5,
- padding: [2.5, -2.5, 2.5, -2.5],
- /*radius和padding为圆点大小,圆点半径为几radius和padding各项数值就为几
- 如:圆点半径为1
- borderRadius: 1,
- padding: [1, -1, 1, -1]
- */
- formatter: '{a|{b} }',
- rich: {
- a: {
- padding: [0, 0, 0, 10],
- },
- b: {
- padding: [0, 10, 0, 0],
- },
- },
- },
- data: res,
- },
- ],
- }
- return option
- },
- handlerBusinessOption(data) {
- var res = []
- var dataX = data.map((item) => {
- return item.businessInterestTags
- })
- if (this.value == 1) {
- res = data.map((item) => {
- return item.photoShow
- })
- } else if (this.value == 2) {
- res = data.map((item) => {
- return item.photoClick
- })
- } else if (this.value == 3) {
- res = data.map((item) => {
- return item.aclick
- })
- } else if (this.value == 4) {
- res = data.map((item) => {
- return item.bclick
- })
- } else if (this.value == 5) {
- res = data.map((item) => {
- return item.photoClickRatio
- })
- } else if (this.value == 6) {
- res = data.map((item) => {
- return item.actionRatio
- })
- }
- var that = this
- const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
- var option = {
- title: {
- text: '商业兴趣分布',
- // subtext: '仅供参考',
- left: 'left',
- },
- color: colorList,
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- var str = ''
- if (that.value == 5 || that.value == 6) {
- str = params[0].name + ':' + params[0].value + '%'
- } else {
- str = params[0].name + ':' + params[0].value
- }
- return str
- },
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: dataX,
- axisTick: {
- alignWithLabel: true,
- },
- },
- ],
- yAxis: [
- {
- type: 'log',
- },
- ],
- series: [
- {
- name: '直接访问',
- type: 'bar',
- barWidth: '60%',
- data: res,
- },
- ],
- }
- return option
- },
- handlerSystemOption(data) {
- var res = []
- var dataX = data.map((item) => {
- return item.client
- })
- if (this.value == 1) {
- res = data.map((item) => {
- return item.photoShow
- })
- } else if (this.value == 2) {
- res = data.map((item) => {
- return item.photoClick
- })
- } else if (this.value == 3) {
- res = data.map((item) => {
- return item.aclick
- })
- } else if (this.value == 4) {
- res = data.map((item) => {
- return item.bclick
- })
- } else if (this.value == 5) {
- res = data.map((item) => {
- return item.photoClickRatio
- })
- } else if (this.value == 6) {
- res = data.map((item) => {
- return item.actionRatio
- })
- }
- var that = this
- const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
- var option = {
- title: {
- text: '系统分布',
- // subtext: '仅供参考',
- left: 'left',
- },
- color: colorList,
- tooltip: {
- trigger: 'axis',
- formatter: function (params) {
- var str = ''
- if (that.value == 5 || that.value == 6) {
- str = params[0].name + ':' + params[0].value + '%'
- } else {
- str = params[0].name + ':' + params[0].value
- }
- return str
- },
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true,
- },
- xAxis: [
- {
- type: 'category',
- data: dataX,
- axisTick: {
- alignWithLabel: true,
- },
- },
- ],
- yAxis: [
- {
- type: 'log',
- },
- ],
- series: [
- {
- name: '直接访问',
- type: 'bar',
- barWidth: '60%',
- data: res,
- },
- ],
- }
- return option
- },
- //点击分页
- sort(pagination, filters, sorter, { currentDataSource }) {
- this.ipagination.current = pagination.current
- this.ipagination.pageSize = pagination.pageSize
- if (sorter.order == 'ascend') {
- this.order = ''
- this.target = sorter.columnKey
- } else if (sorter.order == 'descend') {
- this.order = 'desc'
- this.target = sorter.columnKey
- }
- this.getTableData()
- },
- materialTableChange(pagination, filters, sorter, { currentDataSource }) {
- this.materialipagination.current = pagination.current
- this.materialipagination.pageSize = pagination.pageSize
- },
- getEchartData() {
- this.spinning = true
- // let params = this.handlerParams()
- // params.dataType = this.value
- // postAction('', params).then((res) => {
- // console.log(res)
- // this.province = province
- if (this.province.length > 0) {
- this.initEchart('mapEchart', this.handlerMapEchartOption(this.province, this.provinceData))
- }
- if (this.sexData.length > 0) {
- this.initEchart('sexEchart', this.handlerSexOption(this.sexData))
- }
- if (this.ageData.length > 0) {
- this.initEchart('ageEchart', this.handlerAgeOption(this.ageData))
- }
- if (this.businessData.length > 0) {
- this.initEchart('businessEchart', this.handlerBusinessOption(this.businessData))
- }
- if (this.systemData.length > 0) {
- this.initEchart('systemEchart', this.handlerSystemOption(this.systemData))
- }
- this.spinning = false
- // })
- },
- getDetailTableData() {
- this.getTableData()
- },
- getRelativeData() {
- let params = this.handlerParams()
- // params.dataType=this.tableValue
- 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) => {
- this.materialloading = false
- if (res) {
- this.tableData = res.list
- this.ipagination.total = res.total
- } else {
- this.$message.error('出错了')
- }
- })
- }
- },
- search() {
- this.searchShow = false
- this.getRelativeData()
- this.getTableData()
- },
- handlerParams() {
- let params = {}
- if (this.accountIds.length <= 0) {
- this.$message.error('请选择账户')
- this.materialloading = false
- 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}`
- }
- })
- }
- if (this.dateRange[0] && this.dateRange.length == 2) {
- params.startTime = this.dateRange[0].format('YYYY-MM-DD')
- params.endTime = this.dateRange[1].format('YYYY-MM-DD')
- } else {
- this.materialloading = false
- this.spinning = false
- this.$message.error('请选择时间')
- return
- }
- // if (this.tabKey == 1) {
- // params.type = 'target'
- // params.strategyId = this.directionalId[0].split('_')[0]
- // params.targetIds = this.directionalId.map((item) => {
- // return item.split('_')[1]
- // })
- // } else {
- // params.type = 'material'
- // params.strategyId = this.materialId[0].split('_')[0]
- // params.codes = this.materialId.map((item) => {
- // return item.split('_')[1]
- // })
- // }
- // if (this.dateRange && this.dateRange.length > 0) {
- // params.startDate = this.dateRange[0].format('YYYY-MM-DD')
- // params.endDate = this.dateRange[1].format('YYYY-MM-DD')
- // }
- return params
- },
- },
- watch: {
- accountIds: function (n, o) {
- if (n.length > 0 && this.searchShow) {
- this.search()
- }
- },
- 'ipagination.current': function (n, o) {
- if (n != o) {
- this.getTableData()
- }
- },
- 'ipagination.pageSize': function (n, o) {
- if (n != o) {
- this.getTableData()
- }
- },
- },
- activated() {
- this.$nextTick(() => {})
- let userInfo = localStorage.getItem('pro__Login_Userinfo')
- let userId = ''
- if (userInfo) {
- this.userId = JSON.parse(userInfo).value.id
- }
- },
- filters: {
- toPercentage(val) {
- if (val) {
- if (typeof val != 'string') {
- return (val * 100).toFixed(2) + '%'
- } else {
- return val
- }
- } else if (typeof val == 'string') {
- return val
- } else {
- return 0
- }
- },
- //保留两位小数并且变成货币格式
- decimalsHandle(val) {
- if (val && typeof val != 'string') {
- if (val >= 0) {
- val = parseFloat(val).toFixed(2)
- let numberStr = val.toString()
- let str = numberStr.split('.')
- let str0 = str[0].split('').reverse()
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',')
- }
- }
- str0.reverse()
- let handleResult = ''
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j]
- }
- return handleResult + '.' + str[1]
- } else {
- val = parseFloat(val).toFixed(2)
- let numberStr = val.toString()
- let str = numberStr.split('.')
- let str0 = str[0].substr(1).split('').reverse()
- for (let i = 0; i < str0.length; i++) {
- if ((i + 1) % 4 === 0) {
- str0.splice(i, 0, ',')
- }
- }
- str0.reverse()
- let handleResult = ''
- for (let j = 0; j < str0.length; j++) {
- handleResult += str0[j]
- }
- return '-' + handleResult + '.' + str[1]
- }
- } else if (typeof val == 'string') {
- return val
- } else {
- return 0
- }
- },
- //变成货币格式
- formatCurrency(val) {
- if ((val || val == 0) && typeof val != 'string') {
- let numberStr = val.toString()
- let str = numberStr.split('').reverse()
- for (let i = 0; i < str.length; i++) {
- if ((i + 1) % 4 === 0) {
- str.splice(i, 0, ',')
- }
- }
- str.reverse()
- let handleResult = ''
- for (let j = 0; j < str.length; j++) {
- handleResult += str[j]
- }
- return handleResult
- } else if (typeof val == 'string') {
- return val
- } else {
- return '-'
- }
- },
- },
- }
- </script>
- <style lang="scss">
- .ant-tooltip-inner,
- .ant-tooltip-arrow::before {
- background-color: #fff;
- color: #333;
- }
- </style>
- <style lang="scss" scoped>
- .autoLaunchReport {
- background-color: #fff;
- padding: 10px 20px;
- position: relative;
- width: 100%;
- .OptinItem {
- display: inline-block;
- margin-right: 15px;
- margin-top: 15px;
- .ok {
- margin-right: 15px;
- }
- }
- .OptinItem:first-child {
- margin-right: 10px;
- }
- .topOptions {
- padding: 15px 10px;
- position: relative;
- .topOpt {
- width: 100%;
- margin-bottom: 10px;
- }
- }
- .optionBtn {
- // display: inline-block;
- float: right;
- // .searchBtn{
- // margin-right: 10px;
- // }
- }
- .circul {
- width: 5px;
- height: 5px;
- border-radius: 50%;
- background-color: #32CD32;
- }
- .show {
- // background-color: #fff;
- width: 100%;
- display: flex;
- justify-content: space-between;
- // padding: 0px 15px;
- box-sizing: border-box;
- .showBox {
- width: 19%;
- box-sizing: border-box;
- padding: 15px 15px;
- background-color: #fff;
- .title {
- color: #999;
- font-size: 16px;
- position: relative;
- text-align: center;
- .infotitle {
- padding: 8px 0;
- }
- span {
- font-size: 1rem;
- // color: #1890ff;
- position: absolute;
- top: 0;
- right: 0;
- cursor: pointer;
- }
- }
- .infoNum {
- padding: 10px 0;
- text-align: center;
- font-weight: 600;
- font-size: 20px;
- span {
- font-weight: 600;
- font-size: 16px;
- }
- .red {
- font-size: 20px;
- font-weight: 600;
- color: red;
- }
- .green {
- display: block;
- text-align: center;
- margin-left: 0.2rem;
- font-size: 14px;
- font-weight: 700;
- color: #32CD32;
- .huanbi {
- // color:#999;
- font-weight: 400;
- font-size: 14px;
- }
- }
- }
- }
- }
- .chartBox {
- background-color: #fff;
- margin: 15px 0px;
- padding: 2px 10px 30px;
- .chartBody {
- margin-top: 20px;
- display: flex;
- justify-content: space-between;
- flex-wrap: wrap;
- }
- }
- .tableBox {
- background-color: #fff;
- margin: 15px 0px;
- padding: 15px 0px;
- .tableTop {
- position: relative;
- padding: 20px 0;
- border-top: 1px solid #e0e0e0;
- font-size: 24px;
- color: black;
- .selectTime {
- margin-right: 20px;
- }
- .add {
- position: absolute;
- top: 0;
- right: 0;
- }
- }
- .tableOpt {
- margin-bottom: 20px;
- }
- }
- }
- </style>
|