headline-view.vue 70 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838
  1. <template>
  2. <div class="accountPage">
  3. <div class="bodyBox accountBody">
  4. <div class="accountBodyLeft">
  5. <div class="accountBodyLeftCost" @click.capture="handleAccountBodyCost">
  6. <div class="accountBodyLeftCostLeft">
  7. <div class="top">
  8. <div class="title">花费</div>
  9. <a-range-picker
  10. v-model="dateValue"
  11. style="width: 180px;"
  12. :allowClear="false"
  13. format="YYYY-MM-DD"
  14. :disabled-date="disabledDate"
  15. @change="handleCostTimeChange"
  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">{{ Number(yearCostReportList.lastCost) | decimalsHandle }}</div>
  22. </div>
  23. <a-divider type="vertical"/>
  24. <div class="tongbi">
  25. <div style="margin-bottom:8px;margin-left: 10px;">
  26. 同比
  27. <a-tooltip >
  28. <template slot="title">
  29. <span>截止此时今日与昨日的花费同比</span>
  30. </template>
  31. <a-icon type="question-circle"/>
  32. </a-tooltip>
  33. </div>
  34. <div style="font-size:14px;font-weight:600;text-align: end;">
  35. <span class="sign">
  36. <a-icon v-if="Number(yearCostReportList.compare) >= 0" type="rise" class="rise"/>
  37. <a-icon v-if="Number(yearCostReportList.compare) < 0" type="fall" class="fall"/>
  38. </span>
  39. {{ yearCostReportList.compare ? yearCostReportList.compare + '%' : '-' }}
  40. </div>
  41. </div>
  42. </div>
  43. <div class="costNum">{{ Number(yearCostReportList.nowCost) | decimalsHandle }}</div>
  44. </div>
  45. <div class="accountBodyLeftCostRight">
  46. <div
  47. class="gaugeEchart"
  48. id="gaugeEchart"
  49. style="width:100%;height:200px;margin:0 auto"
  50. ref="gaugeEchart"
  51. >
  52. <a-empty/>
  53. </div>
  54. <span class="cost-radio-tool">
  55. 花费占比
  56. <a-tooltip>
  57. <template slot="title">
  58. <span>花费占比指花费占账户预算的比例</span>
  59. </template>
  60. <a-icon type="question-circle"/>
  61. </a-tooltip>
  62. </span>
  63. </div>
  64. </div>
  65. <div class="accountBodyLeftOther">
  66. <div class="top">
  67. <div class="item" v-for="item in throwColumns" :key="item.dataIndex">
  68. <div class="todyCost">
  69. <span v-if="item.type === 'double'">{{ Number(item.today) | decimalsHandle }}</span>
  70. <span v-if="item.type === 'string'">{{ Number(item.today).toFixed(0) | decimalsHandle }}</span>
  71. <span v-if="item.type === 'int'">{{ item.today !== 0 ? item.today + '%' : 0 }}</span>
  72. <span v-if="item.type === 'average'">{{ Number(item.today) | decimalsHandle }}</span>
  73. <span v-if="item.type !== 'spend'" class="sign">
  74. <a-icon type="rise" class="rise" v-show="item.today - item.yesterday > 0"/>
  75. <a-icon type="fall" class="fall" v-show="item.today - item.yesterday < 0" />
  76. </span>
  77. </div>
  78. <div class="yesterdayCost">
  79. <span v-if="item.type !== 'spend'">/ 昨日: </span>
  80. <span v-if="item.type === 'double'">{{ Number(item.yesterday) | decimalsHandle }}</span>
  81. <span v-if="item.type === 'string'">{{ Number(item.yesterday).toFixed(0) | decimalsHandle }}</span>
  82. <span v-if="item.type === 'int'">{{ item.yesterday !== 0 ? item.yesterday + '%' : 0 }}</span>
  83. <span v-if="item.type === 'average'">{{ Number(item.yesterday) | decimalsHandle }}</span>
  84. </div>
  85. <span
  86. v-if="item.type !== 'spend'"
  87. class="IndexName"
  88. :class="{'IndexNameActive': isActive === item.dataIndex}"
  89. @click="handleGetActiveIndexName(item)"
  90. >
  91. <a-tooltip>
  92. <template slot="title">
  93. <span>{{ item.title }}</span>
  94. </template>
  95. <span style="display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:105px">
  96. {{ item.title }}
  97. </span>
  98. </a-tooltip>
  99. </span>
  100. </div>
  101. </div>
  102. <div class="echart" style="margin-top:20px;position:relative">
  103. <div style="position:absolute;right:5px;top:-15px">
  104. 更新时间:{{ yearCostReportList.updTime || '-' }}
  105. </div>
  106. <a-spin :spinning="accountIndexEchartSpinning">
  107. <div
  108. class="accountIndexEchart"
  109. id="accountIndexEchart"
  110. style="width:100%;height:150px;margin:0 auto;"
  111. ref="accountIndexEchart"
  112. >
  113. <a-empty/>
  114. </div>
  115. </a-spin>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="accountBodyRight">
  120. <div class="accountBodyRighTitle">
  121. <div class="acount-body-content" @click="handleChangeAccount">
  122. <p class="acount-body-title">{{ topAccountMsg.accountMap && topAccountMsg.accountMap.authName }}</p>
  123. <span>
  124. <a-icon type="down" style="font-size:14px"/>
  125. </span>
  126. </div>
  127. <div class="accountBodyRighTitleID">
  128. 账户ID:{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountId }}
  129. </div>
  130. </div>
  131. <div class="accountBodyRightInfo">
  132. <div class="accountBodyRightInfoItem">
  133. <span class="name">余额:</span>
  134. <span>{{ topAccountMsg.accountMap && Number(topAccountMsg.accountMap.validBalance) | decimalsHandle }}</span>
  135. </div>
  136. <div class="accountBodyRightInfoItem">
  137. <span class="name">投放状态:</span>
  138. <span>{{ topAccountMsg.accountMap && topAccountMsg.accountMap.accountStatus === 0 ? '投放中' : '未投放' }}</span>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <div class="bodyBox planBody">
  144. <div class="planBodyRight">
  145. <div class="title">
  146. <div class="titleContext">
  147. 投放数据
  148. <span class="titleTip">更新时间:{{ planData.length ? planData[0].updateTime : '-' }}</span>
  149. </div>
  150. <div style="float: right;margin-top: -23px;">
  151. <a-range-picker
  152. v-model="planRangePicker"
  153. style="width:200px;"
  154. :allowClear="false"
  155. :disabled-date="disabledDate"
  156. @change="handlePlanPicker"
  157. />
  158. </div>
  159. </div>
  160. <div class="table">
  161. <a-table
  162. :columns="planColumns"
  163. :data-source="planData"
  164. :pagination="false"
  165. :scroll="{x: 1500}"
  166. >
  167. <span slot="conver" slot-scope="text, record">
  168. <span v-if="Number(record.cpaBid) < Number(text)" style="color: #f00;">{{ text }}</span>
  169. <span v-else>{{ text }}</span>
  170. </span>
  171. <span slot="optStatus" slot-scope="text, record">
  172. <a-switch :checked="text === 'AD_STATUS_ENABLE'" @change="handleSwitchChang($event, record)"/>
  173. </span>
  174. <span slot="operator" slot-scope="text, record">
  175. <a @click="handleModifyPrice(record)">调价</a>
  176. <a-divider type="vertical"/>
  177. <a-dropdown :trigger="['click']">
  178. <a class="ant-dropdown-link" @click="e => e.preventDefault()">更多</a>
  179. <a-menu slot="overlay">
  180. <a-menu-item>
  181. <a @click="handleUpdateDirectional(record)">修改定向</a>
  182. </a-menu-item>
  183. </a-menu>
  184. </a-dropdown>
  185. </span>
  186. </a-table>
  187. <a-pagination
  188. class="pagin-table-class"
  189. :total="planTotalAll"
  190. :show-total="total => `共 ${planTotalAll} 条`"
  191. size="small"
  192. show-size-changer
  193. show-quick-jumper
  194. @change="handleOnShowSizeChange"
  195. @showSizeChange="handleOnShowSizeChange"
  196. />
  197. </div>
  198. </div>
  199. </div>
  200. <div class="bodyBox materialBody">
  201. <div class="dataPicker">
  202. <div>
  203. <a-range-picker
  204. v-model="materialDate"
  205. style="width:200px;"
  206. :allowClear="false"
  207. :disabled-date="disabledDate"
  208. @change="materialDataChange"
  209. />
  210. </div>
  211. </div>
  212. <div class="titleContext source-material">
  213. 素材相关
  214. <span class="titleTip">更新时间:{{ materialData.length ? materialData[0].updateTime : '-' }}</span></div>
  215. <div class="materialBodyRight">
  216. <div class="material-table-class">
  217. <a-table
  218. :columns="materialColumns"
  219. :data-source="materialData"
  220. :pagination="false"
  221. :scroll="{x: 1500}"
  222. >
  223. <span slot="posterUrl" slot-scope="text,record">
  224. <div style="background:#e8e8e8;text-align:center;border-radius:3px">
  225. <a-popover placement="right">
  226. <template slot="content">
  227. <video :src="record.videoUrl" style="width:250px" controls></video>
  228. </template>
  229. <img v-if="text" :src="text" style="width:20px">
  230. <img v-if="!text" src="@/assets/noImg.png" style="width:20px">
  231. </a-popover>
  232. </div>
  233. </span>
  234. </a-table>
  235. <a-pagination
  236. :total="materTotalAll"
  237. :show-total="total => `共 ${materTotalAll} 条`"
  238. class="pagin-table-class"
  239. size="small"
  240. show-size-changer
  241. show-quick-jumper
  242. @change="handleSourceMaterialChange"
  243. @showSizeChange="handleSourceMaterialChange"
  244. />
  245. </div>
  246. </div>
  247. </div>
  248. <!-- 修改定向的modal -->
  249. <a-modal
  250. v-model="targetVisible"
  251. title="修改定向包"
  252. @ok="handleTargethandleOk"
  253. @cancel="handleTargethandleCancel"
  254. >
  255. <div class="linkBody">
  256. <a-row>
  257. <a-col :span="6">
  258. <div style="text-align:right">已优先定向:</div>
  259. </a-col>
  260. <a-col :span="16">{{ packageName }}</a-col>
  261. </a-row>
  262. <a-row style="margin-top: 20px;">
  263. <a-col :span="6">
  264. <div style="text-align:right">修改定向包:</div>
  265. </a-col>
  266. <a-col :span="16">
  267. <a-select
  268. style="width: 320px;"
  269. v-model="adAudiencePackageId"
  270. allow-clear
  271. placeholder="请选择已有定向包名称"
  272. >
  273. <a-select-option
  274. v-for="(item, index) in selectiveList"
  275. :key="index"
  276. :value="item.audience_package_id"
  277. >
  278. <div class="orient-list">
  279. <span class="orient-option-left" style="display: inline-block;width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.name }}</span>
  280. <span class="orient-option-right" style="display: inline-block;width: 150px;text-align:right;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{ item.changeName }}</span>
  281. </div>
  282. </a-select-option>
  283. </a-select>
  284. </a-col>
  285. </a-row>
  286. </div>
  287. </a-modal>
  288. <!-- 修改账户modal -->
  289. <a-modal
  290. :visible="accountVisible"
  291. :width="800"
  292. title="切换账户"
  293. @ok="handleAccounthandleOk"
  294. @cancel="handleAccountCancel"
  295. >
  296. <div class="linkBody" style="height:100px;display:flex;">
  297. <div style="height:32px;line-height:32px">选择账户:</div>
  298. <tree-select
  299. :appId.sync="selectaccountId"
  300. :multiple="false"
  301. request="1,3"
  302. ref="treeSelect"
  303. style="margin-bottom:8px;width:600px "
  304. >
  305. </tree-select>
  306. </div>
  307. </a-modal>
  308. <a-modal
  309. v-if="budgetVisible"
  310. title="修改出价"
  311. :visible="budgetVisible"
  312. dialog-class="mode-modal-class"
  313. @ok="handleBudgetSure"
  314. @cancel="handleBudgetCancel"
  315. >
  316. <div>
  317. <a-form-model
  318. ref="budgetForm"
  319. :model="budgetForm"
  320. :rules="budgetRules"
  321. :label-col="labelCol"
  322. :wrapper-col="wrapperCol"
  323. >
  324. <a-form-model-item label="出价" prop="budget">
  325. <a-input-number
  326. v-model="budgetForm.budget"
  327. :min="0.1"
  328. :max="10000"
  329. @change="handleChangeBudgetForm"
  330. /> 元
  331. </a-form-model-item>
  332. </a-form-model>
  333. </div>
  334. </a-modal>
  335. </div>
  336. </template>
  337. <script>
  338. import moment from 'moment';
  339. import {getAction} from '@/api/manage';
  340. import TreeSelect from '@/views/modules/Statistics/components/Treeselect.vue';
  341. import {mapGetters} from 'vuex';
  342. import {urlAcount} from './headline-view-server.js';
  343. // 引入基本模板
  344. let echarts = require('echarts');
  345. // 引入柱状图组件
  346. require('echarts/lib/chart/bar');
  347. require('echarts/lib/chart/line');
  348. require('echarts/lib/chart/map');
  349. require('echarts/lib/chart/gauge');
  350. // 引入提示框和title组件
  351. require('echarts/lib/component/tooltip');
  352. require('echarts/lib/component/title');
  353. require('echarts/lib/component/graphic');
  354. require('echarts/lib/component/toolbox');
  355. require('echarts/lib/component/legend');
  356. export default {
  357. name: 'headline-view',
  358. components: {
  359. TreeSelect
  360. },
  361. data() {
  362. let adCpaBidValidator = (rule, value, callback) => {
  363. if (Number(this.currentUnit.adBudget) < Number(value)) {
  364. callback('出价不能大于预算');
  365. }
  366. else {
  367. callback();
  368. }
  369. };
  370. return {
  371. adAudiencePackageId: undefined,
  372. planRangePicker: [],
  373. labelCol: {span: 4},
  374. wrapperCol: {span: 14},
  375. budgetForm: {
  376. budget: 0
  377. },
  378. budgetRules: {
  379. budget: [
  380. {required: true, message: '请输入', trigger: 'blur'},
  381. {validator: adCpaBidValidator, trigger: 'blur'}
  382. ]
  383. },
  384. budgetVisible: false,
  385. planTotalAll: 100,
  386. dateStringShow: '', // 为了账户哪儿的问号显示对应段时间
  387. selectaccountId: '', // 修改账户弹窗的value
  388. accountVisible: false,
  389. throwColumns: [
  390. {
  391. title: '花费',
  392. dataIndex: 'spendCost',
  393. key: 'spendCost',
  394. today: 0,
  395. yesterday: 0,
  396. type: 'spend'
  397. },
  398. {
  399. title: '转化成本',
  400. dataIndex: 'activationCost',
  401. key: 'activationCost',
  402. today: 0,
  403. yesterday: 0,
  404. type: 'double'
  405. },
  406. {
  407. title: '转化数',
  408. dataIndex: 'activation',
  409. key: 'activation',
  410. today: 0,
  411. yesterday: 0,
  412. type: 'string'
  413. },
  414. {
  415. title: '转化率',
  416. dataIndex: 'bclick',
  417. key: 'bclick',
  418. today: 0,
  419. yesterday: 0,
  420. type: 'int'
  421. },
  422. {
  423. title: '平均千次展现费用',
  424. dataIndex: 'formCount',
  425. key: 'formCount',
  426. today: 0,
  427. yesterday: 0,
  428. type: 'average'
  429. }
  430. ],
  431. newLink: '',
  432. linkVisible: false,
  433. targetVisible: false,
  434. isActive: 'spendCost',
  435. moment,
  436. materialDate: [moment().subtract(1,'days').format('YYYY-MM-DD'), moment().subtract(1,'days').format('YYYY-MM-DD')],
  437. dateValue: [],
  438. planData: [],
  439. planPagin: {
  440. page: 1,
  441. size: 10
  442. },
  443. planColumns: [
  444. {
  445. title: '计划名称',
  446. dataIndex: 'adName',
  447. key: 'adName',
  448. align: 'center',
  449. fixed: 'left',
  450. width: 240
  451. },
  452. {
  453. title: '花费',
  454. dataIndex: 'costStr',
  455. key: 'costStr',
  456. align: 'center',
  457. width: 180,
  458. sorter: (a, b) => a.costStr - b.costStr
  459. },
  460. {
  461. title: '出价',
  462. dataIndex: 'cpaBid',
  463. key: 'cpaBid',
  464. align: 'center',
  465. width: 180,
  466. sorter: (a, b) => a.cpaBid - b.cpaBid
  467. },
  468. {
  469. title: '展示数',
  470. dataIndex: 'showNum',
  471. key: 'showNum',
  472. align: 'center',
  473. width: 180,
  474. sorter: (a, b) => a.showNum - b.showNum
  475. },
  476. {
  477. title: '平均千次展现费用',
  478. dataIndex: 'averageShow',
  479. key: 'averageShow',
  480. align: 'center',
  481. width: 180,
  482. sorter: (a, b) => a.averageShow - b.averageShow
  483. },
  484. {
  485. title: '点击数',
  486. dataIndex: 'click',
  487. key: 'click',
  488. align: 'center',
  489. width: 180,
  490. sorter: (a, b) => a.click - b.click
  491. },
  492. {
  493. title: '平均点击单价',
  494. dataIndex: 'averageClick',
  495. key: 'averageClick',
  496. align: 'center',
  497. width: 180,
  498. sorter: (a, b) => a.averageClick - b.averageClick
  499. },
  500. {
  501. title: '点击率',
  502. dataIndex: 'clickRate',
  503. key: 'clickRate',
  504. align: 'center',
  505. width: 180,
  506. sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
  507. },
  508. {
  509. title: '转化数',
  510. dataIndex: 'convertNum',
  511. key: 'convertNum',
  512. align: 'center',
  513. width: 180,
  514. sorter: (a, b) => a.convertNum - b.convertNum
  515. },
  516. {
  517. title: '转化率',
  518. dataIndex: 'converRate',
  519. key: 'converRate',
  520. align: 'center',
  521. width: 180,
  522. sorter: (a, b) => a.converRate.split('%')[0] - b.converRate.split('%')[0]
  523. },
  524. {
  525. title: '转化成本',
  526. dataIndex: 'conver',
  527. key: 'conver',
  528. align: 'center',
  529. width: 180,
  530. scopedSlots: {customRender: 'conver'},
  531. sorter: (a, b) => a.conver - b.conver
  532. },
  533. {
  534. title: '同比',
  535. dataIndex: 'compare',
  536. key: 'compare',
  537. align: 'center',
  538. width: 180
  539. },
  540. {
  541. title: '状态',
  542. dataIndex: 'optStatus',
  543. key: 'optStatus',
  544. align: 'center',
  545. width: 180,
  546. scopedSlots: {customRender: 'optStatus'}
  547. },
  548. {
  549. title: '操作',
  550. dataIndex: 'operator',
  551. key: 'operator',
  552. align: 'center',
  553. fixed: 'right',
  554. width: 200,
  555. scopedSlots: {customRender: 'operator'}
  556. }
  557. ],
  558. materPagin: {
  559. page: 1,
  560. size: 10
  561. },
  562. materialColumns: [
  563. {
  564. title: '素材',
  565. dataIndex: 'posterUrl',
  566. key: 'posterUrl',
  567. align: 'center',
  568. scopedSlots: {customRender: 'posterUrl'},
  569. width: 100,
  570. fixed: 'left'
  571. },
  572. {
  573. title: '素材ID',
  574. dataIndex: 'materialId',
  575. key: 'materialId',
  576. width: 180,
  577. align: 'center'
  578. },
  579. {
  580. title: '花费',
  581. dataIndex: 'cost',
  582. align: 'center',
  583. width: 180,
  584. sorter: (a, b) => a.cost - b.cost
  585. },
  586. {
  587. title: '展示数',
  588. dataIndex: 'showMaterial',
  589. key: 'showMaterial',
  590. align: 'center',
  591. width: 180,
  592. sorter: (a, b) => a.showMaterial - b.showMaterial
  593. },
  594. {
  595. title: '平均千次展现费用',
  596. dataIndex: 'costPerThousandShow',
  597. key: 'costPerThousandShow',
  598. align: 'center',
  599. width: 180,
  600. sorter: (a, b) => a.costPerThousandShow - b.costPerThousandShow
  601. },
  602. {
  603. title: '点击数',
  604. dataIndex: 'click',
  605. key: 'click',
  606. align: 'center',
  607. width: 180,
  608. sorter: (a, b) => a.click - b.click
  609. },
  610. {
  611. title: '平均点击单价',
  612. dataIndex: 'costPerClick',
  613. key: 'costPerClick',
  614. align: 'center',
  615. width: 180,
  616. sorter: (a, b) => a.costPerClick - b.costPerClick
  617. },
  618. {
  619. title: '点击率',
  620. dataIndex: 'clickRate',
  621. key: 'clickRate',
  622. align: 'center',
  623. width: 180,
  624. sorter: (a, b) => a.clickRate.split('%')[0] - b.clickRate.split('%')[0]
  625. },
  626. {
  627. title: '转化数',
  628. dataIndex: 'convertMaterial',
  629. key: 'convertMaterial',
  630. align: 'center',
  631. width: 180,
  632. sorter: (a, b) => a.convertMaterial - b.convertMaterial
  633. },
  634. {
  635. title: '转化率',
  636. dataIndex: 'convertRate',
  637. key: 'convertRate',
  638. align: 'center',
  639. width: 180,
  640. sorter: (a, b) => a.convertRate.split('%')[0] - b.convertRate.split('%')[0]
  641. },
  642. {
  643. title: '转化成本',
  644. dataIndex: 'costConvert',
  645. key: 'costConvert',
  646. width: 180,
  647. align: 'center'
  648. },
  649. {
  650. title: '关联创意数',
  651. dataIndex: 'count',
  652. key: 'count',
  653. width: 180,
  654. align: 'center'
  655. },
  656. {
  657. title: '上线时间',
  658. dataIndex: 'materialUploadTime',
  659. key: 'photoShow',
  660. align: 'center',
  661. width: 180,
  662. scopedSlots: {customRender: 'photoShow'}
  663. }
  664. ],
  665. materialData: [],
  666. materTotalAll: 0,
  667. accountIndexEchartSpinning: false, // 账户模块的指标的echart
  668. newDataSortCode: 'charge',
  669. newDataSortType: 'DESC',
  670. materialSortCode: 'charge',
  671. materialSortType: 'DESC',
  672. directionalList: [],
  673. promotionTypeList: [
  674. {
  675. value: 'EXTERNAL',
  676. label: '落地页'
  677. },
  678. {
  679. value: 'ARTICLE',
  680. label: '文章推广'
  681. },
  682. {
  683. value: 'GOODS',
  684. label: '商品推广'
  685. },
  686. {
  687. value: 'DPA',
  688. label: '商品目录'
  689. },
  690. {
  691. value: 'STORE',
  692. label: '门店推广'
  693. },
  694. {
  695. value: 'AWEME',
  696. label: '抖音号推广'
  697. },
  698. {
  699. value: 'SHOP',
  700. label: '店铺直投'
  701. },
  702. {
  703. value: 'APP_ANDROID',
  704. label: '应用下载-安卓'
  705. },
  706. {
  707. value: 'APP_IOS',
  708. label: '应用下载-IOS'
  709. }
  710. ],
  711. selectDirectionalId: undefined,
  712. topAccountMsg: {},
  713. topCostList: {},
  714. yearCostReportList: {}, // 环比数据
  715. selectiveList: [],
  716. currentUnit: {},
  717. packageName: ''
  718. };
  719. },
  720. mounted() {
  721. this.handleGetInit();
  722. },
  723. methods: {
  724. ...mapGetters(['userInfo']),
  725. handleChangeBudgetForm(e) {
  726. this.budgetForm.budget = Number(Number(e).toFixed(2));
  727. },
  728. handleAccountBodyCost() {
  729. this.isActive = 'spendCost';
  730. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.yearCostReportList, 'spendCost'));
  731. },
  732. // 获取所有的定向包的列表
  733. handleGetAdAudiencePackage(account) {
  734. getAction(urlAcount + '/bytedance-api/advertiser/aiBytedanceAdvertiserStrategy/getAdAudiencePackage', {accountId: account})
  735. .then(result => {
  736. if (result.code === 0) {
  737. const defaultList = result.result;
  738. this.promotionTypeList.forEach(item => {
  739. defaultList.forEach(val => {
  740. if (val.landing_type === item.value) {
  741. val.changeName = item.label;
  742. }
  743. });
  744. });
  745. this.selectiveList = defaultList;
  746. }
  747. else {
  748. this.$message.error(result.message);
  749. }
  750. })
  751. .catch(error => {
  752. console.log(error, 'eeee');
  753. });
  754. },
  755. handleChangeAccount() {
  756. this.accountVisible = true;
  757. },
  758. // 计划开关的切换事件
  759. handleSwitchChang(checked, data) {
  760. const paramsData = {
  761. adId: data.adId,
  762. optStatus: checked ? 'enable' : 'disable',
  763. accountId: this.topCostList.account.accountId
  764. };
  765. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updPlanStatus', paramsData).then(result => {
  766. if (result.code === 0) {
  767. this.$message.success(result.message);
  768. this.handleGetPlanTableList(this.topCostList);
  769. }
  770. else {
  771. this.$message.error(result.message);
  772. }
  773. }).catch(error => {
  774. console.log(error, 'eeee');
  775. });
  776. },
  777. handleGetADAudiencePackageId(actId, id) {
  778. const paramsData = {
  779. accountId: actId,
  780. adId: id
  781. };
  782. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getADAudiencePackageId', paramsData).then(result => {
  783. if (result.code === 0) {
  784. this.packageName = result.result.packageId ? this.selectiveList.filter(item => item.audience_package_id === Number(result.result.packageId))[0].name : '暂无';
  785. }
  786. else {
  787. this.$message.error(result.message);
  788. }
  789. }).catch(error => {
  790. console.log(error, 'eeee');
  791. });
  792. },
  793. handleUpdateDirectional(record) {
  794. this.handleGetADAudiencePackageId(this.topAccountMsg.accountMap.accountId, record.adId);
  795. this.currentUnit = record;
  796. this.targetVisible = true;
  797. },
  798. handleBudgetSure() {
  799. this.$refs.budgetForm.validate(valid => {
  800. if (valid) {
  801. const paramsData = {
  802. adId: this.currentUnit.adId,
  803. cpaBid: this.budgetForm.budget,
  804. accountId: this.topCostList.account.accountId
  805. };
  806. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADCpaBid', paramsData).then(result => {
  807. if (result.code === 0) {
  808. this.$message.success(result.message);
  809. this.budgetForm.budget = 0;
  810. this.budgetVisible = false;
  811. this.handleGetPlanTableList(this.topCostList);
  812. }
  813. else {
  814. this.$message.error(result.message);
  815. }
  816. }).catch(error => {
  817. console.log(error, 'eeee');
  818. });
  819. }
  820. else {
  821. console.log('error submit!!');
  822. return false;
  823. }
  824. });
  825. },
  826. // 调价修改取消按钮
  827. handleBudgetCancel() {
  828. this.budgetForm.budget = 0;
  829. this.budgetVisible = false;
  830. },
  831. // 调价修改确定按钮
  832. handleModifyPrice(list) {
  833. this.currentUnit = list;
  834. this.budgetForm.budget = list.cpaBid;
  835. this.budgetVisible = true;
  836. },
  837. // 获取计划列表数据
  838. handleGetPlanTableList(data) {
  839. const paramsData = {
  840. accountId: data.account.accountId,
  841. startTime: this.planRangePicker[0],
  842. endTime: this.planRangePicker[1],
  843. pageNum: this.planPagin.page,
  844. pageSize: this.planPagin.size
  845. };
  846. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
  847. if (result.code === 0) {
  848. this.planData = result.result.list.map(item => {
  849. item.converRate = item.converRate + '%';
  850. return item;
  851. });
  852. this.planTotalAll = result.result.total;
  853. }
  854. else {
  855. this.$message.error(result.message);
  856. }
  857. }).catch(error => {
  858. console.log(error, 'eeee');
  859. });
  860. },
  861. // 获取echarts数据
  862. handleYearOnYearCost(data) {
  863. const paramsData = {
  864. accountId: data.account.accountId,
  865. startTime: data.startTime,
  866. endTime: data.endTime
  867. };
  868. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportYearOnYearCost', paramsData).then(result => {
  869. if (result.code === 0) {
  870. this.yearCostReportList = result.result;
  871. this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
  872. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'spendCost'));
  873. this.throwColumns[0].today = Number(result.result.nowCost);
  874. this.throwColumns[0].yesterday = Number(result.result.lastCost);
  875. this.throwColumns[1].today = Number(result.result.nowMap.conver);
  876. this.throwColumns[1].yesterday = Number(result.result.lastMap.conver);
  877. this.throwColumns[2].today = Number(result.result.nowMap.converNum);
  878. this.throwColumns[2].yesterday = Number(result.result.lastMap.converNum);
  879. this.throwColumns[3].today = Number(result.result.nowMap.converRate);
  880. this.throwColumns[3].yesterday = Number(result.result.lastMap.converRate);
  881. this.throwColumns[4].today = Number(result.result.nowMap.averageShow);
  882. this.throwColumns[4].yesterday = Number(result.result.lastMap.averageShow);
  883. this.isActive = 'spendCost';
  884. }
  885. else {
  886. this.$message.error(result.message);
  887. }
  888. }).catch(error => {
  889. console.log(error, 'eeee');
  890. });
  891. },
  892. // 初始化数据
  893. handleGetInit() {
  894. const paramsData = {
  895. userId: this.userInfo().id,
  896. type: 'bytedance'
  897. };
  898. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/initAccountIdAndTime', paramsData).then(result => {
  899. if (result.code === 0) {
  900. this.topCostList = result.result;
  901. const defaultTime = [result.result.startTime, result.result.endTime];
  902. this.dateValue = [...defaultTime];
  903. this.planRangePicker = [...defaultTime];
  904. this.handleGetAccountMessage(result.result.account.accountId);
  905. this.handleYearOnYearCost(result.result);
  906. this.handleGetPlanTableList(result.result);
  907. this.handleGetmaterialData(result.result);
  908. this.handleGetAdAudiencePackage(result.result.account.accountId);
  909. }
  910. else {
  911. this.$message.error(result.message);
  912. }
  913. }).catch(error => {
  914. console.log(error, 'eeee');
  915. });
  916. },
  917. // 获取头部最右侧数据
  918. handleGetAccountMessage(value) {
  919. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', {accountId: value}).then(result => {
  920. if (result.code === 0) {
  921. this.topAccountMsg = result.result;
  922. }
  923. else {
  924. this.$message.error(result.message);
  925. }
  926. }).catch(error => {
  927. console.log(error, 'eeee');
  928. });
  929. },
  930. // 获取素材列表数据
  931. handleGetmaterialData(data) {
  932. const paramsData = {
  933. accountId: data.account.accountId,
  934. startTime: this.materialDate[0],
  935. endTime: this.materialDate[1],
  936. pageNum: this.materPagin.page,
  937. pageSize: this.materPagin.size
  938. };
  939. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
  940. if (result.code === 0) {
  941. this.materialData = result.result.list.map(item => {
  942. item.clickRate = item.clickRate + '%';
  943. item.convertRate = item.convertRate + '%';
  944. return item;
  945. });
  946. this.materTotalAll = result.result.total;
  947. }
  948. else {
  949. this.$message.error(result.message);
  950. }
  951. }).catch(error => {
  952. console.log(error, 'eeee');
  953. });
  954. },
  955. handleGetActiveIndexName(val) {
  956. this.isActive = val.dataIndex;
  957. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.yearCostReportList, val.dataIndex));
  958. },
  959. // 修改定向的确定按钮
  960. handleTargethandleOk() {
  961. if (!this.adAudiencePackageId) {
  962. this.$message.error('请选择定向包');
  963. return;
  964. }
  965. const paramsData = {
  966. accountId: this.topCostList.account.accountId,
  967. adId: this.currentUnit.adId,
  968. audiencePackageId: this.adAudiencePackageId
  969. };
  970. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADAudiencePackage', paramsData).then(result => {
  971. if (result.code === 0) {
  972. this.adAudiencePackageId = undefined;
  973. this.targetVisible = false;
  974. this.$message.success(result.message);
  975. this.handleGetPlanTableList(this.topCostList);
  976. }
  977. else {
  978. this.$message.error(result.message);
  979. }
  980. }).catch(error => {
  981. console.log(error, 'eeee');
  982. });
  983. },
  984. // 修改定向的取消按钮
  985. handleTargethandleCancel() {
  986. this.adAudiencePackageId = undefined;
  987. this.packageName = '';
  988. this.targetVisible = false;
  989. },
  990. handleAccounthandleOk() {
  991. const paramsData = {
  992. account: {
  993. accountId: this.selectaccountId
  994. },
  995. startTime: this.dateValue[0],
  996. endTime: this.dateValue[1]
  997. };
  998. this.topCostList = paramsData;
  999. this.handleGetAccountMessage(this.selectaccountId);
  1000. this.handleYearOnYearCost(paramsData);
  1001. this.handleGetPlanTableList(paramsData);
  1002. this.handleGetmaterialData(paramsData);
  1003. this.handleGetAdAudiencePackage(this.selectaccountId);
  1004. this.selectaccountId = '';
  1005. this.accountVisible = false;
  1006. },
  1007. handleAccountCancel() {
  1008. this.selectaccountId = '';
  1009. this.accountVisible = false;
  1010. },
  1011. // 计划点击分页操作
  1012. handleOnShowSizeChange(current, pageSize) {
  1013. this.planPagin = {
  1014. page: current,
  1015. size: pageSize
  1016. };
  1017. const paramsData = {
  1018. account: {
  1019. accountId: this.topCostList.account.accountId
  1020. },
  1021. startTime: this.planRangePicker[0],
  1022. endTime: this.planRangePicker[1]
  1023. };
  1024. this.handleGetPlanTableList(paramsData);
  1025. },
  1026. // 素材点击分页操作
  1027. handleSourceMaterialChange(current, pageSize) {
  1028. this.materPagin = {
  1029. page: current,
  1030. size: pageSize
  1031. };
  1032. const paramsData = {
  1033. account: {
  1034. accountId: this.topCostList.account.accountId
  1035. },
  1036. startTime: this.materialDate[0],
  1037. endTime: this.materialDate[1]
  1038. };
  1039. this.handleGetmaterialData(paramsData);
  1040. },
  1041. // TODO 暂时功能隐藏 跳转到拒审重提-创意页面
  1042. gorejectCreativePage() {
  1043. this.$router.push('/Statistics/refuseDataCreatNew');
  1044. },
  1045. disabledDate(current) {
  1046. return current && !(current > (moment().subtract(1, 'months')) && current < moment());
  1047. },
  1048. // 计划点击时间切换数据
  1049. handlePlanPicker(date, dateString) {
  1050. this.planRangePicker = dateString;
  1051. this.planPagin = {
  1052. page: 1,
  1053. size: 10
  1054. };
  1055. const paramsData = {
  1056. account: {
  1057. accountId: this.topCostList.account.accountId
  1058. },
  1059. startTime: dateString[0],
  1060. endTime: dateString[1]
  1061. };
  1062. this.handleGetPlanTableList(paramsData);
  1063. },
  1064. handleCostTimeChange(date, dateString) {
  1065. this.dateValue = dateString;
  1066. const paramsData = {
  1067. account: {
  1068. accountId: this.topCostList.account.accountId
  1069. },
  1070. startTime: dateString[0],
  1071. endTime: dateString[1]
  1072. };
  1073. this.handleYearOnYearCost(paramsData);
  1074. },
  1075. // 获取echart的值
  1076. initEchart(idName, optionName) {
  1077. const chart = this.$refs[idName];
  1078. if (chart) {
  1079. const myChart = echarts.init(document.getElementById(idName));
  1080. myChart.clear();
  1081. myChart.setOption(optionName);
  1082. window.addEventListener('resize', function () {
  1083. myChart.resize();
  1084. });
  1085. }
  1086. },
  1087. // 素材选择时间切换数据
  1088. materialDataChange(date, dateString) {
  1089. this.materialDate = dateString;
  1090. this.materPagin = {
  1091. page: 1,
  1092. size: 10
  1093. };
  1094. const paramsData = {
  1095. account: {
  1096. accountId: this.topCostList.account.accountId
  1097. },
  1098. startTime: dateString[0],
  1099. endTime: dateString[1]
  1100. };
  1101. this.handleGetmaterialData(paramsData);
  1102. },
  1103. // 默认echarts
  1104. initAccountIndexEchart(data, type) {
  1105. const LastX = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.time) : [];
  1106. const todayX = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.time) : [];
  1107. let specialIdentification = '';
  1108. if (todayX.length && todayX[0].indexOf('-') !== -1) {
  1109. specialIdentification = '';
  1110. }
  1111. else {
  1112. specialIdentification = '时';
  1113. }
  1114. let tadayShowY = [];
  1115. let yestodayShowY = [];
  1116. if (type === 'spendCost') {
  1117. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.cost) : [];
  1118. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.cost) : [];
  1119. }
  1120. else if (type === 'activationCost') {
  1121. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.conver) : [];
  1122. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.conver) : [];
  1123. }
  1124. else if (type === 'activation') {
  1125. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.convertNum) : [];
  1126. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.convertNum) : [];
  1127. }
  1128. else if (type === 'bclick') {
  1129. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.converRate) : [];
  1130. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.converRate) : [];
  1131. }
  1132. else if (type === 'formCount') {
  1133. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.averageShow) : [];
  1134. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.averageShow) : [];
  1135. }
  1136. let option = {
  1137. tooltip: {
  1138. trigger: 'axis',
  1139. formatter: params => {
  1140. let isType = '';
  1141. let showBai = this.isActive === 'bclick' ? '%' : '';
  1142. this.throwColumns.forEach(item => {
  1143. if (item.dataIndex === this.isActive) {
  1144. isType = item.title;
  1145. }
  1146. });
  1147. let option = isType + '<br/>';
  1148. for (let i = 0, length = params.length; i < length; i++) {
  1149. const showTime = specialIdentification === '时' ? params[i].seriesName : '';
  1150. 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>${showTime} ${params[i].axisValue}${specialIdentification} ${params[i].data}${showBai}<br />`;
  1151. }
  1152. return option;
  1153. }
  1154. },
  1155. grid: {
  1156. left: '5px',
  1157. top: 0,
  1158. right: '5px',
  1159. bottom: 0
  1160. },
  1161. xAxis: [
  1162. {
  1163. type: 'category',
  1164. show: false,
  1165. boundaryGap: false,
  1166. data: [],
  1167. axisPointer: {
  1168. type: 'none'
  1169. }
  1170. },
  1171. {
  1172. type: 'category',
  1173. show: false,
  1174. boundaryGap: false,
  1175. data: [],
  1176. axisPointer: {
  1177. type: 'none'
  1178. }
  1179. }
  1180. ],
  1181. yAxis: {
  1182. type: 'value',
  1183. show: false
  1184. },
  1185. series: [
  1186. {
  1187. name: '今天',
  1188. data: [],
  1189. type: 'line',
  1190. smooth: true,
  1191. showSymbol: false,
  1192. xAxisIndex: 0,
  1193. symbol: 'circle',
  1194. lineStyle: {
  1195. color: '#2461F1',
  1196. width: 3
  1197. },
  1198. itemStyle: {
  1199. color: '#2461F1',
  1200. borderWidth: 2,
  1201. borderColor: '#fff'
  1202. },
  1203. areaStyle: {
  1204. color: {
  1205. type: 'linear',
  1206. x: 0,
  1207. y: 0,
  1208. x2: 0,
  1209. y2: 1,
  1210. colorStops: [
  1211. {
  1212. offset: 0, color: '#2461F1' // 0% 处的颜色
  1213. },
  1214. {
  1215. offset: 1, color: 'white' // 100% 处的颜色
  1216. }
  1217. ]
  1218. }
  1219. }
  1220. },
  1221. {
  1222. name: '昨天',
  1223. data: [],
  1224. type: 'line',
  1225. smooth: true,
  1226. xAxisIndex: 1,
  1227. showSymbol: false,
  1228. symbol: 'circle',
  1229. lineStyle: {
  1230. color: '#3CC6A5',
  1231. width: 3
  1232. },
  1233. itemStyle: {
  1234. color: '#3CC6A5',
  1235. borderWidth: 2,
  1236. borderColor: '#fff'
  1237. },
  1238. areaStyle: {
  1239. color: {
  1240. type: 'linear',
  1241. x: 0,
  1242. y: 0,
  1243. x2: 0,
  1244. y2: 1,
  1245. colorStops: [
  1246. {
  1247. offset: 0, color: '#3CC6A5' // 0% 处的颜色
  1248. }, {
  1249. offset: 1, color: 'white' // 100% 处的颜色
  1250. }
  1251. ]
  1252. }
  1253. }
  1254. }
  1255. ]
  1256. };
  1257. option.xAxis[0].data = todayX;
  1258. option.xAxis[1].data = LastX;
  1259. option.series[0].name = data.nowMap.costList.length ? data.nowMap.costList[0].statDatetime : '';
  1260. option.series[1].name = data.lastMap.costList.length ? data.lastMap.costList[0].statDatetime : '';
  1261. option.series[0].data = tadayShowY;
  1262. option.series[1].data = yestodayShowY;
  1263. return option;
  1264. },
  1265. // 花费占比echarts
  1266. initGaugechart(value) {
  1267. let dataArr = value.split('%')[0];
  1268. let colorSet = {
  1269. color: '#fff'
  1270. };
  1271. let option = {
  1272. tooltip: {
  1273. formatter: '{a} <br/>{b} : {c}%'
  1274. },
  1275. series: [
  1276. {
  1277. name: '内部进度条',
  1278. type: 'gauge',
  1279. radius: '40%',
  1280. splitNumber: 10,
  1281. axisLine: {
  1282. lineStyle: {
  1283. color: [
  1284. [dataArr / 100 || 0, colorSet.color],
  1285. [1, '#111F42']
  1286. ],
  1287. width: 8
  1288. }
  1289. },
  1290. axisLabel: {
  1291. show: false
  1292. },
  1293. axisTick: {
  1294. show: false
  1295. },
  1296. splitLine: {
  1297. show: false
  1298. },
  1299. itemStyle: {
  1300. show: false
  1301. },
  1302. detail: {
  1303. formatter: function(value) {
  1304. if (value !== 0) {
  1305. return value + '%';
  1306. }
  1307. else {
  1308. return 0;
  1309. }
  1310. },
  1311. offsetCenter: [0, 52],
  1312. textStyle: {
  1313. padding: [0, 0, 0, 0],
  1314. fontSize: 18,
  1315. fontWeight: '700',
  1316. color: colorSet.color
  1317. }
  1318. },
  1319. title: { // 标题
  1320. show: true,
  1321. offsetCenter: [0, 80], // x, y,单位px
  1322. textStyle: {
  1323. color: '#fff',
  1324. fontSize: 14, // 表盘上的标题文字大小
  1325. fontWeight: 400,
  1326. fontFamily: 'PingFangSC'
  1327. }
  1328. },
  1329. data: [
  1330. {
  1331. name: '',
  1332. value: dataArr
  1333. }
  1334. ],
  1335. pointer: {
  1336. show: true,
  1337. length: '75%',
  1338. radius: '20%',
  1339. width: 3 // 指针粗细
  1340. },
  1341. animationDuration: 4000
  1342. },
  1343. {
  1344. name: '外部刻度',
  1345. type: 'gauge',
  1346. radius: '50%',
  1347. min: 0, // 最小刻度
  1348. max: 100, // 最大刻度
  1349. splitNumber: 5, // 刻度数量
  1350. startAngle: 225,
  1351. endAngle: -45,
  1352. axisLine: {
  1353. show: true,
  1354. lineStyle: {
  1355. width: 1,
  1356. color: [
  1357. [1, 'rgba(0,0,0,0)']
  1358. ]
  1359. }
  1360. }, // 仪表盘轴线
  1361. axisLabel: {
  1362. show: true,
  1363. color: '#fff',
  1364. distance: -20,
  1365. formatter: function(v) {
  1366. switch (v + '') {
  1367. case '0':
  1368. return '0';
  1369. case '10':
  1370. return '10';
  1371. case '20':
  1372. return '20';
  1373. case '30':
  1374. return '30';
  1375. case '40':
  1376. return '40';
  1377. case '50':
  1378. return '50';
  1379. case '60':
  1380. return '60';
  1381. case '70':
  1382. return '70';
  1383. case '80':
  1384. return '80';
  1385. case '90':
  1386. return '90';
  1387. case '100':
  1388. return '100';
  1389. }
  1390. }
  1391. }, // 刻度标签。
  1392. axisTick: {
  1393. show: true,
  1394. splitNumber: 5,
  1395. lineStyle: {
  1396. color: colorSet.color, // 用颜色渐变函数不起作用
  1397. width: 1
  1398. },
  1399. length: -8
  1400. }, // 刻度样式
  1401. splitLine: {
  1402. show: true,
  1403. length: -10,
  1404. lineStyle: {
  1405. color: colorSet.color // 用颜色渐变函数不起作用
  1406. }
  1407. }, // 分隔线样式
  1408. detail: {
  1409. show: false
  1410. },
  1411. pointer: {
  1412. show: false
  1413. }
  1414. }
  1415. ]
  1416. };
  1417. return option;
  1418. }
  1419. }
  1420. };
  1421. </script>
  1422. <style lang="scss">
  1423. .orient-list {
  1424. display: flex;
  1425. justify-content: space-between;
  1426. width: 260px;
  1427. .orient-option-left {
  1428. float: left;
  1429. }
  1430. .orient-option-right {
  1431. float: right;
  1432. }
  1433. }
  1434. .accountPage .accountBody {
  1435. line-height: 1;
  1436. .ant-input {
  1437. -webkit-box-sizing: border-box;
  1438. box-sizing: border-box;
  1439. margin: 0;
  1440. padding: 0;
  1441. font-variant: tabular-nums;
  1442. list-style: none;
  1443. -webkit-font-feature-settings: 'tnum';
  1444. font-feature-settings: 'tnum';
  1445. position: relative;
  1446. display: inline-block;
  1447. width: 100%;
  1448. height: 32px;
  1449. padding: 4px 0px;
  1450. color: white;
  1451. font-size: 14px;
  1452. line-height: 1.5;
  1453. background-color: transparent;
  1454. background-image: none;
  1455. border:none;
  1456. border-radius: 4px;
  1457. -webkit-transition: all 0.3s;
  1458. transition: all 0.3s;
  1459. }
  1460. .ant-calendar-range-picker-separator {
  1461. display: inline-block;
  1462. min-width: 10px;
  1463. height: 100%;
  1464. color: white;
  1465. white-space: nowrap;
  1466. text-align: center;
  1467. vertical-align: top;
  1468. pointer-events: none;
  1469. }
  1470. .ant-divider, .ant-divider-vertical {
  1471. position: relative;
  1472. top: -0.06em;
  1473. display: inline-block;
  1474. width: 1px;
  1475. height: 2.9em;
  1476. margin: 0 8px;
  1477. vertical-align: middle;
  1478. }
  1479. }
  1480. .accountPage .materialBody{
  1481. .ant-divider, .ant-divider-vertical {
  1482. position: relative;
  1483. top: 25px;
  1484. display: inline-block;
  1485. width: 1px;
  1486. height: 366px;
  1487. margin: 0 8px;
  1488. vertical-align: middle;
  1489. }
  1490. }
  1491. .accountPage .dataMode{
  1492. .ant-divider, .ant-divider-vertical {
  1493. position: relative;
  1494. top: 10px;
  1495. display: inline-block;
  1496. width: 1px;
  1497. height: 350px;
  1498. margin: 0 8px;
  1499. vertical-align: middle;
  1500. }
  1501. }
  1502. .ant-tooltip {
  1503. max-width: 400px;
  1504. }
  1505. </style>
  1506. <style lang="scss" scoped>
  1507. .accountPage {
  1508. .common-input-long {
  1509. width: 140px !important;
  1510. }
  1511. .sign {
  1512. font-size: 18px;
  1513. .rise {
  1514. color: #F2637B;
  1515. width: 16px;
  1516. height: 16px;
  1517. text-align: center;
  1518. transform: rotate(-30deg);
  1519. }
  1520. .fall {
  1521. color: green;
  1522. width: 16px;
  1523. height: 16px;
  1524. text-align: center;
  1525. transform: rotate(30deg);
  1526. }
  1527. .up {
  1528. width: 16px;
  1529. height: 16px;
  1530. text-align: center;
  1531. background-color: #F2637B;
  1532. border-radius: 5px;
  1533. color: white;
  1534. }
  1535. }
  1536. .pagin-table-class {
  1537. display: flex;
  1538. justify-content: flex-end;
  1539. margin-top: 20px;
  1540. margin-bottom: 20px;
  1541. }
  1542. p {
  1543. margin-bottom: 0px;
  1544. }
  1545. .echart {
  1546. margin-top: 30px;
  1547. }
  1548. .bodyBox {
  1549. width: 100%;
  1550. margin-bottom: 26px;
  1551. }
  1552. .accountBody {
  1553. height: 300px;
  1554. display: flex;
  1555. justify-content: space-between;
  1556. }
  1557. .accountBodyLeft {
  1558. width: 80%;
  1559. margin-right: 26px;
  1560. padding: 20px;
  1561. display: flex;
  1562. justify-content: space-between;
  1563. }
  1564. .accountBodyRight {
  1565. width: 18%;
  1566. padding: 25px;
  1567. }
  1568. .accountBodyLeft,.accountBodyRight {
  1569. border-radius: 10px;
  1570. background: white;
  1571. }
  1572. .accountBodyLeftCost {
  1573. background: #2461F1;
  1574. border-radius: 10px;
  1575. height: 260px;
  1576. width: 40%;
  1577. flex-shrink: 0;
  1578. color: white;
  1579. display: flex;
  1580. justify-content: space-between;
  1581. padding: 20px;
  1582. }
  1583. .accountBodyLeftCostLeft {
  1584. width: 55%;
  1585. .title{
  1586. font-size: 26px;
  1587. font-weight: 700;
  1588. padding: 0;
  1589. margin-bottom: 10px;
  1590. }
  1591. .costInfo {
  1592. margin: 20px 0 0 0;
  1593. width: 100%;
  1594. display: flex;
  1595. justify-content: space-between;
  1596. }
  1597. // .yesterdayInfo {
  1598. // width:50%;
  1599. // flex-shrink: 0;
  1600. // }
  1601. .costNum{
  1602. width: 90%;
  1603. font-size: 26px;
  1604. font-weight: 700;
  1605. color:#2461F1 ;
  1606. background: white;
  1607. text-align: center;
  1608. border-radius: 10px;
  1609. margin: 20px 0;
  1610. padding: 10px 0px;
  1611. }
  1612. @media screen and (max-width:1980px) and (min-width:1560px) {
  1613. .costNum {
  1614. font-size: 22px;
  1615. }
  1616. }
  1617. @media screen and (max-width:1560px) and (min-width:1280px) {
  1618. .costNum {
  1619. font-size: 20px;
  1620. }
  1621. }
  1622. @media screen and (max-width:1280px) {
  1623. .costNum {
  1624. font-size: 18px;
  1625. }
  1626. }
  1627. }
  1628. .accountBodyLeftCostRight {
  1629. width: 45%;
  1630. margin-left: 15px;
  1631. position: relative;
  1632. .cost-radio-tool {
  1633. position: absolute;
  1634. bottom: 34px;
  1635. left: 28%;
  1636. }
  1637. }
  1638. .accountBodyLeftOther {
  1639. width: 60%;
  1640. margin-left: 15px;
  1641. padding-left: 15px;
  1642. border-left: 1px solid #eee;
  1643. position: relative;
  1644. .top {
  1645. display: flex;
  1646. justify-content: space-between;
  1647. padding-top: 8px;
  1648. }
  1649. .item {
  1650. width: 25%;
  1651. }
  1652. .item:nth-child(1) {
  1653. width: 0;
  1654. }
  1655. .todyCost {
  1656. font-size: 1.2rem;
  1657. font-weight: 700;
  1658. color:#303133;
  1659. margin-bottom: 10px;
  1660. width: 100%;
  1661. }
  1662. .yesterdayCost {
  1663. font-size: 0.89rem;
  1664. font-weight: 500;
  1665. color:#303133;
  1666. margin-bottom: 8px;
  1667. }
  1668. .IndexName {
  1669. font-size: 15px;
  1670. font-weight: 600;
  1671. color:#303133;
  1672. display: inline-block;
  1673. cursor: pointer;
  1674. }
  1675. .IndexNameActive {
  1676. color:#2461F1;
  1677. }
  1678. .IndexNameActive::after {
  1679. content: '';
  1680. display: block;
  1681. width: 15px;
  1682. height: 3px;
  1683. background: #2461F1;
  1684. position: relative;
  1685. top: 3px;
  1686. left: 50%;
  1687. margin-left: -8px;
  1688. }
  1689. .showIndex {
  1690. position: absolute;
  1691. top: -5px;
  1692. right: 0px;
  1693. font-size: 12px;
  1694. cursor: pointer;
  1695. color: #909399;
  1696. }
  1697. .showIndex:hover {
  1698. color:#2461F1;
  1699. }
  1700. }
  1701. // 第二块
  1702. .planBody{
  1703. display: flex;
  1704. justify-content: space-between;
  1705. height: auto;
  1706. }
  1707. .planBodyLeft {
  1708. width: 40%;
  1709. height: 100%;
  1710. background: white;
  1711. flex-shrink: 0;
  1712. border-radius: 10px;
  1713. }
  1714. .title {
  1715. padding: 20px 20px;
  1716. }
  1717. .titleContext {
  1718. font-size: 14px;
  1719. font-weight: 600;
  1720. color:#303133;
  1721. margin-bottom: 0;
  1722. }
  1723. .titleContext::before {
  1724. content:'';
  1725. width: 5px;
  1726. height: 5px;
  1727. border-radius: 2.5px;
  1728. background-color:#2461F1;
  1729. display: inline-block;
  1730. position: relative;
  1731. top: -2px;
  1732. }
  1733. .titleTip {
  1734. font-size: 14px;
  1735. color: #909399;
  1736. font-weight: 400;
  1737. margin-left: 20px;
  1738. }
  1739. .planBodyRight {
  1740. width: 100%;
  1741. background: white;
  1742. height: 100%;
  1743. border-radius: 10px;
  1744. }
  1745. // 素材块
  1746. .materialBody{
  1747. border-radius: 10px;
  1748. background: white;
  1749. position: relative;
  1750. display: flex;
  1751. padding:20px 20px;
  1752. .dataPicker {
  1753. position: absolute;
  1754. top: 25px;
  1755. right: 20px;
  1756. }
  1757. .source-material {
  1758. position: absolute;
  1759. top: 30px;
  1760. left: 20px;
  1761. }
  1762. }
  1763. .materialBodyRight {
  1764. width: 100%;
  1765. height: 100%;
  1766. padding-top: 60px;
  1767. .material-table-class {
  1768. height: 100%;
  1769. overflow-y: auto;
  1770. }
  1771. }
  1772. .accountBodyRighTitle {
  1773. .acount-body-content {
  1774. display: flex;
  1775. align-items: center;
  1776. .acount-body-title {
  1777. width: 340px;
  1778. font-size: 26px;
  1779. font-weight: 700;
  1780. cursor: pointer;
  1781. white-space: nowrap;
  1782. overflow: hidden;
  1783. text-overflow: ellipsis;
  1784. }
  1785. }
  1786. }
  1787. .accountBodyRighTitleID {
  1788. margin-top: 15px;
  1789. font-size: 14px;
  1790. color: #c0c4cc;
  1791. }
  1792. .accountBodyRightInfoItem {
  1793. background: rgb(238,241,255);
  1794. padding:15px 15px;
  1795. margin: 20px 0 0;
  1796. border-radius: 5px;
  1797. font-size: 16px;
  1798. white-space: nowrap;
  1799. overflow: hidden;
  1800. text-overflow: ellipsis;
  1801. .name {
  1802. font-size: 16px;
  1803. font-weight: 600;
  1804. }
  1805. }
  1806. .createNum {
  1807. cursor: pointer;
  1808. position: relative;
  1809. }
  1810. .targetBody {
  1811. border-radius: 10px;
  1812. background: white;
  1813. .dataMode{
  1814. display: flex;
  1815. justify-content: space-between;
  1816. }
  1817. .topOpt {
  1818. padding: 20px;
  1819. display: flex;
  1820. justify-content: flex-end;
  1821. }
  1822. }
  1823. .adPositionMode,
  1824. .ageMode,
  1825. .genderMode {
  1826. width: 32%;
  1827. height: 100%;
  1828. }
  1829. }
  1830. </style>