materialAndBid.vue 85 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153
  1. <template>
  2. <div class="autoLaunchReport">
  3. <div class="tabBody2" >
  4. <a-tabs v-model='tabKey' @change="tabChange">
  5. <a-tab-pane :key="1" tab="出价分析" > </a-tab-pane>
  6. <a-tab-pane :key="2" tab="素材分析" > </a-tab-pane>
  7. </a-tabs>
  8. </div>
  9. <div class="topOptions">
  10. <span class="OptinItem ">
  11. <!-- reqUrl='/ctop/userAllocation/getAccountIdListByUserId' -->
  12. <!-- <Treeselect :appId.sync="accountIds" :multiple="true" request="2,4" reqUrl='/ctop/userAllocation/getAccountIdsByUserId' ref="treeSelect" style="margin-bottom:8px " /> -->
  13. <a-select
  14. v-model="accountIds"
  15. style="width: 400px"
  16. placeholder="请选择账户"
  17. :maxTagCount='1'
  18. allowClear
  19. @change="accountChange"
  20. show-search
  21. option-filter-prop="children"
  22. :filter-option="filterOption"
  23. >
  24. <a-select-option v-for="item in accountList" :key="item.account_id" :value='item.account_id'>
  25. {{ item.auth_name+'_('+(item.project_name||"无所属项目")+')' }}
  26. </a-select-option>
  27. </a-select>
  28. </span>
  29. <span class="OptinItem">
  30. <a-tree-select
  31. v-if="tabKey==1"
  32. v-model="directionalId"
  33. show-search
  34. style="width: 350px;height:30px"
  35. :dropdownMatchSelectWidth='true'
  36. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  37. tree-checkable
  38. searchPlaceholder='选择策略以及出价'
  39. :show-checked-strategy="SHOW_PARENT"
  40. placeholder="选择策略以及出价"
  41. treeNodeFilterProp="title"
  42. :allowClear="true"
  43. @change="treeChange"
  44. :maxTagCount='1'
  45. :tree-data="treeData"
  46. :filterOption='filterOption'
  47. >
  48. </a-tree-select>
  49. <a-tree-select
  50. v-if="tabKey==2"
  51. v-model="materialId"
  52. show-search
  53. style="width: 350px;height:30px"
  54. :dropdownMatchSelectWidth='true'
  55. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  56. tree-checkable
  57. searchPlaceholder='选择策略以及素材'
  58. :show-checked-strategy="SHOW_PARENT"
  59. placeholder="选择策略以及素材"
  60. treeNodeFilterProp="title"
  61. :allowClear="true"
  62. @change="materialTreeChange"
  63. :maxTagCount='1'
  64. :tree-data="materialTreeData"
  65. :filterOption='filterOption'
  66. >
  67. </a-tree-select>
  68. </span>
  69. <span class="OptinItem">
  70. <a-range-picker
  71. @change="dateChange"
  72. v-model="dateRange"
  73. :disabled-date="disabledDate"
  74. style="width:200px"
  75. />
  76. </span>
  77. <span class="optionBtn">
  78. <a-button type='primary' @click="search" class="searchBtn">查询</a-button>
  79. <!-- <a-button type='default' @click="reset">重置</a-button> -->
  80. </span>
  81. </div>
  82. <div class="chartBox">
  83. <div class="chartTop">
  84. <span>数据维度:</span>
  85. <a-radio-group v-model="value" @change="chartDataTypeChange">
  86. <a-radio :value="1">
  87. 消耗
  88. </a-radio>
  89. <a-radio :value="2">
  90. 封面曝光数
  91. </a-radio>
  92. <a-radio :value="3">
  93. 封面点击数
  94. </a-radio>
  95. <a-radio :value="4">
  96. 素材曝光数
  97. </a-radio>
  98. <!-- <a-radio :value="5">
  99. 转化数@
  100. </a-radio> -->
  101. </a-radio-group>
  102. </div>
  103. <a-spin :spinning="spinning">
  104. <div class="chartBody">
  105. <div id="mapEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="mapEchart">
  106. <a-empty style="position: relative; top: 50%; margin-top: -65px" />
  107. </div>
  108. <div id="sexEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="sexEchart">
  109. <a-empty style="position: relative; top: 50%; margin-top: -65px" />
  110. </div>
  111. <div id="ageEchart" style='width:30%;height:300px;border:1px solid #e0e0e0;padding:10px' ref="ageEchart">
  112. <a-empty style="position: relative; top: 50%; margin-top: -65px" />
  113. </div>
  114. </div>
  115. </a-spin>
  116. <div class="tableBox">
  117. <!-- <div class="tableTop">
  118. 关联出价
  119. </div> -->
  120. <div class="tableOpt">
  121. <span>表格类型:</span>
  122. <a-radio-group v-model="tableValue" @change="tableTypeChange">
  123. <a-radio :value="1">
  124. 地域
  125. </a-radio>
  126. <a-radio :value="2">
  127. 性别
  128. </a-radio>
  129. <a-radio :value="3">
  130. 年龄
  131. </a-radio>
  132. </a-radio-group>
  133. </div>
  134. <div class="tableBody">
  135. <a-table
  136. size="middle"
  137. :columns="columns"
  138. :dataSource="tableData"
  139. :pagination='true'
  140. bordered
  141. id="outTable"
  142. :loading="loading"
  143. style="word-break: break-all;font-size:16px;font-weight:600"
  144. :scroll="{'x':scrollX}"
  145. >
  146. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  147. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  148. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  149. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  150. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  151. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  152. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  153. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  154. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  155. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  156. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  157. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  158. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  159. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  160. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  161. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  162. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  163. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  164. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  165. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  166. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  167. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  168. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  169. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  170. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  171. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
  172. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  173. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
  174. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  175. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
  176. <span
  177. slot="play25FeedBreakRate"
  178. slot-scope="play25FeedBreakRate"
  179. >{{ play25FeedBreakRate | toPercentage }}</span>
  180. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  181. <!-- 新加数据 -->
  182. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  183. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  184. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  185. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  186. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  187. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  188. <span
  189. slot="installFinishRate"
  190. slot-scope="installFinishRate"
  191. >{{ installFinishRate | toPercentage }}</span>
  192. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  193. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  194. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  195. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  196. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  197. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  198. <span
  199. slot="gameAddictionCost"
  200. slot-scope="gameAddictionCost"
  201. >{{ gameAddictionCost | decimalsHandle }}</span>
  202. <span
  203. slot="downloadFinishCost"
  204. slot-scope="downloadFinishCost"
  205. >{{ downloadFinishCost | decimalsHandle }}</span>
  206. <span
  207. slot="downloadStartCost"
  208. slot-scope="downloadStartCost"
  209. >{{ downloadStartCost | decimalsHandle }}</span>
  210. <span
  211. slot="installFinishCost"
  212. slot-scope="installFinishCost"
  213. >{{ installFinishCost | decimalsHandle }}</span>
  214. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  215. <!-- -->
  216. <span
  217. slot="downloadStartRate"
  218. slot-scope="downloadStartRate"
  219. >{{ downloadStartRate | toPercentage }}</span>
  220. <span
  221. slot="downloadFinishRate"
  222. slot-scope="downloadFinishRate"
  223. >{{ downloadFinishRate | toPercentage }}</span>
  224. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  225. <span
  226. slot="activeRegisterRate"
  227. slot-scope="activeRegisterRate"
  228. >{{ activeRegisterRate | toPercentage }}</span>
  229. <span
  230. slot="gameAddictionRate"
  231. slot-scope="gameAddictionRate"
  232. >{{ gameAddictionRate | toPercentage }}</span>
  233. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  234. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  235. </a-table>
  236. </div>
  237. </div>
  238. <div class="tableBox">
  239. <div class="tableTop">
  240. {{tabKey==1?'关联素材':'关联出价'}}
  241. </div>
  242. <div class="tableOpt">
  243. <!-- <span>表格类型:</span>
  244. <a-radio-group v-model="tableValue" @change="tableTypeChange">
  245. <a-radio :value="1">
  246. 地域
  247. </a-radio>
  248. <a-radio :value="2">
  249. 性别
  250. </a-radio>
  251. <a-radio :value="3">
  252. 年龄
  253. </a-radio>
  254. </a-radio-group> -->
  255. </div>
  256. <div class="tableBody">
  257. <a-table
  258. size="middle"
  259. :columns="materialColumns"
  260. :dataSource="materialtableData"
  261. :pagination='materialipagination'
  262. bordered
  263. id="outTable"
  264. :loading="materialloading"
  265. style="word-break: break-all;font-size:16px;font-weight:600"
  266. :scroll="{'x':materialscrollX}"
  267. @change="materialTableChange"
  268. >
  269. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  270. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  271. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  272. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  273. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  274. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  275. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  276. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  277. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  278. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  279. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  280. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  281. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  282. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  283. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  284. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  285. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  286. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  287. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  288. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  289. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  290. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  291. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  292. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  293. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  294. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{ eventCreditGrantLandingPage | formatCurrency }}</span>
  295. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  296. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{ eventCreditGrantLandingPageCost | decimalsHandle }}</span>
  297. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  298. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{ eventCreditGrantLandingPageRate | toPercentage }}</span>
  299. <span
  300. slot="play25FeedBreakRate"
  301. slot-scope="play25FeedBreakRate"
  302. >{{ play25FeedBreakRate | toPercentage }}</span>
  303. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  304. <!-- 新加数据 -->
  305. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  306. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  307. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  308. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  309. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  310. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  311. <span
  312. slot="installFinishRate"
  313. slot-scope="installFinishRate"
  314. >{{ installFinishRate | toPercentage }}</span>
  315. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  316. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  317. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  318. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  319. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  320. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  321. <span
  322. slot="gameAddictionCost"
  323. slot-scope="gameAddictionCost"
  324. >{{ gameAddictionCost | decimalsHandle }}</span>
  325. <span
  326. slot="downloadFinishCost"
  327. slot-scope="downloadFinishCost"
  328. >{{ downloadFinishCost | decimalsHandle }}</span>
  329. <span
  330. slot="downloadStartCost"
  331. slot-scope="downloadStartCost"
  332. >{{ downloadStartCost | decimalsHandle }}</span>
  333. <span
  334. slot="installFinishCost"
  335. slot-scope="installFinishCost"
  336. >{{ installFinishCost | decimalsHandle }}</span>
  337. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  338. <!-- -->
  339. <span
  340. slot="downloadStartRate"
  341. slot-scope="downloadStartRate"
  342. >{{ downloadStartRate | toPercentage }}</span>
  343. <span
  344. slot="downloadFinishRate"
  345. slot-scope="downloadFinishRate"
  346. >{{ downloadFinishRate | toPercentage }}</span>
  347. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  348. <span
  349. slot="activeRegisterRate"
  350. slot-scope="activeRegisterRate"
  351. >{{ activeRegisterRate | toPercentage }}</span>
  352. <span
  353. slot="gameAddictionRate"
  354. slot-scope="gameAddictionRate"
  355. >{{ gameAddictionRate | toPercentage }}</span>
  356. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  357. <span slot="coverUrl" slot-scope="text,record">
  358. <a-popover placement="right">
  359. <template slot="content">
  360. <video :src="record.videoId_dictText" style="width:250px" controls ></video>
  361. </template>
  362. <template slot="title">
  363. </template>
  364. <img :src="record.imageId_dictText" alt="" style="width:100px">
  365. </a-popover>
  366. </span>
  367. </a-table>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. </template>
  373. <script>
  374. import moment from 'moment';
  375. import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
  376. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  377. import { TreeSelect } from 'ant-design-vue';
  378. import qs from 'qs'
  379. // 引入基本模板
  380. var echarts = require('echarts')
  381. import 'echarts/map/js/china'
  382. // 引入柱状图组件
  383. require('echarts/lib/chart/bar')
  384. // require('echarts/lib/chart/pie')
  385. require('echarts/lib/chart/line')
  386. require('echarts/lib/chart/map')
  387. // 引入提示框和title组件
  388. require('echarts/lib/component/tooltip')
  389. require('echarts/lib/component/title')
  390. require('echarts/lib/component/graphic')
  391. require('echarts/lib/component/toolbox')
  392. require('echarts/lib/component/legend')
  393. let option = {
  394. color: ['#1890ff'],
  395. tooltip: {
  396. trigger: 'axis',
  397. axisPointer: {
  398. // 坐标轴指示器,坐标轴触发有效
  399. type: 'line' // 默认为直线,可选为:'line' | 'shadow'
  400. }
  401. },
  402. grid: {
  403. left: '0%',
  404. right: '0%',
  405. bottom: '0%',
  406. top: '12%',
  407. containLabel: false,
  408. },
  409. xAxis: [
  410. {
  411. type: 'category',
  412. data: [],
  413. show: true,
  414. axisTick: {
  415. alignWithLabel: true
  416. }
  417. }
  418. ],
  419. yAxis: [
  420. {
  421. type: 'value',
  422. show: false
  423. }
  424. ],
  425. series: [
  426. {
  427. name: '',
  428. type: 'bar',
  429. barWidth: '40%',
  430. smooth: true,
  431. areaStyle:{},
  432. itemStyle: {
  433. color: new echarts.graphic.LinearGradient(
  434. 0, 0, 0, 1,
  435. [
  436. {offset: 0, color: '#1890ff'},
  437. {offset: 1, color: '#FFF'}
  438. ]
  439. )
  440. },
  441. data: []
  442. }
  443. ]
  444. }
  445. const regionColumns = [
  446. {
  447. title: '地域',
  448. dataIndex: 'region',
  449. key: 'region',
  450. align: 'center',
  451. scopedSlots: { customRender: 'region' },
  452. width:120,
  453. fixed: 'left' ,
  454. },
  455. ];
  456. const sexColumns = [
  457. {
  458. title: '性别',
  459. dataIndex: 'sex',
  460. key: 'sex',
  461. align: 'center',
  462. scopedSlots: { customRender: 'sex' },
  463. width:120,
  464. fixed: 'left' ,
  465. },
  466. ];
  467. const ageColumns = [
  468. {
  469. title: '年龄',
  470. dataIndex: 'age',
  471. key: 'age',
  472. align: 'center',
  473. scopedSlots: { customRender: 'age' },
  474. width:120,
  475. fixed: 'left' ,
  476. },
  477. ];
  478. const material = [
  479. {
  480. title: '素材',
  481. dataIndex: 'coverUrl',
  482. key: 'coverUrl',
  483. align: 'center',
  484. scopedSlots: { customRender: 'coverUrl' },
  485. width:120,
  486. fixed: 'left' ,
  487. },
  488. {
  489. title: '关联创意数',
  490. dataIndex: 'creativeCount',
  491. key: 'creativeCount',
  492. align: 'center',
  493. scopedSlots: { customRender: 'creativeCount' },
  494. },
  495. // {
  496. // title: '关联广告组数',
  497. // dataIndex: 'relativeGroup',
  498. // key: 'relativeGroup',
  499. // align: 'center',
  500. // scopedSlots: { customRender: 'relativeGroup' },
  501. // },
  502. {
  503. title: '广告场景',
  504. dataIndex: 'scenes',
  505. key: 'scenes',
  506. align: 'center',
  507. scopedSlots: { customRender: 'scenes' },
  508. },
  509. // {
  510. // title: '3s播放数',
  511. // dataIndex: '3',
  512. // key: '3',
  513. // align: 'center',
  514. // scopedSlots: { customRender: '3' },
  515. // },
  516. // {
  517. // title: '10s播放数',
  518. // dataIndex: '10',
  519. // key: '10',
  520. // align: 'center',
  521. // scopedSlots: { customRender: '10' },
  522. // },
  523. // {
  524. // title: '3s完播率',
  525. // dataIndex: 'playOver',
  526. // key: 'playOver',
  527. // align: 'center',
  528. // scopedSlots: { customRender: 'playOver' },
  529. // },
  530. // {
  531. // title: '10s完播率',
  532. // dataIndex: '10playOver',
  533. // key: '10playOver',
  534. // align: 'center',
  535. // scopedSlots: { customRender: '10playOver' },
  536. // },
  537. // {
  538. // title: '完播率',
  539. // dataIndex: 'playOverRate',
  540. // key: 'playOverRate',
  541. // align: 'center',
  542. // scopedSlots: { customRender: 'playOverRate' },
  543. // },
  544. ];
  545. const directional = [
  546. {
  547. title: '出价包名称',
  548. dataIndex: 'name',
  549. key: 'name',
  550. align: 'center',
  551. scopedSlots: { customRender: 'name' },
  552. width:200,
  553. flex:'left'
  554. },
  555. {
  556. title: '关联广告组数',
  557. dataIndex: 'group',
  558. key: 'group',
  559. align: 'center',
  560. scopedSlots: { customRender: 'group' },
  561. },
  562. {
  563. title: '覆盖人群',
  564. dataIndex: 'coverPoepele',
  565. key: 'coverPoepele',
  566. align: 'center',
  567. scopedSlots: { customRender: 'coverPoepele' },
  568. },
  569. {
  570. title: '地域分布',
  571. dataIndex: 'region',
  572. key: 'region',
  573. align: 'center',
  574. scopedSlots: { customRender: 'region' },
  575. },
  576. {
  577. title: '年龄分布',
  578. dataIndex: 'age',
  579. key: 'age',
  580. align: 'center',
  581. scopedSlots: { customRender: 'age' },
  582. },
  583. {
  584. title: '商业兴趣分布',
  585. dataIndex: 'url',
  586. key: 'url',
  587. align: 'center',
  588. scopedSlots: { customRender: 'url' },
  589. },
  590. {
  591. title: '性别分布',
  592. dataIndex: 'sex',
  593. key: 'sex',
  594. align: 'center',
  595. scopedSlots: { customRender: 'sex' },
  596. },
  597. ]
  598. const publicColumns = [
  599. {
  600. title: '消耗(元)',
  601. dataIndex: 'cost',
  602. width:150,
  603. tip: '广告在投放期间的花费总额',
  604. align: 'center',
  605. scopedSlots: { customRender: 'cost' },
  606. // sorter: () => {}
  607. },
  608. {
  609. title: '封面曝光数',
  610. dataIndex: 'photoShow',
  611. tip: '广告在瀑布流被观看次数',
  612. align: 'center',
  613. scopedSlots: { customRender: 'photoShow' },
  614. // sorter:() => {}
  615. },
  616. {
  617. title: '封面点击数',
  618. dataIndex: 'photoClick',
  619. tip: '用户点击封面进入视频播放页的次数(数据会进行反作弊去重)',
  620. align: 'center',
  621. scopedSlots: { customRender: 'photoClick' },
  622. // sorter: () => {}
  623. },
  624. {
  625. title: '素材曝光数',
  626. dataIndex: 'aclick',
  627. tip: '用户进入视频播放页观看的次数(数据会进行反作弊去重)',
  628. align: 'center',
  629. scopedSlots: { customRender: 'aClick' },
  630. // sorter:() => {}
  631. },
  632. {
  633. title: '行为数',
  634. dataIndex: 'bclick',
  635. tip: '用户在视频播放页单击转化按钮的次数/展示数*100%',
  636. align: 'center',
  637. scopedSlots: { customRender: 'bClick' },
  638. // sorter:() => {}
  639. },
  640. {
  641. title: '封面点击率',
  642. dataIndex: 'clickRate',
  643. tip: '封面点击数占封面展示数百分比',
  644. align: 'center',
  645. scopedSlots: { customRender: 'clickRate' },
  646. // sorter:() => {}
  647. },
  648. {
  649. title: '行为率',
  650. dataIndex: 'bClickRate',
  651. tip: '行为数占素材曝光数百分比',
  652. align: 'center',
  653. scopedSlots: { customRender: 'bClickRate' },
  654. // sorter:() => {}
  655. },
  656. {
  657. title: '平均千次封面曝光花费(元)',
  658. dataIndex: 'cpm',
  659. tip: '花费/封面曝光数*1000',
  660. align: 'center',
  661. scopedSlots: { customRender: 'cpm' },
  662. // sorter:() => {}
  663. },
  664. {
  665. title: '平均封面点击单价(元)',
  666. dataIndex: 'cpc',
  667. tip: '花费/封面点击数',
  668. align: 'center',
  669. scopedSlots: { customRender: 'cpc' },
  670. // sorter:() => {}
  671. },
  672. {
  673. title: '激活数',
  674. dataIndex: 'active',
  675. tip: '广告主回传的应用激活次数',
  676. align: 'center',
  677. scopedSlots: { customRender: 'active' },
  678. // sorter:() => {}
  679. },
  680. {
  681. title: '激活单价',
  682. dataIndex: 'activeCost',
  683. tip: '花费/激活数',
  684. align: 'center',
  685. scopedSlots: { customRender: 'activeCost' },
  686. // sorter:() => {}
  687. },
  688. {
  689. title: '下载完成激活率',
  690. dataIndex: 'activeRate',
  691. tip: '激活数/安卓下载完成数',
  692. align: 'center',
  693. scopedSlots: { customRender: 'activeRate' },
  694. // sorter:() => {}
  695. },
  696. {
  697. title: '注册数',
  698. dataIndex: 'register',
  699. tip: '付费金额/当日消耗',
  700. align: 'center',
  701. scopedSlots: { customRender: 'register' },
  702. // sorter:() => {}
  703. },
  704. {
  705. title: '注册成本',
  706. dataIndex: 'activeRegisterCost',
  707. tip: '当日消耗/当日回传注册数',
  708. align: 'center',
  709. scopedSlots: { customRender: 'activeRegisterCost' },
  710. // sorter:() => {}
  711. },
  712. {
  713. title: '注册率',
  714. dataIndex: 'activeRegisterRate',
  715. tip: '当日回传注册数/当日激活数',
  716. align: 'center',
  717. scopedSlots: { customRender: 'activeRegisterRate' },
  718. // sorter:() => {}
  719. },
  720. {
  721. title: '次留数',
  722. dataIndex: 'nextDayOpen',
  723. tip: '前一日激活用户在次日继续访问的PV',
  724. align: 'center',
  725. scopedSlots: { customRender: 'nextDayOpen' },
  726. // sorter:() => {}
  727. },
  728. {
  729. title: '次留率',
  730. dataIndex: 'nextDayOpenRate',
  731. tip: '前一日激活用户在次日继续访问的PV/前一日激活数',
  732. align: 'center',
  733. scopedSlots: { customRender: 'nextDayOpenRate' },
  734. // sorter:() => {}
  735. },
  736. ]
  737. export default {
  738. data() {
  739. return {
  740. analysisDirection:1,
  741. spinning:false,
  742. materialId:[],
  743. treeData: [],
  744. materialTreeData:[],
  745. SHOW_PARENT,
  746. userId:'',
  747. tabKey:1,
  748. loading:false,
  749. ipagination: {
  750. current: 1,
  751. pageSize: 10,
  752. // pageSizeOptions: ['10', '20', '30'],
  753. showTotal: (total, range) => {
  754. return range[0] + "-" + range[1] + " 共" + total + "条"
  755. },
  756. showQuickJumper: true,
  757. showSizeChanger:true,
  758. pageSizeOptions: ['10', '30', '50'],
  759. total: 0,
  760. onChange: (current, pageSize) => {
  761. // 切换分页时的回调,
  762. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  763. this.ipagination.current = current;
  764. this.ipagination.pageSize= pageSize;
  765. }
  766. },
  767. tableValue:1,
  768. accountIds:undefined,
  769. accountList:[],
  770. directionalId:undefined,
  771. value:1,
  772. columns:[...regionColumns,...publicColumns],
  773. tableData:[],
  774. dateRange: [],
  775. topOption: JSON.parse(JSON.stringify(option)),
  776. scrollX:2500,
  777. materialipagination: {
  778. current: 1,
  779. pageSize: 10,
  780. // pageSizeOptions: ['10', '20', '30'],
  781. showTotal: (total, range) => {
  782. return range[0] + "-" + range[1] + " 共" + total + "条"
  783. },
  784. showQuickJumper: true,
  785. showSizeChanger:true,
  786. pageSizeOptions: ['10', '30', '50'],
  787. total: 0,
  788. onChange: (current, pageSize) => {
  789. // 切换分页时的回调,
  790. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  791. this.ipagination.current = current;
  792. this.ipagination.pageSize= pageSize;
  793. }
  794. },
  795. materialColumns:[...material,...publicColumns],
  796. materialtableData:[],
  797. materialloading:false,
  798. materialscrollX:4000,
  799. age:[],
  800. gender:[],
  801. region:[],
  802. currentStrategy:{},
  803. }
  804. },
  805. methods: {
  806. filterOption(input, option) {
  807. return (
  808. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  809. );
  810. },
  811. // //项目改变后的事件
  812. treeChange(val) {
  813. // console.log(this.treeData)
  814. console.log(val)
  815. this.directionalId = [];
  816. //选择一个后禁用其他
  817. if(val.length==1){
  818. if(val[0].indexOf('strategy')==-1){
  819. let selectindex=0
  820. this.treeData.forEach((ele,index)=>{
  821. if(ele.children){
  822. ele.children.map((item,ind)=>{
  823. if(item.value==val[0]){
  824. selectindex=index;
  825. }
  826. })
  827. }
  828. });
  829. // console.log(selectindex)
  830. if(selectindex ||selectindex==0){
  831. this.treeData.forEach((ele,index)=>{
  832. if(index!=selectindex){
  833. ele.disableCheckbox = true;
  834. if(ele.children){
  835. ele.children.map((item,ind)=>{
  836. item.disableCheckbox = true;
  837. })
  838. }
  839. }
  840. })
  841. }
  842. }else{
  843. // console.log(1)
  844. this.treeData.forEach((ele,index)=>{
  845. if(ele.value!=val[0]){
  846. ele.disableCheckbox = true;
  847. if(ele.children){
  848. ele.children.forEach((item,ind)=>{
  849. item.disableCheckbox = true;
  850. })
  851. }
  852. }
  853. })
  854. }
  855. // console.log(this.mediaId)
  856. }
  857. if(val.length==0){
  858. this.treeData.forEach((ele,index)=>{
  859. ele.disableCheckbox = false;
  860. if(ele.children){
  861. ele.children.forEach((item,ind)=>{
  862. item.disableCheckbox = false;
  863. })
  864. }
  865. });
  866. }
  867. if(val){
  868. val.forEach((ele,index)=>{
  869. if(ele.indexOf('strategy')==-1){
  870. this.directionalId.push(ele)
  871. }else{
  872. let projectArr=this.treeData.filter((item)=>{
  873. return item.value==ele
  874. });
  875. // console.log(projectArr)
  876. projectArr[0].children.forEach((element)=>{
  877. this.directionalId.push(element.value)
  878. })
  879. }
  880. })
  881. }
  882. console.log(this.directionalId);
  883. this.getRelativeData()
  884. },
  885. //请求项目和账户内容
  886. accountHttp(){
  887. this.treeData=[];
  888. this.directionalId=[];
  889. getAction('/ai/analyze/getStrategyAndTarget', {
  890. accountId:this.accountIds
  891. }).then(res => {
  892. if(res.success){
  893. // console.log(res);
  894. if(res.result){
  895. res.result.forEach((element,index) => {
  896. if(element){
  897. this.treeData.push({});
  898. this.treeData[index].title=element.strategy_name +'_('+ element.id +')';
  899. this.treeData[index].value='strategy'+element.id;
  900. this.treeData[index].key=element.id;
  901. this.treeData[index].children=[];
  902. if(element.targets.length&&element.targets[0]){
  903. element.targets.forEach((ele,i)=>{
  904. this.treeData[index].children.push({});
  905. this.treeData[index].children[i].title=ele.target_type+'_'+ele.target_content
  906. this.treeData[index].children[i].value=element.id+'_'+ele.id;
  907. this.treeData[index].children[i].key=element.id+'_'+ele.id;
  908. })
  909. }
  910. }
  911. });
  912. // console.log(this.treeData)
  913. this.directionalId=[this.treeData[0].children[0].value]
  914. }
  915. }
  916. })
  917. },
  918. accountMaterialHttp(){
  919. this.materialTreeData=[];
  920. this.materialId=[];
  921. getAction('/ai/analyze/getStrategyAndMaterial', {
  922. accountId:this.accountIds
  923. }).then(res => {
  924. if(res.success){
  925. // console.log(res);
  926. if(res.result){
  927. res.result.forEach((element,index) => {
  928. if(element){
  929. this.materialTreeData.push({});
  930. this.materialTreeData[index].title=element.strategy_name +'_('+ element.id +')';
  931. this.materialTreeData[index].value='strategy'+element.id;
  932. this.materialTreeData[index].key=element.id;
  933. this.materialTreeData[index].children=[];
  934. if(element.materials.length&&element.materials[0]){
  935. element.materials.forEach((ele,i)=>{
  936. this.materialTreeData[index].children.push({});
  937. this.materialTreeData[index].children[i].title=ele.material_name
  938. this.materialTreeData[index].children[i].value=element.id+'_'+ele.code;
  939. this.materialTreeData[index].children[i].key=element.id+'_'+ele.code;
  940. this.materialTreeData[index].children[i].coverUrl=ele.cover_url;
  941. })
  942. }
  943. }
  944. });
  945. // console.log(this.treeData)
  946. this.materialId=[this.materialTreeData[0].children[0].value]
  947. }
  948. }
  949. })
  950. },
  951. materialTreeChange(val){
  952. console.log(val)
  953. this.materialId = [];
  954. //选择一个后禁用其他
  955. if(val.length==1){
  956. if(val[0].indexOf('strategy')==-1){
  957. let selectindex=0
  958. this.materialTreeData.forEach((ele,index)=>{
  959. if(ele.children){
  960. ele.children.map((item,ind)=>{
  961. if(item.value==val[0]){
  962. selectindex=index;
  963. }
  964. })
  965. }
  966. });
  967. // console.log(selectindex)
  968. if(selectindex ||selectindex==0){
  969. this.materialTreeData.forEach((ele,index)=>{
  970. if(index!=selectindex){
  971. ele.disableCheckbox = true;
  972. if(ele.children){
  973. ele.children.map((item,ind)=>{
  974. item.disableCheckbox = true;
  975. })
  976. }
  977. }
  978. })
  979. }
  980. }else{
  981. // console.log(1)
  982. this.materialTreeData.forEach((ele,index)=>{
  983. if(ele.value!=val[0]){
  984. ele.disableCheckbox = true;
  985. if(ele.children){
  986. ele.children.forEach((item,ind)=>{
  987. item.disableCheckbox = true;
  988. })
  989. }
  990. }
  991. })
  992. }
  993. // console.log(this.mediaId)
  994. }
  995. if(val.length==0){
  996. this.materialTreeData.forEach((ele,index)=>{
  997. ele.disableCheckbox = false;
  998. if(ele.children){
  999. ele.children.forEach((item,ind)=>{
  1000. item.disableCheckbox = false;
  1001. })
  1002. }
  1003. });
  1004. }
  1005. if(val){
  1006. val.forEach((ele,index)=>{
  1007. if(ele.indexOf('strategy')==-1){
  1008. this.materialId.push(ele)
  1009. }else{
  1010. let projectArr=this.materialTreeData.filter((item)=>{
  1011. return item.value==ele
  1012. });
  1013. console.log(projectArr)
  1014. projectArr[0].children.forEach((element)=>{
  1015. this.materialId.push(element.value)
  1016. })
  1017. }
  1018. })
  1019. }
  1020. console.log(this.materialId);
  1021. this.getRelativeData()
  1022. },
  1023. accountChange(val){
  1024. console.log(val);
  1025. if(val){
  1026. if(this.tabKey==1){
  1027. this.accountHttp()
  1028. }else if(this.tabKey==2){
  1029. this.accountMaterialHttp()
  1030. }
  1031. }
  1032. },
  1033. disabledDate(current) {
  1034. return current && current > moment()
  1035. },
  1036. dateChange(date, dateString) {
  1037. // console.log(date,dateString)
  1038. },
  1039. chartDataTypeChange(e) {
  1040. console.log('radio checked', e.target.value);
  1041. this.getEchartData()
  1042. },
  1043. tableTypeChange(e){
  1044. console.log('radio checked', e.target.value);
  1045. if(e.target.value==2){
  1046. this.columns=[...sexColumns,...publicColumns];
  1047. this.tableData=this.gender
  1048. }else if(e.target.value==1){
  1049. this.columns=[...regionColumns,...publicColumns]
  1050. this.tableData=this.region
  1051. }else if(e.target.value==3){
  1052. this.columns=[...ageColumns,...publicColumns]
  1053. this.tableData=this.age
  1054. }
  1055. // this.getEchartData()
  1056. },
  1057. // directionalTableHttp(){
  1058. // this.loading=true;
  1059. // postAction('',{
  1060. // }).then(res=>{
  1061. // console.log(res)
  1062. // })
  1063. // },
  1064. // materialTableHttp(){
  1065. // this.loading=true;
  1066. // postAction('',{
  1067. // }).then(res=>{
  1068. // console.log(res)
  1069. // })
  1070. // },
  1071. directionalIdChange(val){
  1072. console.log(val)
  1073. },
  1074. //获取echart的值
  1075. initEchart(idName, optionName) {
  1076. const chart = this.$refs[idName]
  1077. // console.log(chart)
  1078. if (chart) {
  1079. const myChart = echarts.init(document.getElementById(idName))
  1080. // myChart.showLoading({
  1081. // text: "图表数据正在努力加载..."
  1082. // });
  1083. myChart.setOption(optionName)
  1084. window.addEventListener('resize', function() {
  1085. myChart.resize()
  1086. })
  1087. }
  1088. },
  1089. // province,data
  1090. handlerMapEchartOption(province,data){
  1091. var res = [];
  1092. for (var j = 0; j < data.length; j++) {
  1093. res.push({
  1094. name: province[j],
  1095. value: data[j]
  1096. });
  1097. }
  1098. console.log(res)
  1099. // res.sort(function(a, b) {
  1100. // // console.log(a,b)
  1101. // return a.value - b.value;
  1102. // });
  1103. // var res1 = [];
  1104. // var res2 = [];
  1105. // for (var t = 0; t < 10; t++) {
  1106. // res1[t] = res[res.length - 1 - t].name;
  1107. // res2[t] = res[res.length - 1 - t].value;
  1108. // }
  1109. var option = {
  1110. title: {
  1111. text: '省级地域分布',
  1112. // subtext: '仅供参考',
  1113. left: 'left',
  1114. },
  1115. tooltip: {
  1116. show: true,
  1117. formatter: function(params) {
  1118. return params.name + ':' + params.value
  1119. },
  1120. },
  1121. visualMap: {
  1122. type: 'piecewise',
  1123. // text: ['头', '尾'],
  1124. pieces: [{
  1125. min: 100000,
  1126. color: '#73240D',
  1127. },
  1128. {
  1129. min: 50000,
  1130. max: 100000,
  1131. color: '#BB0000',
  1132. },
  1133. {
  1134. min: 30000,
  1135. max: 50000,
  1136. color: '#BD430A',
  1137. },
  1138. {
  1139. min: 10000,
  1140. max: 30000,
  1141. color: '#E08150',
  1142. },
  1143. {
  1144. min: 5000,
  1145. max: 10000,
  1146. color: '#E9B090',
  1147. },
  1148. {
  1149. min: 1000,
  1150. max: 5000,
  1151. color: '#F2DDD2',
  1152. },
  1153. {
  1154. value: 0,
  1155. color: '#F1eeee',
  1156. },
  1157. ],
  1158. orient: 'vertical',
  1159. itemSymbol: 'circle',
  1160. itemWidth: 20,
  1161. itemHeight: 20,
  1162. showLabel: true,
  1163. seriesIndex: [0],
  1164. textStyle: {
  1165. color: '#7B93A7'
  1166. },
  1167. bottom: '10%',
  1168. left: "5%",
  1169. },
  1170. grid: {
  1171. right: '5%',
  1172. top: '20%',
  1173. left:'20%',
  1174. bottom: '10%',
  1175. width: '20%'
  1176. },
  1177. xAxis: {
  1178. min: 0,
  1179. // max: 4000,
  1180. show: false
  1181. },
  1182. geo: {
  1183. map: 'china',
  1184. // right: '35%',
  1185. left: '30%',
  1186. label: {
  1187. emphasis: {
  1188. show: false,
  1189. }
  1190. },
  1191. itemStyle: {
  1192. emphasis: {
  1193. areaColor: '#99FF99'
  1194. }
  1195. }
  1196. },
  1197. series: [{
  1198. name: 'mapSer',
  1199. type: 'map',
  1200. map: 'china',
  1201. roam: false,
  1202. geoIndex: 0,
  1203. label: {
  1204. show: false,
  1205. },
  1206. data: res
  1207. }
  1208. ]
  1209. };
  1210. console.log(option)
  1211. return option
  1212. },
  1213. handlerSexOption(data){
  1214. var option = {
  1215. color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
  1216. tooltip : {
  1217. trigger: 'item',
  1218. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1219. },
  1220. toolbox: {
  1221. show : true,
  1222. },
  1223. title: {
  1224. text: '性别分布',
  1225. // subtext: '仅供参考',
  1226. left: 'left',
  1227. },
  1228. legend: {
  1229. type:"scroll",
  1230. orient: 'vertical',
  1231. left:'2%',
  1232. align:'left',
  1233. top:'middle',
  1234. textStyle: {
  1235. color:'#8C8C8C'
  1236. },
  1237. height:100
  1238. },
  1239. series : [
  1240. {
  1241. name:'性别分布',
  1242. type:'pie',
  1243. radius : [0, 100],
  1244. data,
  1245. }
  1246. ]
  1247. };
  1248. return option
  1249. },
  1250. handlerAgeOption(data){
  1251. const colorList = ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A','#9E87FF']
  1252. var option = {
  1253. tooltip: {
  1254. trigger: 'item',
  1255. formatter: "{a} <br/>{b} : {c} ({d}%)"
  1256. },
  1257. toolbox: {
  1258. show : true,
  1259. },
  1260. title: {
  1261. text: '年龄分布',
  1262. // subtext: '仅供参考',
  1263. left: 'left',
  1264. },
  1265. // grid: {
  1266. // right: '5%',
  1267. // top: '20%',
  1268. // left:'15%',
  1269. // bottom: '10%',
  1270. // width: '20%'
  1271. // },
  1272. legend: {
  1273. type:"scroll",
  1274. orient: 'vertical',
  1275. left:'2%',
  1276. align:'left',
  1277. top:'middle',
  1278. textStyle: {
  1279. color:'#8C8C8C'
  1280. },
  1281. height:200
  1282. },
  1283. series: [{
  1284. type: 'pie',
  1285. // center: ['30%', '30%'],
  1286. radius: ['30%', '60%'],
  1287. minAngle: 10 ,
  1288. avoidLabelOverlap: true,
  1289. hoverOffset: 15,
  1290. itemStyle: {
  1291. color: (params) => {
  1292. return colorList[params.dataIndex]
  1293. }
  1294. },
  1295. label: {
  1296. show: true,
  1297. position: 'outer',
  1298. alignTo: 'labelLine',
  1299. // ·圆点
  1300. backgroundColor: 'auto',//圆点颜色,auto:映射的系列色
  1301. height: 0,
  1302. width: 0,
  1303. lineHeight: 0,
  1304. // height,width.lineHeight必须为0
  1305. distanceToLabelLine: 0,//圆点到labelline距离
  1306. borderRadius: 2.5,
  1307. padding: [2.5, -2.5, 2.5, -2.5],
  1308. /*radius和padding为圆点大小,圆点半径为几radius和padding各项数值就为几
  1309. 如:圆点半径为1
  1310. borderRadius: 1,
  1311. padding: [1, -1, 1, -1]
  1312. */
  1313. formatter: '{a|{b}:}{b|{d}%}',
  1314. rich: {
  1315. a: {
  1316. padding: [0, 0, 0, 10]
  1317. },
  1318. b: {
  1319. padding: [0, 10, 0, 0]
  1320. }
  1321. }
  1322. },
  1323. data,
  1324. }, ]
  1325. }
  1326. return option
  1327. },
  1328. //点击分页
  1329. // sort(pagination, filters, sorter, { currentDataSource }){
  1330. // console.log(pagination)
  1331. // this.ipagination.current=pagination.current;
  1332. // this.ipagination.pageSize=pagination.pageSize;
  1333. // this.getEchartData()
  1334. // },
  1335. materialTableChange(pagination, filters, sorter, { currentDataSource }){
  1336. console.log(pagination)
  1337. this.materialipagination.current=pagination.current;
  1338. this.materialipagination.pageSize=pagination.pageSize;
  1339. this.getRelativeData()
  1340. },
  1341. tabChange(key){
  1342. console.log(key)
  1343. this.accountIds=undefined;
  1344. this.directionalId=[];
  1345. this.materialId=[];
  1346. if(key==1){
  1347. this.materialColumns=[...material,...publicColumns]
  1348. }else{
  1349. this.materialColumns=[...directional,...publicColumns]
  1350. }
  1351. // this.getRelativeData()
  1352. },
  1353. getEchartData(){
  1354. let params=this.handlerParams();
  1355. params.dataType=this.value
  1356. if(params.accountId&&(params.targetIds||params.codes)){
  1357. this.spinning=true;
  1358. this.loading=true
  1359. postAction('/ai/analyze/chart/targetOrMaterial',params).then(res=>{
  1360. console.log(res)
  1361. this.spinning=false;
  1362. this.loading=false
  1363. if(res.success){
  1364. this.age=res.result.age
  1365. this.gender=res.result.gender
  1366. this.region=res.result.region
  1367. var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
  1368. let params=this.handlerRegion(province,this.region)
  1369. console.log(params)
  1370. this.initEchart('mapEchart',this.handlerMapEchartOption(province,params))
  1371. let genderData=this.handlerGender(this.gender)
  1372. this.initEchart('sexEchart',this.handlerSexOption(ageData))
  1373. let ageData=this.handlerAge(this.age)
  1374. this.initEchart('ageEchart',this.handlerAgeOption(ageData))
  1375. this.spinning=false
  1376. if(this.tableValue==1){
  1377. this.tableData=res.result.region
  1378. }else if(this.tableValue==2){
  1379. this.tableData=res.result.gender
  1380. }else if(this.tableValue==3){
  1381. this.tableData=res.result.age
  1382. }
  1383. }
  1384. })
  1385. }
  1386. },
  1387. handlerRegion(province,data){
  1388. let value=[];
  1389. switch (this.value) {
  1390. case 1:
  1391. province.forEach((ele,index)=>{
  1392. value=data.map(item=>{
  1393. if(item.province==ele){
  1394. if(item.cost){
  1395. return item.cost
  1396. }else{
  1397. return 0
  1398. }
  1399. }
  1400. })
  1401. })
  1402. break;
  1403. case 2:
  1404. province.forEach((ele,index)=>{
  1405. value=data.map(item=>{
  1406. if(item.province==ele){
  1407. if(item.photoShow){
  1408. return item.photoShow
  1409. }else{
  1410. return 0
  1411. }
  1412. }
  1413. })
  1414. })
  1415. break;
  1416. case 3:
  1417. province.forEach((ele,index)=>{
  1418. value=data.map(item=>{
  1419. if(item.province==ele){
  1420. if(item.photoClick){
  1421. return item.photoClick
  1422. }else{
  1423. return 0
  1424. }
  1425. }
  1426. })
  1427. })
  1428. break;
  1429. case 4:
  1430. province.forEach((ele,index)=>{
  1431. value=data.map(item=>{
  1432. if(item.province==ele){
  1433. if(item.aclick){
  1434. return item.aclick
  1435. }else{
  1436. return 0
  1437. }
  1438. }
  1439. })
  1440. })
  1441. break;
  1442. default:
  1443. break;
  1444. }
  1445. return value
  1446. },
  1447. handlerGender(data){
  1448. let value=[];
  1449. switch (this.value) {
  1450. case 1:
  1451. value=data.map(item=>{
  1452. if(item.cost){
  1453. return {
  1454. value:item.cost,
  1455. name:item.gender
  1456. }
  1457. }
  1458. })
  1459. break;
  1460. case 2:
  1461. value=data.map(item=>{
  1462. if(item.cost){
  1463. return {
  1464. value:item.photoShow,
  1465. name:item.gender
  1466. }
  1467. }
  1468. })
  1469. break;
  1470. case 3:
  1471. value=data.map(item=>{
  1472. if(item.cost){
  1473. return {
  1474. value:item.photoClick,
  1475. name:item.gender
  1476. }
  1477. }
  1478. })
  1479. break;
  1480. case 4:
  1481. value=data.map(item=>{
  1482. if(item.cost){
  1483. return {
  1484. value:item.aclick,
  1485. name:item.gender
  1486. }
  1487. }
  1488. })
  1489. break;
  1490. default:
  1491. break;
  1492. }
  1493. return value
  1494. },
  1495. handlerAge(data){
  1496. let value=[];
  1497. switch (this.value) {
  1498. case 1:
  1499. value=data.map(item=>{
  1500. if(item.cost){
  1501. return {
  1502. value:item.cost,
  1503. name:item.ageSegment
  1504. }
  1505. }
  1506. })
  1507. break;
  1508. case 2:
  1509. value=data.map(item=>{
  1510. if(item.cost){
  1511. return {
  1512. value:item.photoShow,
  1513. name:item.ageSegment
  1514. }
  1515. }
  1516. })
  1517. break;
  1518. case 3:
  1519. value=data.map(item=>{
  1520. if(item.cost){
  1521. return {
  1522. value:item.photoClick,
  1523. name:item.ageSegment
  1524. }
  1525. }
  1526. })
  1527. break;
  1528. case 4:
  1529. value=data.map(item=>{
  1530. if(item.cost){
  1531. return {
  1532. value:item.aclick,
  1533. name:item.ageSegment
  1534. }
  1535. }
  1536. })
  1537. break;
  1538. default:
  1539. break;
  1540. }
  1541. return value
  1542. },
  1543. getDetailTableData(){
  1544. let params=this.handlerParams();
  1545. if(params.accountId&&(params.targetIds||params.codes)){
  1546. params.dataType=this.tableValue
  1547. this.loading=true
  1548. postAction('',params).then(res=>{
  1549. console.log(res)
  1550. this.loading=false
  1551. this.tableData=res.result.list
  1552. })
  1553. }else{
  1554. }
  1555. },
  1556. getRelativeData(){
  1557. let params=this.handlerParams();
  1558. // params.dataType=this.tableValue
  1559. if(params.accountId&&(params.targetIds||params.codes)){
  1560. this.materialloading=true
  1561. postAction('/ai/analyze/report/targetOrMaterial',params).then(res=>{
  1562. console.log(res)
  1563. this.materialloading=false
  1564. if(res.success){
  1565. this.materialtableData=res.result.list
  1566. this.ipagination.total=res.result.total;
  1567. }else{
  1568. this.$message.error('出错了')
  1569. }
  1570. })
  1571. }else{
  1572. this.$message.error('请选择账户、策略等信息')
  1573. }
  1574. },
  1575. search(){
  1576. this.getRelativeData()
  1577. this.getEchartData()
  1578. },
  1579. handlerParams(){
  1580. let params={};
  1581. params.accountId=this.accountIds
  1582. if(this.tabKey==1){
  1583. if(this.directionalId&&this.directionalId.length){
  1584. params.type='target'
  1585. params.strategyId=this.directionalId[0].split('_')[0]
  1586. params.targetIds=this.directionalId.map(item=>{
  1587. return item.split('_')[1]
  1588. })
  1589. }
  1590. }else{
  1591. params.type='material'
  1592. if(this.materialId&&this.materialId.length){
  1593. params.strategyId=this.materialId[0].split('_')[0]
  1594. params.codes=this.materialId.map(item=>{
  1595. return item.split('_')[1]
  1596. })
  1597. }
  1598. }
  1599. if(this.dateRange&&this.dateRange.length>0){
  1600. params.startDate=this.dateRange[0].format('YYYY-MM-DD')
  1601. params.endDate=this.dateRange[1].format('YYYY-MM-DD')
  1602. }
  1603. params.pageNo=this.ipagination.current;
  1604. params.pageSize=this.ipagination.pageSize
  1605. return params
  1606. },
  1607. handlerInitData(currentStrategy){
  1608. if(currentStrategy){
  1609. this.currentStrategy=JSON.parse(currentStrategy)
  1610. this.accountIds=this.currentStrategy.accountId;
  1611. if(this.tabKey==1){
  1612. this.treeData=[];
  1613. this.directionalId=[];
  1614. getAction('/ai/analyze/getStrategyAndTarget', {
  1615. accountId:this.accountIds
  1616. }).then(res => {
  1617. if(res.success){
  1618. // console.log(res);
  1619. if(res.result){
  1620. res.result.forEach((element,index) => {
  1621. if(element){
  1622. this.treeData.push({});
  1623. this.treeData[index].title=element.strategy_name +'_('+ element.id +')';
  1624. this.treeData[index].value='strategy'+element.id;
  1625. this.treeData[index].key=element.id;
  1626. this.treeData[index].children=[];
  1627. if(element.targets.length&&element.targets[0]){
  1628. element.targets.forEach((ele,i)=>{
  1629. this.treeData[index].children.push({});
  1630. this.treeData[index].children[i].title=ele.target_type+'_'+ele.target_content
  1631. this.treeData[index].children[i].value=element.id+'_'+ele.id;
  1632. this.treeData[index].children[i].key=element.id+'_'+ele.id;
  1633. })
  1634. }
  1635. }
  1636. });
  1637. // console.log(this.treeData)
  1638. // this.directionalId=[this.treeData[0].children[0].value]
  1639. // this.treeData.map((item=>{
  1640. // if(){
  1641. // }
  1642. // }))
  1643. this.directionalId=[`strategy${this.currentStrategy.id}`]
  1644. this.treeChange(this.directionalId)
  1645. }
  1646. }
  1647. })
  1648. }else if(this.tabKey==2){
  1649. this.accountMaterialHttp()
  1650. }
  1651. }
  1652. }
  1653. },
  1654. mounted() {
  1655. // this.$nextTick(()=>{
  1656. // var province = ['北京', '广东', '浙江', '湖南', '河南', '安徽', '重庆', '山东', '江西', '四川', '江苏', '湖北', '福建', '上海', '广西', '河北', '陕西', '云南', '海南', '黑龙江', '辽宁', '山西', '天津', '甘肃', '内蒙古', '新疆', '宁夏', '吉林', '贵州', '青海', '西藏', '澳门', '香港', '台湾'];
  1657. // var data = [3554, 241, 296, 221, 206, 152, 147, 121, 109, 108, 99, 91, 80, 80, 58, 48, 56, 51, 43, 37, 34, 27, 24, 24, 16, 13, 12, 9, 9, 6, 0, 7, 8, 8]
  1658. // this.initEchart('mapEchart',this.handlerMapEchartOption(province,data))
  1659. // var data1=[
  1660. // {value:20, name:'男'},
  1661. // {value:30, name:'女'},
  1662. // {value:25, name:'其他'},
  1663. // ]
  1664. // this.initEchart('sexEchart',this.handlerSexOption(data1))
  1665. // var data2= [
  1666. // {
  1667. // name: 'first',
  1668. // value: 1
  1669. // }, {
  1670. // name: 'second',
  1671. // value: 2
  1672. // }, {
  1673. // name: 'third',
  1674. // value: 3
  1675. // }, {
  1676. // name: 'fourth',
  1677. // value: 4
  1678. // }, {
  1679. // name: 'fifth',
  1680. // value: 5
  1681. // }, {
  1682. // name: 'sixth',
  1683. // value: 6
  1684. // }]
  1685. // this.initEchart('ageEchart',this.handlerAgeOption(data2))
  1686. // })
  1687. let userInfo=localStorage.getItem('pro__Login_Userinfo');
  1688. let currentStrategy=localStorage.getItem('currentStrategy');
  1689. let userId=''
  1690. if(userInfo){
  1691. this.userId=JSON.parse(userInfo).value.id
  1692. }
  1693. this.handlerInitData(currentStrategy)
  1694. getAction('/ctop/userAllocation/getAccountIdsByUserId',{
  1695. userId:this.userId,
  1696. }).then(res=>{
  1697. console.log(res)
  1698. if(res.success){
  1699. this.accountList=res.result
  1700. }
  1701. })
  1702. },
  1703. filters: {
  1704. toPercentage(val) {
  1705. if(val){
  1706. if(typeof val != 'string'){
  1707. return (val * 100).toFixed(2) + '%'
  1708. }else{
  1709. return val
  1710. }
  1711. }else if(typeof val =='string'){
  1712. return val
  1713. }
  1714. else{
  1715. return 0
  1716. }
  1717. },
  1718. //保留两位小数并且变成货币格式
  1719. decimalsHandle(val){
  1720. if(val && typeof val !='string'){
  1721. if(val>=0){
  1722. val=parseFloat(val).toFixed(2);
  1723. let numberStr = val.toString()
  1724. let str = numberStr.split('.')
  1725. let str0=str[0].split('').reverse();
  1726. for (let i = 0; i < str0.length; i++) {
  1727. if ((i + 1) % 4 === 0) {
  1728. str0.splice(i, 0, ',')
  1729. }
  1730. }
  1731. str0.reverse()
  1732. let handleResult = ''
  1733. for (let j = 0; j < str0.length; j++) {
  1734. handleResult += str0[j]
  1735. }
  1736. return handleResult+'.'+str[1]
  1737. }else{
  1738. val=parseFloat(val).toFixed(2);
  1739. let numberStr = val.toString()
  1740. let str = numberStr.split('.')
  1741. let str0=str[0].substr(1).split('').reverse();
  1742. for (let i = 0; i < str0.length; i++) {
  1743. if ((i + 1) % 4 === 0) {
  1744. str0.splice(i, 0, ',')
  1745. }
  1746. }
  1747. str0.reverse()
  1748. let handleResult = ''
  1749. for (let j = 0; j < str0.length; j++) {
  1750. handleResult += str0[j]
  1751. }
  1752. return '-'+handleResult+'.'+str[1]
  1753. }
  1754. }else if(typeof val =='string'){
  1755. return val
  1756. }
  1757. else{
  1758. return 0
  1759. }
  1760. },
  1761. //变成货币格式
  1762. formatCurrency(val){
  1763. if((val||val==0)&& typeof val !='string'){
  1764. let numberStr = val.toString()
  1765. let str = numberStr.split('').reverse()
  1766. for (let i = 0; i < str.length; i++) {
  1767. if ((i + 1) % 4 === 0) {
  1768. str.splice(i, 0, ',')
  1769. }
  1770. }
  1771. str.reverse()
  1772. let handleResult = ''
  1773. for (let j = 0; j < str.length; j++) {
  1774. handleResult += str[j]
  1775. }
  1776. return handleResult
  1777. }else if(typeof val =='string'){
  1778. return val
  1779. }
  1780. else{
  1781. return '-'
  1782. }
  1783. }
  1784. }
  1785. }
  1786. </script>
  1787. <style lang="scss">
  1788. .autoLaunchReport{
  1789. .ant-tooltip-inner,.ant-tooltip-arrow::before{
  1790. background-color: #fff;
  1791. color: #333;
  1792. }
  1793. .tabBody2{
  1794. .ant-tabs-nav .ant-tabs-tab {
  1795. position: relative;
  1796. display: inline-block;
  1797. -webkit-box-sizing: border-box;
  1798. box-sizing: border-box;
  1799. height: 100%;
  1800. margin: 0 ;
  1801. padding: 10px 20px ;
  1802. text-decoration: none;
  1803. cursor: pointer;
  1804. -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1805. transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  1806. font-size: 15px;
  1807. }
  1808. }
  1809. }
  1810. </style>
  1811. <style lang="scss" scoped>
  1812. .autoLaunchReport {
  1813. background-color: #fff;
  1814. padding: 10px 20px;
  1815. position: relative;
  1816. width: 100%;
  1817. .OptinItem{
  1818. display: inline-block;
  1819. margin-right: 15px;
  1820. margin-top: 15px;
  1821. .ok{
  1822. margin-right: 15px;
  1823. }
  1824. }
  1825. .OptinItem:first-child{
  1826. margin-right: 10px;
  1827. }
  1828. .topOptions{
  1829. padding: 0px 10px 10px;
  1830. margin-top: -9px;
  1831. position: relative;
  1832. .topOpt{
  1833. width: 100%;
  1834. margin-bottom: 10px;
  1835. }
  1836. }
  1837. .optionBtn{
  1838. // display: inline-block;
  1839. // float: right;
  1840. // margin-top: 10px;
  1841. .searchBtn{
  1842. // margin-right: 10px;
  1843. position: absolute;
  1844. right: 10px;
  1845. bottom: 10px;
  1846. }
  1847. }
  1848. .circul{
  1849. width: 5px;
  1850. height: 5px;
  1851. border-radius: 50%;
  1852. background-color: #32CD32;;
  1853. }
  1854. .show{
  1855. // background-color: #fff;
  1856. width: 100%;
  1857. display: flex;
  1858. justify-content: space-between;
  1859. // padding: 0px 15px;
  1860. box-sizing: border-box;
  1861. .showBox {
  1862. width: 19%;
  1863. box-sizing: border-box;
  1864. padding: 15px 15px;
  1865. background-color: #fff;
  1866. .title {
  1867. color: #999;
  1868. font-size: 16px;
  1869. position: relative;
  1870. text-align: center;
  1871. .infotitle{
  1872. padding: 8px 0;
  1873. }
  1874. span {
  1875. font-size: 1rem;
  1876. // color: #1890ff;
  1877. position: absolute;
  1878. top: 0;
  1879. right: 0;
  1880. cursor: pointer;
  1881. }
  1882. }
  1883. .infoNum{
  1884. padding:10px 0;
  1885. text-align: center;
  1886. font-weight: 600;
  1887. font-size: 20px;
  1888. span{
  1889. font-weight: 600;
  1890. font-size: 16px;
  1891. }
  1892. .red{
  1893. font-size: 20px;
  1894. font-weight: 600;
  1895. color: red;
  1896. }
  1897. .green{
  1898. display: block;
  1899. text-align: center;
  1900. margin-left: 0.2rem;
  1901. font-size: 14px;
  1902. font-weight: 700;
  1903. color: #32CD32;
  1904. .huanbi{
  1905. // color:#999;
  1906. font-weight: 400;
  1907. font-size: 14px;
  1908. }
  1909. }
  1910. }
  1911. }
  1912. }
  1913. .chartBox{
  1914. background-color: #fff;
  1915. margin: 15px 0px;
  1916. padding: 2px 10px 30px;
  1917. .chartBody{
  1918. margin-top: 20px;
  1919. display: flex;
  1920. justify-content: space-between;
  1921. }
  1922. }
  1923. .tableBox{
  1924. background-color: #fff;
  1925. margin: 15px 0px;
  1926. padding: 15px 0px;
  1927. .tableTop{
  1928. position: relative;
  1929. padding: 20px 0;
  1930. border-top: 1px solid #e0e0e0;
  1931. font-size: 24px;
  1932. color: black;
  1933. .selectTime{
  1934. margin-right: 20px;
  1935. }
  1936. .add{
  1937. position: absolute;
  1938. top: 0;
  1939. right: 0;
  1940. }
  1941. }
  1942. .tableOpt{
  1943. margin-bottom: 20px;
  1944. }
  1945. }
  1946. }
  1947. </style>