marterialTtList.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633
  1. <style>
  2. .materialReport .chart-card-content {
  3. display: none !important;
  4. }
  5. </style>
  6. <style scoped>
  7. .top-ul-style {
  8. width: 100%;
  9. padding-left: 0;
  10. }
  11. .top-ul-style li {
  12. height: 100px;
  13. border: 1px solid #f2f2f2;
  14. margin-bottom: 5px;
  15. padding: 10px;
  16. display: flex;
  17. justify-content: space-between;
  18. }
  19. .li-cost {
  20. display: flex;
  21. flex-flow: column;
  22. justify-content: center;
  23. align-content: flex-end;
  24. }
  25. .li-cost span {
  26. font-size: 16px;
  27. font-weight: 500;
  28. min-width: 50px;
  29. text-align: right;
  30. }
  31. </style>
  32. <template>
  33. <div class="materialReport">
  34. <div class="card-container">
  35. <div class="option" style="justify-content: space-between">
  36. <div class="option" style="padding: 0">
  37. <div class="item">
  38. <span>素材ID</span>
  39. <a-input style="width: 300px" v-model="md5"></a-input>
  40. </div>
  41. </div>
  42. <div class="item" style="float: right">
  43. <a-button @click="handleSubmit" type="primary" :loading="spinning">搜索</a-button>
  44. <a-button @click="resetSubmit" style="margin-left: 15px" :loading="spinning">重置</a-button>
  45. </div>
  46. </div>
  47. </div>
  48. <a-row :gutter="24" style="margin-top: 20px">
  49. <a-col :xl="24">
  50. <a-card title="数据列表" style="width: 100%; min-height: 700px" :bordered="false">
  51. <div class="tableTop" style="text-align: end; margin: 0 0 15px 0">
  52. <!-- <a-button type="primary" class="export" @click="exportExcel">导出报表</a-button> -->
  53. <a-button type="primary" class="add" @click="customColumns">自定义列</a-button>
  54. </div>
  55. <a-table
  56. size="middle"
  57. :columns="columns"
  58. :dataSource="tableData"
  59. bordered
  60. id="outTable"
  61. :pagination="ipagination"
  62. :scroll="{ x: scrollX }"
  63. :loading="loading"
  64. ref="accountTable"
  65. :width="tableWidth"
  66. :customRow="rowClick"
  67. @change="sort"
  68. style="word-break: break-all; font-size: 16px; font-weight: 600"
  69. >
  70. <span slot="coverUrl" slot-scope="text, records">
  71. <img :src="text || noImg" alt="" style="width: 100%; height: auto" />
  72. </span>
  73. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  74. <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
  75. <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
  76. <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
  77. <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
  78. <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
  79. <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
  80. <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
  81. <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
  82. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  83. <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
  84. <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
  85. <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
  86. <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
  87. <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
  88. <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
  89. <span slot="formCount" slot-scope="formCount">{{ formCount | formatCurrency }}</span>
  90. <span slot="formCountCost" slot-scope="formCountCost">{{ formCountCost | decimalsHandle }}</span>
  91. <span slot="aClick" slot-scope="aClick">{{ aClick | formatCurrency }}</span>
  92. <span slot="photoShow" slot-scope="photoShow">{{ photoShow | formatCurrency }}</span>
  93. <span slot="photoClick" slot-scope="photoClick">{{ photoClick | formatCurrency }}</span>
  94. <span slot="bClick" slot-scope="bClick">{{ bClick | formatCurrency }}</span>
  95. <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
  96. <span slot="submit" slot-scope="submit">{{ submit | formatCurrency }}</span>
  97. <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
  98. <span slot="eventCreditGrantLandingPage" slot-scope="eventCreditGrantLandingPage">{{
  99. eventCreditGrantLandingPage | formatCurrency
  100. }}</span>
  101. <span slot="submitCost" slot-scope="submitCost">{{ submitCost | decimalsHandle }}</span>
  102. <span slot="eventCreditGrantLandingPageCost" slot-scope="eventCreditGrantLandingPageCost">{{
  103. eventCreditGrantLandingPageCost | decimalsHandle
  104. }}</span>
  105. <span slot="submitRate" slot-scope="submitRate">{{ submitRate | toPercentage }}</span>
  106. <span slot="eventCreditGrantLandingPageRate" slot-scope="eventCreditGrantLandingPageRate">{{
  107. eventCreditGrantLandingPageRate | toPercentage
  108. }}</span>
  109. <span slot="play25FeedBreakRate" slot-scope="play25FeedBreakRate">{{
  110. play25FeedBreakRate | toPercentage
  111. }}</span>
  112. <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span>
  113. <!-- 新加数据 -->
  114. <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
  115. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  116. <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span>
  117. <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
  118. <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
  119. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  120. <span slot="installFinishRate" slot-scope="installFinishRate">{{ installFinishRate | toPercentage }}</span>
  121. <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span>
  122. <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
  123. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  124. <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
  125. <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
  126. <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
  127. <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{
  128. gameAddictionCost | decimalsHandle
  129. }}</span>
  130. <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{
  131. downloadFinishCost | decimalsHandle
  132. }}</span>
  133. <span slot="downloadStartCost" slot-scope="downloadStartCost">{{
  134. downloadStartCost | decimalsHandle
  135. }}</span>
  136. <span slot="installFinishCost" slot-scope="installFinishCost">{{
  137. installFinishCost | decimalsHandle
  138. }}</span>
  139. <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
  140. <!-- -->
  141. <span slot="downloadStartRate" slot-scope="downloadStartRate">{{ downloadStartRate | toPercentage }}</span>
  142. <span slot="downloadFinishRate" slot-scope="downloadFinishRate">{{
  143. downloadFinishRate | toPercentage
  144. }}</span>
  145. <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
  146. <span slot="activeRegisterRate" slot-scope="activeRegisterRate">{{
  147. activeRegisterRate | toPercentage
  148. }}</span>
  149. <span slot="gameAddictionRate" slot-scope="gameAddictionRate">{{ gameAddictionRate | toPercentage }}</span>
  150. <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
  151. <!-- <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
  152. </a-table>
  153. </a-card>
  154. </a-col>
  155. </a-row>
  156. <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
  157. <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
  158. 您的浏览器不支持 video 标签。
  159. </video>
  160. </a-modal>
  161. <customColumn
  162. :visible="visible"
  163. :listNum="listNum"
  164. :fiexColumn="columnsFixd"
  165. :mediaType="2"
  166. @closeCustomColumn="closeCustomColumn"
  167. @changeColumn="changeColumn"
  168. />
  169. </div>
  170. </template>
  171. <script>
  172. import moment from 'moment'
  173. import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
  174. import YoutTable from '@/components/youtTable/YoutTable'
  175. import ChartCard from '@/components/ChartCard'
  176. import Trend from '@/components/Trend'
  177. import { mapGetters } from 'vuex'
  178. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  179. import customColumn from '../components/customColumn.vue'
  180. var echarts = require('echarts')
  181. const columnsFixd = [
  182. {
  183. title: '素材',
  184. dataIndex: 'coverUrl',
  185. scopedSlots: { customRender: 'coverUrl' },
  186. align: 'center',
  187. key: 'date',
  188. width: 200,
  189. fixed: 'left',
  190. },
  191. {
  192. title: '素材名称',
  193. dataIndex: 'materialName',
  194. align: 'center',
  195. width: 200,
  196. fixed: 'left',
  197. customRender: function (text) {
  198. if (text) {
  199. return text
  200. } else {
  201. return '-'
  202. }
  203. },
  204. },
  205. {
  206. title: '所属项目',
  207. dataIndex: 'projectName',
  208. align: 'center',
  209. width: 200,
  210. fixed: 'left',
  211. },
  212. ]
  213. const initVariableColimns = [
  214. {
  215. title: '消耗(元)',
  216. dataIndex: 'cost',
  217. scopedSlots: { customRender: 'cost' },
  218. align: 'center',
  219. sorter: (a, b) => {},
  220. },
  221. {
  222. title: '点击数',
  223. dataIndex: 'clickMaterial',
  224. align: 'center',
  225. scopedSlots: { customRender: 'clickMaterial' },
  226. sorter: (a, b) => {},
  227. // (a, b) => a.clickMaterial - b.clickMaterial
  228. },
  229. {
  230. title: '点击率',
  231. dataIndex: 'ctr',
  232. align: 'center',
  233. scopedSlots: { customRender: 'ctr' },
  234. sorter: (a, b) => {},
  235. },
  236. {
  237. title: '展示数',
  238. dataIndex: 'showMaterial',
  239. align: 'center',
  240. scopedSlots: { customRender: 'showMaterial' },
  241. sorter: (a, b) => {},
  242. },
  243. {
  244. title: '平均千次展现费用(元)',
  245. dataIndex: 'cpm',
  246. tip: '广告平均每一千次展现所付出的费用,计算公式是:总花费/展示数*1000',
  247. align: 'center',
  248. scopedSlots: { customRender: 'cpm' },
  249. sorter: (a, b) => {},
  250. },
  251. {
  252. title: '平均点击单价(元)',
  253. dataIndex: 'cpc',
  254. tip: '广告主为每次点击付出的费用成本,计算公式是:总花费/点击数',
  255. align: 'center',
  256. scopedSlots: { customRender: 'cpc' },
  257. sorter: (a, b) => {},
  258. },
  259. ]
  260. export default {
  261. components: {
  262. YoutTable,
  263. ChartCard,
  264. Trend,
  265. customColumn,
  266. },
  267. data() {
  268. return {
  269. tableData: [],
  270. designTopLoading: false,
  271. noImg: require('@/assets/noImg.png'),
  272. visibleVideo: false,
  273. videoUrlShow: '',
  274. cost: '0',
  275. costLink: 0,
  276. videoTotal: '0',
  277. newVideo: 0,
  278. hotTotal: '0',
  279. xiaoTotal: '0',
  280. spinning: false,
  281. loading: false,
  282. chartList: [],
  283. videoList: [],
  284. designTopList: [],
  285. columns: [...columnsFixd, ...initVariableColimns], //table的表头
  286. columnsFixd,
  287. ipagination: {
  288. current: 1,
  289. pageSize: 10,
  290. // pageSizeOptions: ['10', '20', '30'],
  291. showTotal: (total, range) => {
  292. return range[0] + '-' + range[1] + ' 共' + total + '条'
  293. },
  294. showQuickJumper: true,
  295. // showSizeChanger: true,
  296. // pageSizeOptions: ['10', '30', '50'],
  297. total: 0,
  298. onChange: (current, pageSize) => {
  299. // 切换分页时的回调,
  300. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  301. this.ipagination.current = current
  302. this.ipagination.pageSize = pageSize
  303. },
  304. },
  305. dateRanges: {
  306. 今天: [moment(), moment()],
  307. 昨天: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
  308. 近一周: [moment().subtract(7, 'days'), moment()],
  309. 近一月: [moment().subtract(1, 'months'), moment()],
  310. 近半年: [moment().subtract(6, 'months'), moment()],
  311. 近一年: [moment().subtract(12, 'months'), moment()],
  312. },
  313. dateValue: [moment().subtract(7, 'days'), moment()],
  314. dataDimension: 'a',
  315. mediaDimension: 'b',
  316. dataDimensionValue: [],
  317. dataDimensionList: [],
  318. specificLoading: false,
  319. order: null,
  320. target: null,
  321. materialData: null,
  322. md5: '',
  323. visible: false,
  324. listNum: [],
  325. scrollX: 1000,
  326. tableWidth: '', //设置表格的列宽
  327. }
  328. },
  329. watch: {
  330. visibleVideo(n, o) {
  331. if (!n) {
  332. stopOtherVideo()
  333. closeAllVideoFun()
  334. }
  335. },
  336. 'ipagination.current': function (n, o) {
  337. if (n != o) {
  338. this.getMoreVideoList({
  339. ...this.materialData,
  340. })
  341. }
  342. },
  343. },
  344. methods: {
  345. rowClick(record, index) {
  346. return {
  347. on: {
  348. click: (e) => {
  349. this.$router.push({
  350. path: '/materialReport/marterialDetail?md5=' + record.signature + '&mediaId=1',
  351. })
  352. },
  353. },
  354. }
  355. },
  356. moment,
  357. closeCustomColumn() {
  358. this.visible = false
  359. },
  360. changeColumn(val) {
  361. this.columns = [...val]
  362. if (this.columns.length > this.columnsFixd.length && this.columns.length < 8) {
  363. this.columns.forEach((element, index) => {
  364. if (index < this.columns.length - 1) {
  365. element.width = 'auto'
  366. element.fixed = false
  367. }
  368. })
  369. // this.scrollX=2000+200*(this.columns.length-this.columnsFixd.length)
  370. } else if (this.columns.length >= 8) {
  371. this.columns.forEach((element, index) => {
  372. if (index < this.columnsFixd.length) {
  373. element.width = 200
  374. element.fixed = 'left'
  375. }
  376. })
  377. this.scrollX = 1000 + 200 * (this.columns.length - this.columnsFixd.length)
  378. } else {
  379. this.scrollX = 0
  380. this.columns.forEach((element) => {
  381. element.width = 'auto'
  382. element.fixed = false
  383. })
  384. }
  385. },
  386. customColumns() {
  387. this.visible = true
  388. this.listNum = [...this.columns]
  389. },
  390. ...mapGetters(['userInfo']),
  391. filterOption(input, option) {
  392. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  393. },
  394. sort(pagination, filters, sorter, { currentDataSource }) {
  395. // console.log(pagination, filters, sorter)
  396. this.ipagination.current = pagination.current
  397. this.ipagination.pageSize = pagination.pageSize
  398. if (sorter.order) {
  399. this.order = sorter.order ? sorter.order : 'descend'
  400. this.target = sorter.columnKey
  401. this.getMoreVideoList({
  402. ...this.materialData,
  403. target: sorter.columnKey,
  404. order: sorter.order ? sorter.order : 'descend',
  405. })
  406. } else {
  407. this.order = null
  408. this.target = null
  409. }
  410. },
  411. getData() {
  412. var data = { ...this.materialData, md5: this.md5 }
  413. this.getMoreVideoList(data)
  414. },
  415. getMoreVideoList(data) {
  416. this.loading = true
  417. var params = { ...data }
  418. params.channelType = null
  419. if (data.target) {
  420. params.target = data.target
  421. if (data.order == 'descend') {
  422. params.order = 'desc'
  423. } else {
  424. params.order = 'asc'
  425. }
  426. } else {
  427. params.target = this.target
  428. params.order = this.order == 'descend' ? 'desc' : this.order == null ? null : 'asc'
  429. }
  430. params.pageSize = this.ipagination.pageSize
  431. params.pageNo = this.ipagination.current
  432. this.postDataAction('/overView/materialTopViewMore', params).then((res) => {
  433. this.loading = false
  434. if (res.success) {
  435. this.tableData = res.result.list
  436. this.ipagination.total = res.result.total
  437. }
  438. })
  439. },
  440. getDesignTopList(data) {
  441. this.designTopLoading = true
  442. return new Promise((resolve, reject) => {
  443. var params = {
  444. // startDate: this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null,
  445. // endDate: this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null,
  446. // userId: this.userInfo().id,
  447. // pageSize: this.ipagination.pageSize,
  448. // pageNo: this.ipagination.current,
  449. // target: 'cost',
  450. // order: 'desc',
  451. }
  452. params.startDate = this.dateValue.length == 2 ? moment(this.dateValue[0]).format('YYYY-MM-DD') : null
  453. params.endDate = this.dateValue.length == 2 ? moment(this.dateValue[1]).format('YYYY-MM-DD') : null
  454. params.userId = this.userInfo().id
  455. params.pageSize = this.ipagination.pageSize
  456. params.pageNo = this.ipagination.current
  457. if (data) {
  458. params.target = data.target
  459. if (data.order == 'descend') {
  460. params.order = 'desc'
  461. } else {
  462. params.order = 'asc'
  463. }
  464. } else {
  465. params.target = this.target
  466. params.order = this.order == 'descend' ? 'desc' : 'asc'
  467. }
  468. this.postDataAction('/overView/designTop', params).then((res) => {
  469. this.designTopLoading = false
  470. if (res.success) {
  471. this.designTopList = res.result.list
  472. this.ipagination.total = res.result.total
  473. resolve(res.result)
  474. } else {
  475. reject(res.message)
  476. }
  477. })
  478. })
  479. },
  480. handleSubmit() {
  481. this.ipagination.current = 1
  482. this.getData()
  483. },
  484. resetSubmit() {
  485. this.dateValue = [moment().subtract(7, 'days'), moment()]
  486. this.dataDimension = 'a'
  487. this.mediaDimension = 'b'
  488. this.dataDimensionValue = []
  489. this.ipagination.current = 1
  490. this.md5 = ''
  491. this.getData()
  492. },
  493. //导出报表
  494. exportExcel() {
  495. let column = this.columns.map((item, index) => {
  496. return item.dataIndex
  497. })
  498. let columns = column.splice(3)
  499. // console.log(columns)
  500. downFilePost('/ctop/kuaishou/dailyPage/report/excel', {
  501. mediaId: this.mediaId,
  502. discount: this.discount,
  503. accountIds: this.accountId,
  504. startDate: this.dateValue[0].format('YYYY-MM-DD'),
  505. endDate: this.dateValue[1].format('YYYY-MM-DD'),
  506. hour: this.timeSelectValue,
  507. target: this.target,
  508. order: this.order,
  509. columns,
  510. }).then((res) => {
  511. let blob = new Blob([res], {
  512. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  513. })
  514. let downloadElement = document.createElement('a')
  515. let href = window.URL.createObjectURL(blob) //创建下载的链接
  516. downloadElement.href = href
  517. downloadElement.download = moment().format('YYYY-MM-DD') + '账户报表.xlsx' //下载后文件名
  518. document.body.appendChild(downloadElement)
  519. downloadElement.click() //点击下载
  520. document.body.removeChild(downloadElement) //下载完成移除元素
  521. window.URL.revokeObjectURL(href) //释放掉blob对象
  522. })
  523. },
  524. tableChange(data) {
  525. console.log(data)
  526. },
  527. //获取echart的值
  528. initEchart(idName, optionName) {
  529. const chart = this.$refs[idName]
  530. // console.log(chart)
  531. if (chart) {
  532. const myChart = echarts.init(document.getElementById(idName))
  533. // myChart.showLoading({
  534. // text: "图表数据正在努力加载..."
  535. // });
  536. myChart.setOption(optionName)
  537. window.addEventListener('resize', function () {
  538. myChart.resize()
  539. })
  540. }
  541. },
  542. },
  543. mounted() {
  544. this.$nextTick(() => {
  545. this.materialData = JSON.parse(localStorage.getItem('materialParams'))
  546. this.getMoreVideoList(this.materialData)
  547. })
  548. },
  549. }
  550. </script>
  551. <style lang="scss" scoped>
  552. .materialReport {
  553. .option {
  554. background: white;
  555. padding: 20px;
  556. display: flex;
  557. justify-content: flex-start;
  558. flex-wrap: wrap;
  559. .item {
  560. margin-right: 15px;
  561. margin-bottom: 15px;
  562. height: 32px;
  563. line-height: 32px;
  564. flex-shrink: 0;
  565. span {
  566. margin-right: 10px;
  567. }
  568. }
  569. }
  570. .echart {
  571. margin-top: 20px;
  572. padding: 0 20px 20px;
  573. background: white;
  574. .echart-header {
  575. padding: 20px 0;
  576. font-size: 15px;
  577. font-weight: 600;
  578. }
  579. }
  580. .tableBody {
  581. margin-top: 20px;
  582. }
  583. }
  584. </style>
  585. <style>
  586. .card-container {
  587. overflow: hidden;
  588. /* padding: 24px; */
  589. }
  590. .card-container > .ant-tabs-card > .ant-tabs-content {
  591. /* height: 120px; */
  592. margin-top: -16px;
  593. }
  594. .card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  595. background: #fff;
  596. /* padding: 16px; */
  597. }
  598. .card-container > .ant-tabs-card > .ant-tabs-bar {
  599. border-color: #fff;
  600. }
  601. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  602. border-color: transparent;
  603. background: transparent !important;
  604. }
  605. .card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  606. border-color: #fff;
  607. background: #fff !important;
  608. }
  609. </style>