accountReport.vue 55 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492
  1. <template>
  2. <div class="accountReport">
  3. <!-- 操作区间 -->
  4. <div class="optionLine">
  5. <span>项目选择:</span>
  6. <a-tree-select
  7. v-model="treeValue"
  8. show-search
  9. style="width: 600px;height:30px"
  10. :dropdownMatchSelectWidth='true'
  11. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  12. tree-checkable
  13. searchPlaceholder='请输入账户关键字搜索'
  14. :show-checked-strategy="SHOW_PARENT"
  15. placeholder="请选择项目和账户或搜索账户关键字"
  16. treeNodeFilterProp="title"
  17. :allowClear="true"
  18. @change="treeChange"
  19. @search="treeSearch"
  20. @select="treeSelect"
  21. :maxTagCount='1'
  22. :tree-data="treeData"
  23. :filterOption='filterOption'
  24. >
  25. <!-- <a-tree-select-node v-for="(item) in treeData" :key="item.key" :value="item.value" :title="item.title">
  26. <a-tree-select-node v-for="(ele) in item.children" :key="ele.key" :value="ele.value" :title="ele.title" >
  27. </a-tree-select-node>
  28. </a-tree-select-node> -->
  29. </a-tree-select>
  30. <div style="float:right" @click="opendate">
  31. <DatePicker :openOptions='openOptions' :left=left :parentDate='dateValue' />
  32. </div>
  33. <div class="optionTow">
  34. <div class="optItem">
  35. <span>折扣:</span>
  36. <a-input-number :min="0" :max="10" :step="0.1" v-model="discountSelect" :disabled="discountDisabled" @change="discountChange" />
  37. </div>
  38. <div class="optItem">
  39. <span>返点比例:</span>
  40. <a-input-number :min="0" :max="10" :step="0.1" v-model="rebateProp" :disabled="rebatePropDisabled" @change="rebatePropChange" />
  41. </div>
  42. <div class="btn">
  43. <a-button type="primary" @click="searchgetData" :disabled='searchDisabled' class="mybtn">查询</a-button>
  44. <a-button type="primary" @click="resetgetData" :disabled='resetDisabled' class="mybtn">重置</a-button>
  45. </div>
  46. </div>
  47. </div>
  48. <!-- 五个块 -->
  49. <div class="show">
  50. <div class="showBox">
  51. <div class="title">
  52. <div class="infotitle">总消耗</div>
  53. <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
  54. <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
  55. <span class="icon">
  56. <a-icon type="exclamation-circle" />
  57. </span>
  58. </a-tooltip>
  59. </div>
  60. <div class="infoNum">¥
  61. <span class="red">{{costLink.cost | decimalsHandle }}</span>
  62. <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')" ><span class="huanbi">环比: </span> {{ costLink.CostSumLink|toPercentage }}</span>
  63. </div>
  64. </div>
  65. <div class="showBox">
  66. <div class="title">
  67. <div class="infotitle">折后消耗</div>
  68. <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
  69. <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
  70. <span class="icon">
  71. <a-icon type="exclamation-circle" />
  72. </span>
  73. </a-tooltip>
  74. </div>
  75. <div class="infoNum">¥
  76. <span class="red">{{discountCostLink.discountCost | decimalsHandle }}</span>
  77. <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ discountCostLink.discountCostLink|toPercentage }}</span>
  78. </div>
  79. </div>
  80. <div class="showBox">
  81. <div class="title">
  82. <div class="infotitle">点击数</div>
  83. <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
  84. <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
  85. <span class="icon">
  86. <a-icon type="exclamation-circle" />
  87. </span>
  88. </a-tooltip>
  89. </div>
  90. <div class="infoNum">
  91. <span class="red">{{clickLink.click | formatCurrency }}</span>
  92. <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ clickLink.clickLink|toPercentage }}</span>
  93. </div>
  94. </div>
  95. <div class="showBox">
  96. <div class="title">
  97. <div class="infotitle">展示数</div>
  98. <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
  99. <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
  100. <span class="icon">
  101. <a-icon type="exclamation-circle" />
  102. </span>
  103. </a-tooltip>
  104. </div>
  105. <div class="infoNum">
  106. <span class="red">{{showNumLink.showNum | formatCurrency }}</span>
  107. <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ showNumLink.showNumLink|toPercentage }}</span>
  108. </div>
  109. </div>
  110. <div class="showBox">
  111. <div class="title">
  112. <div class="infotitle">转化数</div>
  113. <a-tooltip v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')">
  114. <template slot="title">{{dateValue[0].format('HH:00')}}点之前所有数据对比</template>
  115. <span class="icon">
  116. <a-icon type="exclamation-circle" />
  117. </span>
  118. </a-tooltip>
  119. </div>
  120. <div class="infoNum">
  121. <span class="red">{{convertNumLink.convertNum | formatCurrency }}</span>
  122. <span class="green" v-if="dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')"><span class="huanbi">环比: </span> {{ convertNumLink.convertNumLink|toPercentage }}</span>
  123. </div>
  124. </div>
  125. </div>
  126. <!-- 图表区域 -->
  127. <div class="chartBox">
  128. <a-tabs default-active-key="cost" @change="callback" >
  129. <a-tab-pane key="cost" tab="总消耗">
  130. </a-tab-pane>
  131. <a-tab-pane key="discountCost" tab="折后消耗">
  132. </a-tab-pane>
  133. <a-tab-pane key="click" tab="点击数" >
  134. </a-tab-pane>
  135. <a-tab-pane key="showNum" tab="展示数">
  136. </a-tab-pane>
  137. <a-tab-pane key="zhuanhua" tab="转化数">
  138. </a-tab-pane>
  139. </a-tabs>
  140. <div id="sectionChart" style='width:100%;height:300px' ref="sectionChart" ></div>
  141. <!-- <div id="noData" v-else style='width:100%;height:300px'>暂无数据</div> -->
  142. </div>
  143. <!-- 报表区域 -->
  144. <div class="tableBox">
  145. <div class="tableTop">
  146. <a-tooltip>
  147. <template slot="title">
  148. 日期选择具体某一天之后,这里可以查看具体的时间段数据哦~
  149. </template>
  150. <a-select placeholder="请选择具体时间段" style="width: 160px" @change="timeChange" v-model='timeDefaultValue' label-in-value class="selectTime" v-show="dateValue[1].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')" :disabled='accountId.length==0'>
  151. <a-select-option v-for="(i,index) in 24 " :key="index" :value="index" >{{index>=10 ? `00:00-${index}:59` :`00:00-0${index}:59`}}</a-select-option>
  152. </a-select>
  153. </a-tooltip>
  154. <a-button type='primary' class="export" @click="exportExcel">导出报表</a-button>
  155. <a-button type='primary' class="add" @click="customColumns" >自定义列</a-button>
  156. </div>
  157. <a-table
  158. size="middle"
  159. :columns="columns"
  160. :dataSource="tableData"
  161. bordered
  162. id="outTable"
  163. :pagination="false"
  164. :scroll="{ x: scrollX }"
  165. :loading="loading"
  166. ref="accountTable"
  167. :width="tableWidth"
  168. @change="sort"
  169. style="word-break: break-all;font-size:16px;font-weight:600"
  170. >
  171. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  172. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  173. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  174. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  175. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  176. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  177. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  178. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  179. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  180. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  181. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  182. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  183. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  184. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  185. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  186. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  187. <span slot="form" slot-scope="form">{{ form | formatCurrency }}</span>
  188. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  189. <span slot="activePayAmount" slot-scope="activePayAmount">{{ activePayAmount | formatCurrency }}</span>
  190. <span
  191. slot="play25FeedBreakRate"
  192. slot-scope="play25FeedBreakRate"
  193. >{{ play25FeedBreakRate | toPercentage }}</span>
  194. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  195. <!-- 新加数据 -->
  196. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  197. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  198. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  199. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  200. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  201. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  202. <span
  203. slot="installFinishRate"
  204. slot-scope="installFinishRate"
  205. >{{ installFinishRate | toPercentage }}</span>
  206. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  207. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  208. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  209. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  210. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  211. <span
  212. slot="gameAddictionCost"
  213. slot-scope="gameAddictionCost"
  214. >{{ gameAddictionCost | decimalsHandle }}</span>
  215. <span
  216. slot="downloadFinishCost"
  217. slot-scope="downloadFinishCost"
  218. >{{ downloadFinishCost | decimalsHandle }}</span>
  219. <span
  220. slot="downloadStartCost"
  221. slot-scope="downloadStartCost"
  222. >{{ downloadStartCost | decimalsHandle }}</span>
  223. <span
  224. slot="installFinishCost"
  225. slot-scope="installFinishCost"
  226. >{{ installFinishCost | decimalsHandle }}</span>
  227. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  228. <!-- -->
  229. <span
  230. slot="downloadStartRate"
  231. slot-scope="downloadStartRate"
  232. >{{ downloadStartRate | toPercentage }}</span>
  233. <span
  234. slot="downloadFinishRate"
  235. slot-scope="downloadFinishRate"
  236. >{{ downloadFinishRate | toPercentage }}</span>
  237. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  238. <span
  239. slot="activeRegisterRate"
  240. slot-scope="activeRegisterRate"
  241. >{{ activeRegisterRate | toPercentage }}</span>
  242. <span
  243. slot="gameAddictionRate"
  244. slot-scope="gameAddictionRate"
  245. >{{ gameAddictionRate | toPercentage }}</span>
  246. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  247. </a-table>
  248. </div>
  249. <customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='1' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
  250. </div>
  251. </template>
  252. <script>
  253. import moment from 'moment';
  254. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  255. import { TreeSelect } from 'ant-design-vue';
  256. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  257. // const SHOW_PARENT = TreeSelect.SHOW_ALL;
  258. import DatePicker from '@/components/DatePicker.vue'
  259. import customColumn from './components/customColumn.vue'
  260. // 引入基本模板
  261. var echarts = require('echarts')
  262. // 引入柱状图组件
  263. require('echarts/lib/chart/bar')
  264. require('echarts/lib/chart/pie')
  265. require('echarts/lib/chart/line')
  266. // 引入提示框和title组件
  267. require('echarts/lib/component/tooltip')
  268. require('echarts/lib/component/title')
  269. require('echarts/lib/component/graphic')
  270. require('echarts/lib/component/toolbox')
  271. require('echarts/lib/component/legend')
  272. let sectionOption={
  273. tooltip: {
  274. trigger: 'axis',
  275. axisPointer: {
  276. // 坐标轴指示器,坐标轴触发有效
  277. type: 'line', // 默认为直线,可选为:'line' | 'shadow',
  278. }, 
  279. },
  280. legend: {
  281. data: []
  282. },
  283. grid: {
  284. left: '2%',
  285. right: '2%',
  286. bottom: '0%',
  287. top: '12%',
  288. containLabel: true
  289. },
  290. xAxis: [
  291. {
  292. type: 'category',
  293. data: [],
  294. axisTick: {
  295. alignWithLabel: true
  296. }
  297. }
  298. ],
  299. yAxis: [
  300. {
  301. type: 'value',
  302. show: true
  303. }
  304. ],
  305. series: [
  306. {
  307. name: '',
  308. type: 'line',
  309. smooth: true,
  310. data: [],
  311. color:'#32CD32'
  312. },
  313. {
  314. name: '',
  315. type: 'line',
  316. smooth: true,
  317. data: [],
  318. color:'#8A2BE2'
  319. },
  320. {
  321. name: '环比',
  322. type: 'line',
  323. smooth: true,
  324. data: [],
  325. color:'rgba(0,0,0,0)'
  326. }
  327. ]
  328. }
  329. let length=0
  330. const columnsFixd = [
  331. {
  332. title: '时间',
  333. dataIndex: 'date',
  334. scopedSlots: { customRender: 'date' },
  335. align: 'center',
  336. key:'date',
  337. width:200,
  338. fixed:'left',
  339. },
  340. {
  341. title: '账户ID',
  342. dataIndex: 'accountId',
  343. align: 'center',
  344. width: 200,
  345. fixed:'left',
  346. scopedSlots: { customRender: 'accountId' }
  347. },
  348. {
  349. title: '账户昵称',
  350. dataIndex: 'authName',
  351. align: 'center',
  352. width: 200,
  353. fixed:'left',
  354. },
  355. ]
  356. const initVariableColimns=[
  357. {
  358. title: '消耗(元)',
  359. dataIndex: 'cost',
  360. scopedSlots: { customRender: 'cost' },
  361. align: 'center',
  362. sorter: (a,b)=>{}
  363. },
  364. {
  365. title: '点击数',
  366. dataIndex: 'clickMaterial',
  367. align: 'center',
  368. scopedSlots: { customRender: 'clickMaterial' },
  369. sorter: (a,b)=>{}
  370. // (a, b) => a.clickMaterial - b.clickMaterial
  371. },
  372. {
  373. title: '点击率',
  374. dataIndex: 'ctr',
  375. align: 'center',
  376. scopedSlots: { customRender: 'ctr' },
  377. sorter: (a,b)=>{}
  378. },
  379. {
  380. title: '展示数',
  381. dataIndex: 'showMaterial',
  382. align: 'center',
  383. scopedSlots: { customRender: 'showMaterial' },
  384. sorter: (a,b)=>{}
  385. },
  386. {
  387. title: '平均千次展现费用(元)',
  388. dataIndex: 'cpm',
  389. tip: '广告平均每一千次展现所付出的费用,计算公式是:总花费/展示数*1000',
  390. align: 'center',
  391. scopedSlots: { customRender: 'cpm' },
  392. sorter: (a,b)=>{}
  393. },
  394. {
  395. title: '平均点击单价(元)',
  396. dataIndex: 'cpc',
  397. tip: '广告主为每次点击付出的费用成本,计算公式是:总花费/点击数',
  398. align: 'center',
  399. scopedSlots: { customRender: 'cpc' },
  400. sorter: (a,b)=>{}
  401. }
  402. ]
  403. let initDay ={
  404. x:[],
  405. today:{
  406. y:[],
  407. name:'今天'
  408. },
  409. yesterday:{
  410. y:[],
  411. name:'昨天'
  412. },
  413. huanbi:{
  414. name:'环比',
  415. y:[]
  416. }
  417. }
  418. export default {
  419. components:{
  420. DatePicker,
  421. customColumn,
  422. },
  423. data() {
  424. return {
  425. todayDate:moment(),
  426. moment,
  427. //账户的数据
  428. accountId:[],
  429. mediaId:'',//媒体类型
  430. //折扣数值
  431. discountSelect:1.0,
  432. discountDisabled:false,
  433. //返点比例
  434. rebateProp:1.0,
  435. rebatePropDisabled:false,
  436. discount:0,
  437. left:0,
  438. //treeselect的参数
  439. treeValue: [],
  440. treeData: [],
  441. SHOW_PARENT,
  442. //top区域数据
  443. discountCostLink:{},
  444. showNumLink:{},
  445. clickLink:{},
  446. costLink:{},
  447. convertNumLink:{},
  448. //日期矿打开
  449. openOptions:false,
  450. //子元素的数据存储
  451. type:1, //这个没用但是不能删 请求类型
  452. dateValue:[moment(),moment()],
  453. //处理按钮禁用
  454. searchDisabled:false,
  455. refreshDisabled:false,
  456. resetDisabled:false,
  457. //echart区域的tab
  458. tabKey:'cost',
  459. sectionOption:JSON.parse(JSON.stringify(sectionOption)),
  460. tabCost:{},
  461. tabClick:{},
  462. tabShowNum:{},
  463. tabDiscountCost:{},
  464. tabconvertNum:{},
  465. //table的数据
  466. timeSelectValue:23,//table上选择时间
  467. timeValueString:'',
  468. timeDefaultValue:undefined,
  469. visible:false,//自定义页面的打开
  470. columns:[...columnsFixd,...initVariableColimns] ,//table的表头
  471. columnsFixd,
  472. tableData:[],
  473. scrollX:0,
  474. tableWidth: '',//设置表格的列宽
  475. loading:false,
  476. target:'cost',//默认消耗排序
  477. order:'desc',//默认降序
  478. listNum:[],
  479. myChart:{},
  480. chartData:[],
  481. }
  482. },
  483. watch:{
  484. type(n,o){
  485. },
  486. dateValue(newName,oldName){
  487. // console.log(newName,oldName)
  488. this.timeValueString=undefined;
  489. this.timeSelectValue=23;
  490. this.timeDefaultValue =''
  491. if(newName[0].format('YYYY-MM-DD')==oldName[0].format('YYYY-MM-DD') || newName[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  492. }else{
  493. this.searchgetData();
  494. }
  495. },
  496. },
  497. methods: {
  498. //项目改变后的事件
  499. treeChange(val) {
  500. // console.log(this.treeData)
  501. console.log(val)
  502. this.accountId = [];
  503. //选择一个后禁用其他
  504. if(val.length==1){
  505. if(val[0]*1){
  506. let selectindex=0
  507. this.treeData.forEach((ele,index)=>{
  508. if(ele.children){
  509. ele.children.map((item,ind)=>{
  510. if(item.value==val[0]){
  511. selectindex=index;
  512. this.mediaId=ele.mediaId
  513. }
  514. })
  515. }
  516. });
  517. // console.log(selectindex)
  518. if(selectindex ||selectindex==0){
  519. this.treeData.forEach((ele,index)=>{
  520. if(index!=selectindex){
  521. ele.disableCheckbox = true;
  522. if(ele.children){
  523. ele.children.map((item,ind)=>{
  524. item.disableCheckbox = true;
  525. })
  526. }
  527. }
  528. })
  529. }
  530. }else{
  531. // console.log(1)
  532. this.treeData.forEach((ele,index)=>{
  533. if(ele.value!=val[0]){
  534. ele.disableCheckbox = true;
  535. if(ele.children){
  536. ele.children.forEach((item,ind)=>{
  537. item.disableCheckbox = true;
  538. })
  539. }
  540. }
  541. if(ele.value==val[0]){
  542. this.mediaId=ele.mediaId
  543. }
  544. })
  545. }
  546. // console.log(this.mediaId)
  547. if(this.mediaId=='1'){
  548. this.discountDisabled=true;
  549. this.rebatePropDisabled=false;
  550. this.discount=this.rebateProp;
  551. }else{
  552. this.rebatePropDisabled=true;
  553. this.discountDisabled=false;
  554. this.discount=this.discountSelect;
  555. }
  556. }
  557. if(val.length==0){
  558. this.treeData.forEach((ele,index)=>{
  559. ele.disableCheckbox = false;
  560. this.mediaId=ele.mediaId;
  561. if(ele.children){
  562. ele.children.forEach((item,ind)=>{
  563. item.disableCheckbox = false;
  564. })
  565. }
  566. });
  567. this.rebatePropDisabled=false;
  568. this.discountDisabled=false;
  569. this.discount=1.0
  570. }
  571. if(val){
  572. val.forEach((ele,index)=>{
  573. if(ele*1){
  574. this.accountId.push(ele)
  575. }else{
  576. let projectArr=this.treeData.filter((item)=>{
  577. return item.value==ele
  578. });
  579. // console.log(projectArr)
  580. projectArr[0].children.forEach((element)=>{
  581. this.accountId.push(element.value)
  582. })
  583. }
  584. })
  585. }
  586. console.log(this.accountId)
  587. },
  588. treeSearch(){
  589. console.log(arguments);
  590. },
  591. treeSelect(){
  592. // console.log(arguments);
  593. // this.treeValue=arguments[0].value
  594. },
  595. disabledDate(current) {
  596. // console.log(current)
  597. return current && current > moment().subtract(1, 'day')
  598. },
  599. filterOption(input, option){
  600. console.log(input, option)
  601. return (
  602. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  603. );
  604. },
  605. //查询按钮的事件
  606. searchgetData(){
  607. this.myChart.clear()
  608. if(this.accountId.length>0){
  609. // console.log();
  610. this.discountCostLink={}
  611. this.photoShowLink={}
  612. this.photoClickLink={}
  613. this.costLink={}
  614. this.aClickLink={}
  615. this.loading=true;
  616. this.searchDisabled=true;
  617. this.tabCost={}
  618. this.tabClick={}
  619. this.tabShowNum={},
  620. this.tabDiscountCost={}
  621. this.tabconvertNum={}
  622. this.chartHttp({
  623. mediaId:this.mediaId,
  624. discount:this.discount,
  625. accountIds:this.accountId,
  626. startDate:this.dateValue[0].format('YYYY-MM-DD'),
  627. endDate:this.dateValue[1].format('YYYY-MM-DD')
  628. })
  629. if(this.accountId.length==1 && this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
  630. this.target='stat_Datetime',
  631. this.order='asc'
  632. }else{
  633. this.target='cost',
  634. this.order='desc'
  635. }
  636. this.tableHttp();
  637. }else{
  638. this.$message.error('请选择账户后再查询!');
  639. }
  640. },
  641. //重置
  642. resetgetData(){
  643. this.loading=false;
  644. // this.resetDisabled=true;
  645. this.searchDisabled=false;
  646. this.refreshDisabled=false;
  647. this.treeValue=[];
  648. // this.treeData=[];
  649. this.discountSelect=1.0;
  650. this.discountDisabled=false;
  651. this.rebatePropDisabled=false;
  652. this.rebateProp=1.0
  653. this.treeChange([]);
  654. this.tabCost={}
  655. this.tabClick={}
  656. this.tabShowNum={},
  657. this.tabDiscountCost={}
  658. this.tabconvertNum={}
  659. this.tableData=[];
  660. this.discountCostLink={};
  661. this.showNumLink={};
  662. this.clickLink={};
  663. this.costLink={};
  664. this.convertNumLink={};
  665. this.myChart.clear()
  666. this.dateValue=[moment(),moment()]
  667. },
  668. //打开日期框
  669. opendate(){
  670. this.openOptions=!this.openOptions;
  671. // console.log(this.openOptions)
  672. },
  673. opendateClose(){
  674. this.openOptions=false;
  675. // console.log(this.openOptions)
  676. },
  677. //请求chart数据
  678. chartHttp(params){
  679. return new Promise((resolve, reject) => {
  680. postAction('/ctop/byteDance/dailyPage/report/chart', params).then(res => {
  681. // console.log(res)
  682. if (res.success) {
  683. this.loading = false
  684. this.refreshDisabled=false;
  685. this.resetDisabled=false;
  686. this.searchDisabled=false;
  687. this.cost = res.result.costWeekLink
  688. this.click = res.result.clickWeekLink
  689. this.showNum = res.result.showNumWeekLink;
  690. //展示的五个块的数据
  691. this.discountCostLink=res.result.sumData.Sum.discountCostLink
  692. this.showNumLink=res.result.sumData.Sum.showNumLink
  693. this.clickLink=res.result.sumData.Sum.clickLink
  694. this.costLink=res.result.sumData.Sum.costLink
  695. this.convertNumLink=res.result.sumData.Sum.convertNumLink
  696. //chart的数据
  697. this.tabCost=JSON.parse(JSON.stringify(initDay))
  698. this.tabClick=JSON.parse(JSON.stringify(initDay))
  699. this.tabShowNum=JSON.parse(JSON.stringify(initDay))
  700. this.tabDiscountCost=JSON.parse(JSON.stringify(initDay))
  701. this.tabconvertNum=JSON.parse(JSON.stringify(initDay))
  702. let chartData=res.result.chartData;
  703. chartData.map((item,index)=>{
  704. if(item.statHour || item.statHour==0){
  705. //说明是查询 天 数据;
  706. // console.log('day')
  707. item.statHour=item.statHour>=10?`${item.statHour}:00` : `0${item.statHour}:00`
  708. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  709. //说明是今天
  710. this.tabClick.yesterday.y.push(item.click)
  711. this.tabCost.yesterday.y.push(item.cost)
  712. this.tabShowNum.yesterday.y.push(item.showNum)
  713. this.tabDiscountCost.yesterday.y.push(item.discountCost)
  714. this.tabconvertNum.yesterday.y.push(item.convertNum);
  715. this.tabClick.x.push(item.statHour)
  716. this.tabCost.x.push(item.statHour)
  717. this.tabShowNum.x.push(item.statHour)
  718. this.tabDiscountCost.x.push(item.statHour)
  719. this.tabconvertNum.x.push(item.statHour);
  720. if(item.afterData){
  721. this.tabClick.today.y.push(item.afterData.click)
  722. this.tabCost.today.y.push(item.afterData.cost)
  723. this.tabShowNum.today.y.push(item.afterData.showNum)
  724. this.tabDiscountCost.today.y.push(item.afterData.discountCost)
  725. this.tabconvertNum.today.y.push(item.afterData.convertNum)
  726. //环比
  727. this.tabClick.huanbi.y.push(item.afterData.photoClickProportion)
  728. // console.log((item.afterData.photoClickProportion*100).toFixed(2)+'%')
  729. this.tabCost.huanbi.y.push(item.afterData.costProportion)
  730. this.tabShowNum.huanbi.y.push(item.afterData.showProportion)
  731. this.tabDiscountCost.huanbi.y.push(item.afterData.costProportion)
  732. this.tabconvertNum.huanbi.y.push(item.afterData.convertNumProportion)
  733. }else{
  734. this.tabClick.today.y.push(0)
  735. this.tabCost.today.y.push(0)
  736. this.tabShowNum.today.y.push(0)
  737. this.tabDiscountCost.today.y.push(0)
  738. this.tabconvertNum.today.y.push(0)
  739. this.tabClick.huanbi.y.push(0)
  740. this.tabCost.huanbi.y.push(0)
  741. this.tabShowNum.huanbi.y.push(0)
  742. this.tabDiscountCost.huanbi.y.push(0)
  743. this.tabconvertNum.huanbi.y.push(0)
  744. }
  745. }else{
  746. if(item.afterData){
  747. this.tabClick.yesterday.y.push(item.afterData.click)
  748. this.tabCost.yesterday.y.push(item.afterData.cost)
  749. this.tabShowNum.yesterday.y.push(item.afterData.showNum)
  750. this.tabDiscountCost.yesterday.y.push(item.afterData.discountCost)
  751. this.tabconvertNum.yesterday.y.push(item.afterData.convertNum);
  752. this.tabClick.x.push(item.afterData.statHour)
  753. this.tabCost.x.push(item.afterData.statHour)
  754. this.tabShowNum.x.push(item.afterData.statHour)
  755. this.tabDiscountCost.x.push(item.afterData.statHour)
  756. this.tabconvertNum.x.push(item.afterData.statHour);
  757. }
  758. }
  759. }else if(item.statDate){
  760. // console.log('date')
  761. this.tabClick.yesterday.y.push(item.click)
  762. this.tabCost.yesterday.y.push(item.cost)
  763. this.tabShowNum.yesterday.y.push(item.showNum)
  764. this.tabDiscountCost.yesterday.y.push(item.discountCost)
  765. this.tabconvertNum.yesterday.y.push(item.convertNum);
  766. this.tabClick.x.push(item.statDate)
  767. this.tabCost.x.push(item.statDate)
  768. this.tabShowNum.x.push(item.statDate)
  769. this.tabDiscountCost.x.push(item.statDate)
  770. this.tabconvertNum.x.push(item.statDate);
  771. }
  772. })
  773. }
  774. this.callback(this.tabKey)
  775. })
  776. })
  777. },
  778. //请求项目和账户内容
  779. accountHttp(){
  780. this.treeData=[];
  781. this.treeValue=[];
  782. getAction('/ctop/projectMember/getProjectAccountByUserId?mediaType=1', {}).then(res => {
  783. if(res.success){
  784. // console.log(res);
  785. if(res.result){
  786. res.result.forEach((element,index) => {
  787. if(element){
  788. this.treeData.push({});
  789. this.treeData[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  790. this.treeData[index].value='project'+element.project.projectId;
  791. this.treeData[index].key=element.project.projectId;
  792. this.treeData[index].mediaId=element.project.mediaId;
  793. this.treeData[index].children=[];
  794. if(element.account.length){
  795. element.account.forEach((ele,i)=>{
  796. this.treeData[index].children.push({});
  797. this.treeData[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName+'_('+(ele.accountStatus?'已停投':'投放中')+')';
  798. this.treeData[index].children[i].value=ele.accountId;
  799. this.treeData[index].children[i].key=ele.accountId;
  800. // this.treeData[index].children[i].accountStatus=ele.accountStatus;
  801. })
  802. }
  803. }
  804. });
  805. // console.log(this.treeData)
  806. }
  807. }
  808. })
  809. },
  810. //初始化echart
  811. getEchartData(idName, optionName) {
  812. const chart = this.$refs[idName]
  813. // console.log(chart)
  814. if (chart) {
  815. var myChart = echarts.init(document.getElementById(idName))
  816. myChart.clear()
  817. myChart.setOption(optionName)
  818. window.addEventListener('resize', function() {
  819. myChart.resize()
  820. })
  821. this.myChart=myChart
  822. }
  823. },
  824. //tab切换页的事件
  825. callback(key) {
  826. // console.log(key);
  827. this.tabKey=key;
  828. this.sectionOption=JSON.parse(JSON.stringify(sectionOption))
  829. if(key=='cost'){
  830. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  831. this.sectionOption.legend.data=['今天','昨天'];
  832. this.sectionOption.xAxis[0].data=this.tabCost.x;
  833. this.sectionOption.series[0].data=this.tabCost.today.y;
  834. this.sectionOption.series[0].name=this.tabCost.today.name;
  835. this.sectionOption.series[1].data=this.tabCost.yesterday.y;
  836. this.sectionOption.series[1].name=this.tabCost.yesterday.name;
  837. this.sectionOption.series[2].data=this.tabCost.huanbi.y;
  838. this.sectionOption.series[2].name=this.tabCost.huanbi.name;
  839. this.sectionOption.tooltip.formatter=(params)=>{
  840. // console.log(params)
  841. params[2].data=(params[2].data*100).toFixed(2)+'%'
  842. return `
  843. ${params[0].marker}今天:${params[0].data}<br />
  844. ${params[1].marker}昨天:${params[1].data}<br />
  845. ${params[2].marker}环比:${params[2].data}
  846. `
  847. }
  848. }else{
  849. this.sectionOption.legend.data=['总消耗'];
  850. this.sectionOption.xAxis[0].data=this.tabCost.x;
  851. this.sectionOption.series[0].data=this.tabCost.yesterday.y;
  852. this.sectionOption.series[0].name='总消耗';
  853. }
  854. }else if(key=='click'){
  855. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  856. this.sectionOption.legend.data=['今天','昨天'];
  857. this.sectionOption.xAxis[0].data=this.tabClick.x;
  858. this.sectionOption.series[0].data=this.tabClick.today.y;
  859. this.sectionOption.series[0].name=this.tabClick.today.name;
  860. this.sectionOption.series[1].data=this.tabClick.yesterday.y;
  861. this.sectionOption.series[1].name=this.tabClick.yesterday.name;
  862. this.sectionOption.series[2].data=this.tabClick.huanbi.y;
  863. this.sectionOption.series[2].name=this.tabClick.huanbi.name;
  864. this.sectionOption.tooltip.formatter=(params)=>{
  865. // console.log(params)
  866. params[2].data=(params[2].data*100).toFixed(2)+'%'
  867. return `
  868. ${params[0].marker}今天:${params[0].data}<br />
  869. ${params[1].marker}昨天:${params[1].data}<br />
  870. ${params[2].marker}环比:${params[2].data}
  871. `
  872. }
  873. }else{
  874. this.sectionOption.legend.data=['点击数'];
  875. this.sectionOption.xAxis[0].data=this.tabClick.x;
  876. this.sectionOption.series[0].data=this.tabClick.yesterday.y;
  877. this.sectionOption.series[0].name='点击数';
  878. }
  879. }else if(key=='showNum'){
  880. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  881. this.sectionOption.legend.data=['今天','昨天'];
  882. this.sectionOption.xAxis[0].data=this.tabShowNum.x;
  883. this.sectionOption.series[0].data=this.tabShowNum.today.y;
  884. this.sectionOption.series[0].name=this.tabShowNum.today.name;
  885. this.sectionOption.series[1].data=this.tabShowNum.yesterday.y;
  886. this.sectionOption.series[1].name=this.tabShowNum.yesterday.name;
  887. this.sectionOption.series[2].data=this.tabShowNum.huanbi.y;
  888. this.sectionOption.series[2].name=this.tabShowNum.huanbi.name;
  889. this.sectionOption.tooltip.formatter=(params)=>{
  890. // console.log(params)
  891. params[2].data=(params[2].data*100).toFixed(2)+'%'
  892. return `
  893. ${params[0].marker}今天:${params[0].data}<br />
  894. ${params[1].marker}昨天:${params[1].data}<br />
  895. ${params[2].marker}环比:${params[2].data}
  896. `
  897. }
  898. }else{
  899. this.sectionOption.legend.data=['展示数'];
  900. this.sectionOption.xAxis[0].data=this.tabShowNum.x;
  901. this.sectionOption.series[0].data=this.tabShowNum.yesterday.y;
  902. this.sectionOption.series[0].name='展示数';
  903. }
  904. }else if(key=='discountCost'){
  905. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  906. this.sectionOption.legend.data=['今天','昨天'];
  907. this.sectionOption.xAxis[0].data=this.tabDiscountCost.x;
  908. this.sectionOption.series[0].data=this.tabDiscountCost.today.y;
  909. this.sectionOption.series[0].name=this.tabDiscountCost.today.name;
  910. this.sectionOption.series[1].data=this.tabDiscountCost.yesterday.y;
  911. this.sectionOption.series[1].name=this.tabDiscountCost.yesterday.name;
  912. this.sectionOption.series[2].data=this.tabDiscountCost.huanbi.y;
  913. this.sectionOption.series[2].name=this.tabDiscountCost.huanbi.name;
  914. this.sectionOption.tooltip.formatter=(params)=>{
  915. // console.log(params)
  916. params[2].data=(params[2].data*100).toFixed(2)+'%'
  917. return `
  918. ${params[0].marker}今天:${params[0].data}<br />
  919. ${params[1].marker}昨天:${params[1].data}<br />
  920. ${params[2].marker}环比:${params[2].data}
  921. `
  922. }
  923. }else{
  924. this.sectionOption.legend.data=['折后消耗'];
  925. this.sectionOption.xAxis[0].data=this.tabDiscountCost.x;
  926. this.sectionOption.series[0].data=this.tabDiscountCost.yesterday.y;
  927. this.sectionOption.series[0].name='折后消耗';
  928. }
  929. }else{
  930. if(this.dateValue[0].format('YYYY-MM-DD')==moment().format('YYYY-MM-DD')){
  931. this.sectionOption.legend.data=['今天','昨天'];
  932. this.sectionOption.xAxis[0].data=this.tabconvertNum.x;
  933. this.sectionOption.series[0].data=this.tabconvertNum.today.y;
  934. this.sectionOption.series[0].name=this.tabconvertNum.today.name;
  935. this.sectionOption.series[1].data=this.tabconvertNum.yesterday.y;
  936. this.sectionOption.series[1].name=this.tabconvertNum.yesterday.name;
  937. this.sectionOption.series[2].data=this.tabconvertNum.huanbi.y;
  938. this.sectionOption.series[2].name=this.tabconvertNum.huanbi.name;
  939. this.sectionOption.tooltip.formatter=(params)=>{
  940. // console.log(params)
  941. params[2].data=(params[2].data*100).toFixed(2)+'%'
  942. return `
  943. ${params[0].marker}今天:${params[0].data}<br />
  944. ${params[1].marker}昨天:${params[1].data}<br />
  945. ${params[2].marker}环比:${params[2].data}
  946. `
  947. }
  948. }else{
  949. this.sectionOption.legend.data=['转化数'];
  950. this.sectionOption.xAxis[0].data=this.tabconvertNum.x;
  951. this.sectionOption.series[0].data=this.tabconvertNum.yesterday.y;
  952. this.sectionOption.series[0].name='转化数';
  953. }
  954. }
  955. this.getEchartData('sectionChart', this.sectionOption)
  956. },
  957. //请求table的数据
  958. tableHttp(params){
  959. this.loading=true;
  960. postAction('/ctop/byteDance/dailyPage/report/list', {
  961. mediaId:this.mediaId,
  962. discount:this.discount,
  963. accountIds:this.accountId,
  964. startDate:this.dateValue[0].format('YYYY-MM-DD'),
  965. endDate:this.dateValue[1].format('YYYY-MM-DD'),
  966. hour:this.timeSelectValue,
  967. target:this.target,
  968. order:this.order
  969. }).then(res => {
  970. if(res.success){
  971. this.loading=false;
  972. // console.log(res)
  973. res.result.forEach(element => {
  974. if(this.timeValueString){
  975. element.date=this.dateValue[0].format('YYYY.MM.DD')+'—'+this.timeValueString
  976. }else{
  977. if(this.accountId.length==1 && this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
  978. element.date=element.statDate;
  979. }else{
  980. element.date=this.dateValue[0].format('YYYY.MM.DD')+"-"+this.dateValue[1].format('YYYY.MM.DD')
  981. }
  982. }
  983. });
  984. if(this.dateValue[0].format('YYYY-MM-DD')==this.dateValue[1].format('YYYY-MM-DD')){
  985. for(let i=res.result.length-1; i>res.result.length-4; i--){
  986. res.result[i].authName='-';
  987. res.result[i].accountId='-';
  988. res.result[i].date='总计';
  989. };
  990. for(let key in res.result[res.result.length-1]){
  991. if( res.result[res.result.length-1][key] < 1){
  992. res.result[res.result.length-1][key]=(res.result[res.result.length-1][key]*100).toFixed(2)+'%'
  993. }
  994. }
  995. res.result[res.result.length-1].date='环比';
  996. res.result[res.result.length-2].date='昨日总计(相对)';
  997. this.tableData=res.result
  998. length =this.tableData.length-3;
  999. }else{
  1000. res.result[res.result.length-1].date='总计';
  1001. res.result[res.result.length-1].authName='-';
  1002. res.result[res.result.length-1].accountId='-';
  1003. this.tableData=res.result
  1004. length =this.tableData.length-1;
  1005. }
  1006. }
  1007. })
  1008. },
  1009. //导出报表
  1010. exportExcel() {
  1011. let column = this.columns.map((item, index) => {
  1012. return item.dataIndex
  1013. })
  1014. let columns=column.splice(3)
  1015. console.log(columns)
  1016. downFilePost('/ctop/byteDance/dailyPage/report/excel', {
  1017. mediaId:this.mediaId,
  1018. discount:this.discount,
  1019. accountIds:this.accountId,
  1020. startDate:this.dateValue[0].format('YYYY-MM-DD'),
  1021. endDate:this.dateValue[1].format('YYYY-MM-DD'),
  1022. hour:this.timeSelectValue,
  1023. target:this.target,
  1024. order:this.order,
  1025. columns,
  1026. }).then(res => {
  1027. let blob = new Blob([res], {
  1028. type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  1029. })
  1030. let downloadElement = document.createElement('a')
  1031. let href = window.URL.createObjectURL(blob) //创建下载的链接
  1032. downloadElement.href = href
  1033. downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
  1034. document.body.appendChild(downloadElement)
  1035. downloadElement.click() //点击下载
  1036. document.body.removeChild(downloadElement) //下载完成移除元素
  1037. window.URL.revokeObjectURL(href) //释放掉blob对象
  1038. })
  1039. },
  1040. //弹出框打开,自定义列
  1041. customColumns() {
  1042. this.visible = true
  1043. this.listNum = [...this.columns]
  1044. },
  1045. //table选择时间函数
  1046. timeChange(value){
  1047. console.log(value);
  1048. this.timeSelectValue=value.key
  1049. this.timeValueString=value.label;
  1050. this.tableHttp()
  1051. },
  1052. //table 排序
  1053. sort(pagination, filters, sorter, { currentDataSource }){
  1054. console.log(pagination, filters, sorter)
  1055. if(this.accountId.length){
  1056. if(sorter.order == 'ascend'){
  1057. this.order='asc'
  1058. this.target=sorter.columnKey;
  1059. }else if(sorter.order == 'descend'){
  1060. this.order='desc'
  1061. this.target=sorter.columnKey;
  1062. }else{
  1063. if(this.accountId.length==1 && this.dateValue[0].format('YYYY.MM.DD')!=this.dateValue[1].format('YYYY.MM.DD')){
  1064. this.target='stat_Datetime',
  1065. this.order='asc'
  1066. }else{
  1067. this.target='cost',
  1068. this.order='desc'
  1069. }
  1070. }
  1071. this.tableHttp();
  1072. }
  1073. },
  1074. closeCustomColumn(){
  1075. this.visible=false;
  1076. },
  1077. //
  1078. discountChange(){
  1079. console.log(this.discountSelect);
  1080. this.discount=this.discountSelect
  1081. },
  1082. rebatePropChange(){
  1083. console.log(this.rebateProp)
  1084. this.discount=this.rebateProp
  1085. },
  1086. //自定义之后修改父元素表头
  1087. changeColumn(val){
  1088. console.log(val)
  1089. this.columns=[...val];
  1090. if(this.columns.length> this.columnsFixd.length&&this.columns.length<8){
  1091. this.columns.forEach((element,index) => {
  1092. if(index<this.columns.length-1){
  1093. element.width='auto'
  1094. element.fixed=false
  1095. }
  1096. });
  1097. // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
  1098. }else if(this.columns.length>=8){
  1099. this.columns.forEach((element,index) => {
  1100. if(index<this.columnsFixd.length){
  1101. element.width=200
  1102. element.fixed='left'
  1103. }
  1104. });
  1105. this.scrollX=1000+200*(this.columns.length-this.columnsFixd.length)
  1106. } else{
  1107. this.scrollX=0;
  1108. this.columns.forEach(element => {
  1109. element.width='auto'
  1110. element.fixed=false
  1111. });
  1112. }
  1113. },
  1114. tableHandle() {
  1115. // this.listNum = [...this.columns]
  1116. // console.log(this.listNum.length, this.columns)
  1117. if (this.listNum.length >= 9 || this.columns.length >= 9) {
  1118. this.tableWidth = 160
  1119. this.scrollX = this.columns.length * 160
  1120. // console.log(this.scrollX)
  1121. } else {
  1122. this.scrollX = 0
  1123. }
  1124. },
  1125. },
  1126. mounted() {
  1127. this.accountHttp()
  1128. new Promise((resolve, reject) => {
  1129. this.getEchartData('sectionChart', this.sectionOption)
  1130. resolve()
  1131. }).then(()=>{
  1132. this.myChart.clear()
  1133. })
  1134. postAction('/toutiao/videoReportDaily/getColumnJson', {
  1135. columnType: 1
  1136. }).then(res => {
  1137. // console.log(res)
  1138. if (res.success) {
  1139. // console.log(JSON.parse(res.result))
  1140. if(res.result){
  1141. let columns = JSON.parse(res.result)
  1142. if (columns.length) {
  1143. if (columns.length >= columnsFixd.length) {
  1144. columns.map((item, index) => {
  1145. if (index > columnsFixd.length - 1) {
  1146. item.sorter = function(a, b) {
  1147. }
  1148. }
  1149. })
  1150. columns = columns.slice(columnsFixd.length)
  1151. this.columns = [...columnsFixd, ...columns]
  1152. // this.tableHandle()
  1153. }
  1154. // console.log(this.columns)
  1155. }
  1156. }
  1157. this.changeColumn(this.columns)
  1158. }
  1159. })
  1160. },
  1161. beforeDestroy() {
  1162. let arr = JSON.stringify(this.columns)
  1163. postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
  1164. json: arr,
  1165. columnType: 1
  1166. }).then(res => {
  1167. // console.log(res)
  1168. })
  1169. },
  1170. filters: {
  1171. toPercentage(val) {
  1172. if(val){
  1173. if(typeof val != 'string'){
  1174. return (val * 100).toFixed(2) + '%'
  1175. }else{
  1176. return val
  1177. }
  1178. }else if(typeof val =='string'){
  1179. return val
  1180. }
  1181. else{
  1182. return 0
  1183. }
  1184. },
  1185. //保留两位小数并且变成货币格式
  1186. decimalsHandle(val){
  1187. if(val && typeof val !='string'){
  1188. if(val>=0){
  1189. val=parseFloat(val).toFixed(2);
  1190. let numberStr = val.toString()
  1191. let str = numberStr.split('.')
  1192. let str0=str[0].split('').reverse();
  1193. for (let i = 0; i < str0.length; i++) {
  1194. if ((i + 1) % 4 === 0) {
  1195. str0.splice(i, 0, ',')
  1196. }
  1197. }
  1198. str0.reverse()
  1199. let handleResult = ''
  1200. for (let j = 0; j < str0.length; j++) {
  1201. handleResult += str0[j]
  1202. }
  1203. return handleResult+'.'+str[1]
  1204. }else{
  1205. val=parseFloat(val).toFixed(2);
  1206. let numberStr = val.toString()
  1207. let str = numberStr.split('.')
  1208. let str0=str[0].substr(1).split('').reverse();
  1209. for (let i = 0; i < str0.length; i++) {
  1210. if ((i + 1) % 4 === 0) {
  1211. str0.splice(i, 0, ',')
  1212. }
  1213. }
  1214. str0.reverse()
  1215. let handleResult = ''
  1216. for (let j = 0; j < str0.length; j++) {
  1217. handleResult += str0[j]
  1218. }
  1219. return '-'+handleResult+'.'+str[1]
  1220. }
  1221. }else if(typeof val =='string'){
  1222. return val
  1223. }
  1224. else{
  1225. return 0
  1226. }
  1227. },
  1228. //变成货币格式
  1229. formatCurrency(val){
  1230. if((val||val==0)&& typeof val !='string'){
  1231. let numberStr = val.toString()
  1232. let str = numberStr.split('').reverse()
  1233. for (let i = 0; i < str.length; i++) {
  1234. if ((i + 1) % 4 === 0) {
  1235. str.splice(i, 0, ',')
  1236. }
  1237. }
  1238. str.reverse()
  1239. let handleResult = ''
  1240. for (let j = 0; j < str.length; j++) {
  1241. handleResult += str[j]
  1242. }
  1243. return handleResult
  1244. }else if(typeof val =='string'){
  1245. return val
  1246. }
  1247. else{
  1248. return '-'
  1249. }
  1250. }
  1251. }
  1252. }
  1253. </script>
  1254. <style lang="scss">
  1255. .ant-tooltip-inner,.ant-tooltip-arrow::before{
  1256. background-color: #fff;
  1257. color: #333;
  1258. }
  1259. </style>
  1260. <style lang="scss" scoped>
  1261. .accountReport {
  1262. .circul{
  1263. width: 5px;
  1264. height: 5px;
  1265. border-radius: 50%;
  1266. background-color: #32CD32;;
  1267. }
  1268. .optionLine:hover{
  1269. box-shadow: 0 0 15px rgba(0,0,0,.15);
  1270. border-radius: 10px;
  1271. }
  1272. .optionLine {
  1273. box-sizing: border-box;
  1274. padding: 15px 15px;
  1275. position: relative;
  1276. // margin: 20px 15px 15px;
  1277. margin-bottom: 15px;
  1278. background-color: #fff;
  1279. // border: 1px solid #ccc;
  1280. .optionTow{
  1281. margin-top: 15px;
  1282. position: relative;
  1283. .optItem{
  1284. display: inline-block;
  1285. margin-right: 15px;
  1286. span {
  1287. display: inline-block;
  1288. padding: 0 3px;
  1289. }
  1290. }
  1291. }
  1292. .btn {
  1293. position: absolute;
  1294. right: 0px;
  1295. top: 0px;
  1296. .mybtn{
  1297. margin-left: 10px;
  1298. }
  1299. }
  1300. }
  1301. .show{
  1302. // background-color: #fff;
  1303. width: 100%;
  1304. display: flex;
  1305. justify-content: space-between;
  1306. // padding: 0px 15px;
  1307. box-sizing: border-box;
  1308. .showBox {
  1309. width: 19%;
  1310. box-sizing: border-box;
  1311. padding: 15px 15px;
  1312. background-color: #fff;
  1313. .title {
  1314. color: #999;
  1315. font-size: 16px;
  1316. position: relative;
  1317. text-align: center;
  1318. .infotitle{
  1319. padding: 8px 0;
  1320. }
  1321. span {
  1322. font-size: 1rem;
  1323. // color: #1890ff;
  1324. position: absolute;
  1325. top: 0;
  1326. right: 0;
  1327. cursor: pointer;
  1328. }
  1329. }
  1330. .infoNum{
  1331. padding:10px 0;
  1332. text-align: center;
  1333. font-weight: 600;
  1334. font-size: 20px;
  1335. span{
  1336. font-weight: 600;
  1337. font-size: 16px;
  1338. }
  1339. .red{
  1340. font-size: 20px;
  1341. font-weight: 600;
  1342. color: red;
  1343. }
  1344. .green{
  1345. display: block;
  1346. text-align: center;
  1347. margin-left: 0.2rem;
  1348. font-size: 14px;
  1349. font-weight: 700;
  1350. color: #32CD32;
  1351. .huanbi{
  1352. // color:#999;
  1353. font-weight: 400;
  1354. font-size: 14px;
  1355. }
  1356. }
  1357. }
  1358. }
  1359. }
  1360. .chartBox{
  1361. background-color: #fff;
  1362. margin: 15px 0px;
  1363. padding: 2px 10px 30px;
  1364. }
  1365. .tableBox{
  1366. background-color: #fff;
  1367. margin: 15px 0px;
  1368. padding: 15px 10px;
  1369. .tableTop{
  1370. position: relative;
  1371. padding-bottom: 15px;
  1372. border-bottom: 1px solid #e0e0e0;
  1373. .selectTime{
  1374. margin-right: 20px;
  1375. }
  1376. .add{
  1377. position: absolute;
  1378. top: 0;
  1379. right: 0;
  1380. }
  1381. }
  1382. }
  1383. }
  1384. </style>