Statistics.vue 49 KB

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