accountPage.vue 102 KB

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