<style scoped>   
.ct-row {  
  border-top: 1px solid #c8c8c8 !important;  
  margin-bottom:0; 
  border-width:0;
  margin-top: 0 !important;    
} 
.fW{
  margin: 0 5px;
} 
</style>
<template> 
<div>
  <div style="height: 140px; width: 100%; background: #4fa1a4;">
    <div style="width: 1003px; height: 140px; margin: 0 auto; display: flex; align-items: center;">
      <div class="ep-title" style="position:absolute; z-index: 9; margin: 0;">
          <div class="ep-pic">
               <img v-show="userinfo.pictcontent.length >0" src="{{userinfo.pictcontent}}">
               <avatars v-else  :json-str="avatar"></avatars>
          </div> 
          <div class="ep-cast text-color-white">
            <div class="f-size18">
                {{userinfo.chinesename}}  
            </div>
            <div class="f-size18">{{userinfo.realname}}&nbsp;&nbsp;
            <em class="f-size14" v-show="userinfo.roletype == 1">管理员</em>
            <em class="f-size14" v-show="userinfo.roletype == 2">业务员</em>
            <em class="f-size14" v-show="userinfo.roletype == 3">业务主管</em>
            </div>
          </div>
        </div>
    </div>
  </div>

  <div style="background-color: #f3f5f7;">
    <div class="container resource close-left-menu  clearfix" style="position:relative; background-color: #f3f5f7;">
      <div class="fl" style="width:1003px; margin-top: 45px;">
          
          <div class="center-left fl" style="width:520px;">
            <div class="ctable ct-parent"> 
            <div class="ct-row hover-none bd-none pb0 clearfix" :class="{ 'active': activeI[0] }" >
              <div class="row-line" @click="activeIClick(0)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em ml-20"></em><em class="text-color-blue f-size18 ml-20">资料完善提醒</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">{{more.total}}</em>类资料等待完善</span>
                 <span class="ct-col w80 t-left cur-poin">
                  <div class="stretch mt-5" :class="{ 'active': activeI[0] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
              </div>
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[0]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead> 
                  <tbody>
                    <tr class="t-left" v-for="licalertlist in getLicAlertlist">
                      <td class="w150">{{licalertlist.item}}</td>
                      <td class="w150 text-color-red">完整率
                      <em>{{licalertlist.integrityrate}}*100</em>%</td>
                      <td class="w100"><a href="javascript:void(0)" v-link="{path: '/einfor'}" class="fr button-green btn">去完善</a> </td>
                    </tr> 
                  </tbody>
                </table>
                <div style="line-height:55px; margin-bottom:5px;">
                   <span class="text-color-red">请尽快完善资料</span>
                  <a href="javascript:void(0)" v-link="{path: '/einfor'}" class="fr button-green btn">查看更多详情</a> 
                </div>
                
              </div>
            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix" :class="{ 'active': activeI[1] }" >
              <div class="row-line" @click="activeIClick(1)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em1 ml-20"></em><em class="text-color-blue f-size18 ml-20">证照到期提醒</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">{{more1.total}}</em>张证照存在过期风险</span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[1] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
              </div>
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[1]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead>
                  <tbody>
                    <tr class="t-left" v-for="receiptInfo in getExpReminderDaysList">
                      <td class="w150">{{receiptInfo.lcname}}
                        <div class="text-color-blue">
                          {{receiptInfo.remarks}}
                        </div>
                      </td>
                      <td class="w150 text-color-red ml-10" :class='{"pt20":receiptInfo.jbmark!="1"}' v-if="receiptInfo.diffdate > 0"><em>{{receiptInfo.diffdate}}</em>天到期</td>
                      <td class="w150 text-color-red pt20 ml-10" v-else>已过期<em>{{Math.abs(receiptInfo.diffdate)}}</em>天</td>
                      <td class="w100 pt0" :class='{"pt5":receiptInfo.jbmark!="1"}'>
                        <!-- 企业资料 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="1"' v-link="{path: '/einfor'}">去换证</a> 
                        <!-- 生产厂商 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="2"' v-link="{path: '/cert/certContractorList'}">去换证</a> 
                        <!-- 代理商 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="3"' v-link="{path: '/cert/certAgentList'}">去换证</a> 
                        <!-- 售后服务机构 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="4"' v-link="{path: '/cert/certSaleList'}">去换证</a> 
                        <!-- 医疗器械注册证 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="5"' v-link="{path: '/cert/certCompleteList'}">去换证</a> 
                        <!-- 经销授权书 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="6"' v-link="{path: '/cert/certAuthList'}">去换证</a> 
                        <!-- 销售代表授权书 -->
                        <a href="###" class="fr button-green btn" v-if='receiptInfo.jbmark=="4"' v-link="{path: '/cert/certAuthorization'}">去换证</a> 
                      </td>
                    </tr> 
                  </tbody>
                </table>
                <div style="line-height:55px; margin-bottom:5px;">
                   <span class="text-color-red">请尽快去更换证照</span>
                  <a href="javascript:void(0)" v-link="{path: '/cert/certCompleteList'}" class="fr button-green btn">查看更多详情</a> 
                </div>
                
              </div>


            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix" :class="{ 'active': activeI[2] }" >
              <div class="row-line" @click="activeIClick(2)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em2 ml-20"></em><em class="text-color-blue f-size18 ml-20">资料审核进程</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">{{more2.total}}</em>类资料变更在审核中</span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[2] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
              </div>
              
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[2]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead>
                  <tbody>
                    <tr class="t-left">
                      <td class="w150">基本资料</td>
                      <td class="w150"></td>
                      <td class="w100"></td>
                    </tr>
                    <tr class="t-left" v-for="reminderdays in getVariationProcesslist">
                      <td>{{reminderdays.variationtype}}</td>
                      <td><em>{{reminderdays.count}}</em>项变更</td>
                      <td class="text-color-red">{{reminderdays.approvestate}}</td>
                    </tr> 
                  </tbody>
                </table>
                <!-- v-link="{path: '/cert/certCompleteList'}" -->
                <a href="javascript:void(0)"  class="fr button-green btn mb-10" v-link="{path:'/send'}">查看更多详情</a>  
              </div>
            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix" :class="{ 'active': activeI[3] }" >
              <div class="row-line" @click="activeIClick(3)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em3 ml-20"></em><em class="text-color-blue f-size18 ml-20">订单提醒</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">{{more3.total}}</em>张订单急待处理</span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[3] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
                
              </div>
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[3]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead>
                  <tbody>
                    <tr class="t-left" v-for="poalertlist in getPoAlertlist">
                      <td class="w150">{{poalertlist.customer}}</td>
                      <td class="w250 text-color-red">
                      <p class="fl date text-color-gray mr-20 w80">{{poalertlist.inputdate}}</p>
                        {{poalertlist.medplanbillno}}<br>{{poalertlist.dataintroduction}}
                       </td>
                      <td class="w100">
                          <a href="javascript:void(0)"v-if='poalertlist.dataintroduction=="待受理"' v-link="{path: '/trpo/orderDispose'}" class="fr button-green btn">去处理</a>
                          <a href="javascript:void(0)"v-else v-link="{path: '/trpo/orderOutlog'}" class="fr button-green btn">去处理</a>  
                          
                      </td>
                    </tr> 
                  </tbody>
                </table>
                <div style="line-height:55px; margin-bottom:5px;">
                   <span class="text-color-red">请尽快去处理订单</span>
                  <a href="javascript:void(0)" v-link="{path: '/trpo/orderDispose'}" class="fr button-green btn">查看更多详情</a> 
                </div>
                
              </div>
            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix" :class="{ 'active': activeI[4] }" >
              <div class="row-line" @click="activeIClick(4)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em4 ml-20"></em><em class="text-color-blue f-size18 ml-20">结算提醒</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">{{more4.total}}</em>张结算单待处理</span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[4] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
              </div>
             <div class="row-launch bgc-none bd-none pd0" v-show="activeI[4]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead>
                  <tbody>
                    <tr class="t-left" v-for="settlealertlist in getSettleAlertlist">
                      <td class="w150">{{settlealertlist.purchasercorpname}}</td>
                      <td class="w250 text-color-red">
                      <p class="fl date text-color-gray mr-20 w80">{{settlealertlist.settledate}}</p>
                        {{settlealertlist.settlebillno}}
                       </td>
                      <td class="w100"><a v-link="{path: '/trsettle/settlementHospitalList'}" class="fr button-green btn">去处理</a> </td>
                    </tr> 
                  </tbody>
                </table>
                <div style="line-height:55px; margin-bottom:5px;">
                   <span class="text-color-red">请尽快去处理结算单</span>
                  <a href="javascript:void(0)" v-link="{path: '/trsettle/settlementHospitalList'}" class="fr button-green btn">查看更多详情</a> 
                </div>
                
              </div>
            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix hide" :class="{ 'active': activeI[5] }" >
              <div class="row-line" @click="activeIClick(5)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em5 ml-20"></em><em class="text-color-blue f-size18 ml-20">信贷提醒</em></span>
                <span class="ct-col w250 t-left f-size14 cur-poin">有<em class="text-color-blue fW">1</em>条提醒</span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[5] }"> 
                  </div>
                  <em class="icon-d ml-20"></em>
                </span>
              </div>
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[5]">
                <div class="credit ml-50">
                    <p class="btn-lin" v-show="firstStep"><a href="javascript:void(0);" class="fl button-green btn ml-50 active" @click="fn()">信贷申请进</a> <a href="javascript:void(0);" class="fr button-green btn" @click="fn1()">还款提醒</a></p>
                    <p class="btn-lin" v-show="secondStep"><a href="javascript:void(0);" class="fl button-green btn ml-50 " @click="fn()">信贷申请进</a> <a href="javascript:void(0);" class="fr button-green btn active" @click="fn1()">还款提醒</a></p>

                    <div class="mb-10" v-show="firstStep">
                    <p class="remind">
                    <lable class="fl ml-10">还款提醒　>>></lable>
                    <lable class="fl ml-5">资料审核　>>></lable>
                    <lable class="fl ml-5">资信审核　>>></lable>
                    <lable class="fl w60 ml-5">放款</lable>
                    </p>
                    <p class="h-20">
                    <em class="fl circular ml-35"></em> 
                    <em class="fl line"></em>
                    <em class="fl circular"></em>
                    <em class="fl line"></em>
                    <em class="fl ring"></em>
                    <em class="fl line"></em>
                    <em class="fl circular-default "></em>
                    </p>
                    <p class="qy w400 h-20 mt-15"> 
                    <lable class="fl ml-105">传世般若</lable>
                    <lable class="fl ml-25">金融机构</lable>
                    <lable class="fl ml-25">金融机构</lable>
                    </p>
                    <p class="qy w400 h-20 mt-20"> 
                    <lable class="fl ml-105">已通过</lable>
                    <lable class="fl ml-25">审核中</lable> 
                    </p>
                    <p class="qy w400 h-40 mt-10"> 
                    <lable class="fl ml-105">2016-02-01<br>12:00:00</lable>
                    <lable class="fl ml-25">2016-02-01<br>12:00:00</lable>
                    <lable class="fr">2016-02-01<br>12:00:00</lable>
                    </p>
                    </div>

                    <div v-show="secondStep">
                    <ul>
                      <li>
                      <p class="mt-20">您有 1 笔贷款，将在30天后到期<br>还款期: 2016-05-31</p>
                      <p class="hkje fr"><em class="fl">待还款金额</em><em class="fl text-color-red f-size30 ml-60">120.00</em><em class="fl ml-20">万元</em></p>
                      </li>
                      <li>
                      <p class="mt-20">您有 1 笔贷款，将在30天后到期<br>还款期: 2016-05-31</p>
                      <p class="hkje fr"><em class="fl">待还款金额</em><em class="fl text-color-red f-size30 ml-60">120.00</em><em class="fl ml-20">万元</em></p>
                      </li> 
                    </ul> 
                    </div>


                </div>
                <div style="line-height:55px; margin-bottom:5px;" v-show="firstStep">
                   <span class="text-color-red">请尽耐心等待</span>
                  <a href="###" class="fr button-green btn">查看更多详情</a> 
                </div> 
                <div style="line-height:55px; margin-bottom:5px;" v-show="secondStep">
                   <span class="text-color-red">请留意还款时间，切勿逾期</span>
                  <a href="###" class="fr button-green btn">查看更多详情</a> 
                </div> 
          </div> 
            </div>
            <div class="ct-row hover-none bd-none pb0 clearfix hide"  style="border-bottom: 1px solid #c8c8c8 !important;" :class="{ 'active': activeI[6] }" >
              <div class="row-line" @click="activeIClick(6)">
                <span class="ct-col w190 t-left cur-poin"><em class="icon-em6 ml-20"></em><em class="text-color-blue f-size18 ml-20">异常提醒</em></span>
                <span class="ct-col w250 f-size14 cur-poin"></span>
                <span class="ct-col w80 t-left">
                  <div class="stretch mt-5" :class="{ 'active': activeI[6] }"> 
                  </div> 
                </span>
              </div>
              <div class="row-launch bgc-none bd-none pd0" v-show="activeI[6]">
                <table class="itable bt-gray">
                  <thead>
                    <!-- <tr>
                      <th>基本资料</th>
                    </tr> -->
                  </thead>
                  <tbody>
                    <tr class="t-left"> 
                       <td class="w133">
                        2016-01-04<br>13:00
                       </td>
                       <td class="w133"> 
                        企业证照<br>变更
                       </td>  
                       <td class="w133">
                        推送未成功<br>异常编号:BG010101  
                       </td> 
                    </tr>
                    <tr class="t-left"> 
                       <td class="w133">
                        2016-01-04<br>13:00
                       </td>
                       <td class="w133"> 
                        采购订单<br>CGDD0001
                       </td>  
                       <td class="w133">
                        订单未到达<br>异常编号:BG010321  
                       </td> 
                    </tr> 
                  </tbody>
                </table>
                <div style="line-height:55px; height:55px; margin-bottom:5px;"> 
                  <a href="###" class="fr button-green btn">查看更多详情</a> 
                </div>
                <div class="w400 text-color-red mb-20 f-size12">
                  <p>我们对系统产生的异常给您造成的不便，怀有十二万分的歉意！<br>工程师们正在火速排除异常，需要花费一些时间，请耐心等待！</p>
                  <p class="mt-10">您也可以直接联系客服人员，获得最近进展情况！<br>客服电话：400-400-400<br>客服QQ   ：88888888  99999999</p> 
                </div>
                <p class="icon-yctx"></p>
              </div>
            </div>

          
            </div>  
          </div>
          <div class="center-right fr" style="height: auto;"> 
                <p class="bt-sty ml-20 pl20 text-color-white">近三个月供应金额</p>
                  <div class="ml-20" id="echart1" style="width:441px; height:273px;"></div> 
                <p class="bt-sty ml-20 pl20 text-color-white">供应总览</p>
                  <ul class="ml-40">
                      <li>
                      <p class="gy mt-30 fl">平台累计供应金额</p>
                      <p class="gy mt-30 fl">供应客户总数</p>
                      <p class="gy mt-30 fl">供应商品总数</p>
                      </li> 
                      <li>
                      <div class="sz-je fl f-size30 text-color-blue"><p class="sz">{{overview.sumamount}}</p></div>
                      <div class="sz-kh-sum fl f-size30 text-color-blue"><p class="sz">{{overview.customers}}</p></div>
                      <div class="sz-sp-sum fl f-size30 text-color-blue"><p class="sz">{{overview.count}}</p></div>
                      </li>
                      <li>
                      <p class="gy fl">万元</p>
                      <p class="gy fl">家</p>
                      <p class="gy fl">个</p>
                      </li> 
                  </ul>
                  
                <div v-show="getSupRanks.length > 0">
                <p class="bt-sty ml-20 pl20 text-color-white" >排名</p> 
                  <p class="mt-30 ml-20 pm f-size16">2016年度供应商排名</p> 
                  <div class="ml-20 gys-pm ">
                    <p class="ml-20 mt-10">客户</p>
                    <div class="fl mt-10 mc-all">
                        <dl  v-for="setsuprankslist in getSupRanks">
                        <dd class="w170 h-108 dd1 fl">
                          <em v-show="setsuprankslist.ranking == 3" class="iocn-one ml-20 mt-20"></em>
                          <em v-show="setsuprankslist.ranking == 2" class="iocn-two ml-20 mt-20"></em>
                          <em v-show="setsuprankslist.ranking == 1" class="iocn-three ml-20 mt-20"></em>
                          <p class="f-size12 w100 fr mt-20 mr-20">{{setsuprankslist.customer}}<br>
                          <em class="text-color-blue">{{setsuprankslist.sumamount}}</em></p>
                        </dd>
                        <dd class="w130 h-108 dd2 fl">
                        <p v-show="setsuprankslist.ranking == 3" class="one fl mt-20"></p>
                        <p v-show="setsuprankslist.ranking == 2" class="two fl mt-20"></p>
                        <p v-show="setsuprankslist.ranking == 1" class="three fl mt-20"></p>
                        </dd>
                        <dd class="w140 h-108 dd2 fl"> 
                            <p class="f-size12 mt-20">
                                排名周期{{timedate.year}}年度{{timedate.month}}个月<br>
                                当前排位第<em class="text-color-blue">{{setsuprankslist.currentranking}}</em>位<br>
                                达标位第<em class="text-color-blue">{{setsuprankslist.standardranking}}</em>位<br>
                                总排名<em class="text-color-blue">{{setsuprankslist.totalranking}}</em>位
                            </p>
                        </dd> 
                        </dl> 
                      </div>
                  </div> 
                  <p class="p-red fl"></p><p class="p-green fl"></p><p class="p-blue fl"></p>
                  <p class="p-c fl t-center mt-5">差</p><p class="p-z fl t-center mt-5">中</p><p class="p-y fl t-center mt-5">右</p>
                   </div>
          </div> 
      </div> 
    </div>

    
  </div>

