vWeek.vue 22 KB

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