|
@@ -0,0 +1,769 @@
|
|
|
+<template>
|
|
|
+ <div class="vsummary">
|
|
|
+ <div class="timeDiv">
|
|
|
+ <div>
|
|
|
+ <span>时间范围:</span>
|
|
|
+ <a-button type="default" @click="lastWeekHandle">过去一月</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>
|
|
|
+
|
|
|
+ <div style="display:flex;margin-bottom:15px" class="btndiv">
|
|
|
+ <a-button type="primary" @click="customColumns">自定义列</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" />
|
|
|
+ </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 <6">
|
|
|
+ <a-icon type="lock" />
|
|
|
+ <span>{{item.title}}</span>
|
|
|
+ </span>
|
|
|
+ <span v-else-if=" index >5">
|
|
|
+ <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"
|
|
|
+ tableLayout="auto"
|
|
|
+ ref="vSummaryTable"
|
|
|
+ >
|
|
|
+
|
|
|
+
|
|
|
+ <span slot="operation" slot-scope="text, record">
|
|
|
+ <a href="javascript:;" @click="opendetail(text, record)">查看明细</a>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <div slot="videoU" slot-scope="test,records">
|
|
|
+ <video
|
|
|
+ @click.stop
|
|
|
+ class="video"
|
|
|
+ :src="records.url"
|
|
|
+ controls="controls"
|
|
|
+ style="height:200px;width:112.5px"
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
+ </div>
|
|
|
+ <span slot="ctr" slot-scope="ctr">{{ ctr | toPercentage }}</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="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="statDatetime" slot-scope="">{{ timedata[0]+'~'+timedata[1]}}</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="cpm" slot-scope="cpm">{{ cpm | toPercentage }}</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 | tofixed }}</span>
|
|
|
+ <span slot="activePayCost" slot-scope="activePayCost">{{ activePayCost | tofixed }}</span>
|
|
|
+ <span slot="nextDayOpenCost" slot-scope="nextDayOpenCost">{{ nextDayOpenCost | tofixed }}</span>
|
|
|
+ <span slot="validPlayCost" slot-scope="validPlayCost">{{ validPlayCost | tofixed }}</span>
|
|
|
+ <span slot="activeCost" slot-scope="activeCost">{{ activeCost | tofixed }}</span>
|
|
|
+ <span slot="gameAddictionCost" slot-scope="gameAddictionCost">{{ gameAddictionCost | tofixed }}</span>
|
|
|
+ <span slot="downloadFinishCost" slot-scope="downloadFinishCost">{{ downloadFinishCost | tofixed }}</span>
|
|
|
+ <span slot="downloadStartCost" slot-scope="downloadStartCost">{{ downloadStartCost | tofixed }}</span>
|
|
|
+ <span slot="installFinishCost" slot-scope="installFinishCost">{{ installFinishCost | tofixed }}</span>
|
|
|
+ </a-table>
|
|
|
+ <!-- 明细表 -->
|
|
|
+
|
|
|
+ <a-modal v-model="visibleDetail" title="详细信息" width="60%" :footer="null" >
|
|
|
+ <a-button type="default" @click="exportExcel" id="mybtn">导出报表</a-button>
|
|
|
+ <a-table
|
|
|
+ :columns="detailConsum"
|
|
|
+ :data-source="detailData"
|
|
|
+ bordered
|
|
|
+ tableLayout="auto"
|
|
|
+ :pagination="false"
|
|
|
+ >
|
|
|
+ <span slot="huanbi" slot-scope="huanbi">{{ huanbi | toPercentage }}</span>
|
|
|
+
|
|
|
+ </a-table>
|
|
|
+ </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'
|
|
|
+const columnsFixd = [
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
+ align: 'center',
|
|
|
+ width: 120,
|
|
|
+ fixed: 'left',
|
|
|
+ scopedSlots: { customRender: 'statDatetime' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频',
|
|
|
+ dataIndex: 'videoU',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
+ fixed: 'left',
|
|
|
+ key: 'videoU',
|
|
|
+ scopedSlots: { customRender: 'videoU' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频ID',
|
|
|
+ dataIndex: 'signature',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频链接',
|
|
|
+ dataIndex: 'videoUrl',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ title: '视频描述',
|
|
|
+ dataIndex: 'materialName',
|
|
|
+ align: 'center',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'operation',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'operation' },
|
|
|
+ width: 80,
|
|
|
+ fixed: 'left'
|
|
|
+ }
|
|
|
+]
|
|
|
+let variableCol = [
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center',
|
|
|
+ sorter: (a, b) => a.cost - b.cost
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击数',
|
|
|
+ dataIndex: 'clickMaterial',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'clickMaterial' },
|
|
|
+ sorter: (a, b) => a.clickMaterial - b.clickMaterial
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击率',
|
|
|
+ dataIndex: 'ctr',
|
|
|
+ align: 'center',
|
|
|
+ width: 50,
|
|
|
+ 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',
|
|
|
+ width:170,
|
|
|
+ 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
|
|
|
+ }
|
|
|
+]
|
|
|
+let length=0
|
|
|
+
|
|
|
+let detailConsum = [
|
|
|
+ {
|
|
|
+ title: '客户',
|
|
|
+ dataIndex: 'advertiserName',
|
|
|
+ align: 'center',
|
|
|
+
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if(length){
|
|
|
+ console.log(length)
|
|
|
+ if (index === 0) {
|
|
|
+ obj.attrs.rowSpan = length
|
|
|
+ } else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '视频链接',
|
|
|
+ dataIndex: 'url',
|
|
|
+ align: 'center',
|
|
|
+ width:250,
|
|
|
+ customRender: (value, row, index) => {
|
|
|
+ const obj = {
|
|
|
+ children: value,
|
|
|
+ attrs: {}
|
|
|
+ }
|
|
|
+ if (index === 0) {
|
|
|
+ obj.attrs.rowSpan = length
|
|
|
+ } else {
|
|
|
+ obj.attrs.rowSpan = 0
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '时间',
|
|
|
+ dataIndex: 'statDatetime',
|
|
|
+ align: 'center',
|
|
|
+ width: 120
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '环比',
|
|
|
+ dataIndex: 'huanbi',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'huanbi' },
|
|
|
+ }
|
|
|
+]
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //明细的表头
|
|
|
+ detailConsum,
|
|
|
+ //明细里的数据
|
|
|
+ detailData: [],
|
|
|
+
|
|
|
+ consumeValue: 1000,
|
|
|
+ //视频ID
|
|
|
+ videoID: null,
|
|
|
+ columns: [...columnsFixd, ...variableCol],
|
|
|
+ data: [],
|
|
|
+ totalSelect: 0,
|
|
|
+ daysFlag: false,
|
|
|
+ dateRange: [],
|
|
|
+ dataElse: [],
|
|
|
+ loading: false,
|
|
|
+ visible: false,
|
|
|
+ //自定义列的搜索框
|
|
|
+ searchInput: '',
|
|
|
+ //弹出框中现实的选中列数
|
|
|
+ scrollX: 0,
|
|
|
+ listNum: [],
|
|
|
+
|
|
|
+ value: this.text,
|
|
|
+ editable: false,
|
|
|
+
|
|
|
+ //详细信息的开关
|
|
|
+ visibleDetail: false,
|
|
|
+
|
|
|
+ //时间选择 字符串类型
|
|
|
+ timedata: [],
|
|
|
+
|
|
|
+ //记录点开的视频的md5
|
|
|
+ signature:null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ selectComponent
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ text: String
|
|
|
+ },
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ disabledDate(current) {
|
|
|
+ // console.log(current)
|
|
|
+
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+ //过去一个月按钮事件
|
|
|
+ lastWeekHandle() {
|
|
|
+ this.dateRange = [
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'months')
|
|
|
+ .format('YYYY-MM-DD'),
|
|
|
+ moment()
|
|
|
+ .subtract(1, 'days')
|
|
|
+ .format('YYYY-MM-DD')
|
|
|
+ ]
|
|
|
+ this.timedata=this.dateRange
|
|
|
+ console.log(this.dateRange)
|
|
|
+ this.totalSelect = 7
|
|
|
+ this.daysFlag = true
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListMonth', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ cost: this.consumeValue,
|
|
|
+ signature: this.videoID
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+ this.loading = false
|
|
|
+ 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;
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ consumeOnChange() {},
|
|
|
+ //查询按钮
|
|
|
+ searchRes() {
|
|
|
+ this.date = []
|
|
|
+ this.loading = true
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListMonth', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ cost: this.consumeValue,
|
|
|
+ signature: this.videoID
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+ this.loading = false
|
|
|
+ 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;
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //导出报表
|
|
|
+ exportExcel() {
|
|
|
+ // var params = {}
|
|
|
+ // params.projectId = this.projectId
|
|
|
+ // params.disCount = this.discount
|
|
|
+ // params.statDate = this.statDate.format('YYYY-MM-DD')
|
|
|
+ var name = this.data.filter(item => {
|
|
|
+ return item.signature == this.signature
|
|
|
+ })[0].projectName
|
|
|
+ downFilePost('/toutiao/videoReportDaily/bytedanceVideoInfoListDetailExportExcel', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ signature: this.signature
|
|
|
+ }).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.timedata[0] + '-' + this.timedata[1] //下载后文件名
|
|
|
+ document.body.appendChild(downloadElement)
|
|
|
+ downloadElement.click() //点击下载
|
|
|
+ document.body.removeChild(downloadElement) //下载完成移除元素
|
|
|
+ window.URL.revokeObjectURL(href) //释放掉blob对象
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //日期选择回调
|
|
|
+ dateChange(data, dataString) {
|
|
|
+ // console.log(data[1]._d - data[0]._d, 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 > 31) {
|
|
|
+ this.$message.error('时间跨度太长啦,选小一点好嘛?')
|
|
|
+ this.daysFlag = false
|
|
|
+ this.dateRange = []
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.daysFlag=false
|
|
|
+ this.dateRange=[]
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ //弹出框打开,自定义列
|
|
|
+ customColumns() {
|
|
|
+ this.visible = true
|
|
|
+ this.listNum = this.columns
|
|
|
+ },
|
|
|
+ //弹出框确定
|
|
|
+ handleOk(e) {
|
|
|
+ this.loading = false
|
|
|
+ this.columns = this.listNum
|
|
|
+ console.log(this.columns)
|
|
|
+ this.visible = false
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.visible = false;
|
|
|
+ // this.loading = false;
|
|
|
+ // }, 1000);
|
|
|
+ if (this.listNum.length > 8 && this.listNum.length<15 ) {
|
|
|
+ this.scrollX = (this.listNum.length - 8) * 1000
|
|
|
+ console.log(this.$refs.vSummaryTable)
|
|
|
+ } else if(this.listNum.length >= 15){
|
|
|
+ this.scrollX = (this.listNum.length - 12) * 700
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.scrollX = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.listNum.length == 6) {
|
|
|
+ this.columns.map((item, index) => {
|
|
|
+ item.width = 300
|
|
|
+ })
|
|
|
+ } 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
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ //表格里的操作 打开明细
|
|
|
+
|
|
|
+ showModal() {
|
|
|
+ this.visibleDetail = true
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //从自定义列拿选择的项
|
|
|
+ getshowlist(val) {
|
|
|
+ // console.log(val)
|
|
|
+ if (val.length) {
|
|
|
+ // console.log(val);
|
|
|
+ this.listNum = [...this.listNum,...val]
|
|
|
+
|
|
|
+ } else {
|
|
|
+ var arr
|
|
|
+ arr = this.listNum.filter((item, index) => {
|
|
|
+ return item.dataIndex == val.dataIndex
|
|
|
+ })
|
|
|
+ }
|
|
|
+ if (arr.length > 0) {
|
|
|
+
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //点击查看明细按钮的事件
|
|
|
+ opendetail(text, record) {
|
|
|
+ console.log(text, record)
|
|
|
+ this.visibleDetail = true
|
|
|
+ this.detailData = []
|
|
|
+
|
|
|
+ this.signature=record.signature
|
|
|
+ console.log(this.signature)
|
|
|
+ postAction('/toutiao/videoReportDaily/bytedanceVideoInfoListDetail', {
|
|
|
+ startDate: this.timedata[0],
|
|
|
+ endDate: this.timedata[1],
|
|
|
+ signature: record.signature
|
|
|
+ }).then(res => {
|
|
|
+ let resArr = []
|
|
|
+
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ let result = res.result
|
|
|
+ this.detailData.push({ ...result, key: 1 })
|
|
|
+ result.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
+ })
|
|
|
+ this.detailData = result
|
|
|
+ length =this.detailData.length
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ console.log('activated')
|
|
|
+ // this.getParticipateList()
|
|
|
+ this.statDate = moment().subtract(1, 'day')
|
|
|
+ moment().format('YYYY-MM-DD_HH:mm')
|
|
|
+
|
|
|
+ postAction('/toutiao/videoReportDaily/getColumnJson', {
|
|
|
+ columnType:4,
|
|
|
+ }).then((res)=>{
|
|
|
+ // console.log(res)
|
|
|
+ if(res.success){
|
|
|
+ // console.log(JSON.parse(res.result))
|
|
|
+ let columns=JSON.parse(res.result)
|
|
|
+ if(columns.length){
|
|
|
+ columns.map((item,index)=>{
|
|
|
+ item.sorter=function(a,b){ return a[item.dataIndex]-b[item.dataIndex]}
|
|
|
+ })
|
|
|
+ this.columns=columns
|
|
|
+ // console.log(this.columns)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deactivated() {
|
|
|
+ let arr = JSON.stringify(this.columns)
|
|
|
+ // console.log(arr)
|
|
|
+ postAction('/toutiao/videoReportDaily/saveOrUpdateColumnJson', {
|
|
|
+ json: arr,
|
|
|
+ columnType: 4
|
|
|
+ }).then(res => {
|
|
|
+ // console.log(res)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ // return val
|
|
|
+ },
|
|
|
+ toshowTime(val) {
|
|
|
+ // console.log(val, this.timedata)
|
|
|
+ // return this.timedata[0] + '~' + this.timedata[1]
|
|
|
+ return val
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" 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;
|
|
|
+}
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+#mybtn {
|
|
|
+ margin: 0 10px 15px 0;
|
|
|
+}
|
|
|
+</style>
|