Statistics.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612
  1. <style lang='less'>
  2. .ant-card-head .ant-tabs-bar{
  3. padding: 0;
  4. }
  5. .search-box .ant-card-body {
  6. padding: 5px 15px;
  7. }
  8. .search-box{
  9. padding: 15px 10px;
  10. }
  11. .search-box p {
  12. display: inline-block;
  13. border: 1px solid #f2f2f2;
  14. border-radius: 5px;
  15. margin-right: 10px;
  16. padding: 5px 10px;
  17. cursor: pointer;
  18. }
  19. .statistics .ant-col-6 .ant-card-body .styleElse {
  20. line-height: 60px;
  21. height: 40px;
  22. font-size: 16px;
  23. font-weight: 400;
  24. margin-left: 10px;
  25. }
  26. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  27. display: none !important;
  28. }
  29. .yincang .ant-col-6 p {
  30. text-align: left;
  31. color: red;
  32. font-size: 16px;
  33. font-weight: 500;
  34. }
  35. .ant-table-thead div {
  36. font-weight: 700;
  37. }
  38. .tool-tip {
  39. position: absolute;
  40. top: 65px;
  41. right: 10px;
  42. }
  43. .statistics{
  44. .ant-card-bordered {
  45. border: none;
  46. }
  47. .ant-card-head .ant-tabs {
  48. clear: both;
  49. margin-bottom: -13px;
  50. color: rgba(0, 0, 0, 0.65);
  51. font-weight: normal;
  52. font-size: 14px;
  53. }
  54. .duibi{
  55. position: absolute;
  56. right: 24px;
  57. top: 15px;
  58. }
  59. p{
  60. margin-bottom: 0;
  61. }
  62. }
  63. </style>
  64. <template>
  65. <div class="statistics">
  66. <a-row>
  67. <a-col :span="24">
  68. <a-card :bordered="false" class="search-box">
  69. <time-check @getAdd="getAdd" :startValue.sync="startValue"></time-check>
  70. <!-- <p>对比</p> -->
  71. </a-card>
  72. </a-col>
  73. </a-row>
  74. <a-row :gutter="16" v-if="kuaishou">
  75. <a-col :sm="24" :md="6" :xl="6" :xxl="6">
  76. <lifting
  77. :kuaishou.sync="kuaishou"
  78. :active.sync="active"
  79. title="总消耗"
  80. typeName="cost"
  81. typeThan="costProportion"
  82. ></lifting>
  83. </a-col>
  84. <a-col :sm="24" :md="6" :xl="6" :xxl="6">
  85. <lifting
  86. :kuaishou.sync="kuaishou"
  87. :active.sync="active"
  88. title="封面点击数"
  89. typeName="photoClick"
  90. typeThan="photoClickProportion"
  91. ></lifting>
  92. </a-col>
  93. <a-col :sm="24" :md="6" :xl="6" :xxl="6">
  94. <lifting
  95. :kuaishou.sync="kuaishou"
  96. :active.sync="active"
  97. title="封面曝光数"
  98. typeName="photoShow"
  99. typeThan="showProportion"
  100. ></lifting>
  101. </a-col>
  102. <a-col :sm="24" :md="6" :xl="6" :xxl="6">
  103. <lifting
  104. :kuaishou.sync="kuaishou"
  105. :active.sync="active"
  106. title="素材曝光数"
  107. typeName="aclick"
  108. typeThan="aClickProportion"
  109. ></lifting>
  110. </a-col>
  111. </a-row>
  112. <a-row :gutter="10">
  113. <a-col :span="24">
  114. <a-card
  115. style="width:100%;position:relative"
  116. :tabList="tabListNoTitle"
  117. :activeTabKey="noTitleKey"
  118. @tabChange="key => onTabChange(key, 'noTitleKey')"
  119. >
  120. <div id="chart" style="width:100%;height:500px"></div>
  121. <a-button class="duibi" type='primary' @click="visible = true">数据对比</a-button>
  122. </a-card>
  123. </a-col>
  124. </a-row>
  125. <a-modal title="数据对比" v-model="visible" width="80%" class="yincang">
  126. <a-radio-group v-model="value" style="margin-bottom:10px" @change="clear">
  127. <a-radio-button value="month">对比月</a-radio-button>
  128. <a-radio-button value="day">对比天</a-radio-button>
  129. </a-radio-group>
  130. <br />
  131. <div style="display:flex">
  132. <div v-if="value == 'month'" style="width:400px">
  133. <a-month-picker placeholder="请选择对比月份" v-model="oneMonth" style="width:50%" />
  134. <a-month-picker placeholder="请选择对比月份" v-model="twoMonth" style="width:50%" />
  135. </div>
  136. <a-range-picker
  137. v-else
  138. style="width:400px"
  139. :disabledDate="disabledDate"
  140. :showTime="{
  141. hideDisabledOptions: true
  142. }"
  143. format="YYYY-MM-DD"
  144. v-model="contrastValue"
  145. />
  146. <a-button type="primary" style="margin-left:5px" @click="search">查询</a-button>
  147. </div>
  148. <a-row :gutter="15" style="margin-bottom:15px;margin-top:15px" v-if="contrastDataAll">
  149. <a-col :span="6">
  150. <a-card title="总消耗对比">
  151. <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.cost }}</p>
  152. <p>
  153. {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.cost }}
  154. <a-icon
  155. v-if="contrastDataAll.compared.costProportion > 0"
  156. type="rise"
  157. class="styleElse"
  158. style="color:red;"
  159. />
  160. <a-icon
  161. v-else-if="contrastDataAll.compared.costProportion < 0"
  162. type="fall"
  163. class="styleElse"
  164. style="color:#0bcd74;"
  165. />
  166. <a-icon
  167. v-else-if="contrastDataAll.compared.costProportion == 0"
  168. type="minus"
  169. class="styleElse"
  170. style="color:#0bcd74"
  171. />
  172. <span
  173. :style="contrastDataAll.compared.costProportion > 0 ? 'color:red' : 'color:#0bcd74'"
  174. class="styleElse"
  175. style=" margin-left:0"
  176. >{{ (Math.abs(contrastDataAll.compared.costProportion)*100).toFixed(2) + '%' }}</span
  177. >
  178. </p>
  179. </a-card>
  180. </a-col>
  181. <a-col :span="6">
  182. <a-card title="封面点击数对比">
  183. <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.photoClick }}</p>
  184. <p>
  185. {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.photoClick }}
  186. <a-icon
  187. v-if="contrastDataAll.compared.photoClickProportion > 0"
  188. type="rise"
  189. class="styleElse"
  190. style="color:red;"
  191. />
  192. <a-icon
  193. v-else-if="contrastDataAll.compared.photoClickProportion < 0"
  194. type="fall"
  195. class="styleElse"
  196. style="color:#0bcd74;"
  197. />
  198. <a-icon
  199. v-else-if="contrastDataAll.compared.photoClickProportion == 0"
  200. type="minus"
  201. class="styleElse"
  202. style="color:#0bcd74"
  203. />
  204. <span
  205. :style="contrastDataAll.compared.photoClickProportion > 0 ? 'color:red' : 'color:#0bcd74'"
  206. class="styleElse"
  207. style=" margin-left:0"
  208. >{{ (Math.abs(contrastDataAll.compared.photoClickProportion)*100).toFixed(2) + '%' }}</span
  209. >
  210. </p>
  211. </a-card>
  212. </a-col>
  213. <a-col :span="6">
  214. <a-card title="封面曝光数对比">
  215. <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.photoShow }}</p>
  216. <p>
  217. {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.photoShow }}
  218. <a-icon
  219. v-if="contrastDataAll.compared.showProportion > 0"
  220. type="rise"
  221. class="styleElse"
  222. style="color:red;"
  223. />
  224. <a-icon
  225. v-else-if="contrastDataAll.compared.showProportion < 0"
  226. type="fall"
  227. class="styleElse"
  228. style="color:#0bcd74;"
  229. />
  230. <a-icon
  231. v-else-if="contrastDataAll.compared.showProportion == 0"
  232. type="minus"
  233. class="styleElse"
  234. style="color:#0bcd74"
  235. />
  236. <span
  237. :style="contrastDataAll.compared.showProportion > 0 ? 'color:red' : 'color:#0bcd74'"
  238. class="styleElse"
  239. style=" margin-left:0"
  240. >{{ (Math.abs(contrastDataAll.compared.showProportion)*100).toFixed(2) + '%' }}</span
  241. >
  242. </p>
  243. </a-card>
  244. </a-col>
  245. <a-col :span="6">
  246. <a-card title="素材曝光数对比">
  247. <p>{{ contrastDataAll.beCompared.statDate }}:{{ contrastDataAll.beCompared.aclick }}</p>
  248. <p>
  249. {{ contrastDataAll.compared.statDate }}:{{ contrastDataAll.compared.aclick }}
  250. <a-icon
  251. v-if="contrastDataAll.compared.comparedAclick > 0"
  252. type="rise"
  253. class="styleElse"
  254. style="color:red;"
  255. />
  256. <a-icon
  257. v-else-if="contrastDataAll.compared.comparedAclick < 0"
  258. type="fall"
  259. class="styleElse"
  260. style="color:#0bcd74;"
  261. />
  262. <a-icon
  263. v-else-if="contrastDataAll.compared.comparedAclick == 0"
  264. type="minus"
  265. class="styleElse"
  266. style="color:#0bcd74"
  267. />
  268. <span
  269. :style="contrastDataAll.compared.comparedAclick > 0 ? 'color:red' : 'color:#0bcd74'"
  270. class="styleElse"
  271. style=" margin-left:0"
  272. >{{ (Math.abs(contrastDataAll.compared.comparedAclick)*100).toFixed(2) + '%' }}</span
  273. >
  274. </p>
  275. </a-card>
  276. </a-col>
  277. </a-row>
  278. <a-row v-else>
  279. <a-col :span="24" style="text-align:center;height:186px;line-height:186px">暂无数据</a-col>
  280. </a-row>
  281. <a-row :gutter="10">
  282. <a-col :span="24">
  283. <a-card
  284. style="width:100%"
  285. :tabList="tabListNoTitle"
  286. :activeTabKey="noTitleKeyTwo"
  287. @tabChange="key => onTabChange(key, 'noTitleKeyTwo')"
  288. >
  289. <div id="chart1" style="width:100%;height:500px"></div>
  290. </a-card>
  291. </a-col>
  292. </a-row>
  293. <a-row style="margin-bottom:15px;margin-top:15px" v-if="dataTableTwo.length > 0">
  294. <a-col :span="24">
  295. <a-card
  296. :tabList="tableCard"
  297. :activeTabKey="noTitleKeyTableTwo"
  298. @tabChange="key => onTabChange(key, 'noTitleKeyTableTwo')"
  299. >
  300. <a-table :columns="columnsDb" :dataSource="dataTableTwo" :pagination="false" bordered></a-table>
  301. </a-card>
  302. </a-col>
  303. </a-row>
  304. </a-modal>
  305. <a-row style="margin-bottom:15px;margin-top:12px">
  306. <a-col :span="24">
  307. <a-card
  308. :tabList="tableNowCard"
  309. :activeTabKey="noTitleKeyTable"
  310. @tabChange="key => onTabChange(key, 'noTitleKeyTable')"
  311. style="word-break: break-all;font-size:16px;font-weight:600"
  312. >
  313. <a-table :columns="columns" :dataSource="dataTable" :pagination="false" :loading="loading" bordered>
  314. <!-- <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span> -->
  315. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  316. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  317. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  318. <span slot="aclick" slot-scope="aclick">{{ aclick | formatCurrency }}</span>
  319. </a-table>
  320. </a-card>
  321. </a-col>
  322. </a-row>
  323. </div>
  324. </template>
  325. <script>
  326. import ARow from 'ant-design-vue/es/grid/Row'
  327. import ACol from 'ant-design-vue/es/grid/Col'
  328. import moment from 'moment'
  329. import countTo from 'vue-count-to'
  330. import lifting from './components/lifting'
  331. import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
  332. import { getAction, postAction } from '@/api/manage'
  333. import timeCheck from './components/timeCheck'
  334. var upDate
  335. // 引入基本模板
  336. let echarts = require('echarts/lib/echarts')
  337. // 引入柱状图组件
  338. require('echarts/lib/chart/bar')
  339. require('echarts/lib/chart/pie')
  340. require('echarts/lib/chart/line')
  341. // 引入提示框和title组件
  342. require('echarts/lib/component/tooltip')
  343. require('echarts/lib/component/title')
  344. require('echarts/lib/component/graphic')
  345. require('echarts/lib/component/toolbox')
  346. require('echarts/lib/component/legend')
  347. export default {
  348. name: 'statistics',
  349. components: {
  350. ACol,
  351. ARow,
  352. countTo,
  353. lifting,
  354. timeCheck
  355. },
  356. data: function() {
  357. return {
  358. loading: true,
  359. columns: [
  360. { title: '时间', dataIndex: 'statDate', align: 'center' },
  361. {
  362. title: '总消耗环比',
  363. dataIndex: 'yesCost',
  364. scopedSlots: { customRender: 'yesCost' },
  365. align: 'center'
  366. },
  367. { title: '总消耗', dataIndex: 'cost', align: 'center' , scopedSlots: { customRender: 'cost' },},
  368. {
  369. title: '封面点击数环比',
  370. dataIndex: 'yesPhotoClick',
  371. scopedSlots: { customRender: 'photoClickProportion' },
  372. align: 'center'
  373. },
  374. { title: '封面点击数', dataIndex: 'photoClick', align: 'center', scopedSlots: { customRender: 'photoClick' }, },
  375. {
  376. title: '封面曝光数环比',
  377. dataIndex: 'yesPhotoShow',
  378. scopedSlots: { customRender: 'photoShowProportion' },
  379. align: 'center'
  380. },
  381. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' , scopedSlots: { customRender: 'photoShow' },},
  382. {
  383. title: '素材曝光数环比',
  384. dataIndex: 'yesAclick',
  385. scopedSlots: { customRender: 'aclickProportion' },
  386. align: 'center'
  387. },
  388. { title: '素材曝光数', dataIndex: 'aclick', align: 'center', scopedSlots: { customRender: 'aclick' }, }
  389. ],
  390. columnsDb: [
  391. { title: '时间', dataIndex: 'statDate', align: 'center' },
  392. { title: '总消耗', dataIndex: 'cost', align: 'center' , scopedSlots: { customRender: 'cost' },},
  393. { title: '封面点击数', dataIndex: 'photoClick', align: 'center', scopedSlots: { customRender: 'photoClick' }, },
  394. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center', scopedSlots: { customRender: 'photoShow' }, },
  395. { title: '素材曝光数', dataIndex: 'aclick', align: 'center', scopedSlots: { customRender: 'aclick' }, }
  396. ],
  397. dataTable: [],
  398. dataTableTwo: [],
  399. dataAllTableTwo: null,
  400. dataAllTable: null,
  401. dataAllTableYester: null,
  402. title: '快手大盘',
  403. visible: false,
  404. statistics: [],
  405. showData: null,
  406. startValue: [],
  407. contrastValue: [],
  408. contrastDataAll: null,
  409. allValue: ['', ''],
  410. value: 'month',
  411. oneMonth: null,
  412. twoMonth: null,
  413. kuaishou: {
  414. aclick: 0,
  415. aClickProportion: 0,
  416. cost: 0,
  417. costProportion: 0,
  418. photoClick: 0,
  419. photoClickroportion: 0,
  420. photoShow: 0,
  421. showProportion: 0
  422. },
  423. tabListNoTitle: [
  424. {
  425. key: 'cost',
  426. tab: '总消耗'
  427. },
  428. {
  429. key: 'photoClick',
  430. tab: '封面点击数'
  431. },
  432. {
  433. key: 'photoShow',
  434. tab: '封面曝光数'
  435. },
  436. {
  437. key: 'aclick',
  438. tab: '素材曝光数'
  439. }
  440. ],
  441. tableCard: [
  442. {
  443. key: 'small',
  444. tab: '前'
  445. },
  446. {
  447. key: 'big',
  448. tab: '后'
  449. }
  450. ],
  451. tableNowCard: [
  452. {
  453. key: 'now',
  454. tab: '今天'
  455. },
  456. {
  457. key: 'yesterday',
  458. tab: '昨天'
  459. }
  460. ],
  461. noTitleKeyTableTwo: 'small',
  462. noTitleKey: 'cost',
  463. noTitleKeyTwo: 'cost',
  464. noTitleKeyTable: 'now',
  465. chart: null,
  466. chart1: null,
  467. active: 1,
  468. duration: 1000,
  469. dataDetail: null,
  470. contrastDataList: []
  471. }
  472. },
  473. methods: {
  474. a(item) {
  475. console.log(item)
  476. },
  477. moment,
  478. clear() {
  479. this.twoMonth = null
  480. this.oneMonth = null
  481. this.contrastDataAll = null
  482. this.contrastDataList = null
  483. this.contrastValue = []
  484. this.dataTableTwo = []
  485. this.dataAllTableTwo = null
  486. if (this.chart) {
  487. this.chart.clear()
  488. }
  489. },
  490. search() {
  491. var params = {}
  492. params.type = 10
  493. params.sign = this.value
  494. if (this.value == 'month') {
  495. if (this.twoMonth && this.oneMonth) {
  496. params.bigDate = moment(this.twoMonth._d).format('YYYY-MM')
  497. params.smallDate = moment(this.oneMonth._d).format('YYYY-MM')
  498. } else {
  499. this.$message.error('请选择两个需要对比的数据')
  500. }
  501. } else if (this.value == 'day') {
  502. params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
  503. params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
  504. }
  505. this.columnsDb = [
  506. { title: '时间', dataIndex: 'statDate', align: 'center' },
  507. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  508. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  509. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  510. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  511. ]
  512. getKsAccountReport(params).then(res => {
  513. if (res.success) {
  514. if (res.result.compared) {
  515. this.contrastDataAll = res.result
  516. // this.drawPieAll(res)
  517. } else {
  518. this.contrastDataAll = null
  519. }
  520. }
  521. })
  522. getKsDetail(params).then(res => {
  523. this.contrastDataList = res.result
  524. this.drawSearchLine(this.noTitleKeyTwo, res.result)
  525. })
  526. getReportList(params).then(res => {
  527. if (res.success) {
  528. this.tableCard = [
  529. {
  530. key: 'small',
  531. tab: res.result[0].beStatDate
  532. },
  533. {
  534. key: 'big',
  535. tab: res.result[0].statDate
  536. }
  537. ]
  538. this.noTitleKeyTableTwo = 'small'
  539. if (this.value == 'day') {
  540. this.dataAllTableTwo = res.result[0]
  541. this.dataTableTwo = res.result[0].beComparedDetail.map((item, index) => {
  542. return {
  543. ...item,
  544. statDate: item.statDate + ' ' + item.statHour + '时',
  545. key: index
  546. }
  547. })
  548. } else {
  549. this.dataAllTableTwo = res.result[0]
  550. this.dataTableTwo = res.result[0].beComparedDetail.map((item, index) => {
  551. return {
  552. ...item,
  553. key: index
  554. }
  555. })
  556. }
  557. }
  558. })
  559. },
  560. getReportList(checked, dateValue) {
  561. let params = {}
  562. params.type = checked
  563. if (this.active == 9) {
  564. params.startDate = dateValue[0]
  565. params.endDate = dateValue[1]
  566. }
  567. // proportion
  568. this.loading = true
  569. if (this.active == 1) {
  570. getReportList(params).then(res => {
  571. if (res.result[0].now.length > 0) {
  572. for (let i = 0; i < res.result[0].now.length; i++) {
  573. for (let j = 0; j < res.result[0].yesterday.length; j++) {
  574. if (res.result[0].now[i].statHour == res.result[0].yesterday[j].statHour) {
  575. res.result[0].now[i].yesCost =
  576. (((res.result[0].now[i].cost - res.result[0].yesterday[j].cost) / res.result[0].yesterday[j].cost) * 100).toFixed(2) +
  577. '%'
  578. res.result[0].now[i].yesPhotoClick =
  579. (
  580. ((res.result[0].now[i].photoClick - res.result[0].yesterday[j].photoClick) / res.result[0].yesterday[j].photoClick) *
  581. 100
  582. ).toFixed(2) + '%'
  583. res.result[0].now[i].yesPhotoShow =
  584. (
  585. ((res.result[0].now[i].photoShow - res.result[0].yesterday[j].photoShow) / res.result[0].yesterday[j].photoShow) *
  586. 100
  587. ).toFixed(2) + '%'
  588. res.result[0].now[i].yesAclick =
  589. (((res.result[0].now[i].aclick - res.result[0].yesterday[j].aclick) / res.result[0].yesterday[j].aclick) * 100).toFixed(
  590. 2
  591. ) + '%'
  592. }
  593. }
  594. }
  595. this.dataTable = res.result[0].now.map((item, index) => {
  596. return {
  597. key: index,
  598. ...item,
  599. statDate:
  600. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  601. }
  602. })
  603. this.dataAllTableYester = res.result[0].yesterday.map((item, index) => {
  604. return {
  605. key: index,
  606. ...item,
  607. statDate:
  608. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  609. }
  610. })
  611. this.dataAllTable = this.dataTable
  612. this.loading = false
  613. } else {
  614. this.dataAllTable = null
  615. this.dataTable = []
  616. this.dataAllTableYester = res.result[0].yesterday
  617. this.loading = false
  618. }
  619. })
  620. } else {
  621. getReportList(params).then(res => {
  622. this.dataTable = res.result.map((item, index) => {
  623. return {
  624. key: index,
  625. ...item,
  626. statDate:
  627. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  628. }
  629. })
  630. this.loading = false
  631. })
  632. }
  633. },
  634. drawPieAll(data) {
  635. var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']
  636. var option = {
  637. tooltip: {
  638. trigger: 'item',
  639. formatter: '{a} <br/>{b} : {c}'
  640. },
  641. series: [
  642. {
  643. name: '总消耗对比',
  644. type: 'pie',
  645. radius: '35%',
  646. center: ['50%', '50%'],
  647. data: [
  648. { value: 944332, name: '2019-09' },
  649. { value: 6839241.89, name: '2019-10' }
  650. ],
  651. itemStyle: {
  652. normal: {
  653. color: function(params) {
  654. return colorList[params.dataIndex]
  655. }
  656. }
  657. }
  658. }
  659. ]
  660. }
  661. var chart = echarts.init(document.getElementById('chart3'))
  662. chart.clear()
  663. chart.setOption(option, true)
  664. },
  665. drawSearchLine(type, data) {
  666. var dataLegend = []
  667. var dataLength = [] //小月份数据
  668. var dataLengthBig = [] //大月份数据
  669. var dataElse = []
  670. var dataDate = []
  671. var that = this
  672. var showName = null
  673. if (data) {
  674. if (this.value == 'month') {
  675. dataLegend = [moment(this.oneMonth._d).format('YYYY-MM'), moment(this.twoMonth._d).format('YYYY-MM')]
  676. dataDate = data.map(item => {
  677. return item.statDate.substring(item.statDate.length - 2, item.statDate.length)
  678. })
  679. } else if (this.value == 'day') {
  680. dataLegend = [
  681. moment(this.contrastValue[0]._d).format('YYYY-MM-DD'),
  682. moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
  683. ]
  684. dataDate = data.map(item => {
  685. return item.statHour
  686. })
  687. }
  688. if (type == 'cost') {
  689. showName = '总消耗'
  690. dataLength = data.map(item => {
  691. return item.beComparedCost
  692. })
  693. dataLengthBig = data.map(item => {
  694. return item.cost
  695. })
  696. dataElse = data.map(item => {
  697. if (this.value == 'month') {
  698. return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  699. } else {
  700. return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  701. }
  702. })
  703. } else if (type == 'photoClick') {
  704. showName = '封面点击数'
  705. dataLength = data.map(item => {
  706. return item.beComparedPhotoClick
  707. })
  708. dataLengthBig = data.map(item => {
  709. return item.photoClick
  710. })
  711. dataElse = data.map(item => {
  712. if (this.value == 'month') {
  713. return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  714. } else {
  715. return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  716. }
  717. })
  718. } else if (type == 'photoShow') {
  719. showName = '封面曝光数'
  720. dataLength = data.map(item => {
  721. return item.beComparedPhotoShow
  722. })
  723. dataLengthBig = data.map(item => {
  724. return item.photoShow
  725. })
  726. dataElse = data.map(item => {
  727. if (this.value == 'month') {
  728. return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  729. } else {
  730. return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  731. }
  732. })
  733. } else if (type == 'aclick') {
  734. showName = '素材曝光数'
  735. dataLength = data.map(item => {
  736. return item.beComparedAClick
  737. })
  738. dataLengthBig = data.map(item => {
  739. return item.aClick
  740. })
  741. dataElse = data.map(item => {
  742. if (this.value == 'month') {
  743. return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  744. } else {
  745. return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.statHour }
  746. }
  747. })
  748. }
  749. }
  750. var option = {
  751. backgroundColor: '#fff',
  752. tooltip: {
  753. trigger: 'axis',
  754. formatter: function(params) {
  755. var index
  756. if (that.value == 'month') {
  757. index = dataElse.findIndex(
  758. v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
  759. )
  760. } else {
  761. index = dataElse.findIndex(
  762. v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
  763. )
  764. }
  765. var da = null
  766. if (index >= 0) {
  767. da = dataElse[index].proportion
  768. }
  769. if (that.value == 'month') {
  770. return `${params[0].marker}时间:${params[0].seriesName}-${params[0].name}:${showName}:${params[0].data} <br/>
  771. ${params[1].marker}时间:${params[1].seriesName}-${params[0].name}:${showName}:${params[1].data} <br/>
  772. 环比:${da}<br/> `
  773. } else {
  774. return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data} <br/>
  775. ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data} <br/>
  776. 环比:${da}<br/> `
  777. }
  778. }
  779. },
  780. legend: {
  781. data: dataLegend
  782. },
  783. grid: {
  784. left: '2%',
  785. right: '2%',
  786. bottom: '2%',
  787. containLabel: true
  788. },
  789. xAxis: {
  790. type: 'category',
  791. data: dataDate,
  792. boundaryGap: false,
  793. // 坐标轴线
  794. axisLine: {
  795. show: false,
  796. lineStyle: {
  797. color: '#999'
  798. }
  799. },
  800. // 分割线
  801. splitLine: {
  802. show: true,
  803. lineStyle: {
  804. type: 'dashed',
  805. color: '#e5e5e5'
  806. }
  807. }
  808. },
  809. yAxis: {
  810. type: 'value',
  811. axisLine: {
  812. show: false,
  813. lineStyle: {
  814. color: '#999'
  815. }
  816. },
  817. splitLine: {
  818. lineStyle: {
  819. type: 'dashed',
  820. color: '#e5e5e5'
  821. }
  822. }
  823. },
  824. series: [
  825. {
  826. name: dataLegend[0],
  827. type: 'line',
  828. color: '#0bcd74',
  829. smooth: true,
  830. symbol: 'circle',
  831. symbolSize: 1,
  832. lineStyle: {
  833. normal: {
  834. width: 2,
  835. color: '#0bcd74'
  836. }
  837. },
  838. itemStyle: {
  839. borderColor: '#ffffff',
  840. borderWidth: 3
  841. },
  842. data: dataLength
  843. },
  844. {
  845. name: dataLegend[1],
  846. type: 'line',
  847. color: '#9933ff',
  848. smooth: true,
  849. symbol: 'circle',
  850. symbolSize: 1,
  851. lineStyle: {
  852. normal: {
  853. width: 2,
  854. color: '#9933ff'
  855. }
  856. },
  857. itemStyle: {
  858. borderColor: '#ffffff',
  859. borderWidth: 3
  860. },
  861. data: dataLengthBig
  862. }
  863. ]
  864. }
  865. this.chart = echarts.init(document.getElementById('chart1'))
  866. this.chart.clear()
  867. this.chart.setOption(option, true)
  868. // window.onresize = function() {
  869. // chart.resize()
  870. // }
  871. },
  872. disabledDate(current) {
  873. // Can not select days before today and today
  874. return current && current > moment().endOf('day')
  875. },
  876. onTabChange(key, type) {
  877. console.log(key, type)
  878. this[type] = key
  879. if (type == 'noTitleKey') {
  880. this.drawPie(key, this.dataDetail)
  881. } else if (type == 'noTitleKeyTable') {
  882. this.dataTable = []
  883. if (key == 'now') {
  884. this.columns = [
  885. { title: '时间', dataIndex: 'statDate', align: 'center' },
  886. {
  887. title: '总消耗环比',
  888. dataIndex: 'yesCost',
  889. scopedSlots: { customRender: 'yesCost' },
  890. align: 'center'
  891. },
  892. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  893. {
  894. title: '封面点击数环比',
  895. dataIndex: 'yesPhotoClick',
  896. scopedSlots: { customRender: 'photoClickProportion' },
  897. align: 'center'
  898. },
  899. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  900. {
  901. title: '封面曝光数环比',
  902. dataIndex: 'yesPhotoShow',
  903. scopedSlots: { customRender: 'photoShowProportion' },
  904. align: 'center'
  905. },
  906. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  907. {
  908. title: '素材曝光数环比',
  909. dataIndex: 'yesAclick',
  910. scopedSlots: { customRender: 'aclickProportion' },
  911. align: 'center'
  912. },
  913. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  914. ]
  915. this.dataTable = this.dataAllTable
  916. } else {
  917. this.columns = [
  918. { title: '时间', dataIndex: 'statDate', align: 'center' },
  919. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  920. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  921. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  922. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  923. ]
  924. this.dataTable = this.dataAllTableYester.map((item, index) => {
  925. return {
  926. key: index,
  927. ...item,
  928. statDate: item.statDate
  929. }
  930. })
  931. }
  932. } else if (type == 'noTitleKeyTableTwo') {
  933. this.dataTableTwo = []
  934. if (key == 'small') {
  935. this.columnsDb = [
  936. { title: '时间', dataIndex: 'statDate', align: 'center' },
  937. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  938. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  939. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  940. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  941. ]
  942. if (this.value == 'day') {
  943. this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
  944. return {
  945. key: index,
  946. ...item,
  947. statDate: item.statDate + ' ' + item.statHour + '时'
  948. }
  949. })
  950. } else {
  951. this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
  952. return {
  953. key: index,
  954. ...item
  955. }
  956. })
  957. }
  958. } else {
  959. this.columnsDb = [
  960. { title: '时间', dataIndex: 'statDate', align: 'center' },
  961. {
  962. title: '总消耗环比',
  963. dataIndex: 'yesCost',
  964. scopedSlots: { customRender: 'yesCost' },
  965. align: 'center'
  966. },
  967. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  968. {
  969. title: '封面点击数环比',
  970. dataIndex: 'yesPhotoClick',
  971. scopedSlots: { customRender: 'photoClickProportion' },
  972. align: 'center'
  973. },
  974. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  975. {
  976. title: '封面曝光数环比',
  977. dataIndex: 'yesPhotoShow',
  978. scopedSlots: { customRender: 'photoShowProportion' },
  979. align: 'center'
  980. },
  981. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  982. {
  983. title: '素材曝光数环比',
  984. dataIndex: 'yesAclick',
  985. scopedSlots: { customRender: 'aclickProportion' },
  986. align: 'center'
  987. },
  988. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  989. ]
  990. if (this.value == 'day') {
  991. for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
  992. this.dataTableTwo.push({
  993. key: i,
  994. statDate:
  995. this.dataAllTableTwo.comparedDetail[i].statDate +
  996. ' ' +
  997. this.dataAllTableTwo.comparedDetail[i].statHour +
  998. '时',
  999. yesCost:
  1000. (
  1001. this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
  1002. 1
  1003. ).toFixed(2) + '%',
  1004. cost: this.dataAllTableTwo.comparedDetail[i].cost,
  1005. yesPhotoClick:
  1006. (
  1007. this.dataAllTableTwo.comparedDetail[i].photoClick /
  1008. this.dataAllTableTwo.beComparedDetail[i].photoClick -
  1009. 1
  1010. ).toFixed(2) + '%',
  1011. photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
  1012. yesPhotoShow:
  1013. (
  1014. this.dataAllTableTwo.comparedDetail[i].photoShow /
  1015. this.dataAllTableTwo.beComparedDetail[i].photoShow -
  1016. 1
  1017. ).toFixed(2) + '%',
  1018. photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
  1019. yesAclick:
  1020. (
  1021. this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
  1022. 1
  1023. ).toFixed(2) + '%',
  1024. aclick: this.dataAllTableTwo.comparedDetail[i].aclick
  1025. })
  1026. }
  1027. // this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
  1028. // return {
  1029. // ...item,
  1030. // statDate: item.statDate + ' ' + item.statHour + '时'
  1031. // }
  1032. // })
  1033. } else {
  1034. this.dataTableTwo = []
  1035. for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
  1036. this.dataTableTwo.push({
  1037. key: i,
  1038. statDate: this.dataAllTableTwo.comparedDetail[i].statDate,
  1039. yesCost:
  1040. (
  1041. this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
  1042. 1
  1043. ).toFixed(2) + '%',
  1044. cost: this.dataAllTableTwo.comparedDetail[i].cost,
  1045. yesPhotoClick:
  1046. (
  1047. this.dataAllTableTwo.comparedDetail[i].photoClick /
  1048. this.dataAllTableTwo.beComparedDetail[i].photoClick -
  1049. 1
  1050. ).toFixed(2) + '%',
  1051. photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
  1052. yesPhotoShow:
  1053. (
  1054. this.dataAllTableTwo.comparedDetail[i].photoShow /
  1055. this.dataAllTableTwo.beComparedDetail[i].photoShow -
  1056. 1
  1057. ).toFixed(2) + '%',
  1058. photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
  1059. yesAclick:
  1060. (
  1061. this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
  1062. 1
  1063. ).toFixed(2) + '%',
  1064. aclick: this.dataAllTableTwo.comparedDetail[i].aclick
  1065. })
  1066. }
  1067. console.log(this.dataTableTwo)
  1068. }
  1069. }
  1070. } else {
  1071. this.drawSearchLine(key, this.contrastDataList)
  1072. }
  1073. },
  1074. getAdd(checked) {
  1075. if (checked == 9) {
  1076. if (this.startValue.length > 0 && this.startValue[0]) {
  1077. this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
  1078. this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
  1079. }
  1080. } else {
  1081. this.startValue = []
  1082. this.allValue = []
  1083. }
  1084. this.active = checked
  1085. var arr = [
  1086. {
  1087. key: 'now',
  1088. tab: '今天'
  1089. },
  1090. {
  1091. key: 'yesterday',
  1092. tab: '昨天'
  1093. }
  1094. ]
  1095. if (checked == 1) {
  1096. this.columns = [
  1097. { title: '时间', dataIndex: 'statDate', align: 'center' },
  1098. {
  1099. title: '总消耗环比',
  1100. dataIndex: 'yesCost',
  1101. scopedSlots: { customRender: 'yesCost' },
  1102. align: 'center'
  1103. },
  1104. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  1105. {
  1106. title: '封面点击数环比',
  1107. dataIndex: 'yesPhotoClick',
  1108. scopedSlots: { customRender: 'photoClickProportion' },
  1109. align: 'center'
  1110. },
  1111. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  1112. {
  1113. title: '封面曝光数环比',
  1114. dataIndex: 'yesPhotoShow',
  1115. scopedSlots: { customRender: 'photoShowProportion' },
  1116. align: 'center'
  1117. },
  1118. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  1119. {
  1120. title: '素材曝光数环比',
  1121. dataIndex: 'yesAclick',
  1122. scopedSlots: { customRender: 'aclickProportion' },
  1123. align: 'center'
  1124. },
  1125. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  1126. ]
  1127. } else {
  1128. this.columns = [
  1129. { title: '时间', dataIndex: 'statDate', align: 'center' },
  1130. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  1131. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  1132. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  1133. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  1134. ]
  1135. }
  1136. switch (checked) {
  1137. case 1:
  1138. arr = [
  1139. {
  1140. key: 'now',
  1141. tab: '今天'
  1142. },
  1143. {
  1144. key: 'yesterday',
  1145. tab: '昨天'
  1146. }
  1147. ]
  1148. break
  1149. case 2:
  1150. arr = [
  1151. {
  1152. key: 'yesterday',
  1153. tab: '昨天'
  1154. }
  1155. ]
  1156. break
  1157. case 3:
  1158. arr = [
  1159. {
  1160. key: 'yesterday',
  1161. tab: '近一周'
  1162. }
  1163. ]
  1164. break
  1165. case 4:
  1166. arr = [
  1167. {
  1168. key: 'yesterday',
  1169. tab: '近十五天'
  1170. }
  1171. ]
  1172. break
  1173. case 5:
  1174. arr = [
  1175. {
  1176. key: 'yesterday',
  1177. tab: '近一月'
  1178. }
  1179. ]
  1180. break
  1181. case 6:
  1182. arr = [
  1183. {
  1184. key: 'yesterday',
  1185. tab: '近三月'
  1186. }
  1187. ]
  1188. break
  1189. case 7:
  1190. arr = [
  1191. {
  1192. key: 'yesterday',
  1193. tab: '近半年'
  1194. }
  1195. ]
  1196. break
  1197. case 8:
  1198. arr = [
  1199. {
  1200. key: 'yesterday',
  1201. tab: '所有'
  1202. }
  1203. ]
  1204. break
  1205. case 9:
  1206. arr = [
  1207. {
  1208. key: 'yesterday',
  1209. tab: this.allValue[1] + ' ~ ' + this.allValue[0]
  1210. }
  1211. ]
  1212. break
  1213. }
  1214. this.tableNowCard = arr
  1215. this.getReportList(checked, this.allValue)
  1216. this.drawLine(checked, this.allValue)
  1217. this.getKsDetail(checked, this.allValue).then(res => {
  1218. this.drawPie(this.noTitleKey, res.result)
  1219. })
  1220. },
  1221. getKsDetail(type, dateValue) {
  1222. var that = this
  1223. return new Promise(function(resolve) {
  1224. let params = {}
  1225. params.type = type
  1226. if (that.active == 9) {
  1227. params.startDate = dateValue[0]
  1228. params.endDate = dateValue[1]
  1229. }
  1230. getKsDetail(params).then(res => {
  1231. that.dataDetail = res.result
  1232. resolve(res)
  1233. })
  1234. })
  1235. },
  1236. drawLine(type, dateValue) {
  1237. var that = this
  1238. return new Promise(function(resolve) {
  1239. let params = {}
  1240. params.type = type
  1241. if (that.active == 9) {
  1242. params.startDate = dateValue[0]
  1243. params.endDate = dateValue[1]
  1244. }
  1245. getKsAccountReport(params).then(res => {
  1246. var dataNew = []
  1247. var dataX = []
  1248. if (res.success) {
  1249. that.kuaishou = res.result.aclick?res.result:{aclick: 0,cost: 0, photoClick: 0,photoShow: 0,}
  1250. // this.drawPieAll(res)
  1251. } else {
  1252. that.kuaishou.aclick = 0
  1253. that.kuaishou.cost = 0
  1254. that.kuaishou.photoClick = 0
  1255. that.kuaishou.photoShow = 0
  1256. }
  1257. resolve()
  1258. })
  1259. })
  1260. },
  1261. drawPie(type, data) {
  1262. var dataLegend = []
  1263. var dataLength = []
  1264. var dataElse = []
  1265. var dataDate = []
  1266. var that = this
  1267. if (this.active == 1 || this.active == 2) {
  1268. // data.sort(function(a, b) {
  1269. // return a.statHour - b.statHour
  1270. // })
  1271. dataDate = data.map(item => {
  1272. return item.statHour
  1273. })
  1274. } else {
  1275. // data.sort(function(a, b) {
  1276. // return a.statDate - b.statDate
  1277. // })
  1278. dataDate = data.map(item => {
  1279. return item.statDate
  1280. })
  1281. }
  1282. if (type == 'cost') {
  1283. dataLegend = ['总消耗']
  1284. dataElse = data.map(item => {
  1285. if (item.now) {
  1286. return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1287. } else {
  1288. return { proportion: 0, statHour: item.statHour }
  1289. }
  1290. })
  1291. } else if (type == 'photoClick') {
  1292. dataLegend = ['封面点击数']
  1293. dataElse = data.map(item => {
  1294. if (item.now) {
  1295. return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1296. } else {
  1297. return { proportion: 0, statHour: item.statHour }
  1298. }
  1299. })
  1300. } else if (type == 'photoShow') {
  1301. dataLegend = ['封面曝光数']
  1302. dataElse = data.map(item => {
  1303. if (item.now) {
  1304. return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1305. } else {
  1306. return { proportion: 0, statHour: item.statHour }
  1307. }
  1308. })
  1309. } else if (type == 'aclick') {
  1310. dataLegend = ['素材曝光数']
  1311. dataElse = data.map(item => {
  1312. if (item.now) {
  1313. return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1314. } else {
  1315. return { proportion: 0, statHour: item.statHour }
  1316. }
  1317. })
  1318. }
  1319. dataLength = data.map(item => {
  1320. return item[type]
  1321. })
  1322. var series
  1323. if (this.active == 1) {
  1324. dataLegend = ['今天', '昨天']
  1325. series = [
  1326. {
  1327. name: dataLegend[0],
  1328. type: 'line',
  1329. color: '#9933ff',
  1330. smooth: true,
  1331. symbol: 'circle',
  1332. symbolSize: 1,
  1333. lineStyle: {
  1334. normal: {
  1335. width: 2,
  1336. color: '#9933ff'
  1337. }
  1338. },
  1339. itemStyle: {
  1340. borderColor: '#ffffff',
  1341. borderWidth: 3
  1342. },
  1343. data: data.map(item => {
  1344. if (item.now) {
  1345. return item.now[type]
  1346. } else {
  1347. return 0
  1348. }
  1349. })
  1350. },
  1351. {
  1352. name: dataLegend[1],
  1353. type: 'line',
  1354. color: '#0bcd74',
  1355. smooth: true,
  1356. symbol: 'circle',
  1357. symbolSize: 1,
  1358. lineStyle: {
  1359. normal: {
  1360. width: 2,
  1361. color: '#0bcd74'
  1362. }
  1363. },
  1364. itemStyle: {
  1365. borderColor: '#ffffff',
  1366. borderWidth: 3
  1367. },
  1368. data: dataLength
  1369. }
  1370. ]
  1371. } else {
  1372. series = [
  1373. {
  1374. name: dataLegend[0],
  1375. type: 'line',
  1376. color: '#0bcd74',
  1377. smooth: true,
  1378. symbol: 'circle',
  1379. symbolSize: 1,
  1380. lineStyle: {
  1381. normal: {
  1382. width: 2,
  1383. color: '#0bcd74'
  1384. }
  1385. },
  1386. itemStyle: {
  1387. borderColor: '#ffffff',
  1388. borderWidth: 3
  1389. },
  1390. data: dataLength
  1391. }
  1392. ]
  1393. }
  1394. var option = {
  1395. backgroundColor: '#fff',
  1396. // toolbox: {
  1397. // show: true,
  1398. // feature: {
  1399. // dataView: { readOnly: false }
  1400. // }
  1401. // },
  1402. tooltip: {
  1403. trigger: 'axis',
  1404. formatter: function(params) {
  1405. var index = dataElse.findIndex(v => v.statHour == params[0].name)
  1406. var da = null
  1407. if (index >= 0) {
  1408. da = dataElse[index].proportion
  1409. }
  1410. if (that.active == 1) {
  1411. if (params.length > 1) {
  1412. return `${params[0].marker}今天${params[0].name}时:${params[0].data} <br/>
  1413. ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
  1414. 环比:${da} <br/> `
  1415. } else {
  1416. return `${params[0].marker}时间:${params[0].name} <br/>
  1417. 数值:${params[0].data} `
  1418. }
  1419. } else {
  1420. return `${params[0].marker}时间:${params[0].name} <br/>
  1421. 数值:${params[0].data} `
  1422. }
  1423. }
  1424. },
  1425. legend: {
  1426. data: dataLegend
  1427. },
  1428. grid: {
  1429. left: '2%',
  1430. right: '2%',
  1431. bottom: '2%',
  1432. containLabel: true
  1433. },
  1434. xAxis: {
  1435. type: 'category',
  1436. data: dataDate,
  1437. boundaryGap: false,
  1438. // 坐标轴线
  1439. axisLine: {
  1440. show: false,
  1441. lineStyle: {
  1442. color: '#999'
  1443. }
  1444. },
  1445. // 分割线
  1446. splitLine: {
  1447. show: true,
  1448. lineStyle: {
  1449. type: 'dashed',
  1450. color: '#e5e5e5'
  1451. }
  1452. }
  1453. },
  1454. yAxis: {
  1455. type: 'value',
  1456. axisLine: {
  1457. show: false,
  1458. lineStyle: {
  1459. color: '#999'
  1460. }
  1461. },
  1462. splitLine: {
  1463. lineStyle: {
  1464. type: 'dashed',
  1465. color: '#e5e5e5'
  1466. }
  1467. }
  1468. },
  1469. series: series
  1470. }
  1471. var chart = echarts.init(document.getElementById('chart'))
  1472. chart.clear()
  1473. chart.setOption(option, true)
  1474. window.onresize = function() {
  1475. chart.resize()
  1476. }
  1477. // this.chart.on('click', param => {
  1478. // if (param.name == '总展示') {
  1479. // alert(123)
  1480. // }
  1481. // })
  1482. }
  1483. },
  1484. watch: {},
  1485. computed: {
  1486. newDate() {
  1487. var myDate = new Date()
  1488. myDate.getYear() //获取当前年份(2位)
  1489. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  1490. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  1491. var d = myDate.getDate() //获取当前日(1-31)
  1492. var day = myDate.getHours()
  1493. return day
  1494. }
  1495. },
  1496. activated: function() {
  1497. this.$nextTick(() => {
  1498. postAction('/v1/api/file/getFileListByPage',{page: 1,size: 10}).then(res=>{
  1499. console.log(res)
  1500. })
  1501. var that = this
  1502. that.drawLine(1)
  1503. that.getKsDetail(1).then(res => {
  1504. that.drawPie('cost', res.result)
  1505. })
  1506. that.getReportList(1, that.allValue)
  1507. upDate = window.setInterval(() => {
  1508. setTimeout(() => {
  1509. that.drawLine(that.active)
  1510. that.getKsDetail(that.active).then(res => {
  1511. that.drawPie('cost', res.result)
  1512. })
  1513. that.getReportList(that.active, that.allValue)
  1514. }, 0)
  1515. }, 120000)
  1516. })
  1517. },
  1518. deactivated() {
  1519. window.clearTimeout(upDate)
  1520. },
  1521. filters: {
  1522. toPercentage(val) {
  1523. if(typeof val != 'string'){
  1524. return (val * 100).toFixed(2) + '%'
  1525. }else{
  1526. return val
  1527. }
  1528. },
  1529. //保留两位小数并且变成货币格式
  1530. decimalsHandle(val){
  1531. if(val && typeof val !='string'){
  1532. if(val>=0){
  1533. val=parseFloat(val).toFixed(2);
  1534. let numberStr = val.toString()
  1535. let str = numberStr.split('.')
  1536. let str0=str[0].split('').reverse();
  1537. for (let i = 0; i < str0.length; i++) {
  1538. if ((i + 1) % 4 === 0) {
  1539. str0.splice(i, 0, ',')
  1540. }
  1541. }
  1542. str0.reverse()
  1543. let handleResult = ''
  1544. for (let j = 0; j < str0.length; j++) {
  1545. handleResult += str0[j]
  1546. }
  1547. return handleResult+'.'+str[1]
  1548. }else{
  1549. val=parseFloat(val).toFixed(2);
  1550. let numberStr = val.toString()
  1551. let str = numberStr.split('.')
  1552. let str0=str[0].substr(1).split('').reverse();
  1553. for (let i = 0; i < str0.length; i++) {
  1554. if ((i + 1) % 4 === 0) {
  1555. str0.splice(i, 0, ',')
  1556. }
  1557. }
  1558. str0.reverse()
  1559. let handleResult = ''
  1560. for (let j = 0; j < str0.length; j++) {
  1561. handleResult += str0[j]
  1562. }
  1563. return '-'+handleResult+'.'+str[1]
  1564. }
  1565. }else if(typeof val =='string'){
  1566. return val
  1567. }
  1568. else{
  1569. return 0
  1570. }
  1571. },
  1572. //变成货币格式
  1573. formatCurrency(val){
  1574. if(val){
  1575. let numberStr = val.toString()
  1576. let str = numberStr.split('').reverse()
  1577. for (let i = 0; i < str.length; i++) {
  1578. if ((i + 1) % 4 === 0) {
  1579. str.splice(i, 0, ',')
  1580. }
  1581. }
  1582. str.reverse()
  1583. let handleResult = ''
  1584. for (let j = 0; j < str.length; j++) {
  1585. handleResult += str[j]
  1586. }
  1587. return handleResult
  1588. }
  1589. }
  1590. }
  1591. }
  1592. </script>