Statistics.vue 48 KB

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