<link rel="stylesheet" type="text/css" href="/styles/main-new.css"> 
</div>  
</template>



<script>     
  module.exports = {
    data: function () {
      return { 
        // 个人资料 
        userinfo:{ 
        realname:'',
        roletype:'',
        pictcontent:'',
        chinesename:'',
        }, 
        avatar: '',
        imgArry:[],
        activeI:[],
        //点击显示隐藏
        willShow:true,  
        willShow1:false,  
        firstStep: true,                  // 第1个页面控制  
        secondStep: false,                // 第2个页面控制  
        // 资料完善提醒
        getLicAlertlist:[], 
        // 证照到期提醒
        getExpReminderDaysList:[], 
        // 资料审核进程
        getVariationProcesslist:[],
        // 订单提醒
        getPoAlertlist:[], 
        // 结算提醒
        getSettleAlertlist:[], 
        // 近三个月供应金额 
        getLastThreeMonAmount:[],
        arr1:[],
        arr2:[],
        lastthreemonamount:{ 
        mon:'',
        sumamount:'', 
        },
        // 供应总览
        getSupplyOverviewList:[],  
        overview:{ 
        sumamount:'',
        customers:'',
        count:'',
        },
        // 排名
        getSupRanks:[],   
        more:{ 
          page:1,
          pageSize:30, 
          total:'',
         },
         timedate:{
              year:'',
              month:'',
         },  
         more1:{ 
          page:1,
          pageSize:30, 
          total:'',
         }, 
         more2:{ 
          page:1,
          pageSize:30, 
          total:'',
         }, 
         more3:{ 
          page:1,
          pageSize:30, 
          total:'',  
         }, 
         more4:{ 
          page:1,
          pageSize:30, 
          total:'',
         },      
         list:'',
      };
    },
    methods: {
      //控制信贷、还款提醒切换
      state: function(firstStep,secondStep){
        var self = this;
        self.firstStep = firstStep;     
        self.secondStep = secondStep; 
      }, 
       fn:function(){
         var self = this;
        self.state(true,false);
          // if(this.willShow==true){
          //   this.willShow=false;
          //   this.willShow1=true;
          // }else{
          //   this.willShow=true;
          //   this.willShow1=false;
          // } 
        }, 
        fn1:function(){
           var self = this;
           self.state(false,true);
          // if(this.willShow1==true){
          //   this.willShow1=false;
          //   this.willShow=true;
          // }else{
          //   this.willShow1=true;
          //   this.willShow=false;
          // } 
        }, 
       // 个人资料
      getUserInfoList: function () {
        var self = this;   
        Ajax.post('/supplierhome/getUserInfo',self.userinfo)
            .then(function(response) {
          var data = response.data.data;  
          self.userinfo.realname = data.realname;
          self.userinfo.roletype = data.roletype;
          self.userinfo.chinesename = data.chinesename;
          // self.avatar = self.pictcontent;
          var picimg = data.pictcontent; 
          var jsonStr='', imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;
         if(picimg!=null && picimg.length>0){
            picimg=JSON.parse(picimg);
            for(var i=0;i<picimg.length;i++){
               var path=imgReg.test(picimg[i].original.path) ? picimg[i].original.path : picimg[i].original.path+picimg[i].original.name;
               jsonStr+=''+path+',';
            }
            jsonStr=jsonStr.substring(0,jsonStr.length-1); 
         }
         jsonStr+=''; 
          self.userinfo.pictcontent = jsonStr ;

        })
      },

      getThree: function () {  
        var self = this; 
        // 基于准备好的dom，初始化echarts实例 
        var myChart =echarts.init(document.getElementById('echart1'));  
        // 指定图表的配置项和数据
        var option = {
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '8%',
                bottom: '8%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : [],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'金额',
                    type:'bar',
                    barWidth: '10%',
                    data:[],
                }
            ]
        };
        Ajax.post('/supplierhome/getLastThreeMonAmount',self.lastthreemonamount)
            .then(function(response) {
          var data = response.data.data;  
          self.lastthreemonamount.mon = data.mon;
          self.lastthreemonamount.sumamount = data.sumamount;  
          var str= data;  
          for(var i=0;i<str.length;i++){  
             option.xAxis[0].data[i] = str[i].mon + '月' ;  
               }
             for(i=0;i<str.length;i++){  
              option.series[0].data[i] = str[i].sumamount; 
               } 
               // 使用刚指定的配置项和数据显示图表。 
              myChart .setOption(option);
        });
        
      }, 

      // 近三个月供应金额
      getThreeMonAmountList: function () {
        var self = this;   
        Ajax.post('/supplierhome/getLastThreeMonAmount',self.lastthreemonamount)
            .then(function(response) {
          var data = response.data.data;  
          self.lastthreemonamount.mon = data.mon;
          self.lastthreemonamount.sumamount = data.sumamount;  
          var str= data;  
          for(var i=0;i<str.length;i++){ 

                 self.arr1.push(str[i].mon); 
               }
             for(i=0;i<str.length;i++){ 
                   self.arr2.push(str[i].sumamount);
                   // arr2 = str[i].sumamount;  
               } 
        })
      }, 
       
      // 点击显示隐藏
      activeIClick: function(indexI){ 
        this.$set('activeI['+indexI+']',!this.activeI[indexI]); 
      }, 
      // 资料完善提醒
      getLicAlertList: function () {
        var self = this;  
        Ajax.post('/supplierhome/getLicAlertlist',self.more)
            .then(function(response) {
          var data = response.data.data; 
          self.$set("getLicAlertlist", data.list);
          self.more.total = data.total;
        })
      },

      // 证照到期提醒
      getLicenseExpirationReminderList: function () {
        var self = this; 
        // alert(123); 
        Ajax.post('/supplierhome/getExpReminderDaysList',self.more1)
            .then(function(response) {
          var data = response.data.data;
          //alert(data);
          self.$set("getExpReminderDaysList", data.list);
          self.more1.total = data.total;
        })
      },

       // 资料审核进程
      getVariationProcessList: function () {
        var self = this; 
        self.more2.pageSize = self.more2.pageSize + 1; 
        Ajax.post('/supplierhome/getVariationProcesslist',self.more2)
            .then(function(response) {
          var data = response.data.data; 
          self.$set("getVariationProcesslist", data.list);
          self.more2.total = data.total;
        })
      },

      // 订单提醒
      
      getPoAlertALLList: function () {
        var self = this;  
        //self.more3.pageSize = self.more3.pageSize + 1;
        Ajax.post('/supplierhome/getPoAlertlist',self.more3)
            .then(function(response) {  
          var data = response.data.data; 
          self.$set("getPoAlertlist", data.list); 
          self.more3.total = data.total;
        })
      },

      // 结算提醒
      getSettleAlertList: function () {
        var self = this;   
        Ajax.post('/supplierhome/getSettleAlertlist',self.more4)
            .then(function(response) {
          var data = response.data.data; 
          self.$set("getSettleAlertlist", data.list); 
          self.more4.total = data.total;
        })
      },
 
       // 供应总览
      getSupplyOverviewsList: function () {
        var self = this;   
        Ajax.post('/supplierhome/getSupplyOverviewList',self.overview)
            .then(function(response) {
          var data = response.data.data;  
          var str= data;  
          for(var i=0;i<str.length;i++){ 
            var years =   str[i].rankingcycle; 
            self.overview.sumamount = str[i].sumamount;
            self.overview.customers = str[i].customerscount;
            self.overview.count = str[i].goodscount;
            }  
          
        })
      },

      // 排名
      getSupRanksList: function () {
        var self = this;   
        Ajax.post('/supplierhome/getSupRanks')
            .then(function(response) {
          var data = response.data.data; 
          self.$set("getSupRanks", data);
          var str= data;  
          for(var i=0;i<str.length;i++){ 
            var years =   str[i].rankingcycle; 
            self.timedate.year = years.substring(0,4);
            self.timedate.month = years.substring(5,7);   
            } 
          
          

        })
      },





    },
    route: {
      activate:function () { 
        // 资料完善提醒
        this.getUserInfoList(); 
        // 资料完善提醒
        this.getLicAlertList();
        // 证照到期提醒
        this.getLicenseExpirationReminderList();
        // 资料审核进程
        this.getVariationProcessList();
        // 订单提醒
        this.getPoAlertALLList();
        // 结算提醒
        this.getSettleAlertList();
        // 近三个月供应金额
        // this.getThreeMonAmountList();
        // 供应总览
        this.getSupplyOverviewsList();
        // 排名
        this.getSupRanksList();
      }
    },
    ready:function(){
      var self=this;
      self.getThree();
    }
  };

</script>