KSAccountReport.vue 59 KB

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