vMonth.vue 22 KB

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