123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691 |
- <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="operationAssistant"> 运营助理 </a-select-option>
- <a-select-option value="manager"> 运营经理 </a-select-option>
- <a-select-option value="operator"> 运营专员 </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 class="item">
- <span>类型</span>
- <a-select
- v-model="dataType"
- style="width: 300px; margin-left: 10px"
- :mode="'default'"
- allowClear
- >
- <a-select-option :value="0"> 消耗 </a-select-option>
- <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>
- </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="upTime" align="center">
- <template slot-scope="t, r, i">
- <span>{{ !!t ? t : '-' }}</span>
- </template>
- </a-table-column>
- <a-table-column :title="onetotalCharge" data-index="1totalCharge" align="center">
- </a-table-column>
- <a-table-column :title="twototalCharge" data-index="2totalCharge" align="center">
- </a-table-column>
- <a-table-column :title="threetotalCharge" data-index="3totalCharge" align="center">
- </a-table-column>
- <a-table-column :title="oneKFCharge" data-index="1KFCharge" align="center" v-if="showKf"> </a-table-column>
- <a-table-column :title="twoKFCharge" data-index="2KFCharge" align="center" v-if="showKf"> </a-table-column>
- <a-table-column :title="threeKFCharge" data-index="3KFCharge" align="center" v-if="showKf"> </a-table-column>
- <a-table-column :title="oneFWCharge" data-index="1FWCharge" align="center"> </a-table-column>
- <a-table-column :title="twoFWCharge" data-index="2FWCharge" align="center"> </a-table-column>
- <a-table-column :title="threeFWCharge" data-index="3FWCharge" align="center"> </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.time = this.quarter
- params.mediaId = this.mediaDimension === 'a' ? 1 : 2
- params.role = this.post
- params.userId = this.person
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- if (this.mediaDimension === 'a') {
- this.showKf = false
- } else {
- this.showKf = true
- }
- if (this.quarter == 1) {
- this.oneFWCharge = '1月服务消耗'
- this.oneJLCharge = '1月激励消耗'
- this.oneKFCharge = '1月框返消耗'
- this.onetotalCharge = '1月总消耗'
- this.twoFWCharge = '2月服务消耗'
- this.twoJLCharge = '2月激励消耗'
- this.twoKFCharge = '2月框返消耗'
- this.twototalCharge = '2月总消耗'
- this.threeFWCharge = '3月服务消耗'
- this.threeJLCharge = '3月激励消耗'
- this.threeKFCharge = '3月框返消耗'
- this.threetotalCharge = '3月总消耗'
- } else if (this.quarter == 2) {
- this.oneFWCharge = '4月服务消耗'
- this.oneJLCharge = '4月激励消耗'
- this.oneKFCharge = '4月框返消耗'
- this.onetotalCharge = '4月总消耗'
- this.twoFWCharge = '5月服务消耗'
- this.twoJLCharge = '5月激励消耗'
- this.twoKFCharge = '5月框返消耗'
- this.twototalCharge = '5月总消耗'
- this.threeFWCharge = '6月服务消耗'
- this.threeJLCharge = '6月激励消耗'
- this.threeKFCharge = '6月框返消耗'
- this.threetotalCharge = '6月总消耗'
- } else if (this.quarter == 3) {
- this.oneFWCharge = '7月服务消耗'
- this.oneJLCharge = '7月激励消耗'
- this.oneKFCharge = '7月框返消耗'
- this.onetotalCharge = '7月总消耗'
- this.twoFWCharge = '8月服务消耗'
- this.twoJLCharge = '8月激励消耗'
- this.twoKFCharge = '8月框返消耗'
- this.twototalCharge = '8月总消耗'
- this.threeFWCharge = '9月服务消耗'
- this.threeJLCharge = '9月激励消耗'
- this.threeKFCharge = '9月框返消耗'
- this.threetotalCharge = '9月总消耗'
- } else {
- this.oneFWCharge = '10月服务消耗'
- this.oneJLCharge = '10月激励消耗'
- this.oneKFCharge = '10月框返消耗'
- this.onetotalCharge = '10月总消耗'
- this.twoFWCharge = '11月服务消耗'
- this.twoJLCharge = '11月激励消耗'
- this.twoKFCharge = '11月框返消耗'
- this.twototalCharge = '11月总消耗'
- this.threeFWCharge = '12月服务消耗'
- this.threeJLCharge = '12月激励消耗'
- this.threeKFCharge = '12月框返消耗'
- this.threetotalCharge = '12月总消耗'
- }
- this.getAction('/kuaishou/operationReport/queryMonthlyData', 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(
- '/kuaishou/operationReport/getAllOperatorList?mediaId=' + (this.mediaDimension == 'a' ? 1 : 2)
- ).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.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>
|