lichunlei
/
cyb_configserver_com


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>产品中心-我的业绩-创业帮</title>
    <meta name="keywords" content="产品中心-我的业绩-创业帮">
    <meta name="description" content="产品中心-我的业绩-创业帮">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,shrink-to-fit=no,user-scalable=no" name="viewport" viewport="cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="apple-mobile-web-app-title" content="产品中心-我的业绩-创业帮">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="./static/css/main.css">
    <style>
      .screenroll::-webkit-scrollbar {
          display: none;  
        }
    </style>
  </head>
  <body class="bgc-back pb0 ovh">
    <div class="iphonetitle"> </div>
    <div id="app" v-cloak>
      <van-nav-bar class="camp_title user_title_normal f16" title="我的业绩" @click-left="goback" v-if="toptitleisshow" left-arrow v-cloak>
        <template #left> 
          <van-icon name="arrow-left" color="#333" size="20"></van-icon>
        </template>
      </van-nav-bar>
      <div class="screenroll">
        <div class="performance_toppanel ovh">
          <div class="title df mt8 c333">
            <div class="time" @click="showDate = true"><span>{{nowdate}}</span>
              <van-icon name="arrow"> </van-icon>
            </div>
            <div class="f12">本月业绩每日上午统一更新(不含当日)</div>
          </div>
        </div>
        <div class="performance_panel bgcfff">
          <div class="title df">
            <div class="f14 c333 b">个人交易</div>
            <div class="pic"></div>
          </div>
          <div class="maininfo">
            <div class="amount df" @click="gopersonalachievement">
              <div class="echarts" ref="echartpersonal" style="pointer-events: none;"></div>
              <div class="data">
                <div class="f14 c999">总交易额(元)
                  <van-icon name="arrow"> </van-icon>
                </div>
                <div class="money"> {{personelinfo.TotalAmount}}</div>
              </div>
            </div>
            <div class="detailinfo df">
              <div class="bycard">
                <div class="f12 c999"> <span class="roll dib"></span><span>大额交易(元)</span></div>
                <div class="f14 c666 money">{{personelinfo.TotalServiceProfit}}</div>
              </div>
              <div class="bycloud">
                <div class="f12 c999"> <span class="roll dib"></span><span>小额交易(元)</span></div>
                <div class="f14 c666 money">{{personelinfo.TotalTradeProfit}}</div>
              </div>
            </div>
          </div>
          <div class="user df rel">
            <div class="bycard">
              <div class="f12 c999"> <span class="mr12">累计总创客(人)</span></div>
              <div class="f14 c666 all">{{personelinfo.TotalMaker}}</div>
            </div>
            <div class="bycloud ml60">
              <div class="f12 c999"> <span>累计订单数</span></div>
              <div class="c666 add">{{personelinfo.TotalOrder}}</div>
              <div class="abs righticon"></div>
            </div>
          </div>
          <div class="user df rel">
            <div class="bycard">
              <div class="f12 c999"> <span>累计活动商户(户)</span></div>
              <div class="f14 c666 all">{{personelinfo.TotalActMerchant}}</div>
            </div>
          </div>
        </div>
        <div class="performance_panel bgcfff teampanel">
          <div class="title df">
            <div class="f14 c333 b">创客业绩</div>
            <div class="pic"></div>
          </div>
          <div class="maininfo">
            <div class="amount df" @click="goteamachievement">
              <div class="echarts" ref="echartpersonal2team" style="pointer-events: none;"></div>
              <div class="data">
                <div class="f14 c999">总交易额(元)
                  <van-icon name="arrow"> </van-icon>
                </div>
                <div class="money">{{teaminfo.TotalAmount}}</div>
              </div>
            </div>
            <div class="detailinfo df">
              <div class="bycard">
                <div class="f12 c999"> <span class="roll dib"></span><span>大额交易(元)</span></div>
                <div class="f14 c666 money">{{teaminfo.TotalServiceProfit}}</div>
              </div>
              <div class="bycloud">
                <div class="f12 c999"> <span class="roll dib"></span><span>小额交易(元)</span></div>
                <div class="f14 c666 money">{{teaminfo.TotalTradeProfit}}</div>
              </div>
            </div>
          </div>
          <div class="user df rel">
            <div class="bycard">
              <div class="f12 c999"> <span class="mr12">累计总创客(人)</span></div>
              <div class="f14 c666 all">{{teaminfo.TotalMaker}}</div>
            </div>
            <div class="bycloud ml60">
              <div class="f12 c999"> <span>总订单数</span></div>
              <div class="c666 add"> {{teaminfo.TotalOrder}}</div>
            </div>
          </div>
          <div class="user df rel">
            <div class="bycard">
              <div class="f12 c999"> <span>累计活动商户(户)</span></div>
              <div class="f14 c666 all">{{teaminfo.TotalActMerchant}}</div>
            </div>
            <div class="bycloud ml60">
              <div class="f12 c999"> <span>新增活动商户</span></div>
              <div class="c666 add">{{teaminfo.TotalTeamProfit}}</div>
              <div class="abs righticon"></div>
            </div>
          </div>
        </div>
      </div>
      <van-popup class="product_mymerchant_transaction" v-model="showDate" position="bottom" :style="{ height: '50%' }" v-cloak>
        <van-datetime-picker v-model="currentDate" type="year-month" :min-date="minDate" :max-date="maxDate" :formatter="formatter" @cancel="showDate = false" @confirm="onConfirmDate"></van-datetime-picker>
      </van-popup>
    </div>
    <script src="./static/js/echarts.min.js"></script> 
    <script src="./static/js/klm-vv.min.js"></script>
    <script src="./static/js/appfunc.min.js"></script>
    <script src="./static/js/klm-axios-config.js"></script>
    <script src="./static/js/publicfn.js"></script>
    <script>
      function OnStart(){
        PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      };
      // 通过 CDN 引入时不会自动注册 Lazyload 组件
      // 可以通过下面的方式手动注册
      Vue.use(vant.Lazyload);
      //--- PublicLib.SetStatusBarStyle({type:'light', isShow:1});
      // 在 #app 标签下渲染一个按钮组件
      let app = new Vue({
        el: '#app',
        data() {
          return {
            toptitleisshow:true,
            ecgart1: [
              { value: 0, name: '暂时没有数据' },            
            ],
            personelinfo:{
            },
            teaminfo:{
            },
            ecgart2team: [
              //- 默认空数据
              { value: 0, name: '暂时没有数据' },
            ],
            showDate: false,
            currentDate: new Date(),
            minDate: new Date(new Date().getFullYear(),(new Date().getMonth() - 5)),
            maxDate: new Date(),
            nowdate: '',
          };
        },
        created(){
          //- this.toptitleisshow = toptitleisshow;
          this.onConfirmDate();
        },
        methods: {
          formatter(type, val) {
            if (type === 'year') {
              return `${val}年`;
            } else if (type === 'month') {
              return `${val}月`;
            } else if (type === 'day') {
              return `${val}日`;
            }
            return val;
          },
          onConfirmDate() {
            this.showDate = false;
            this.nowdate = this.currentDate.getFullYear() + '-' + (this.currentDate.getMonth() + 1);
            this.getperformanceinfo();
            this.getteaminfo();
          },
          onConformateDate(){
            return fillzero(formatDate(this.currentDate.getFullYear(),this.currentDate.getMonth() + 1));
          },
          echartpersonal(){
            var myChart = echarts.init(this.$refs.echartpersonal);
            const option = {
              tooltip: {
                show:false,
                trigger: 'item'
              },
              legend: {
                show:false,
                top: 'center',
                left: 'center'
              },
              color:['#EDE9E9','#FF574D','#FFD320'],
              series: [
                {
                  type: 'pie',
                  radius: ['60%', '100%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: false,
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data:this.ecgart1
                }
              ]
            };
            myChart.setOption(option);
          },
          echartpersonal2team(){
            var myChart = echarts.init(this.$refs.echartpersonal2team);
            const option = {
              tooltip: {
                show:false,
                trigger: 'item'
              },
              legend: {
                show:false,
                top: 'center',
                left: 'center'
              },
              color:['#EDE9E9','#FF574D','#FFD320'],
              series: [
                {
                  type: 'pie',
                  radius: ['60%', '100%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: false,
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data:this.ecgart2team
                }
              ]
            };
            myChart.setOption(option);
          },
          //- 获取个人交易
          async getperformanceinfo(){
            PublicLib.ShowLoading({Message:''});
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/pos/usertradedaysummary/personalperformance',JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('个人交易获取失败！');
            PublicLib.HideLoading();
            if(this.onConformateDate() === fillzero(formatDate(new Date().getFullYear(),new Date().getMonth() + 1))){
              res.data = {
                TotalActMerchant: 19,
                TotalAmount: 5321,
                TotalMaker: 12,
                TotalOrder: 9,
                TotalServiceProfit: 3220,
                TotalTeamProfit: 0,
                TotalTradeProfit: 2101           
              }
            }else{
              res.data = {
                TotalActMerchant: 0,
                TotalAmount: 0,
                TotalMaker: 0,
                TotalOrder: 0,
                TotalServiceProfit: 0,
                TotalTeamProfit: 0,
                TotalTradeProfit: 0            
              }
            };
            this.personelinfo = res.data;
            if(res.data.TotalAmount === 0) {
              return this.echartpersonal();
            };
            this.ecgart1 = [{value:0,name:'空'},{value:res.data.TotalServiceProfit,name:'刷卡'},{value:res.data.TotalTradeProfit,name:'云闪付'}];
            this.echartpersonal();
          },
          //- 获取计奖交易
          async getteaminfo(){
            const UserId = PublicLib.getCookieInfo('userId');
            const res = await getRequest('api/v1/pos/usertradedaysummary/teamperformance',JSON.stringify({TradeMonth:this.onConformateDate(),UserId}));
            if(res.status !== '1')return tips('计奖交易获取失败！');
            console.log(res)
            if(this.onConformateDate() === fillzero(formatDate(new Date().getFullYear(),new Date().getMonth() + 1))){
              res.data = {
                TotalActMerchant: 35,
                TotalAmount: 15260,
                TotalMaker: 29,
                TotalOrder: 56,
                TotalServiceProfit: 10357,
                TotalTeamProfit: 37,
                TotalTradeProfit: 4903        
              }
            }else{
              res.data = {
                TotalActMerchant: 0,
                TotalAmount: 0,
                TotalMaker: 0,
                TotalOrder: 0,
                TotalServiceProfit: 0,
                TotalTeamProfit: 0,
                TotalTradeProfit: 0    
              }
            };
            this.teaminfo = res.data;
            if(res.data.TotalAmount === 0) {
              return this.echartpersonal2team();
            };
            this.ecgart2team = [{value:0,name:'空'},{value:res.data.TotalServiceProfit,name:'刷卡'},{value:res.data.TotalTradeProfit,name:'云闪付'}];
            this.echartpersonal2team();
          },
          trendpic(val){
            PublicLib.putCookieInfo('trendtype', val);
            PublicLib.Goto({Url:'product-trendchart'});
          },
          gopersonalactive(){
            PublicLib.Goto({Url:'merchant-personal-active'});
          },
          mymerchant(){
            PublicLib.Goto({Url:'creater-list'});
          },
          goback(){
            PublicLib.GoBack({Level:1});
          },
          gopersonalachievement(){
            PublicLib.Goto({Url:'personal-achievement1'});
          },
          goteamachievement(){
            PublicLib.Goto({Url:'team-achievement1'});
          },
          goteamactive(){
            PublicLib.Goto({Url:'merchant-active'});
          }
        }
      });
    </script>
  </body>
</html>