headline-view.vue 70 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840
  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: 340
  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. this.planData = [];
  840. const paramsData = {
  841. accountId: data.account.accountId,
  842. startTime: this.planRangePicker[0],
  843. endTime: this.planRangePicker[1],
  844. pageNum: this.planPagin.page,
  845. pageSize: this.planPagin.size
  846. };
  847. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportPlanCost', paramsData).then(result => {
  848. if (result.code === 0) {
  849. let defaultData = result.result.list.map(item => {
  850. item.converRate = item.converRate + '%';
  851. return item;
  852. });;
  853. this.planData = [...defaultData];
  854. this.planTotalAll = result.result.total;
  855. }
  856. else {
  857. this.$message.error(result.message);
  858. }
  859. }).catch(error => {
  860. console.log(error, 'eeee');
  861. });
  862. },
  863. // 获取echarts数据
  864. handleYearOnYearCost(data) {
  865. const paramsData = {
  866. accountId: data.account.accountId,
  867. startTime: data.startTime,
  868. endTime: data.endTime
  869. };
  870. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getReportYearOnYearCost', paramsData).then(result => {
  871. if (result.code === 0) {
  872. this.yearCostReportList = result.result;
  873. this.initEchart('gaugeEchart', this.initGaugechart(result.result.costShare));
  874. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(result.result, 'spendCost'));
  875. this.throwColumns[0].today = Number(result.result.nowCost);
  876. this.throwColumns[0].yesterday = Number(result.result.lastCost);
  877. this.throwColumns[1].today = Number(result.result.nowMap.conver);
  878. this.throwColumns[1].yesterday = Number(result.result.lastMap.conver);
  879. this.throwColumns[2].today = Number(result.result.nowMap.converNum);
  880. this.throwColumns[2].yesterday = Number(result.result.lastMap.converNum);
  881. this.throwColumns[3].today = Number(result.result.nowMap.converRate);
  882. this.throwColumns[3].yesterday = Number(result.result.lastMap.converRate);
  883. this.throwColumns[4].today = Number(result.result.nowMap.averageShow);
  884. this.throwColumns[4].yesterday = Number(result.result.lastMap.averageShow);
  885. this.isActive = 'spendCost';
  886. }
  887. else {
  888. this.$message.error(result.message);
  889. }
  890. }).catch(error => {
  891. console.log(error, 'eeee');
  892. });
  893. },
  894. // 初始化数据
  895. handleGetInit() {
  896. const paramsData = {
  897. userId: this.userInfo().id,
  898. type: 'bytedance'
  899. };
  900. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/initAccountIdAndTime', paramsData).then(result => {
  901. if (result.code === 0) {
  902. this.topCostList = result.result;
  903. const defaultTime = [result.result.startTime, result.result.endTime];
  904. this.dateValue = [...defaultTime];
  905. this.planRangePicker = [...defaultTime];
  906. this.handleGetAccountMessage(result.result.account.accountId);
  907. this.handleYearOnYearCost(result.result);
  908. this.handleGetPlanTableList(result.result);
  909. this.handleGetmaterialData(result.result);
  910. this.handleGetAdAudiencePackage(result.result.account.accountId);
  911. }
  912. else {
  913. this.$message.error(result.message);
  914. }
  915. }).catch(error => {
  916. console.log(error, 'eeee');
  917. });
  918. },
  919. // 获取头部最右侧数据
  920. handleGetAccountMessage(value) {
  921. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/getAccountCost', {accountId: value}).then(result => {
  922. if (result.code === 0) {
  923. this.topAccountMsg = result.result;
  924. }
  925. else {
  926. this.$message.error(result.message);
  927. }
  928. }).catch(error => {
  929. console.log(error, 'eeee');
  930. });
  931. },
  932. // 获取素材列表数据
  933. handleGetmaterialData(data) {
  934. const paramsData = {
  935. accountId: data.account.accountId,
  936. startTime: this.materialDate[0],
  937. endTime: this.materialDate[1],
  938. pageNum: this.materPagin.page,
  939. pageSize: this.materPagin.size
  940. };
  941. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/selectMaterialDailyReport', paramsData).then(result => {
  942. if (result.code === 0) {
  943. this.materialData = result.result.list.map(item => {
  944. item.clickRate = item.clickRate + '%';
  945. item.convertRate = item.convertRate + '%';
  946. return item;
  947. });
  948. this.materTotalAll = result.result.total;
  949. }
  950. else {
  951. this.$message.error(result.message);
  952. }
  953. }).catch(error => {
  954. console.log(error, 'eeee');
  955. });
  956. },
  957. handleGetActiveIndexName(val) {
  958. this.isActive = val.dataIndex;
  959. this.initEchart('accountIndexEchart', this.initAccountIndexEchart(this.yearCostReportList, val.dataIndex));
  960. },
  961. // 修改定向的确定按钮
  962. handleTargethandleOk() {
  963. if (!this.adAudiencePackageId) {
  964. this.$message.error('请选择定向包');
  965. return;
  966. }
  967. const paramsData = {
  968. accountId: this.topCostList.account.accountId,
  969. adId: this.currentUnit.adId,
  970. audiencePackageId: this.adAudiencePackageId
  971. };
  972. getAction(urlAcount + '/bytedance-api/advertiser/bytedanceReportController/updateADAudiencePackage', paramsData).then(result => {
  973. if (result.code === 0) {
  974. this.adAudiencePackageId = undefined;
  975. this.targetVisible = false;
  976. this.$message.success(result.message);
  977. this.handleGetPlanTableList(this.topCostList);
  978. }
  979. else {
  980. this.$message.error(result.message);
  981. }
  982. }).catch(error => {
  983. console.log(error, 'eeee');
  984. });
  985. },
  986. // 修改定向的取消按钮
  987. handleTargethandleCancel() {
  988. this.adAudiencePackageId = undefined;
  989. this.packageName = '';
  990. this.targetVisible = false;
  991. },
  992. handleAccounthandleOk() {
  993. const paramsData = {
  994. account: {
  995. accountId: this.selectaccountId
  996. },
  997. startTime: this.dateValue[0],
  998. endTime: this.dateValue[1]
  999. };
  1000. this.topCostList = paramsData;
  1001. this.handleGetAccountMessage(this.selectaccountId);
  1002. this.handleYearOnYearCost(paramsData);
  1003. this.handleGetPlanTableList(paramsData);
  1004. this.handleGetmaterialData(paramsData);
  1005. this.handleGetAdAudiencePackage(this.selectaccountId);
  1006. this.selectaccountId = '';
  1007. this.accountVisible = false;
  1008. },
  1009. handleAccountCancel() {
  1010. this.selectaccountId = '';
  1011. this.accountVisible = false;
  1012. },
  1013. // 计划点击分页操作
  1014. handleOnShowSizeChange(current, pageSize) {
  1015. this.planPagin = {
  1016. page: current,
  1017. size: pageSize
  1018. };
  1019. const paramsData = {
  1020. account: {
  1021. accountId: this.topCostList.account.accountId
  1022. },
  1023. startTime: this.planRangePicker[0],
  1024. endTime: this.planRangePicker[1]
  1025. };
  1026. this.handleGetPlanTableList(paramsData);
  1027. },
  1028. // 素材点击分页操作
  1029. handleSourceMaterialChange(current, pageSize) {
  1030. this.materPagin = {
  1031. page: current,
  1032. size: pageSize
  1033. };
  1034. const paramsData = {
  1035. account: {
  1036. accountId: this.topCostList.account.accountId
  1037. },
  1038. startTime: this.materialDate[0],
  1039. endTime: this.materialDate[1]
  1040. };
  1041. this.handleGetmaterialData(paramsData);
  1042. },
  1043. // TODO 暂时功能隐藏 跳转到拒审重提-创意页面
  1044. gorejectCreativePage() {
  1045. this.$router.push('/Statistics/refuseDataCreatNew');
  1046. },
  1047. disabledDate(current) {
  1048. return current && !(current > (moment().subtract(1, 'months')) && current < moment());
  1049. },
  1050. // 计划点击时间切换数据
  1051. handlePlanPicker(date, dateString) {
  1052. this.planRangePicker = dateString;
  1053. this.planPagin = {
  1054. page: 1,
  1055. size: 10
  1056. };
  1057. const paramsData = {
  1058. account: {
  1059. accountId: this.topCostList.account.accountId
  1060. },
  1061. startTime: dateString[0],
  1062. endTime: dateString[1]
  1063. };
  1064. this.handleGetPlanTableList(paramsData);
  1065. },
  1066. handleCostTimeChange(date, dateString) {
  1067. this.dateValue = dateString;
  1068. const paramsData = {
  1069. account: {
  1070. accountId: this.topCostList.account.accountId
  1071. },
  1072. startTime: dateString[0],
  1073. endTime: dateString[1]
  1074. };
  1075. this.handleYearOnYearCost(paramsData);
  1076. },
  1077. // 获取echart的值
  1078. initEchart(idName, optionName) {
  1079. const chart = this.$refs[idName];
  1080. if (chart) {
  1081. const myChart = echarts.init(document.getElementById(idName));
  1082. myChart.clear();
  1083. myChart.setOption(optionName);
  1084. window.addEventListener('resize', function () {
  1085. myChart.resize();
  1086. });
  1087. }
  1088. },
  1089. // 素材选择时间切换数据
  1090. materialDataChange(date, dateString) {
  1091. this.materialDate = dateString;
  1092. this.materPagin = {
  1093. page: 1,
  1094. size: 10
  1095. };
  1096. const paramsData = {
  1097. account: {
  1098. accountId: this.topCostList.account.accountId
  1099. },
  1100. startTime: dateString[0],
  1101. endTime: dateString[1]
  1102. };
  1103. this.handleGetmaterialData(paramsData);
  1104. },
  1105. // 默认echarts
  1106. initAccountIndexEchart(data, type) {
  1107. const LastX = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.time) : [];
  1108. const todayX = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.time) : [];
  1109. let specialIdentification = '';
  1110. if (todayX.length && todayX[0].indexOf('-') !== -1) {
  1111. specialIdentification = '';
  1112. }
  1113. else {
  1114. specialIdentification = '时';
  1115. }
  1116. let tadayShowY = [];
  1117. let yestodayShowY = [];
  1118. if (type === 'spendCost') {
  1119. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.cost) : [];
  1120. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.cost) : [];
  1121. }
  1122. else if (type === 'activationCost') {
  1123. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.conver) : [];
  1124. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.conver) : [];
  1125. }
  1126. else if (type === 'activation') {
  1127. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.convertNum) : [];
  1128. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.convertNum) : [];
  1129. }
  1130. else if (type === 'bclick') {
  1131. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.converRate) : [];
  1132. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.converRate) : [];
  1133. }
  1134. else if (type === 'formCount') {
  1135. tadayShowY = data.nowMap.costList.length ? data.nowMap.costList.map(item => item.averageShow) : [];
  1136. yestodayShowY = data.lastMap.costList.length ? data.lastMap.costList.map(item => item.averageShow) : [];
  1137. }
  1138. let option = {
  1139. tooltip: {
  1140. trigger: 'axis',
  1141. formatter: params => {
  1142. let isType = '';
  1143. let showBai = this.isActive === 'bclick' ? '%' : '';
  1144. this.throwColumns.forEach(item => {
  1145. if (item.dataIndex === this.isActive) {
  1146. isType = item.title;
  1147. }
  1148. });
  1149. let option = isType + '<br/>';
  1150. for (let i = 0, length = params.length; i < length; i++) {
  1151. const showTime = specialIdentification === '时' ? params[i].seriesName : '';
  1152. 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 />`;
  1153. }
  1154. return option;
  1155. }
  1156. },
  1157. grid: {
  1158. left: '5px',
  1159. top: 0,
  1160. right: '5px',
  1161. bottom: 0
  1162. },
  1163. xAxis: [
  1164. {
  1165. type: 'category',
  1166. show: false,
  1167. boundaryGap: false,
  1168. data: [],
  1169. axisPointer: {
  1170. type: 'none'
  1171. }
  1172. },
  1173. {
  1174. type: 'category',
  1175. show: false,
  1176. boundaryGap: false,
  1177. data: [],
  1178. axisPointer: {
  1179. type: 'none'
  1180. }
  1181. }
  1182. ],
  1183. yAxis: {
  1184. type: 'value',
  1185. show: false
  1186. },
  1187. series: [
  1188. {
  1189. name: '今天',
  1190. data: [],
  1191. type: 'line',
  1192. smooth: true,
  1193. showSymbol: false,
  1194. xAxisIndex: 0,
  1195. symbol: 'circle',
  1196. lineStyle: {
  1197. color: '#2461F1',
  1198. width: 3
  1199. },
  1200. itemStyle: {
  1201. color: '#2461F1',
  1202. borderWidth: 2,
  1203. borderColor: '#fff'
  1204. },
  1205. areaStyle: {
  1206. color: {
  1207. type: 'linear',
  1208. x: 0,
  1209. y: 0,
  1210. x2: 0,
  1211. y2: 1,
  1212. colorStops: [
  1213. {
  1214. offset: 0, color: '#2461F1' // 0% 处的颜色
  1215. },
  1216. {
  1217. offset: 1, color: 'white' // 100% 处的颜色
  1218. }
  1219. ]
  1220. }
  1221. }
  1222. },
  1223. {
  1224. name: '昨天',
  1225. data: [],
  1226. type: 'line',
  1227. smooth: true,
  1228. xAxisIndex: 1,
  1229. showSymbol: false,
  1230. symbol: 'circle',
  1231. lineStyle: {
  1232. color: '#3CC6A5',
  1233. width: 3
  1234. },
  1235. itemStyle: {
  1236. color: '#3CC6A5',
  1237. borderWidth: 2,
  1238. borderColor: '#fff'
  1239. },
  1240. areaStyle: {
  1241. color: {
  1242. type: 'linear',
  1243. x: 0,
  1244. y: 0,
  1245. x2: 0,
  1246. y2: 1,
  1247. colorStops: [
  1248. {
  1249. offset: 0, color: '#3CC6A5' // 0% 处的颜色
  1250. }, {
  1251. offset: 1, color: 'white' // 100% 处的颜色
  1252. }
  1253. ]
  1254. }
  1255. }
  1256. }
  1257. ]
  1258. };
  1259. option.xAxis[0].data = todayX;
  1260. option.xAxis[1].data = LastX;
  1261. option.series[0].name = data.nowMap.costList.length ? data.nowMap.costList[0].statDatetime : '';
  1262. option.series[1].name = data.lastMap.costList.length ? data.lastMap.costList[0].statDatetime : '';
  1263. option.series[0].data = tadayShowY;
  1264. option.series[1].data = yestodayShowY;
  1265. return option;
  1266. },
  1267. // 花费占比echarts
  1268. initGaugechart(value) {
  1269. let dataArr = value.split('%')[0];
  1270. let colorSet = {
  1271. color: '#fff'
  1272. };
  1273. let option = {
  1274. tooltip: {
  1275. formatter: '{a} <br/>{b} : {c}%'
  1276. },
  1277. series: [
  1278. {
  1279. name: '内部进度条',
  1280. type: 'gauge',
  1281. radius: '40%',
  1282. splitNumber: 10,
  1283. axisLine: {
  1284. lineStyle: {
  1285. color: [
  1286. [dataArr / 100 || 0, colorSet.color],
  1287. [1, '#111F42']
  1288. ],
  1289. width: 8
  1290. }
  1291. },
  1292. axisLabel: {
  1293. show: false
  1294. },
  1295. axisTick: {
  1296. show: false
  1297. },
  1298. splitLine: {
  1299. show: false
  1300. },
  1301. itemStyle: {
  1302. show: false
  1303. },
  1304. detail: {
  1305. formatter: function(value) {
  1306. if (value !== 0) {
  1307. return value + '%';
  1308. }
  1309. else {
  1310. return 0;
  1311. }
  1312. },
  1313. offsetCenter: [0, 52],
  1314. textStyle: {
  1315. padding: [0, 0, 0, 0],
  1316. fontSize: 18,
  1317. fontWeight: '700',
  1318. color: colorSet.color
  1319. }
  1320. },
  1321. title: { // 标题
  1322. show: true,
  1323. offsetCenter: [0, 80], // x, y,单位px
  1324. textStyle: {
  1325. color: '#fff',
  1326. fontSize: 14, // 表盘上的标题文字大小
  1327. fontWeight: 400,
  1328. fontFamily: 'PingFangSC'
  1329. }
  1330. },
  1331. data: [
  1332. {
  1333. name: '',
  1334. value: dataArr
  1335. }
  1336. ],
  1337. pointer: {
  1338. show: true,
  1339. length: '75%',
  1340. radius: '20%',
  1341. width: 3 // 指针粗细
  1342. },
  1343. animationDuration: 4000
  1344. },
  1345. {
  1346. name: '外部刻度',
  1347. type: 'gauge',
  1348. radius: '50%',
  1349. min: 0, // 最小刻度
  1350. max: 100, // 最大刻度
  1351. splitNumber: 5, // 刻度数量
  1352. startAngle: 225,
  1353. endAngle: -45,
  1354. axisLine: {
  1355. show: true,
  1356. lineStyle: {
  1357. width: 1,
  1358. color: [
  1359. [1, 'rgba(0,0,0,0)']
  1360. ]
  1361. }
  1362. }, // 仪表盘轴线
  1363. axisLabel: {
  1364. show: true,
  1365. color: '#fff',
  1366. distance: -20,
  1367. formatter: function(v) {
  1368. switch (v + '') {
  1369. case '0':
  1370. return '0';
  1371. case '10':
  1372. return '10';
  1373. case '20':
  1374. return '20';
  1375. case '30':
  1376. return '30';
  1377. case '40':
  1378. return '40';
  1379. case '50':
  1380. return '50';
  1381. case '60':
  1382. return '60';
  1383. case '70':
  1384. return '70';
  1385. case '80':
  1386. return '80';
  1387. case '90':
  1388. return '90';
  1389. case '100':
  1390. return '100';
  1391. }
  1392. }
  1393. }, // 刻度标签。
  1394. axisTick: {
  1395. show: true,
  1396. splitNumber: 5,
  1397. lineStyle: {
  1398. color: colorSet.color, // 用颜色渐变函数不起作用
  1399. width: 1
  1400. },
  1401. length: -8
  1402. }, // 刻度样式
  1403. splitLine: {
  1404. show: true,
  1405. length: -10,
  1406. lineStyle: {
  1407. color: colorSet.color // 用颜色渐变函数不起作用
  1408. }
  1409. }, // 分隔线样式
  1410. detail: {
  1411. show: false
  1412. },
  1413. pointer: {
  1414. show: false
  1415. }
  1416. }
  1417. ]
  1418. };
  1419. return option;
  1420. }
  1421. }
  1422. };
  1423. </script>
  1424. <style lang="scss">
  1425. .orient-list {
  1426. display: flex;
  1427. justify-content: space-between;
  1428. width: 260px;
  1429. .orient-option-left {
  1430. float: left;
  1431. }
  1432. .orient-option-right {
  1433. float: right;
  1434. }
  1435. }
  1436. .accountPage .accountBody {
  1437. line-height: 1;
  1438. .ant-input {
  1439. -webkit-box-sizing: border-box;
  1440. box-sizing: border-box;
  1441. margin: 0;
  1442. padding: 0;
  1443. font-variant: tabular-nums;
  1444. list-style: none;
  1445. -webkit-font-feature-settings: 'tnum';
  1446. font-feature-settings: 'tnum';
  1447. position: relative;
  1448. display: inline-block;
  1449. width: 100%;
  1450. height: 32px;
  1451. padding: 4px 0px;
  1452. color: white;
  1453. font-size: 14px;
  1454. line-height: 1.5;
  1455. background-color: transparent;
  1456. background-image: none;
  1457. border:none;
  1458. border-radius: 4px;
  1459. -webkit-transition: all 0.3s;
  1460. transition: all 0.3s;
  1461. }
  1462. .ant-calendar-range-picker-separator {
  1463. display: inline-block;
  1464. min-width: 10px;
  1465. height: 100%;
  1466. color: white;
  1467. white-space: nowrap;
  1468. text-align: center;
  1469. vertical-align: top;
  1470. pointer-events: none;
  1471. }
  1472. .ant-divider, .ant-divider-vertical {
  1473. position: relative;
  1474. top: -0.06em;
  1475. display: inline-block;
  1476. width: 1px;
  1477. height: 2.9em;
  1478. margin: 0 8px;
  1479. vertical-align: middle;
  1480. }
  1481. }
  1482. .accountPage .materialBody{
  1483. .ant-divider, .ant-divider-vertical {
  1484. position: relative;
  1485. top: 25px;
  1486. display: inline-block;
  1487. width: 1px;
  1488. height: 366px;
  1489. margin: 0 8px;
  1490. vertical-align: middle;
  1491. }
  1492. }
  1493. .accountPage .dataMode{
  1494. .ant-divider, .ant-divider-vertical {
  1495. position: relative;
  1496. top: 10px;
  1497. display: inline-block;
  1498. width: 1px;
  1499. height: 350px;
  1500. margin: 0 8px;
  1501. vertical-align: middle;
  1502. }
  1503. }
  1504. .ant-tooltip {
  1505. max-width: 400px;
  1506. }
  1507. </style>
  1508. <style lang="scss" scoped>
  1509. .accountPage {
  1510. .common-input-long {
  1511. width: 140px !important;
  1512. }
  1513. .sign {
  1514. font-size: 18px;
  1515. .rise {
  1516. color: #F2637B;
  1517. width: 16px;
  1518. height: 16px;
  1519. text-align: center;
  1520. transform: rotate(-30deg);
  1521. }
  1522. .fall {
  1523. color: green;
  1524. width: 16px;
  1525. height: 16px;
  1526. text-align: center;
  1527. transform: rotate(30deg);
  1528. }
  1529. .up {
  1530. width: 16px;
  1531. height: 16px;
  1532. text-align: center;
  1533. background-color: #F2637B;
  1534. border-radius: 5px;
  1535. color: white;
  1536. }
  1537. }
  1538. .pagin-table-class {
  1539. display: flex;
  1540. justify-content: flex-end;
  1541. margin-top: 20px;
  1542. margin-bottom: 20px;
  1543. }
  1544. p {
  1545. margin-bottom: 0px;
  1546. }
  1547. .echart {
  1548. margin-top: 30px;
  1549. }
  1550. .bodyBox {
  1551. width: 100%;
  1552. margin-bottom: 26px;
  1553. }
  1554. .accountBody {
  1555. height: 300px;
  1556. display: flex;
  1557. justify-content: space-between;
  1558. }
  1559. .accountBodyLeft {
  1560. width: 80%;
  1561. margin-right: 26px;
  1562. padding: 20px;
  1563. display: flex;
  1564. justify-content: space-between;
  1565. }
  1566. .accountBodyRight {
  1567. width: 18%;
  1568. padding: 25px;
  1569. }
  1570. .accountBodyLeft,.accountBodyRight {
  1571. border-radius: 10px;
  1572. background: white;
  1573. }
  1574. .accountBodyLeftCost {
  1575. background: #2461F1;
  1576. border-radius: 10px;
  1577. height: 260px;
  1578. width: 40%;
  1579. flex-shrink: 0;
  1580. color: white;
  1581. display: flex;
  1582. justify-content: space-between;
  1583. padding: 20px;
  1584. }
  1585. .accountBodyLeftCostLeft {
  1586. width: 55%;
  1587. .title{
  1588. font-size: 26px;
  1589. font-weight: 700;
  1590. padding: 0;
  1591. margin-bottom: 10px;
  1592. }
  1593. .costInfo {
  1594. margin: 20px 0 0 0;
  1595. width: 100%;
  1596. display: flex;
  1597. justify-content: space-between;
  1598. }
  1599. // .yesterdayInfo {
  1600. // width:50%;
  1601. // flex-shrink: 0;
  1602. // }
  1603. .costNum{
  1604. width: 90%;
  1605. font-size: 26px;
  1606. font-weight: 700;
  1607. color:#2461F1 ;
  1608. background: white;
  1609. text-align: center;
  1610. border-radius: 10px;
  1611. margin: 20px 0;
  1612. padding: 10px 0px;
  1613. }
  1614. @media screen and (max-width:1980px) and (min-width:1560px) {
  1615. .costNum {
  1616. font-size: 22px;
  1617. }
  1618. }
  1619. @media screen and (max-width:1560px) and (min-width:1280px) {
  1620. .costNum {
  1621. font-size: 20px;
  1622. }
  1623. }
  1624. @media screen and (max-width:1280px) {
  1625. .costNum {
  1626. font-size: 18px;
  1627. }
  1628. }
  1629. }
  1630. .accountBodyLeftCostRight {
  1631. width: 45%;
  1632. margin-left: 15px;
  1633. position: relative;
  1634. .cost-radio-tool {
  1635. position: absolute;
  1636. bottom: 34px;
  1637. left: 28%;
  1638. }
  1639. }
  1640. .accountBodyLeftOther {
  1641. width: 60%;
  1642. margin-left: 15px;
  1643. padding-left: 15px;
  1644. border-left: 1px solid #eee;
  1645. position: relative;
  1646. .top {
  1647. display: flex;
  1648. justify-content: space-between;
  1649. padding-top: 8px;
  1650. }
  1651. .item {
  1652. width: 25%;
  1653. }
  1654. .item:nth-child(1) {
  1655. width: 0;
  1656. }
  1657. .todyCost {
  1658. font-size: 1.2rem;
  1659. font-weight: 700;
  1660. color:#303133;
  1661. margin-bottom: 10px;
  1662. width: 100%;
  1663. }
  1664. .yesterdayCost {
  1665. font-size: 0.89rem;
  1666. font-weight: 500;
  1667. color:#303133;
  1668. margin-bottom: 8px;
  1669. }
  1670. .IndexName {
  1671. font-size: 15px;
  1672. font-weight: 600;
  1673. color:#303133;
  1674. display: inline-block;
  1675. cursor: pointer;
  1676. }
  1677. .IndexNameActive {
  1678. color:#2461F1;
  1679. }
  1680. .IndexNameActive::after {
  1681. content: '';
  1682. display: block;
  1683. width: 15px;
  1684. height: 3px;
  1685. background: #2461F1;
  1686. position: relative;
  1687. top: 3px;
  1688. left: 50%;
  1689. margin-left: -8px;
  1690. }
  1691. .showIndex {
  1692. position: absolute;
  1693. top: -5px;
  1694. right: 0px;
  1695. font-size: 12px;
  1696. cursor: pointer;
  1697. color: #909399;
  1698. }
  1699. .showIndex:hover {
  1700. color:#2461F1;
  1701. }
  1702. }
  1703. // 第二块
  1704. .planBody{
  1705. display: flex;
  1706. justify-content: space-between;
  1707. height: auto;
  1708. }
  1709. .planBodyLeft {
  1710. width: 40%;
  1711. height: 100%;
  1712. background: white;
  1713. flex-shrink: 0;
  1714. border-radius: 10px;
  1715. }
  1716. .title {
  1717. padding: 20px 20px;
  1718. }
  1719. .titleContext {
  1720. font-size: 14px;
  1721. font-weight: 600;
  1722. color:#303133;
  1723. margin-bottom: 0;
  1724. }
  1725. .titleContext::before {
  1726. content:'';
  1727. width: 5px;
  1728. height: 5px;
  1729. border-radius: 2.5px;
  1730. background-color:#2461F1;
  1731. display: inline-block;
  1732. position: relative;
  1733. top: -2px;
  1734. }
  1735. .titleTip {
  1736. font-size: 14px;
  1737. color: #909399;
  1738. font-weight: 400;
  1739. margin-left: 20px;
  1740. }
  1741. .planBodyRight {
  1742. width: 100%;
  1743. background: white;
  1744. height: 100%;
  1745. border-radius: 10px;
  1746. }
  1747. // 素材块
  1748. .materialBody{
  1749. border-radius: 10px;
  1750. background: white;
  1751. position: relative;
  1752. display: flex;
  1753. padding:20px 20px;
  1754. .dataPicker {
  1755. position: absolute;
  1756. top: 25px;
  1757. right: 20px;
  1758. }
  1759. .source-material {
  1760. position: absolute;
  1761. top: 30px;
  1762. left: 20px;
  1763. }
  1764. }
  1765. .materialBodyRight {
  1766. width: 100%;
  1767. height: 100%;
  1768. padding-top: 60px;
  1769. .material-table-class {
  1770. height: 100%;
  1771. overflow-y: auto;
  1772. }
  1773. }
  1774. .accountBodyRighTitle {
  1775. .acount-body-content {
  1776. display: flex;
  1777. align-items: center;
  1778. .acount-body-title {
  1779. width: 340px;
  1780. font-size: 26px;
  1781. font-weight: 700;
  1782. cursor: pointer;
  1783. white-space: nowrap;
  1784. overflow: hidden;
  1785. text-overflow: ellipsis;
  1786. }
  1787. }
  1788. }
  1789. .accountBodyRighTitleID {
  1790. margin-top: 15px;
  1791. font-size: 14px;
  1792. color: #c0c4cc;
  1793. }
  1794. .accountBodyRightInfoItem {
  1795. background: rgb(238,241,255);
  1796. padding:15px 15px;
  1797. margin: 20px 0 0;
  1798. border-radius: 5px;
  1799. font-size: 16px;
  1800. white-space: nowrap;
  1801. overflow: hidden;
  1802. text-overflow: ellipsis;
  1803. .name {
  1804. font-size: 16px;
  1805. font-weight: 600;
  1806. }
  1807. }
  1808. .createNum {
  1809. cursor: pointer;
  1810. position: relative;
  1811. }
  1812. .targetBody {
  1813. border-radius: 10px;
  1814. background: white;
  1815. .dataMode{
  1816. display: flex;
  1817. justify-content: space-between;
  1818. }
  1819. .topOpt {
  1820. padding: 20px;
  1821. display: flex;
  1822. justify-content: flex-end;
  1823. }
  1824. }
  1825. .adPositionMode,
  1826. .ageMode,
  1827. .genderMode {
  1828. width: 32%;
  1829. height: 100%;
  1830. }
  1831. }
  1832. </style>