dataDisplayStatistics.vue 41 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442
  1. <style lang="scss" scoped>
  2. .search-bar {
  3. display: flex;
  4. align-items: center;
  5. }
  6. .search-box p {
  7. display: inline-block;
  8. border: 1px solid #f2f2f2;
  9. border-radius: 5px;
  10. margin-right: 10px;
  11. padding: 5px 10px;
  12. cursor: pointer;
  13. }
  14. .tableTop{
  15. position: relative;
  16. padding-bottom: 15px;
  17. border-bottom: 1px solid #e0e0e0;
  18. .selectTime{
  19. margin-right: 20px;
  20. }
  21. .add{
  22. position: absolute;
  23. top: 0;
  24. right: 0;
  25. }
  26. }
  27. </style>
  28. <style>
  29. /* .data-display-statistics .ant-card-body {
  30. padding: 0 15px;
  31. } */
  32. .data-display-statistics .ant-col-6 {
  33. margin: 10px 0;
  34. }
  35. .data-display-statistics .ant-col-6 .ant-card-body {
  36. display: flex;
  37. justify-content: center;
  38. }
  39. .data-display-statistics .ant-col-6 p,
  40. .data-display-statistics .ant-col-6 span {
  41. text-align: center;
  42. line-height: 40px;
  43. font-size: 30px;
  44. font-weight: 600;
  45. color: red;
  46. margin: 0;
  47. }
  48. .search-box .ant-card-body {
  49. padding: 5px 15px;
  50. }
  51. .data-display-statistics .ant-col-6 .ant-card-body .styleElse {
  52. line-height: 60px;
  53. height: 40px;
  54. font-size: 16px;
  55. font-weight: 400;
  56. margin-left: 10px;
  57. }
  58. .ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
  59. display: none !important;
  60. }
  61. .yincang .ant-col-6 p {
  62. text-align: left;
  63. color: red;
  64. font-size: 16px;
  65. font-weight: 500;
  66. }
  67. .ant-table-thead div {
  68. font-weight: 700;
  69. }
  70. .tool-tip {
  71. position: absolute;
  72. top: 65px;
  73. right: 10px;
  74. }
  75. th div {
  76. white-space: nowrap;
  77. }
  78. </style>
  79. <template>
  80. <div class="data-statistics">
  81. <a-row class="image-list-heading vm-panel">
  82. <a-row type="flex" align="middle" justify="space-between" class="panel-body">
  83. <div class="search-bar" style="width:100%">
  84. <span>账户选择:</span>
  85. <treeselect :appId.sync="appId" />
  86. <span style="margin-left:10px">返点比例:</span>
  87. <a-input-number
  88. :min="1"
  89. :max="10"
  90. :step="0.1"
  91. v-model="discount"
  92. placeholder="请输入折扣"
  93. style="width:100px"
  94. />
  95. <a-button type="primary" style="margin:10px" @click="addUser">搜索</a-button>
  96. <a-button
  97. type="primary"
  98. icon="reload"
  99. @click="getDataReset"
  100. style="background-color:#67c23a;border-color:#67c23a"
  101. >刷新</a-button
  102. >
  103. <a-button type="primary" @click="getDataResetAll" style="color:white;margin-left:10px">重置</a-button>
  104. </div>
  105. </a-row>
  106. <a-row>
  107. <a-col :span="24">
  108. <a-card :bordered="false" class="search-box">
  109. <time-check
  110. @getAdd="getAdd"
  111. :startValue.sync="startValue"
  112. ref="timeCheck"
  113. ></time-check>
  114. </a-card>
  115. </a-col>
  116. </a-row>
  117. </a-row>
  118. <a-row :gutter="16" v-if="kuaishou">
  119. <a-col :sm="24" :md="12" :xl="12" :xxl="5">
  120. <lifting
  121. :kuaishou.sync="kuaishou"
  122. :active.sync="active"
  123. title="总消耗"
  124. typeName="cost"
  125. typeThan="costProportion"
  126. ></lifting>
  127. </a-col>
  128. <a-col :sm="24" :md="12" :xl="12" :xxl="5">
  129. <lifting
  130. :kuaishou.sync="kuaishou"
  131. :active.sync="active"
  132. title="折后消耗"
  133. typeName="discountCost"
  134. typeThan="discountCostProportion"
  135. ></lifting>
  136. </a-col>
  137. <a-col :sm="24" :md="12" :xl="12" :xxl="5">
  138. <lifting
  139. :kuaishou.sync="kuaishou"
  140. :active.sync="active"
  141. title="封面点击数"
  142. typeName="photoClick"
  143. typeThan="photoClickProportion"
  144. ></lifting>
  145. </a-col>
  146. <a-col :sm="24" :md="12" :xl="12" :xxl="5">
  147. <lifting
  148. :kuaishou.sync="kuaishou"
  149. :active.sync="active"
  150. title="封面曝光数"
  151. typeName="photoShow"
  152. typeThan="showProportion"
  153. ></lifting>
  154. </a-col>
  155. <a-col :sm="24" :md="12" :xl="12" :xxl="4">
  156. <lifting
  157. :kuaishou.sync="kuaishou"
  158. :active.sync="active"
  159. title="素材曝光数"
  160. typeName="aclick"
  161. typeThan="aClickProportion"
  162. ></lifting>
  163. </a-col>
  164. </a-row>
  165. <a-row :gutter="10">
  166. <a-col :span="24">
  167. <a-card
  168. style="width:100%"
  169. :tabList="tabListNoTitle"
  170. :activeTabKey="noTitleKey"
  171. @tabChange="key => onTabChange(key, 'noTitleKey')"
  172. >
  173. <div id="chart" style="width:100%;height:500px"></div>
  174. </a-card>
  175. </a-col>
  176. </a-row>
  177. <a-row :gutter="10" style="margin-top:10px">
  178. <a-col :span="24">
  179. <a-card style="width:100%;">
  180. <div class="tableTop"
  181. style="display:flex;margin-bottom:15px"
  182. v-show="
  183. role.roleCode == 'operator' ||
  184. role.roleCode == 'kuaishouOperationManager' ||
  185. role.roleCode == 'admin' ||
  186. role.roleCode == 'operationAssistant' ||
  187. role.roleCode == 'touTiaoOperationManager'
  188. "
  189. >
  190. <a-select
  191. style="width: 120px"
  192. v-model="statHour"
  193. @change="getElseData"
  194. allowClear
  195. v-if="active == 1 || active == 2"
  196. >
  197. <a-select-option v-for="item of 24" :key="item - 1" :value="item - 1">{{ item - 1 }}</a-select-option>
  198. </a-select>
  199. <a-button type="primary" @click="exportExcel" style="margin-left:15px">导出报表</a-button>
  200. <!-- <a-button type='primary' class="add" @click="customColumns" >自定义列</a-button> -->
  201. </div>
  202. <a-table
  203. :columns="columns"
  204. :dataSource="data"
  205. bordered
  206. id="outTable"
  207. :pagination="false"
  208. :scroll="{ x: 2500 }"
  209. ></a-table>
  210. <!-- <customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' /> -->
  211. </a-card>
  212. </a-col>
  213. </a-row>
  214. </div>
  215. </template>
  216. <script>
  217. import ARow from 'ant-design-vue/es/grid/Row'
  218. import ACol from 'ant-design-vue/es/grid/Col'
  219. import countTo from 'vue-count-to'
  220. import moment from 'moment'
  221. import { getAdvertiserList, getReportList, getStatistics } from '@api/statistics'
  222. import axios from 'axios'
  223. import lifting from './components/lifting'
  224. import timeCheck from './components/timeCheck'
  225. import Treeselect from './components/Treeselect.vue'
  226. import { getAction, postAction, postFile } from '@/api/manage'
  227. import { mapGetters } from 'vuex'
  228. import customColumn from './components/customColumn.vue'
  229. // 引入基本模板
  230. let echarts = require('echarts/lib/echarts')
  231. // 引入柱状图组件
  232. require('echarts/lib/chart/bar')
  233. require('echarts/lib/chart/pie')
  234. require('echarts/lib/chart/line')
  235. // 引入提示框和title组件
  236. require('echarts/lib/component/tooltip')
  237. require('echarts/lib/component/title')
  238. require('echarts/lib/component/graphic')
  239. require('echarts/lib/component/toolbox')
  240. require('echarts/lib/component/legend')
  241. var length = 0
  242. var active = 1
  243. const columns = [
  244. {
  245. title: '时间',
  246. dataIndex: 'date',
  247. align: 'center',
  248. width: 150,
  249. fixed:'left',
  250. customRender: function(text, record, index) {
  251. const obj = {
  252. children: text,
  253. attrs: {}
  254. }
  255. for (let i = 0; i < length; i++) {
  256. if (index == 0 && i == 0) {
  257. obj.attrs.rowSpan = length
  258. } else {
  259. if (index == i) {
  260. obj.attrs.rowSpan = 0
  261. }
  262. }
  263. }
  264. return obj
  265. }
  266. },
  267. {
  268. title: '账户Id',
  269. dataIndex: 'accountId',
  270. align: 'center',
  271. width: 250,
  272. fixed:'left',
  273. customRender: function(text, record, index) {
  274. const obj = {
  275. children: text,
  276. attrs: {}
  277. }
  278. if (active == 1) {
  279. for (let i = 0; i < length; i++) {
  280. if (index >= length - 3) {
  281. obj.attrs.colSpan = 2
  282. }
  283. }
  284. } else {
  285. for (let i = 0; i < length; i++) {
  286. if (index >= length - 1) {
  287. obj.attrs.colSpan = 2
  288. }
  289. }
  290. }
  291. return obj
  292. }
  293. },
  294. {
  295. title: '账户昵称',
  296. dataIndex: 'accountName',
  297. scopedSlots: { customRender: 'cost' },
  298. align: 'center',
  299. width: 250,
  300. fixed:'left',
  301. customRender: function(text, record, index) {
  302. const obj = {
  303. children: text,
  304. attrs: {}
  305. }
  306. if (active == 1) {
  307. for (let i = 0; i < length; i++) {
  308. if (index >= length - 3) {
  309. obj.attrs.colSpan = 0
  310. }
  311. }
  312. } else {
  313. for (let i = 0; i < length; i++) {
  314. if (index >= length - 1) {
  315. obj.attrs.colSpan = 0
  316. }
  317. }
  318. }
  319. return obj
  320. }
  321. },
  322. {
  323. title: '消耗(¥)',
  324. dataIndex: 'cost',
  325. scopedSlots: { customRender: 'cost' },
  326. align: 'center'
  327. },
  328. {
  329. title: '折后消耗(¥)',
  330. dataIndex: 'costY',
  331. align: 'center'
  332. },
  333. {
  334. title: '次留数',
  335. dataIndex: 'eventNextDayStay',
  336. scopedSlots: { customRender: 'eventNextDayStay' },
  337. align: 'center'
  338. },
  339. {
  340. title: '次留率',
  341. dataIndex: 'eventNextDayStayRatio',
  342. align: 'center'
  343. },
  344. {
  345. title: '封面展示',
  346. dataIndex: 'photoShow',
  347. align: 'center'
  348. },
  349. {
  350. title: '封面点击',
  351. dataIndex: 'photoClick',
  352. align: 'center'
  353. },
  354. {
  355. title: '素材曝光数',
  356. dataIndex: 'aclick',
  357. align: 'center'
  358. },
  359. {
  360. title: '封面点击率',
  361. dataIndex: 'photoClickRatio',
  362. align: 'center'
  363. },
  364. {
  365. title: 'cvr',
  366. dataIndex: 'cvr',
  367. align: 'center'
  368. },
  369. {
  370. title: 'cpm(¥)',
  371. dataIndex: 'cpm',
  372. align: 'center'
  373. },
  374. {
  375. title: '行为数',
  376. dataIndex: 'bClick',
  377. align: 'center'
  378. },
  379. {
  380. title: '转化数',
  381. dataIndex: 'formCount',
  382. align: 'center'
  383. },
  384. {
  385. title: '折前转化单价(¥)',
  386. dataIndex: 'beforeFormPrice',
  387. align: 'center'
  388. },
  389. {
  390. title: '折后转化单价(¥)',
  391. dataIndex: 'afterFormPrice',
  392. align: 'center'
  393. },
  394. {
  395. title: '注册数',
  396. dataIndex: 'eventRegister',
  397. align: 'center'
  398. },
  399. {
  400. title: '注册成本(¥)',
  401. dataIndex: 'eventRegisterCost',
  402. align: 'center'
  403. },
  404. {
  405. title: '单价区间',
  406. dataIndex: 'price',
  407. align: 'center',
  408. customRender: function(text, record, index) {
  409. const obj = {
  410. children: text,
  411. attrs: {}
  412. }
  413. for (let i = 0; i < length; i++) {
  414. if (index == 0 && i == 0) {
  415. obj.attrs.rowSpan = length
  416. } else {
  417. if (index == i) {
  418. obj.attrs.rowSpan = 0
  419. }
  420. }
  421. }
  422. return obj
  423. }
  424. }
  425. ]
  426. const columnsWu = [
  427. {
  428. title: '时间',
  429. dataIndex: 'date',
  430. align: 'center',
  431. width: 150,
  432.  fixed:'left',
  433. customRender: function(text, record, index) {
  434. const obj = {
  435. children: text,
  436. attrs: {}
  437. }
  438. for (let i = 0; i < length; i++) {
  439. if (index == 0 && i == 0) {
  440. obj.attrs.rowSpan = length
  441. } else {
  442. if (index == i) {
  443. obj.attrs.rowSpan = 0
  444. }
  445. }
  446. }
  447. return obj
  448. }
  449. },
  450. {
  451. title: '账户Id',
  452. dataIndex: 'accountId',
  453. align: 'center',
  454. width: 200,
  455. fixed:'left',
  456. customRender: function(text, record, index) {
  457. const obj = {
  458. children: text,
  459. attrs: {}
  460. }
  461. if (active == 1) {
  462. for (let i = 0; i < length; i++) {
  463. if (index >= length - 3) {
  464. obj.attrs.colSpan = 2
  465. }
  466. }
  467. } else {
  468. for (let i = 0; i < length; i++) {
  469. if (index >= length - 1) {
  470. obj.attrs.colSpan = 2
  471. }
  472. }
  473. }
  474. return obj
  475. }
  476. },
  477. {
  478. title: '账户昵称',
  479. dataIndex: 'accountName',
  480. scopedSlots: { customRender: 'cost' },
  481. align: 'center',
  482. width: 200,
  483. fixed:'left',
  484. customRender: function(text, record, index) {
  485. const obj = {
  486. children: text,
  487. attrs: {}
  488. }
  489. if (active == 1) {
  490. for (let i = 0; i < length; i++) {
  491. if (index >= length - 3) {
  492. obj.attrs.colSpan = 0
  493. }
  494. }
  495. } else {
  496. for (let i = 0; i < length; i++) {
  497. if (index >= length - 1) {
  498. obj.attrs.colSpan = 0
  499. }
  500. }
  501. }
  502. return obj
  503. }
  504. },
  505. {
  506. title: '消耗(¥)',
  507. dataIndex: 'cost',
  508. scopedSlots: { customRender: 'cost' },
  509. align: 'center'
  510. },
  511. {
  512. title: '折后消耗(¥)',
  513. dataIndex: 'costY',
  514. align: 'center'
  515. },
  516. {
  517. title: '封面展示',
  518. dataIndex: 'photoShow',
  519. align: 'center'
  520. },
  521. {
  522. title: '封面点击',
  523. dataIndex: 'photoClick',
  524. align: 'center'
  525. },
  526. {
  527. title: '素材曝光数',
  528. dataIndex: 'aclick',
  529. align: 'center'
  530. },
  531. {
  532. title: '封面点击率',
  533. dataIndex: 'photoClickRatio',
  534. align: 'center'
  535. },
  536. {
  537. title: 'cvr',
  538. dataIndex: 'cvr',
  539. align: 'center'
  540. },
  541. {
  542. title: 'cpm(¥)',
  543. dataIndex: 'cpm',
  544. align: 'center'
  545. },
  546. {
  547. title: '行为数',
  548. dataIndex: 'bClick',
  549. align: 'center'
  550. },
  551. {
  552. title: '转化数',
  553. dataIndex: 'formCount',
  554. align: 'center'
  555. },
  556. {
  557. title: '折前转化单价(¥)',
  558. dataIndex: 'beforeFormPrice',
  559. align: 'center'
  560. },
  561. {
  562. title: '折后转化单价(¥)',
  563. dataIndex: 'afterFormPrice',
  564. align: 'center'
  565. },
  566. {
  567. title: '注册数',
  568. dataIndex: 'eventRegister',
  569. align: 'center'
  570. },
  571. {
  572. title: '注册成本(¥)',
  573. dataIndex: 'eventRegisterCost',
  574. align: 'center'
  575. },
  576. {
  577. title: '单价区间',
  578. dataIndex: 'price',
  579. align: 'center',
  580. customRender: function(text, record, index) {
  581. const obj = {
  582. children: text,
  583. attrs: {}
  584. }
  585. for (let i = 0; i < length; i++) {
  586. if (index == 0 && i == 0) {
  587. obj.attrs.rowSpan = length
  588. } else {
  589. if (index == i) {
  590. obj.attrs.rowSpan = 0
  591. }
  592. }
  593. }
  594. return obj
  595. }
  596. }
  597. ]
  598. export default {
  599. name: 'data-display-statistics',
  600. components: {
  601. ACol,
  602. ARow,
  603. countTo,
  604. lifting,
  605. timeCheck,
  606. Treeselect,
  607. customColumn,
  608. },
  609. data: function() {
  610. return {
  611. title: '账户数据展示',
  612. show: true,
  613. data: [],
  614. columns:columnsWu,
  615. options: [],
  616. list: [],
  617. appId: [],
  618. statHour: null,
  619. keyValue: null,
  620. keyValueData: [],
  621. active: 1,
  622. startValue: [],
  623. allValue: [],
  624. discount: 1,
  625. duration: 1000,
  626. kuaishou: {
  627. aclick: 0,
  628. aClickProportion: 0,
  629. cost: 0,
  630. costProportion: 0,
  631. photoClick: 0,
  632. photoClickroportion: 0,
  633. photoShow: 0,
  634. showProportion: 0,
  635. discountCost: 0,
  636. discountCostProportion: 0
  637. },
  638. timeList: [
  639. //{ label: '今天', value: 1, show: true },
  640. { label: '昨天', value: 2, show: true },
  641. { label: '近一周', value: 3, show: true },
  642. { label: '近十五天', value: 4, show: true },
  643. { label: '近一月', value: 5, show: true },
  644. { label: '近三月', value: 6, show: true },
  645. { label: '近半年', value: 7, show: true },
  646. { label: '所有', value: 8, show: true }
  647. ],
  648. dataDetail: [],
  649. tabListNoTitle: [
  650. {
  651. key: 'cost',
  652. tab: '总消耗'
  653. },
  654. {
  655. key: 'discountCost',
  656. tab: '折后总消耗'
  657. },
  658. {
  659. key: 'photoClick',
  660. tab: '封面点击数'
  661. },
  662. {
  663. key: 'photoShow',
  664. tab: '封面曝光数'
  665. },
  666. {
  667. key: 'aclick',
  668. tab: '素材曝光数'
  669. }
  670. ],
  671. noTitleKey: 'cost',
  672. role: { roleCode: '' },
  673. statDate: '',
  674. visible:false,//自定义页面的打开
  675. listNum:[],
  676. scrollX:0,
  677. }
  678. },
  679. filters: {
  680. formatDate: function(value) {
  681. let date = new Date(value)
  682. let y = date.getFullYear()
  683. let MM = date.getMonth() + 1
  684. MM = MM < 10 ? '0' + MM : MM
  685. let d = date.getDate()
  686. d = d < 10 ? '0' + d : d
  687. let h = date.getHours()
  688. h = h < 10 ? '0' + h : h
  689. let m = date.getMinutes()
  690. m = m < 10 ? '0' + m : m
  691. let s = date.getSeconds()
  692. s = s < 10 ? '0' + s : s
  693. return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
  694. }
  695. },
  696. methods: {
  697. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  698. moment,
  699. //弹出框打开,自定义列
  700. customColumns() {
  701. this.visible = true
  702. this.listNum = [...this.columns]
  703. },
  704. closeCustomColumn(){
  705. this.visible=false;
  706. },
  707. //自定义之后修改父元素表头
  708. changeColumn(val){
  709. this.columns=[...val];
  710. if(this.columns.length> this.columnsFixd.length){
  711. this.scrollX=200*(this.columns.length-this.columnsFixd.length)
  712. }else{
  713. this.scrollX=0
  714. }
  715. },
  716. tableHandle() {
  717. // this.listNum = [...this.columns]
  718. // console.log(this.listNum.length, this.columns)
  719. if (this.listNum.length >= 9 || this.columns.length >= 9) {
  720. this.tableWidth = 120
  721. this.scrollX = this.columns.length * 120
  722. // console.log(this.scrollX)
  723. } else {
  724. this.scrollX = 0
  725. }
  726. },
  727. disabledDate(current) {
  728. return current && current > moment().endOf('day')
  729. },
  730. handleChange(value) {
  731. console.log(value)
  732. // this.appId = value
  733. },
  734. getElseData(value) {
  735. if(value){
  736. this.columns = columnsWu
  737. }else{
  738. this.columns = columns
  739. }
  740. this.getStatistics()
  741. },
  742. handleBlur() {
  743. console.log('blur')
  744. },
  745. handleFocus() {
  746. console.log('focus')
  747. if (this.appId.length > 0) {
  748. this.options = []
  749. for (let i = 0; i < this.list.length; i++) {
  750. for (let j = 0; j < this.appId.length; j++) {
  751. if (this.list[i].accountId == this.appId[j]) {
  752. this.options.push(this.list[i])
  753. }
  754. }
  755. }
  756. } else {
  757. this.options = this.lista
  758. }
  759. },
  760. search(value) {
  761. // console.log(value)
  762. this.options = []
  763. if (value != '') {
  764. this.options = this.list.filter(item => {
  765. var data = item.accountId + ' ' + item.authName + ' ' + item.advertiserName + ' ' + item.operationName
  766. return data.toLowerCase().indexOf(value.toLowerCase()) > -1
  767. })
  768. this.options = [...this.options]
  769. console.log(this.options)
  770. } else {
  771. if (this.appId.length > 0) {
  772. this.options = []
  773. for (let i = 0; i < this.list.length; i++) {
  774. for (let j = 0; j < this.appId.length; j++) {
  775. if (this.list[i].accountId == this.appId[j]) {
  776. this.options.push(this.list[i])
  777. }
  778. }
  779. }
  780. } else {
  781. this.options = this.list
  782. }
  783. }
  784. },
  785. getDataReset() {
  786. this.active = 1
  787. this.allValue = []
  788. this.$refs.timeCheck.active = 1
  789. this.addUser()
  790. },
  791. getDataResetAll() {
  792. this.active = 1
  793. this.allValue = []
  794. this.$refs.timeCheck.active = 1
  795. var that = this
  796. that.kuaishou.aclick = 0
  797. that.kuaishou.cost = 0
  798. that.kuaishou.photoClick = 0
  799. that.kuaishou.photoShow = 0
  800. that.kuaishou.discountCost = 0
  801. this.data = []
  802. this.appId = []
  803. this.drawPie(1, [])
  804. },
  805. addUser() {
  806. var that = this
  807. if (this.appId.length > 0) {
  808. if(that.active == 1){
  809. that.columns = columnsWu
  810. }else{
  811. that.columns = columns
  812. }
  813. var params = {}
  814. params.accountIds = JSON.stringify(that.appId)
  815. params.type = that.active
  816. params.discount = that.discount
  817. if (that.active == 9) {
  818. params.startDate = this.allValue[0]
  819. params.endDate = this.allValue[1]
  820. }
  821. getReportList(params).then(res => {
  822. if (res.success) {
  823. if (res.result) {
  824. that.kuaishou = res.result.summary.aclick?res.result.summary:{aclick:0,cost:0,photoClick:0,photoShow:0,discountCost:0}
  825. that.dataDetail = res.result.trend
  826. that.drawPie(that.noTitleKey, res.result.trend)
  827. } else {
  828. that.kuaishou.aclick = 0
  829. that.kuaishou.cost = 0
  830. that.kuaishou.photoClick = 0
  831. that.kuaishou.photoShow = 0
  832. that.kuaishou.discountCost = 0
  833. }
  834. }
  835. })
  836. that.getStatistics()
  837. } else {
  838. this.$message.error('请选择账户')
  839. }
  840. },
  841. getStatistics() {
  842. var params = {}
  843. params.accountIds = JSON.stringify(this.appId)
  844. params.type = this.active
  845. params.statHour = this.statHour
  846. params.discount = this.discount
  847. if (this.active == 9) {
  848. params.startDate = this.allValue[0]
  849. params.endDate = this.allValue[1]
  850. }
  851. this.data = []
  852. getStatistics(params).then(res => {
  853. console.log(res)
  854. if (res.success) {
  855. if (res.result.accountDetail) {
  856. this.statDate = res.result.statDate
  857. this.data = res.result.accountDetail.map((item, index) => {
  858. return {
  859. key: index,
  860. ...item,
  861. photoClickRatio: item.photoClickRatio ? (item.photoClickRatio * 100).toFixed(2) + '%' : 0 + '%',
  862. cpm: item.cpm ? item.cpm.toFixed(2) : 0,
  863. cost: item.cost.toFixed(2),
  864. cvr: item.cvr ? (item.cvr * 100).toFixed(2) + '%' : 0 + '%',
  865. costY: (item.cost / this.discount).toFixed(2),
  866. beforeFormPrice: item.formPrice
  867. ? item.formPrice.toFixed(2)
  868. : item.activationPrice
  869. ? item.activationPrice.toFixed(2)
  870. : 0,
  871. afterFormPrice: item.formPrice
  872. ? (item.formPrice / this.discount).toFixed(2)
  873. : item.activationPrice
  874. ? (item.activationPrice / this.discount).toFixed(2)
  875. : 0,
  876. date: this.statHour ? res.result.statDate + ' ' + this.statHour : res.result.statDate,
  877. formCount: item.formCount > 0 ? item.formCount : item.activationCount,
  878. eventRegister: item.eventRegister,
  879. eventRegisterCost: item.eventRegisterCost.toFixed(2),
  880. eventNextDayStayRatio:item.eventNextDayStayRatio?(item.eventNextDayStayRatio*100).toFixed(2) + '%' : 0 + '%'
  881. }
  882. })
  883. var index = this.data.length
  884. if (this.active == 1) {
  885. var allNow = {
  886. key: index + 1,
  887. ...res.result.now,
  888. photoClickRatio: res.result.now.photoClickRatio
  889. ? (res.result.now.photoClickRatio * 100).toFixed(2) + '%'
  890. : 0 + '%',
  891. cpm: res.result.now.cpm ? res.result.now.cpm.toFixed(2) : 0,
  892. cost: res.result.now.cost.toFixed(2),
  893. cvr: res.result.now.cvr ? (res.result.now.cvr * 100).toFixed(2) + '%' : 0 + '%',
  894. costY: (res.result.now.cost / this.discount).toFixed(2),
  895. accountId: '总计',
  896. beforeFormPrice: res.result.now.formPrice
  897. ? res.result.now.formPrice.toFixed(2)
  898. : res.result.now.activationPrice
  899. ? res.result.now.activationPrice.toFixed(2)
  900. : 0,
  901. afterFormPrice: res.result.now.formPrice
  902. ? (res.result.now.formPrice / this.discount).toFixed(2)
  903. : res.result.now.activationPrice
  904. ? (res.result.now.activationPrice / this.discount).toFixed(2)
  905. : 0,
  906. formCount: res.result.now.conversionNum,
  907. eventRegister: res.result.now.eventRegister,
  908. eventRegisterCost: res.result.now.eventRegisterCost.toFixed(2)
  909. }
  910. var allYesterday = {
  911. key: index + 2,
  912. ...res.result.yesterday,
  913. photoClickRatio: res.result.yesterday.photoClickRatio
  914. ? (res.result.yesterday.photoClickRatio * 100).toFixed(2) + '%'
  915. : 0 + '%',
  916. cpm: res.result.yesterday.cpm ? res.result.yesterday.cpm.toFixed(2) : 0,
  917. cost: res.result.yesterday.cost.toFixed(2),
  918. cvr: res.result.yesterday.cvr ? (res.result.yesterday.cvr * 100).toFixed(2) + '%' : 0 + '%',
  919. costY: (res.result.yesterday.cost / this.discount).toFixed(2),
  920. accountId: '昨日总计',
  921. beforeFormPrice: res.result.yesterday.formPrice
  922. ? res.result.yesterday.formPrice.toFixed(2)
  923. : res.result.yesterday.activationPrice
  924. ? res.result.yesterday.activationPrice.toFixed(2)
  925. : 0,
  926. afterFormPrice: res.result.yesterday.formPrice
  927. ? (res.result.yesterday.formPrice / this.discount).toFixed(2)
  928. : res.result.yesterday.activationPrice
  929. ? (res.result.yesterday.activationPrice / this.discount).toFixed(2)
  930. : 0,
  931. formCount:res.result.yesterday.conversionNum,
  932. eventRegister: res.result.yesterday.eventRegister,
  933. eventRegisterCost: res.result.yesterday.eventRegisterCost.toFixed(2)
  934. }
  935. var chainRatio = {
  936. key: index + 3,
  937. cost: (res.result.chainRatio.costProportion * 100).toFixed(2) + '%',
  938. photoShow: (res.result.chainRatio.showProportion * 100).toFixed(2) + '%',
  939. photoClick: (res.result.chainRatio.photoClickProportion * 100).toFixed(2) + '%',
  940. aclick: (res.result.chainRatio.aClickProportion * 100).toFixed(2) + '%',
  941. photoClickRatio: res.result.chainRatio.photoClickRatioProportion
  942. ? (res.result.chainRatio.photoClickRatioProportion * 100).toFixed(2) + '%'
  943. : 0.0 + '%',
  944. cvr: (res.result.chainRatio.cvrProportion * 100).toFixed(2) + '%',
  945. cpm: (res.result.chainRatio.cpmProportion * 100).toFixed(2) + '%',
  946. bClick: (res.result.chainRatio.bClickProportion * 100).toFixed(2) + '%',
  947. formCount: (res.result.chainRatio.nowConversionNumProportion* 100).toFixed(2) + '%',
  948. beforeFormPrice: (res.result.chainRatio.beforeConversionPriceProportion*100).toFixed(2) + '%',
  949. afterFormPrice: (res.result.chainRatio.afterConversionPriceProportion*100).toFixed(2) + '%',
  950. costY: (res.result.chainRatio.costProportion * 100).toFixed(2) + '%',
  951. eventRegister: (res.result.chainRatio.eventRegisterProportion * 100).toFixed(2) + '%',
  952. eventRegisterCost: (res.result.chainRatio.eventRegisterCostProportion * 100).toFixed(2) + '%',
  953. accountId: '环比'
  954. }
  955. this.data.push(allNow)
  956. this.data.push(allYesterday)
  957. this.data.push(chainRatio)
  958. } else {
  959. var allNow = {
  960. key: index + 1,
  961. ...res.result.ratioJson,
  962. photoClickRatio: res.result.ratioJson.photoClickRatio
  963. ? (res.result.ratioJson.photoClickRatio * 100).toFixed(2) + '%'
  964. : 0 + '%',
  965. cpm: res.result.ratioJson.cpm ? res.result.ratioJson.cpm.toFixed(2) : 0,
  966. cost: res.result.ratioJson.cost?res.result.ratioJson.cost.toFixed(2):0,
  967. cvr: res.result.ratioJson.cvr ? (res.result.ratioJson.cvr * 100).toFixed(2) + '%' : 0 + '%',
  968. costY: (res.result.ratioJson.cost / this.discount).toFixed(2),
  969. accountId: '总计',
  970. beforeFormPrice: res.result.ratioJson.formPrice
  971. ? res.result.ratioJson.formPrice.toFixed(2)
  972. : res.result.ratioJson.activationPrice
  973. ? res.result.ratioJson.activationPrice.toFixed(2)
  974. : 0,
  975. afterFormPrice: res.result.ratioJson.formPrice
  976. ? (res.result.ratioJson.formPrice / this.discount).toFixed(2)
  977. : res.result.ratioJson.activationPrice
  978. ? (res.result.ratioJson.activationPrice / this.discount).toFixed(2)
  979. : 0,
  980. formCount: res.result.ratioJson.conversions,
  981. beforeFormPrice: res.result.ratioJson.conversionPrice.toFixed(2),
  982. afterFormPrice: res.result.ratioJson.discountConversionPrice.toFixed(2),
  983. eventRegister: res.result.ratioJson.eventRegister,
  984. eventRegisterCost: res.result.ratioJson.eventRegisterCost.toFixed(2),
  985. eventNextDayStayRatio:res.result.ratioJson.eventNextDayStayRatio?(res.result.ratioJson.eventNextDayStayRatio*100).toFixed(2) + '%' : 0 + '%'
  986. }
  987. this.data.push(allNow)
  988. this.statDate = res.result.statDate
  989. }
  990. length = this.data.length
  991. } else {
  992. this.$message.error('暂无数据')
  993. }
  994. }
  995. })
  996. },
  997. getAdd(checked) {
  998. if (checked == 9) {
  999. if (this.startValue.length > 0 && this.startValue[0]) {
  1000. this.allValue[1] = moment(this.startValue[0]._d).format('YYYY-MM-DD')
  1001. this.allValue[0] = moment(this.startValue[1]._d).format('YYYY-MM-DD')
  1002. }
  1003. } else {
  1004. this.startValue = []
  1005. this.allValue = []
  1006. }
  1007. this.active = checked
  1008. active = checked
  1009. if(this.active == 1){
  1010. this.columns = columnsWu
  1011. }else{
  1012. this.columns = columns
  1013. }
  1014. this.addUser(checked)
  1015. },
  1016. onTabChange(key, type) {
  1017. console.log(key, type)
  1018. this[type] = key
  1019. if (type == 'noTitleKey') {
  1020. this.drawPie(key, this.dataDetail)
  1021. }
  1022. },
  1023. drawPie(type, data) {
  1024. console.log(type)
  1025. var dataLegend = []
  1026. var dataLength = []
  1027. var dataElse = []
  1028. var dataDate = []
  1029. var that = this
  1030. if (this.active == 1 || this.active == 2) {
  1031. dataDate = data.map(item => {
  1032. return item.statHour
  1033. })
  1034. } else {
  1035. dataDate = data.map(item => {
  1036. return item.statDate
  1037. })
  1038. }
  1039. dataLength = data.map(item => {
  1040. return item[type]
  1041. })
  1042. if (type == 'cost') {
  1043. dataLegend = ['总消耗']
  1044. dataElse = data.map(item => {
  1045. if (item.now) {
  1046. return { proportion: (item.now.costProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1047. } else {
  1048. return { proportion: 0, statHour: item.statHour }
  1049. }
  1050. })
  1051. } else if (type == 'photoClick') {
  1052. dataLegend = ['封面点击数']
  1053. dataElse = data.map(item => {
  1054. if (item.now) {
  1055. return { proportion: (item.now.photoClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1056. } else {
  1057. return { proportion: 0, statHour: item.statHour }
  1058. }
  1059. })
  1060. } else if (type == 'photoShow') {
  1061. dataLegend = ['封面曝光数']
  1062. dataElse = data.map(item => {
  1063. if (item.now) {
  1064. return { proportion: (item.now.showProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1065. } else {
  1066. return { proportion: 0, statHour: item.statHour }
  1067. }
  1068. })
  1069. } else if (type == 'aclick') {
  1070. dataLegend = ['素材曝光数']
  1071. dataElse = data.map(item => {
  1072. if (item.now) {
  1073. return { proportion: (item.now.aClickProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1074. } else {
  1075. return { proportion: 0, statHour: item.statHour }
  1076. }
  1077. })
  1078. } else if (type == 'discountCost') {
  1079. dataLegend = ['折后总消耗']
  1080. dataElse = data.map(item => {
  1081. if (item.now) {
  1082. return { proportion: (item.now.discountCostProportion * 100).toFixed(2) + '%', statHour: item.statHour }
  1083. } else {
  1084. return { proportion: 0, statHour: item.statHour }
  1085. }
  1086. })
  1087. dataLength = data.map(item => {
  1088. return (item.cost / this.discount).toFixed(2)
  1089. })
  1090. }
  1091. console.log(dataLength, 134123)
  1092. var series
  1093. if (this.active == 1) {
  1094. dataLegend = ['今天', '昨天']
  1095. series = [
  1096. {
  1097. name: dataLegend[0],
  1098. type: 'line',
  1099. color: '#9933ff',
  1100. smooth: true,
  1101. symbol: 'circle',
  1102. symbolSize: 1,
  1103. lineStyle: {
  1104. normal: {
  1105. width: 2,
  1106. color: '#9933ff'
  1107. }
  1108. },
  1109. itemStyle: {
  1110. borderColor: '#ffffff',
  1111. borderWidth: 3
  1112. },
  1113. data: data.map(item => {
  1114. if (item.now) {
  1115. return item.now[type]
  1116. } else {
  1117. return 0
  1118. }
  1119. })
  1120. },
  1121. {
  1122. name: dataLegend[1],
  1123. type: 'line',
  1124. color: '#0bcd74',
  1125. smooth: true,
  1126. symbol: 'circle',
  1127. symbolSize: 1,
  1128. lineStyle: {
  1129. normal: {
  1130. width: 2,
  1131. color: '#0bcd74'
  1132. }
  1133. },
  1134. itemStyle: {
  1135. borderColor: '#ffffff',
  1136. borderWidth: 3
  1137. },
  1138. data: dataLength
  1139. }
  1140. ]
  1141. } else {
  1142. series = [
  1143. {
  1144. name: dataLegend[0],
  1145. type: 'line',
  1146. color: '#0bcd74',
  1147. smooth: true,
  1148. symbol: 'circle',
  1149. symbolSize: 1,
  1150. lineStyle: {
  1151. normal: {
  1152. width: 2,
  1153. color: '#0bcd74'
  1154. }
  1155. },
  1156. itemStyle: {
  1157. borderColor: '#ffffff',
  1158. borderWidth: 3
  1159. },
  1160. data: dataLength
  1161. }
  1162. ]
  1163. }
  1164. var option = {
  1165. backgroundColor: '#fff',
  1166. toolbox: {
  1167. show: true,
  1168. feature: {
  1169. dataView: { readOnly: false }
  1170. }
  1171. },
  1172. tooltip: {
  1173. trigger: 'axis',
  1174. formatter: function(params) {
  1175. var index = dataElse.findIndex(v => v.statHour == params[0].name)
  1176. var da = null
  1177. if (index >= 0) {
  1178. da = dataElse[index].proportion
  1179. }
  1180. if (that.active == 1) {
  1181. if (params.length > 1) {
  1182. return `${params[0].marker}今天${params[0].name}时:${params[0].data} <br/>
  1183. ${params[1].marker}昨天${params[1].name}时:${params[1].data} <br/>
  1184. 环比:${da} <br/> `
  1185. } else {
  1186. return `${params[0].marker}时间:${params[0].name} <br/>
  1187. 数值:${params[0].data} `
  1188. }
  1189. } else {
  1190. return `${params[0].marker}时间:${params[0].name} <br/>
  1191. 数值:${params[0].data} `
  1192. }
  1193. }
  1194. },
  1195. legend: {
  1196. data: dataLegend
  1197. },
  1198. grid: {
  1199. left: '2%',
  1200. right: '2%',
  1201. bottom: '2%',
  1202. containLabel: true
  1203. },
  1204. xAxis: {
  1205. type: 'category',
  1206. data: dataDate,
  1207. boundaryGap: false,
  1208. // 坐标轴线
  1209. axisLine: {
  1210. show: false,
  1211. lineStyle: {
  1212. color: '#999'
  1213. }
  1214. },
  1215. // 分割线
  1216. splitLine: {
  1217. show: true,
  1218. lineStyle: {
  1219. type: 'dashed',
  1220. color: '#e5e5e5'
  1221. }
  1222. }
  1223. },
  1224. yAxis: {
  1225. type: 'value',
  1226. axisLine: {
  1227. show: false,
  1228. lineStyle: {
  1229. color: '#999'
  1230. }
  1231. },
  1232. splitLine: {
  1233. lineStyle: {
  1234. type: 'dashed',
  1235. color: '#e5e5e5'
  1236. }
  1237. }
  1238. },
  1239. series: series
  1240. }
  1241. var chart = echarts.init(document.getElementById('chart'))
  1242. chart.clear()
  1243. chart.setOption(option, true)
  1244. window.onresize = function() {
  1245. chart.resize()
  1246. }
  1247. },
  1248. getDate() {
  1249. let date = new Date()
  1250. let y = date.getFullYear()
  1251. let MM = date.getMonth() + 1
  1252. MM = MM < 10 ? '0' + MM : MM
  1253. let d = date.getDate()
  1254. d = d < 10 ? '0' + d : d
  1255. let h = date.getHours() - 1
  1256. h = h < 10 ? '0' + h : h
  1257. if (this.active == 1) {
  1258. if (this.statHour) {
  1259. return y + '-' + MM + '-' + d
  1260. } else {
  1261. return y + '-' + MM + '-' + d + ' ' + h
  1262. }
  1263. } else {
  1264. return y + '-' + MM + '-' + (d - 1)
  1265. }
  1266. },
  1267. exportExcel() {
  1268. var title = ''
  1269. if (this.active == 1) {
  1270. if (this.statHour) {
  1271. title = this.getDate() + ' ' + this.statHour + '时数据报表'
  1272. } else {
  1273. title = this.getDate() + '时数据报表'
  1274. }
  1275. } else if (this.active == 2) {
  1276. title = this.getDate() + '数据报表'
  1277. } else {
  1278. title = this.statDate + '数据报表'
  1279. }
  1280. const borderAll = {
  1281. //单元格外侧框线
  1282. top: {
  1283. style: 'thin'
  1284. },
  1285. bottom: {
  1286. style: 'thin'
  1287. },
  1288. left: {
  1289. style: 'thin'
  1290. },
  1291. right: {
  1292. style: 'thin'
  1293. }
  1294. }
  1295. // var opt = {
  1296. // rowIndex: 4
  1297. // } //开头空4行
  1298. var sheet = XLSX2.utils.table_to_sheet(document.getElementById('outTable'))
  1299. var sheetName = ['D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O']
  1300. // sheet['A2'].s = {
  1301. // alignment: {
  1302. // horizontal: 'center',
  1303. // vertical: 'center'
  1304. // }
  1305. // // fill: {
  1306. // // fgColor: {rgb: "008000"},
  1307. // // },
  1308. // }
  1309. // for (let i = 0; i < 3; i++) {
  1310. // sheet['B' + (length + 1 - i)].s = {
  1311. // alignment: {
  1312. // horizontal: 'center',
  1313. // vertical: 'center'
  1314. // }
  1315. // }
  1316. // }
  1317. // for (let i = 0; i < sheetName.length; i++) {
  1318. // for (let j = 2; j < length + 2; j++) {
  1319. // console.log(sheetName[i] + j + '')
  1320. // var a = sheetName[i] + j + ''
  1321. // console.log(a)
  1322. // sheet[a].t = 'n'
  1323. // }
  1324. // }
  1325. for (var i in sheet) {
  1326. if (i == '!ref' || i == '!merges' || i == '!cols') {
  1327. } else {
  1328. sheet[i + ''].s = {
  1329. border: borderAll,
  1330. alignment: {
  1331. horizontal: 'center',
  1332. vertical: 'center'
  1333. }
  1334. // fill: {
  1335. // fgColor: { rgb: 'FFFF00' }
  1336. // }
  1337. }
  1338. sheet[i + ''].t = 'n'
  1339. }
  1340. }
  1341. //["!merges"]这个属性是专门用来进行单元格合并的
  1342. // sheet['!merges'].push({
  1343. // //如果不为空push 为空 = 赋值
  1344. // //合并单元格 index都从0开始
  1345. // s: {
  1346. // //s开始
  1347. // c: 0, //开始列
  1348. // r: 0 //开始行
  1349. // },
  1350. // e: {
  1351. // //e结束
  1352. // c: 12, //结束列
  1353. // r: 3 //结束行
  1354. // }
  1355. // })
  1356. sheet['!cols'] = [
  1357. {
  1358. wpx: 100
  1359. },
  1360. {
  1361. wpx: 100
  1362. },
  1363. {
  1364. wpx: 100
  1365. },
  1366. {
  1367. wpx: 100
  1368. },
  1369. {
  1370. wpx: 100
  1371. },
  1372. {
  1373. wpx: 100
  1374. },
  1375. {
  1376. wpx: 100
  1377. },
  1378. {
  1379. wpx: 100
  1380. },
  1381. {
  1382. wpx: 100
  1383. },
  1384. {
  1385. wpx: 100
  1386. },
  1387. {
  1388. wpx: 100
  1389. },
  1390. {
  1391. wpx: 100
  1392. },
  1393. {
  1394. wpx: 100
  1395. },
  1396. {
  1397. wpx: 100
  1398. },
  1399. {
  1400. wpx: 100
  1401. },
  1402. {
  1403. wpx: 100
  1404. }
  1405. ] //单元格列宽
  1406. openDownloadDialog(sheet2blob(sheet), title + '.xlsx')
  1407. }
  1408. },
  1409. watch: {},
  1410. distoryed() {},
  1411. mounted: function() {
  1412. this.$nextTick(() => {
  1413. getAction('/sys/user/getRoleInfo', { userId: this.userInfo().id }).then(res => {
  1414. this.role = res
  1415. })
  1416. })
  1417. }
  1418. }
  1419. </script>