imageCostReport.vue 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054
  1. <template>
  2. <div class="vsummary">
  3. <div class="tabspane">
  4. <a-tabs v-model="tabKeys" @change="tabChange">
  5. <a-tab-pane :key="1" tab="头条">
  6. </a-tab-pane>
  7. <a-tab-pane :key="2" tab="快手" >
  8. </a-tab-pane>
  9. </a-tabs>
  10. </div>
  11. <div class="xiangmuxuanze">
  12. <span>项目选择:</span>
  13. <a-tree-select
  14. v-model="accountIds"
  15. show-search
  16. style="width: 600px;height:30px"
  17. :dropdownMatchSelectWidth='true'
  18. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  19. tree-checkable
  20. searchPlaceholder='请输入账户关键字搜索'
  21. :show-checked-strategy="SHOW_PARENT"
  22. placeholder="请选择项目和账户或搜索账户关键字"
  23. treeNodeFilterProp="title"
  24. :allowClear="true"
  25. @change="treeChange"
  26. :maxTagCount='1'
  27. :tree-data="treeData"
  28. :filterOption='filterOption'
  29. >
  30. </a-tree-select>
  31. </div>
  32. <div class="timeDiv">
  33. <div style="margin-right:30px;display:flex;align-items: center;">
  34. <span>时间范围:</span>
  35. <!-- <a-range-picker
  36. :disabled-date="disabledDate"
  37. format="YYYY-MM-DD"
  38. style="width: 250px;"
  39. @change="dateChange"
  40. v-model="dateRange"
  41. /> -->
  42. <span @click="opendate">
  43. <DatePicker :openOptions='openOptions' :parentDate='dateValue' left='-100px'></DatePicker>
  44. </span>
  45. </div>
  46. <div>
  47. <span>图片ID:</span>
  48. <a-input class="myinput" v-model="videoID" style="width:250px" :allowClear='true' />
  49. </div>
  50. <a-button type="primary" style="position:absolute;right:0" @click="searchRes">查询</a-button>
  51. </div>
  52. <div style="display:flex;margin:15px 0" class="btndiv">
  53. <a-button type="primary" @click="exportExcel" id="mybtn" :loading="exportExcelIsOk">导出报表</a-button>
  54. </div>
  55. <div class="tableBody">
  56. <a-table
  57. size="middle"
  58. :columns="columns"
  59. :dataSource="data"
  60. bordered
  61. id="outTable"
  62. :pagination="ipagination"
  63. :scroll="{ x: scrollX }"
  64. :loading="loading"
  65. @change="sort"
  66. style="word-break: break-all;"
  67. >
  68. <div slot="imageUrl" slot-scope="text,records">
  69. <img
  70. :src="text"
  71. alt
  72. style="width:80px"
  73. @click="openVideo(records.imageUrl)"
  74. @load="loadShow"
  75. />
  76. </div>
  77. <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
  78. <span slot="cost" slot-scope="text">{{ text | decimalsHandle }}</span>
  79. <span slot="convertCost" slot-scope="text">{{ text | decimalsHandle }}</span>
  80. <span slot="photoShowCost" slot-scope="text">{{ text | decimalsHandle }}</span>
  81. <span slot="aclickCost" slot-scope="text">{{ text | decimalsHandle }}</span>
  82. <span slot="activation" slot-scope="text">{{ text | formatCurrency }}</span>
  83. <span slot="eventRegister" slot-scope="text">{{ text | formatCurrency }}</span>
  84. <span slot="eventPay" slot-scope="text">{{ text | formatCurrency }}</span>
  85. <span slot="formCount" slot-scope="text">{{ text | formatCurrency }}</span>
  86. <span slot="eventJinJianApp" slot-scope="text">{{ text | formatCurrency }}</span>
  87. <span slot="eventCreditGrantApp" slot-scope="text">{{ text | formatCurrency }}</span>
  88. <span slot="photoClick" slot-scope="text">{{ text | formatCurrency }}</span>
  89. <span slot="photoShow" slot-scope="text">{{ text | formatCurrency }}</span>
  90. <span slot="click" slot-scope="text">{{ text | formatCurrency }}</span>
  91. <span slot="showNum" slot-scope="text">{{ text | formatCurrency }}</span>
  92. <span slot="convert" slot-scope="text">{{ text | formatCurrency }}</span>
  93. <span slot="bclick" slot-scope="text">{{ text | formatCurrency }}</span>
  94. <span slot="aclick" slot-scope="text">{{ text | formatCurrency }}</span>
  95. <span slot="clickRate" slot-scope="text">{{ text +'%'}}</span>
  96. <span slot="convertRate" slot-scope="text">{{ text +'%'}}</span>
  97. <span slot="bclickRate" slot-scope="text">{{ text +'%'}}</span>
  98. <span slot="photoClickRate" slot-scope="text">{{ text +'%'}}</span>
  99. <span slot="operation" slot-scope="text">
  100. {{ text || '未绑定' }}
  101. </span>
  102. </a-table>
  103. </div>
  104. <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
  105. <p>编导:{{relevantPeopleData.planName || '无'}}</p>
  106. <p>剪辑:{{relevantPeopleData.clipName || '无'}}</p>
  107. <p>拍摄:{{relevantPeopleData.shotName || '无'}}</p>
  108. </a-modal>
  109. <a-modal v-model="Videovisible" title="图片展示" @ok="videoOk" :footer="null" width="800px" style="text-align:center">
  110. <img
  111. @click.stop
  112. class="video"
  113. :src="videoUrl"
  114. controls="controls"
  115. style="height:400px;width:auto"
  116. />
  117. </a-modal>
  118. </div>
  119. </template>
  120. <script>
  121. import moment from 'moment'
  122. // import { JeecgListMixin } from '@/mixins/ipagination'
  123. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  124. import { TreeSelect } from 'ant-design-vue';
  125. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  126. import DatePicker from '@/components/DatePicker'
  127. // import selectComponent from './selectComponent'
  128. // import Treeselect from '../components/Treeselect'
  129. const TTcolumns = [
  130. {
  131. title: '图片',
  132. dataIndex: 'imageUrl',
  133. align: 'center',
  134. width: 100,
  135. fixed: 'left',
  136. key: 'imageUrl',
  137. scopedSlots: { customRender: 'imageUrl' }
  138. },
  139. {
  140. title: '图片ID',
  141. dataIndex: 'signature',
  142. align: 'center',
  143. width: 180,
  144. fixed: 'left'
  145. },
  146. {
  147. title: '项目名称',
  148. dataIndex: 'projectName',
  149. align: 'center',
  150. width: 200,
  151. fixed: 'left'
  152. },
  153. {
  154. title:'相关平面',
  155. dataIndex:'operation',
  156. key:'operation',
  157. scopedSlots: { customRender: 'operation' },
  158. align: 'center',
  159. width:150,
  160. fixed: 'left'
  161. },
  162. {
  163. title: '消耗(元)',
  164. dataIndex: 'cost',
  165. scopedSlots: { customRender: 'cost' },
  166. align: 'center',
  167. sorter: () => {}
  168. },
  169. {
  170. title: '点击数',
  171. dataIndex: 'click',
  172. align: 'center',
  173. scopedSlots: { customRender: 'click' },
  174. sorter: () => {}
  175. // (a, b) => a.clickMaterial - b.clickMaterial
  176. },
  177. {
  178. title: '点击率',
  179. dataIndex: 'clickRate',
  180. align: 'center',
  181. scopedSlots: { customRender: 'clickRate' },
  182. sorter: () => {}
  183. // (a, b) => a.clickMaterial - b.clickMaterial
  184. },
  185. {
  186. title: '展示数',
  187. dataIndex: 'showNum',
  188. align: 'center',
  189. scopedSlots: { customRender: 'showNum' },
  190. sorter: () => {}
  191. },
  192. {
  193. title: '转化数',
  194. dataIndex: 'convert',
  195. align: 'center',
  196. scopedSlots: { customRender: 'convert' },
  197. sorter: () => {}
  198. },
  199. {
  200. title: '转化成本',
  201. dataIndex: 'convertCost',
  202. align: 'center',
  203. scopedSlots: { customRender: 'convertCost' },
  204. sorter: () => {}
  205. },
  206. {
  207. title: '转化率',
  208. dataIndex: 'convertRate',
  209. align: 'center',
  210. scopedSlots: { customRender: 'convertRate' },
  211. sorter: () => {}
  212. },
  213. // {
  214. // title: '上传时间',
  215. // dataIndex: 'statDate',
  216. // scopedSlots: { customRender: 'statDate' },
  217. // align: 'center',
  218. // sorter: () => {}
  219. // },
  220. ]
  221. const KScolumns = [
  222. {
  223. title: '图片',
  224. dataIndex: 'imageUrl',
  225. align: 'center',
  226. width: 100,
  227. fixed: 'left',
  228. key: 'imageUrl',
  229. scopedSlots: { customRender: 'imageUrl' }
  230. },
  231. {
  232. title: '图片ID',
  233. dataIndex: 'signature',
  234. align: 'center',
  235. width: 150,
  236. fixed: 'left'
  237. },
  238. {
  239. title: '项目名称',
  240. dataIndex: 'projectName',
  241. align: 'center',
  242. width: 200,
  243. fixed: 'left'
  244. },
  245. {
  246. title:'相关平面',
  247. dataIndex:'operation',
  248. key:'operation',
  249. scopedSlots: { customRender: 'operation' },
  250. align: 'center',
  251. width:150,
  252. fixed: 'left'
  253. },
  254. {
  255. title: '消耗',
  256. dataIndex: 'cost',
  257. scopedSlots: { customRender: 'cost' },
  258. align: 'center',
  259. sorter: () => {}
  260. },
  261. {
  262. title: '封面点击数',
  263. dataIndex: 'photoClick',
  264. align: 'center',
  265. scopedSlots: { customRender: 'photoClick' },
  266. sorter: () => {}
  267. // (a, b) => a.clickMaterial - b.clickMaterial
  268. },
  269. {
  270. title: '封面点击率',
  271. dataIndex: 'photoClickRate',
  272. align: 'center',
  273. scopedSlots: { customRender: 'photoClickRate' },
  274. sorter: () => {}
  275. // (a, b) => a.clickMaterial - b.clickMaterial
  276. },
  277. {
  278. title: '封面曝光数',
  279. dataIndex: 'photoShow',
  280. align: 'center',
  281. scopedSlots: { customRender: 'photoShow' },
  282. sorter: () => {}
  283. },
  284. {
  285. title: '素材曝光数',
  286. dataIndex: 'aclick',
  287. align: 'center',
  288. scopedSlots: { customRender: 'aclick' },
  289. sorter: () => {}
  290. },
  291. {
  292. title: '行为数',
  293. dataIndex: 'bclick',
  294. align: 'center',
  295. scopedSlots: { customRender: 'bclick' },
  296. sorter: () => {}
  297. },
  298. {
  299. title: '行为率',
  300. dataIndex: 'bclickRate',
  301. align: 'center',
  302. scopedSlots: { customRender: 'bclickRate' },
  303. sorter: () => {}
  304. },
  305. {
  306. title: '平均千次封面曝光花费',
  307. dataIndex: 'photoShowCost',
  308. align: 'center',
  309. scopedSlots: { customRender: 'photoShowCost' },
  310. sorter: () => {}
  311. },
  312. {
  313. title: '平均千次素材曝光花费',
  314. dataIndex: 'aclickCost',
  315. align: 'center',
  316. scopedSlots: { customRender: 'aclickCost' },
  317. sorter: () => {}
  318. },
  319. {
  320. title: '激活数',
  321. dataIndex: 'activation',
  322. align: 'center',
  323. scopedSlots: { customRender: 'activation' },
  324. sorter: () => {}
  325. },
  326. {
  327. title: '注册数',
  328. dataIndex: 'eventRegister',
  329. align: 'center',
  330. scopedSlots: { customRender: 'eventRegister' },
  331. sorter: () => {}
  332. },
  333. {
  334. title: '付费数',
  335. dataIndex: 'eventPay',
  336. align: 'center',
  337. scopedSlots: { customRender: 'eventPay' },
  338. sorter: () => {}
  339. },
  340. {
  341. title: '表单提交数',
  342. dataIndex: 'formCount',
  343. align: 'center',
  344. scopedSlots: { customRender: 'formCount' },
  345. sorter: () => {}
  346. },
  347. {
  348. title: '完件数',
  349. dataIndex: 'eventJinJianApp',
  350. align: 'center',
  351. scopedSlots: { customRender: 'eventJinJianApp' },
  352. sorter: () => {}
  353. },
  354. {
  355. title: '授信数',
  356. dataIndex: 'eventCreditGrantApp',
  357. align: 'center',
  358. scopedSlots: { customRender: 'eventCreditGrantApp' },
  359. sorter: () => {}
  360. },
  361. // {
  362. // title: '上传时间',
  363. // dataIndex: 'materialUploadTime',
  364. // scopedSlots: { customRender: 'materialUploadTime' },
  365. // align: 'center',
  366. // sorter: () => {}
  367. // },
  368. ]
  369. let show = 0
  370. export default {
  371. data() {
  372. return {
  373. type:0,
  374. dateValue:[moment().subtract(1,'days'),moment().subtract(1,'days')],
  375. openOptions:false,
  376. order:'desc',
  377. target:'cost',
  378. tabKeys:1,
  379. accountIds:[],
  380. treeData:[],
  381. SHOW_PARENT,
  382. KSaccountList:[],
  383. TTaccountList:[],
  384. accountID:undefined,
  385. ipagination: {
  386. current: 1,
  387. pageSize: 10,
  388. // pageSizeOptions: ['10', '20', '30'],
  389. showTotal: (total, range) => {
  390. return range[0] + "-" + range[1] + " 共" + total + "条"
  391. },
  392. showQuickJumper: true,
  393. showSizeChanger:true,
  394. pageSizeOptions: ['10', '30', '50'],
  395. total: 0,
  396. onChange: (current, pageSize) => {
  397. // 切换分页时的回调,
  398. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  399. this.ipagination.current = current;
  400. this.ipagination.pageSize= pageSize;
  401. }
  402. },
  403. relevantPeopleVisible:false,
  404. relevantPeopleData:{},
  405. roleCode: localStorage.getItem('roleCode'),
  406. //下拉选择框的数据
  407. projectArr:[],
  408. selectValue:'',
  409. appId:[],
  410. //设置表格的列宽
  411. tableWidth: '',
  412. //gudinglie
  413. //是否打开视频
  414. Videovisible: false,
  415. videoUrl: '',
  416. //是否显示导出按钮
  417. exportExcelIsOk: false,
  418. consumeValue: 0,
  419. columns: [...TTcolumns],
  420. TTcolumns,
  421. KScolumns,
  422. data: [],
  423. totalSelect: 0,
  424. daysFlag: false,
  425. dateRange: [],
  426. dataElse: [],
  427. loading: false,
  428. visible: false,
  429. //自定义列的搜索框
  430. searchInput: '',
  431. //弹出框中现实的选中列数
  432. scrollX: 0,
  433. listNum: [],
  434. //
  435. form: [],
  436. videoID: '',
  437. timedata: []
  438. }
  439. },
  440. // mixins: [JeecgListMixin],
  441. components: {
  442. // selectComponent,
  443. // Treeselect
  444. DatePicker,
  445. },
  446. methods: {
  447. tabChange(val){
  448. this.accountIds=[];
  449. this.data=[]
  450. this.ipagination.current=1
  451. if(this.tabKeys==1){
  452. this.treeData=this.TTaccountList;
  453. this.columns=this.TTcolumns;
  454. this.target='cost';
  455. this.scrollX=0;
  456. this.HttpPost('/image/bytedance/cost')
  457. }else if (this.tabKeys==2){
  458. this.treeData=this.KSaccountList;
  459. this.columns=this.KScolumns
  460. this.target='cost'
  461. this.scrollX=2500
  462. this.HttpPost('/image/kuaishou/cost')
  463. }
  464. },
  465. treeChange(val) {
  466. // console.log(this.treeData)
  467. console.log(val)
  468. this.accountIds = [];
  469. if(val){
  470. val.forEach((ele,index)=>{
  471. if(ele*1){
  472. this.accountIds.push(ele)
  473. }else{
  474. let projectArr=this.treeData.filter((item)=>{
  475. return item.value==ele
  476. });
  477. // console.log(projectArr)
  478. projectArr[0].children.forEach((element)=>{
  479. this.accountIds.push(element.value)
  480. })
  481. }
  482. })
  483. }
  484. console.log(this.accountIds);
  485. },
  486. filterOption(input, option){
  487. console.log(input, option)
  488. return (
  489. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  490. );
  491. },
  492. // 查看相关人员
  493. showRelevantPeople(record){
  494. this.relevantPeopleVisible=true;
  495. console.log(record)
  496. getAction('/ctop/materialAscription/getDetail',{
  497. code:record.signature
  498. }).then(res=>{
  499. console.log(res);
  500. this.relevantPeopleData=[];
  501. if(res.result&&res.success){
  502. this.relevantPeopleData=res.result
  503. }
  504. })
  505. },
  506. sort(pagination, filters, sorter, { currentDataSource }){
  507. console.log(pagination, filters, sorter)
  508. if(sorter.order == 'ascend'){
  509. this.order='asc'
  510. this.target=sorter.columnKey;
  511. }else if(sorter.order == 'descend'){
  512. this.order='desc'
  513. this.target=sorter.columnKey;
  514. }else{
  515. this.target=this.tabKeys==1?'cost':'cost',
  516. this.order='desc'
  517. }
  518. this.ipagination.current=pagination.current
  519. this.ipagination.pageSize= pagination.pageSize;
  520. if(this.tabKeys==1){
  521. this.HttpPost('/image/bytedance/cost')
  522. }else if (this.tabKeys==2){
  523. this.HttpPost('/image/kuaishou/cost')
  524. }
  525. },
  526. moment,
  527. //select切换---项目
  528. selectChange(key){
  529. this.selectValue=key;
  530. },
  531. //打开视频
  532. openVideo(val) {
  533. this.Videovisible = true
  534. this.videoUrl = val
  535. },
  536. videoOk() {
  537. this.Videovisible = false
  538. },
  539. disabledDate(current) {
  540. // console.log(current)
  541. return current && current > moment()
  542. },
  543. consumeOnChange() {},
  544. //查询按钮
  545. searchRes() {
  546. this.data=[];
  547. this.ipagination.current=1
  548. if(this.tabKeys==1){
  549. this.HttpPost('/image/bytedance/cost')
  550. }else if (this.tabKeys==2){
  551. this.HttpPost('/image/kuaishou/cost')
  552. }
  553. },
  554. loadShow(){
  555. show++
  556. if(this.data.length>0){
  557. if(show == (this.data.length*2)){
  558. this.data = [...this.data]
  559. }
  560. }
  561. },
  562. //网络请求table数据函数
  563. HttpPost(url){
  564. this.loading=true;
  565. this.data=[]
  566. show = 0
  567. postAction(url, {
  568. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  569. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  570. code: this.videoID,
  571. pageNumber:this.ipagination.current,
  572. pageSize:this.ipagination.pageSize,
  573. accountList:this.accountIds,
  574. order:this.order,
  575. target:this.target,
  576. }).then(res => {
  577. let resArr = []
  578. this.loading=false;
  579. if (res.success) {
  580. // let result = res.result
  581. // this.data.push({ ...result, key: 1 })
  582. // result.map((item, index) => {
  583. // item.key = index
  584. // })
  585. this.data = res.data.list.map((item,index)=>{
  586. return {
  587. ...item,
  588. key:index
  589. }
  590. })
  591. this.ipagination.total = res.data.total
  592. this.loading = false
  593. }else{
  594. this.loading = false
  595. }
  596. })
  597. },
  598. //导出报表
  599. exportExcel() {
  600. this.exportExcelIsOk=true;
  601. // let column = this.columns.map((item, index) => {
  602. // return item.dataIndex
  603. // })
  604. // let columns=['url',...column]
  605. let url=''
  606. if(this.tabKeys==1){
  607. url='/image/bytedance/cost/export'
  608. }else{
  609. url='/image/kuaishou/cost/export'
  610. }
  611. downFilePost(url, {
  612. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  613. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  614. code: this.videoID,
  615. accountList:this.accountIds,
  616. order:this.order,
  617. target:this.target,
  618. }).then(res => {
  619. let blob = new Blob([res], {
  620. type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
  621. })
  622. let downloadElement = document.createElement('a')
  623. let href = window.URL.createObjectURL(blob) //创建下载的链接
  624. downloadElement.href = href
  625. downloadElement.download = '图片消耗.xlsx' //下载后文件名
  626. document.body.appendChild(downloadElement)
  627. downloadElement.click() //点击下载
  628. document.body.removeChild(downloadElement) //下载完成移除元素
  629. window.URL.revokeObjectURL(href) //释放掉blob对象
  630. this.exportExcelIsOk=false;
  631. })
  632. },
  633. //日期选择回调
  634. dateChange(data, dataString) {
  635. if (data.length) {
  636. this.timedata = dataString
  637. this.dateRange[0] = data[0]
  638. this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
  639. this.daysFlag = true
  640. if (this.totalSelect > 92) {
  641. this.$message.error('时间跨度太长啦,选小一点好嘛?')
  642. this.daysFlag = false
  643. this.dateRange = []
  644. }
  645. } else {
  646. this.daysFlag = false
  647. this.dateRange = []
  648. }
  649. },
  650. //请求项目和账户内容
  651. accountHttp(type){
  652. this.accountID=undefined;
  653. getAction(`/ctop/projectMember/getAllProjectAccount?mediaType=${type}`, {}).then(res => {
  654. if(res.success){
  655. if(res.result){
  656. res.result.forEach((element,index) => {
  657. if(element){
  658. if(type==1){
  659. this.TTaccountList.push({});
  660. this.TTaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  661. this.TTaccountList[index].value='project'+element.project.projectId;
  662. this.TTaccountList[index].key=element.project.projectId;
  663. this.TTaccountList[index].mediaId=element.project.mediaId;
  664. this.TTaccountList[index].children=[];
  665. if(element.account.length){
  666. element.account.forEach((ele,i)=>{
  667. this.TTaccountList[index].children.push({});
  668. this.TTaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  669. this.TTaccountList[index].children[i].value=ele.accountId;
  670. this.TTaccountList[index].children[i].key=ele.accountId;
  671. })
  672. }
  673. this.treeData=this.TTaccountList
  674. }else if(type==2){
  675. this.KSaccountList.push({});
  676. this.KSaccountList[index].title=element.project.projectName +'_('+ element.project.advertiserName +')';
  677. this.KSaccountList[index].value='project'+element.project.projectId;
  678. this.KSaccountList[index].key=element.project.projectId;
  679. this.KSaccountList[index].mediaId=element.project.mediaId;
  680. this.KSaccountList[index].children=[];
  681. if(element.account.length){
  682. element.account.forEach((ele,i)=>{
  683. this.KSaccountList[index].children.push({});
  684. this.KSaccountList[index].children[i].title=ele.userName+'_'+ele.authName+'_'+element.project.projectName;
  685. this.KSaccountList[index].children[i].value=ele.accountId;
  686. this.KSaccountList[index].children[i].key=ele.accountId;
  687. })
  688. }
  689. this.treeData=this.KSaccountList
  690. }
  691. }
  692. });
  693. // console.log(this.treeData)
  694. if(this.tabKey==1){
  695. this.treeData=this.TTaccountList
  696. }else{
  697. this.treeData=this.KSaccountList
  698. }
  699. }
  700. }
  701. })
  702. },
  703. opendate(){
  704. this.openOptions=!this.openOptions;
  705. // console.log(this.openOptions)
  706. },
  707. opendateClose(){
  708. this.openOptions=false;
  709. // console.log(this.openOptions)
  710. },
  711. },
  712. // watch:{
  713. // 'ipagination.current':function(n,o){
  714. // console.log(n,o)
  715. // this.HttpPost()
  716. // }
  717. // },
  718. filters: {
  719. toshowTime(val) {
  720. return val
  721. },
  722. toPercentage(val) {
  723. if(val){
  724. if(typeof val != 'string'){
  725. return (val * 100).toFixed(2) + '%'
  726. }else{
  727. return val
  728. }
  729. }else if(typeof val =='string'){
  730. return val
  731. }
  732. else{
  733. return 0
  734. }
  735. },
  736. //保留两位小数并且变成货币格式
  737. decimalsHandle(val){
  738. if(val && typeof val !='string'){
  739. if(val>=0){
  740. val=parseFloat(val).toFixed(2);
  741. let numberStr = val.toString()
  742. let str = numberStr.split('.')
  743. let str0=str[0].split('').reverse();
  744. for (let i = 0; i < str0.length; i++) {
  745. if ((i + 1) % 4 === 0) {
  746. str0.splice(i, 0, ',')
  747. }
  748. }
  749. str0.reverse()
  750. let handleResult = ''
  751. for (let j = 0; j < str0.length; j++) {
  752. handleResult += str0[j]
  753. }
  754. return handleResult+'.'+str[1]
  755. }else{
  756. val=parseFloat(val).toFixed(2);
  757. let numberStr = val.toString()
  758. let str = numberStr.split('.')
  759. let str0=str[0].substr(1).split('').reverse();
  760. for (let i = 0; i < str0.length; i++) {
  761. if ((i + 1) % 4 === 0) {
  762. str0.splice(i, 0, ',')
  763. }
  764. }
  765. str0.reverse()
  766. let handleResult = ''
  767. for (let j = 0; j < str0.length; j++) {
  768. handleResult += str0[j]
  769. }
  770. return '-'+handleResult+'.'+str[1]
  771. }
  772. }else if(typeof val =='string'){
  773. return val
  774. }
  775. else{
  776. return 0
  777. }
  778. },
  779. //变成货币格式
  780. formatCurrency(val){
  781. if((val||val==0)&& typeof val !='string'){
  782. let numberStr = val.toString()
  783. let str = numberStr.split('').reverse()
  784. for (let i = 0; i < str.length; i++) {
  785. if ((i + 1) % 4 === 0) {
  786. str.splice(i, 0, ',')
  787. }
  788. }
  789. str.reverse()
  790. let handleResult = ''
  791. for (let j = 0; j < str.length; j++) {
  792. handleResult += str[j]
  793. }
  794. return handleResult
  795. }else if(typeof val =='string'){
  796. return val
  797. }
  798. else{
  799. return '-'
  800. }
  801. }
  802. },
  803. watch:{
  804. dateValue:{
  805. deep:true,
  806. handler(){
  807. if(this.tabKeys==1){
  808. this.HttpPost('/image/bytedance/cost')
  809. }else if (this.tabKeys==2){
  810. this.HttpPost('/image/kuaishou/cost')
  811. }
  812. }
  813. }
  814. },
  815. mounted() {
  816. this.HttpPost('/image/bytedance/cost')
  817. this.accountHttp(1);
  818. this.accountHttp(2);
  819. }
  820. }
  821. </script>
  822. <style lang="less">
  823. // .ant-table .ant-table-fixed-left .ant-table-thead {
  824. // height: 108px !important ;
  825. // }
  826. .vsummary{
  827. .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
  828. // display:block;
  829. white-space: normal;
  830. word-break: break-all;
  831. }
  832. }
  833. </style>
  834. <style lang="scss" scoped>
  835. .vsummary {
  836. width: 100%;
  837. height: 100%;
  838. background: #fff;
  839. padding: 20px;
  840. box-sizing: border-box;
  841. }
  842. .tableBody{
  843. margin-top: 20px;
  844. }
  845. .xiangmuxuanze{
  846. margin-bottom: 20px;;
  847. }
  848. .timeDiv {
  849. display: flex;
  850. justify-content: flex-start;
  851. position: relative;
  852. }
  853. span {
  854. margin-left: 5px;
  855. }
  856. .myinput {
  857. width: 40%;
  858. }
  859. .addlist {
  860. float: left;
  861. width: 70%;
  862. border: 1px solid #eee;
  863. .selectionList {
  864. padding: 10px 15px;
  865. height: 450px;
  866. overflow: auto;
  867. .leibie {
  868. .leiName {
  869. font-size: 26px;
  870. text-align: left;
  871. }
  872. }
  873. .jutixiang {
  874. display: inline-block;
  875. width: 32%;
  876. box-sizing: border-box;
  877. padding: 10px 3px;
  878. }
  879. }
  880. }
  881. .listNum {
  882. float: right;
  883. width: 28%;
  884. border: 1px solid #eee;
  885. position: relative;
  886. }
  887. .zhuti {
  888. margin-top: 15px;
  889. overflow: hidden;
  890. p {
  891. height: 40px;
  892. line-height: 20px;
  893. padding: 10px 15px;
  894. background: rgb(249, 250, 253);
  895. border-bottom: 1px solid #eee;
  896. }
  897. #btn {
  898. position: absolute;
  899. right: 0;
  900. top: 5px;
  901. }
  902. .selectlist {
  903. width: 100%;
  904. list-style: none;
  905. margin: 0;
  906. height: 450px;
  907. padding: 0 15px 10px;
  908. overflow: auto;
  909. li {
  910. width: 100%;
  911. padding: 5px 8px;
  912. margin: 6px 0;
  913. border-radius: 10px;
  914. background: rgb(248, 248, 248);
  915. height: 32px;
  916. position: relative;
  917. span {
  918. width: 80%;
  919. height: 100%;
  920. display: inline-block;
  921. margin: 0 10px;
  922. // overflow:hidden;
  923. // text-overflow:ellipsis;
  924. // white-space: nowrap;
  925. }
  926. .listText {
  927. position: absolute;
  928. top: 2;
  929. left: 10;
  930. width: 40%;
  931. overflow: hidden;
  932. white-space: nowrap;
  933. text-overflow: ellipsis;
  934. }
  935. #closeStyle {
  936. position: absolute;
  937. top: 9px;
  938. right: 7px;
  939. }
  940. }
  941. }
  942. }
  943. </style>