accountPage.vue 94 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587
  1. <template>
  2. <div class="accountPage">
  3. <a-spin :spinning="accountPageSpinning">
  4. <div class="bodyBox accountBody">
  5. <div class="accountBodyLeft">
  6. <div class="accountBodyLeftCost">
  7. <div class="accountBodyLeftCostLeft">
  8. <div class="top">
  9. <p class="title" >花费</p>
  10. <a-range-picker
  11. v-model="dateValue"
  12. style="width:170px;"
  13. :allowClear=false
  14. :disabled-date="disabledDate"
  15. @change="onChange"
  16. />
  17. </div>
  18. <div class="costInfo">
  19. <div class="yesterdayInfo">
  20. <p>上阶段花费</p>
  21. <p style="font-size:16px;font-weight:600">{{columnsFixd[0].yesterday | decimalsHandle}}</p>
  22. </div>
  23. <a-divider type="vertical" />
  24. <div class="tongbi">
  25. <p>同比
  26. <a-tooltip >
  27. <template slot="title">
  28. <span>截止此时与上一阶段的花费同比</span>
  29. </template>
  30. <a-icon type="question-circle" />
  31. </a-tooltip>
  32. </p>
  33. <p style="font-size:16px;font-weight:600">{{AggregateByHourList.today?AggregateByHourList.today.grew:0}}%</p>
  34. </div>
  35. </div>
  36. <div class="costNum">
  37. {{columnsFixd[0].today | decimalsHandle}}
  38. </div>
  39. </div>
  40. <div class="accountBodyLeftCostRight">
  41. <div class="gaugeEchart" id="gaugeEchart" style='width:100%;height:200px;margin:0 auto' ref="gaugeEchart">
  42. <a-empty />
  43. </div>
  44. </div>
  45. </div>
  46. <div class="accountBodyLeftOther">
  47. <span class="showIndex" @click="showIndexChangeBox">显示指标</span>
  48. <div class="top">
  49. <div class="item" v-for="(item,index) in columns" :key='item.dataIndex' v-show="index>0">
  50. <div class="todyCost">
  51. <span>{{item.today | decimalsHandle}}</span>
  52. <span class="sign">
  53. <a-icon type="rise" class="rise" v-show="item.today-item.yesterday>0"/>
  54. <a-icon type="fall" class="fall" v-show="item.today-item.yesterday<0" />
  55. </span>
  56. </div>
  57. <div class="yesterdayCost">
  58. /<a-tooltip >
  59. <template slot="title">
  60. <span>
  61. {{dateValue[0].format('YYYY-MM-DD')==dateValue[1].format('YYYY-MM-DD')?dateValue[0].format('YYYY-MM-DD'):''}}
  62. 的{{item.title}}
  63. </span>
  64. </template>
  65. <a-icon type="question-circle" />
  66. </a-tooltip>:{{item.yesterday | decimalsHandle}}
  67. </div>
  68. <span class="IndexName" :class="{'IndexNameActive':isActive==item.dataIndex}" @click="getActiveIndexName(item)">
  69. <a-tooltip >
  70. <template slot="title">
  71. <span>{{item.title}}</span>
  72. </template>
  73. <span style="display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px">{{item.title}}</span>
  74. </a-tooltip>
  75. </span>
  76. </div>
  77. </div>
  78. <div class="echart" style="margin-top:10px">
  79. <a-spin :spinning="accountIndexEchartSpinning">
  80. <div class="accountIndexEchart" id="accountIndexEchart" style='width:100%;height:160px;margin:0 auto;' ref="accountIndexEchart">
  81. <a-empty />
  82. </div>
  83. </a-spin>
  84. </div>
  85. </div>
  86. </div>
  87. <div class="accountBodyRight">
  88. <div class="accountBodyRighTitle" @click="changeAccount">
  89. <h1>{{currentAccount.accountName}}<a-icon type="down" style="font-size:14px" /></h1>
  90. <p class="accountBodyRighTitleID">账户ID:{{currentAccount.accountId || 9647490}}</p>
  91. </div>
  92. <div class="accountBodyRightInfo">
  93. <p class="accountBodyRightInfoItem">
  94. <span class="name">余额:</span>
  95. {{currentAccount.totalBalance |decimalsHandle }}
  96. </p>
  97. <p class="accountBodyRightInfoItem">
  98. <span class="name">投放状态:</span>
  99. {{currentAccount.statusStr}}
  100. </p>
  101. <p class="accountBodyRightInfoItem createNum" @click="gorejectCreativePage">
  102. <span class="name">被拒创意数:</span>
  103. {{currentAccount.rejectedCounts}}
  104. </p>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="bodyBox planBody">
  109. <div class="planBodyLeft">
  110. <div class="title">
  111. <p class="titleContext">
  112. <span class="spot"> </span>
  113. 广告上新
  114. <span class="titleTip">该广告账户近七天上新数据</span>
  115. </p>
  116. </div>
  117. <div class="echart">
  118. <a-spin :spinning="planBodyEchartSpinning">
  119. <div class="newDataEchart" id="newDataEchart" style='width:100%;height:350px;margin:0 auto;padding: 0 10px' ref="newDataEchart">
  120. <a-empty />
  121. </div>
  122. </a-spin>
  123. </div>
  124. </div>
  125. <div class="planBodyRight">
  126. <div class="title">
  127. <p class="titleContext">
  128. <span class="spot"> </span>
  129. 投放数据
  130. <span class="titleTip">更新时间:{{data.length?data[0].updateTime: '-'}}</span>
  131. </p>
  132. </div>
  133. <div class="table">
  134. <a-table
  135. :columns="newColumns"
  136. :data-source="data"
  137. :ellipsis='true'
  138. :pagination="ipagination"
  139. :loading="loading"
  140. @change="sort"
  141. :scroll="{ x: 950,}"
  142. style="font-size:14px">
  143. <div style='' slot="unitName" slot-scope="text">
  144. <a-tooltip placement="topLeft">
  145. <template slot="title" >
  146. <!-- style="width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;" -->
  147. <div >
  148. {{ text}}
  149. </div>
  150. </template>
  151. {{text}}
  152. </a-tooltip>
  153. </div>
  154. <span slot="unitStatus" slot-scope="text,record">
  155. <a-spin :spinning="record.spin" size="small" >
  156. <div class="spin-content">
  157. <a-switch size="default" :checked='text==1' @change="switchChange(text,record)"/>
  158. </div>
  159. </a-spin>
  160. </span>
  161. <span slot="bid" slot-scope="text">
  162. {{text/1000}}
  163. </span>
  164. <span slot="authName" slot-scope="text">
  165. <!-- <a href="javascript:;" >{{text}}</a> -->
  166. {{text || '-'}}
  167. </span>
  168. <span slot="time" slot-scope="text,record">
  169. {{record.startTime}}至{{record.endTime}}
  170. </span>
  171. <span slot="operator" slot-scope="text,record">
  172. <a-popover v-model="record.visible" trigger="click" placement="topLeft" @visibleChange='visibleChange'>
  173. <span slot="title">修改出价</span>
  174. <template slot="content" style="width:300px;">
  175. <div style="margin:5px 0 0;padding: 0 0 15px;">
  176. <span ><a-input-number :min="0" v-model="newBid" :step="0.1" placeholder="请输入出价" size="small" style='margin-right:20px;width:120px' /></span>
  177. <p style="color:red;font-size:12px;height:16px;padding:5px 0">{{bidErrorMessage}}</p>
  178. </div>
  179. <div>
  180. <a-button type='default' @click="bidChangeCancel(record)" size='small' style='margin-right:10px'>取消</a-button>
  181. <a-button type='primary' @click="bidChangeOk(record)" size='small' class="ok">修改</a-button>
  182. </div>
  183. </template>
  184. <a href="javascript:;" type='primary' @click="()=>{record.visible=true}">调价</a>
  185. </a-popover>
  186. <a-divider type="vertical" />
  187. <a-dropdown :trigger="['click']">
  188. <a class="ant-dropdown-link" @click="e => e.preventDefault()">更多</a>
  189. <a-menu slot="overlay">
  190. <a-menu-item>
  191. <span href="javascript:;" @click="editTarget(record)">修改定向</span>
  192. </a-menu-item>
  193. <a-menu-item>
  194. <span href="javascript:;" @click="editLink(record)">修改链接</span>
  195. </a-menu-item>
  196. </a-menu>
  197. </a-dropdown>
  198. </span>
  199. </a-table>
  200. </div>
  201. </div>
  202. </div>
  203. <div class="bodyBox materialBody">
  204. <div class="dataPicker">
  205. <a-range-picker
  206. v-model="materialDate"
  207. style="width:200px;"
  208. :allowClear=false
  209. :disabled-date="disabledDate"
  210. @change="materialDataChange"
  211. />
  212. </div>
  213. <div class="materialBodyLeft">
  214. <div class="title">
  215. <p class="titleContext">
  216. <span class="spot"> </span>
  217. 素材相关
  218. <span class="titleTip">更新时间:{{materialBodyUpdateTime || '-'}}</span>
  219. </p>
  220. </div>
  221. <div class="echart">
  222. <a-spin :spinning="materialBodyEchartSpinning">
  223. <div class="materialEchart" id="materialEchart" style='width:100%;height:350px;margin:0 auto;' ref="materialEchart">
  224. <a-empty />
  225. </div>
  226. </a-spin >
  227. </div>
  228. </div>
  229. <a-divider type="vertical" />
  230. <div class="materialBodyRight">
  231. <div class="table">
  232. <a-table
  233. :columns="materialColumns"
  234. :data-source="materialData"
  235. :scroll="{ x: 950,}"
  236. :pagination="materialIpagination"
  237. :loading="materialLoading"
  238. @change="materialChange"
  239. style="font-size:14px">
  240. <span slot="coverUrl" slot-scope="text,record" >
  241. <div style="background:#e8e8e8;text-align:center;border-radius:3px">
  242. <a-popover placement="right">
  243. <template slot="content">
  244. <video :src="record.url" style="width:250px" controls ></video>
  245. </template>
  246. <template slot="title">
  247. </template>
  248. <img :src="text" alt="" style="width:20px">
  249. </a-popover>
  250. </div>
  251. </span>
  252. <span slot="bid" slot-scope="text">
  253. {{text/1000 }}
  254. </span>
  255. <span slot="charge" slot-scope="text"> {{text | decimalsHandle}} </span>
  256. <span slot="phototShow" slot-scope="text"> {{text | formatCurrency}} </span>
  257. <span slot="activation" slot-scope="text"> {{text | formatCurrency}} </span>
  258. <span slot="activationCost" slot-scope="text"> {{text | decimalsHandle}} </span>
  259. <span slot="stateDate" slot-scope="text">
  260. {{text || '暂无'}}
  261. </span>
  262. </a-table>
  263. </div>
  264. </div>
  265. </div>
  266. <div class="bodyBox targetBody">
  267. <div class="title">
  268. <a-select size="default" v-model="echartIndex" style="width: 150px" @change="echartIndexChange">
  269. <a-select-option v-for="item in indexValue" :key="item.value" :value='item.value'>
  270. {{ item.label }}
  271. </a-select-option>
  272. </a-select>
  273. <span class="titleTip">该处展示前天起七天数据</span>
  274. </div>
  275. <a-spin :spinning="targetBodyEchartSpinning">
  276. <div class="dataMode">
  277. <div class="adPositionMode">
  278. <div class="title">
  279. <p class="titleContext">
  280. <span class="spot"> </span>
  281. 分版位数据
  282. </p>
  283. </div>
  284. <div class="eachrt">
  285. <a-spin :spinning="adPositionEchartSpinning">
  286. <div class="adPositionEchart" id="adPositionEchart" style='width:100%;height:350px;margin:0 auto;' ref="adPositionEchart">
  287. <a-empty />
  288. </div>
  289. </a-spin >
  290. </div>
  291. </div>
  292. <a-divider type="vertical" />
  293. <div class="ageMode">
  294. <div class="title">
  295. <p class="titleContext">
  296. <span class="spot"> </span>
  297. 分年龄数据
  298. </p>
  299. </div>
  300. <div class="eachrt">
  301. <a-spin :spinning="ageEchartSpinning">
  302. <div class="ageEchart" id="ageEchart" style='width:100%;height:350px;margin:0 auto;' ref="ageEchart"> <a-empty /></div>
  303. </a-spin >
  304. </div>
  305. </div>
  306. <a-divider type="vertical" />
  307. <div class="genderMode">
  308. <div class="title">
  309. <p class="titleContext">
  310. <span class="spot"> </span>
  311. 分性别数据
  312. </p>
  313. </div>
  314. <div class="eachrt">
  315. <a-spin :spinning="genderEchartSpinning">
  316. <div class="genderEchart" id="genderEchart" style='width:100%;height:350px;margin:0 auto;' ref="genderEchart">
  317. <a-empty />
  318. </div>
  319. </a-spin >
  320. </div>
  321. </div>
  322. </div>
  323. </a-spin>
  324. </div>
  325. </a-spin>
  326. <!-- 修改检测链接的modal -->
  327. <a-modal v-model="linkVisible" title="修改链接" @ok="linkhandleOk" :width='800' @cancel='linkhandleCancel'>
  328. <div class="linkBody">
  329. <a-row>
  330. <a-col :span="4">
  331. <p style="text-align:right">第三方检测链接:</p>
  332. </a-col>
  333. <a-col :span="18">
  334. <span>{{oldLink || '-'}}</span>
  335. </a-col>
  336. </a-row>
  337. <p></p>
  338. <a-row>
  339. <a-col :span="4">
  340. <p style="text-align:right">修改链接:</p>
  341. </a-col>
  342. <a-col :span="18">
  343. <a-input placeholder="请输入监测链接" style="300px" v-model="newLink"/>
  344. </a-col>
  345. </a-row>
  346. </div>
  347. </a-modal>
  348. <!-- 修改定向的modal -->
  349. <a-modal v-model="targetVisible" title="修改定向" @ok="targethandleOk" @cancel='targethandleCancel'>
  350. <div class="linkBody">
  351. <p></p>
  352. <a-row>
  353. <a-col :span="6">
  354. <p style="text-align:right">修改定向包:</p>
  355. </a-col>
  356. <a-col :span="16">
  357. <a-select size="default" v-model="selectDirectionalId" style="width: 300px" >
  358. <a-select-option v-for="i in directionalList" :key="i.id" :value='i.id'>
  359. {{ i.templateName }}
  360. </a-select-option>
  361. </a-select>
  362. </a-col>
  363. </a-row>
  364. </div>
  365. </a-modal>
  366. <!-- 修改账户modal -->
  367. <a-modal v-model="accountVisible" title="切换账户" @ok="accounthandleOk" :width='800' @cancel='accountCancel' >
  368. <div class="linkBody" style='height:100px;display:flex;'>
  369. <!-- <a-input-search style="margin-bottom: 8px;width:500px" placeholder="Search" v-model="searchValues" @change="searchChange" />
  370. <a-tree
  371. :expanded-keys="expandedKeys"
  372. :auto-expand-parent="autoExpandParent"
  373. :tree-data="gData"
  374. @expand="onExpand"
  375. @select="accountSelect"
  376. >
  377. <template slot="title" slot-scope="{ title }">
  378. <span v-if="title.indexOf(searchValue) > -1">
  379. {{ title.substr(0, title.indexOf(searchValue)) }}
  380. <span style="color: red">{{ searchValue }}</span>
  381. {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
  382. </span>
  383. <span v-else>{{ title }}</span>
  384. </template>
  385. </a-tree> -->
  386. <div style="height:32px;line-height:32px">选择账户:</div>
  387. <Treeselect :appId.sync="selectaccountId" :multiple="false" request="2,4" ref="treeSelect" style="margin-bottom:8px;width:600px " />
  388. </div>
  389. </a-modal>
  390. <customColumn :visible='visible' :listNum='listNum' :fiexColumn='columnsFixd' :mediaType='2' @closeCustomColumn='closeCustomColumn' @changeColumn='changeColumn' />
  391. </div>
  392. </template>
  393. <script>
  394. import moment from 'moment'
  395. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  396. import customColumn from './modules/customColumn.vue'
  397. import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
  398. import qs from 'qs'
  399. // 引入基本模板
  400. var echarts = require('echarts')
  401. // 引入柱状图组件
  402. require('echarts/lib/chart/bar')
  403. // require('echarts/lib/chart/pie')
  404. require('echarts/lib/chart/line')
  405. require('echarts/lib/chart/map')
  406. require('echarts/lib/chart/gauge')
  407. // 引入提示框和title组件
  408. require('echarts/lib/component/tooltip')
  409. require('echarts/lib/component/title')
  410. require('echarts/lib/component/graphic')
  411. require('echarts/lib/component/toolbox')
  412. require('echarts/lib/component/legend')
  413. import { mapGetters } from 'vuex'
  414. const newColumns = [
  415. {
  416. title: '组/计划名称',
  417. dataIndex: 'unitName',
  418. key: 'unitName',
  419. align: 'center',
  420. scopedSlots: { customRender: 'unitName' },
  421. width:120,
  422. // fixed:'left',
  423. ellipsis:true
  424. },
  425. {
  426. title: '花费',
  427. dataIndex: 'charge',
  428. key: 'charge',
  429. align: 'center',
  430. scopedSlots: { customRender: 'charge' },
  431. sorter:() => {}
  432. },
  433. {
  434. title: '环比',
  435. dataIndex: 'grew',
  436. key: 'grew',
  437. align: 'center',
  438. scopedSlots: { customRender: 'grew' },
  439. },
  440. {
  441. title: '出价',
  442. dataIndex: 'bid',
  443. align: 'center',
  444. scopedSlots: { customRender: 'bid' },
  445. sorter:() => {}
  446. },
  447. {
  448. title: '激活数',
  449. dataIndex: 'activation',
  450. align: 'center',
  451. scopedSlots: { customRender: 'activation' },
  452. sorter:() => {}
  453. },
  454. {
  455. title: '激活成本',
  456. dataIndex: 'activationCost',
  457. align: 'center',
  458. scopedSlots: { customRender: 'activationCost' },
  459. sorter:() => {}
  460. },
  461. {
  462. title: '状态操作',
  463. dataIndex: 'unitStatus',
  464. key: 'unitStatus',
  465. align: 'center',
  466. scopedSlots: { customRender: 'unitStatus' },
  467. },
  468. {
  469. title: '操作',
  470. dataIndex: 'operator',
  471. key: 'operator',
  472. align: 'center',
  473. scopedSlots: { customRender: 'operator' },
  474. },
  475. ];
  476. const materialColumns = [
  477. {
  478. title: '素材',
  479. dataIndex: 'coverUrl',
  480. key: 'coverUrl',
  481. align: 'center',
  482. scopedSlots: { customRender: 'coverUrl' },
  483. width:100,
  484. fixed:'left',
  485. },
  486. {
  487. title: '素材ID',
  488. dataIndex: 'signature',
  489. key: 'signature',
  490. width:170,
  491. align: 'center',
  492. scopedSlots: { customRender: 'signature' },
  493. },
  494. {
  495. title: '曝光数',
  496. dataIndex: 'photoShow',
  497. key: 'photoShow',
  498. align: 'center',
  499. scopedSlots: { customRender: 'photoShow' },
  500. sorter:() => {}
  501. },
  502. {
  503. title: '花费',
  504. dataIndex: 'charge',
  505. align: 'center',
  506. scopedSlots: { customRender: 'charge' },
  507. sorter:() => {}
  508. },
  509. {
  510. title: '激活数',
  511. dataIndex: 'activation',
  512. align: 'center',
  513. scopedSlots: { customRender: 'activation' },
  514. sorter:() => {}
  515. },
  516. {
  517. title: '激活成本',
  518. dataIndex: 'activationCost',
  519. align: 'center',
  520. scopedSlots: { customRender: 'activationCost' },
  521. sorter:() => {}
  522. },
  523. // {
  524. // title: '关联创意',
  525. // dataIndex: 'openProgragmCreafte',
  526. // align: 'center',
  527. // scopedSlots: { customRender: 'openProgramCrgheate' },
  528. // // sorter:() => {}
  529. // },
  530. {
  531. title: '上线时间',
  532. dataIndex: 'stateDate',
  533. align: 'center',
  534. scopedSlots: { customRender: 'stateDate' },
  535. // sorter:() => {}
  536. },
  537. ];
  538. const indexValue = [
  539. {
  540. label:'花费',
  541. value:'charge',
  542. type:'pie',
  543. },
  544. {
  545. label:'激活数',
  546. value:'activation',
  547. type:'pie',
  548. },
  549. {
  550. label:'激活成本',
  551. value:'activationCost',
  552. type:'line',
  553. },
  554. {
  555. label:'ROI',
  556. value:'eventPayRoi',
  557. type:'line',
  558. },
  559. {
  560. label:'付费次数',
  561. value:'eventPay',
  562. type:'pie',
  563. },
  564. {
  565. label:'付费金额',
  566. value:'eventPayPurchaseAmount',
  567. type:'pie',
  568. },
  569. {
  570. label:'付费成本',
  571. value:'eventPayCost',
  572. type:'line',
  573. },
  574. {
  575. label:'次留数',
  576. value:'eventNextDayStay',
  577. type:'pie',
  578. },
  579. {
  580. label:'次留成本',
  581. value:'eventNextDayStayCost',
  582. type:'line',
  583. },
  584. ]
  585. const columnsFixd = [
  586. {
  587. title: '消耗',
  588. dataIndex: 'charge',
  589. key:'date',
  590. today:0,
  591. yesterday:0,
  592. },
  593. ]
  594. const columns=[
  595. {
  596. title: '激活成本',
  597. dataIndex: 'activationCost',
  598. key:'activationCost',
  599. today:0,
  600. yesterday:0
  601. },
  602. {
  603. title: '激活数',
  604. dataIndex: 'activation',
  605. key:'activation',
  606. today:0,
  607. yesterday:0
  608. },
  609. {
  610. title: '行为数',
  611. dataIndex: 'bclick',
  612. key:'bclick',
  613. today:0,
  614. yesterday:0
  615. },
  616. {
  617. title: '表单提交数',
  618. dataIndex: 'formCount',
  619. key:'formCount',
  620. today:0,
  621. yesterday:0
  622. },
  623. ]
  624. export default {
  625. name:'accountPage',
  626. components:{
  627. // DatePicker,
  628. customColumn,
  629. Treeselect
  630. },
  631. data() {
  632. return {
  633. selectaccountId:'',
  634. adPositionEchartSpinning:false,
  635. ageEchartSpinning:false,
  636. genderEchartSpinning:false,
  637. accountId:'',
  638. searchValue:'',
  639. searchValues:'',
  640. accountVisible:false,
  641. expandedKeys: [],
  642. autoExpandParent: true,
  643. gData:[],
  644. dataList:[],
  645. AggregateByHourList:[],
  646. columnsFixd,
  647. columns:[...columnsFixd,...columns],
  648. visible:false,
  649. listNum:[],
  650. newLink:'',
  651. linkVisible:false,
  652. targetVisible:false,
  653. isActive:'activationCost',
  654. moment,
  655. materialDate:[moment().subtract(1,'days'),moment().subtract(1,'days')],
  656. currentAccount:{},
  657. dateValue:[moment(),moment()],
  658. data:[],
  659. newColumns:[...newColumns],
  660. loading:false,
  661. ipagination: {
  662. current: 1,
  663. pageSize: 4,
  664. // pageSizeOptions: ['10', '20', '30'],
  665. showTotal: (total, range) => {
  666. return range[0] + "-" + range[1] + " 共" + total + "条"
  667. },
  668. showQuickJumper: true,
  669. showSizeChanger:false,
  670. pageSizeOptions: ['10', '30', '50'],
  671. total: 0,
  672. onChange: (current, pageSize) => {
  673. // 切换分页时的回调,
  674. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  675. this.ipagination.current = current;
  676. this.ipagination.pageSize= pageSize;
  677. }
  678. },
  679. bidErrorMessage:'',
  680. newBid:undefined,
  681. materialColumns,
  682. materialData:[],
  683. materialLoading:false,
  684. materialIpagination:{
  685. current: 1,
  686. pageSize: 3,
  687. // pageSizeOptions: ['10', '20', '30'],
  688. showTotal: (total, range) => {
  689. return range[0] + "-" + range[1] + " 共" + total + "条"
  690. },
  691. showQuickJumper: true,
  692. showSizeChanger:false,
  693. pageSizeOptions: ['10', '30', '50'],
  694. total: 0,
  695. onChange: (current, pageSize) => {
  696. // 切换分页时的回调,
  697. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  698. this.materialIpagination.current = current;
  699. this.materialIpagination.pageSize= pageSize;
  700. }
  701. },
  702. indexValue,
  703. timeDimension:'a',
  704. echartIndex:'charge',
  705. accountIndexEchartSpinning:false, //账户模块的指标的echart
  706. targetBodyEchartSpinning:false,
  707. materialBodyEchartSpinning:false,
  708. materialBodyUpdateTime:'',
  709. planBodyEchartSpinning:false,
  710. newDataSortCode:'charge',
  711. newDataSortType:'DESC',
  712. materialSortCode:"charge",
  713. materialSortType:'DESC',
  714. currentUnit:{},
  715. directionalList:[],
  716. selectDirectionalId:undefined,
  717. oldLink:'',//原先的检测链接
  718. accountPageSpinning:false,
  719. }
  720. },
  721. watch:{
  722. accountId(n,o){
  723. if(n){
  724. this.echartIndex='charge';
  725. this.getColumnsByAccountId();
  726. this.getAllIndex();
  727. this.getAgeData();
  728. this.getNewlyCounts();
  729. // this.getAccountIndexData();
  730. this.getLaunchData();
  731. this.getMaterialOverview();
  732. this.getSceneData();
  733. this.getGenderData()
  734. this.getMaterialData()
  735. this.getCurrentAccountInfo()
  736. }
  737. }
  738. },
  739. methods: {
  740. ...mapGetters([ 'userInfo']),
  741. // 跳转到拒审重提-创意页面
  742. gorejectCreativePage(){
  743. this.$router.push(`/Statistics/refuseDataCreatNew?accountId=${this.accountId}`)
  744. },
  745. // 点击修改定向
  746. editTarget(record){
  747. // console.log(res);(record);
  748. this.currentUnit=record;
  749. this.targetVisible=true;
  750. getAction('/kuaishou/batch/getDirectionalTemplate',{
  751. accountId:this.accountId,
  752. }).then(res=>{
  753. // console.log(res);(res);
  754. if(res.result){
  755. this.directionalList=res.result
  756. }
  757. })
  758. },
  759. editLink(record){
  760. this.currentUnit=record;
  761. this.linkVisible=true;
  762. getAction('/kuaishou/dingpan/getClickTrackUrlByUnitId',{
  763. accountId:this.accountId,
  764. unitId:record.unitId
  765. }).then(res=>{
  766. // console.log(res);(res);
  767. if(res.result){
  768. this.oldLink=res.result
  769. }
  770. })
  771. },
  772. changeAccount(){
  773. this.accountVisible=true;
  774. },
  775. accounthandleOk(){
  776. this.accountVisible=false;
  777. this.accountId=this.selectaccountId
  778. // this.getCurrentAccountInfo();
  779. },
  780. accountCancel(){
  781. this.accountVisible=false;
  782. },
  783. //自定义之后修改父元素表头
  784. changeColumn(val){
  785. if(this.AggregateByHourList.today && this.AggregateByHourList.yesterday){
  786. val.forEach(item=>{
  787. item.today=this.AggregateByHourList.today[item.dataIndex];
  788. item.yesterday=this.AggregateByHourList.yesterday[item.dataIndex]
  789. })
  790. this.columns=[...val];
  791. let arr = JSON.stringify(this.columns)
  792. postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJsonByAccountId', {
  793. json: arr,
  794. columnType: 10,
  795. accountId:this.accountId
  796. }).then(res => {
  797. // // console.log(res);(res)
  798. })
  799. this.isActive=this.columns[1].dataIndex
  800. this.getAccountIndexData()
  801. }else{
  802. // this.$message.error('暂无数据,不支持修改自定义列')
  803. this.columns=[...val];
  804. let arr = JSON.stringify(this.columns)
  805. postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJsonByAccountId', {
  806. json: arr,
  807. columnType: 10,
  808. accountId:this.accountId
  809. }).then(res => {
  810. // // console.log(res);(res)
  811. })
  812. this.isActive=this.columns[1].dataIndex
  813. this.getAccountIndexData()
  814. }
  815. },
  816. getColumnsByAccountId(){
  817. postAction('/toutiao/videoReportDaily/getColumnJsonByAccountId', {
  818. columnType: 10,
  819. accountId:this.accountId
  820. }).then(res => {
  821. // // console.log(res);(res)
  822. if (res.success) {
  823. // // console.log(res);(JSON.parse(res.result))
  824. if(res.result){
  825. let columns = JSON.parse(res.result)
  826. if (columns.length) {
  827. if (columns.length >= columnsFixd.length) {
  828. columns = columns.slice(columnsFixd.length)
  829. this.columns = [...columnsFixd, ...columns]
  830. }
  831. // // console.log(res);(this.columns)
  832. }
  833. this.isActive=this.columns[1].dataIndex
  834. }
  835. this.changeColumn(this.columns);
  836. this.getAccountIndexData()
  837. }
  838. })
  839. },
  840. closeCustomColumn(){
  841. this.visible=false;
  842. },
  843. //弹出框打开,自定义列
  844. customColumns() {
  845. this.visible = true
  846. this.listNum = [...this.columns]
  847. },
  848. // 监测链接修改OK事件
  849. linkhandleOk(e){
  850. this.linkVisible=false;
  851. getAction('/kuaishou/dingpan/updateClickTrackUrlByUnitId',{
  852. accountId:this.accountId,
  853. unitId:this.currentUnit.unitId,
  854. clickTrackUr:this.newLink
  855. }).then(res=>{
  856. // console.log(res);(res)
  857. this.newLink='';
  858. if(res.success){
  859. this.$message.success('修改成功')
  860. }else{
  861. this.$message.error('修改失败,请重试')
  862. }
  863. })
  864. },
  865. linkhandleCancel(){
  866. this.linkVisible=false;
  867. this.newLink='';
  868. },
  869. // 定向包修改OK事件
  870. targethandleOk(e){
  871. this.targetVisible=false;
  872. getAction('/kuaishou/dingpan/updateTemplate',{
  873. accountId:this.accountId,
  874. unitId:this.currentUnit.unitId,
  875. templateId:this.selectDirectionalId
  876. }).then(res=>{
  877. if(res.success){mat
  878. this.$message.success('修改成功')
  879. }else{
  880. this.$message.error('修改失败,请重试')
  881. }
  882. this.selectDirectionalId=undefined
  883. })
  884. },
  885. targethandleCancel(){
  886. this.targetVisible=false;
  887. this.selectDirectionalId=undefined
  888. },
  889. getActiveIndexName(val){
  890. this.isActive=val.dataIndex;
  891. this.getAccountIndexData()
  892. },
  893. showIndexChangeBox(){
  894. this.visible=true;
  895. this.listNum = [...this.columns]
  896. },
  897. disabledDate(current) {
  898. return current && !(current > (moment().subtract(1,'months')) && current < moment())
  899. },
  900. onChange(date, dateString) {
  901. // console.log(res);(date, dateString);
  902. this.getAllIndex();
  903. this.getAccountIndexData()
  904. },
  905. materialDataChange(date, dateString){
  906. // console.log(res);(date, dateString);
  907. this.materialIpagination.current=1
  908. this.getMaterialData()
  909. this.getMaterialOverview()
  910. },
  911. initAccountIndexEchart(type,data){
  912. // let type='激活'
  913. // console.log(res);(data)
  914. let option = {
  915. tooltip: {
  916. trigger: 'axis',
  917. formatter: `${type}<br />{a0} {b0}: {c0}<br />{a1} {b1}: {c1}`
  918. },
  919. grid:{
  920. left:'5px',
  921. top:0,
  922. right:'5px',
  923. bottom:0
  924. },
  925. xAxis:[
  926. {
  927. type: 'category',
  928. show:false,
  929. boundaryGap: false,
  930. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  931. },
  932. {
  933. type: 'category',
  934. show:false,
  935. boundaryGap: false,
  936. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  937. },
  938. ] ,
  939. yAxis: {
  940. type: 'value',
  941. show:false,
  942. },
  943. series: [
  944. {
  945. name: '昨天',
  946. data: [800, 962, 930, 950, 1200, 1380, 1420],
  947. type: 'line',
  948. smooth: true,
  949. xAxisIndex: 0,
  950. showSymbol: false,
  951. symbol: 'circle',
  952. lineStyle: {
  953. color: '#3CC6A5',
  954. width: 3,
  955. },
  956. itemStyle:{
  957. color:'#3CC6A5',
  958. borderWidth:2,
  959. borderColor:'#fff'
  960. },
  961. },
  962. {
  963. name: '今天',
  964. data: [820, 932, 901, 934, 1290, 1330, 1320],
  965. type: 'line',
  966. smooth: true,
  967. showSymbol: false,
  968. xAxisIndex: 1,
  969. symbol: 'circle',
  970. lineStyle: {
  971. color: '#2461F1',
  972. width: 3,
  973. },
  974. itemStyle:{
  975. color:'#2461F1',
  976. borderWidth:2,
  977. borderColor:'#fff'
  978. },
  979. areaStyle: {
  980. color:{
  981. type: 'linear',
  982. x: 0,
  983. y: 0,
  984. x2: 0,
  985. y2: 1,
  986. colorStops: [{
  987. offset: 0, color: '#2461F1' // 0% 处的颜色
  988. }, {
  989. offset: 1, color: 'white' // 100% 处的颜色
  990. }],
  991. }
  992. }
  993. },
  994. ]
  995. };
  996. // 单一天数
  997. if(this.dateValue[0]==this.dateValue[1]){
  998. option.xAxis[0].data=data.xData;
  999. option.xAxis[1].data=data.xData;
  1000. }else{
  1001. // 时间段
  1002. option.xAxis[0].data=data.xData?data.xData.yesterday:[]
  1003. option.xAxis[1].data=data.xData?data.xData.today:[]
  1004. }
  1005. option.series[0].name=data.yData.yesterday.name
  1006. option.series[1].name=data.yData.today.name
  1007. option.series[0].data=data.yData.yesterday.data
  1008. option.series[1].data=data.yData.today.data
  1009. return option
  1010. },
  1011. initGaugechart(value){
  1012. var dataArr = value;
  1013. var colorSet = {
  1014. color: '#fff'
  1015. };
  1016. let option = {
  1017. // backgroundColor: '#0E1327',
  1018. tooltip: {
  1019. formatter: "{a} <br/>{b} : {c}%"
  1020. },
  1021. series: [
  1022. {
  1023. name: "内部进度条",
  1024. type: "gauge",
  1025. // center: ['20%', '50%'],
  1026. radius: '40%',
  1027. splitNumber: 10,
  1028. axisLine: {
  1029. lineStyle: {
  1030. color: [
  1031. [dataArr / 100, colorSet.color],
  1032. [1, "#111F42"]
  1033. ],
  1034. width: 8
  1035. }
  1036. },
  1037. axisLabel: {
  1038. show: false,
  1039. },
  1040. axisTick: {
  1041. show: false,
  1042. },
  1043. splitLine: {
  1044. show: false,
  1045. },
  1046. itemStyle: {
  1047. show: false,
  1048. },
  1049. detail: {
  1050. formatter: function(value) {
  1051. if (value !== 0) {
  1052. var num = Math.round(value ) ;
  1053. return parseInt(num).toFixed(0)+"%";
  1054. } else {
  1055. return 0;
  1056. }
  1057. },
  1058. offsetCenter: [0, 52],
  1059. textStyle: {
  1060. padding: [0, 0, 0, 0],
  1061. fontSize: 18,
  1062. fontWeight: '700',
  1063. color: colorSet.color
  1064. }
  1065. },
  1066. title: { //标题
  1067. show: true,
  1068. offsetCenter: [0, 80], // x, y,单位px
  1069. textStyle: {
  1070. color: "#fff",
  1071. fontSize: 14, //表盘上的标题文字大小
  1072. fontWeight: 400,
  1073. fontFamily: 'PingFangSC'
  1074. }
  1075. },
  1076. data: [{
  1077. name: "点击-激活率",
  1078. value: dataArr,
  1079. }],
  1080. pointer: {
  1081. show: true,
  1082. length: '75%',
  1083. radius: '20%',
  1084. width: 3, //指针粗细
  1085. },
  1086. animationDuration: 4000,
  1087. },
  1088. {
  1089. name: '外部刻度',
  1090. type: 'gauge',
  1091. // center: ['20%', '50%'],
  1092. radius: '50%',
  1093. min: 0, //最小刻度
  1094. max: 100, //最大刻度
  1095. splitNumber: 5, //刻度数量
  1096. startAngle: 225,
  1097. endAngle: -45,
  1098. axisLine: {
  1099. show: true,
  1100. lineStyle: {
  1101. width: 1,
  1102. color: [
  1103. [1, 'rgba(0,0,0,0)']
  1104. ]
  1105. }
  1106. }, //仪表盘轴线
  1107. axisLabel: {
  1108. show: true,
  1109. color: '#fff',
  1110. distance: -20,
  1111. formatter: function(v) {
  1112. switch (v + '') {
  1113. case '0':
  1114. return '0';
  1115. case '10':
  1116. return '10';
  1117. case '20':
  1118. return '20';
  1119. case '30':
  1120. return '30';
  1121. case '40':
  1122. return '40';
  1123. case '50':
  1124. return '50';
  1125. case '60':
  1126. return '60';
  1127. case '70':
  1128. return '70';
  1129. case '80':
  1130. return '80';
  1131. case '90':
  1132. return '90';
  1133. case '100':
  1134. return '100';
  1135. }
  1136. }
  1137. }, //刻度标签。
  1138. axisTick: {
  1139. show: true,
  1140. splitNumber: 5,
  1141. lineStyle: {
  1142. color: colorSet.color, //用颜色渐变函数不起作用
  1143. width: 1,
  1144. },
  1145. length: -8
  1146. }, //刻度样式
  1147. splitLine: {
  1148. show: true,
  1149. length: -10,
  1150. lineStyle: {
  1151. color: colorSet.color, //用颜色渐变函数不起作用
  1152. }
  1153. }, //分隔线样式
  1154. detail: {
  1155. show: false
  1156. },
  1157. pointer: {
  1158. show: false
  1159. }
  1160. },
  1161. ]
  1162. };
  1163. return option
  1164. },
  1165. initNewDataChart(data){
  1166. let option = {
  1167. tooltip: {
  1168. trigger: 'axis'
  1169. },
  1170. legend: {
  1171. data: ['新上计划数', '新上组数', '新上创意数']
  1172. },
  1173. xAxis: {
  1174. type: 'category',
  1175. data: data.xdata,
  1176. axisLine: {
  1177. onZero: false,
  1178. lineStyle: {
  1179. color: '#999'
  1180. }
  1181. },
  1182. },
  1183. yAxis: {
  1184. type: 'value',
  1185. axisLine: {
  1186. onZero: false,
  1187. show:false,
  1188. color: '#999',
  1189. lineStyle: {
  1190. color: '#999'
  1191. }
  1192. },
  1193. },
  1194. series: [
  1195. {
  1196. name: '新上计划数',
  1197. data: data.campaign,
  1198. type: 'line',
  1199. smooth: true,
  1200. showSymbol: false,
  1201. symbol: 'circle',
  1202. lineStyle: {
  1203. color: '#AC8BF9',
  1204. width: 3,
  1205. },
  1206. itemStyle:{
  1207. color:'#AC8BF9',
  1208. borderWidth:2,
  1209. borderColor:'#fff'
  1210. }
  1211. },
  1212. {
  1213. name: '新上组数',
  1214. data: data.unit,
  1215. type: 'line',
  1216. smooth: true,
  1217. symbol: 'circle',
  1218. showSymbol: false,
  1219. lineStyle: {
  1220. color: '#4CA4F9',
  1221. width: 3,
  1222. },
  1223. itemStyle:{
  1224. color:'#4CA4F9',
  1225. borderWidth:2,
  1226. borderColor:'#fff',
  1227. }
  1228. },
  1229. {
  1230. name: '新上创意数',
  1231. data: data.creative,
  1232. type: 'line',
  1233. smooth: true,
  1234. symbol: 'circle',
  1235. showSymbol: false,
  1236. lineStyle: {
  1237. color: '#3CC6A5',
  1238. width: 3,
  1239. },
  1240. itemStyle:{
  1241. color:'#3CC6A5',
  1242. borderWidth:3,
  1243. borderColor:'#fff'
  1244. }
  1245. },
  1246. ]
  1247. };
  1248. return option
  1249. },
  1250. initMaterialChart(data){
  1251. let option={
  1252. legend: {
  1253. data: ['新上计划数', '新上组数', '新上创意数']
  1254. },
  1255. xAxis:[
  1256. {
  1257. // ['新上素材数量', '有效素材', '爆量素材','新上素材使用数', '新上素材使用率',''],
  1258. // name:"a",
  1259. type: 'category',
  1260. data: ['新上素材数量', '有效素材', '爆量素材',''],
  1261. axisLine: {
  1262. show:false,
  1263. },
  1264. axisTick:{
  1265. show:false,
  1266. }
  1267. },
  1268. {
  1269. // name:"b",
  1270. // ['素材总数','','','','',''], 对应上面的数据 等要加新上素材使用率时 x轴数据切换为当前注释这个
  1271. type: 'category',
  1272. data: ['素材总数','','',''],
  1273. nameLocation: 'end',
  1274. axisLine: {
  1275. show:false,
  1276. },
  1277. axisTick:{
  1278. show:false,
  1279. },
  1280. position: 'bottom',
  1281. inverse: true
  1282. },
  1283. ] ,
  1284. yAxis:[
  1285. {
  1286. type: 'value',
  1287. show:false,
  1288. axisLine: {
  1289. onZero: false,
  1290. show:false,
  1291. color: '#999',
  1292. lineStyle: {
  1293. color: '#999'
  1294. }
  1295. },
  1296. },
  1297. {
  1298. type: 'value',
  1299. show:false,
  1300. axisLine: {
  1301. onZero: false,
  1302. show:false,
  1303. color: '#999',
  1304. lineStyle: {
  1305. color: '#999'
  1306. }
  1307. },
  1308. position: 'right',
  1309. // inverse: true
  1310. },
  1311. ] ,
  1312. series: [
  1313. {
  1314. data: data.data1,
  1315. type: 'bar',
  1316. barWidth: '30%',
  1317. xAxisIndex:0,
  1318. label:{
  1319. show:true,
  1320. position:'top',
  1321. distance: 10 ,
  1322. },
  1323. backgroundStyle:{
  1324. borderRadius:[2, 2, 0, 0],
  1325. },
  1326. itemStyle:{
  1327. // normal: {
  1328. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1329. offset: 0,
  1330. color: '#7820FF'
  1331. }, {
  1332. offset: 1,
  1333. color: '#3470FF'
  1334. }]),
  1335. barBorderRadius:[5, 5, 0, 0],
  1336. // },
  1337. },
  1338. },
  1339. {
  1340. data: data.data2,
  1341. type: 'bar',
  1342. barWidth: '30%',
  1343. xAxisIndex:1,
  1344. yAxisIndex:1,
  1345. label:{
  1346. show:true,
  1347. position:'top',
  1348. distance: 10 ,
  1349. },
  1350. backgroundStyle:{
  1351. borderRadius:[0, 0, 5, 5],
  1352. },
  1353. itemStyle:{
  1354. // normal: {
  1355. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  1356. offset: 0,
  1357. color: '#7820FF'
  1358. }, {
  1359. offset: 1,
  1360. color: '#3470FF'
  1361. }]),
  1362. barBorderRadius:[5, 5, 0, 0],
  1363. // },
  1364. },
  1365. },
  1366. ]
  1367. }
  1368. return option
  1369. },
  1370. //
  1371. initAdpositionChart(type,data){
  1372. // console.log(res);(type,data)
  1373. let option={};
  1374. if(type=='line'){
  1375. option= this.getLineOption(data);
  1376. }else if( type=='pie'){
  1377. option= this.getPieOption(data);
  1378. }
  1379. return option
  1380. },
  1381. getLineOption(data){
  1382. const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
  1383. let lineOption = {
  1384. tooltip: {
  1385. trigger: 'axis',
  1386. formatter: ''
  1387. },
  1388. legend: {
  1389. // data: data.legend,
  1390. orient: 'horizontal',
  1391. left: '3%',
  1392. top:'top',
  1393. icon:'circle'
  1394. },
  1395. xAxis: {
  1396. show:true,
  1397. type: 'category',
  1398. data: [moment().subtract(8,'days').format('YYYY-MM-DD'), moment().subtract(7,'days').format('YYYY-MM-DD'), moment().subtract(6,'days').format('YYYY-MM-DD'), moment().subtract(5,'days').format('YYYY-MM-DD'), moment().subtract(4,'days').format('YYYY-MM-DD'), moment().subtract(3,'days').format('YYYY-MM-DD'), moment().subtract(2,'days').format('YYYY-MM-DD')],
  1399. axisLine: {
  1400. onZero: false,
  1401. lineStyle: {
  1402. color: '#999'
  1403. }
  1404. },
  1405. },
  1406. yAxis: {
  1407. type: 'value',
  1408. show:true,
  1409. axisLine: {
  1410. onZero: false,
  1411. show:false,
  1412. color: '#999',
  1413. lineStyle: {
  1414. color: '#999'
  1415. }
  1416. },
  1417. },
  1418. series: [
  1419. ]
  1420. };
  1421. data.yData.forEach((item,index)=>{
  1422. lineOption.series.push({
  1423. name: item.name,
  1424. data: item.data,
  1425. type: 'line',
  1426. smooth: true,
  1427. showSymbol: false,
  1428. symbol: 'circle',
  1429. lineStyle: {
  1430. color: colorList[index],
  1431. width: 3,
  1432. },
  1433. itemStyle:{
  1434. color:colorList[index],
  1435. borderWidth:2,
  1436. borderColor:'#fff'
  1437. }
  1438. })
  1439. })
  1440. return lineOption
  1441. },
  1442. getPieOption(data){
  1443. const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
  1444. let option = {
  1445. tooltip: {
  1446. trigger: 'item',
  1447. formatter: '{a} <br/>{b} : {c} ({d}%)'
  1448. },
  1449. legend: {
  1450. // orient: 'vertical',
  1451. // left: '3%',
  1452. // top:'center',
  1453. // icon:'circle'
  1454. orient: 'horizontal',
  1455. left: '3%',
  1456. top:'top',
  1457. icon:'circle'
  1458. },
  1459. toolbox: {
  1460. show: true,
  1461. },
  1462. xAxis: {
  1463. show:false
  1464. },
  1465. yAxis: {
  1466. show:false
  1467. },
  1468. series: [
  1469. ]
  1470. }
  1471. option.series=[];
  1472. option.series.push(
  1473. {
  1474. name:'',
  1475. type: 'pie',
  1476. radius: ['40%', '70%'],
  1477. labelLine:{
  1478. length:5,
  1479. length2:5
  1480. },
  1481. label:{
  1482. show: false,
  1483. position:'center'
  1484. },
  1485. emphasis: {
  1486. label: {
  1487. show: true,
  1488. fontSize: '18',
  1489. fontWeight: 'bold'
  1490. }
  1491. },
  1492. labelLine: {
  1493. show: true
  1494. },
  1495. itemStyle: {
  1496. borderRadius: 5,
  1497. color: (params) => {
  1498. return colorList[params.dataIndex]
  1499. }
  1500. },
  1501. data: data
  1502. }
  1503. )
  1504. return option
  1505. },
  1506. //获取echart的值
  1507. initEchart(idName, optionName) {
  1508. const chart = this.$refs[idName]
  1509. // // console.log(res);(chart)
  1510. if (chart) {
  1511. const myChart = echarts.init(document.getElementById(idName))
  1512. // myChart.showLoading({
  1513. // text: "图表数据正在努力加载..."
  1514. // });
  1515. myChart.clear()
  1516. myChart.setOption(optionName)
  1517. window.addEventListener('resize', function() {
  1518. myChart.resize()
  1519. })
  1520. }
  1521. },
  1522. //点击分页
  1523. sort(pagination, filters, sorter, { currentDataSource }){
  1524. // console.log(res);(pagination, filters, sorter)
  1525. this.ipagination.current=pagination.current;
  1526. this.ipagination.pageSize=pagination.pageSize;
  1527. if(sorter.order=="descend"){
  1528. this.newDataSortType='DESC'
  1529. this.newDataSortCode=sorter.columnKey
  1530. }else if(sorter.order=="ascend"){
  1531. this.newDataSortType='ASC'
  1532. this.newDataSortCode=sorter.columnKey
  1533. }else{
  1534. this.newDataSortType='DESC'
  1535. this.newDataSortCode='charge'
  1536. }
  1537. this.getLaunchData()
  1538. },
  1539. materialChange(pagination, filters, sorter, { currentDataSource }){
  1540. // console.log(res);(pagination)
  1541. this.materialIpagination.current=pagination.current;
  1542. this.materialIpagination.pageSize=pagination.pageSize;
  1543. if(sorter.order=="descend"){
  1544. this.materialSortType='DESC'
  1545. this.materialSortCode=sorter.columnKey
  1546. }else if(sorter.order=="ascend"){
  1547. this.materialSortType='ASC'
  1548. this.materialSortCode=sorter.columnKey
  1549. }else{
  1550. this.materialSortType='DESC'
  1551. this.materialSortCode='charge'
  1552. }
  1553. this.getMaterialData()
  1554. },
  1555. visibleChange(){
  1556. this.bidErrorMessage='';
  1557. this.examineAgainType=1;
  1558. this.newBid=undefined;
  1559. },
  1560. bidChangeCancel(record){
  1561. record.visible=false;
  1562. this.newBid=undefined;
  1563. this.bidErrorMessage=''
  1564. },
  1565. bidChangeOk(record){
  1566. if(this.newBid){
  1567. record.visible=false;
  1568. getAction('/kuaishou/dingpan/updateBid',{
  1569. accountId:record.accountId,
  1570. bid:this.newBid*1000,
  1571. unitId:record.unitId,
  1572. bidType:record.bidType
  1573. }).then(res=>{
  1574. // console.log(res);(res)
  1575. if(res.code==0){
  1576. this.$message.success(res.message)
  1577. this.newBid=undefined;
  1578. this.getLaunchData()
  1579. }
  1580. })
  1581. }else{
  1582. this.bidErrorMessage='请正确填写出价'
  1583. // this.$message.error('请正确填写出价')
  1584. }
  1585. },
  1586. //状态改变
  1587. switchChange(text,record){
  1588. // this.spinning=true;
  1589. // console.log(res);(text,record)
  1590. record.spin=true;
  1591. let putStatus=text==1?2:1;
  1592. postAction(`/kuaishou/batch/batchUpdateUnitStatus`,{
  1593. accountId:this.accountId,
  1594. unitIds:[record.unitId],
  1595. id:record.id,
  1596. putStatus
  1597. }).then((res)=>{
  1598. record.spin=false;
  1599. if(res.success){
  1600. this.getLaunchData()
  1601. this.$message.success(res.message)
  1602. }else{
  1603. this.$message.error(res.message)
  1604. }
  1605. })
  1606. },
  1607. //
  1608. echartIndexChange(val){
  1609. // console.log(res);(`Selected: ${val}`);
  1610. this.getAgeData();
  1611. this.getGenderData();
  1612. this.getSceneData()
  1613. },
  1614. // 获取当日广告组投放数据
  1615. getLaunchData(){
  1616. this.loading = true
  1617. // // console.log(res);(this.accountId)
  1618. postAction('/etl/kuaiShouGroupDailyReport/queryPageList',{
  1619. accountId:this.accountId,
  1620. sortCode:this.newDataSortCode,
  1621. sortType:this.newDataSortType,
  1622. pageNo:this.ipagination.current,
  1623. pageSize:this.ipagination.pageSize
  1624. }).then((res)=>{
  1625. this.data=[]
  1626. // console.log(res);(res)
  1627. this.loading = false
  1628. if(res.success){
  1629. this.ipagination.total = res.result.total
  1630. res.result.list.forEach((item)=>{
  1631. item.key=item.id;
  1632. item.show=false;
  1633. item.visible=false;
  1634. item.spin=false;
  1635. })
  1636. this.data = res.result.list;
  1637. }
  1638. })
  1639. },
  1640. getMaterialData(){
  1641. this.materialLoading = true
  1642. // // console.log(res);(this.accountId)
  1643. postAction('/ctop/kuaishouVideoEtlInfo/queryPageList',{
  1644. accountId:this.accountId,
  1645. pageNo:this.materialIpagination.current,
  1646. pageSize:this.materialIpagination.pageSize,
  1647. sortCode:this.materialSortCode,
  1648. sortType:this.materialSortType,
  1649. startTime:this.materialDate[0].format('YYYY-MM-DD'),
  1650. endTime:this.materialDate[1].format('YYYY-MM-DD')
  1651. }).then((res)=>{
  1652. this.materialData=[]
  1653. // console.log(res);(res)
  1654. this.materialLoading = false
  1655. if(res.success){
  1656. this.materialIpagination.total = res.result.total
  1657. // res.result.list.forEach((item)=>{
  1658. // item.key=item.id;
  1659. // item.show=false;
  1660. // item.visible=false;
  1661. // item.spin=false;
  1662. // })
  1663. this.materialData = res.result.list;
  1664. }
  1665. })
  1666. },
  1667. handlerTypeOfIndex(val){
  1668. let type=''
  1669. this.indexValue.forEach(item=>{
  1670. if(item.value==val){
  1671. type= item.type
  1672. }
  1673. })
  1674. return type
  1675. },
  1676. getAllIndex(){
  1677. postAction('/etl/reportAccountHourly/getAggregateByHour',{
  1678. accountId:this.accountId,
  1679. startTime:this.dateValue[0].format('YYYY-MM-DD'),
  1680. endTime:this.dateValue[1].format('YYYY-MM-DD'),
  1681. }).then(res=>{
  1682. // console.log(res);(res);
  1683. if(res.success){
  1684. this.AggregateByHourList=res.result;
  1685. this.columns.forEach(item=>{
  1686. item.today=res.result.today?res.result.today[item.dataIndex]:0;
  1687. item.yesterday=res.result.yesterday?res.result.yesterday[item.dataIndex]:0
  1688. })
  1689. let activationRatio=res.result.today?res.result.today.activationRatio:0
  1690. this.initEchart('gaugeEchart',this.initGaugechart(activationRatio))
  1691. }
  1692. })
  1693. },
  1694. getAccountId(){
  1695. postAction('/ctop/projectMember/participateListByMediaId',{
  1696. userId:this.userInfo().id,
  1697. type :'kuaishou',
  1698. }).then(res=>{
  1699. // console.log(res);(res);
  1700. this.accountList=res.result
  1701. })
  1702. },
  1703. getCurrentAccountInfo(val){
  1704. this.accountPageSpinning=true
  1705. getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{
  1706. accountId:val || this.accountId ||undefined,
  1707. }).then(res=>{
  1708. if(res.success){
  1709. this.currentAccount=res.result;
  1710. // this.accountId=res.result.accountId
  1711. this.accountPageSpinning=false
  1712. }else{
  1713. this.accountPageSpinning=false;
  1714. this.$message.error(res.message)
  1715. this.currentAccount={};
  1716. }
  1717. })
  1718. },
  1719. // z账户的昨日今日数据趋势图
  1720. getAccountIndexData(){
  1721. let indexName=''
  1722. this.columns.forEach(item=>{
  1723. if(item.dataIndex==this.isActive){
  1724. indexName= item.title
  1725. }
  1726. })
  1727. this.accountIndexEchartSpinning=true
  1728. postAction('/etl/reportAccountHourly/getEtlReportList',{
  1729. accountId:this.accountId,
  1730. startTime:this.dateValue[0].format('YYYY-MM-DD'),
  1731. endTime:this.dateValue[1].format('YYYY-MM-DD'),
  1732. value:this.isActive,
  1733. }).then(res=>{
  1734. // console.log(res);(res);
  1735. this.accountIndexEchartSpinning=false;
  1736. if(res.success){
  1737. let data={
  1738. xData:null,
  1739. yData:{
  1740. yesterday:{
  1741. name:"",
  1742. data:[]
  1743. },
  1744. today:{
  1745. name:"",
  1746. data:[]
  1747. },
  1748. }
  1749. };
  1750. // 单天的数据
  1751. if(res.result.yesterday.length&&res.result.yesterday[0].statHour==0){
  1752. data.xData=[];
  1753. data.xData= Array.apply(null, Array(24)).map((item, i)=> {return i<10?`0${i}:00`:`${i}:00`});
  1754. data.yData.yesterday.name=moment(this.dateValue[0]).subtract(1,'days').format('YYYY-MM-DD');
  1755. data.yData.today.name=this.dateValue[0].format('YYYY-MM-DD')
  1756. data.yData.yesterday.data=res.result.yesterday.map((item,index)=>{
  1757. return item.value?item.value:0
  1758. })
  1759. data.yData.today.data=res.result.today.map((item,index)=>{
  1760. return item.value?item.value:0
  1761. })
  1762. // console.log(data)
  1763. this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
  1764. }else if(res.result.yesterday.length&&!res.result.yesterday[0].statHour){
  1765. // 时间段的
  1766. data.xData={};
  1767. data.xData.yesterday=res.result.yesterday.map(item=>{
  1768. return item.statDate
  1769. })
  1770. data.xData.today=res.result.today.map(item=>item.statDate);
  1771. data.yData.yesterday.name='';
  1772. data.yData.today.name='';
  1773. data.yData.yesterday.data=res.result.yesterday.map(item=>item.value)
  1774. data.yData.today.data=res.result.today.map(item=>item.value)
  1775. // console.log(data)
  1776. this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
  1777. }else{
  1778. }
  1779. this.accountIndexEchartSpinning=false;
  1780. // setTimeout(()=>{
  1781. // this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,data))
  1782. // },0)
  1783. }else{
  1784. this.accountIndexEchartSpinning=false;
  1785. this.initEchart('accountIndexEchart',this.initAccountIndexEchart(indexName,[]))
  1786. }
  1787. })
  1788. },
  1789. // 年龄对应图
  1790. getAgeData(){
  1791. this.ageEchartSpinning=true
  1792. let type=this.handlerTypeOfIndex(this.echartIndex);
  1793. // // console.log(res);(this.echartIndex)
  1794. postAction('/etl/audienceAccountDaily/getAgeInfo',{
  1795. accountId:this.accountId,
  1796. value:this.echartIndex,
  1797. dataType:type,
  1798. }).then(res=>{
  1799. // console.log(res);(res);
  1800. this.ageEchartSpinning=false
  1801. let data;
  1802. if(res.result&&res.success){
  1803. if(type=='pie'){
  1804. data=res.result.map(item=>{
  1805. return {
  1806. name:item.type,
  1807. value:item.value
  1808. }
  1809. });
  1810. this.initEchart('ageEchart',this.initAdpositionChart(type,data))
  1811. }else{
  1812. this.initEchart('ageEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
  1813. }
  1814. // this.$nextTick(()=>{
  1815. // this.initEchart('ageEchart',this.initAdpositionChart(type,data))
  1816. // })
  1817. }else{
  1818. this.initEchart('ageEchart',{})
  1819. }
  1820. })
  1821. },
  1822. handlerLineData(res){
  1823. let data;
  1824. data={
  1825. yData:[],
  1826. legend:[],
  1827. };
  1828. data.legend=[];
  1829. res.result.forEach(item=>{
  1830. if(data.legend.indexOf(item.type)==-1){
  1831. data.legend.push(item.type)
  1832. }
  1833. });
  1834. // // console.log(res);(data)
  1835. data.legend.forEach((item,index)=>{
  1836. data.yData.push({
  1837. name:item,
  1838. data:[]
  1839. })
  1840. res.result.forEach((ele)=>{
  1841. if(item==ele.type){
  1842. data.yData[index].data.push(ele.value)
  1843. }
  1844. });
  1845. })
  1846. return data
  1847. },
  1848. // 性别对应数据图
  1849. getGenderData(){
  1850. this.genderEchartSpinning=true
  1851. let type=this.handlerTypeOfIndex(this.echartIndex);
  1852. // // console.log(res);(this.echartIndex)
  1853. postAction('/etl/audienceAccountDaily/getSexInfo',{
  1854. accountId:this.accountId,
  1855. value:this.echartIndex,
  1856. dataType:type,
  1857. }).then(res=>{
  1858. // console.log(res);(res);
  1859. this.genderEchartSpinning=false
  1860. let data=[]
  1861. if(res.success&&res.result){
  1862. if(type=='pie'){
  1863. data=res.result.map(item=>{
  1864. return {
  1865. name:item.type,
  1866. value:item.value
  1867. }
  1868. });
  1869. this.initEchart('genderEchart',this.initAdpositionChart(type,data))
  1870. }else{
  1871. this.initEchart('genderEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
  1872. }
  1873. }else{
  1874. this.initEchart('genderEchart',{})
  1875. }
  1876. })
  1877. },
  1878. // 投放版位对应数据图
  1879. getSceneData(){
  1880. this.adPositionEchartSpinning=true;
  1881. let type=this.handlerTypeOfIndex(this.echartIndex);
  1882. // // console.log(res);(this.echartIndex)
  1883. postAction('/etl/audienceAccountDaily/getSceneInfo',{
  1884. accountId:this.accountId,
  1885. value:this.echartIndex,
  1886. dataType:type,
  1887. }).then(res=>{
  1888. // // console.log(res);(res);
  1889. this.adPositionEchartSpinning=false;
  1890. let data;
  1891. if(res.success&&res.result){
  1892. if(type=='pie'){
  1893. data=res.result.map(item=>{
  1894. return {
  1895. name:item.type,
  1896. value:item.value
  1897. }
  1898. });
  1899. this.initEchart('adPositionEchart',this.initAdpositionChart(type,data))
  1900. }else{
  1901. this.initEchart('adPositionEchart',this.initAdpositionChart(type,this.handlerLineData(res)))
  1902. }
  1903. }else{
  1904. this.$message.error(res.message)
  1905. this.initEchart('adPositionEchart',{})
  1906. }
  1907. })
  1908. },
  1909. // 获取七日上新数据
  1910. getNewlyCounts(){
  1911. this.planBodyEchartSpinning=true
  1912. getAction('/etl/kuaiShouNewly/getNewlyCounts',{
  1913. accountId:this.accountId
  1914. }).then(res=>{
  1915. // console.log(res);(res)
  1916. if(res.success){
  1917. let data={
  1918. xdata:[],
  1919. campaign:[],
  1920. creative:[],
  1921. unit:[]
  1922. };
  1923. res.result.forEach(item=>{
  1924. if(data.xdata.indexOf(item.statDate)==-1){
  1925. data.xdata.push(item.statDate)
  1926. }
  1927. if(item.newType=='campaign'){
  1928. data.campaign.push(item.newCount)
  1929. }else if(item.newType=='creative'){
  1930. data.creative.push(item.newCount)
  1931. }else if(item.newType=='unit'){
  1932. data.unit.push(item.newCount)
  1933. }
  1934. })
  1935. this.planBodyEchartSpinning=false;
  1936. this.initEchart('newDataEchart',this.initNewDataChart(data))
  1937. }
  1938. })
  1939. },
  1940. // 素材柱形图的数据
  1941. getMaterialOverview(){
  1942. this.materialBodyEchartSpinning=true
  1943. getAction('/material/etlKuaiShouAccountMaterialOverview/getMaterialOverview',{
  1944. accountId:this.accountId,
  1945. statDate:moment().subtract(1,'days').format('YYYY-MM-DD'),
  1946. }).then(res=>{
  1947. // console.log(res);(res)
  1948. this.materialBodyEchartSpinning=false;
  1949. if(res.success&&res.result){
  1950. let data={
  1951. data1:[res.result.newlyCount,res.result.effectiveCount,res.result.hotMoneyCount],
  1952. data2:[res.result.totalCount]
  1953. }
  1954. this.materialBodyEchartSpinning=false;
  1955. this.materialBodyUpdateTime=res.result.updateTime
  1956. this.initEchart('materialEchart',this.initMaterialChart(data))
  1957. }
  1958. })
  1959. },
  1960. },
  1961. mounted() {
  1962. this.getAccountId();
  1963. this.accountPageSpinning=true
  1964. // getAction('/etl/reportAccountHourly/getMaxChargeAccountId',{
  1965. // userId:this.userInfo().id,
  1966. // }).then(res=>{
  1967. // if(res.success){
  1968. // this.currentAccount=res.result;
  1969. // this.accountId=res.result.accountId;
  1970. // this.selectaccountId=res.result.accountId;
  1971. // this.accountPageSpinning=false
  1972. // }else{
  1973. // this.$message.error(res.message)
  1974. // this.accountPageSpinning=false
  1975. // }
  1976. // })
  1977. getAction('/etl/reportAccountHourly/getMaxChargeAccountIdByUser',{
  1978. userId:this.userInfo().id,
  1979. }).then(res=>{
  1980. if(res.success){
  1981. // this.currentAccount=res.result;
  1982. this.accountId=res.result;
  1983. this.selectaccountId=res.result;
  1984. this.accountPageSpinning=false;
  1985. }else{
  1986. // this.$message.error(res.message)
  1987. this.accountPageSpinning=false;
  1988. }
  1989. })
  1990. },
  1991. filters:{
  1992. }
  1993. }
  1994. </script>
  1995. <style lang="scss">
  1996. .accountPage .accountBody{
  1997. .ant-input {
  1998. -webkit-box-sizing: border-box;
  1999. box-sizing: border-box;
  2000. margin: 0;
  2001. padding: 0;
  2002. font-variant: tabular-nums;
  2003. list-style: none;
  2004. -webkit-font-feature-settings: 'tnum';
  2005. font-feature-settings: 'tnum';
  2006. position: relative;
  2007. display: inline-block;
  2008. width: 100%;
  2009. height: 32px;
  2010. padding: 4px 0px;
  2011. color: white;
  2012. font-size: 14px;
  2013. line-height: 1.5;
  2014. background-color: transparent;
  2015. background-image: none;
  2016. border:none;
  2017. border-radius: 4px;
  2018. -webkit-transition: all 0.3s;
  2019. transition: all 0.3s;
  2020. }
  2021. .ant-calendar-range-picker-separator {
  2022. display: inline-block;
  2023. min-width: 10px;
  2024. height: 100%;
  2025. color: white;
  2026. white-space: nowrap;
  2027. text-align: center;
  2028. vertical-align: top;
  2029. pointer-events: none;
  2030. }
  2031. .ant-divider, .ant-divider-vertical {
  2032. position: relative;
  2033. top: -0.06em;
  2034. display: inline-block;
  2035. width: 1px;
  2036. height: 2.9em;
  2037. margin: 0 8px;
  2038. vertical-align: middle;
  2039. }
  2040. }
  2041. .accountPage .materialBody{
  2042. .ant-divider, .ant-divider-vertical {
  2043. position: relative;
  2044. top: 25px;
  2045. display: inline-block;
  2046. width: 1px;
  2047. height: 366px;
  2048. margin: 0 8px;
  2049. vertical-align: middle;
  2050. }
  2051. }
  2052. .accountPage .dataMode{
  2053. .ant-divider, .ant-divider-vertical {
  2054. position: relative;
  2055. top: 10px;
  2056. display: inline-block;
  2057. width: 1px;
  2058. height: 350px;
  2059. margin: 0 8px;
  2060. vertical-align: middle;
  2061. }
  2062. }
  2063. </style>
  2064. <style lang="scss" scoped>
  2065. // #
  2066. .accountPage{
  2067. p{
  2068. margin-bottom: 0px;
  2069. }
  2070. .echart{
  2071. margin-top: 30px;
  2072. }
  2073. .bodyBox{
  2074. width: 100%;
  2075. margin-bottom: 26px;
  2076. height: 450px;
  2077. }
  2078. .accountBody{
  2079. height: 300px;
  2080. display: flex;
  2081. justify-content: space-between;
  2082. }
  2083. .accountBodyLeft{
  2084. width: 75%;
  2085. margin-right: 26px;
  2086. padding: 20px;
  2087. display: flex;
  2088. justify-content: space-between;
  2089. }
  2090. .accountBodyRight{
  2091. width: 25%;
  2092. // flex-shrink: 0;
  2093. padding: 25px;
  2094. }
  2095. .accountBodyLeft,.accountBodyRight{
  2096. border-radius: 10px;
  2097. background: white;
  2098. }
  2099. .accountBodyLeftCost{
  2100. background: #2461F1;
  2101. border-radius: 10px;
  2102. height: 260px;
  2103. width: 40%;
  2104. flex-shrink: 0;
  2105. color: white;
  2106. display: flex;
  2107. justify-content: space-between;
  2108. padding: 20px;
  2109. }
  2110. .accountBodyLeftCostLeft{
  2111. width: 55%;
  2112. // padding-left: 20px;
  2113. .title{
  2114. font-size: 26px;
  2115. font-weight: 700;
  2116. padding: 0;
  2117. }
  2118. .costInfo{
  2119. margin: 20px 0 0 0;
  2120. width: 70%;
  2121. display: flex;
  2122. justify-content: space-between;
  2123. }
  2124. .costNum{
  2125. width: 90%;
  2126. font-size: 26px;
  2127. font-weight: 700;
  2128. color:#2461F1 ;
  2129. background: white;
  2130. text-align: center;
  2131. border-radius: 10px;
  2132. margin: 15px 0;
  2133. padding: 3px 0px;
  2134. }
  2135. }
  2136. .accountBodyLeftCostRight{
  2137. width: 45%;
  2138. // background: white;
  2139. }
  2140. .accountBodyLeftOther{
  2141. width: 60%;
  2142. margin-left: 15px;
  2143. padding-left: 15px;
  2144. border-left:1px solid #eee ;
  2145. position: relative;
  2146. .top{
  2147. display: flex;
  2148. justify-content: space-between;
  2149. padding-top: 8px;
  2150. }
  2151. .item{
  2152. width: 25%;
  2153. // min-width: 100px;
  2154. // font-size: 16px;
  2155. }
  2156. .todyCost{
  2157. font-size: 1.2rem;
  2158. font-weight: 700;
  2159. color:#303133;
  2160. margin-bottom: 3px;
  2161. width: 100%;
  2162. }
  2163. .sign{
  2164. font-size: 18px;
  2165. .rise{
  2166. color: #F2637B;
  2167. width: 16px;
  2168. height: 16px;
  2169. text-align: center;
  2170. // background-color: #F2637B;
  2171. // border-radius: 50%;
  2172. // color: white;
  2173. // font-size: 14px;
  2174. transform: rotate(-30deg);
  2175. }
  2176. .fall{
  2177. color: green;
  2178. width: 16px;
  2179. height: 16px;
  2180. text-align: center;
  2181. // background-color: #F2637B;
  2182. // border-radius: 50%;
  2183. // color: white;
  2184. // font-size: 14px;
  2185. transform: rotate(30deg);
  2186. }
  2187. .up{
  2188. width: 16px;
  2189. height: 16px;
  2190. text-align: center;
  2191. background-color: #F2637B;
  2192. border-radius: 5px;
  2193. color: white;
  2194. }
  2195. }
  2196. .yesterdayCost{
  2197. font-size: 0.89rem;
  2198. font-weight: 500;
  2199. color:#303133;
  2200. margin-bottom:3px ;
  2201. }
  2202. .IndexName{
  2203. // width: 100%;
  2204. font-size: 15px;
  2205. font-weight: 600;
  2206. color:#303133;
  2207. display: inline-block;
  2208. cursor: pointer;
  2209. // white-space:nowrap;
  2210. // overflow:hidden;
  2211. // text-overflow:ellipsis;
  2212. }
  2213. .IndexNameActive{
  2214. color:#2461F1;
  2215. }
  2216. .IndexNameActive::after{
  2217. content: '';
  2218. display: block;
  2219. width: 15px;
  2220. height: 3px;
  2221. background: #2461F1;
  2222. position: relative;
  2223. top: 5px;
  2224. left: 50%;
  2225. margin-left: -8px;
  2226. }
  2227. .showIndex{
  2228. position: absolute;
  2229. top: -5px;
  2230. right: 0px;
  2231. font-size: 12px;
  2232. cursor: pointer;
  2233. color: #909399;
  2234. }
  2235. .showIndex:hover{
  2236. color:#2461F1
  2237. }
  2238. }
  2239. // 第二块
  2240. .planBody{
  2241. display: flex;
  2242. justify-content: space-between;
  2243. }
  2244. .planBodyLeft{
  2245. width: 40%;
  2246. height: 100%;
  2247. background: white;
  2248. flex-shrink: 0;
  2249. border-radius: 10px;
  2250. }
  2251. .title{
  2252. padding: 20px 20px;
  2253. }
  2254. .titleContext{
  2255. font-size: 14px;
  2256. font-weight: 600;
  2257. color:#303133;
  2258. margin-bottom:0px;
  2259. }
  2260. .titleContext::before{
  2261. content:'';
  2262. width: 5px;
  2263. height: 5px;
  2264. border-radius: 2.5px;
  2265. background-color:#2461F1;
  2266. display: inline-block;
  2267. position: relative;
  2268. top: -2px;
  2269. }
  2270. .titleTip{
  2271. font-size: 14px;
  2272. color: #909399;
  2273. font-weight: 400;
  2274. margin-left: 20px;
  2275. }
  2276. .planBodyRight{
  2277. width: 60%;
  2278. background: white;
  2279. margin-left: 20px;
  2280. height: 100%;
  2281. border-radius: 10px;
  2282. }
  2283. // 素材块
  2284. .materialBody{
  2285. border-radius: 10px;
  2286. background: white;
  2287. position: relative;
  2288. display: flex;
  2289. padding:20px 20px ;
  2290. .dataPicker{
  2291. position: absolute;
  2292. top: 25px;
  2293. right: 20px;
  2294. }
  2295. }
  2296. .materialBodyLeft{
  2297. width: 40%;
  2298. height: 100%;
  2299. }
  2300. .materialBodyRight{
  2301. width: 60%;
  2302. height: 100%;
  2303. padding-top: 60px;
  2304. }
  2305. .accountBodyRighTitle{
  2306. h1{
  2307. font-size: 26px;
  2308. font-weight: 700;
  2309. cursor: pointer;
  2310. white-space:nowrap;
  2311. overflow:hidden;
  2312. text-overflow:ellipsis;
  2313. }
  2314. }
  2315. .accountBodyRighTitleID{
  2316. font-size: 14px;
  2317. color: #c0c4cc;
  2318. }
  2319. .accountBodyRightInfoItem{
  2320. background: rgb(238,241,255);
  2321. padding:10px 15px;
  2322. margin: 15px 0 0;
  2323. border-radius: 5px;
  2324. font-size: 16px;
  2325. .name{
  2326. font-size: 16px;
  2327. font-weight: 600;
  2328. }
  2329. }
  2330. .createNum{
  2331. cursor: pointer;
  2332. }
  2333. .targetBody{
  2334. border-radius: 10px;
  2335. background: white;
  2336. .dataMode{
  2337. display: flex;
  2338. justify-content: space-between;
  2339. }
  2340. .topOpt{
  2341. padding: 20px;
  2342. display: flex;
  2343. justify-content: flex-end;
  2344. }
  2345. }
  2346. .adPositionMode,.ageMode,.genderMode{
  2347. width: 32%;
  2348. height: 100%;
  2349. }
  2350. .ageMode{
  2351. }
  2352. .genderMode{
  2353. }
  2354. }
  2355. </style>