TTvideoStatics.vue 31 KB

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