|
@@ -0,0 +1,989 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="vsummary">
|
|
|
|
+ <div class="xiangmuxuanze" >
|
|
|
|
+ <!-- <div> -->
|
|
|
|
+ <span>项目选择:</span>
|
|
|
|
+ <Treeselect :appId.sync="appId" request="1,3" style="display: inline-block;position: relative;top: 10px;"/>
|
|
|
|
+ <!-- </div> -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div class="timeDiv">
|
|
|
|
+ <div style='display:flex;align-items: center;'>
|
|
|
|
+ <span>时间范围:</span>
|
|
|
|
+ <span @click="opendate">
|
|
|
|
+ <DatePicker :openOptions='openOptions' :parentDate='dateValue' left='-100px'></DatePicker>
|
|
|
|
+ </span>
|
|
|
|
+ <!-- <a-range-picker
|
|
|
|
+ :disabled-date="disabledDate"
|
|
|
|
+ format="YYYY-MM-DD"
|
|
|
|
+ style="width: 250px;"
|
|
|
|
+ @change="dateChange"
|
|
|
|
+ v-model="dateRange"
|
|
|
|
+ />
|
|
|
|
+ <span v-show="daysFlag">共{{totalSelect}}天</span> -->
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <!-- <div>
|
|
|
|
+ <span>消耗:</span>
|
|
|
|
+ <a-input-number id="inputNumber" v-model="consumeValue" :min="0" @change="consumeOnChange" />
|
|
|
|
+
|
|
|
|
+ <span>视频ID:</span>
|
|
|
|
+ <a-input class="myinput" v-model="videoID" style="width:250px" />
|
|
|
|
+ </div> -->
|
|
|
|
+
|
|
|
|
+ <a-button type="primary" @click="searchRes">查询</a-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div style="margin:15px 0" class="btndiv">
|
|
|
|
+ <a-button type="primary" @click="customColumns">自定义列</a-button>
|
|
|
|
+ <a-button type="default" style="float:right" @click="exportExcel" id="mybtn" v-show="exportExcelIsOk">导出报表</a-button>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <a-modal v-model="visible" title="自定义列" on-ok="handleOk" width="65%">
|
|
|
|
+ <template slot="footer">
|
|
|
|
+ <a-button key="back" @click="handleCancel">取消</a-button>
|
|
|
|
+ <a-button key="submit" type="primary" :loading="loading" @click="handleOk">应用</a-button>
|
|
|
|
+ </template>
|
|
|
|
+ <!-- <a-input-search placeholder="输入要添加的列的名称" style="width: 40%" enter-button @search="onSearch" /> -->
|
|
|
|
+ <div class="zhuti">
|
|
|
|
+ <div class="addlist">
|
|
|
|
+ <p>可添加的列</p>
|
|
|
|
+ <div class="selectionList">
|
|
|
|
+ <!-- v-for="(item,index) in addColumns" :key="index" -->
|
|
|
|
+ <selectComponent
|
|
|
|
+ :showCol="listNum"
|
|
|
|
+ @getshowlist="getshowlist"
|
|
|
|
+ :fixedCol="columnsFixd"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="listNum">
|
|
|
|
+ <p>已选{{listNum.length}}列</p>
|
|
|
|
+ <a-button id="btn" type="link" @click="clearAllList">清空全部</a-button>
|
|
|
|
+ <ul class="selectlist">
|
|
|
|
+ <li v-for="(item,index) in listNum" :key="index">
|
|
|
|
+ <span v-if=" index <4">
|
|
|
|
+ <a-icon type="lock" />
|
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
|
|
+ </span>
|
|
|
|
+ <span v-else-if=" index >=4">
|
|
|
|
+ <a-icon type="menu" style="color:#ccc" />
|
|
|
|
+ <span class="listText">{{item.title}}</span>
|
|
|
|
+ <a-icon
|
|
|
|
+ type="close"
|
|
|
|
+ @click="deleteCol(item,index)"
|
|
|
|
+ id="closeStyle"
|
|
|
|
+ style="fontSize:12px;"
|
|
|
|
+ />
|
|
|
|
+ </span>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </a-modal>
|
|
|
|
+
|
|
|
|
+ <a-table
|
|
|
|
+ size="middle"
|
|
|
|
+ :columns="columns"
|
|
|
|
+ :dataSource="data"
|
|
|
|
+ bordered
|
|
|
|
+ id="outTable"
|
|
|
|
+ :pagination="ipagination"
|
|
|
|
+ :scroll="{ x: scrollX }"
|
|
|
|
+ :loading="loading"
|
|
|
|
+ ref="vSummaryTable"
|
|
|
|
+ :width="tableWidth"
|
|
|
|
+ @customHeaderCell="customHeaderCell(columns)"
|
|
|
|
+ @change="sort"
|
|
|
|
+ style="word-break: break-all;"
|
|
|
|
+ >
|
|
|
|
+ <div slot="videoU" slot-scope="test,records">
|
|
|
|
+ <img
|
|
|
|
+ :src="records.url"
|
|
|
|
+ alt
|
|
|
|
+ style="width:80px"
|
|
|
|
+ @click="openVideo(records.url)"
|
|
|
|
+ @load="loadShow"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span> -->
|
|
|
|
+ <span slot="cost" slot-scope="cost">{{ cost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="clickMaterial" slot-scope="clickMaterial">{{ clickMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="showMaterial" slot-scope="showMaterial">{{ showMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="convertMaterial" slot-scope="convertMaterial">{{ convertMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="play25FeedBreak" slot-scope="play25FeedBreak">{{ play25FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play50FeedBreak" slot-scope="play50FeedBreak">{{ play50FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play75FeedBreak" slot-scope="play75FeedBreak">{{ play75FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="play100FeedBreak" slot-scope="play100FeedBreak">{{ play100FeedBreak | formatCurrency }}</span>
|
|
|
|
+ <span slot="nextDayOpen" slot-scope="nextDayOpen">{{ nextDayOpen | formatCurrency }}</span>
|
|
|
|
+ <span slot="downloadFinish" slot-scope="downloadFinish">{{ downloadFinish | formatCurrency }}</span>
|
|
|
|
+ <span slot="downloadStart" slot-scope="downloadStart">{{ downloadStart | formatCurrency }}</span>
|
|
|
|
+ <span slot="likeMaterial" slot-scope="likeMaterial">{{ likeMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="shareMaterial" slot-scope="shareMaterial">{{ shareMaterial | formatCurrency }}</span>
|
|
|
|
+ <span slot="register" slot-scope="register">{{ register | formatCurrency }}</span>
|
|
|
|
+ <span slot="follow" slot-scope="follow">{{ follow | formatCurrency }}</span>
|
|
|
|
+ <span slot="form" slot-scope="form">{{ form | formatCurrency }}</span>
|
|
|
|
+ <span slot="active" slot-scope="active">{{ active | formatCurrency }}</span>
|
|
|
|
+ <span slot="activePayAmount" slot-scope="activePayAmount">{{ activePayAmount | formatCurrency }}</span>
|
|
|
|
+ <!-- <span
|
|
|
|
+ slot="play25FeedBreakRate"
|
|
|
|
+ slot-scope="play25FeedBreakRate"
|
|
|
|
+ >{{ play25FeedBreakRate | toPercentage }}</span>
|
|
|
|
+ <span slot="playOverRate" slot-scope="playOverRate">{{ playOverRate | toPercentage }}</span> -->
|
|
|
|
+ <!-- 新加数据 -->
|
|
|
|
+ <!-- <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
|
|
|
|
+ <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span>
|
|
|
|
+ <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</span> -->
|
|
|
|
+ <span slot="cpc" slot-scope="cpc">{{ cpc | decimalsHandle }}</span>
|
|
|
|
+ <span slot="cpm" slot-scope="cpm">{{ cpm | decimalsHandle }}</span>
|
|
|
|
+ <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
|
|
|
|
+ <!-- <span
|
|
|
|
+ slot="installFinishRate"
|
|
|
|
+ slot-scope="installFinishRate"
|
|
|
|
+ >{{ installFinishRate | toPercentage }}</span>
|
|
|
|
+ <span slot="validPlayRate" slot-scope="validPlayRate">{{ validPlayRate | toPercentage }}</span> -->
|
|
|
|
+ <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="activeCost" slot-scope="activeCost">{{ activeCost | decimalsHandle }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="gameAddictionCost"
|
|
|
|
+ slot-scope="gameAddictionCost"
|
|
|
|
+ >{{ gameAddictionCost | decimalsHandle }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="downloadFinishCost"
|
|
|
|
+ slot-scope="downloadFinishCost"
|
|
|
|
+ >{{ downloadFinishCost | decimalsHandle }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="downloadStartCost"
|
|
|
|
+ slot-scope="downloadStartCost"
|
|
|
|
+ >{{ downloadStartCost | decimalsHandle }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="installFinishCost"
|
|
|
|
+ slot-scope="installFinishCost"
|
|
|
|
+ >{{ installFinishCost | decimalsHandle }}</span>
|
|
|
|
+ <span slot="convertCost" slot-scope="convertCost">{{ convertCost | decimalsHandle }}</span>
|
|
|
|
+
|
|
|
|
+ <!-- -->
|
|
|
|
+ <!-- <span
|
|
|
|
+ slot="downloadStartRate"
|
|
|
|
+ slot-scope="downloadStartRate"
|
|
|
|
+ >{{ downloadStartRate | toPercentage }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="downloadFinishRate"
|
|
|
|
+ slot-scope="downloadFinishRate"
|
|
|
|
+ >{{ downloadFinishRate | toPercentage }}</span>
|
|
|
|
+ <span slot="activeRate" slot-scope="activeRate">{{ activeRate | toPercentage }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="activeRegisterRate"
|
|
|
|
+ slot-scope="activeRegisterRate"
|
|
|
|
+ >{{ activeRegisterRate | toPercentage }}</span>
|
|
|
|
+ <span
|
|
|
|
+ slot="gameAddictionRate"
|
|
|
|
+ slot-scope="gameAddictionRate"
|
|
|
|
+ >{{ gameAddictionRate | toPercentage }}</span>
|
|
|
|
+ <span slot="nextDayOpenRate" slot-scope="nextDayOpenRate">{{ nextDayOpenRate | toPercentage }}</span> -->
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <span slot="operation" slot-scope="text,record">
|
|
|
|
+ <a href="javascript:;" @click.stop="showRelevantPeople(record)">查看相关人员</a>
|
|
|
|
+ </span>
|
|
|
|
+
|
|
|
|
+ </a-table>
|
|
|
|
+ <a-modal v-model="relevantPeopleVisible" title="相关人员" :footer="null" :centered='true'>
|
|
|
|
+ <p>编导:{{relevantPeopleData.planName || '暂无数据'}}</p>
|
|
|
|
+ <p>剪辑:{{relevantPeopleData.clipName || '暂无数据'}}</p>
|
|
|
|
+ <p>拍摄:{{relevantPeopleData.shotName || '暂无数据'}}</p>
|
|
|
|
+ </a-modal>
|
|
|
|
+ <a-modal v-model="Videovisible" title="视频详情" @ok="videoOk" :footer="null" width="50%">
|
|
|
|
+ <video
|
|
|
|
+ @click.stop
|
|
|
|
+ class="video"
|
|
|
|
+ :src="videoUrl"
|
|
|
|
+ controls="controls"
|
|
|
|
+ style="height:600px;width:100%"
|
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
|
+ </a-modal>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+import moment from 'moment'
|
|
|
|
+// import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
|
+import selectComponent from './selectComponent'
|
|
|
|
+import Treeselect from '../components/Treeselect'
|
|
|
|
+import DatePicker from '@/components/DatePicker'
|
|
|
|
+const columnsFixd = [
|
|
|
|
+ {
|
|
|
|
+ title: '视频',
|
|
|
|
+ dataIndex: 'videoU',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 100,
|
|
|
|
+ fixed: 'left',
|
|
|
|
+ key: 'videoU',
|
|
|
|
+ scopedSlots: { customRender: 'videoU' }
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '视频名称',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 120,
|
|
|
|
+ fixed: 'left'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '项目名称',
|
|
|
|
+ dataIndex: 'projectName',
|
|
|
|
+ align: 'center',
|
|
|
|
+ width: 100,
|
|
|
|
+ fixed: 'left'
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title:'相关人员',
|
|
|
|
+ dataIndex:'operation',
|
|
|
|
+ key:'operation',
|
|
|
|
+ scopedSlots: { customRender: 'operation' },
|
|
|
|
+ align: 'center',
|
|
|
|
+ width:100,
|
|
|
|
+ fixed: 'left'
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+let variableCol = [
|
|
|
|
+ {
|
|
|
|
+ title: '上传时间',
|
|
|
|
+ dataIndex: 'createTime',
|
|
|
|
+ scopedSlots: { customRender: 'createTime' },
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '消耗',
|
|
|
|
+ dataIndex: 'cost',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
|
+ align: 'center',
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击数',
|
|
|
|
+ dataIndex: 'clickMaterial',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'clickMaterial' },
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ // (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '点击率',
|
|
|
|
+ dataIndex: 'ctr',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'ctr' },
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '展示数',
|
|
|
|
+ dataIndex: 'showMaterial',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'showMaterial' },
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ title: '转化数',
|
|
|
|
+ dataIndex: 'convertMaterial',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'convertMaterial' },
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '转化率',
|
|
|
|
+ dataIndex: 'convertRate',
|
|
|
|
+ align: 'center',
|
|
|
|
+
|
|
|
|
+ scopedSlots: { customRender: 'convertRate' },
|
|
|
|
+ sorter: () => {}
|
|
|
|
+ }
|
|
|
|
+]
|
|
|
|
+let show = 0
|
|
|
|
+
|
|
|
|
+export default {
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ target:'cost',
|
|
|
|
+ order:'desc',
|
|
|
|
+ type:0,
|
|
|
|
+ dateValue:[moment(),moment()],
|
|
|
|
+ openOptions:false,
|
|
|
|
+ relevantPeopleVisible:false,
|
|
|
|
+ relevantPeopleData:{},
|
|
|
|
+ roleCode: localStorage.getItem('roleCode'),
|
|
|
|
+ //下拉选择框的数据
|
|
|
|
+ projectArr:[],
|
|
|
|
+ selectValue:'',
|
|
|
|
+ appId:[],
|
|
|
|
+ //设置表格的列宽
|
|
|
|
+ tableWidth: '',
|
|
|
|
+
|
|
|
|
+ //gudinglie
|
|
|
|
+ columnsFixd: columnsFixd,
|
|
|
|
+
|
|
|
|
+ //是否打开视频
|
|
|
|
+ Videovisible: false,
|
|
|
|
+ videoUrl: '',
|
|
|
|
+
|
|
|
|
+ //是否显示导出按钮
|
|
|
|
+ exportExcelIsOk: true,
|
|
|
|
+ consumeValue: 0,
|
|
|
|
+
|
|
|
|
+ columns: [...columnsFixd, ...variableCol],
|
|
|
|
+ addColumns: [],
|
|
|
|
+ data: [],
|
|
|
|
+ totalSelect: 0,
|
|
|
|
+ daysFlag: false,
|
|
|
|
+ dateRange: [],
|
|
|
|
+ dataElse: [],
|
|
|
|
+ loading: false,
|
|
|
|
+ visible: false,
|
|
|
|
+ //自定义列的搜索框
|
|
|
|
+ searchInput: '',
|
|
|
|
+ //弹出框中现实的选中列数
|
|
|
|
+ scrollX: 0,
|
|
|
|
+ listNum: [],
|
|
|
|
+ //
|
|
|
|
+ form: [],
|
|
|
|
+ videoID: '',
|
|
|
|
+ timedata: [],
|
|
|
|
+ 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;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // mixins: [JeecgListMixin],
|
|
|
|
+ components: {
|
|
|
|
+ selectComponent,
|
|
|
|
+ Treeselect,
|
|
|
|
+ DatePicker
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ // 日期的开关
|
|
|
|
+ //打开日期框
|
|
|
|
+ opendate(){
|
|
|
|
+ this.openOptions=!this.openOptions;
|
|
|
|
+ // console.log(this.openOptions)
|
|
|
|
+ },
|
|
|
|
+ opendateClose(){
|
|
|
|
+ this.openOptions=false;
|
|
|
|
+ // console.log(this.openOptions)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 查看相关人员
|
|
|
|
+ showRelevantPeople(record){
|
|
|
|
+ this.relevantPeopleVisible=true;
|
|
|
|
+ console.log(record)
|
|
|
|
+ getAction('/ctop/materialAscription/getDetail',{
|
|
|
|
+ code:record.signature
|
|
|
|
+ }).then(res=>{
|
|
|
|
+ console.log(res);
|
|
|
|
+ if(res.result&&res.success){
|
|
|
|
+ this.relevantPeopleData=res.result
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ sort(pagination, filters, sorter, { currentDataSource }){
|
|
|
|
+ console.log(pagination, filters, sorter)
|
|
|
|
+ this.ipagination.current=pagination.current;
|
|
|
|
+ this.ipagination.pageSize=pagination.pageSize
|
|
|
|
+ if(sorter.order == 'ascend'){
|
|
|
|
+ this.order='asc'
|
|
|
|
+ this.target=sorter.columnKey;
|
|
|
|
+ }else if(sorter.order == 'descend'){
|
|
|
|
+ this.order='desc'
|
|
|
|
+ this.target=sorter.columnKey;
|
|
|
|
+ }else{
|
|
|
|
+ this.target='cost',
|
|
|
|
+ this.order='desc'
|
|
|
|
+ }
|
|
|
|
+ this.tableHttp();
|
|
|
|
+ },
|
|
|
|
+ moment,
|
|
|
|
+ //select切换---项目
|
|
|
|
+ selectChange(key){
|
|
|
|
+ this.selectValue=key;
|
|
|
|
+ },
|
|
|
|
+ //打开视频
|
|
|
|
+ openVideo(val) {
|
|
|
|
+ this.Videovisible = true
|
|
|
|
+ this.videoUrl = val
|
|
|
|
+ },
|
|
|
|
+ videoOk() {
|
|
|
|
+ this.Videovisible = false
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ disabledDate(current) {
|
|
|
|
+ // console.log(current)
|
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ consumeOnChange() {},
|
|
|
|
+ //查询按钮
|
|
|
|
+ searchRes() {
|
|
|
|
+ this.date = []
|
|
|
|
+
|
|
|
|
+ this.HttpPost()
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+ //网络请求table数据函数
|
|
|
|
+ HttpPost(){
|
|
|
|
+ this.loading=true;
|
|
|
|
+ show = 0
|
|
|
|
+ postAction('/ctop/byteDance/videoReport/list', {
|
|
|
|
+ startDate: this.dateValue[0].format('YYYY-MM-DD'),
|
|
|
|
+ endDate: this.dateValue[1].format('YYYY-MM-DD'),
|
|
|
|
+ pageNo:this.ipagination.current,
|
|
|
|
+ pageSize:this.ipagination.pageSize,
|
|
|
|
+ accountIds:this.appId,
|
|
|
|
+ target:this.target,
|
|
|
|
+ order:this.order,
|
|
|
|
+ }).then(res => {
|
|
|
|
+ let resArr = []
|
|
|
|
+ this.loading = false
|
|
|
|
+ if (res.success) {
|
|
|
|
+
|
|
|
|
+ this.data = res.result.list.map((item,index)=>{
|
|
|
|
+ return {
|
|
|
|
+ ...item,
|
|
|
|
+ key:index
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.ipagination.total = res.result.total
|
|
|
|
+ this.loading = false
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ //导出报表
|
|
|
|
+ exportExcel() {
|
|
|
|
+ // var params = {}
|
|
|
|
+ // params.projectId = this.projectId
|
|
|
|
+ // params.disCount = this.discount
|
|
|
|
+ // params.statDate = this.statDate.format('YYYY-MM-DD')
|
|
|
|
+ // var name = this.dataElse.filter(item => {
|
|
|
|
+ // return item.projectId == this.projectId
|
|
|
|
+ // })[0].projectName
|
|
|
|
+ // downFilePost('/ctop/yiche/report/exportDailyReport', params).then(res => {
|
|
|
|
+ // let blob = new Blob([res], {
|
|
|
|
+ // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
|
|
|
+ let column = this.columns.map((item, index) => {
|
|
|
|
+ return item.dataIndex
|
|
|
|
+ })
|
|
|
|
+ let columns=['url',...column]
|
|
|
|
+
|
|
|
|
+ downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListTotalExportExcel', {
|
|
|
|
+ columns,
|
|
|
|
+ signature: this.videoID,
|
|
|
|
+ startDate: this.timedata[0],
|
|
|
|
+ endDate: this.timedata[1],
|
|
|
|
+ cost: this.consumeValue,
|
|
|
|
+ accountIds:this.appId,
|
|
|
|
+ }).then(res => {
|
|
|
|
+ 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 = this.statDate.format('YYYY-MM-DD') + '视频汇总.xlsx' //下载后文件名
|
|
|
|
+ document.body.appendChild(downloadElement)
|
|
|
|
+ downloadElement.click() //点击下载
|
|
|
|
+ document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
|
+ window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //日期选择回调
|
|
|
|
+ dateChange(data, dataString) {
|
|
|
|
+ if (data.length) {
|
|
|
|
+ this.timedata = dataString
|
|
|
|
+ this.dateRange[0] = data[0]
|
|
|
|
+ this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
|
|
|
|
+ this.daysFlag = true
|
|
|
|
+ if (this.totalSelect > 92) {
|
|
|
|
+ this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
|
+ this.daysFlag = false
|
|
|
|
+ this.dateRange = []
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ this.daysFlag = false
|
|
|
|
+ this.dateRange = []
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //弹出框打开,自定义列
|
|
|
|
+ customColumns() {
|
|
|
|
+ this.visible = true
|
|
|
|
+ this.listNum = [...this.columns]
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //设置头部单元格属性
|
|
|
|
+ customHeaderCell(columns) {
|
|
|
|
+ // console.log(columns)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ tableHandle() {
|
|
|
|
+ // this.listNum = [...this.columns]
|
|
|
|
+ // console.log(this.listNum.length, this.columns)
|
|
|
|
+
|
|
|
|
+ if (this.listNum.length >= 9 || this.columns.length >= 9) {
|
|
|
|
+ this.tableWidth = 120
|
|
|
|
+ this.scrollX = this.columns.length * 120
|
|
|
|
+ // console.log(this.scrollX)
|
|
|
|
+ } else {
|
|
|
|
+ this.scrollX = 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //弹出框确定
|
|
|
|
+ handleOk(e) {
|
|
|
|
+ this.loading = false
|
|
|
|
+
|
|
|
|
+ this.visible = false
|
|
|
|
+
|
|
|
|
+ if (this.listNum.length >= 10) {
|
|
|
|
+ let newlist = this.listNum.slice(columnsFixd.length)
|
|
|
|
+ console.log(newlist)
|
|
|
|
+ this.columns = [...columnsFixd, ...newlist]
|
|
|
|
+ } else {
|
|
|
|
+ this.columns = [...this.listNum]
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ if (this.listNum.length == 4) {
|
|
|
|
+ // console.log(this.listNum.length)
|
|
|
|
+ this.scrollX = 0
|
|
|
|
+ this.columns.map((item, index) => {
|
|
|
|
+ item.width = 500
|
|
|
|
+ })
|
|
|
|
+ // console.log(1)
|
|
|
|
+ } else {
|
|
|
|
+ this.columns.map((item, index) => {
|
|
|
|
+ if (index == 2 || index == 0) {
|
|
|
|
+ item.width = 150
|
|
|
|
+ } else if (index == 1 || index == 2) {
|
|
|
|
+ item.width = 100
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // console.log(2)
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.tableHandle()
|
|
|
|
+ },
|
|
|
|
+ //弹出框取消按钮
|
|
|
|
+ handleCancel(e) {
|
|
|
|
+ this.visible = false
|
|
|
|
+ },
|
|
|
|
+ loadShow(){
|
|
|
|
+ show++
|
|
|
|
+ if(this.data.length>0){
|
|
|
|
+ if(show == (this.data.length*2)){
|
|
|
|
+ this.data = [...this.data]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //弹出框里的搜索框
|
|
|
|
+ onSearch(value) {
|
|
|
|
+ console.log(value)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //清空全部按钮的事件
|
|
|
|
+ clearAllList() {
|
|
|
|
+ this.listNum = [...columnsFixd]
|
|
|
|
+ console.log(this.$refs.vSummaryTable)
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //li展示里的关闭按钮 删除当前被选中的这一个列
|
|
|
|
+ deleteCol(item, index) {
|
|
|
|
+ this.listNum = this.listNum.filter((item1, num) => {
|
|
|
|
+ return num != index
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ //从自定义列拿选择的项
|
|
|
|
+ getshowlist(val) {
|
|
|
|
+ var arr = []
|
|
|
|
+
|
|
|
|
+ // console.log(val)
|
|
|
|
+ if (val.length) {
|
|
|
|
+ if (val.flag) {
|
|
|
|
+ let newArr = val.arr
|
|
|
|
+ newVal.map((item, index) => {
|
|
|
|
+ // if(JSON.stringify(this.listNum).indexOf(JSON.stringify(item))==-1){
|
|
|
|
+ // this.listNum.push(item); // 进行动态的操作
|
|
|
|
+ // }
|
|
|
|
+ var result = this.listNum.some(items => {
|
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // console.log(result)
|
|
|
|
+ if (result) {
|
|
|
|
+ newArr.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ this.listNum = [...this.listNum, ...newArr]
|
|
|
|
+ } else {
|
|
|
|
+ //取消全选 清楚listNum中的val里的值
|
|
|
|
+ val.arr.map((item, index) => {
|
|
|
|
+ var result = this.listNum.some(items => {
|
|
|
|
+ if (items.dataIndex == item.dataIndex) {
|
|
|
|
+ return true
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ // console.log(result)
|
|
|
|
+ if (result) {
|
|
|
|
+ this.listNum.splice(index, 1)
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ arr = this.listNum.filter((item, index) => {
|
|
|
|
+ return item.dataIndex == val.dataIndex
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ if (arr.length) {
|
|
|
|
+ var index
|
|
|
|
+ this.listNum.map((item, ind) => {
|
|
|
|
+ if (item.dataIndex == val.dataIndex) {
|
|
|
|
+ index = ind
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ console.log(index)
|
|
|
|
+ this.listNum.splice(index, 1)
|
|
|
|
+ } else {
|
|
|
|
+ this.listNum.push(val)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // watch:{
|
|
|
|
+ // 'ipagination.current':function(n,o){
|
|
|
|
+ // console.log(n,o)
|
|
|
|
+ // this.HttpPost()
|
|
|
|
+ // }
|
|
|
|
+ // },
|
|
|
|
+ activated() {
|
|
|
|
+ console.log('activated')
|
|
|
|
+ // this.getParticipateList()
|
|
|
|
+ this.statDate = moment().subtract(1, 'day')
|
|
|
|
+
|
|
|
|
+ moment().format('YYYY-MM-DD_HH:mm')
|
|
|
|
+
|
|
|
|
+ postAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
|
+ columnType: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ // console.log(JSON.parse(res.result))
|
|
|
|
+ if(res.result){
|
|
|
|
+ let columns = JSON.parse(res.result)
|
|
|
|
+ if (columns.length) {
|
|
|
|
+ if (columns.length >= columnsFixd.length) {
|
|
|
|
+ columns.map((item, index) => {
|
|
|
|
+ if (index > columnsFixd.length - 1) {
|
|
|
|
+ item.sorter = function(a, b) {
|
|
|
|
+ return a[item.dataIndex] - b[item.dataIndex]
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ columns = columns.slice(columnsFixd.length)
|
|
|
|
+ this.columns = [...columnsFixd, ...columns]
|
|
|
|
+ this.tableHandle()
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // console.log(this.columns)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.tableHandle();
|
|
|
|
+ },
|
|
|
|
+ deactivated() {
|
|
|
|
+ let arr = JSON.stringify(this.columns)
|
|
|
|
+ // console.log(arr)
|
|
|
|
+ postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
|
|
+ json: arr,
|
|
|
|
+ columnType: 1
|
|
|
|
+ }).then(res => {
|
|
|
|
+ // console.log(res)
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ filters: {
|
|
|
|
+
|
|
|
|
+ toshowTime(val) {
|
|
|
|
+ // console.log(val, this.timedata)
|
|
|
|
+ // return this.timedata[0] + '~' + this.timedata[1]
|
|
|
|
+ return val
|
|
|
|
+ },
|
|
|
|
+ toPercentage(val) {
|
|
|
|
+ if(val){
|
|
|
|
+ if(typeof val != 'string'){
|
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
|
+ }else{
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+ }else if(typeof val =='string'){
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ return 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //保留两位小数并且变成货币格式
|
|
|
|
+ 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||val==0)&& typeof val !='string'){
|
|
|
|
+ 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 if(typeof val =='string'){
|
|
|
|
+ return val
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ return '-'
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ mounted() {
|
|
|
|
+ this.columns = [...columnsFixd, ...variableCol]
|
|
|
|
+ // console.log('mounted')
|
|
|
|
+ //请求自定义列的数据
|
|
|
|
+ postAction('/toutiao/videoReportDaily/videoInfoListTotalExportExcelPermission').then(res => {
|
|
|
|
+ console.log(res)
|
|
|
|
+ if (res.success) {
|
|
|
|
+ if (res.result) {
|
|
|
|
+ this.exportExcelIsOk = true
|
|
|
|
+ } else {
|
|
|
|
+ this.exportExcelIsOk = false
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ //进入页面默认展示昨天到今天的数据
|
|
|
|
+ this.dateRange=[moment().subtract(7,'days'),moment()]
|
|
|
|
+ this.timedata=[moment().subtract(7,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
|
|
|
|
+ // this.loading=true;
|
|
|
|
+
|
|
|
|
+ this.HttpPost()
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style lang="less">
|
|
|
|
+// .ant-table .ant-table-fixed-left .ant-table-thead {
|
|
|
|
+// height: 108px !important ;
|
|
|
|
+// }
|
|
|
|
+.vsummary{
|
|
|
|
+ .ant-table .ant-table-thead .ant-table-header-column .ant-table-column-title {
|
|
|
|
+ // display:block;
|
|
|
|
+ white-space: normal;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+</style>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.vsummary {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background: white;
|
|
|
|
+ padding: 15px 30px;
|
|
|
|
+}
|
|
|
|
+.xiangmuxuanze{
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+}
|
|
|
|
+.timeDiv {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+}
|
|
|
|
+span {
|
|
|
|
+ margin-left: 5px;
|
|
|
|
+}
|
|
|
|
+.myinput {
|
|
|
|
+ width: 40%;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.addlist {
|
|
|
|
+ float: left;
|
|
|
|
+ width: 70%;
|
|
|
|
+ border: 1px solid #eee;
|
|
|
|
+ .selectionList {
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+ height: 450px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+ .leibie {
|
|
|
|
+ .leiName {
|
|
|
|
+ font-size: 26px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .jutixiang {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ width: 32%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ padding: 10px 3px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.listNum {
|
|
|
|
+ float: right;
|
|
|
|
+ width: 28%;
|
|
|
|
+ border: 1px solid #eee;
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+.zhuti {
|
|
|
|
+ margin-top: 15px;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+
|
|
|
|
+ p {
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ padding: 10px 15px;
|
|
|
|
+
|
|
|
|
+ background: rgb(249, 250, 253);
|
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
|
+ }
|
|
|
|
+ #btn {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: 0;
|
|
|
|
+ top: 5px;
|
|
|
|
+ }
|
|
|
|
+ .selectlist {
|
|
|
|
+ width: 100%;
|
|
|
|
+ list-style: none;
|
|
|
|
+ margin: 0;
|
|
|
|
+ height: 450px;
|
|
|
|
+ padding: 0 15px 10px;
|
|
|
|
+ overflow: auto;
|
|
|
|
+
|
|
|
|
+ li {
|
|
|
|
+ width: 100%;
|
|
|
|
+ padding: 5px 8px;
|
|
|
|
+ margin: 6px 0;
|
|
|
|
+ border-radius: 10px;
|
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
|
+ height: 32px;
|
|
|
|
+ position: relative;
|
|
|
|
+ span {
|
|
|
|
+ width: 80%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ margin: 0 10px;
|
|
|
|
+ // overflow:hidden;
|
|
|
|
+ // text-overflow:ellipsis;
|
|
|
|
+ // white-space: nowrap;
|
|
|
|
+ }
|
|
|
|
+ .listText {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 2;
|
|
|
|
+ left: 10;
|
|
|
|
+ width: 40%;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ }
|
|
|
|
+ #closeStyle {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 9px;
|
|
|
|
+ right: 7px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|