|
@@ -0,0 +1,279 @@
|
|
|
+<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" />
|
|
|
+ </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' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '素材名',
|
|
|
+ dataIndex: 'name',
|
|
|
+ key: 'name',
|
|
|
+ scopedSlots: { customRender: 'name' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '消耗',
|
|
|
+ dataIndex: 'cost',
|
|
|
+ key: 'cost',
|
|
|
+ scopedSlots: { customRender: 'cost' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点击数',
|
|
|
+ dataIndex: 'click',
|
|
|
+ key: 'click',
|
|
|
+ scopedSlots: { customRender: 'click' },
|
|
|
+ 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: '10s播放数',
|
|
|
+ dataIndex: 'play10s',
|
|
|
+ key: 'play10s',
|
|
|
+ scopedSlots: { customRender: 'play10s' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '行为数',
|
|
|
+ dataIndex: 'active',
|
|
|
+ key: 'active',
|
|
|
+ scopedSlots: { customRender: 'active' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '支付数',
|
|
|
+ dataIndex: 'pay',
|
|
|
+ key: 'pay',
|
|
|
+ scopedSlots: { customRender: 'pay' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '次留数',
|
|
|
+ dataIndex: 'residue',
|
|
|
+ key: 'residue',
|
|
|
+ scopedSlots: { customRender: 'residue' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '注册数',
|
|
|
+ dataIndex: 'register',
|
|
|
+ key: 'register',
|
|
|
+ scopedSlots: { customRender: 'register' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+]
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ columns,
|
|
|
+ dataSource:[],
|
|
|
+ pageNo:1,
|
|
|
+ pageSize:10,
|
|
|
+ target:'cost',
|
|
|
+ order:'desc',
|
|
|
+ dateStr:[],
|
|
|
+ dateRange:[],
|
|
|
+ optionArr:[],
|
|
|
+
|
|
|
+ total:0,
|
|
|
+ pageShow:false,
|
|
|
+
|
|
|
+
|
|
|
+ //是否打开视频
|
|
|
+ Videovisible:false,
|
|
|
+ videoUrl:'',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ moment,
|
|
|
+ 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()
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ //请求事件
|
|
|
+ HttpPost(){
|
|
|
+ this.loading=true;
|
|
|
+ this.dataSource=[];
|
|
|
+ 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.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();
|
|
|
+
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ toPercentage(val) {
|
|
|
+ return (val * 100).toFixed(2) + '%'
|
|
|
+ // return val
|
|
|
+ },
|
|
|
+ tofixed(val){
|
|
|
+ return Number(val).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.materialRank{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px 15px;
|
|
|
+}
|
|
|
+.optionLine{
|
|
|
+ padding: 30px 5px;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 20px;;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ span{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 3px;
|
|
|
+ }
|
|
|
+ .timedate,.caozuoxitong{
|
|
|
+ margin-left: 30px;;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 30px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fenye{
|
|
|
+ margin: 30px 15px 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+</style>
|