vWeek.vue 25 KB

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