1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384 |
- <template>
- <div>
- <a-row style="background-color: rgba(255, 255, 255, 1);margin-left: 2px;margin-right: 2px;margin-bottom: 20px;">
- <a-col :span="14" :push="10">
- <div style="display: flex;justify-content:space-around;margin: 25px;">
- <div>
- <p style="font-weight:900;font-size: 16px;">余额</p>
- <p>{{balance}}</p>
- </div>
- <div >
- <p style="font-weight:900;font-size: 16px;">投放状态</p>
- <p>{{state == 0?'投放中':'关'}}</p>
- </div>
- <div>
- <p style="font-weight:900;font-size: 16px;">今日消耗</p>
- <p>{{totalCost}}</p>
- </div>
- </div>
- </a-col>
- <a-col :span="10" :pull="14">
- <div style="margin:20px;">
- <p style="font-weight:900;font-size: 18px;">{{accountName}}</p>
- <p>账户ID:{{accountId}}</p>
- </div>
-
- </a-col>
- </a-row>
-
- <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
- <div slot="title">
- 数据趋势 <span style="font-size: 12px;">更新时间:{{updateTime | formatDate}}</span>
- </div>
- <div class="person-content-title" slot="extra">
- <div class="content-title-acount"></div>
- <div class="content-title-checkout">
- <span class="title-checkout-time">
- <a-range-picker format="YYYY-MM-DD" v-model="dateEchart" :range="dateRanges" @change="dateChange"/>
- </span>
- </div>
- </div>
- <a-row>
- <a-col :span="8">
- <a-checkbox-group
- v-model="valueBtn"
- name="checkboxgroup"
- :options="plainOptions"
- @change="checkboxonChange"
- />
-
- </a-col>
- <a-col :span="8" :offset="8">
- <p style="text-align: right;color: rgb(165, 165, 165);">显示指标</p>
- </a-col>
- </a-row>
- <div id="accountIndexEchart" ref="accountIndexEchart"
- style="width: 90%;height: 315px;margin: 0 auto;">
- <a-empty />
- </div>
- </a-card>
- <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
- <div slot="title">
- 组投放数据 <span style="font-size: 12px;">更新时间:{{updateTimeGroup | formatDate}}</span>
- </div>
- <div class="person-content-title" slot="extra">
- <div class="content-title-acount"></div>
- <div class="content-title-checkout">
- <span class="title-checkout-time">
- <a-button type="link" @click="customColumn">
- 自定义列
- </a-button>
- </span>
- </div>
- </div>
- <a-table
- size="middle"
- :dataSource="echartsData"
- :columns="columns"
- bordered
- id="outTable"
- :pagination="false"
- :loading="echartsLoading"
- :scroll="{ x: scrollX }"
- ref="accountTable"
- >
- <span slot="unitStatus" slot-scope="text, record">
- <a-switch :checked="text === 0" />
- </span>
- <span slot="operator" slot-scope="text,record">
- <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
- <span slot="title">修改出价</span>
- <template slot="content" style="width:300px;">
- <div style="margin:5px 0 0;padding: 0 0 15px;">
- <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
- <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
- </div>
-
- <div>
- <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
- <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
- </div>
-
- </template>
- <a href="javascript:;" type='primary' @click="()=>{record.visible=true}">调价</a>
- </a-popover>
- <a-divider type="vertical" />
- <a-dropdown :trigger="['click']">
- <a class="ant-dropdown-link" @click="e => e.preventDefault()">更多</a>
- <a-menu slot="overlay">
- <a-menu-item>
- <span href="javascript:;" @click="editTarget(record)">修改定向</span>
- </a-menu-item>
- <a-menu-item>
- <span href="javascript:;" @click="editLink(record)">修改链接</span>
- </a-menu-item>
-
- </a-menu>
- </a-dropdown>
- </span>
-
- </a-table>
- <a-pagination
- style="float: right;margin-top: 10px;"
- :total="totalAll"
- :show-total="total => `共 ${totalAll} 条`"
- size="small"
- show-size-changer
- show-quick-jumper
- :defaultPageSize="5"
- @change="onShowSizeChange"
- @showSizeChange="onShowSizeChange"
- />
- </a-card>
-
-
- <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
- <div slot="title">
- 素材相关 <span style="font-size: 12px;">更新时间:{{updateRelated | formatDate}}</span>
- </div>
- <div class="person-content-title" slot="extra">
- <div class="content-title-acount"></div>
- <div class="content-title-checkout">
- <span class="title-checkout-time" style="margin-right: 10px;">
- 素材类型:
- <a-radio-group v-model="projectAccount" @change="projectAccountChange">
- <a-radio-button value="0">
- 全部
- </a-radio-button>
- <a-radio-button value="1">
- 上新素材
- </a-radio-button>
- <a-radio-button value="2">
- 有效素材
- </a-radio-button>
- <a-radio-button value="3">
- 爆款素材
- </a-radio-button>
- </a-radio-group>
- </span>
- <span class="title-checkout-time">
- <a-range-picker v-model="dateSource" format="YYYY-MM-DD" :range="dateRanges" @change="dateSourceChange"/>
- </span>
- </div>
- </div>
- <a-table
- size="middle"
- :dataSource="sourceMaterialData"
- :columns="sourceMaterial"
- bordered
- id="outTable"
- :pagination="echartsIpagination"
- :loading="echartsLoading"
- ref="accountTable"
- >
- <span slot="unitvideoUrl" slot-scope="text, record">
- <video class="video" :src="text" controls="controls" style="height:200px">
- 您的浏览器不支持 video 标签。
- </video>
- </span>
- </a-table>
- </a-card>
- <a-card class="card-content echarts-card">
- <a-row>
- <a-col :span="12">
- <a-select v-model="selectValue" style="width:100px;" @change="selectValueChange">
- <a-select-option value="cost">花费</a-select-option>
- <a-select-option value="activationPrice">激活成本</a-select-option>
- <a-select-option value="activation">激活数</a-select-option>
- <a-select-option value="eventPayRoi">ROI</a-select-option>
- <a-select-option value="eventPay">付费次数</a-select-option>
- <a-select-option value="eventPayCost">付费成本</a-select-option>
- <a-select-option value="eventPayPurchaseAmountFirstDay">首日付费金额</a-select-option>
- <a-select-option value="eventNextDayStay">次留数</a-select-option>
- <a-select-option value="leave">次留</a-select-option>
- </a-select>
- </a-col>
- <a-col :span="12">
- <a-range-picker style="float: right;" v-model="datePie" format="YYYY-MM-DD" :range="dateRanges" @change="datePieChange"/>
- </a-col>
- </a-row>
- <div style="display: flex;justify-content:space-around;margin-top: 20px;">
-
- <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
-
-
-
-
- <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
-
-
-
- <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;"></div>
-
-
- >
- </div>
- </a-card>
- <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
- <div class="linkBody">
- <a-row>
- <a-col :span="6">
- <div style="text-align:right">修改定向包:</div>
- </a-col>
- <a-col :span="16">
- <a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
- <a-select-option v-for="i in directionalList" :key="i.templateId" :value='i.templateId'>
- {{ i.templateName }}
- </a-select-option>
- </a-select>
- </a-col>
- </a-row>
- </div>
- </a-modal>
- <!-- 修改检测链接的modal -->
- <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' :height='400' @cancel='linkhandleCancel'>
- <div class="linkBody">
- <a-row>
- <a-col :span="4">
- <div style="text-align:right">第三方检测链接:</div>
- </a-col>
- <a-col :span="18">
- <span>{{oldLink || '-'}}</span>
- </a-col>
- </a-row>
- <div style="margin-bottom:20px"></div>
- <a-row>
- <a-col :span="4">
- <div style="text-align:right">修改链接:</div>
- </a-col>
- <a-col :span="18">
- <a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
- </a-col>
- </a-row>
- </div>
- </a-modal>
- <customColumnProject
- :visible="visible"
- :listNum="listNum"
- :fiexColumn="columnsFixd"
- :mediaType="1"
- @closeCustomColumn="closeCustomColumn"
- @changeColumn="changeColumn"
- />
- </div>
- </template>
- <script>
- import customColumnProject from './customColumnProject.vue'
- import keepPersonData from './new-keep-data.js';
- import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
- import moment from 'moment';
- // 引入基本模板
- var echarts = require('echarts');
- // 引入折线图组件
- require('echarts/lib/chart/line');
- require('echarts/lib/chart/pie');
- // 引入提示框和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');
- export default{
- components:{customColumnProject},
- data() {
- return {
- targetVisible:false,
- listNum:[],
- visible:false,
- scrollX: 1500,
- columnsFixd:keepPersonData.setNoDeleteColumns(),
- valueBtn:['花费'],
- plainOptions:[
- {label:'花费',value:'花费'},
- {label:'激活成本',value:'激活成本'},
- {label:'新增付费成本',value:'新增付费成本'},
- {label:'次留率',value:'次留率'}
- ],
- colorChange:1,
- updateAccountEchart:'2021-12-21 16:04',
- dateEchart:[moment(), moment()],
- dateRanges: keepPersonData.setTimeRange(),
- dateSource:[moment(), moment()],
- selectValue:'cost',
- datePie:[moment(), moment()],
- echartsData:[],
- sourceMaterialData:[],
- echartsLoading:false,
- columns:[
- {
- title: '状态操作',
- dataIndex: 'status',
- key: 'status',
- align: 'center',
- scopedSlots: { customRender: 'unitStatus' },
- },
- {
- title: '组名称',
- dataIndex: 'unitName',
- key: 'unitName',
- align: 'center',
- },{
- title: '花费',
- dataIndex: 'charge',
- key: 'charge',
- align: 'center',
- sorter: (a, b) => a.charge - b.charge,
- },{
- title: '出价',
- dataIndex: 'bid',
- key: 'bid',
- align: 'center',
- },{
- title: '激活数',
- dataIndex: 'activation',
- key: 'activation',
- align: 'center',
- },{
- title: '激活成本',
- dataIndex: 'activationCost',
- key: 'activationCost',
- align: 'center',
- },{
- title: '操作建议',
- dataIndex: 'operationAgree',
- key: 'operationAgree',
- align: 'center',
- },{
- title: '操作',
- dataIndex: 'operator',
- key: 'operator',
- align: 'center',
- scopedSlots: { customRender: 'operator' },
- fixed:'right',
- width:150
- },
- ],
- sourceMaterial:[
- {
- title: '素材',
- dataIndex: 'videoUrl',
- key: 'videoUrl',
- align: 'center',
- scopedSlots: { customRender: 'unitvideoUrl' },
- width: 200
- }, {
- title: '素材ID',
- dataIndex: 'signature',
- key: 'signature',
- align: 'center',
- }, {
- title: '曝光数',
- dataIndex: 'showNum',
- key: 'showNum',
- align: 'center',
- }, {
- title: '花费',
- dataIndex: 'totalCost',
- key: 'totalCost',
- align: 'center',
- }, {
- title: '激活数',
- dataIndex: 'activation',
- key: 'activation',
- align: 'center',
- }, {
- title: '激活成本',
- dataIndex: 'activationPrice',
- key: 'activationPrice',
- align: 'center',
- },
- {
- title: '上线时间',
- dataIndex: 'dateTime',
- key: 'dateTime',
- align: 'center',
- },
- ],
- totalAll:0,
- tablePag: {
- pageNum: 1,
- pageSize: 5
- },
- echartsIpagination: {
- current: 1,
- pageSize: 5,
- // 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.echartsIpagination.current = current
- this.echartsIpagination.pageSize = pageSize
- },
- },
- projectAccount:'0',
- bidErrorMessage:'',
- newBid:'',
- selectDirectionalId:'',
- directionalList:[],
- currentUnit:{},
- oldLink:'',
- linkVisible:false,
- newLink:'',
- accountId:this.$route.query.accountId,
- accountName:'',
- balance:'',
- state:'',
- totalCost:'',
- updateTime:'',
- updateTimeGroup:'',
- updateRelated:'',
- accountIndexEchartThreePieShow:true,
- accountIndexEchartTwoPieShow:true,
- accountIndexEchartOnePieShow:true,
- }
- },
- filters: {
- formatDate: function (value) {
- if (value) {
- let date = new Date(value);
- let y = date.getFullYear();
- let MM = date.getMonth() + 1;
- MM = MM < 10 ? ('0' + MM) : MM;
- let d = date.getDate();
- d = d < 10 ? ('0' + d) : d;
- let h = date.getHours();
- h = h < 10 ? ('0' + h) : h;
- let m = date.getMinutes();
- m = m < 10 ? ('0' + m) : m;
- let s = date.getSeconds();
- s = s < 10 ? ('0' + s) : s;
- return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
- }else{
- return '-'
- }
-
- }
- },
- mounted() {
- // 获取折线图
- this.getQueryNewlyData();
- // 第一个饼图
- // this.getOnePieData();
- // 第二个饼图
- this.getGroupDataList();
- this.getAccountNameData();
- this.getGroupLaunchData();
- this.getEchartOnePieData();
- // this.showColumn();
- },
-
- methods: {
- // 自定义列
- customColumn(){
- this.visible = true;
- this.listNum = [...this.columns]
- },
- //自定义列相关
- closeCustomColumn() {
- this.visible = false
- },
- showColumn() {
- this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
- columnType: 13,
- }).then((res) => {
- // console.log(res)
- if (res.success) {
- // console.log(JSON.parse(res.result))
- if (res.result) {
- let columns = JSON.parse(res.result)
- if (columns.length) {
- if (columns.length >= this.columnsFixd.length) {
- columns.map((item, index) => {
- if (index > this.columnsFixd.length - 1) {
- item.sorter = function (a, b) {}
- }
- })
- columns = columns.slice(this.columnsFixd.length)
- this.columns = [...this.columnsFixd, ...columns]
- }
- // console.log(this.columns)
- }
- }
- this.changeColumn(this.columns)
- }
- })
- },
- changeColumn(val) {
- console.log(val);
- this.columns = [...val]
- if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
- this.columns.forEach((element, index) => {
- if (index < this.columns.length - 1) {
-
- element.width = 'auto'
- element.fixed = false
-
- }
- })
- this.scrollX = 0
- }
- else if (this.columns.length >= 8) {
- this.columns.forEach((element, index) => {
- if (index < this.columnsFixd.length) {
- element.width = 150
- element.fixed = 'left'
- }
- })
- this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
- }
- else {
- this.scrollX = 0
- this.columns.forEach((element) => {
- element.width = 'auto'
- element.fixed = false
-
- })
- }
- let arr = JSON.stringify(this.columns)
- this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
- json: arr,
- columnType: 13,
- }).then((res) => {
- // console.log(res)
- })
- },
- //获取echart折线图的值
- initEchart(idName, optionName) {
- let that = this;
- const chart = this.$refs[idName]
- // // console.log(res);(chart)
- if (chart) {
- const myChart = echarts.init(document.getElementById(idName))
- // myChart.showLoading({
- // text: "图表数据正在努力加载..."
- // });
- myChart.clear()
- myChart.setOption(optionName)
- window.addEventListener('resize', function() {
- that.clientWidth = document.documentElement.clientWidth - 224
- myChart.resize()
- })
- }
- },
- // 环形数据图
- getEchartOnePieData(){
- let params = {
- accountId:this.accountId,
- startTime:this.datePie[0].format('YYYY-MM-DD'),
- endTime:this.datePie[1].format('YYYY-MM-DD'),
- type:this.selectValue
- }
- getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountPieChar',params).then(res=>{
- if (res.code == 0) {
- let pieData = [];
- let pie2d = [];
- let pie3p = [];
- let center = '';
- let centerTwo = ''
- let centerthree = ''
- if (res.result.age.length != 0) {
- this.accountIndexEchartOnePieShow = '分年龄数据';
- center = ''
- for (var i = 0; i < res.result.age.length; i++) {
- var obj = new Object();
- obj.name = res.result.age[i].ageSegment;
- if (this.selectValue == 'cost') {
- obj.value = res.result.age[i].cost;
- }else if(this.selectValue == 'activationPrice'){
- obj.value = res.result.age[i].activationPrice;
- }else if(this.selectValue == 'activation'){
- obj.value = res.result.age[i].activation;
- }else if(this.selectValue == 'eventPayRoi'){
- obj.value = res.result.age[i].eventPayRoi;
- }else if(this.selectValue == 'eventPay'){
- obj.value = res.result.age[i].eventPay;
- }else if(this.selectValue == 'eventPayCost'){
- obj.value = res.result.age[i].eventPayCost;
- }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
- obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
- }else if(this.selectValue == 'eventNextDayStay'){
- obj.value = res.result.age[i].eventNextDayStay;
- }else if(this.selectValue == 'leave'){
- obj.value = res.result.age[i].leave;
- }
-
- pieData[i] = obj;
-
- }
-
- }else{
- center = 'center'
- this.accountIndexEchartOnePieShow = '暂无数据';
-
- }
- if (res.result.gender.length != 0) {
- this.accountIndexEchartTwoPieShow = '分性别数据';
- centerTwo="";
- for (var i = 0; i < res.result.gender.length; i++) {
- var obj = new Object();
- obj.name = res.result.gender[i].gender;
- if (this.selectValue == 'cost') {
- obj.value = res.result.age[i].cost;
- }else if(this.selectValue == 'activationPrice'){
- obj.value = res.result.age[i].activationPrice;
- }else if(this.selectValue == 'activation'){
- obj.value = res.result.age[i].activation;
- }else if(this.selectValue == 'eventPayRoi'){
- obj.value = res.result.age[i].eventPayRoi;
- }else if(this.selectValue == 'eventPay'){
- obj.value = res.result.age[i].eventPay;
- }else if(this.selectValue == 'eventPayCost'){
- obj.value = res.result.age[i].eventPayCost;
- }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
- obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
- }else if(this.selectValue == 'eventNextDayStay'){
- obj.value = res.result.age[i].eventNextDayStay;
- }else if(this.selectValue == 'leave'){
- obj.value = res.result.age[i].leave;
- }
- pie2d[i] = obj;
- }
-
- }else{
- centerTwo = 'center'
- this.accountIndexEchartTwoPieShow = '暂无数据';
- }
-
- if (res.result.scene.length != 0) {
- this.accountIndexEchartThreePieShow = '分版位数据';
- centerthree='';
- for (var i = 0; i < res.result.scene.length; i++) {
- var obj = new Object();
- obj.name = res.result.scene[i].adScene;
- if (this.selectValue == 'cost') {
- obj.value = res.result.age[i].cost;
- }else if(this.selectValue == 'activationPrice'){
- obj.value = res.result.age[i].activationPrice;
- }else if(this.selectValue == 'activation'){
- obj.value = res.result.age[i].activation;
- }else if(this.selectValue == 'eventPayRoi'){
- obj.value = res.result.age[i].eventPayRoi;
- }else if(this.selectValue == 'eventPay'){
- obj.value = res.result.age[i].eventPay;
- }else if(this.selectValue == 'eventPayCost'){
- obj.value = res.result.age[i].eventPayCost;
- }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
- obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
- }else if(this.selectValue == 'eventNextDayStay'){
- obj.value = res.result.age[i].eventNextDayStay;
- }else if(this.selectValue == 'leave'){
- obj.value = res.result.age[i].leave;
- }
- pie3p[i] = obj;
- }
-
- }else{
- centerthree = 'center'
- this.accountIndexEchartThreePieShow = '暂无数据';
- }
-
- this.initEchart('accountIndexEchartOnePie',this.initPieOneData(pieData,this.accountIndexEchartOnePieShow,center));
- this.initEchart('accountIndexEchartTwoPie',this.initPieTwoData(pie2d, this.accountIndexEchartTwoPieShow,centerTwo));
- this.initEchart('accountIndexEchartThreePie',this.initPieThreeData(pie3p,this.accountIndexEchartThreePieShow,centerthree));
-
-
-
-
- }
-
- })
-
- },
- selectValueChange(){
- this.getEchartOnePieData();
- },
- datePieChange(){
- this.getEchartOnePieData();
- },
- // 素材相关数据
- getGroupLaunchData(){
- let params = {
- accountId:this.accountId,
- startTime:this.dateSource[0].format('YYYY-MM-DD'),
- endTime:this.dateSource[1].format('YYYY-MM-DD'),
- searchType:this.projectAccount,
- pageNum:this.echartsIpagination.current,
- pageSize:this.echartsIpagination.pageSize
- }
- getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountMaterialNewAndEffectAndFaddish',params).then(res=>{
- if (res.code == 0) {
- this.updateRelated = res.timestamp;
- this.sourceMaterialData = res.result.list;
- this.echartsIpagination.total = res.result.total;
- }
- })
- },
- projectAccountChange(){
- this.echartsIpagination.current = 1;
- this.getGroupLaunchData();
- },
- dateSourceChange(){
- this.echartsIpagination.current = 1;
- this.getGroupLaunchData();
- },
- checkboxonChange(){
- this.getQueryNewlyData();
- },
- dateChange(){
- this.getQueryNewlyData();
- },
- // 获取账户名称等信息
- getAccountNameData(){
- let params = {
- accountId:this.accountId
- }
- getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfo',params).then(res=>{
- if(res.code == 0){
- this.accountName = res.result.accountName;
- this.balance = res.result.balance;
- this.state = res.result.state;
- this.totalCost = res.result.totalCost;
- }
- })
- },
- // 获取组投放数据表格
- getGroupDataList(){
- let params = {
- accountId:this.accountId,
- pageNum:this.tablePag.pageNum,
- pageSize:this.tablePag.pageSize
- }
- getAction('/kuaishou/realTime/getUnitDateInfo',params).then(res=>{
- if (res.code == 200) {
- this.updateTimeGroup = res.timestamp;
- this.echartsData = res.result
- this.totalAll = res.result[0].totalCount
- }
- })
- },
- onShowSizeChange(current, pageSize) {
- console.log(current);
- this.tablePag = {
- pageNum: current,
- pageSize: pageSize
- };
- this.getGroupDataList();
- },
- visibleChange(){
- this.bidErrorMessage='';
- this.newBid=undefined;
-
- },
- bidChangeCancel(record){
- record.visible=false;
- this.newBid=undefined;
- this.bidErrorMessage=''
- },
- // 修改出价
- bidChangeOk(record){
- console.log(111);
- if(this.newBid){
- record.visible=false;
- record.accountId = this.accountId;
- getAction('/kuaishou/dingpan/updateBid',{
- accountId:record.accountId,
- bid:this.newBid*1000,
- unitId:record.unitId,
- bidType:record.bidType
- }).then(res=>{
- // console.log(res);(res)
- if(res.code==0){
- this.$message.success(res.message)
- this.newBid=undefined;
- this.getLaunchData()
- }
-
- })
- }else{
- this.bidErrorMessage='请正确填写出价'
- // this.$message.error('请正确填写出价')
- }
-
- },
- // 点击修改定向
- editTarget(record){
- // console.log(res);(record);
- this.currentUnit=record;
- this.targetVisible=true;
- getAction('/batch/kuaishouTemplate/list',{
- accountId:this.accountId,
- }).then(res=>{
- // console.log(res);(res);
- if(res.result){
- this.directionalList=res.result
- }
- })
-
- },
- targethandleCancel(){
- this.targetVisible=false;
- this.selectDirectionalId=undefined
- },
- // 定向包修改OK事件
- targethandleOk(e){
- this.targetVisible=false;
- getAction('/kuaishou/dingpan/updateTemplate',{
- accountId:this.accountId,
- unitId:this.currentUnit.unitId,
- templateId:this.selectDirectionalId
- }).then(res=>{
-
- if(res.success){
- this.$message.success(res.message)
- }else{
- this.$message.error(res.message)
- }
- this.selectDirectionalId=undefined
- })
- },
- editLink(record){
- this.currentUnit=record;
- this.linkVisible=true;
- getAction('/kuaishou/dingpan/getClickTrackUrlByUnitId',{
- accountId:this.accountId,
- unitId:record.unitId
- }).then(res=>{
- // console.log(res);(res);
- if(res.result){
- this.oldLink=res.result
- }
- })
- },
- // 监测链接修改OK事件
- linkhandleOk(e){
- this.linkVisible=false;
- getAction('/kuaishou/dingpan/updateClickTrackUrlByUnitId',{
- accountId:this.accountId,
- unitId:this.currentUnit.unitId,
- clickTrackUr:this.newLink
- }).then(res=>{
- // console.log(res);(res)
- this.newLink='';
- if(res.success){
- this.$message.success('修改成功')
- }else{
- this.$message.error('修改失败,请重试')
- }
- })
- },
- linkhandleCancel(){
- this.linkVisible=false;
- this.newLink='';
- },
- // 获取折线图
- getQueryNewlyData(){
- let params = {
- accountId:this.accountId,
- startTime:this.dateEchart[0].format('YYYY-MM-DD'),
- endTime:this.dateEchart[1].format('YYYY-MM-DD'),
- }
- getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfoBrokenLine',params).then(res=>{
- if (res.code == 0) {
- this.updateTime = res.timestamp
- if (res.message == '账户时报报折线图查询成功') {
- let today = {};
- let yesterday = {};
- let timeData = [];
- timeData = res.result.map(item=>{
- return item.yHour
- })
- if (this.valueBtn.indexOf('花费') != -1 ) {
- today.data = res.result.map(itemprice=>{
- return itemprice.tCost
- });
- today.name = '花费(today)'
- yesterday.data = res.result.map(itemyes=>{
- return itemyes.yCost
- });
- yesterday.name = '花费(yesterday)'
- }else{
- today.data = [];
- today.name = '';
- yesterday.data = [];
- yesterday.name = '';
- }
- let activation = {};
- let activationyes = {};
- if(this.valueBtn.indexOf('激活成本') != -1){
- activation.data = res.result.map(itemprice=>{
- return itemprice.tActivationPrice
- });
- activation.name = '激活成本(today)'
- activationyes.data = res.result.map(itemyes=>{
- return itemyes.yActivationPrice
- });
- activationyes.name = '激活成本(yesterday)'
- }else{
- activation.data = [];
- activation.name = '';
- activationyes.data = [];
- activationyes.name = '';
- }
- let pay = {};
- let payyes = {};
- if(this.valueBtn.indexOf('新增付费成本') != -1){
- pay.data = res.result.map(itemprice=>{
- return itemprice.tEventNewUserPayCost
- });
- pay.name = '新增付费成本(today)'
- payyes.data = res.result.map(itemyes=>{
- return itemyes.yEventNewUserPayCost
- });
- payyes.name = '新增付费成本(yesterday)'
- }else{
- pay.data = [];
- pay.name = '';
- payyes.data = [];
- payyes.name = '';
- }
- let Secondary = {};
- let Secondaryyes = {};
- if(this.valueBtn.indexOf('次留率') != -1){
- Secondary.data = res.result.map(itemprice=>{
- return itemprice.tLeave
- });
- Secondary.name = '次留率(today)'
- Secondaryyes.data = res.result.map(itemyes=>{
- return itemyes.yLeave
- });
- Secondaryyes.name = '次留率(yesterday)'
- }else{
- Secondary.data = [];
- Secondary.name = '';
- Secondaryyes.data = [];
- Secondaryyes.name = '';
- }
-
-
- this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
- }else if(res.message == '账户日报折线图查询成功'){
- let timeData = [];
-
- timeData = res.result.map(item=>{
- return item.dateTime
- })
- let today = {};
- let yesterday = {};
- let activation = {};
- let activationyes = {};
- if (this.valueBtn.indexOf('花费') != -1 ) {
- today.data = res.result.map(itemprice=>{
- return itemprice.cost
- });
- today.name = '花费'
-
- }else{
- today.data = [];
- today.name = '';
-
- }
- if (this.valueBtn.indexOf('激活成本') != -1 ) {
- yesterday.data = res.result.map(itemprice=>{
- return itemprice.activationPrice
- });
- yesterday.name = '激活成本'
-
- }else{
- yesterday.data = [];
- yesterday.name = '';
-
- }
- if (this.valueBtn.indexOf('新增付费成本') != -1 ) {
- activation.data = res.result.map(itemprice=>{
- return itemprice.eventNewUserPayCost
- });
- activation.name = '新增付费成本'
-
- }else{
- activation.data = [];
- activation.name = '';
-
- }
- if (this.valueBtn.indexOf('次留率') != -1 ) {
- activationyes.data = res.result.map(itemprice=>{
- return itemprice.leave
- });
- activationyes.name = '次留率'
-
- }else{
- activationyes.data = [];
- activationyes.name = '';
-
- }
- let pay = {};
- let payyes = {};
- let Secondary = {};
- let Secondaryyes = {};
- pay.name = '';
- pay.data = [];
- payyes.name = '';
- payyes.data = [];
- Secondary.name = '';
- Secondary.data = [];
- Secondaryyes.name = '';
- Secondaryyes.data = [];
- this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
- }
- }
- })
-
-
-
- },
-
- // 折线图
- initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes) {
- let option = {
-
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- bottom:'0%',
- // data: ['today','yesterday']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '15%',
- containLabel: true
- },
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: timeData
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: today.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data:today.data,
- lineStyle: {
- color: '#00BFFF',
- width: 2,
- },
- itemStyle:{
- color:'#00BFFF',
- borderWidth:2,
- borderColor:'#00BFFF'
- },
- },
- {
- name: yesterday.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data:yesterday.data,
- lineStyle: {
- color: '#00FF7F',
- width: 2,
- },
- itemStyle:{
- color:'#00FF7F',
- borderWidth:2,
- borderColor:'#00FF00'
- },
- }, {
- name: activation.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: activation.data,
-
-
- },
- {
- name: activationyes.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: activationyes.data,
-
-
- },{
- name: pay.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: pay.data,
-
-
- },
- {
- name: payyes.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: payyes.data,
-
-
- },{
- name: Secondary.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: Secondary.data,
-
-
- },
- {
- name: Secondaryyes.name,
- type: 'line',
- smooth: true,
- symbol: 'circle',
- data: Secondaryyes.data,
-
-
- },
-
- ]
- };
- return option
- },
- // 第一个饼图
- initPieOneData(pieData,accountIndexEchartOnePieShow,center){
- var iconNone = require('../../../../../assets/nodata.png');
- let option = {
- tooltip: {
- trigger: 'item'
- },
- title:{
- x: center,
- y: center,
- text:accountIndexEchartOnePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartOnePieShow,
- show: true,
- textStyle:{
- rich: {
- a:{
- height: 200,
- width: 280,
- backgroundColor: {
- image: iconNone,
- }
- }
- }
- }
- },
- legend: {
- top: '10%',
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '15',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: pieData
- }
- ]
- };
- return option
- },
- initPieTwoData(pie2d,accountIndexEchartThreePieShow,centerthree){
- var iconNoneThree = require('../../../../../assets/nodata.png');
- let option = {
- tooltip: {
- trigger: 'item'
- },
- title:{
- x:centerthree,
- y:centerthree,
- text:accountIndexEchartThreePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartThreePieShow,
- textStyle:{
- rich: {
- a:{
- height: 200,
- width: 280,
- backgroundColor: {
- image: iconNoneThree,
- }
- }
- }
- }
- },
- legend: {
- top: '10%',
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '15',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data: pie2d
- }
- ]
- };
- return option
- },
- initPieThreeData(pie3p,accountIndexEchartTwoPieShow,centerTwo){
- var iconNoneTwo = require('../../../../../assets/nodata.png');
- let option = {
- tooltip: {
- trigger: 'item'
- },
- title:{
- x:centerTwo,
- y:centerTwo,
- text:accountIndexEchartTwoPieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartTwoPieShow,
- textStyle:{
- rich: {
- a:{
- height: 200,
- width: 280,
- backgroundColor: {
- image: iconNoneTwo,
- }
- }
- }
- }
- },
- legend: {
- top: '10%',
- orient: 'vertical',
- left: 'left'
- },
- series: [
- {
- name: '',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: '15',
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: false
- },
- data:pie3p
- }
- ]
- };
- return option
- },
- },
- }
- </script>
- <style lang="less" scoped>
- @import "../keep-manage/keep-manage.less";
- </style>
|