Statistics.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615
  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" :style="{ width: clientWidth - 48 - 24 + 'px' }"></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. clientWidth: 0,
  359. loading: true,
  360. columns: [
  361. { title: '时间', dataIndex: 'statDate', align: 'center' },
  362. {
  363. title: '总消耗环比',
  364. dataIndex: 'yesCost',
  365. scopedSlots: { customRender: 'yesCost' },
  366. align: 'center'
  367. },
  368. { title: '总消耗', dataIndex: 'cost', align: 'center' , scopedSlots: { customRender: 'cost' },},
  369. {
  370. title: '封面点击数环比',
  371. dataIndex: 'yesPhotoClick',
  372. scopedSlots: { customRender: 'photoClickProportion' },
  373. align: 'center'
  374. },
  375. { title: '封面点击数', dataIndex: 'photoClick', align: 'center', scopedSlots: { customRender: 'photoClick' }, },
  376. {
  377. title: '封面曝光数环比',
  378. dataIndex: 'yesPhotoShow',
  379. scopedSlots: { customRender: 'photoShowProportion' },
  380. align: 'center'
  381. },
  382. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' , scopedSlots: { customRender: 'photoShow' },},
  383. {
  384. title: '素材曝光数环比',
  385. dataIndex: 'yesAclick',
  386. scopedSlots: { customRender: 'aclickProportion' },
  387. align: 'center'
  388. },
  389. { title: '素材曝光数', dataIndex: 'aclick', align: 'center', scopedSlots: { customRender: 'aclick' }, }
  390. ],
  391. columnsDb: [
  392. { title: '时间', dataIndex: 'statDate', align: 'center' },
  393. { title: '总消耗', dataIndex: 'cost', align: 'center' , scopedSlots: { customRender: 'cost' },},
  394. { title: '封面点击数', dataIndex: 'photoClick', align: 'center', scopedSlots: { customRender: 'photoClick' }, },
  395. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center', scopedSlots: { customRender: 'photoShow' }, },
  396. { title: '素材曝光数', dataIndex: 'aclick', align: 'center', scopedSlots: { customRender: 'aclick' }, }
  397. ],
  398. dataTable: [],
  399. dataTableTwo: [],
  400. dataAllTableTwo: null,
  401. dataAllTable: null,
  402. dataAllTableYester: null,
  403. title: '快手大盘',
  404. visible: false,
  405. statistics: [],
  406. showData: null,
  407. startValue: [],
  408. contrastValue: [],
  409. contrastDataAll: null,
  410. allValue: ['', ''],
  411. value: 'month',
  412. oneMonth: null,
  413. twoMonth: null,
  414. kuaishou: {
  415. aclick: 0,
  416. aClickProportion: 0,
  417. cost: 0,
  418. costProportion: 0,
  419. photoClick: 0,
  420. photoClickroportion: 0,
  421. photoShow: 0,
  422. showProportion: 0
  423. },
  424. tabListNoTitle: [
  425. {
  426. key: 'cost',
  427. tab: '总消耗'
  428. },
  429. {
  430. key: 'photoClick',
  431. tab: '封面点击数'
  432. },
  433. {
  434. key: 'photoShow',
  435. tab: '封面曝光数'
  436. },
  437. {
  438. key: 'aclick',
  439. tab: '素材曝光数'
  440. }
  441. ],
  442. tableCard: [
  443. {
  444. key: 'small',
  445. tab: '前'
  446. },
  447. {
  448. key: 'big',
  449. tab: '后'
  450. }
  451. ],
  452. tableNowCard: [
  453. {
  454. key: 'now',
  455. tab: '今天'
  456. },
  457. {
  458. key: 'yesterday',
  459. tab: '昨天'
  460. }
  461. ],
  462. noTitleKeyTableTwo: 'small',
  463. noTitleKey: 'cost',
  464. noTitleKeyTwo: 'cost',
  465. noTitleKeyTable: 'now',
  466. chart: null,
  467. chart1: null,
  468. active: 1,
  469. duration: 1000,
  470. dataDetail: null,
  471. contrastDataList: []
  472. }
  473. },
  474. methods: {
  475. a(item) {
  476. console.log(item)
  477. },
  478. moment,
  479. clear() {
  480. this.twoMonth = null
  481. this.oneMonth = null
  482. this.contrastDataAll = null
  483. this.contrastDataList = null
  484. this.contrastValue = []
  485. this.dataTableTwo = []
  486. this.dataAllTableTwo = null
  487. if (this.chart) {
  488. this.chart.clear()
  489. }
  490. },
  491. search() {
  492. var params = {}
  493. params.type = 10
  494. params.sign = this.value
  495. if (this.value == 'month') {
  496. if (this.twoMonth && this.oneMonth) {
  497. params.bigDate = moment(this.twoMonth._d).format('YYYY-MM')
  498. params.smallDate = moment(this.oneMonth._d).format('YYYY-MM')
  499. } else {
  500. this.$message.error('请选择两个需要对比的数据')
  501. }
  502. } else if (this.value == 'day') {
  503. params.smallDate = moment(this.contrastValue[0]._d).format('YYYY-MM-DD')
  504. params.bigDate = moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
  505. }
  506. this.columnsDb = [
  507. { title: '时间', dataIndex: 'statDate', align: 'center' },
  508. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  509. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  510. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  511. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  512. ]
  513. getKsAccountReport(params).then(res => {
  514. if (res.success) {
  515. if (res.result.compared) {
  516. this.contrastDataAll = res.result
  517. // this.drawPieAll(res)
  518. } else {
  519. this.contrastDataAll = null
  520. }
  521. }
  522. })
  523. getKsDetail(params).then(res => {
  524. this.contrastDataList = res.result
  525. this.drawSearchLine(this.noTitleKeyTwo, res.result)
  526. })
  527. getReportList(params).then(res => {
  528. if (res.success) {
  529. this.tableCard = [
  530. {
  531. key: 'small',
  532. tab: res.result[0].beStatDate
  533. },
  534. {
  535. key: 'big',
  536. tab: res.result[0].statDate
  537. }
  538. ]
  539. this.noTitleKeyTableTwo = 'small'
  540. if (this.value == 'day') {
  541. this.dataAllTableTwo = res.result[0]
  542. this.dataTableTwo = res.result[0].beComparedDetail.map((item, index) => {
  543. return {
  544. ...item,
  545. statDate: item.statDate + ' ' + item.statHour + '时',
  546. key: index
  547. }
  548. })
  549. } else {
  550. this.dataAllTableTwo = res.result[0]
  551. this.dataTableTwo = res.result[0].beComparedDetail.map((item, index) => {
  552. return {
  553. ...item,
  554. key: index
  555. }
  556. })
  557. }
  558. }
  559. })
  560. },
  561. getReportList(checked, dateValue) {
  562. let params = {}
  563. params.type = checked
  564. if (this.active == 9) {
  565. params.startDate = dateValue[0]
  566. params.endDate = dateValue[1]
  567. }
  568. // proportion
  569. this.loading = true
  570. if (this.active == 1) {
  571. getReportList(params).then(res => {
  572. if (res.result[0].now.length > 0) {
  573. for (let i = 0; i < res.result[0].now.length; i++) {
  574. for (let j = 0; j < res.result[0].yesterday.length; j++) {
  575. if (res.result[0].now[i].statHour == res.result[0].yesterday[j].statHour) {
  576. res.result[0].now[i].yesCost =
  577. (((res.result[0].now[i].cost - res.result[0].yesterday[j].cost) / res.result[0].yesterday[j].cost) * 100).toFixed(2) +
  578. '%'
  579. res.result[0].now[i].yesPhotoClick =
  580. (
  581. ((res.result[0].now[i].photoClick - res.result[0].yesterday[j].photoClick) / res.result[0].yesterday[j].photoClick) *
  582. 100
  583. ).toFixed(2) + '%'
  584. res.result[0].now[i].yesPhotoShow =
  585. (
  586. ((res.result[0].now[i].photoShow - res.result[0].yesterday[j].photoShow) / res.result[0].yesterday[j].photoShow) *
  587. 100
  588. ).toFixed(2) + '%'
  589. res.result[0].now[i].yesAclick =
  590. (((res.result[0].now[i].aclick - res.result[0].yesterday[j].aclick) / res.result[0].yesterday[j].aclick) * 100).toFixed(
  591. 2
  592. ) + '%'
  593. }
  594. }
  595. }
  596. this.dataTable = res.result[0].now.map((item, index) => {
  597. return {
  598. key: index,
  599. ...item,
  600. statDate:
  601. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  602. }
  603. })
  604. this.dataAllTableYester = res.result[0].yesterday.map((item, index) => {
  605. return {
  606. key: index,
  607. ...item,
  608. statDate:
  609. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  610. }
  611. })
  612. this.dataAllTable = this.dataTable
  613. this.loading = false
  614. } else {
  615. this.dataAllTable = null
  616. this.dataTable = []
  617. this.dataAllTableYester = res.result[0].yesterday
  618. this.loading = false
  619. }
  620. })
  621. } else {
  622. getReportList(params).then(res => {
  623. this.dataTable = res.result.map((item, index) => {
  624. return {
  625. key: index,
  626. ...item,
  627. statDate:
  628. this.active == 1 || this.active == 2 ? item.statDate + ' ' + item.statHour + '时' : item.statDate
  629. }
  630. })
  631. this.loading = false
  632. })
  633. }
  634. },
  635. drawPieAll(data) {
  636. var colorList = ['#afa3f5', '#00d488', '#3feed4', '#3bafff', '#f1bb4c', 'rgba(250,250,250,0.5)']
  637. var option = {
  638. tooltip: {
  639. trigger: 'item',
  640. formatter: '{a} <br/>{b} : {c}'
  641. },
  642. series: [
  643. {
  644. name: '总消耗对比',
  645. type: 'pie',
  646. radius: '35%',
  647. center: ['50%', '50%'],
  648. data: [
  649. { value: 944332, name: '2019-09' },
  650. { value: 6839241.89, name: '2019-10' }
  651. ],
  652. itemStyle: {
  653. normal: {
  654. color: function(params) {
  655. return colorList[params.dataIndex]
  656. }
  657. }
  658. }
  659. }
  660. ]
  661. }
  662. var chart = echarts.init(document.getElementById('chart3'))
  663. chart.clear()
  664. chart.setOption(option, true)
  665. },
  666. drawSearchLine(type, data) {
  667. var dataLegend = []
  668. var dataLength = [] //小月份数据
  669. var dataLengthBig = [] //大月份数据
  670. var dataElse = []
  671. var dataDate = []
  672. var that = this
  673. var showName = null
  674. if (data) {
  675. if (this.value == 'month') {
  676. dataLegend = [moment(this.oneMonth._d).format('YYYY-MM'), moment(this.twoMonth._d).format('YYYY-MM')]
  677. dataDate = data.map(item => {
  678. return item.statDate.substring(item.statDate.length - 2, item.statDate.length)
  679. })
  680. } else if (this.value == 'day') {
  681. dataLegend = [
  682. moment(this.contrastValue[0]._d).format('YYYY-MM-DD'),
  683. moment(this.contrastValue[1]._d).format('YYYY-MM-DD')
  684. ]
  685. dataDate = data.map(item => {
  686. return item.statHour
  687. })
  688. }
  689. if (type == 'cost') {
  690. showName = '总消耗'
  691. dataLength = data.map(item => {
  692. return item.beComparedCost
  693. })
  694. dataLengthBig = data.map(item => {
  695. return item.cost
  696. })
  697. dataElse = data.map(item => {
  698. if (this.value == 'month') {
  699. return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  700. } else {
  701. return { proportion: (item.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  702. }
  703. })
  704. } else if (type == 'photoClick') {
  705. showName = '封面点击数'
  706. dataLength = data.map(item => {
  707. return item.beComparedPhotoClick
  708. })
  709. dataLengthBig = data.map(item => {
  710. return item.photoClick
  711. })
  712. dataElse = data.map(item => {
  713. if (this.value == 'month') {
  714. return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  715. } else {
  716. return { proportion: (item.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  717. }
  718. })
  719. } else if (type == 'photoShow') {
  720. showName = '封面曝光数'
  721. dataLength = data.map(item => {
  722. return item.beComparedPhotoShow
  723. })
  724. dataLengthBig = data.map(item => {
  725. return item.photoShow
  726. })
  727. dataElse = data.map(item => {
  728. if (this.value == 'month') {
  729. return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  730. } else {
  731. return { proportion: (item.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  732. }
  733. })
  734. } else if (type == 'aclick') {
  735. showName = '素材曝光数'
  736. dataLength = data.map(item => {
  737. return item.beComparedAClick
  738. })
  739. dataLengthBig = data.map(item => {
  740. return item.aClick
  741. })
  742. dataElse = data.map(item => {
  743. if (this.value == 'month') {
  744. return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.beComparedDate }
  745. } else {
  746. return { proportion: (item.comparedAclick * 100).toFixed(2) + '%', statHour: item.statHour }
  747. }
  748. })
  749. }
  750. }
  751. var option = {
  752. backgroundColor: '#fff',
  753. tooltip: {
  754. trigger: 'axis',
  755. formatter: function(params) {
  756. var index
  757. if (that.value == 'month') {
  758. index = dataElse.findIndex(
  759. v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
  760. )
  761. } else {
  762. index = dataElse.findIndex(
  763. v => v.statHour.substring(v.statHour.length - 2, v.statHour.length) == params[0].name
  764. )
  765. }
  766. var da = null
  767. if (index >= 0) {
  768. da = dataElse[index].proportion
  769. }
  770. if (that.value == 'month') {
  771. return `${params[0].marker}时间:${params[0].seriesName}-${params[0].name}:${showName}:${params[0].data} <br/>
  772. ${params[1].marker}时间:${params[1].seriesName}-${params[0].name}:${showName}:${params[1].data} <br/>
  773. 环比:${da}<br/> `
  774. } else {
  775. return `${params[0].marker}时间:${params[0].seriesName}:${showName}:${params[0].data} <br/>
  776. ${params[1].marker}时间:${params[1].seriesName}:${showName}:${params[1].data} <br/>
  777. 环比:${da}<br/> `
  778. }
  779. }
  780. },
  781. legend: {
  782. data: dataLegend
  783. },
  784. grid: {
  785. left: '2%',
  786. right: '2%',
  787. bottom: '2%',
  788. containLabel: true
  789. },
  790. xAxis: {
  791. type: 'category',
  792. data: dataDate,
  793. boundaryGap: false,
  794. // 坐标轴线
  795. axisLine: {
  796. show: false,
  797. lineStyle: {
  798. color: '#999'
  799. }
  800. },
  801. // 分割线
  802. splitLine: {
  803. show: true,
  804. lineStyle: {
  805. type: 'dashed',
  806. color: '#e5e5e5'
  807. }
  808. }
  809. },
  810. yAxis: {
  811. type: 'value',
  812. axisLine: {
  813. show: false,
  814. lineStyle: {
  815. color: '#999'
  816. }
  817. },
  818. splitLine: {
  819. lineStyle: {
  820. type: 'dashed',
  821. color: '#e5e5e5'
  822. }
  823. }
  824. },
  825. series: [
  826. {
  827. name: dataLegend[0],
  828. type: 'line',
  829. color: '#0bcd74',
  830. smooth: true,
  831. symbol: 'circle',
  832. symbolSize: 1,
  833. lineStyle: {
  834. normal: {
  835. width: 2,
  836. color: '#0bcd74'
  837. }
  838. },
  839. itemStyle: {
  840. borderColor: '#ffffff',
  841. borderWidth: 3
  842. },
  843. data: dataLength
  844. },
  845. {
  846. name: dataLegend[1],
  847. type: 'line',
  848. color: '#9933ff',
  849. smooth: true,
  850. symbol: 'circle',
  851. symbolSize: 1,
  852. lineStyle: {
  853. normal: {
  854. width: 2,
  855. color: '#9933ff'
  856. }
  857. },
  858. itemStyle: {
  859. borderColor: '#ffffff',
  860. borderWidth: 3
  861. },
  862. data: dataLengthBig
  863. }
  864. ]
  865. }
  866. this.chart = echarts.init(document.getElementById('chart1'))
  867. this.chart.clear()
  868. this.chart.setOption(option, true)
  869. // window.onresize = function() {
  870. // chart.resize()
  871. // }
  872. },
  873. disabledDate(current) {
  874. // Can not select days before today and today
  875. return current && current > moment().endOf('day')
  876. },
  877. onTabChange(key, type) {
  878. console.log(key, type)
  879. this[type] = key
  880. if (type == 'noTitleKey') {
  881. this.drawPie(key, this.dataDetail)
  882. } else if (type == 'noTitleKeyTable') {
  883. this.dataTable = []
  884. if (key == 'now') {
  885. this.columns = [
  886. { title: '时间', dataIndex: 'statDate', align: 'center' },
  887. {
  888. title: '总消耗环比',
  889. dataIndex: 'yesCost',
  890. scopedSlots: { customRender: 'yesCost' },
  891. align: 'center'
  892. },
  893. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  894. {
  895. title: '封面点击数环比',
  896. dataIndex: 'yesPhotoClick',
  897. scopedSlots: { customRender: 'photoClickProportion' },
  898. align: 'center'
  899. },
  900. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  901. {
  902. title: '封面曝光数环比',
  903. dataIndex: 'yesPhotoShow',
  904. scopedSlots: { customRender: 'photoShowProportion' },
  905. align: 'center'
  906. },
  907. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  908. {
  909. title: '素材曝光数环比',
  910. dataIndex: 'yesAclick',
  911. scopedSlots: { customRender: 'aclickProportion' },
  912. align: 'center'
  913. },
  914. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  915. ]
  916. this.dataTable = this.dataAllTable
  917. } else {
  918. this.columns = [
  919. { title: '时间', dataIndex: 'statDate', align: 'center' },
  920. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  921. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  922. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  923. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  924. ]
  925. this.dataTable = this.dataAllTableYester.map((item, index) => {
  926. return {
  927. key: index,
  928. ...item,
  929. statDate: item.statDate
  930. }
  931. })
  932. }
  933. } else if (type == 'noTitleKeyTableTwo') {
  934. this.dataTableTwo = []
  935. if (key == 'small') {
  936. this.columnsDb = [
  937. { title: '时间', dataIndex: 'statDate', align: 'center' },
  938. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  939. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  940. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  941. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  942. ]
  943. if (this.value == 'day') {
  944. this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
  945. return {
  946. key: index,
  947. ...item,
  948. statDate: item.statDate + ' ' + item.statHour + '时'
  949. }
  950. })
  951. } else {
  952. this.dataTableTwo = this.dataAllTableTwo.beComparedDetail.map((item, index) => {
  953. return {
  954. key: index,
  955. ...item
  956. }
  957. })
  958. }
  959. } else {
  960. this.columnsDb = [
  961. { title: '时间', dataIndex: 'statDate', align: 'center' },
  962. {
  963. title: '总消耗环比',
  964. dataIndex: 'yesCost',
  965. scopedSlots: { customRender: 'yesCost' },
  966. align: 'center'
  967. },
  968. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  969. {
  970. title: '封面点击数环比',
  971. dataIndex: 'yesPhotoClick',
  972. scopedSlots: { customRender: 'photoClickProportion' },
  973. align: 'center'
  974. },
  975. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  976. {
  977. title: '封面曝光数环比',
  978. dataIndex: 'yesPhotoShow',
  979. scopedSlots: { customRender: 'photoShowProportion' },
  980. align: 'center'
  981. },
  982. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  983. {
  984. title: '素材曝光数环比',
  985. dataIndex: 'yesAclick',
  986. scopedSlots: { customRender: 'aclickProportion' },
  987. align: 'center'
  988. },
  989. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  990. ]
  991. if (this.value == 'day') {
  992. for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
  993. this.dataTableTwo.push({
  994. key: i,
  995. statDate:
  996. this.dataAllTableTwo.comparedDetail[i].statDate +
  997. ' ' +
  998. this.dataAllTableTwo.comparedDetail[i].statHour +
  999. '时',
  1000. yesCost:
  1001. (
  1002. this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
  1003. 1
  1004. ).toFixed(2) + '%',
  1005. cost: this.dataAllTableTwo.comparedDetail[i].cost,
  1006. yesPhotoClick:
  1007. (
  1008. this.dataAllTableTwo.comparedDetail[i].photoClick /
  1009. this.dataAllTableTwo.beComparedDetail[i].photoClick -
  1010. 1
  1011. ).toFixed(2) + '%',
  1012. photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
  1013. yesPhotoShow:
  1014. (
  1015. this.dataAllTableTwo.comparedDetail[i].photoShow /
  1016. this.dataAllTableTwo.beComparedDetail[i].photoShow -
  1017. 1
  1018. ).toFixed(2) + '%',
  1019. photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
  1020. yesAclick:
  1021. (
  1022. this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
  1023. 1
  1024. ).toFixed(2) + '%',
  1025. aclick: this.dataAllTableTwo.comparedDetail[i].aclick
  1026. })
  1027. }
  1028. // this.dataTableTwo = this.dataAllTableTwo.comparedDetail.map(item => {
  1029. // return {
  1030. // ...item,
  1031. // statDate: item.statDate + ' ' + item.statHour + '时'
  1032. // }
  1033. // })
  1034. } else {
  1035. this.dataTableTwo = []
  1036. for (let i = 0; i < this.dataAllTableTwo.comparedDetail.length; i++) {
  1037. this.dataTableTwo.push({
  1038. key: i,
  1039. statDate: this.dataAllTableTwo.comparedDetail[i].statDate,
  1040. yesCost:
  1041. (
  1042. this.dataAllTableTwo.comparedDetail[i].cost / this.dataAllTableTwo.beComparedDetail[i].cost -
  1043. 1
  1044. ).toFixed(2) + '%',
  1045. cost: this.dataAllTableTwo.comparedDetail[i].cost,
  1046. yesPhotoClick:
  1047. (
  1048. this.dataAllTableTwo.comparedDetail[i].photoClick /
  1049. this.dataAllTableTwo.beComparedDetail[i].photoClick -
  1050. 1
  1051. ).toFixed(2) + '%',
  1052. photoClick: this.dataAllTableTwo.comparedDetail[i].photoClick,
  1053. yesPhotoShow:
  1054. (
  1055. this.dataAllTableTwo.comparedDetail[i].photoShow /
  1056. this.dataAllTableTwo.beComparedDetail[i].photoShow -
  1057. 1
  1058. ).toFixed(2) + '%',
  1059. photoShow: this.dataAllTableTwo.comparedDetail[i].photoShow,
  1060. yesAclick:
  1061. (
  1062. this.dataAllTableTwo.comparedDetail[i].aclick / this.dataAllTableTwo.beComparedDetail[i].aclick -
  1063. 1
  1064. ).toFixed(2) + '%',
  1065. aclick: this.dataAllTableTwo.comparedDetail[i].aclick
  1066. })
  1067. }
  1068. console.log(this.dataTableTwo)
  1069. }
  1070. }
  1071. } else {
  1072. this.drawSearchLine(key, this.contrastDataList)
  1073. }
  1074. },
  1075. getAdd(checked) {
  1076. if (checked == 9) {
  1077. if (this.startValue.length > 0 && this.startValue[0]) {
  1078. this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
  1079. this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
  1080. }
  1081. } else {
  1082. this.startValue = []
  1083. this.allValue = []
  1084. }
  1085. this.active = checked
  1086. var arr = [
  1087. {
  1088. key: 'now',
  1089. tab: '今天'
  1090. },
  1091. {
  1092. key: 'yesterday',
  1093. tab: '昨天'
  1094. }
  1095. ]
  1096. if (checked == 1) {
  1097. this.columns = [
  1098. { title: '时间', dataIndex: 'statDate', align: 'center' },
  1099. {
  1100. title: '总消耗环比',
  1101. dataIndex: 'yesCost',
  1102. scopedSlots: { customRender: 'yesCost' },
  1103. align: 'center'
  1104. },
  1105. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  1106. {
  1107. title: '封面点击数环比',
  1108. dataIndex: 'yesPhotoClick',
  1109. scopedSlots: { customRender: 'photoClickProportion' },
  1110. align: 'center'
  1111. },
  1112. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  1113. {
  1114. title: '封面曝光数环比',
  1115. dataIndex: 'yesPhotoShow',
  1116. scopedSlots: { customRender: 'photoShowProportion' },
  1117. align: 'center'
  1118. },
  1119. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  1120. {
  1121. title: '素材曝光数环比',
  1122. dataIndex: 'yesAclick',
  1123. scopedSlots: { customRender: 'aclickProportion' },
  1124. align: 'center'
  1125. },
  1126. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  1127. ]
  1128. } else {
  1129. this.columns = [
  1130. { title: '时间', dataIndex: 'statDate', align: 'center' },
  1131. { title: '总消耗', dataIndex: 'cost', align: 'center' },
  1132. { title: '封面点击数', dataIndex: 'photoClick', align: 'center' },
  1133. { title: '封面曝光数', dataIndex: 'photoShow', align: 'center' },
  1134. { title: '素材曝光数', dataIndex: 'aclick', align: 'center' }
  1135. ]
  1136. }
  1137. switch (checked) {
  1138. case 1:
  1139. arr = [
  1140. {
  1141. key: 'now',
  1142. tab: '今天'
  1143. },
  1144. {
  1145. key: 'yesterday',
  1146. tab: '昨天'
  1147. }
  1148. ]
  1149. break
  1150. case 2:
  1151. arr = [
  1152. {
  1153. key: 'yesterday',
  1154. tab: '昨天'
  1155. }
  1156. ]
  1157. break
  1158. case 3:
  1159. arr = [
  1160. {
  1161. key: 'yesterday',
  1162. tab: '近一周'
  1163. }
  1164. ]
  1165. break
  1166. case 4:
  1167. arr = [
  1168. {
  1169. key: 'yesterday',
  1170. tab: '近十五天'
  1171. }
  1172. ]
  1173. break
  1174. case 5:
  1175. arr = [
  1176. {
  1177. key: 'yesterday',
  1178. tab: '近一月'
  1179. }
  1180. ]
  1181. break
  1182. case 6:
  1183. arr = [
  1184. {
  1185. key: 'yesterday',
  1186. tab: '近三月'
  1187. }
  1188. ]
  1189. break
  1190. case 7:
  1191. arr = [
  1192. {
  1193. key: 'yesterday',
  1194. tab: '近半年'
  1195. }
  1196. ]
  1197. break
  1198. case 8:
  1199. arr = [
  1200. {
  1201. key: 'yesterday',
  1202. tab: '所有'
  1203. }
  1204. ]
  1205. break
  1206. case 9:
  1207. arr = [
  1208. {
  1209. key: 'yesterday',
  1210. tab: this.allValue[1] + ' ~ ' + this.allValue[0]
  1211. }
  1212. ]
  1213. break
  1214. }
  1215. this.tableNowCard = arr
  1216. this.getReportList(checked, this.allValue)
  1217. this.drawLine(checked, this.allValue)
  1218. this.getKsDetail(checked, this.allValue).then(res => {
  1219. this.drawPie(this.noTitleKey, res.result)
  1220. })
  1221. },
  1222. getKsDetail(type, dateValue) {
  1223. var that = this
  1224. return new Promise(function(resolve) {
  1225. let params = {}
  1226. params.type = type
  1227. if (that.active == 9) {
  1228. params.startDate = dateValue[0]
  1229. params.endDate = dateValue[1]
  1230. }
  1231. getKsDetail(params).then(res => {
  1232. that.dataDetail = res.result
  1233. resolve(res)
  1234. })
  1235. })
  1236. },
  1237. drawLine(type, dateValue) {
  1238. var that = this
  1239. return new Promise(function(resolve) {
  1240. let params = {}
  1241. params.type = type
  1242. if (that.active == 9) {
  1243. params.startDate = dateValue[0]
  1244. params.endDate = dateValue[1]
  1245. }
  1246. getKsAccountReport(params).then(res => {
  1247. var dataNew = []
  1248. var dataX = []
  1249. if (res.success) {
  1250. that.kuaishou = res.result.aclick?res.result:{aclick: 0,cost: 0, photoClick: 0,photoShow: 0,}
  1251. // this.drawPieAll(res)
  1252. } else {
  1253. that.kuaishou.aclick = 0
  1254. that.kuaishou.cost = 0
  1255. that.kuaishou.photoClick = 0
  1256. that.kuaishou.photoShow = 0
  1257. }
  1258. resolve()
  1259. })
  1260. })
  1261. },
  1262. drawPie(type, data) {
  1263. var dataLegend = []
  1264. var dataLength = []
  1265. var dataElse = []
  1266. var dataDate = []
  1267. var that = this
  1268. if (this.active == 1 || this.active == 2) {
  1269. // data.sort(function(a, b) {
  1270. // return a.statHour - b.statHour
  1271. // })
  1272. dataDate = data.map(item => {
  1273. return item.statHour
  1274. })
  1275. } else {
  1276. // data.sort(function(a, b) {
  1277. // return a.statDate - b.statDate
  1278. // })
  1279. dataDate = data.map(item => {
  1280. return item.statDate
  1281. })
  1282. }
  1283. if (type == 'cost') {
  1284. dataLegend = ['总消耗']
  1285. dataElse = data.map(item => {
  1286. if (item.now) {
  1287. return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1288. } else {
  1289. return { proportion: 0, statHour: item.statHour }
  1290. }
  1291. })
  1292. } else if (type == 'photoClick') {
  1293. dataLegend = ['封面点击数']
  1294. dataElse = data.map(item => {
  1295. if (item.now) {
  1296. return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1297. } else {
  1298. return { proportion: 0, statHour: item.statHour }
  1299. }
  1300. })
  1301. } else if (type == 'photoShow') {
  1302. dataLegend = ['封面曝光数']
  1303. dataElse = data.map(item => {
  1304. if (item.now) {
  1305. return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1306. } else {
  1307. return { proportion: 0, statHour: item.statHour }
  1308. }
  1309. })
  1310. } else if (type == 'aclick') {
  1311. dataLegend = ['素材曝光数']
  1312. dataElse = data.map(item => {
  1313. if (item.now) {
  1314. return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1315. } else {
  1316. return { proportion: 0, statHour: item.statHour }
  1317. }
  1318. })
  1319. }
  1320. dataLength = data.map(item => {
  1321. return item[type]
  1322. })
  1323. var series
  1324. if (this.active == 1) {
  1325. dataLegend = ['今天', '昨天']
  1326. series = [
  1327. {
  1328. name: dataLegend[0],
  1329. type: 'line',
  1330. color: '#9933ff',
  1331. smooth: true,
  1332. symbol: 'circle',
  1333. symbolSize: 1,
  1334. lineStyle: {
  1335. normal: {
  1336. width: 2,
  1337. color: '#9933ff'
  1338. }
  1339. },
  1340. itemStyle: {
  1341. borderColor: '#ffffff',
  1342. borderWidth: 3
  1343. },
  1344. data: data.map(item => {
  1345. if (item.now) {
  1346. return item.now[type]
  1347. } else {
  1348. return 0
  1349. }
  1350. })
  1351. },
  1352. {
  1353. name: dataLegend[1],
  1354. type: 'line',
  1355. color: '#0bcd74',
  1356. smooth: true,
  1357. symbol: 'circle',
  1358. symbolSize: 1,
  1359. lineStyle: {
  1360. normal: {
  1361. width: 2,
  1362. color: '#0bcd74'
  1363. }
  1364. },
  1365. itemStyle: {
  1366. borderColor: '#ffffff',
  1367. borderWidth: 3
  1368. },
  1369. data: dataLength
  1370. }
  1371. ]
  1372. } else {
  1373. series = [
  1374. {
  1375. name: dataLegend[0],
  1376. type: 'line',
  1377. color: '#0bcd74',
  1378. smooth: true,
  1379. symbol: 'circle',
  1380. symbolSize: 1,
  1381. lineStyle: {
  1382. normal: {
  1383. width: 2,
  1384. color: '#0bcd74'
  1385. }
  1386. },
  1387. itemStyle: {
  1388. borderColor: '#ffffff',
  1389. borderWidth: 3
  1390. },
  1391. data: dataLength
  1392. }
  1393. ]
  1394. }
  1395. var option = {
  1396. backgroundColor: '#fff',
  1397. // toolbox: {
  1398. // show: true,
  1399. // feature: {
  1400. // dataView: { readOnly: false }
  1401. // }
  1402. // },
  1403. tooltip: {
  1404. trigger: 'axis',
  1405. formatter: function(params) {
  1406. var index = dataElse.findIndex(v => v.statHour == params[0].name)
  1407. var da = null
  1408. if (index >= 0) {
  1409. da = dataElse[index].proportion
  1410. }
  1411. if (that.active == 1) {
  1412. if (params.length > 1) {
  1413. return `${params[0].marker}今天${params[0].name}时:${params[0].data} <br/>
  1414. ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
  1415. 环比:${da} <br/> `
  1416. } else {
  1417. return `${params[0].marker}时间:${params[0].name} <br/>
  1418. 数值:${params[0].data} `
  1419. }
  1420. } else {
  1421. return `${params[0].marker}时间:${params[0].name} <br/>
  1422. 数值:${params[0].data} `
  1423. }
  1424. }
  1425. },
  1426. legend: {
  1427. data: dataLegend
  1428. },
  1429. grid: {
  1430. left: '2%',
  1431. right: '2%',
  1432. bottom: '2%',
  1433. containLabel: true
  1434. },
  1435. xAxis: {
  1436. type: 'category',
  1437. data: dataDate,
  1438. boundaryGap: false,
  1439. // 坐标轴线
  1440. axisLine: {
  1441. show: false,
  1442. lineStyle: {
  1443. color: '#999'
  1444. }
  1445. },
  1446. // 分割线
  1447. splitLine: {
  1448. show: true,
  1449. lineStyle: {
  1450. type: 'dashed',
  1451. color: '#e5e5e5'
  1452. }
  1453. }
  1454. },
  1455. yAxis: {
  1456. type: 'value',
  1457. axisLine: {
  1458. show: false,
  1459. lineStyle: {
  1460. color: '#999'
  1461. }
  1462. },
  1463. splitLine: {
  1464. lineStyle: {
  1465. type: 'dashed',
  1466. color: '#e5e5e5'
  1467. }
  1468. }
  1469. },
  1470. series: series
  1471. }
  1472. var chart = echarts.init(document.getElementById('chart'))
  1473. chart.clear()
  1474. chart.setOption(option, true)
  1475. window.onresize = function() {
  1476. this.clientWidth = document.documentElement.clientWidth - 224;
  1477. chart.resize()
  1478. }
  1479. // this.chart.on('click', param => {
  1480. // if (param.name == '总展示') {
  1481. // alert(123)
  1482. // }
  1483. // })
  1484. }
  1485. },
  1486. watch: {},
  1487. computed: {
  1488. newDate() {
  1489. var myDate = new Date()
  1490. myDate.getYear() //获取当前年份(2位)
  1491. var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
  1492. var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
  1493. var d = myDate.getDate() //获取当前日(1-31)
  1494. var day = myDate.getHours()
  1495. return day
  1496. }
  1497. },
  1498. activated: function() {
  1499. this.$nextTick(() => {
  1500. this.clientWidth = document.documentElement.clientWidth - 224;
  1501. postAction('/v1/api/file/getFileListByPage',{page: 1,size: 10}).then(res=>{
  1502. console.log(res)
  1503. })
  1504. var that = this
  1505. that.drawLine(1)
  1506. that.getKsDetail(1).then(res => {
  1507. that.drawPie('cost', res.result)
  1508. })
  1509. that.getReportList(1, that.allValue)
  1510. upDate = window.setInterval(() => {
  1511. setTimeout(() => {
  1512. that.drawLine(that.active)
  1513. that.getKsDetail(that.active).then(res => {
  1514. that.drawPie('cost', res.result)
  1515. })
  1516. that.getReportList(that.active, that.allValue)
  1517. }, 0)
  1518. }, 120000)
  1519. })
  1520. },
  1521. deactivated() {
  1522. window.clearTimeout(upDate)
  1523. },
  1524. filters: {
  1525. toPercentage(val) {
  1526. if(typeof val != 'string'){
  1527. return (val * 100).toFixed(2) + '%'
  1528. }else{
  1529. return val
  1530. }
  1531. },
  1532. //保留两位小数并且变成货币格式
  1533. decimalsHandle(val){
  1534. if(val && typeof val !='string'){
  1535. if(val>=0){
  1536. val=parseFloat(val).toFixed(2);
  1537. let numberStr = val.toString()
  1538. let str = numberStr.split('.')
  1539. let str0=str[0].split('').reverse();
  1540. for (let i = 0; i < str0.length; i++) {
  1541. if ((i + 1) % 4 === 0) {
  1542. str0.splice(i, 0, ',')
  1543. }
  1544. }
  1545. str0.reverse()
  1546. let handleResult = ''
  1547. for (let j = 0; j < str0.length; j++) {
  1548. handleResult += str0[j]
  1549. }
  1550. return handleResult+'.'+str[1]
  1551. }else{
  1552. val=parseFloat(val).toFixed(2);
  1553. let numberStr = val.toString()
  1554. let str = numberStr.split('.')
  1555. let str0=str[0].substr(1).split('').reverse();
  1556. for (let i = 0; i < str0.length; i++) {
  1557. if ((i + 1) % 4 === 0) {
  1558. str0.splice(i, 0, ',')
  1559. }
  1560. }
  1561. str0.reverse()
  1562. let handleResult = ''
  1563. for (let j = 0; j < str0.length; j++) {
  1564. handleResult += str0[j]
  1565. }
  1566. return '-'+handleResult+'.'+str[1]
  1567. }
  1568. }else if(typeof val =='string'){
  1569. return val
  1570. }
  1571. else{
  1572. return 0
  1573. }
  1574. },
  1575. //变成货币格式
  1576. formatCurrency(val){
  1577. if(val){
  1578. let numberStr = val.toString()
  1579. let str = numberStr.split('').reverse()
  1580. for (let i = 0; i < str.length; i++) {
  1581. if ((i + 1) % 4 === 0) {
  1582. str.splice(i, 0, ',')
  1583. }
  1584. }
  1585. str.reverse()
  1586. let handleResult = ''
  1587. for (let j = 0; j < str.length; j++) {
  1588. handleResult += str[j]
  1589. }
  1590. return handleResult
  1591. }
  1592. }
  1593. }
  1594. }
  1595. </script>