|
@@ -0,0 +1,467 @@
|
|
|
+<template>
|
|
|
+ <div class="vsummary">
|
|
|
+ <div class="timeDiv">
|
|
|
+ <div>
|
|
|
+ <span>时间范围:</span>
|
|
|
+ <a-button type='default' @click="yesterdayHandle">昨日</a-button>
|
|
|
+ <a-range-picker
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ style="width: 200px;"
|
|
|
+ @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'/>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <a-button type="primary" @click="searchRes">查询</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 />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="listNum">
|
|
|
+ <p>已选{{columns.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>{{item.title}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else-if=" index >3">
|
|
|
+ <a-icon type="menu" style="color:#ccc" />
|
|
|
+ <span>{{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"
|
|
|
+ >
|
|
|
+ </a-table>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import moment from 'moment'
|
|
|
+import { JeecgListMixin } from '@/mixins/ipagination'
|
|
|
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
+import selectComponent from './selectComponent'
|
|
|
+
|
|
|
+const columnsFixd = [
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频',
|
|
|
+ dataIndex: 'video',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频ID',
|
|
|
+ dataIndex: 'signature',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频链接',
|
|
|
+ dataIndex: 'videoUrl',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '视频描述',
|
|
|
+ dataIndex: 'videoDes',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ }
|
|
|
+]
|
|
|
+let variableCol = [
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center',
|
|
|
+ sorter: (a, b) => a.cost - b.cost,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击数',
|
|
|
+ dataIndex: 'click',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'click' },
|
|
|
+ sorter: (a, b) => a.click - b.click,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击率',
|
|
|
+ dataIndex: 'ctr',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'ctr' },
|
|
|
+ sorter: (a, b) => a.ctr - b.ctr,
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '展示数',
|
|
|
+ dataIndex: 'showMaterial',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'showMaterial' },
|
|
|
+ sorter: (a, b) => a.showMaterial - b.showMaterial,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '25%进度播放率',
|
|
|
+ dataIndex: 'play25FeedBreakRate',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'play25FeedBreakRate' },
|
|
|
+ sorter: (a, b) => a.play25FeedBreakRate - b.play25FeedBreakRate,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '整体完播率',
|
|
|
+ dataIndex: 'playOverRate',
|
|
|
+ align: 'center',
|
|
|
+ tip: '表示广告在投放期内的预估花费金额。当天数据可能会有波动,次日稳定',
|
|
|
+ scopedSlots: { customRender: 'playOverRate' },
|
|
|
+
|
|
|
+ sorter: (a, b) => a.playOverRate - b.playOverRate,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转化数',
|
|
|
+ dataIndex: 'convertMaterial',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'convertMaterial' },
|
|
|
+ sorter: (a, b) => a.convertMaterial - b.convertMaterial,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '转化率',
|
|
|
+ dataIndex: 'convertRate',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'convertRate' },
|
|
|
+ sorter: (a, b) => a.convertRate - b.convertRate,
|
|
|
+ },
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //消耗的值
|
|
|
+ consumeValue: 1000,
|
|
|
+ //视频ID
|
|
|
+ videoID:'',
|
|
|
+ columns: [...columnsFixd, ...variableCol],
|
|
|
+ addColumns:[],
|
|
|
+ data: [],
|
|
|
+ //右侧显示供选择几天
|
|
|
+ totalSelect: 0,
|
|
|
+ //是否显示共选几天的提示
|
|
|
+ daysFlag: false,
|
|
|
+ //日期选择器显示的日期范围
|
|
|
+ dateRange: [],
|
|
|
+ dataElse: [],
|
|
|
+ loading: false,
|
|
|
+ visible: false,
|
|
|
+ //自定义列的搜索框
|
|
|
+ searchInput: '',
|
|
|
+ //弹出框中现实的选中列数
|
|
|
+ scrollX: 0,
|
|
|
+ listNum: [],
|
|
|
+
|
|
|
+ //
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ selectComponent
|
|
|
+ },
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ disabledDate(current) {
|
|
|
+ // console.log(current)
|
|
|
+
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+
|
|
|
+ consumeOnChange() {},
|
|
|
+
|
|
|
+ //点击时间的 昨日 按钮
|
|
|
+ yesterdayHandle(){
|
|
|
+ this.dateRange=[moment().subtract(1, 'days').format("YYYY-MM-DD"),moment().subtract(1, 'days').format("YYYY-MM-DD")];
|
|
|
+ console.log(this.dateRange);
|
|
|
+ this.totalSelect=1;
|
|
|
+ this.daysFlag = true
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //查询按钮
|
|
|
+ searchRes() {},
|
|
|
+
|
|
|
+ //导出报表
|
|
|
+ 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.ms-excel'
|
|
|
+ })
|
|
|
+ let downloadElement = document.createElement('a')
|
|
|
+ let href = window.URL.createObjectURL(blob) //创建下载的链接
|
|
|
+ downloadElement.href = href
|
|
|
+ downloadElement.download = name + '-' + this.statDate.format('YYYY-MM-DD') + '-日报' //下载后文件名
|
|
|
+ document.body.appendChild(downloadElement)
|
|
|
+ downloadElement.click() //点击下载
|
|
|
+ document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //日期选择回调
|
|
|
+ dateChange(data, dataString) {
|
|
|
+
|
|
|
+ if(data.length>0){
|
|
|
+ console.log(data[1]._d - data[0]._d, dataString)
|
|
|
+ this.dateRange[0] = data[0]
|
|
|
+ this.totalSelect = (data[1]._d - data[0]._d) / (24 * 60 * 60 * 1000) + 1
|
|
|
+ this.daysFlag = true
|
|
|
+ }else{
|
|
|
+ this.daysFlag=false;
|
|
|
+ this.dateRange = []
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if (this.totalSelect > 92) {
|
|
|
+ this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
+ this.daysFlag = false
|
|
|
+ this.dateRange = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //弹出框打开,自定义列
|
|
|
+ customColumns() {
|
|
|
+ this.visible = true
|
|
|
+ this.listNum = this.columns
|
|
|
+
|
|
|
+ },
|
|
|
+ //弹出框确定
|
|
|
+ handleOk(e) {
|
|
|
+ this.loading = false
|
|
|
+ this.columns = this.listNum
|
|
|
+ this.visible = false
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.visible = false;
|
|
|
+ // this.loading = false;
|
|
|
+ // }, 1000);
|
|
|
+ if (this.listNum.length > 12) {
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 500
|
|
|
+ console.log(this.$refs.vSummaryTable)
|
|
|
+ } else {
|
|
|
+ this.scrollX = 0
|
|
|
+ }
|
|
|
+ // console.log(this.columns.length)
|
|
|
+ if (this.columns.length == 4) {
|
|
|
+ // console.log(this.listNum.length)
|
|
|
+ this.columns.map((item, index) => {
|
|
|
+ item.width = 500
|
|
|
+ })
|
|
|
+ // console.log(1)
|
|
|
+ } else {
|
|
|
+ this.columns.map((item, index) => {
|
|
|
+ if (index ==1) {
|
|
|
+ item.width = 150
|
|
|
+ } else if (index > 2 && index < 4 && index==0) {
|
|
|
+ item.width = 100
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // console.log(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //弹出框取消按钮
|
|
|
+ handleCancel(e) {
|
|
|
+ this.visible = false
|
|
|
+ },
|
|
|
+ //弹出框里的搜索框
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ // this.getParticipateList()
|
|
|
+ this.statDate = moment().subtract(1, 'day')
|
|
|
+ moment().format('YYYY-MM-DD_HH:mm')
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDaily', {
|
|
|
+ date:'2020-05-01',
|
|
|
+
|
|
|
+ }).then((res)=>{
|
|
|
+ let resArr=[];
|
|
|
+
|
|
|
+ console.log(res);
|
|
|
+ if(res.success){
|
|
|
+ let result=res.result
|
|
|
+ this.data.push({ ...result, key: 1 })
|
|
|
+ result.map((item,index)=>{
|
|
|
+ item.key=index
|
|
|
+ })
|
|
|
+ this.data=result
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.vsummary {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ list-style: none;
|
|
|
+ margin: 0;
|
|
|
+ height: 450px;
|
|
|
+ padding: 0 15px 10px;
|
|
|
+ overflow: auto;
|
|
|
+ li {
|
|
|
+ padding: 5px 8px;
|
|
|
+ margin: 6px 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgb(248, 248, 248);
|
|
|
+ position: relative;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ #closeStyle {
|
|
|
+ position: absolute;
|
|
|
+ top: 9px;
|
|
|
+ right: 7px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|