account-newkeepManage.vue 57 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384
  1. <template>
  2. <div>
  3. <a-row style="background-color: rgba(255, 255, 255, 1);margin-left: 2px;margin-right: 2px;margin-bottom: 20px;">
  4. <a-col :span="14" :push="10">
  5. <div style="display: flex;justify-content:space-around;margin: 25px;">
  6. <div>
  7. <p style="font-weight:900;font-size: 16px;">余额</p>
  8. <p>{{balance}}</p>
  9. </div>
  10. <div >
  11. <p style="font-weight:900;font-size: 16px;">投放状态</p>
  12. <p>{{state == 0?'投放中':'关'}}</p>
  13. </div>
  14. <div>
  15. <p style="font-weight:900;font-size: 16px;">今日消耗</p>
  16. <p>{{totalCost}}</p>
  17. </div>
  18. </div>
  19. </a-col>
  20. <a-col :span="10" :pull="14">
  21. <div style="margin:20px;">
  22. <p style="font-weight:900;font-size: 18px;">{{accountName}}</p>
  23. <p>账户ID:{{accountId}}</p>
  24. </div>
  25. </a-col>
  26. </a-row>
  27. <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
  28. <div slot="title">
  29. 数据趋势 <span style="font-size: 12px;">更新时间:{{updateTime | formatDate}}</span>
  30. </div>
  31. <div class="person-content-title" slot="extra">
  32. <div class="content-title-acount"></div>
  33. <div class="content-title-checkout">
  34. <span class="title-checkout-time">
  35. <a-range-picker format="YYYY-MM-DD" v-model="dateEchart" :range="dateRanges" @change="dateChange"/>
  36. </span>
  37. </div>
  38. </div>
  39. <a-row>
  40. <a-col :span="8">
  41. <a-checkbox-group
  42. v-model="valueBtn"
  43. name="checkboxgroup"
  44. :options="plainOptions"
  45. @change="checkboxonChange"
  46. />
  47. </a-col>
  48. <a-col :span="8" :offset="8">
  49. <p style="text-align: right;color: rgb(165, 165, 165);">显示指标</p>
  50. </a-col>
  51. </a-row>
  52. <div id="accountIndexEchart" ref="accountIndexEchart"
  53. style="width: 90%;height: 315px;margin: 0 auto;">
  54. <a-empty />
  55. </div>
  56. </a-card>
  57. <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
  58. <div slot="title">
  59. 组投放数据 <span style="font-size: 12px;">更新时间:{{updateTimeGroup | formatDate}}</span>
  60. </div>
  61. <div class="person-content-title" slot="extra">
  62. <div class="content-title-acount"></div>
  63. <div class="content-title-checkout">
  64. <span class="title-checkout-time">
  65. <a-button type="link" @click="customColumn">
  66. 自定义列
  67. </a-button>
  68. </span>
  69. </div>
  70. </div>
  71. <a-table
  72. size="middle"
  73. :dataSource="echartsData"
  74. :columns="columns"
  75. bordered
  76. id="outTable"
  77. :pagination="false"
  78. :loading="echartsLoading"
  79. :scroll="{ x: scrollX }"
  80. ref="accountTable"
  81. >
  82. <span slot="unitStatus" slot-scope="text, record">
  83. <a-switch :checked="text === 0" />
  84. </span>
  85. <span slot="operator" slot-scope="text,record">
  86. <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
  87. <span slot="title">修改出价</span>
  88. <template slot="content" style="width:300px;">
  89. <div style="margin:5px 0 0;padding: 0 0 15px;">
  90. <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
  91. <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
  92. </div>
  93. <div>
  94. <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
  95. <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
  96. </div>
  97. </template>
  98. <a href="javascript:;" type='primary' @click="()=>{record.visible=true}">调价</a>
  99. </a-popover>
  100. <a-divider type="vertical" />
  101. <a-dropdown :trigger="['click']">
  102. <a class="ant-dropdown-link" @click="e => e.preventDefault()">更多</a>
  103. <a-menu slot="overlay">
  104. <a-menu-item>
  105. <span href="javascript:;" @click="editTarget(record)">修改定向</span>
  106. </a-menu-item>
  107. <a-menu-item>
  108. <span href="javascript:;" @click="editLink(record)">修改链接</span>
  109. </a-menu-item>
  110. </a-menu>
  111. </a-dropdown>
  112. </span>
  113. </a-table>
  114. <a-pagination
  115. style="float: right;margin-top: 10px;"
  116. :total="totalAll"
  117. :show-total="total => `共 ${totalAll} 条`"
  118. size="small"
  119. show-size-changer
  120. show-quick-jumper
  121. :defaultPageSize="5"
  122. @change="onShowSizeChange"
  123. @showSizeChange="onShowSizeChange"
  124. />
  125. </a-card>
  126. <a-card class="card-content echarts-card" style="margin-bottom: 20px;">
  127. <div slot="title">
  128. 素材相关 <span style="font-size: 12px;">更新时间:{{updateRelated | formatDate}}</span>
  129. </div>
  130. <div class="person-content-title" slot="extra">
  131. <div class="content-title-acount"></div>
  132. <div class="content-title-checkout">
  133. <span class="title-checkout-time" style="margin-right: 10px;">
  134. 素材类型:
  135. <a-radio-group v-model="projectAccount" @change="projectAccountChange">
  136. <a-radio-button value="0">
  137. 全部
  138. </a-radio-button>
  139. <a-radio-button value="1">
  140. 上新素材
  141. </a-radio-button>
  142. <a-radio-button value="2">
  143. 有效素材
  144. </a-radio-button>
  145. <a-radio-button value="3">
  146. 爆款素材
  147. </a-radio-button>
  148. </a-radio-group>
  149. </span>
  150. <span class="title-checkout-time">
  151. <a-range-picker v-model="dateSource" format="YYYY-MM-DD" :range="dateRanges" @change="dateSourceChange"/>
  152. </span>
  153. </div>
  154. </div>
  155. <a-table
  156. size="middle"
  157. :dataSource="sourceMaterialData"
  158. :columns="sourceMaterial"
  159. bordered
  160. id="outTable"
  161. :pagination="echartsIpagination"
  162. :loading="echartsLoading"
  163. ref="accountTable"
  164. >
  165. <span slot="unitvideoUrl" slot-scope="text, record">
  166. <video class="video" :src="text" controls="controls" style="height:200px">
  167. 您的浏览器不支持 video 标签。
  168. </video>
  169. </span>
  170. </a-table>
  171. </a-card>
  172. <a-card class="card-content echarts-card">
  173. <a-row>
  174. <a-col :span="12">
  175. <a-select v-model="selectValue" style="width:100px;" @change="selectValueChange">
  176. <a-select-option value="cost">花费</a-select-option>
  177. <a-select-option value="activationPrice">激活成本</a-select-option>
  178. <a-select-option value="activation">激活数</a-select-option>
  179. <a-select-option value="eventPayRoi">ROI</a-select-option>
  180. <a-select-option value="eventPay">付费次数</a-select-option>
  181. <a-select-option value="eventPayCost">付费成本</a-select-option>
  182. <a-select-option value="eventPayPurchaseAmountFirstDay">首日付费金额</a-select-option>
  183. <a-select-option value="eventNextDayStay">次留数</a-select-option>
  184. <a-select-option value="leave">次留</a-select-option>
  185. </a-select>
  186. </a-col>
  187. <a-col :span="12">
  188. <a-range-picker style="float: right;" v-model="datePie" format="YYYY-MM-DD" :range="dateRanges" @change="datePieChange"/>
  189. </a-col>
  190. </a-row>
  191. <div style="display: flex;justify-content:space-around;margin-top: 20px;">
  192. <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
  193. <div id="accountIndexEchartTwoPie" ref="accountIndexEchartTwoPie" style="width: 35%;height: 315px;border-right: 1px solid #ccc;"> </div>
  194. <div id="accountIndexEchartThreePie" ref="accountIndexEchartThreePie" style="width: 35%;height: 315px;"></div>
  195. >
  196. </div>
  197. </a-card>
  198. <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
  199. <div class="linkBody">
  200. <a-row>
  201. <a-col :span="6">
  202. <div style="text-align:right">修改定向包:</div>
  203. </a-col>
  204. <a-col :span="16">
  205. <a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
  206. <a-select-option v-for="i in directionalList" :key="i.templateId" :value='i.templateId'>
  207. {{ i.templateName }}
  208. </a-select-option>
  209. </a-select>
  210. </a-col>
  211. </a-row>
  212. </div>
  213. </a-modal>
  214. <!-- 修改检测链接的modal -->
  215. <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' :height='400' @cancel='linkhandleCancel'>
  216. <div class="linkBody">
  217. <a-row>
  218. <a-col :span="4">
  219. <div style="text-align:right">第三方检测链接:</div>
  220. </a-col>
  221. <a-col :span="18">
  222. <span>{{oldLink || '-'}}</span>
  223. </a-col>
  224. </a-row>
  225. <div style="margin-bottom:20px"></div>
  226. <a-row>
  227. <a-col :span="4">
  228. <div style="text-align:right">修改链接:</div>
  229. </a-col>
  230. <a-col :span="18">
  231. <a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
  232. </a-col>
  233. </a-row>
  234. </div>
  235. </a-modal>
  236. <customColumnProject
  237. :visible="visible"
  238. :listNum="listNum"
  239. :fiexColumn="columnsFixd"
  240. :mediaType="1"
  241. @closeCustomColumn="closeCustomColumn"
  242. @changeColumn="changeColumn"
  243. />
  244. </div>
  245. </template>
  246. <script>
  247. import customColumnProject from './customColumnProject.vue'
  248. import keepPersonData from './new-keep-data.js';
  249. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  250. import moment from 'moment';
  251. // 引入基本模板
  252. var echarts = require('echarts');
  253. // 引入折线图组件
  254. require('echarts/lib/chart/line');
  255. require('echarts/lib/chart/pie');
  256. // 引入提示框和title组件
  257. require('echarts/lib/component/tooltip');
  258. require('echarts/lib/component/title');
  259. require('echarts/lib/component/graphic');
  260. require('echarts/lib/component/toolbox');
  261. require('echarts/lib/component/legend');
  262. export default{
  263. components:{customColumnProject},
  264. data() {
  265. return {
  266. targetVisible:false,
  267. listNum:[],
  268. visible:false,
  269. scrollX: 1500,
  270. columnsFixd:keepPersonData.setNoDeleteColumns(),
  271. valueBtn:['花费'],
  272. plainOptions:[
  273. {label:'花费',value:'花费'},
  274. {label:'激活成本',value:'激活成本'},
  275. {label:'新增付费成本',value:'新增付费成本'},
  276. {label:'次留率',value:'次留率'}
  277. ],
  278. colorChange:1,
  279. updateAccountEchart:'2021-12-21 16:04',
  280. dateEchart:[moment(), moment()],
  281. dateRanges: keepPersonData.setTimeRange(),
  282. dateSource:[moment(), moment()],
  283. selectValue:'cost',
  284. datePie:[moment(), moment()],
  285. echartsData:[],
  286. sourceMaterialData:[],
  287. echartsLoading:false,
  288. columns:[
  289. {
  290. title: '状态操作',
  291. dataIndex: 'status',
  292. key: 'status',
  293. align: 'center',
  294. scopedSlots: { customRender: 'unitStatus' },
  295. },
  296. {
  297. title: '组名称',
  298. dataIndex: 'unitName',
  299. key: 'unitName',
  300. align: 'center',
  301. },{
  302. title: '花费',
  303. dataIndex: 'charge',
  304. key: 'charge',
  305. align: 'center',
  306. sorter: (a, b) => a.charge - b.charge,
  307. },{
  308. title: '出价',
  309. dataIndex: 'bid',
  310. key: 'bid',
  311. align: 'center',
  312. },{
  313. title: '激活数',
  314. dataIndex: 'activation',
  315. key: 'activation',
  316. align: 'center',
  317. },{
  318. title: '激活成本',
  319. dataIndex: 'activationCost',
  320. key: 'activationCost',
  321. align: 'center',
  322. },{
  323. title: '操作建议',
  324. dataIndex: 'operationAgree',
  325. key: 'operationAgree',
  326. align: 'center',
  327. },{
  328. title: '操作',
  329. dataIndex: 'operator',
  330. key: 'operator',
  331. align: 'center',
  332. scopedSlots: { customRender: 'operator' },
  333. fixed:'right',
  334. width:150
  335. },
  336. ],
  337. sourceMaterial:[
  338. {
  339. title: '素材',
  340. dataIndex: 'videoUrl',
  341. key: 'videoUrl',
  342. align: 'center',
  343. scopedSlots: { customRender: 'unitvideoUrl' },
  344. width: 200
  345. }, {
  346. title: '素材ID',
  347. dataIndex: 'signature',
  348. key: 'signature',
  349. align: 'center',
  350. }, {
  351. title: '曝光数',
  352. dataIndex: 'showNum',
  353. key: 'showNum',
  354. align: 'center',
  355. }, {
  356. title: '花费',
  357. dataIndex: 'totalCost',
  358. key: 'totalCost',
  359. align: 'center',
  360. }, {
  361. title: '激活数',
  362. dataIndex: 'activation',
  363. key: 'activation',
  364. align: 'center',
  365. }, {
  366. title: '激活成本',
  367. dataIndex: 'activationPrice',
  368. key: 'activationPrice',
  369. align: 'center',
  370. },
  371. {
  372. title: '上线时间',
  373. dataIndex: 'dateTime',
  374. key: 'dateTime',
  375. align: 'center',
  376. },
  377. ],
  378. totalAll:0,
  379. tablePag: {
  380. pageNum: 1,
  381. pageSize: 5
  382. },
  383. echartsIpagination: {
  384. current: 1,
  385. pageSize: 5,
  386. // pageSizeOptions: ['10', '20', '30'],
  387. showTotal: (total, range) => {
  388. return range[0] + '-' + range[1] + ' 共' + total + '条'
  389. },
  390. showQuickJumper: true,
  391. // showSizeChanger: true,
  392. // pageSizeOptions: ['10', '30', '50'],
  393. total: 0,
  394. onChange: (current, pageSize) => {
  395. // 切换分页时的回调,
  396. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  397. this.echartsIpagination.current = current
  398. this.echartsIpagination.pageSize = pageSize
  399. },
  400. },
  401. projectAccount:'0',
  402. bidErrorMessage:'',
  403. newBid:'',
  404. selectDirectionalId:'',
  405. directionalList:[],
  406. currentUnit:{},
  407. oldLink:'',
  408. linkVisible:false,
  409. newLink:'',
  410. accountId:this.$route.query.accountId,
  411. accountName:'',
  412. balance:'',
  413. state:'',
  414. totalCost:'',
  415. updateTime:'',
  416. updateTimeGroup:'',
  417. updateRelated:'',
  418. accountIndexEchartThreePieShow:true,
  419. accountIndexEchartTwoPieShow:true,
  420. accountIndexEchartOnePieShow:true,
  421. }
  422. },
  423. filters: {
  424. formatDate: function (value) {
  425. if (value) {
  426. let date = new Date(value);
  427. let y = date.getFullYear();
  428. let MM = date.getMonth() + 1;
  429. MM = MM < 10 ? ('0' + MM) : MM;
  430. let d = date.getDate();
  431. d = d < 10 ? ('0' + d) : d;
  432. let h = date.getHours();
  433. h = h < 10 ? ('0' + h) : h;
  434. let m = date.getMinutes();
  435. m = m < 10 ? ('0' + m) : m;
  436. let s = date.getSeconds();
  437. s = s < 10 ? ('0' + s) : s;
  438. return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
  439. }else{
  440. return '-'
  441. }
  442. }
  443. },
  444. mounted() {
  445. // 获取折线图
  446. this.getQueryNewlyData();
  447. // 第一个饼图
  448. // this.getOnePieData();
  449. // 第二个饼图
  450. this.getGroupDataList();
  451. this.getAccountNameData();
  452. this.getGroupLaunchData();
  453. this.getEchartOnePieData();
  454. // this.showColumn();
  455. },
  456. methods: {
  457. // 自定义列
  458. customColumn(){
  459. this.visible = true;
  460. this.listNum = [...this.columns]
  461. },
  462. //自定义列相关
  463. closeCustomColumn() {
  464. this.visible = false
  465. },
  466. showColumn() {
  467. this.postDataAction('/toutiao/videoReportDaily/getColumnJson', {
  468. columnType: 13,
  469. }).then((res) => {
  470. // console.log(res)
  471. if (res.success) {
  472. // console.log(JSON.parse(res.result))
  473. if (res.result) {
  474. let columns = JSON.parse(res.result)
  475. if (columns.length) {
  476. if (columns.length >= this.columnsFixd.length) {
  477. columns.map((item, index) => {
  478. if (index > this.columnsFixd.length - 1) {
  479. item.sorter = function (a, b) {}
  480. }
  481. })
  482. columns = columns.slice(this.columnsFixd.length)
  483. this.columns = [...this.columnsFixd, ...columns]
  484. }
  485. // console.log(this.columns)
  486. }
  487. }
  488. this.changeColumn(this.columns)
  489. }
  490. })
  491. },
  492. changeColumn(val) {
  493. console.log(val);
  494. this.columns = [...val]
  495. if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
  496. this.columns.forEach((element, index) => {
  497. if (index < this.columns.length - 1) {
  498. element.width = 'auto'
  499. element.fixed = false
  500. }
  501. })
  502. this.scrollX = 0
  503. }
  504. else if (this.columns.length >= 8) {
  505. this.columns.forEach((element, index) => {
  506. if (index < this.columnsFixd.length) {
  507. element.width = 150
  508. element.fixed = 'left'
  509. }
  510. })
  511. this.scrollX = 1000 + 150 * (this.columns.length - this.columnsFixd.length)
  512. }
  513. else {
  514. this.scrollX = 0
  515. this.columns.forEach((element) => {
  516. element.width = 'auto'
  517. element.fixed = false
  518. })
  519. }
  520. let arr = JSON.stringify(this.columns)
  521. this.postDataAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  522. json: arr,
  523. columnType: 13,
  524. }).then((res) => {
  525. // console.log(res)
  526. })
  527. },
  528. //获取echart折线图的值
  529. initEchart(idName, optionName) {
  530. let that = this;
  531. const chart = this.$refs[idName]
  532. // // console.log(res);(chart)
  533. if (chart) {
  534. const myChart = echarts.init(document.getElementById(idName))
  535. // myChart.showLoading({
  536. // text: "图表数据正在努力加载..."
  537. // });
  538. myChart.clear()
  539. myChart.setOption(optionName)
  540. window.addEventListener('resize', function() {
  541. that.clientWidth = document.documentElement.clientWidth - 224
  542. myChart.resize()
  543. })
  544. }
  545. },
  546. // 环形数据图
  547. getEchartOnePieData(){
  548. let params = {
  549. accountId:this.accountId,
  550. startTime:this.datePie[0].format('YYYY-MM-DD'),
  551. endTime:this.datePie[1].format('YYYY-MM-DD'),
  552. type:this.selectValue
  553. }
  554. getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountPieChar',params).then(res=>{
  555. if (res.code == 0) {
  556. let pieData = [];
  557. let pie2d = [];
  558. let pie3p = [];
  559. let center = '';
  560. let centerTwo = ''
  561. let centerthree = ''
  562. if (res.result.age.length != 0) {
  563. this.accountIndexEchartOnePieShow = '分年龄数据';
  564. center = ''
  565. for (var i = 0; i < res.result.age.length; i++) {
  566. var obj = new Object();
  567. obj.name = res.result.age[i].ageSegment;
  568. if (this.selectValue == 'cost') {
  569. obj.value = res.result.age[i].cost;
  570. }else if(this.selectValue == 'activationPrice'){
  571. obj.value = res.result.age[i].activationPrice;
  572. }else if(this.selectValue == 'activation'){
  573. obj.value = res.result.age[i].activation;
  574. }else if(this.selectValue == 'eventPayRoi'){
  575. obj.value = res.result.age[i].eventPayRoi;
  576. }else if(this.selectValue == 'eventPay'){
  577. obj.value = res.result.age[i].eventPay;
  578. }else if(this.selectValue == 'eventPayCost'){
  579. obj.value = res.result.age[i].eventPayCost;
  580. }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
  581. obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
  582. }else if(this.selectValue == 'eventNextDayStay'){
  583. obj.value = res.result.age[i].eventNextDayStay;
  584. }else if(this.selectValue == 'leave'){
  585. obj.value = res.result.age[i].leave;
  586. }
  587. pieData[i] = obj;
  588. }
  589. }else{
  590. center = 'center'
  591. this.accountIndexEchartOnePieShow = '暂无数据';
  592. }
  593. if (res.result.gender.length != 0) {
  594. this.accountIndexEchartTwoPieShow = '分性别数据';
  595. centerTwo="";
  596. for (var i = 0; i < res.result.gender.length; i++) {
  597. var obj = new Object();
  598. obj.name = res.result.gender[i].gender;
  599. if (this.selectValue == 'cost') {
  600. obj.value = res.result.age[i].cost;
  601. }else if(this.selectValue == 'activationPrice'){
  602. obj.value = res.result.age[i].activationPrice;
  603. }else if(this.selectValue == 'activation'){
  604. obj.value = res.result.age[i].activation;
  605. }else if(this.selectValue == 'eventPayRoi'){
  606. obj.value = res.result.age[i].eventPayRoi;
  607. }else if(this.selectValue == 'eventPay'){
  608. obj.value = res.result.age[i].eventPay;
  609. }else if(this.selectValue == 'eventPayCost'){
  610. obj.value = res.result.age[i].eventPayCost;
  611. }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
  612. obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
  613. }else if(this.selectValue == 'eventNextDayStay'){
  614. obj.value = res.result.age[i].eventNextDayStay;
  615. }else if(this.selectValue == 'leave'){
  616. obj.value = res.result.age[i].leave;
  617. }
  618. pie2d[i] = obj;
  619. }
  620. }else{
  621. centerTwo = 'center'
  622. this.accountIndexEchartTwoPieShow = '暂无数据';
  623. }
  624. if (res.result.scene.length != 0) {
  625. this.accountIndexEchartThreePieShow = '分版位数据';
  626. centerthree='';
  627. for (var i = 0; i < res.result.scene.length; i++) {
  628. var obj = new Object();
  629. obj.name = res.result.scene[i].adScene;
  630. if (this.selectValue == 'cost') {
  631. obj.value = res.result.age[i].cost;
  632. }else if(this.selectValue == 'activationPrice'){
  633. obj.value = res.result.age[i].activationPrice;
  634. }else if(this.selectValue == 'activation'){
  635. obj.value = res.result.age[i].activation;
  636. }else if(this.selectValue == 'eventPayRoi'){
  637. obj.value = res.result.age[i].eventPayRoi;
  638. }else if(this.selectValue == 'eventPay'){
  639. obj.value = res.result.age[i].eventPay;
  640. }else if(this.selectValue == 'eventPayCost'){
  641. obj.value = res.result.age[i].eventPayCost;
  642. }else if(this.selectValue == 'eventPayPurchaseAmountFirstDay'){
  643. obj.value = res.result.age[i].eventPayPurchaseAmountFirstDay;
  644. }else if(this.selectValue == 'eventNextDayStay'){
  645. obj.value = res.result.age[i].eventNextDayStay;
  646. }else if(this.selectValue == 'leave'){
  647. obj.value = res.result.age[i].leave;
  648. }
  649. pie3p[i] = obj;
  650. }
  651. }else{
  652. centerthree = 'center'
  653. this.accountIndexEchartThreePieShow = '暂无数据';
  654. }
  655. this.initEchart('accountIndexEchartOnePie',this.initPieOneData(pieData,this.accountIndexEchartOnePieShow,center));
  656. this.initEchart('accountIndexEchartTwoPie',this.initPieTwoData(pie2d, this.accountIndexEchartTwoPieShow,centerTwo));
  657. this.initEchart('accountIndexEchartThreePie',this.initPieThreeData(pie3p,this.accountIndexEchartThreePieShow,centerthree));
  658. }
  659. })
  660. },
  661. selectValueChange(){
  662. this.getEchartOnePieData();
  663. },
  664. datePieChange(){
  665. this.getEchartOnePieData();
  666. },
  667. // 素材相关数据
  668. getGroupLaunchData(){
  669. let params = {
  670. accountId:this.accountId,
  671. startTime:this.dateSource[0].format('YYYY-MM-DD'),
  672. endTime:this.dateSource[1].format('YYYY-MM-DD'),
  673. searchType:this.projectAccount,
  674. pageNum:this.echartsIpagination.current,
  675. pageSize:this.echartsIpagination.pageSize
  676. }
  677. getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountMaterialNewAndEffectAndFaddish',params).then(res=>{
  678. if (res.code == 0) {
  679. this.updateRelated = res.timestamp;
  680. this.sourceMaterialData = res.result.list;
  681. this.echartsIpagination.total = res.result.total;
  682. }
  683. })
  684. },
  685. projectAccountChange(){
  686. this.echartsIpagination.current = 1;
  687. this.getGroupLaunchData();
  688. },
  689. dateSourceChange(){
  690. this.echartsIpagination.current = 1;
  691. this.getGroupLaunchData();
  692. },
  693. checkboxonChange(){
  694. this.getQueryNewlyData();
  695. },
  696. dateChange(){
  697. this.getQueryNewlyData();
  698. },
  699. // 获取账户名称等信息
  700. getAccountNameData(){
  701. let params = {
  702. accountId:this.accountId
  703. }
  704. getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfo',params).then(res=>{
  705. if(res.code == 0){
  706. this.accountName = res.result.accountName;
  707. this.balance = res.result.balance;
  708. this.state = res.result.state;
  709. this.totalCost = res.result.totalCost;
  710. }
  711. })
  712. },
  713. // 获取组投放数据表格
  714. getGroupDataList(){
  715. let params = {
  716. accountId:this.accountId,
  717. pageNum:this.tablePag.pageNum,
  718. pageSize:this.tablePag.pageSize
  719. }
  720. getAction('/kuaishou/realTime/getUnitDateInfo',params).then(res=>{
  721. if (res.code == 200) {
  722. this.updateTimeGroup = res.timestamp;
  723. this.echartsData = res.result
  724. this.totalAll = res.result[0].totalCount
  725. }
  726. })
  727. },
  728. onShowSizeChange(current, pageSize) {
  729. console.log(current);
  730. this.tablePag = {
  731. pageNum: current,
  732. pageSize: pageSize
  733. };
  734. this.getGroupDataList();
  735. },
  736. visibleChange(){
  737. this.bidErrorMessage='';
  738. this.newBid=undefined;
  739. },
  740. bidChangeCancel(record){
  741. record.visible=false;
  742. this.newBid=undefined;
  743. this.bidErrorMessage=''
  744. },
  745. // 修改出价
  746. bidChangeOk(record){
  747. console.log(111);
  748. if(this.newBid){
  749. record.visible=false;
  750. record.accountId = this.accountId;
  751. getAction('/kuaishou/dingpan/updateBid',{
  752. accountId:record.accountId,
  753. bid:this.newBid*1000,
  754. unitId:record.unitId,
  755. bidType:record.bidType
  756. }).then(res=>{
  757. // console.log(res);(res)
  758. if(res.code==0){
  759. this.$message.success(res.message)
  760. this.newBid=undefined;
  761. this.getLaunchData()
  762. }
  763. })
  764. }else{
  765. this.bidErrorMessage='请正确填写出价'
  766. // this.$message.error('请正确填写出价')
  767. }
  768. },
  769. // 点击修改定向
  770. editTarget(record){
  771. // console.log(res);(record);
  772. this.currentUnit=record;
  773. this.targetVisible=true;
  774. getAction('/batch/kuaishouTemplate/list',{
  775. accountId:this.accountId,
  776. }).then(res=>{
  777. // console.log(res);(res);
  778. if(res.result){
  779. this.directionalList=res.result
  780. }
  781. })
  782. },
  783. targethandleCancel(){
  784. this.targetVisible=false;
  785. this.selectDirectionalId=undefined
  786. },
  787. // 定向包修改OK事件
  788. targethandleOk(e){
  789. this.targetVisible=false;
  790. getAction('/kuaishou/dingpan/updateTemplate',{
  791. accountId:this.accountId,
  792. unitId:this.currentUnit.unitId,
  793. templateId:this.selectDirectionalId
  794. }).then(res=>{
  795. if(res.success){
  796. this.$message.success(res.message)
  797. }else{
  798. this.$message.error(res.message)
  799. }
  800. this.selectDirectionalId=undefined
  801. })
  802. },
  803. editLink(record){
  804. this.currentUnit=record;
  805. this.linkVisible=true;
  806. getAction('/kuaishou/dingpan/getClickTrackUrlByUnitId',{
  807. accountId:this.accountId,
  808. unitId:record.unitId
  809. }).then(res=>{
  810. // console.log(res);(res);
  811. if(res.result){
  812. this.oldLink=res.result
  813. }
  814. })
  815. },
  816. // 监测链接修改OK事件
  817. linkhandleOk(e){
  818. this.linkVisible=false;
  819. getAction('/kuaishou/dingpan/updateClickTrackUrlByUnitId',{
  820. accountId:this.accountId,
  821. unitId:this.currentUnit.unitId,
  822. clickTrackUr:this.newLink
  823. }).then(res=>{
  824. // console.log(res);(res)
  825. this.newLink='';
  826. if(res.success){
  827. this.$message.success('修改成功')
  828. }else{
  829. this.$message.error('修改失败,请重试')
  830. }
  831. })
  832. },
  833. linkhandleCancel(){
  834. this.linkVisible=false;
  835. this.newLink='';
  836. },
  837. // 获取折线图
  838. getQueryNewlyData(){
  839. let params = {
  840. accountId:this.accountId,
  841. startTime:this.dateEchart[0].format('YYYY-MM-DD'),
  842. endTime:this.dateEchart[1].format('YYYY-MM-DD'),
  843. }
  844. getAction(process.env.VUE_APP_BASE_STARE_URL+'/kuaiShouOpreate/kuaiShouMaterialStareController/getKuaiShouAccountInfoBrokenLine',params).then(res=>{
  845. if (res.code == 0) {
  846. this.updateTime = res.timestamp
  847. if (res.message == '账户时报报折线图查询成功') {
  848. let today = {};
  849. let yesterday = {};
  850. let timeData = [];
  851. timeData = res.result.map(item=>{
  852. return item.yHour
  853. })
  854. if (this.valueBtn.indexOf('花费') != -1 ) {
  855. today.data = res.result.map(itemprice=>{
  856. return itemprice.tCost
  857. });
  858. today.name = '花费(today)'
  859. yesterday.data = res.result.map(itemyes=>{
  860. return itemyes.yCost
  861. });
  862. yesterday.name = '花费(yesterday)'
  863. }else{
  864. today.data = [];
  865. today.name = '';
  866. yesterday.data = [];
  867. yesterday.name = '';
  868. }
  869. let activation = {};
  870. let activationyes = {};
  871. if(this.valueBtn.indexOf('激活成本') != -1){
  872. activation.data = res.result.map(itemprice=>{
  873. return itemprice.tActivationPrice
  874. });
  875. activation.name = '激活成本(today)'
  876. activationyes.data = res.result.map(itemyes=>{
  877. return itemyes.yActivationPrice
  878. });
  879. activationyes.name = '激活成本(yesterday)'
  880. }else{
  881. activation.data = [];
  882. activation.name = '';
  883. activationyes.data = [];
  884. activationyes.name = '';
  885. }
  886. let pay = {};
  887. let payyes = {};
  888. if(this.valueBtn.indexOf('新增付费成本') != -1){
  889. pay.data = res.result.map(itemprice=>{
  890. return itemprice.tEventNewUserPayCost
  891. });
  892. pay.name = '新增付费成本(today)'
  893. payyes.data = res.result.map(itemyes=>{
  894. return itemyes.yEventNewUserPayCost
  895. });
  896. payyes.name = '新增付费成本(yesterday)'
  897. }else{
  898. pay.data = [];
  899. pay.name = '';
  900. payyes.data = [];
  901. payyes.name = '';
  902. }
  903. let Secondary = {};
  904. let Secondaryyes = {};
  905. if(this.valueBtn.indexOf('次留率') != -1){
  906. Secondary.data = res.result.map(itemprice=>{
  907. return itemprice.tLeave
  908. });
  909. Secondary.name = '次留率(today)'
  910. Secondaryyes.data = res.result.map(itemyes=>{
  911. return itemyes.yLeave
  912. });
  913. Secondaryyes.name = '次留率(yesterday)'
  914. }else{
  915. Secondary.data = [];
  916. Secondary.name = '';
  917. Secondaryyes.data = [];
  918. Secondaryyes.name = '';
  919. }
  920. this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
  921. }else if(res.message == '账户日报折线图查询成功'){
  922. let timeData = [];
  923. timeData = res.result.map(item=>{
  924. return item.dateTime
  925. })
  926. let today = {};
  927. let yesterday = {};
  928. let activation = {};
  929. let activationyes = {};
  930. if (this.valueBtn.indexOf('花费') != -1 ) {
  931. today.data = res.result.map(itemprice=>{
  932. return itemprice.cost
  933. });
  934. today.name = '花费'
  935. }else{
  936. today.data = [];
  937. today.name = '';
  938. }
  939. if (this.valueBtn.indexOf('激活成本') != -1 ) {
  940. yesterday.data = res.result.map(itemprice=>{
  941. return itemprice.activationPrice
  942. });
  943. yesterday.name = '激活成本'
  944. }else{
  945. yesterday.data = [];
  946. yesterday.name = '';
  947. }
  948. if (this.valueBtn.indexOf('新增付费成本') != -1 ) {
  949. activation.data = res.result.map(itemprice=>{
  950. return itemprice.eventNewUserPayCost
  951. });
  952. activation.name = '新增付费成本'
  953. }else{
  954. activation.data = [];
  955. activation.name = '';
  956. }
  957. if (this.valueBtn.indexOf('次留率') != -1 ) {
  958. activationyes.data = res.result.map(itemprice=>{
  959. return itemprice.leave
  960. });
  961. activationyes.name = '次留率'
  962. }else{
  963. activationyes.data = [];
  964. activationyes.name = '';
  965. }
  966. let pay = {};
  967. let payyes = {};
  968. let Secondary = {};
  969. let Secondaryyes = {};
  970. pay.name = '';
  971. pay.data = [];
  972. payyes.name = '';
  973. payyes.data = [];
  974. Secondary.name = '';
  975. Secondary.data = [];
  976. Secondaryyes.name = '';
  977. Secondaryyes.data = [];
  978. this.initEchart('accountIndexEchart',this.initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes));
  979. }
  980. }
  981. })
  982. },
  983. // 折线图
  984. initAccountIndexEchart(timeData,today,yesterday,activation,activationyes,pay,payyes,Secondary,Secondaryyes) {
  985. let option = {
  986. tooltip: {
  987. trigger: 'axis'
  988. },
  989. legend: {
  990. bottom:'0%',
  991. // data: ['today','yesterday']
  992. },
  993. grid: {
  994. left: '3%',
  995. right: '4%',
  996. bottom: '15%',
  997. containLabel: true
  998. },
  999. // toolbox: {
  1000. // feature: {
  1001. // saveAsImage: {}
  1002. // }
  1003. // },
  1004. xAxis: {
  1005. type: 'category',
  1006. boundaryGap: false,
  1007. data: timeData
  1008. },
  1009. yAxis: {
  1010. type: 'value'
  1011. },
  1012. series: [
  1013. {
  1014. name: today.name,
  1015. type: 'line',
  1016. smooth: true,
  1017. symbol: 'circle',
  1018. data:today.data,
  1019. lineStyle: {
  1020. color: '#00BFFF',
  1021. width: 2,
  1022. },
  1023. itemStyle:{
  1024. color:'#00BFFF',
  1025. borderWidth:2,
  1026. borderColor:'#00BFFF'
  1027. },
  1028. },
  1029. {
  1030. name: yesterday.name,
  1031. type: 'line',
  1032. smooth: true,
  1033. symbol: 'circle',
  1034. data:yesterday.data,
  1035. lineStyle: {
  1036. color: '#00FF7F',
  1037. width: 2,
  1038. },
  1039. itemStyle:{
  1040. color:'#00FF7F',
  1041. borderWidth:2,
  1042. borderColor:'#00FF00'
  1043. },
  1044. }, {
  1045. name: activation.name,
  1046. type: 'line',
  1047. smooth: true,
  1048. symbol: 'circle',
  1049. data: activation.data,
  1050. },
  1051. {
  1052. name: activationyes.name,
  1053. type: 'line',
  1054. smooth: true,
  1055. symbol: 'circle',
  1056. data: activationyes.data,
  1057. },{
  1058. name: pay.name,
  1059. type: 'line',
  1060. smooth: true,
  1061. symbol: 'circle',
  1062. data: pay.data,
  1063. },
  1064. {
  1065. name: payyes.name,
  1066. type: 'line',
  1067. smooth: true,
  1068. symbol: 'circle',
  1069. data: payyes.data,
  1070. },{
  1071. name: Secondary.name,
  1072. type: 'line',
  1073. smooth: true,
  1074. symbol: 'circle',
  1075. data: Secondary.data,
  1076. },
  1077. {
  1078. name: Secondaryyes.name,
  1079. type: 'line',
  1080. smooth: true,
  1081. symbol: 'circle',
  1082. data: Secondaryyes.data,
  1083. },
  1084. ]
  1085. };
  1086. return option
  1087. },
  1088. // 第一个饼图
  1089. initPieOneData(pieData,accountIndexEchartOnePieShow,center){
  1090. var iconNone = require('../../../../../assets/nodata.png');
  1091. let option = {
  1092. tooltip: {
  1093. trigger: 'item'
  1094. },
  1095. title:{
  1096. x: center,
  1097. y: center,
  1098. text:accountIndexEchartOnePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartOnePieShow,
  1099. show: true,
  1100. textStyle:{
  1101. rich: {
  1102. a:{
  1103. height: 200,
  1104. width: 280,
  1105. backgroundColor: {
  1106. image: iconNone,
  1107. }
  1108. }
  1109. }
  1110. }
  1111. },
  1112. legend: {
  1113. top: '10%',
  1114. orient: 'vertical',
  1115. left: 'left'
  1116. },
  1117. series: [
  1118. {
  1119. name: '',
  1120. type: 'pie',
  1121. radius: ['40%', '70%'],
  1122. avoidLabelOverlap: false,
  1123. label: {
  1124. show: false,
  1125. position: 'center'
  1126. },
  1127. emphasis: {
  1128. label: {
  1129. show: true,
  1130. fontSize: '15',
  1131. fontWeight: 'bold'
  1132. }
  1133. },
  1134. labelLine: {
  1135. show: false
  1136. },
  1137. data: pieData
  1138. }
  1139. ]
  1140. };
  1141. return option
  1142. },
  1143. initPieTwoData(pie2d,accountIndexEchartThreePieShow,centerthree){
  1144. var iconNoneThree = require('../../../../../assets/nodata.png');
  1145. let option = {
  1146. tooltip: {
  1147. trigger: 'item'
  1148. },
  1149. title:{
  1150. x:centerthree,
  1151. y:centerthree,
  1152. text:accountIndexEchartThreePieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartThreePieShow,
  1153. textStyle:{
  1154. rich: {
  1155. a:{
  1156. height: 200,
  1157. width: 280,
  1158. backgroundColor: {
  1159. image: iconNoneThree,
  1160. }
  1161. }
  1162. }
  1163. }
  1164. },
  1165. legend: {
  1166. top: '10%',
  1167. orient: 'vertical',
  1168. left: 'left'
  1169. },
  1170. series: [
  1171. {
  1172. name: '',
  1173. type: 'pie',
  1174. radius: ['40%', '70%'],
  1175. avoidLabelOverlap: false,
  1176. label: {
  1177. show: false,
  1178. position: 'center'
  1179. },
  1180. emphasis: {
  1181. label: {
  1182. show: true,
  1183. fontSize: '15',
  1184. fontWeight: 'bold'
  1185. }
  1186. },
  1187. labelLine: {
  1188. show: false
  1189. },
  1190. data: pie2d
  1191. }
  1192. ]
  1193. };
  1194. return option
  1195. },
  1196. initPieThreeData(pie3p,accountIndexEchartTwoPieShow,centerTwo){
  1197. var iconNoneTwo = require('../../../../../assets/nodata.png');
  1198. let option = {
  1199. tooltip: {
  1200. trigger: 'item'
  1201. },
  1202. title:{
  1203. x:centerTwo,
  1204. y:centerTwo,
  1205. text:accountIndexEchartTwoPieShow == '暂无数据'?`{a| ${''}}`:accountIndexEchartTwoPieShow,
  1206. textStyle:{
  1207. rich: {
  1208. a:{
  1209. height: 200,
  1210. width: 280,
  1211. backgroundColor: {
  1212. image: iconNoneTwo,
  1213. }
  1214. }
  1215. }
  1216. }
  1217. },
  1218. legend: {
  1219. top: '10%',
  1220. orient: 'vertical',
  1221. left: 'left'
  1222. },
  1223. series: [
  1224. {
  1225. name: '',
  1226. type: 'pie',
  1227. radius: ['40%', '70%'],
  1228. avoidLabelOverlap: false,
  1229. label: {
  1230. show: false,
  1231. position: 'center'
  1232. },
  1233. emphasis: {
  1234. label: {
  1235. show: true,
  1236. fontSize: '15',
  1237. fontWeight: 'bold'
  1238. }
  1239. },
  1240. labelLine: {
  1241. show: false
  1242. },
  1243. data:pie3p
  1244. }
  1245. ]
  1246. };
  1247. return option
  1248. },
  1249. },
  1250. }
  1251. </script>
  1252. <style lang="less" scoped>
  1253. @import "../keep-manage/keep-manage.less";
  1254. </style>