|
@@ -0,0 +1,928 @@
|
|
|
+<style lang="scss" scoped>
|
|
|
+.search-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.search-box p {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.showNumBox{
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+.showNumBox .ant-card-body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.showNumBox p,
|
|
|
+.showNumBox span {
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: red;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+.search-box .ant-card-body {
|
|
|
+ padding: 5px 15px;
|
|
|
+}
|
|
|
+.showNumBox .ant-card-body .styleElse {
|
|
|
+ line-height: 60px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.yincang .ant-col-6 p {
|
|
|
+ text-align: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.ant-table-thead div {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.tool-tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang='less'>
|
|
|
+.ant-card-head .ant-tabs-bar{
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.search-box .ant-card-body {
|
|
|
+ padding: 5px 15px;
|
|
|
+
|
|
|
+}
|
|
|
+.search-box{
|
|
|
+ padding: 15px 10px;
|
|
|
+}
|
|
|
+.search-box p {
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.statistics .ant-col-6 .ant-card-body .styleElse {
|
|
|
+ line-height: 60px;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+.ant-modal-wrap .yincang .ant-modal-content .ant-modal-footer {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.yincang .ant-col-6 p {
|
|
|
+ text-align: left;
|
|
|
+ color: red;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.ant-table-thead div {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+.tool-tip {
|
|
|
+ position: absolute;
|
|
|
+ top: 65px;
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
+.statistics{
|
|
|
+ .ant-card-bordered {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .ant-card-head .ant-tabs {
|
|
|
+ clear: both;
|
|
|
+ margin-bottom: -13px;
|
|
|
+ color: rgba(0, 0, 0, 0.65);
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.duibi{
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ top: 15px;
|
|
|
+}
|
|
|
+ p{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.newPlanStatic{
|
|
|
+ .divider{
|
|
|
+ height: 62px;
|
|
|
+ }
|
|
|
+ .showNumBox{
|
|
|
+ background: white;
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 15px 0;
|
|
|
+ padding: 30px 0;
|
|
|
+ text-align: center;
|
|
|
+ .ant-card-body{
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 22px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabbody{
|
|
|
+ background: white;
|
|
|
+ padding: 0 24px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ .ant-tabs-bar {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chartBox{
|
|
|
+ background: white;
|
|
|
+ padding: 20px 0;
|
|
|
+ }
|
|
|
+ .tableBody{
|
|
|
+ background: white;
|
|
|
+ padding: 20px ;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="newPlanStatic">
|
|
|
+ <div class="tabbody">
|
|
|
+ <a-tabs v-model="tabKey" @change="tabChange">
|
|
|
+ <a-tab-pane :key="1" tab="头条">
|
|
|
+ </a-tab-pane>
|
|
|
+ <a-tab-pane :key="2" tab="快手">
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="24">
|
|
|
+
|
|
|
+ <a-card :bordered="false" class="search-box">
|
|
|
+ <!-- <div style="margin-bottom:20px"> -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <span style="margin-left:20px">编导:</span>
|
|
|
+ <a-select
|
|
|
+ v-model="planId"
|
|
|
+ show-search
|
|
|
+ placeholder="请输入名字"
|
|
|
+ option-filter-prop="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filter-option="filterOption"
|
|
|
+ @change="operateChange"
|
|
|
+ :disabled='operateDisabled'
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in designList" :key="item.user_id" :value="item.user_id">
|
|
|
+ {{item.user_name}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span style="margin-left:20px">剪辑:</span>
|
|
|
+ <a-select
|
|
|
+ v-model="clipId"
|
|
|
+ show-search
|
|
|
+ placeholder="请输入名字"
|
|
|
+ option-filter-prop="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filter-option="filterOption"
|
|
|
+ @change="operateChange"
|
|
|
+ :disabled='operateDisabled'
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in designList" :key="item.user_id" :value="item.user_id">
|
|
|
+ {{item.user_name}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span style="margin-left:20px">拍摄:</span>
|
|
|
+ <a-select
|
|
|
+ v-model="shotId"
|
|
|
+ show-search
|
|
|
+ placeholder="请输入名字"
|
|
|
+ option-filter-prop="children"
|
|
|
+ style="width: 200px"
|
|
|
+ :filter-option="filterOption"
|
|
|
+ @change="operateChange"
|
|
|
+ :disabled='operateDisabled'
|
|
|
+ allowClear
|
|
|
+ >
|
|
|
+ <a-select-option v-for="item in designList" :key="item.user_id" :value="item.user_id">
|
|
|
+ {{item.user_name}}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select> -->
|
|
|
+ <a-button type='primary' style="position:absolute;right:20px" @click="search">查询</a-button>
|
|
|
+
|
|
|
+ <!-- </div> -->
|
|
|
+ <div style="margin-bottom:20px">
|
|
|
+ <span>日期选择:</span>
|
|
|
+ <a-range-picker
|
|
|
+ @change="dateChange"
|
|
|
+ v-model="dateRange"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ style="width:200px"
|
|
|
+ />
|
|
|
+ <span style="margin-left:20px">数据维度:</span>
|
|
|
+ <a-radio-group v-model="value" @change="dataTypeChange">
|
|
|
+ <a-radio value="valid">
|
|
|
+ 有效视频
|
|
|
+ </a-radio>
|
|
|
+ <a-radio value="hot">
|
|
|
+ 爆款视频
|
|
|
+ </a-radio>
|
|
|
+ <a-radio value="onlie">
|
|
|
+ 上线时间
|
|
|
+ </a-radio>
|
|
|
+
|
|
|
+ </a-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="time" >
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+
|
|
|
+
|
|
|
+ <a-row style="margin-bottom:15px;margin-top:12px">
|
|
|
+ <a-col :span="24">
|
|
|
+ <div class="tableBody">
|
|
|
+ <a-button type='primary' class="export" style="margin-bottom:20px" @click="exportExcel" :loading="exportloading">导出报表</a-button>
|
|
|
+ <a-table :columns="columns" :dataSource="dataTable" :pagination="ipagination" :loading="loading" bordered @change="tableChange">
|
|
|
+ <span slot="createImg" slot-scope="text,record">
|
|
|
+ <a-popover placement="right">
|
|
|
+ <template slot="content">
|
|
|
+ <video :src="record.url" style="width:250px" controls ></video>
|
|
|
+ </template>
|
|
|
+ <template slot="title">
|
|
|
+ </template>
|
|
|
+ <img :src="record.coverUrl || noImg" alt="" style="width:80px">
|
|
|
+ </a-popover>
|
|
|
+ </span>
|
|
|
+ <span slot='companyName' slot-scope="text">{{text || '未知'}}</span>
|
|
|
+ <span slot='planName' slot-scope="text">{{text || '-'}}</span>
|
|
|
+ <span slot='clipName' slot-scope="text">{{text || '-'}}</span>
|
|
|
+ <span slot='shotName' slot-scope="text">{{text || '-'}}</span>
|
|
|
+ <span slot='totalCost' slot-scope="text">{{text |decimalsHandle}}</span>
|
|
|
+ <span slot='activeNum' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='clickNum' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='convertNum' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='showNum' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='aclick' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='bclick' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='photoClick' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ <span slot='photoShow' slot-scope="text">{{text |formatCurrency}}</span>
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+import { TreeSelect } from 'ant-design-vue';
|
|
|
+const SHOW_PARENT = TreeSelect.SHOW_PARENT;
|
|
|
+import ARow from 'ant-design-vue/es/grid/Row'
|
|
|
+import ACol from 'ant-design-vue/es/grid/Col'
|
|
|
+import moment from 'moment'
|
|
|
+
|
|
|
+import { getKsAccountReport, getKsDetail, getReportList } from '@api/video.js'
|
|
|
+import {
|
|
|
+ getAction,
|
|
|
+ postAction,
|
|
|
+ downFile,
|
|
|
+ downFilePost
|
|
|
+ } from '@/api/manage';
|
|
|
+
|
|
|
+
|
|
|
+import qs from 'qs'
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let TTcolumns=[
|
|
|
+ {
|
|
|
+ title: '视频',
|
|
|
+ dataIndex: 'createImg',
|
|
|
+ scopedSlots: { customRender: 'createImg' },
|
|
|
+ align: 'center',
|
|
|
+ key:'userNcreateImgame'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频ID',
|
|
|
+ dataIndex: 'videoCode',
|
|
|
+ scopedSlots: { customRender: 'videoCode' },
|
|
|
+ align: 'center',
|
|
|
+ key:'videoCode'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频上线时间',
|
|
|
+ dataIndex: 'stateDate',
|
|
|
+ scopedSlots: { customRender: 'stateDate' },
|
|
|
+ align: 'center',
|
|
|
+ key:'stateDate'
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '所属公司',
|
|
|
+ dataIndex: 'companyName',
|
|
|
+ scopedSlots: { customRender: 'companyName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'companyName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '策划名称',
|
|
|
+ dataIndex: 'planName',
|
|
|
+ scopedSlots: { customRender: 'planName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'planName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '剪辑名称',
|
|
|
+ dataIndex: 'clipName',
|
|
|
+ scopedSlots: { customRender: 'clipName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'clipName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '拍摄名称',
|
|
|
+ dataIndex: 'shotName',
|
|
|
+ scopedSlots: { customRender: 'shotName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'shotName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总消耗',
|
|
|
+ dataIndex: 'totalCost',
|
|
|
+ scopedSlots: { customRender: 'totalCost' },
|
|
|
+ align: 'center',
|
|
|
+ key:'totalCost'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击数',
|
|
|
+ dataIndex: 'clickNum',
|
|
|
+ scopedSlots: { customRender: 'clickNum' },
|
|
|
+ align: 'center',
|
|
|
+ key:'clickNum'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '曝光数',
|
|
|
+ dataIndex: 'showNum',
|
|
|
+ scopedSlots: { customRender: 'showNum' },
|
|
|
+ align: 'center',
|
|
|
+ key:'showNum'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '激活数',
|
|
|
+ dataIndex: 'activeNum',
|
|
|
+ scopedSlots: { customRender: 'activeNum' },
|
|
|
+ align: 'center',
|
|
|
+ key:'activeNum'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转化数',
|
|
|
+ dataIndex: 'convertNum',
|
|
|
+ scopedSlots: { customRender: 'convertNum' },
|
|
|
+ align: 'center',
|
|
|
+ key:'convertNum'
|
|
|
+
|
|
|
+ },
|
|
|
+// {
|
|
|
+// title: '总消耗',
|
|
|
+// dataIndex: 'totalCost',
|
|
|
+// scopedSlots: { customRender: 'totalCost' },
|
|
|
+// align: 'center',
|
|
|
+// key:'totalCost'
|
|
|
+
|
|
|
+// },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let KScolumns=[
|
|
|
+ {
|
|
|
+ title: '视频',
|
|
|
+ dataIndex: 'createImg',
|
|
|
+ scopedSlots: { customRender: 'createImg' },
|
|
|
+ align: 'center',
|
|
|
+ key:'userNcreateImgame'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频ID',
|
|
|
+ dataIndex: 'videoCode',
|
|
|
+ scopedSlots: { customRender: 'videoCode' },
|
|
|
+ align: 'center',
|
|
|
+ key:'videoCode'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频上线时间',
|
|
|
+ dataIndex: 'stateDate',
|
|
|
+ scopedSlots: { customRender: 'stateDate' },
|
|
|
+ align: 'center',
|
|
|
+ key:'stateDate'
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '所属公司',
|
|
|
+ dataIndex: 'companyName',
|
|
|
+ scopedSlots: { customRender: 'companyName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'companyName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '策划名称',
|
|
|
+ dataIndex: 'planName',
|
|
|
+ scopedSlots: { customRender: 'planName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'planName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '剪辑名称',
|
|
|
+ dataIndex: 'clipName',
|
|
|
+ scopedSlots: { customRender: 'clipName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'clipName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '拍摄名称',
|
|
|
+ dataIndex: 'shotName',
|
|
|
+ scopedSlots: { customRender: 'shotName' },
|
|
|
+ align: 'center',
|
|
|
+ key:'shotName'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '总消耗',
|
|
|
+ dataIndex: 'totalCost',
|
|
|
+ scopedSlots: { customRender: 'totalCost' },
|
|
|
+ align: 'center',
|
|
|
+ key:'totalCost'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面曝光',
|
|
|
+ dataIndex: 'photoShow',
|
|
|
+ scopedSlots: { customRender: 'photoShow' },
|
|
|
+ align: 'center',
|
|
|
+ key:'photoShow'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面点击',
|
|
|
+ dataIndex: 'photoClick',
|
|
|
+ scopedSlots: { customRender: 'photoClick' },
|
|
|
+ align: 'center',
|
|
|
+ key:'photoClick'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '素材曝光',
|
|
|
+ dataIndex: 'aclick',
|
|
|
+ scopedSlots: { customRender: 'aclick' },
|
|
|
+ align: 'center',
|
|
|
+ key:'aclick'
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '行为数',
|
|
|
+ dataIndex: 'bclick',
|
|
|
+ scopedSlots: { customRender: 'bclick' },
|
|
|
+ align: 'center',
|
|
|
+ key:'bclick'
|
|
|
+
|
|
|
+ },
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+
|
|
|
+ components: {
|
|
|
+ ACol,
|
|
|
+ ARow,
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ exportloading:false,
|
|
|
+ planId:'',
|
|
|
+ shotId:'',
|
|
|
+ clipId:'',
|
|
|
+ dateRange:[moment().subtract(1,'weeks'),moment()],
|
|
|
+ noImg:require('@/assets/noImg.png'),
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ value:'valid',
|
|
|
+ KSaccountList:[],
|
|
|
+ TTaccountList:[],
|
|
|
+
|
|
|
+ KSdesignList:[],
|
|
|
+ TTdesignList:[],
|
|
|
+
|
|
|
+
|
|
|
+ operateDisabled:false,
|
|
|
+ userId:JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id,
|
|
|
+ duration: 1000,
|
|
|
+ //treeselect的参数
|
|
|
+ treeValue: [],
|
|
|
+ treeData: [],
|
|
|
+ SHOW_PARENT,
|
|
|
+
|
|
|
+ type:3,
|
|
|
+ dateValue:[moment().subtract(7,'days'), moment()],
|
|
|
+
|
|
|
+ operate:'',
|
|
|
+ designList:[],
|
|
|
+
|
|
|
+ tabKey:1,
|
|
|
+
|
|
|
+ loading: false,
|
|
|
+ TTcolumns,
|
|
|
+ KScolumns,
|
|
|
+ columns:[...TTcolumns],
|
|
|
+ dataTable: [],
|
|
|
+
|
|
|
+ tableTab:1,
|
|
|
+
|
|
|
+ newPlan:0,
|
|
|
+ effectPlan:0,
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ openOptions:false,
|
|
|
+
|
|
|
+ target:'',
|
|
|
+ order:'desc',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ disabledDate(current) {
|
|
|
+ return current && current > moment()
|
|
|
+ },
|
|
|
+ dateChange(date, dateString) {
|
|
|
+ // console.log(date,dateString)
|
|
|
+ },
|
|
|
+ //导出报表
|
|
|
+ exportExcel() {
|
|
|
+ this.exportloading=true;
|
|
|
+ let url='';
|
|
|
+ if(this.tabKey==1){
|
|
|
+ url='/ctop/bytedanceVideoEtlInfo/exportXls';
|
|
|
+ }else {
|
|
|
+ url='/ctop/kuaishouVideoEtlInfo/exportXls'
|
|
|
+ }
|
|
|
+ let nameType=''
|
|
|
+ if(this.value=='valid'){
|
|
|
+ nameType='有效视频'
|
|
|
+ }else if(this.value=='hot'){
|
|
|
+ nameType='爆款视频'
|
|
|
+ }else if(this.value=='online'){
|
|
|
+ nameType='视频上线时间'
|
|
|
+ }
|
|
|
+
|
|
|
+ downFilePost(url,qs.stringify({
|
|
|
+ type:this.value,
|
|
|
+ clipId:this.clipId,
|
|
|
+ shotId:this.shotId,
|
|
|
+ planId:this.planId,
|
|
|
+ startData:this.dateRange[0].format('YYYY-MM-DD'),
|
|
|
+ endData:this.dateRange[1].format('YYYY-MM-DD'),
|
|
|
+ })).then(res => {
|
|
|
+ this.exportloading=false;
|
|
|
+ let blob = new Blob([res], {
|
|
|
+ type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
+ })
|
|
|
+ let downloadElement = document.createElement('a')
|
|
|
+ let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
|
+ downloadElement.href = href
|
|
|
+ downloadElement.download = moment().format('YYYY-MM-DD') + nameType+'.xlsx' //下载后文件名
|
|
|
+ document.body.appendChild(downloadElement)
|
|
|
+ downloadElement.click() //点击下载
|
|
|
+ document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dataTypeChange(e){
|
|
|
+ console.log(e.target.value)
|
|
|
+
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ filterOption(input, option){
|
|
|
+ console.log(input, option)
|
|
|
+ return (
|
|
|
+ option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ );
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 快手头条的切换
|
|
|
+ tabChange(key){
|
|
|
+ console.log(key);
|
|
|
+ this.treeValue=[];
|
|
|
+ this.ipagination.current=1
|
|
|
+ if(key==1){
|
|
|
+ // toutiao
|
|
|
+ this.designList=this.TTdesignList
|
|
|
+ this.columns=[...TTcolumns]
|
|
|
+ }else{
|
|
|
+ // kuaishou
|
|
|
+ this.columns=[...KScolumns]
|
|
|
+ this.designList=this.KSdesignList
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+ operateChange(value){
|
|
|
+ console.log(value);
|
|
|
+ if(value){
|
|
|
+ this.accountDisabled=true;
|
|
|
+ this.accountId=''
|
|
|
+ }else{
|
|
|
+ this.accountDisabled=false
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ tableChange(pagination, filters, sorter, { currentDataSource }){
|
|
|
+ console.log(pagination)
|
|
|
+ this.ipagination.current=pagination.current;
|
|
|
+ this.ipagination.pageSize=pagination.pageSize;
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+
|
|
|
+ // table区域的tab切换
|
|
|
+ tableTabChange(key){
|
|
|
+ if(key==1){
|
|
|
+
|
|
|
+ this.columns=this.tabKey==1?[...TTcolumns]:[...KScolumns]
|
|
|
+ this.target='new'
|
|
|
+ }else{
|
|
|
+
|
|
|
+ this.columns=this.tabKey==1?[...TTcolumnsVaild]:[...KScolumnsVaild]
|
|
|
+ this.target='valid'
|
|
|
+ }
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 运营数据获取
|
|
|
+ operateHttp(){
|
|
|
+ postAction('',{}).then(res=>{
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取所有运营
|
|
|
+ getAllOperator(key){
|
|
|
+ let url=''
|
|
|
+ this.designList=[]
|
|
|
+ if(key==1){
|
|
|
+ // 头条
|
|
|
+ url='/ctop/bytedance/newPlan/report/AllOperator'
|
|
|
+ }else{
|
|
|
+ // 快手
|
|
|
+ url='/ctop/kuaishou/newGroup/report/AllOperator'
|
|
|
+ }
|
|
|
+ postAction(url,{}).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ if(res.success){
|
|
|
+ if(key==1){
|
|
|
+ this.TTdesignList=res.result;
|
|
|
+ }else{
|
|
|
+ this.KSdesignList=res.result;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.tabKey==1){
|
|
|
+ this.designList=this.TTdesignList
|
|
|
+ }else{
|
|
|
+ this.designList=this.KSdesignList
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ // 获取展示数据
|
|
|
+ getNewPlan(){
|
|
|
+ let url=''
|
|
|
+ if(this.tabKey==1){
|
|
|
+ // 头条
|
|
|
+ url='/ctop/bytedanceVideoEtlInfo/list'
|
|
|
+ }else{
|
|
|
+ // 快手
|
|
|
+
|
|
|
+ url='/ctop/kuaishouVideoEtlInfo/list'
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ this.loading=true;
|
|
|
+
|
|
|
+ getAction(url,{
|
|
|
+ type:this.value,
|
|
|
+ clipId:this.clipId,
|
|
|
+ shotId:this.shotId,
|
|
|
+ planId:this.planId,
|
|
|
+ startData:this.dateRange[0].format('YYYY-MM-DD'),
|
|
|
+ endData:this.dateRange[1].format('YYYY-MM-DD'),
|
|
|
+ pageSize:this.ipagination.pageSize,
|
|
|
+ pageNo:this.ipagination.current
|
|
|
+ }).then(res=>{
|
|
|
+ console.log(res);
|
|
|
+ this.loading=false;
|
|
|
+
|
|
|
+ if(res.success){
|
|
|
+
|
|
|
+ if(res.result){
|
|
|
+ this.dataTable=res.result.records
|
|
|
+ this.ipagination.total=res.result.total
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查询按钮
|
|
|
+ search(){
|
|
|
+ // if(this.accountId || this.operate){
|
|
|
+ // this.echartSpinning=true;
|
|
|
+ // this.getNewPlan()
|
|
|
+ // }else{
|
|
|
+ // this.$message.error('请选择具体账户或者运营')
|
|
|
+ // }
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ dateValue(newName,oldName){
|
|
|
+
|
|
|
+ this.search()
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ newDate() {
|
|
|
+ var myDate = new Date()
|
|
|
+ myDate.getYear() //获取当前年份(2位)
|
|
|
+ var n = myDate.getFullYear() //获取完整的年份(4位,1970-????)
|
|
|
+ var m = myDate.getMonth() //获取当前月份(0-11,0代表1月)
|
|
|
+ var d = myDate.getDate() //获取当前日(1-31)
|
|
|
+ var day = myDate.getHours()
|
|
|
+ return day
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getNewPlan()
|
|
|
+ },
|
|
|
+ activated: function() {
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ if(typeof val != 'string'){
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
+ decimalsHandle(val){
|
|
|
+
|
|
|
+ if(val && typeof val !='string'){
|
|
|
+ if(val>=0){
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return handleResult+'.'+str[1]
|
|
|
+ }else{
|
|
|
+ val=parseFloat(val).toFixed(2);
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('.')
|
|
|
+
|
|
|
+ let str0=str[0].substr(1).split('').reverse();
|
|
|
+ for (let i = 0; i < str0.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str0.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str0.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str0.length; j++) {
|
|
|
+ handleResult += str0[j]
|
|
|
+ }
|
|
|
+
|
|
|
+ return '-'+handleResult+'.'+str[1]
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(typeof val =='string'){
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //变成货币格式
|
|
|
+ formatCurrency(val){
|
|
|
+ if(val){
|
|
|
+ let numberStr = val.toString()
|
|
|
+ let str = numberStr.split('').reverse()
|
|
|
+ for (let i = 0; i < str.length; i++) {
|
|
|
+ if ((i + 1) % 4 === 0) {
|
|
|
+ str.splice(i, 0, ',')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ str.reverse()
|
|
|
+ let handleResult = ''
|
|
|
+ for (let j = 0; j < str.length; j++) {
|
|
|
+ handleResult += str[j]
|
|
|
+ }
|
|
|
+ return handleResult
|
|
|
+ }else{
|
|
|
+ return val
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|