|
@@ -0,0 +1,695 @@
|
|
|
+<style>
|
|
|
+.materialReport .chart-card-content {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less" scoped>
|
|
|
+::v-deep .ant-table {
|
|
|
+ //设置表格头部竖向滚动宽度
|
|
|
+ ::v-deep .ant-table-header::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ //设置表格体滚动宽度
|
|
|
+ ::v-deep .ant-table-body,
|
|
|
+ .ant-table-body-inner {
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #909090;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #ededed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //解决固定列底部预留的空隙
|
|
|
+ ::v-deep .ant-table-fixed-left,
|
|
|
+ .ant-table-fixed-right {
|
|
|
+ .ant-table-body-outer {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+::v-deep .ant-tabs .ant-tabs-large-bar .ant-tabs-tab {
|
|
|
+ padding: 11px 16px;
|
|
|
+}
|
|
|
+.bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.bg:after {
|
|
|
+ content: '';
|
|
|
+ width: 110%;
|
|
|
+ height: 110%;
|
|
|
+ position: absolute;
|
|
|
+ left: -5%;
|
|
|
+ top: -5%;
|
|
|
+ background: inherit;
|
|
|
+ filter: blur(10px);
|
|
|
+ z-index: 2;
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+}
|
|
|
+.top-ul-style {
|
|
|
+ width: 100%;
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+.top-ul-style li {
|
|
|
+ height: 100px;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.li-cost {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: flex-end;
|
|
|
+}
|
|
|
+.li-cost span {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ min-width: 50px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div class="materialReport">
|
|
|
+ <a-row :gutter="24">
|
|
|
+ <a-col :xl="24">
|
|
|
+ <div class="option" style="justify-content: space-between">
|
|
|
+ <div class="option" style="padding: 0">
|
|
|
+ <!-- <div class="item">
|
|
|
+ <span>媒体</span>
|
|
|
+ <a-radio-group v-model="mediaDimension" @change="getProjectList">
|
|
|
+ <a-radio-button value="b">快手</a-radio-button>
|
|
|
+ <a-radio-button value="a">头条</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
+ </div> -->
|
|
|
+ <div class="item">
|
|
|
+ <span>人员</span>
|
|
|
+ <a-select
|
|
|
+ v-model="person"
|
|
|
+ style="width: 150px; margin-left: 10px"
|
|
|
+ :mode="'default'"
|
|
|
+ :maxTagCount="2"
|
|
|
+ :loading="specificLoading"
|
|
|
+ :filterOption="filterOption"
|
|
|
+ showSearch
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option
|
|
|
+ v-for="(item, index) in dataDimensionList"
|
|
|
+ :key="index + 1"
|
|
|
+ :value="item.userId"
|
|
|
+ >
|
|
|
+ {{ item.userName }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="item">
|
|
|
+ <span>岗位</span>
|
|
|
+ <a-select
|
|
|
+ v-model="post"
|
|
|
+ style="width: 150px; margin-left: 10px"
|
|
|
+ :mode="'default'"
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option value="planeLeader"> 平面组长 </a-select-option>
|
|
|
+ <a-select-option value="designTeamLeader"> 设计组长 </a-select-option>
|
|
|
+ <a-select-option value="production"> 制片 </a-select-option>
|
|
|
+ <a-select-option value="plane"> 平面 </a-select-option>
|
|
|
+ <a-select-option value="plan"> 策划 </a-select-option>
|
|
|
+ <a-select-option value="shot"> 拍摄 </a-select-option>
|
|
|
+ <a-select-option value="clip"> 剪辑 </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div> -->
|
|
|
+ <div class="item">
|
|
|
+ <span>季度</span>
|
|
|
+ <a-select v-model="quarter" style="width: 150px; margin-left: 10px" :mode="'default'">
|
|
|
+ <a-select-option :value="1"> 第一季度 </a-select-option>
|
|
|
+ <a-select-option :value="2"> 第二季度 </a-select-option>
|
|
|
+ <a-select-option :value="3"> 第三季度 </a-select-option>
|
|
|
+ <a-select-option :value="4"> 第四季度 </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item" style="float: right">
|
|
|
+ <a-button :loading="resetLoading" type="primary" @click="handleSubmit"> 搜索 </a-button>
|
|
|
+ <a-button
|
|
|
+ :disabled="spinning"
|
|
|
+ :loading="resetLoading"
|
|
|
+ style="margin-left: 15px"
|
|
|
+ @click="resetSubmit"
|
|
|
+ >
|
|
|
+ 重置
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-row :gutter="24" style="margin-top: 20px" id="getWidth">
|
|
|
+ <a-col :xl="24">
|
|
|
+ <a-card style="width: 100%" title="设计数据">
|
|
|
+ <!-- :columns="columns" -->
|
|
|
+ <a-table
|
|
|
+ size="middle"
|
|
|
+ :dataSource="designTopList"
|
|
|
+ bordered
|
|
|
+ id="outTable"
|
|
|
+ :pagination="ipagination"
|
|
|
+ :loading="designTopLoading"
|
|
|
+ ref="accountTable"
|
|
|
+ @change="sort"
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
+ >
|
|
|
+ <a-table-column title="姓名" data-index="userName" :width="120" align="center">
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column title="岗位" data-index="roleName" :width="120" align="center">
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column title="状态" data-index="status" :width="120" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>{{ t == 1 ? '正常' : '冻结' }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column title="组别" data-index="departName" :width="120" align="center">
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="onetotalCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>
|
|
|
+ {{ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[1].kuaishou[0].hotNum : '-' }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="twototalCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>{{
|
|
|
+ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[1].kuaishou[1].hotNum : '-'
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="threetotalCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>{{
|
|
|
+ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[1].kuaishou[2].hotNum : '-'
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="oneFWCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>
|
|
|
+ {{ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[0].byteDance[0].hotNum : '-' }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="twoFWCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>
|
|
|
+ {{ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[0].byteDance[1].hotNum : '-' }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <a-table-column :title="threeFWCharge" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>
|
|
|
+ {{ t.hotVideoInfo.length > 0 ? t.hotVideoInfo[0].byteDance[2].hotNum : '-' }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </a-table-column>
|
|
|
+ <!-- <a-table-column title="离职时间" data-index="quitTime" align="center">
|
|
|
+ <template slot-scope="t, r, i">
|
|
|
+ <span>{{ !!t ? t : '-' }}</span>
|
|
|
+ </template>
|
|
|
+ </a-table-column> -->
|
|
|
+ </a-table>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import moment from 'moment'
|
|
|
+import YoutTable from '@/components/youtTable/YoutTable'
|
|
|
+import ChartCard from '@/components/ChartCard'
|
|
|
+import Trend from '@/components/Trend'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
+import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
+const columnsFixd = [
|
|
|
+ {
|
|
|
+ title: '广告组名称',
|
|
|
+ dataIndex: 'unitName',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'unitName' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面曝光数',
|
|
|
+ dataIndex: 'photoShow',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面点击数',
|
|
|
+ dataIndex: 'photoClick',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'photoClick' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+]
|
|
|
+const ksColumns = []
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ YoutTable,
|
|
|
+ ChartCard,
|
|
|
+ Trend,
|
|
|
+ Treeselect,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visible: false, //自定义页面的打开
|
|
|
+ listNum: [],
|
|
|
+ spinningMaterialGroupData: false,
|
|
|
+ scrollX: 0,
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ // showSizeChanger: true,
|
|
|
+ pageSizeOptions: ['10', '30', '50'],
|
|
|
+ total: 0,
|
|
|
+ onChange: (current, pageSize) => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.ipagination.current = current
|
|
|
+ this.ipagination.pageSize = pageSize
|
|
|
+ this.getTableMediaList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tabListNoTitle: [
|
|
|
+ {
|
|
|
+ key: '2',
|
|
|
+ tab: '快手',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: '1',
|
|
|
+ tab: '头条',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ noTitleKey: '2',
|
|
|
+ active: 'cost',
|
|
|
+ groupDisabled: false,
|
|
|
+ timeShowEchartsStatus: true,
|
|
|
+ signatureStatus: false,
|
|
|
+ materialGroupData: {},
|
|
|
+ accountIndexList: {},
|
|
|
+ popularVideoList: {},
|
|
|
+ materialRankValue: 0,
|
|
|
+ designRankingValue: 1,
|
|
|
+ designTopLoading: false,
|
|
|
+ noImg: require('@/assets/noImg.png'),
|
|
|
+ visibleVideo: false,
|
|
|
+ videoUrlShow: '',
|
|
|
+ cost: '0',
|
|
|
+ spinning: false,
|
|
|
+ spinningChart: false,
|
|
|
+ spinningChartPie: false,
|
|
|
+ loading: false,
|
|
|
+ chartList: [],
|
|
|
+ videoList: [],
|
|
|
+ designTopList: [],
|
|
|
+ target: '',
|
|
|
+ order: 'descend',
|
|
|
+ columns: [...columnsFixd, ...ksColumns], // table的表头
|
|
|
+ columnsFixd,
|
|
|
+ dateRanges: {
|
|
|
+ 今天: [moment(), moment()],
|
|
|
+ 近三天: [moment().subtract(3, 'days'), moment().subtract(1, 'days')],
|
|
|
+ 近一周: [moment().subtract(7, 'days'), moment().subtract(1, 'days')],
|
|
|
+ // 近14天: [moment().subtract(14, 'days'), moment().subtract(1, 'days')],
|
|
|
+ // 近一月: [moment().subtract(1, 'months'), moment().subtract(1, 'days')],
|
|
|
+ // 近半年: [moment().subtract(6, 'months'), moment().subtract(1, 'days')],
|
|
|
+ // 近一年: [moment().subtract(12, 'months'), moment().subtract(1, 'days')],
|
|
|
+ },
|
|
|
+ dateValue: [moment(), moment()],
|
|
|
+ videoType: 0,
|
|
|
+ labelType: 0,
|
|
|
+ dataDimension: 'a',
|
|
|
+ mediaDimension: 'b',
|
|
|
+ showKf: true,
|
|
|
+ projectId: null,
|
|
|
+ dataDimensionValue: null,
|
|
|
+ quarter: null,
|
|
|
+ person: null,
|
|
|
+ post: null,
|
|
|
+ operationTarget: 'charge',
|
|
|
+ dataDimensionList: [],
|
|
|
+ specificLoading: false,
|
|
|
+ dataType: 0,
|
|
|
+ accountIdKuaishou: undefined,
|
|
|
+ accountIdToutiao: undefined,
|
|
|
+ category: 0,
|
|
|
+ clientWidth: 0,
|
|
|
+ resetLoading: false,
|
|
|
+ searchLoading: false,
|
|
|
+ spinningPopularVideoList: false,
|
|
|
+ oneFWCharge: '',
|
|
|
+ oneJLCharge: '',
|
|
|
+ oneKFCharge: '',
|
|
|
+ onetotalCharge: '',
|
|
|
+ twoFWCharge: '',
|
|
|
+ twoJLCharge: '',
|
|
|
+ twoKFCharge: '',
|
|
|
+ twototalCharge: '',
|
|
|
+ threeFWCharge: '',
|
|
|
+ threeJLCharge: '',
|
|
|
+ threeKFCharge: '',
|
|
|
+ threetotalCharge: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ visibleVideo(n, o) {
|
|
|
+ if (!n) {
|
|
|
+ stopOtherVideo()
|
|
|
+ closeAllVideoFun()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['userInfo']),
|
|
|
+ filterOption(input, option) {
|
|
|
+ return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ },
|
|
|
+ getQuarter() {
|
|
|
+ var today = new Date()
|
|
|
+ var month = today.getMonth() + 1
|
|
|
+ if (month >= 1 && month <= 3) {
|
|
|
+ this.quarter = 1
|
|
|
+ } else if (month >= 4 && month <= 6) {
|
|
|
+ this.quarter = 2
|
|
|
+ } else if (month >= 7 && month <= 9) {
|
|
|
+ this.quarter = 3
|
|
|
+ } else {
|
|
|
+ this.quarter = 4
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.spinning = true
|
|
|
+ this.spinningChart = true
|
|
|
+ this.active = 'cost'
|
|
|
+ this.getProjectList()
|
|
|
+
|
|
|
+ Promise.all([this.getChartMediaList()])
|
|
|
+ .then((res) => {
|
|
|
+ this.spinning = false
|
|
|
+ this.resetLoading = false
|
|
|
+ this.searchLoading = false
|
|
|
+ this.spinningChart = false
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ this.spinning = false
|
|
|
+ this.resetLoading = false
|
|
|
+ this.searchLoading = false
|
|
|
+ // this.$error({
|
|
|
+ // title: '页面数据加载出错',
|
|
|
+ // content: '请刷新重试或联系管理员查询'
|
|
|
+ // });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTableMediaList(data) {
|
|
|
+ this.designTopLoading = true
|
|
|
+ var params = {}
|
|
|
+ params.monthTime = this.quarter
|
|
|
+ // params.mediaId = this.mediaDimension === 'a' ? 1 : 2
|
|
|
+ // params.role = this.post
|
|
|
+ params.userId = !!this.person ? this.person : this.userInfo().id
|
|
|
+ params.yearTime = 2022
|
|
|
+ // this.userInfo().id
|
|
|
+ params.pageSize = this.ipagination.pageSize
|
|
|
+ params.pageNum = this.ipagination.current
|
|
|
+
|
|
|
+ if (this.mediaDimension === 'a') {
|
|
|
+ this.showKf = false
|
|
|
+ } else {
|
|
|
+ this.showKf = true
|
|
|
+ }
|
|
|
+ if (this.quarter == 1) {
|
|
|
+ this.oneFWCharge = '头条1月爆款'
|
|
|
+ this.onetotalCharge = '快手1月爆款'
|
|
|
+
|
|
|
+ this.twoFWCharge = '头条2月爆款'
|
|
|
+ this.twototalCharge = '快手2月爆款'
|
|
|
+
|
|
|
+ this.threeFWCharge = '头条3月爆款'
|
|
|
+ this.threetotalCharge = '快手3月爆款'
|
|
|
+ } else if (this.quarter == 2) {
|
|
|
+ this.oneFWCharge = '头条4月爆款'
|
|
|
+ this.onetotalCharge = '快手4月爆款'
|
|
|
+
|
|
|
+ this.twoFWCharge = '头条5月爆款'
|
|
|
+ this.twototalCharge = '快手5月爆款'
|
|
|
+
|
|
|
+ this.threeFWCharge = '头条6月爆款'
|
|
|
+ this.threetotalCharge = '快手6月爆款'
|
|
|
+ } else if (this.quarter == 3) {
|
|
|
+ this.oneFWCharge = '头条7月爆款'
|
|
|
+ this.onetotalCharge = '快手7月爆款'
|
|
|
+
|
|
|
+ this.twoFWCharge = '头条8月爆款'
|
|
|
+ this.twototalCharge = '快手8月爆款'
|
|
|
+
|
|
|
+ this.threeFWCharge = '头条9月爆款'
|
|
|
+ this.threetotalCharge = '快手9月爆款'
|
|
|
+ } else {
|
|
|
+ this.oneFWCharge = '头条10月爆款'
|
|
|
+ this.onetotalCharge = '快手10月爆款'
|
|
|
+
|
|
|
+ this.twoFWCharge = '头条11月爆款'
|
|
|
+ this.twototalCharge = '快手11月爆款'
|
|
|
+
|
|
|
+ this.threeFWCharge = '头条12月爆款'
|
|
|
+ this.threetotalCharge = '快手12月爆款'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getAction('/designer/designerAchievementsController/getDesignerBasicsAndHotVideoInfo', params).then(
|
|
|
+ (res) => {
|
|
|
+ this.resetLoading = false
|
|
|
+ if (res.success) {
|
|
|
+ this.designTopLoading = false
|
|
|
+ this.designTopList = res.result.list || []
|
|
|
+ this.ipagination.total = res.result.total || 0
|
|
|
+ } else {
|
|
|
+ this.designTopLoading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+
|
|
|
+ getProjectList() {
|
|
|
+ this.specificLoading = true
|
|
|
+ this.dataDimensionList = []
|
|
|
+ this.dataDimensionValue = null
|
|
|
+ this.person = null
|
|
|
+ this.post = null
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.getAction('/designer/designerAchievementsController/getUserByRoleName', { roleName: '' }).then(
|
|
|
+ (res) => {
|
|
|
+ this.specificLoading = false
|
|
|
+ if (res.success) {
|
|
|
+ this.dataDimensionList = res.result
|
|
|
+ resolve(res.result)
|
|
|
+ } else {
|
|
|
+ reject(res.message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ })
|
|
|
+ },
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }) {
|
|
|
+ this.ipagination.current = pagination.current
|
|
|
+ this.ipagination.pageSize = pagination.pageSize
|
|
|
+
|
|
|
+ // if (sorter.order) {
|
|
|
+ // this.order = sorter.order ? sorter.order : 'descend'
|
|
|
+ // this.target = sorter.columnKey
|
|
|
+ // this.getTableMediaList({
|
|
|
+ // target: sorter.columnKey,
|
|
|
+ // order: sorter.order ? sorter.order : 'descend',
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSubmit() {
|
|
|
+ this.cancel()
|
|
|
+ this.resetLoading = true
|
|
|
+
|
|
|
+ this.ipagination.current = 1
|
|
|
+ // this.getData()
|
|
|
+
|
|
|
+ this.getTableMediaList()
|
|
|
+ },
|
|
|
+ resetSubmit() {
|
|
|
+ this.getQuarter()
|
|
|
+ this.mediaDimension = 'b'
|
|
|
+ this.dataDimensionValue = null
|
|
|
+ this.post = null
|
|
|
+ this.person = null
|
|
|
+ this.dataType = 0
|
|
|
+
|
|
|
+ this.ipagination.current = 1
|
|
|
+ this.handleSubmit()
|
|
|
+ },
|
|
|
+ //获取echart的值
|
|
|
+ initEchart(idName, optionName) {
|
|
|
+ let that = this
|
|
|
+ const chart = this.$refs[idName]
|
|
|
+ if (chart) {
|
|
|
+ echarts.init(document.getElementById(idName)).dispose()
|
|
|
+ const myChart = echarts.init(document.getElementById(idName))
|
|
|
+ myChart.setOption(optionName)
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
+ that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ disabledDate(current) {
|
|
|
+ return current && current >= moment()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getProjectList()
|
|
|
+ this.getQuarter()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getTableMediaList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ })
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.materialReport {
|
|
|
+ .material-report-card-two {
|
|
|
+ width: 25%;
|
|
|
+ ::v-deep * {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .material-report-card {
|
|
|
+ // height: 220px;
|
|
|
+ ::v-deep .ant-card-head {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ ::v-deep .ant-card-body {
|
|
|
+ padding-top: 5px;
|
|
|
+ }
|
|
|
+ .report-card-result {
|
|
|
+ height: 88px;
|
|
|
+ }
|
|
|
+ .report-card-money {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .report-card-msg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .report-card-line {
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ margin-top: 20px;
|
|
|
+ background: #e8e8e8;
|
|
|
+ }
|
|
|
+ .report-card-radio {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .option {
|
|
|
+ background: white;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item {
|
|
|
+ margin-right: 15px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ span {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .echart {
|
|
|
+ margin-top: 20px;
|
|
|
+ padding: 0 20px 20px;
|
|
|
+ background: white;
|
|
|
+ .echart-header {
|
|
|
+ padding: 20px 0;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableBody {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.materialReport .card-containers {
|
|
|
+ overflow: hidden !important;
|
|
|
+}
|
|
|
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content {
|
|
|
+ margin-top: -16px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
|
|
|
+ background: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar {
|
|
|
+ border-color: #fff !important;
|
|
|
+}
|
|
|
+
|
|
|
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
|
|
|
+ border-color: transparent !important;
|
|
|
+ background: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+.materialReport .card-containers > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
|
|
|
+ border-color: #fff !important;
|
|
|
+ background: #fff !important;
|
|
|
+}
|
|
|
+</style>
|