KSAccountReport.vue 57 KB

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