KSvideoStatics.vue 33 KB

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