Selaa lähdekoodia

'穿山甲视频'

魏志佳 5 vuotta sitten
vanhempi
commit
f6dc232e17

+ 233 - 0
src/views/modules/Statistics/chuanshanjia/activateSta.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="activateSta">
+        <div class="optionLine">
+            <span>应用:</span>
+            <a-select default-value="0" style="width: 150px" @change="APPChange">
+                    <a-select-option value="0">全部</a-select-option>
+                    <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
+            </a-select>
+            <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="all" style="width: 150px" @change="handleChange">
+                    <a-select-option value="all">全部</a-select-option>
+                    <a-select-option value="android">Android</a-select-option>
+                    <a-select-option value="ios">IOS</a-select-option>        
+            </a-select>
+            <div class="btn">
+                <a-button type='primary'  @click="getData">查询</a-button>
+            </div>
+        </div>
+
+        <div class="detailInfo">
+            <span>激活总数:{{totalActivate}}</span> 
+            <span>日均激活数:{{averageDailyActivate}}</span> 
+            
+        </div>
+         <a-table :columns="columns" :data-source="dataSource" tableLayout='auto' bordered :pagination='false'>
+           
+        </a-table>
+        <div class="fenye">
+            <a-pagination v-model="currentPage" :total="totalItem" show-less-items style="float:right" />
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+let columns=[
+    {
+        title: '时间',
+        dataIndex: 'date',
+        key: 'date',
+        scopedSlots: { customRender: 'date' },
+        align: 'center',
+    },
+    {
+        title: '单元ID',
+        dataIndex: 'channelName',
+        key: 'channelName',
+        align: 'center',
+    },
+    {
+        title: '应用名称',
+        dataIndex: 'appName',
+        key: 'appName',
+        align: 'center',
+    },
+    {
+        title: '操作系统',
+        dataIndex: 'oprateSystem',
+        key: 'oprateSystem',
+        align: 'center',
+    },
+    {
+        title: '激活数',
+        dataIndex: 'externalActivation',
+        key: 'externalActivation ',
+        align: 'center',
+    },
+    {
+        title: '预估结算金额/元',
+        dataIndex: 'totalPrice',
+        key: 'totalPrice ',
+        align: 'center',
+    },
+    
+    {
+        title: '留存率',
+        dataIndex: 'retentionRatio',
+        key: 'retentionRatio',
+        align: 'center',
+    },
+]
+
+
+export default {
+    data() {
+        return {
+            //应用下拉选择框的
+            optionArr:[],
+            APPID:0,
+            //日期选择器的值
+            dateRange:[],
+            dateStr:[],
+            //下拉选择器的值
+            selectValue:'all',
+            //分页器的参数
+            currentPage:1,
+            totalItem:10,
+            //详细信息
+            totalActivate:'',
+            averageDailyActivate:'',
+            //table的参数
+            loading:false,
+            columns,
+            dataSource:[]
+
+
+
+        }
+    },
+    methods: {
+        moment,
+        //应用选择
+        APPChange(value){
+            this.APPID=value;
+        },
+        handleChange(value) {
+            this.selectValue=value
+        },
+
+        disabledDate(current) {
+        // console.log(current)
+            return current && current > moment().subtract(1, 'day')
+        },
+        //日期改变事件
+        dateChange(data, dataString) {
+            this.dateStr = dataString
+        },
+         //确定按钮的事件
+        getData(){
+           
+            console.log(this.monthStr,this.selectValue);
+            this.loading=true;
+            this.HttpPost()
+            
+        },
+
+
+        //请求事件
+        HttpPost(){
+            postAction('/pangolin/api/activation/list',{
+                pageSize:10,
+                pageNo:this.currentPage,
+                startDate:this.dateStr[0],
+                endDate:this.dateStr[1],
+                operateSystem:this.selectValue,
+                appId:this.APPID
+            }).then(res => {
+                
+                console.log(res)
+                if (res.success) {
+                    this.loading=false;
+                    this.averageDailyActivate=res.avgActive
+                    this.totalActivate=res.totalActive
+                    res.data.list.map((item, index) => {
+                        item.key = index
+                        item.date=moment(item.date).format('YYYY-MM-DD')
+                        if(!item.retentionRatio){
+                            item.retentionRatio='-'
+                        }
+                    })
+            
+                    this.dataSource=res.data.list;
+                    this.totalItem=res.data.total
+                }
+            })
+        }
+    },
+    mounted() {
+        this.dateStr=[moment().subtract(1,'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
+        this.dateRange=[moment().subtract(1,'days'),moment()]
+        this.HttpPost();
+        postAction('/pangolin/api/app/list').then(res=>{
+            console.log(res)
+            if(res.success){
+                this.optionArr=res.data
+            }
+        })
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.activateSta{
+    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;
+    }
+}
+.optionLine:hover{
+    border-color:rgb(24,144,255);
+    box-shadow: 0 0 15px rgba(0,0,0,.3);
+}
+.fenye{
+    margin: 30px 15px 10px;
+    overflow: hidden;
+}
+.detailInfo{
+    margin: 10px 0 25px;
+    span{
+        display: inline;
+        margin:5px 20px 5px 10px;
+    }
+
+}
+</style>

+ 219 - 0
src/views/modules/Statistics/chuanshanjia/checkBill.vue

@@ -0,0 +1,219 @@
+<template>
+    <div class="checkBill">
+        <div class="optionLine">
+            <span>应用:</span>
+            <a-select default-value="0" style="width: 150px" @change="APPChange">
+                    <a-select-option value="0">全部</a-select-option>
+                    <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
+            </a-select>
+            <span class="timedate">日期选择:</span>
+            <a-range-picker
+                :placeholder="['开始月份', '结束月份']"
+                format="YYYY-MM"
+                :value="monthRange"
+                :mode="mode2"
+                @change="monthChange"
+                @panelChange="monthPanelChange"
+                style="width: 250px;"
+               :openChange='monthOpenChange'
+                :loading="loading"
+            />
+            <span class="caozuoxitong">操作系统:</span>
+             <a-select default-value="all" style="width: 150px" @change="handleChange">
+                    <a-select-option value="all">全部</a-select-option>
+                    <a-select-option value="android">Android</a-select-option>
+                    <a-select-option value="ios">IOS</a-select-option>        
+            </a-select>
+            <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'>
+           
+        </a-table>
+        <div class="fenye">
+            <a-pagination v-model="currentPage" :total="totalItem" show-less-items style="float:right" />
+        </div>
+        
+    </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+
+
+let columns=[
+    {
+        title: '时间',
+        dataIndex: 'date',
+        key: 'date',
+        scopedSlots: { customRender: 'date' },
+        align: 'center',
+    },
+    {
+        title: '应用',
+        dataIndex: 'appName',
+        key: 'appName',
+        align: 'center',
+    },
+    {
+        title: '操作系统',
+        dataIndex: 'operateSystem',
+        key: 'operateSystem',
+        align: 'center',
+    },
+    {
+        title: '有效激活数',
+        dataIndex: 'sumInternalActivations',
+        key: 'sumInternalActivations',
+        align: 'center',
+    },
+    {
+        title: '预估结算金额/元',
+        dataIndex: 'estimatedTotalPrice',
+        key: 'estimatedTotalPrice',
+        align: 'center',
+    },
+    {
+        title: '账户质量分',
+        dataIndex: 'accountQualityScore',
+        key: 'accountQualityScore',
+        align: 'center',
+    },
+    {
+        title: '实际结算金额/元',
+        dataIndex: 'actualTotalPrice',
+        key: 'actualTotalPrice',
+        align: 'center',
+    },
+]
+
+export default {
+    data() {
+        return {
+            //应用下拉选择框的
+            optionArr:[],
+            APPID:'',
+            //table的值
+            columns,
+            dataSource:[],
+            loading:false,
+            //选择的值
+            selectValue:'all',
+            //日期的值
+            monthRange:[],
+            monthStr:[],//时间-字符串的类型
+            mode2: ['month', 'month'],
+            monthOpen:false,
+
+            //分页器的参数
+            currentPage:1,
+            totalItem:10
+
+        }
+    },
+    methods: {
+        moment,
+        //应用选择
+        APPChange(value){
+            this.APPID=value;
+        },
+        handleChange(value) {
+            this.selectValue=value
+        },
+        //月份选择器value
+        monthChange(value){
+            console.log(value)
+            this.monthRange=value
+        },
+        monthPanelChange(value, mode){
+            this.monthRange=value
+            console.log(value)
+            this.mode2 = [mode[0] === 'date' ? 'month' : mode[0], mode[1] === 'date' ? 'month' : mode[1]];
+            this.monthStr=[moment(this.monthRange[0]).format('YYYY-MM'),moment(this.monthRange[1]).format('YYYY-MM')]
+        },
+        monthOpenChange(val){
+            console.log(val)
+            if(open){
+                 this.monthRange=[]
+            }
+        },
+        //确定按钮的事件
+        getData(){
+           
+            console.log(this.monthStr,this.selectValue);
+            this.loading=true;
+            this.HttpPost()
+            
+        },
+        //请求事件
+        HttpPost(){
+            postAction('/pangolin/api/checkApps/list',{
+                pageSize:10,
+                pageNo:this.currentPage,
+                startDate:this.monthStr[0],
+                endDate:this.monthStr[1],
+                operateSystem:this.selectValue,
+                appId:this.APPID
+            }).then(res => {
+                
+                console.log(res)
+                if (res.success) {
+                 this.loading=false;
+                res.data.list.map((item, index) => {
+                    item.key = index
+                })
+          
+                 this.dataSource=res.data.list;
+                 this.totalItem=res.data.total
+                }
+            })
+        }
+        
+    },
+    mounted() {
+        this.monthStr=[moment().format('YYYY-MM'),moment().format('YYYY-MM')];
+        this.monthRange=[moment(),moment()]
+        this.HttpPost()
+        postAction('/pangolin/api/app/list').then(res=>{
+            console.log(res)
+            if(res.success){
+                this.optionArr=res.data
+            }
+        })
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.checkBill{
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    padding: 10px 15px;
+}
+.optionLine{
+    padding: 15px 5px;
+    position: relative;
+    margin-bottom: 15px;
+    margin-top: 20px;
+    span{
+        display: inline-block;
+        padding: 0 3px;
+    }
+    .timedate,.caozuoxitong{
+        margin-left: 30px;;
+    }
+    .btn{
+        position: absolute;
+        right: 10px;
+        top: 15px;
+    }
+}
+.fenye{
+    margin: 30px 15px 10px;
+    overflow: hidden;
+}
+</style>

+ 411 - 0
src/views/modules/Statistics/chuanshanjia/realTimeData.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="realData" ref="chart">
+    <div class="optionLine">
+        <span>应用:</span>
+            <a-select default-value="0" style="width: 150px" @change="APPChange">
+                    <a-select-option value="0">全部</a-select-option>
+                    <a-select-option v-for="(item,index) in optionArr" :key='index' :value='item.id'>{{item.name}}</a-select-option>                  
+            </a-select>
+            
+    </div>
+    <div class="tabchange">
+      <a-tabs default-active-key="click" @change="callback">
+        <a-tab-pane key="click" tab="点击数"></a-tab-pane>
+        <a-tab-pane key="active" tab="激活" force-render></a-tab-pane>
+        <a-tab-pane key="rate" tab="激活率"></a-tab-pane>
+      </a-tabs>
+    </div>
+    <div id="echart" style="width:100%;height:400px"></div>
+    <div class="duibishiduan">
+      <p>
+        <a-button type="primary" @click="openDate" v-clickoutside="handleClose" >对比时段</a-button>
+      </p>
+      <div class="dateDiv">
+        <a-date-picker @change="dateChange" v-show="dateOpen" :open='dateOpen' :disabled-date="disabledDate"  />
+      </div>
+    </div>
+
+    <a-table
+      :columns="columns"
+      :data-source="dataSource"
+      tableLayout="auto"
+      bordered
+      :pagination="false"
+    ></a-table>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
+// 引入基本模板
+var echarts = require('echarts')
+// 引入柱状图组件
+require('echarts/lib/chart/bar')
+require('echarts/lib/chart/pie')
+require('echarts/lib/chart/line')
+// 引入提示框和title组件
+require('echarts/lib/component/tooltip')
+require('echarts/lib/component/title')
+require('echarts/lib/component/graphic')
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/legend')
+
+const clickoutside = {
+  // 初始化指令
+  bind(el, binding, vnode) {
+    function documentHandler(e) {
+      // 这里判断点击的元素是否是本身,是本身,则返回
+      if (el.contains(e.target)) {
+        return false
+      }
+      // 判断指令中是否绑定了函数
+      if (binding.expression) {
+        // 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
+        binding.value(e)
+      }
+    }
+    // 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('click', documentHandler)
+  },
+  update() {},
+  unbind(el, binding) {
+    // 解除事件监听
+    document.removeEventListener('click', el.__vueClickOutside__)
+    delete el.__vueClickOutside__
+  }
+}
+
+
+let columns = [
+  {
+    title: '',
+    dataIndex: 'hour',
+    // scopedSlots: { customRender: 'date' },
+    width:200,
+    align: 'center'
+  },
+  {
+    title: '今天',
+    key: 'today',
+    dataIndex: 'today',
+    // scopedSlots: { customRender: 'date' },
+    align: 'center'
+  },
+  {
+    title: '昨天',
+    key: 'yesterday',
+    dataIndex: 'yesterday',
+    // scopedSlots: { customRender: 'date' },
+    align: 'center'
+  },
+  {
+    title: '7天前',
+    key: 'sevendaysAgo',
+    dataIndex: 'sevendaysAgo',
+    // scopedSlots: { customRender: 'date' },
+    align: 'center'
+  }
+]
+let option = {
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['今天', '昨天', '七天前']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00','19:00', '20:00', '21:00', '22:00', '23:00']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    {
+      name: '今天',
+      type: 'line',
+    //   stack: '总量',//可以显示成堆叠图
+      data: []
+    },
+    {
+      name: '昨天',
+      type: 'line',
+      data: []
+    },
+    {
+      name: '七天前',
+      type: 'line',
+      data: []
+    },
+    {
+      name: '',
+      type: 'line',
+      data: []
+    },
+    {
+      name: '',
+      type: 'line',
+      data: []
+    }
+  ]
+}
+export default {
+    directives: { clickoutside },
+  data() {
+    return {
+ 
+        //应用下拉选择框的
+        optionArr:[],
+        APPID:'', 
+      //表格参数
+      dataSource: [],
+      loading: false,
+      columns,
+      //下拉选择框的参数
+      selectValue: 'all',
+      //时间选择器的显示隐藏按钮
+      dateOpen: false,
+
+      dateStr: [] ,//字符串类型的日期
+      //tab切换的参数、
+      tabKey:'click',
+
+      //echart的参数
+      option,
+    }
+  },
+  methods: {
+    moment,
+    disabledDate(current) {
+      // console.log(current)
+
+      return current && current > moment().subtract(1, 'day')
+    },
+    //应用选择
+        APPChange(value){
+            this.APPID=value;
+            this.HttpPost().then(item=>{
+                this.getEchartData()
+            })
+        },
+
+    //tab切换的事件
+    callback(key) {
+        console.log(key)
+        this.tabKey=key;
+        this.HttpPost().then(item=>{
+            this.getEchartData()
+        })
+    },
+
+    
+    //打开对比时间的按钮
+    openDate() {
+      this.dateOpen = true
+    },
+    //点击其他地方关闭
+    handleClose(){
+        this.dateOpen = false
+    },
+    //日期发生变化时
+    dateChange(date, dateString) {
+      this.dateOpen = false;
+      if(this.dateStr.length<2){
+          this.dateStr.push(dateString)
+      }else{
+          this.dateStr.splice(0,1)
+          this.dateStr.push(dateString)
+      }
+      let addCol=[]
+     addCol =  this.dateStr.map((item,index)=>{
+         return {               
+            title: `${item}`,
+            key: `${item}`,
+            dataIndex:`${item}`,
+            // scopedSlots: { customRender: 'date' },
+            align: 'center' 
+          }
+      })
+        this.columns=[...columns,...addCol]
+        //修改echart的数据项
+        this.option.legend.data=[...option.legend.data,...this.dateStr]
+        console.log(this.dateStr)
+        this.HttpPost().then(item=>{
+            this.getEchartData()
+        })
+    },
+    //获取echart的值
+    getEchartData() {
+        console.log('echart')
+      const chart = this.$refs.chart
+      if (chart) {
+        const myChart = echarts.init(document.getElementById('echart'))
+
+        myChart.setOption(this.option)
+        window.addEventListener('resize', function() {
+          myChart.resize()
+        })
+      }
+    },
+    //处理echart的数据
+    echartHandle(res){
+        if(this.dateStr.length>0){
+              this.dateStr.map((item,index)=>{
+                  this.option.series[index+3].name=item
+              })
+        }  
+
+        this.option.series.map((item)=>{
+            item.data=[]
+        })
+        //处理this.option.series.data数据
+        
+        res.map((item,index)=>{
+            this.option.series[0].data.push(item.today)
+            this.option.series[1].data.push(item.yesterday)
+            this.option.series[2].data.push(item.sevendaysAgo);
+            if(this.dateStr.length==1){
+                this.option.series[3].data.push(item[this.dateStr[0]]);
+            }else if(this.dateStr.length==2){
+               this.option.series[3].data.push(item[this.dateStr[0]]);
+               this.option.series[4].data.push(item[this.dateStr[1]]);
+            }
+        })
+        
+        console.log(this.option.series)
+    },
+    HttpPost(){
+    return new Promise((resolve,reject)=>{
+     postAction('/pangolin/api/realtime', {       
+        
+        type:this.tabKey,
+        compareTime1:this.dateStr[0],
+        compareTime2:this.dateStr[1],
+        appId:this.APPID
+      }).then(res => {
+        console.log(res)
+        if (res.success) {
+          this.loading = false
+          let total={
+              key:'zongji',
+              today:0,
+              yesterday:0,
+              sevendaysAgo:0,
+              hour:'总计'
+          }
+          if(this.dateStr.length>0){
+              this.dateStr.map((item,index)=>{
+                  total[item]=0
+              })
+          }
+          res.data.map((item, index) => {
+            item.key = index;
+            total.today+=item.today;
+            total.yesterday+=item.yesterday;
+            total.sevenDaysAgo+=item.sevenDaysAgo;
+            if(this.dateStr.length==1){
+                total[this.dateStr[0]] += item[this.dateStr[0]]
+            }else if(this.dateStr.length==2){
+                total[this.dateStr[0]] += item[this.dateStr[0]]
+                total[this.dateStr[1]] += item[this.dateStr[1]]
+            } 
+            
+
+            if(item.hour<10){
+                item.hour=`0${item.hour}:00~0${item.hour+1}:00`
+            }else{
+                item.hour=`${item.hour}:00~${item.hour+1}:00`
+            } 
+          })
+            console.log(total)
+            this.dataSource =[total,...res.data] ;
+            this.echartHandle(res.data);
+           
+            resolve(res)
+        }
+      })
+})
+    },
+  
+  },
+  mounted() {
+    //   this.HttpPost()
+    
+    console.log(this.dateStr)
+    this.option.legend.data=[...option.legend.data,...this.dateStr];
+    console.log(this.option.legend.data)
+    postAction('/pangolin/api/app/list').then(res=>{
+            console.log(res)
+            if(res.success){
+                this.optionArr=res.data
+            }
+    })
+    this.HttpPost().then(item=>{
+         this.getEchartData()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+body,
+html {
+  width: 100%;
+  height: 100%;
+}
+.realData {
+  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;
+  }
+ 
+  .btn {
+    position: absolute;
+    right: 10px;
+    top: 30px;
+  }
+}
+.optionLine:hover {
+  border-color: rgb(24, 144, 255);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+}
+.tabchange {
+  margin: 20px 5px;
+}
+.duibishiduan {
+  position: relative;
+  height: 50px;
+  overflow: hidden;
+  p {
+    position: absolute;
+    right: 10px;
+    top: 2px;
+  }
+  .dateDiv {
+    position: absolute;
+    right: 10px;
+    top: 2px;
+  }
+}
+</style>

+ 2 - 2
vue.config.js

@@ -67,10 +67,10 @@ module.exports = {
         // 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.90:8080', //请求本地 需要jeecg-boot后台项目  英豪
+        target: 'http://192.168.1.22:8080', //请求本地 需要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后台项目  孙震
+        // target: 'http://192.168.1.54:8080', //请求本地 需要jeecg-boot后台项目  孙震
         // target: 'http://192.168.1.165:8080', //请求本地 需要jeecg-boot后台项目  毕洁泉
         ws: false,
         changeOrigin: true