项目初始化

gaoluyang

3 天以前 92230c9a97dc9ce9df3313d11d26999c04bb6b26

 src/pages_qiun/components/data-center/user-operate.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,200 @@
<template>
   <view class="content">
      <scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
         <!--数据进度条-->
         <view class="progress">
            <data-progress :progressList="userOperateLineBar" :borderRadius="20" padMiddle="true"></data-progress>
         </view>
         <view class="split_line"></view>
			
         <!-- æ´»è·ƒä¼šå‘˜-->
         <view class="friend_operate">
            <view class="title">活跃会员</view>
            <text-block :content="userActive"></text-block>
         </view>
			
         <!-- ä¼šå‘˜æ¶ˆè´¹ -->
         <view class="friend_operate"  style="padding-bottom: 30rpx;">
            <view class="title">会员消费</view>
            <text-block :content="userConsume"></text-block>
         </view>
         <view class="split_line"></view>
			
         <!-- ä¼šå‘˜ARPU -->
         <view class="friend_operate">
            <view class="title">会员ARPU
               <text class="font-small">(会员年度平均销售金额)</text>
               <text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
            </view>
            <view class="charts-box">
               <qiun-data-charts type="mix"
                  :chartData="userARPU" 
                  :reshow="delayload"
                  :canvas2d="isCanvas2d"
                  canvasId="two_a"
                  :opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
            </view>
         </view>
         <view class="split_line"></view>
			
         <!-- ä¼šå‘˜æ¶ˆè´¹é¢‘次 -->
         <view class="friend_operate">
            <view class="title">会员消费频次
               <text class="font-middle">(å¹´)</text>
               <text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
            </view>
            <view class="charts-box">
                  <qiun-data-charts type="mix"
                     :chartData="userARPU" 
                     :reshow="delayload"
                     :canvas2d="isCanvas2d"
                     canvasId="two_b"
                     :opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
            </view>
         </view>
         <view class="split_line"></view>
			
         <!-- å¾®å®¢ç¾¤è¿è¥-->
         <view class="friend_operate">
            <view class="title">活跃会员分布
               <text class="font-middle">(最近活跃时间)</text>
            </view>
            <senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol" :computedCol="dataTable.computedCol" :formatCol="dataTable.formatCol"></senior-table>
         </view>
         <view class="split_line"></view>
			
         <!-- X商品脱落率-->
         <view class="friend_operate">
            <view class="title">
               X（慢病） å•†å“è„±è½çŽ‡
            </view>
            <view style="display: flex;justify-content: space-between;">
               <view v-for="(item,index) in xProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
                  <qiun-data-charts 
                     type="arcbar" 
                     :chartData="item" 
                     :canvasId="'two_c_'+ index" 
                     :canvas2d="true"
                     :reshow="delayload"
                     :opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
               </view>
            </view>
         </view>
			
         <!-- æ…¢ç—…病种脱落率-->
         <view class="friend_operate">
            <view class="title">慢病病种脱落率
            </view>
            <view class="charts-box">
               <qiun-data-charts type="mix"
                  :chartData="illnessDropPrecent" 
                  :reshow="delayload"
                  :canvas2d="true"
                  canvasId="two_d"
                  :opts="{yAxis:{data:[{title: ''}]}}"/>
            </view>
         </view>
			
         <!-- W商品脱落率-->
         <view class="friend_operate">
            <view class="title">
               W（保健） å•†å“è„±è½çŽ‡
            </view>
            <view style="display: flex;justify-content: space-between;">
               <view v-for="(item,index) in wProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
                  <qiun-data-charts 
                     type="arcbar" 
                     :chartData="item" 
                     :canvasId="'two_e_'+index" 
                     :canvas2d="true"
                     :reshow="delayload"
                     :opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
               </view>
            </view>
         </view>
      </scroll-view>
      <view  v-else class="container padding_stand-big normal_color">
         <li class="iconfont icon-cry cry"></li>暂无数据
      </view>
   </view>
</template>

<script>
   import DataProgress from "../data-progress/data-progress.vue"
   import SeniorTable from "../data-table/senior-table.vue"
	
   import userOperateLineBar from '../../static/json/user-operate/1.json';
   import userActive from '../../static/json/user-operate/2.json';
   import userConsume from '../../static/json/user-operate/3.json';
   import userARPU from '../../static/json/user-operate/4.json';
   import dataTable from "../../static/json/user-operate/6.json"
   import xProductDropPrecent from '../../static/json/user-operate/7.json';
   import wProductDropPrecent from '../../static/json/user-operate/9.json';
   import illnessDropPrecent from '../../static/json/user-operate/8.json';
	
	
   export default {
      name:'user-operate',
      props: {
         scrollHeight:{
            type:String,
            default:"600px"
         }
      },
      components:{
         DataProgress,SeniorTable
      },
      data() {
         return {
            userOperateLineBar,
            userActive,
            userConsume,
            userARPU,
            xProductDropPrecent,
            wProductDropPrecent,
            illnessDropPrecent,
            dataTable,
            delayload:false,
            isCanvas2d:Config.ISCANVAS2D
         }
      },
      mounted() {
         this.getData();
      },
      methods:{
         async getData(){
            uni.showLoading();
            await setTimeout(() => {
               this.delayload = true;
               uni.hideLoading();
            }, 1000)
         }
      }
   }
</script>

<style scoped lang="less">
   .content{
      padding-top: 10rpx;
      .progress,.firend_operate{
         padding: 0 10rpx;
      }
      .progress{
         margin-bottom: 20rpx;
      }
      .friend_operate{
         padding: 30rpx 20rpx;
         .title{
            text-align:left;
            margin-bottom: 30rpx;
            font-size: 40rpx;
         }
         .trend_title{
            float: right;
            font-size: 22rpx;
            color: #ff9900;
            margin-top: 20rpx;
         }
      }
   }
</style>