imageCostReport.vue 25 KB

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