魏志佳 пре 5 година
родитељ
комит
536646d72a
2 измењених фајлова са 281 додато и 2 уклоњено
  1. 279 0
      src/views/modules/Statistics/materialRank.vue
  2. 2 2
      vue.config.js

+ 279 - 0
src/views/modules/Statistics/materialRank.vue

@@ -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>

+ 2 - 2
vue.config.js

@@ -64,10 +64,10 @@ module.exports = {
          }
        },*/
       '/jeecg-boot': {
-        target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
+        // target: 'http://39.97.120.42:8080', //请求本地 需要jeecg-boot后台项目  生产环境
         // target: 'http://39.106.184.70:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.1.13:8080', //请求本地 需要jeecg-boot后台项目  蒙蒙
-        // target: 'http://192.168.1.22:8080', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.1.22:8088', //请求本地 需要jeecg-boot后台项目  英豪
         // target: 'http://192.168.1.103:8080', //请求本地 需要jeecg-boot后台项目
         // target: 'http://192.168.2.115:8080', //请求本地 需要jeecg-boot后台项目  祚云
         // target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震