|
@@ -1,278 +1,323 @@
|
|
|
<template>
|
|
|
- <div class="materialRank">
|
|
|
- <div class="optionLine">
|
|
|
- <span class="timedate">日期选择:</span>
|
|
|
- <a-range-picker
|
|
|
- :disabled-date="disabledDate"
|
|
|
- format="YYYY-MM-DD"
|
|
|
- style="width: 250px;"
|
|
|
- @change="dateChange"
|
|
|
- v-model="dateRange"
|
|
|
- />
|
|
|
- <span class="caozuoxitong">指标选择:</span>
|
|
|
- <a-select default-value="cost" style="width: 150px" @change="indexSelect">
|
|
|
- <a-select-option value="cost">消耗</a-select-option>
|
|
|
- <a-select-option value="click">点击数</a-select-option>
|
|
|
- <a-select-option value="showNum">展示数</a-select-option>
|
|
|
- <a-select-option value="convertRate">转化率</a-select-option>
|
|
|
- <a-select-option value="play3s">3s播放数</a-select-option>
|
|
|
- <a-select-option value="play10s">10s播放数</a-select-option>
|
|
|
- <a-select-option value="active">行为数</a-select-option>
|
|
|
- <a-select-option value="pay">支付数</a-select-option>
|
|
|
- <a-select-option value="residue">次留数</a-select-option>
|
|
|
- <a-select-option value="register">注册数</a-select-option>
|
|
|
- </a-select>
|
|
|
- <span class="caozuoxitong">排序规则:</span>
|
|
|
- <a-radio-group name="radioGroup" default-value="desc" @change="radioChange">
|
|
|
- <a-radio key="asc" value="asc">升序</a-radio>
|
|
|
- <a-radio key="desc" value="desc">降序</a-radio>
|
|
|
- </a-radio-group>
|
|
|
- <div class="btn">
|
|
|
- <a-button type='primary' @click="getData">查询</a-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
|
|
|
- <div slot="videoU" slot-scope="test,records">
|
|
|
- <img :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'" alt="" style="width:140px" @click="openVideo(records.url)">
|
|
|
- </div>
|
|
|
- <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
|
|
|
- </a-table>
|
|
|
- <div class="fenye" :v-show="pageShow">
|
|
|
- <a-pagination :default-current="pageNo" :total="total" size="small" style="float:right"/>
|
|
|
- </div>
|
|
|
- <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 class="materialRank">
|
|
|
+ <div class="optionLine">
|
|
|
+ <span class="timedate">日期选择:</span>
|
|
|
+ <a-range-picker :disabled-date="disabledDate" format="YYYY-MM-DD" style="width: 250px;" @change="dateChange"
|
|
|
+ v-model="dateRange" />
|
|
|
+ <span class="caozuoxitong">指标选择:</span>
|
|
|
+ <a-select default-value="cost" style="width: 150px" @change="indexSelect">
|
|
|
+ <a-select-option value="cost">消耗</a-select-option>
|
|
|
+ <a-select-option value="click">点击数</a-select-option>
|
|
|
+ <a-select-option value="showNum">展示数</a-select-option>
|
|
|
+ <a-select-option value="convertRate">转化率</a-select-option>
|
|
|
+ <a-select-option value="play3s">3s播放数</a-select-option>
|
|
|
+ <a-select-option value="play10s">10s播放数</a-select-option>
|
|
|
+ <a-select-option value="active">行为数</a-select-option>
|
|
|
+ <a-select-option value="pay">支付数</a-select-option>
|
|
|
+ <a-select-option value="residue">次留数</a-select-option>
|
|
|
+ <a-select-option value="register">注册数</a-select-option>
|
|
|
+ </a-select>
|
|
|
+ <span class="caozuoxitong">排序规则:</span>
|
|
|
+ <a-radio-group name="radioGroup" default-value="desc" @change="radioChange">
|
|
|
+ <a-radio key="asc" value="asc">升序</a-radio>
|
|
|
+ <a-radio key="desc" value="desc">降序</a-radio>
|
|
|
+ </a-radio-group>
|
|
|
+ <div class="btn">
|
|
|
+ <a-button type='primary' @click="getData">查询</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
|
|
|
+ <div slot="videoU" slot-scope="test,records">
|
|
|
+ <img :src="records.url+'?x-oss-process=video/snapshot,t_0,m_fast'" alt="" style="width:140px"
|
|
|
+ @click="openVideo(records.url)">
|
|
|
+ </div>
|
|
|
+ <span slot="convertRate" slot-scope="convertRate">{{ convertRate | toPercentage }}</span>
|
|
|
+ </a-table>
|
|
|
+ <div class="fenye" :v-show="pageShow">
|
|
|
+ <a-pagination showQuickJumper :default-current="pageNo" :total="total" size="small" style="float:right"
|
|
|
+ @change="getDataSource" v-if="dataSource.length > 0" />
|
|
|
+ <!-- <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
|
|
|
+ showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
|
|
|
+ @change="getDataSource" /> -->
|
|
|
</div>
|
|
|
+ <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 { getAction, postAction, downFile, downFilePost } from '@/api/manage'
|
|
|
-let columns=[
|
|
|
- {
|
|
|
- title: '视频',
|
|
|
- dataIndex: 'videoU',
|
|
|
- align: 'center',
|
|
|
- width: 150,
|
|
|
- fixed: 'left',
|
|
|
- key: 'videoU',
|
|
|
- scopedSlots: { customRender: 'videoU' }
|
|
|
+ import moment from 'moment'
|
|
|
+ import {
|
|
|
+ getAction,
|
|
|
+ postAction,
|
|
|
+ downFile,
|
|
|
+ downFilePost
|
|
|
+ } from '@/api/manage'
|
|
|
+ let columns = [{
|
|
|
+ title: '视频',
|
|
|
+ dataIndex: 'videoU',
|
|
|
+ align: 'center',
|
|
|
+ width: 150,
|
|
|
+ fixed: 'left',
|
|
|
+ key: 'videoU',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'videoU'
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
- title: '素材名',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- scopedSlots: { customRender: 'name' },
|
|
|
- align: 'center',
|
|
|
+ title: '素材名',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'name'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '消耗',
|
|
|
- dataIndex: 'cost',
|
|
|
- key: 'cost',
|
|
|
- scopedSlots: { customRender: 'cost' },
|
|
|
- align: 'center',
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key: 'cost',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'cost'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '点击数',
|
|
|
- dataIndex: 'click',
|
|
|
- key: 'click',
|
|
|
- scopedSlots: { customRender: 'click' },
|
|
|
- align: 'center',
|
|
|
+ title: '点击数',
|
|
|
+ dataIndex: 'click',
|
|
|
+ key: 'click',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'click'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '展示数',
|
|
|
- dataIndex: 'showNum',
|
|
|
- key: 'showNum',
|
|
|
- scopedSlots: { customRender: 'showNum' },
|
|
|
- align: 'center',
|
|
|
+ title: '展示数',
|
|
|
+ dataIndex: 'showNum',
|
|
|
+ key: 'showNum',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'showNum'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '转化率',
|
|
|
- dataIndex: 'convertRate',
|
|
|
- key: 'convertRate',
|
|
|
- scopedSlots: { customRender: 'convertRate' },
|
|
|
- align: 'center',
|
|
|
+ title: '3s播放数',
|
|
|
+ dataIndex: 'play3s',
|
|
|
+ key: 'play3s',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'play3s'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '3s播放数',
|
|
|
- dataIndex: 'play3s',
|
|
|
- key: 'play3s',
|
|
|
- scopedSlots: { customRender: 'play3s' },
|
|
|
- align: 'center',
|
|
|
+ title: '10s播放数',
|
|
|
+ dataIndex: 'play10s',
|
|
|
+ key: 'play10s',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'play10s'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '10s播放数',
|
|
|
- dataIndex: 'play10s',
|
|
|
- key: 'play10s',
|
|
|
- scopedSlots: { customRender: 'play10s' },
|
|
|
- align: 'center',
|
|
|
+ title: '行为数',
|
|
|
+ dataIndex: 'active',
|
|
|
+ key: 'active',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'active'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '行为数',
|
|
|
- dataIndex: 'active',
|
|
|
- key: 'active',
|
|
|
- scopedSlots: { customRender: 'active' },
|
|
|
- align: 'center',
|
|
|
+ title: '支付数',
|
|
|
+ dataIndex: 'pay',
|
|
|
+ key: 'pay',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'pay'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '支付数',
|
|
|
- dataIndex: 'pay',
|
|
|
- key: 'pay',
|
|
|
- scopedSlots: { customRender: 'pay' },
|
|
|
- align: 'center',
|
|
|
+ title: '次留数',
|
|
|
+ dataIndex: 'residue',
|
|
|
+ key: 'residue',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'residue'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
{
|
|
|
- title: '次留数',
|
|
|
- dataIndex: 'residue',
|
|
|
- key: 'residue',
|
|
|
- scopedSlots: { customRender: 'residue' },
|
|
|
- align: 'center',
|
|
|
+ title: '注册数',
|
|
|
+ dataIndex: 'register',
|
|
|
+ key: 'register',
|
|
|
+ scopedSlots: {
|
|
|
+ customRender: 'register'
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
},
|
|
|
- {
|
|
|
- title: '注册数',
|
|
|
- dataIndex: 'register',
|
|
|
- key: 'register',
|
|
|
- scopedSlots: { customRender: 'register' },
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
-]
|
|
|
-export default {
|
|
|
+ ]
|
|
|
+ export default {
|
|
|
data() {
|
|
|
- return {
|
|
|
- columns,
|
|
|
- dataSource:[],
|
|
|
- pageNo:1,
|
|
|
- pageSize:10,
|
|
|
- target:'cost',
|
|
|
- order:'desc',
|
|
|
- dateStr:[],
|
|
|
- dateRange:[],
|
|
|
- optionArr:[],
|
|
|
+ return {
|
|
|
+ columns,
|
|
|
+ dataSource: [],
|
|
|
+ ipagination: {
|
|
|
+ current: 1,
|
|
|
+ pageSize: 4,
|
|
|
+ // pageSizeOptions: ['10', '20', '30'],
|
|
|
+ showTotal: (total, range) => {
|
|
|
+ return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
|
+ },
|
|
|
+ showQuickJumper: true,
|
|
|
+ // showSizeChanger: true,
|
|
|
+ total: 0,
|
|
|
+ onChange: current => {
|
|
|
+ // 切换分页时的回调,
|
|
|
+ // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
|
|
|
+ this.ipagination.current = current
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ target: 'cost',
|
|
|
+ order: 'desc',
|
|
|
+ dateStr: [],
|
|
|
+ dateRange: [],
|
|
|
+ optionArr: [],
|
|
|
+
|
|
|
+ total: 0,
|
|
|
+ pageShow: false,
|
|
|
|
|
|
- total:0,
|
|
|
- pageShow:false,
|
|
|
|
|
|
-
|
|
|
- //是否打开视频
|
|
|
- Videovisible:false,
|
|
|
- videoUrl:'',
|
|
|
- }
|
|
|
+ //是否打开视频
|
|
|
+ Videovisible: false,
|
|
|
+ videoUrl: '',
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- moment,
|
|
|
- openVideo(val){
|
|
|
- this.Videovisible=true;
|
|
|
- this.videoUrl=val
|
|
|
- },
|
|
|
- videoOk(){
|
|
|
- this.Videovisible=false
|
|
|
- },
|
|
|
- disabledDate(current) {
|
|
|
+ moment,
|
|
|
+ getDataSource(page, pageSize) {
|
|
|
+
|
|
|
+ this.pageNo = page
|
|
|
+ this.HttpPost()
|
|
|
+
|
|
|
+ },
|
|
|
+ openVideo(val) {
|
|
|
+ this.Videovisible = true;
|
|
|
+ this.videoUrl = val
|
|
|
+ },
|
|
|
+ videoOk() {
|
|
|
+ this.Videovisible = false
|
|
|
+ },
|
|
|
+ disabledDate(current) {
|
|
|
// console.log(current)
|
|
|
- return current && current > moment().subtract(1, 'day')
|
|
|
- },
|
|
|
- radioChange(e){
|
|
|
-
|
|
|
- this.order=e.target.value
|
|
|
- },
|
|
|
- indexSelect(key){
|
|
|
- console.log(key)
|
|
|
- this.target=key
|
|
|
- },
|
|
|
- //日期改变事件
|
|
|
- dateChange(data, dataString) {
|
|
|
- this.dateStr = dataString
|
|
|
- },
|
|
|
- //确定按钮的事件
|
|
|
- getData(){
|
|
|
- this.HttpPost()
|
|
|
- },
|
|
|
+ return current && current > moment().subtract(1, 'day')
|
|
|
+ },
|
|
|
+ radioChange(e) {
|
|
|
+
|
|
|
+ this.order = e.target.value
|
|
|
+ },
|
|
|
+ indexSelect(key) {
|
|
|
+ console.log(key)
|
|
|
+ this.target = key
|
|
|
+ },
|
|
|
+ //日期改变事件
|
|
|
+ dateChange(data, dataString) {
|
|
|
+ this.dateStr = dataString
|
|
|
+ },
|
|
|
+ //确定按钮的事件
|
|
|
+ getData() {
|
|
|
+ this.HttpPost()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //请求事件
|
|
|
+ HttpPost() {
|
|
|
+ this.loading = true;
|
|
|
+ this.dataSource = [];
|
|
|
+ this.pageShow = false
|
|
|
+ postAction(
|
|
|
+ `/ctop/material/top/cost?pageSize=${this.pageSize}&pageNo=${this.pageNo}&target=${this.target}&order=${this.order}`, {
|
|
|
+ startDate: this.dateStr[0],
|
|
|
+ endDate: this.dateStr[1],
|
|
|
+
|
|
|
+ }).then(res => {
|
|
|
+ this.loading = false;
|
|
|
+
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+
|
|
|
|
|
|
+ if (res.result.records.length > 0) {
|
|
|
+ this.pageShow = true
|
|
|
+ }
|
|
|
+ res.result.records.map((item, index) => {
|
|
|
+ item.key = index
|
|
|
|
|
|
- //请求事件
|
|
|
- HttpPost(){
|
|
|
- this.loading=true;
|
|
|
- this.dataSource=[];
|
|
|
- this.pageShow=false
|
|
|
- postAction(`/ctop/material/top/cost?pageSize=${this.pageSize}&pageNo=${this.pageNo}&target=${this.target}&order=${this.order}`,{
|
|
|
- startDate:this.dateStr[0],
|
|
|
- endDate:this.dateStr[1],
|
|
|
-
|
|
|
- }).then(res => {
|
|
|
- this.loading=false;
|
|
|
-
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
-
|
|
|
-
|
|
|
- if(res.result.records.length>0){
|
|
|
- this.pageShow=true
|
|
|
- }
|
|
|
- res.result.records.map((item, index) => {
|
|
|
- item.key = index
|
|
|
-
|
|
|
- })
|
|
|
- this.total=res.result.total
|
|
|
- this.dataSource=res.result.records;
|
|
|
-
|
|
|
- }
|
|
|
})
|
|
|
- }
|
|
|
+ this.total = res.result.total
|
|
|
+ this.dataSource = res.result.records;
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.dateStr=[moment().subtract(1,'days').format('YYYY-MM-DD'),moment().subtract(1,'days').format('YYYY-MM-DD')]
|
|
|
- this.dateRange=[moment().subtract(1,'days'),moment().subtract(1,'days')]
|
|
|
- this.HttpPost();
|
|
|
-
|
|
|
+ this.dateStr = [moment().subtract(1, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format(
|
|
|
+ 'YYYY-MM-DD')]
|
|
|
+ this.dateRange = [moment().subtract(1, 'days'), moment().subtract(1, 'days')]
|
|
|
+ this.HttpPost();
|
|
|
+
|
|
|
},
|
|
|
filters: {
|
|
|
- toPercentage(val) {
|
|
|
- return (val * 100).toFixed(2) + '%'
|
|
|
- // return val
|
|
|
+ toPercentage(val) {
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ // return val
|
|
|
+ },
|
|
|
+ tofixed(val) {
|
|
|
+ return Number(val).toFixed(2)
|
|
|
+ }
|
|
|
},
|
|
|
- tofixed(val){
|
|
|
- return Number(val).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
-}
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.materialRank{
|
|
|
+ .materialRank {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
padding: 10px 15px;
|
|
|
-}
|
|
|
-.optionLine{
|
|
|
+ }
|
|
|
+
|
|
|
+ .optionLine {
|
|
|
padding: 30px 5px;
|
|
|
position: relative;
|
|
|
- margin-top: 20px;;
|
|
|
+ margin-top: 20px;
|
|
|
+ ;
|
|
|
margin-bottom: 15px;
|
|
|
border: 1px solid #ccc;
|
|
|
- span{
|
|
|
- display: inline-block;
|
|
|
- padding: 0 3px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 3px;
|
|
|
}
|
|
|
- .timedate,.caozuoxitong{
|
|
|
- margin-left: 30px;;
|
|
|
+
|
|
|
+ .timedate,
|
|
|
+ .caozuoxitong {
|
|
|
+ margin-left: 30px;
|
|
|
+ ;
|
|
|
}
|
|
|
- .btn{
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 30px;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 30px;
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
|
|
|
-.fenye{
|
|
|
+ .fenye {
|
|
|
margin: 30px 15px 10px;
|
|
|
overflow: hidden;
|
|
|
-}
|
|
|
+ }
|
|
|
</style>
|