vWeek.vue 22 KB

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