<style lang="scss" scoped>
  .todayData {
    background-color: #F7F7F7;
    height: 100%;
    padding: 0 20px 20px 20px;
  }

  .todayTop {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: center;
  }

  .Check_Content {
    display: flex;
    background-color: #fff;
    padding: 20px 32px;
    height: 64px;
    box-sizing: border-box;
    border-radius: 12px;
  }

  .Check_ListContent {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .Check_Item {
    margin-right: 30px;
    font-size: 17px;
    color: rgba(0, 0, 0, .55);
    font-weight: 400;
    cursor: pointer;
  }

  .toDayCkclass {
    font-weight: 500;
    color: rgba(0, 0, 0, .9);
  }

  .check_Title {
    font-size: 17px;
    font-weight: 500;
    margin: 20px 0;
  }

  .Data_ListContent {
    display: flex;
    flex-wrap: wrap;
    display: -webkit-flex;
  }

  .Data_TotalTu {
    display: flex;
  }

  .Data_List {
    box-sizing: border-box;
    flex: 0 0 18.5%;
    padding: 21px;
    background-color: #fff;
    margin: 0 24px 24px 0;
    font-size: 14px;
  }

  .Data_List2 {
    box-sizing: border-box;
    flex: 0 0 18.5%;
    padding: 32px;
    background-color: #fff;
    margin: 0 19px 24px 0;
    font-size: 14px;
  }

  .Data_Inner {
    height: 136px;
  }

  .Data_Title {
    font-size: 17px;
    font-weight: 500;
  }

  .Data_Time {
    font-size: 14px;
    color: rgba(0, 0, 0, .5);
    margin-top: 3px;
  }

  .Data_wrapper {
    display: flex;
    height: 84px;
    justify-content: space-around;
    align-items: flex-end;
  }

  .Data_Left {
    flex: 1;
    margin-right: 10px;
    color: rgba(0, 0, 0, .9);
  }

  .Data_Span {
    font-size: 24px;
    vertical-align: text-bottom;
  }

  .Data_Ci {
    font-size: 14px;
    color: #999;
    vertical-align: 2px;
    margin-left: 8px;
  }

  .Data_Right {
    width: 95px;
  }

  .Data_One {
    margin-top: 3px;
    // display: flex;
    font-size: 14px;
    text-align: right;
  }

  .label_Day {
    color: rgba(0, 0, 0, .5);
    font-size: 14px;
    width: 30px;
    display: inline-block;
    text-align: right;
    margin-right: 5px;
  }

  .label_Number {
    flex: 1 1 0%;
    color: #fa5151;
  }

  .label_Cule {
    flex: 1 1 0%;
    color: #fa5151;
    display: inline-block;
    width: 60px;
  }

  .greenClass {
    color: #00ce8b !important;
    display: inline-block;
    width: 60px;
  }

  .topselect {
    ::v-deep {
      .el-input__inner {
        height: 40px !important;
      }
    }
  }

  .Data_ListBottom {
    box-sizing: border-box;
    padding: 32px;
    background-color: #fff;
    margin: 0 24px 24px 0;
    font-size: 14px;
  }
</style>
<template>
  <div class="todayData">
    <div class="todayTop">
      <div class="q-my-md text-dark" style="font-size:20px">
        平台数据
      </div>
      <div style="display:flex;">
        <el-date-picker v-model="dateList" style="width:380px;" type="daterange" :picker-options="pickerOptions0"
          align="right" value-format="yyyy-MM-dd" @change="searchData" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <el-select v-if="IsShowEmpQuery" class="topselect" v-model="msg.empList" @change="searchData"
          style="width:180px;margin-left:10px;" collapse-tags multiple filterable placeholder="请选择">
          <el-option v-for="item in myEmployeeList" :key="item.Id" :label="item.EmployeeName" :value="item.Id">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="Check_Content"
      v-if="(IsQueryAuth||CurrentUserInfo.IsMarket==1)||(IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1)">
      <div class="Check_ListContent">
        <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsMarket==1" @click="getSwitch(1)"
          :class="{'toDayCkclass':comType==1}">市场部数据统计</div>
        <div class="Check_Item" v-if="IsQueryAuth||CurrentUserInfo.IsCourseConsultant==1" @click="getSwitch(2)"
          :class="{'toDayCkclass':comType==2}">课程顾问部统计</div>
      </div>
    </div>
    <div v-show="comType==1">
      <div class="Check_Map">
        <div class="check_Title">今日实时数据</div>
        <div class="">
          <VueApexCharts type="line" height="350" :options="chartOptions" ref="apex" :series="series"></VueApexCharts>
        </div>
      </div>
      <div class="Check_Map" v-if="yesData">
        <div class="check_Title">访问核心数据</div>
        <div class="Data_ListContent">
          <div class="Data_List">
            <div class="Data_Inner">
              <div class="Data_Title">条数（资源量）</div>
              <div class="Data_Time">{{yesData.DayStr}} {{yesData.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{yesData.ClueCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.ClueCount,yesData.YestodayClue)>0}">
                      {{calcPercent(yesData.ClueCount,yesData.YestodayClue)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurWeekClue,yesData.LastWeekClue)>0}">
                      {{calcPercent(yesData.CurWeekClue,yesData.LastWeekClue)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurMonthClue,yesData.LastMonthClue)>0}">
                      {{calcPercent(yesData.CurMonthClue,yesData.LastMonthClue)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List">
            <div class="Data_Inner">
              <div class="Data_Title">有效数据量</div>
              <div class="Data_Time">{{yesData.DayStr}} {{yesData.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{yesData.FollowCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.FollowCount,yesData.YestodayFollow)>0}">
                      {{calcPercent(yesData.FollowCount,yesData.YestodayFollow)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurWeekFollow,yesData.LastWeekFollow)>0}">
                      {{calcPercent(yesData.CurWeekFollow,yesData.LastWeekFollow)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurMonthFollow,yesData.LastMonthFollow)>0}">
                      {{calcPercent(yesData.CurMonthFollow,yesData.LastMonthFollow)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List">
            <div class="Data_Inner">
              <div class="Data_Title">上门咨询</div>
              <div class="Data_Time">{{yesData.DayStr}} {{yesData.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{yesData.VisitCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.VisitCount,yesData.YestodayVisit)>0}">
                      {{calcPercent(yesData.VisitCount,yesData.YestodayVisit)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurWeekVisit,yesData.LastWeekVisit)>0}">
                      {{calcPercent(yesData.CurWeekVisit,yesData.LastWeekVisit)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurMonthVisit,yesData.LastMonthVisit)>0}">
                      {{calcPercent(yesData.CurMonthVisit,yesData.LastMonthVisit)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List">
            <div class="Data_Inner">
              <div class="Data_Title">试听邀约</div>
              <div class="Data_Time">{{yesData.DayStr}} {{yesData.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{yesData.TrialLessonCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.TrialLessonCount,yesData.YestodayTrialLesson)>0}">
                      {{calcPercent(yesData.TrialLessonCount,yesData.YestodayTrialLesson)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurWeekTrialLesson,yesData.LastWeekTrialLesson)>0}">
                      {{calcPercent(yesData.CurWeekTrialLesson,yesData.LastWeekTrialLesson)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurMonthTrialLesson,yesData.LastMonthTrialLesson)>0}">
                      {{calcPercent(yesData.CurMonthTrialLesson,yesData.LastMonthTrialLesson)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List" style="margin-right:0">
            <div class="Data_Inner">
              <div class="Data_Title">销售额（签约量）</div>
              <div class="Data_Time">{{yesData.DayStr}} {{yesData.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{yesData.SaleMoney}}</span>
                  <span class="Data_Ci">元</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.SaleMoney,yesData.YestodaySale)>0}">
                      {{calcPercent(yesData.SaleMoney,yesData.YestodaySale)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurWeekSale,yesData.LastWeekSale)>0}">
                      {{calcPercent(yesData.CurWeekSale,yesData.LastWeekSale)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(yesData.CurMonrhSale,yesData.LastMonthSale)>0}">
                      {{calcPercent(yesData.CurMonrhSale,yesData.LastMonthSale)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="comType==2">
      <div class="Check_Map">
        <div class="check_Title">今日实时数据</div>
        <div class="Data_ListContent">
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">试听邀约</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.TrialLessonCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.TrialLessonCount,ConsultObj.YestodayTrialLesson)>0}">
                      {{calcPercent(ConsultObj.TrialLessonCount,ConsultObj.YestodayTrialLesson)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurWeekTrialLesson,ConsultObj.LastWeekTrialLesson)>0}">
                      {{calcPercent(ConsultObj.CurWeekTrialLesson,ConsultObj.LastWeekTrialLesson)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurMonthTrialLesson,ConsultObj.LastMonthTrialLesson)>0}">
                      {{calcPercent(ConsultObj.CurMonthTrialLesson,ConsultObj.LastMonthTrialLesson)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">到访累计</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.VisitCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.VisitCount,ConsultObj.YestodayVisit)>0}">
                      {{calcPercent(ConsultObj.VisitCount,ConsultObj.YestodayVisit)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurWeekVisit,ConsultObj.LastWeekVisit)>0}">
                      {{calcPercent(ConsultObj.CurWeekVisit,ConsultObj.LastWeekVisit)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurMonthVisit,ConsultObj.LastMonthVisit)>0}">
                      {{calcPercent(ConsultObj.CurMonthVisit,ConsultObj.LastMonthVisit)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">转化率</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.Rates}}</span>
                  <span class="Data_Ci">%</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule">
                      {{ConsultObj.YestodayRates}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule">
                      {{ConsultObj.CurWeekRates}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule">
                      {{ConsultObj.CurMonthRates}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">有效回访总量</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.FollowCount}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.FollowCount,ConsultObj.YestodayFollow)>0}">
                      {{calcPercent(ConsultObj.FollowCount,ConsultObj.YestodayFollow)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurWeekFollow,ConsultObj.LastWeekFollow)>0}">
                      {{calcPercent(ConsultObj.CurWeekFollow,ConsultObj.LastWeekFollow)}}%
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurMonthFollow,ConsultObj.LastMonthFollow)>0}">
                      {{calcPercent(ConsultObj.CurMonthFollow,ConsultObj.LastMonthFollow)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">单资源回访平均数</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.AgFollow}}</span>
                  <span class="Data_Ci">次</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">日</span>
                    <span class="label_Cule">
                      {{ConsultObj.YestodayAgFollow}}
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">周</span>
                    <span class="label_Cule">
                      {{ConsultObj.CurWeekAgFollow}}
                    </span>
                  </div>
                  <div class="Data_One">
                    <span class="label_Day">月</span>
                    <span class="label_Cule">
                      {{ConsultObj.CurMonthAgFollow}}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">本周新签数</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.CurWeekOrderNum}}</span>
                  <span class="Data_Ci">单</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">上周</span>
                    <span class="label_Cule">
                      {{ConsultObj.LastWeekOrderNum}}单
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">本周签约金额</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div style="margin-top:20px;">
                <span class="Data_Span">{{ConsultObj.CurWeekOrderSale}}</span>
                <span class="Data_Ci">元</span>
              </div>
              <div class="Data_wrapper" style="height:25px;">
                <div class="Data_Left">
                  <span class="Data_Span"></span>
                  <span class="Data_Ci"></span>
                </div>
                <div class="Data_Right" style="width:100%;">
                  <div class="Data_One">
                    <span class="label_Day">上周</span>
                    <span class="label_Cule" style="width:90px;">
                      {{ConsultObj.LastWeekOrderSale}} 元
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">新签数累计</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div class="Data_wrapper">
                <div class="Data_Left">
                  <span class="Data_Span">{{ConsultObj.CurMonthOrderNum}}</span>
                  <span class="Data_Ci">单</span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">上月</span>
                    <span class="label_Cule">
                      {{ConsultObj.LastMonthOrderNum}}单
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">签约金额累计</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div style="margin-top:20px;">
                <span class="Data_Span">{{ConsultObj.CurMonthOrderSale}}</span>
                <span class="Data_Ci">元</span>
              </div>
              <div class="Data_wrapper" style="height:25px;">
                <div class="Data_Left">
                  <span class="Data_Span"></span>
                  <span class="Data_Ci"></span>
                </div>
                <div class="Data_Right">
                  <div class="Data_One">
                    <span class="label_Day">上月</span>
                    <span class="label_Cule">
                      {{ConsultObj.LastMonthOrderSale}} 元
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="Data_List2">
            <div class="Data_Inner">
              <div class="Data_Title">当月效能目标</div>
              <div class="Data_Time">{{ConsultObj.DayStr}} {{ConsultObj.WeekStr}}</div>
              <div style="margin-top:20px;">
                <span class="Data_Span">{{ConsultObj.CurMonthOrderGoal}}</span>
                <span class="Data_Ci">元</span>
              </div>
              <div class="Data_wrapper" style="height:25px;">
                <div class="Data_Left" style="width:20px;">
                  <span class="Data_Span"></span>
                  <span class="Data_Ci"></span>
                </div>
                <div class="Data_Right" style="width:122px;">
                  <div class="Data_One">
                    <span class="label_Day" style="width:56px;">完成进度</span>
                    <span class="label_Cule"
                      :class="{'greenClass':calcPercent(ConsultObj.CurMonthOrderSale,ConsultObj.CurMonthOrderGoal)>0}">
                      {{calcPercent(ConsultObj.CurMonthOrderSale,ConsultObj.CurMonthOrderGoal)}}%
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="comType==1">
      <div class="Check_Map">
        <div class="check_Title">统计数据</div>
        <div class="Data_TotalTu">
          <div class="Data_ListBottom" style="flex: 0 0 60%;">
            <div style="margin-bottom:20px;">
              <el-button size="mini" :type="btnHetong2" @click="getBar(3)">合同</el-button>
              <el-button size="mini" :type="btnHui2" @click="getBar(1)">回单</el-button>
              <el-button size="mini" :type="btnVisit2" @click="getBar(2)">到访</el-button>
            </div>
            <div>
              <VueApexCharts width="90%" height="405" ref="zhu" :options="chartOptions5" :series="series5">
              </VueApexCharts>
            </div>
          </div>
          <div class="Data_ListBottom" style="flex: 0 0 35%;">
            <div style="margin-bottom:40px;">
              <el-button size="mini" :type="btnHetong" @click="getPie(3)">合同</el-button>
              <el-button size="mini" :type="btnHui" @click="getPie(1)">回单</el-button>
              <el-button size="mini" :type="btnVisit" @click="getPie(2)">到访</el-button>
            </div>
            <div style="margin-left:50px;">
              <VueApexCharts width="80%" height="205" ref="bing" :options="chartOptions4" :series="series4">
              </VueApexCharts>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import VueApexCharts from "vue-apexcharts";
  import {
    MarketStatic,
    ConsultantStatic
  } from '../../api/work/index'
  import {
    queryEmployee
  } from "../../api/users/user";
  export default {
    components: {
      VueApexCharts
    },
    data() {
      return {
        dateList: [],
        comType: 2, //1-市场部;2-课程顾问部
        msg: {
          startTime: "",
          endTime: "",
          empList: []
        },
        series: [{
            name: "新增条数",
            data: []
          },
          {
            name: "到访人数",
            data: []
          },
          {
            name: '试听人数',
            data: []
          }
        ],
        chartOptions: {
          chart: {
            height: 350,
            type: 'line',
            background: '#fff',
            zoom: {
              enabled: false
            },
            toolbar: {
              show: false,
              autoSelected: 'pan'
            },
          },
          dataLabels: {
            enabled: false
          },
          stroke: {
            width: [2, 2, 2],
            curve: 'smooth',
            // dashArray: [0, 8, 5] //虚线展示
          },
          title: {
            text: '数据统计',
            align: 'left'
          },
          legend: {
            tooltipHoverFormatter: function (val, opts) {
              return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
            }
          },
          markers: {
            size: 0,
            hover: {
              sizeOffset: 6
            }
          },
          xaxis: {
            categories: []
          },
          tooltip: {
            y: [{
                title: {
                  formatter: function (val) {
                    return val
                  }
                }
              },
              {
                title: {
                  formatter: function (val) {
                    return val
                  }
                }
              },
              {
                title: {
                  formatter: function (val) {
                    return val;
                  }
                }
              }
            ]
          },
          grid: {
            borderColor: '#f1f1f1'
          },
        },
        series4: [],
        chartOptions4: {
          labels: ['个人直客', '同业介绍', '学员转介绍', '内部介绍'],
          chart: {
            type: "donut",
            width: 40,
            height: 40,
            sparkline: {
              enabled: true
            }
          },
          stroke: {
            width: 1
          },
          tooltip: {
            fixed: {
              enabled: false
            }
          },
          legend: {
            position: 'right',
            show: true,
          }
        },
        series5: [{
          name: '',
          data: []
        }],
        chartOptions5: {
          plotOptions: {
            bar: {
              borderRadius: 4,
              horizontal: true
            }
          },
          chart: {
            type: 'bar',
            height: 350,
            toolbar: {
              show: false,
              autoSelected: 'pan'
            }
          },
          dataLabels: {
            enabled: false
          },
          xaxis: {
            categories: [],
            labels: {
              show: false //隐藏x轴数据
            }
          },
          tooltip: {
            y: {
              formatter: undefined,
              title: {
                formatter: (seriesName) => seriesName,
              },
            },
          },
        },
        yesData: {}, //昨日数据
        employeeList: [],
        myEmployeeList: [],
        ConsultObj: {}, //课程顾问数据
        IsQueryAuth: false, //是否有查询市场部和课程顾问部人员权限
        CurrentUserInfo: {}, //当前登录用户信息
        IsShowEmpQuery: false, //是否显示员工下拉框
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
        pieData: [], //饼数据
        btnHui: '',
        btnVisit: '',
        btnHetong: 'primary',
        btnHui2: '',
        btnVisit2: '',
        btnHetong2: 'primary',
        barData: [] //柱状图数据
      };
    },
    created() {
      this.CurrentUserInfo = this.getLocalStorage();
      if (this.CurrentUserInfo && this.CurrentUserInfo.ActionMenuList && this.CurrentUserInfo.ActionMenuList.length >
        0) {
        this.CurrentUserInfo.ActionMenuList.forEach((x) => {
          if (x.FunctionCode == "Query_MarketConsultant") {
            this.IsQueryAuth = true;
          }
        });
      }
      if (this.IsQueryAuth || (this.CurrentUserInfo.IsManager == 1 && this.CurrentUserInfo.IsCourseConsultant == 1) || (
          this.CurrentUserInfo.IsManager == 1 && this.CurrentUserInfo.IsMarket == 1)) {
        this.IsShowEmpQuery = true;
      } else {
        this.msg.empList.push(this.CurrentUserInfo.Id);
      }
      if (this.IsQueryAuth) {
        this.comType = 1;
      } else if (this.CurrentUserInfo.IsMarket == 1) {
        this.comType = 1;
      } else if (this.CurrentUserInfo.IsCourseConsultant == 1) {
        this.comType = 2;
      }
    },
    mounted() {
      var now = new Date();
      var strLink = "-";
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var day = now.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (day >= 1 && day <= 9) {
        day = "0" + day;
      }
      this.msg.startTime = year + strLink + month + strLink + '01';
      this.msg.endTime = year + strLink + month + strLink + day;
      this.dateList.push(year + strLink + month + strLink + '01');
      this.dateList.push(year + strLink + month + strLink + day);
      this.searchData();
    },
    methods: {
      //点击饼切换
      getPie(type) {
        if (type == 1) {
          this.btnHui = 'primary'
          this.btnVisit = ''
          this.btnHetong = ''
          this.series4 = []
          if (this.pieData.ClueData && this.pieData.ClueData.length > 0) {
            this.pieData.ClueData.forEach(x => {
              this.series4.push(x.ClueCount)
            })
          }
        }
        if (type == 2) {
          this.btnVisit = 'primary'
          this.btnHui = ''
          this.btnHetong = ''
          this.series4 = []
          if (this.pieData.VisitData && this.pieData.VisitData.length > 0) {
            this.pieData.VisitData.forEach(x => {
              this.series4.push(x.VisitCount)
            })
          }
        }
        if (type == 3) {
          this.btnVisit = ''
          this.btnHui = ''
          this.btnHetong = 'primary'
          this.series4 = []
          if (this.pieData.OrderData && this.pieData.OrderData.length > 0) {
            this.pieData.OrderData.forEach(x => {
              this.series4.push(x.OrderCount)
            })
          }
        }
      },
      //切换柱状图
      getBar(type) {
        if (type == 1) {
          this.btnHui2 = 'primary'
          this.btnVisit2 = ''
          this.btnHetong2 = ''
          this.series5[0].data = []
          this.chartOptions5.xaxis.categories = []
          if (this.barData.ClueData && this.barData.ClueData.length > 0) {
            this.barData.ClueData.forEach(x => {
              this.series5[0].data.push(x.ClueCount)
              this.chartOptions5.xaxis.categories.push(x.ChannelName)
            })
          }
          setTimeout(() => {
            this.$refs.zhu.updateOptions(this.chartOptions5)
            this.$refs.zhu.updateSeries(this.series5)
          }, 100)
        }
        if (type == 2) {
          this.btnVisit2 = 'primary'
          this.btnHui2 = ''
          this.btnHetong2 = ''
          this.series5[0].data = []
          this.chartOptions5.xaxis.categories = []
          if (this.barData.VisitData && this.barData.VisitData.length > 0) {
            this.barData.VisitData.forEach(x => {
              this.series5[0].data.push(x.VisitCount)
              this.chartOptions5.xaxis.categories.push(x.ChannelName)
            })
          }
          setTimeout(() => {
            this.$refs.zhu.updateOptions(this.chartOptions5)
            this.$refs.zhu.updateSeries(this.series5)
          }, 100)
        }
        if (type == 3) {
          this.btnVisit2 = ''
          this.btnHui2 = ''
          this.btnHetong2 = 'primary'
          this.series5[0].data = []
          this.chartOptions5.xaxis.categories = []
          if (this.barData.OrderData && this.barData.OrderData.length > 0) {
            this.barData.OrderData.forEach(x => {
              this.series5[0].data.push(x.OrderCount)
              this.chartOptions5.xaxis.categories.push(x.ChannelName)
            })
          }
          setTimeout(() => {
            this.$refs.zhu.updateOptions(this.chartOptions5)
            this.$refs.zhu.updateSeries(this.series5)
          }, 100)
        }
      },
      //点击市场和课程顾问切换
      getSwitch(type) {
        this.comType = type;
        this.msg.empList = [];
        this.searchData();
      },
      //获取员工列表
      getEmployeeList() {
        var qMsg = {
          IsLeave: 1,
          Dept_Id: 0,
          UserRole: 0,
        };
        if (this.comType == 1) {
          qMsg.Dept_Id = 4;
          qMsg.UserRole = 1;
        } else {
          qMsg.Dept_Id = 13;
          qMsg.UserRole = 2;
        }
        queryEmployee(qMsg).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        });
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //计算百分比
      calcPercent(num, total) {
        num = parseFloat(num);
        total = parseFloat(total);
        if (isNaN(num) || isNaN(total)) {
          return "-";
        }
        return total <= 0 ? "0" : (Math.round(num / total * 10000) / 100.00);
      },
      //重新查询
      searchData() {
        this.getEmployeeList();
        if (this.comType == 1) {
          this.getData()
        }
        if (this.comType == 2) {
          this.getConsultant();
        }
      },
      //获取课程顾问数据
      getConsultant() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.startTime = this.dateList[0];
          this.msg.endTime = this.dateList[1];
        } else {
          this.msg.startTime = "";
          this.msg.endTime = "";
        }
        ConsultantStatic(this.msg).then(res => {
          if (res.Code == 1) {
            this.ConsultObj = res.Data;
          }
        });
      },
      //获取市场部数据
      getData() {
        if (this.dateList && this.dateList.length > 0) {
          this.msg.startTime = this.dateList[0];
          this.msg.endTime = this.dateList[1];
        } else {
          this.msg.startTime = "";
          this.msg.endTime = "";
        }
        MarketStatic(this.msg).then(res => {
          if (res.Code == 1) {
            let tempData = res.Data.dayList;
            this.yesData = res.Data.YesDataObj;
            this.series[0].data = [];
            this.series[1].data = [];
            this.series[2].data = [];
            this.series4 = [];
            this.series5[0].data = [];
            this.chartOptions5.xaxis.categories = [];
            this.btnHui = ''
            this.btnVisit = ''
            this.btnHetong = 'primary'
            this.btnHui2 = ''
            this.btnVisit2 = ''
            this.btnHetong2 = 'primary'
            tempData.forEach(x => {
              this.series[0].data.push(x.ClueCount);
              this.series[1].data.push(x.VisitCount);
              this.series[2].data.push(x.TrialLessonCount);
              this.chartOptions.xaxis.categories.push(x.DayStr);
            })
            this.pieData = res.Data.PieData;
            this.barData = res.Data.BarData;
            if (this.pieData.OrderData && this.pieData.OrderData.length > 0) {
              this.pieData.OrderData.forEach(x => {
                this.series4.push(x.OrderCount)
              })
            }
            if (this.barData.OrderData && this.barData.OrderData.length > 0) {
              this.barData.OrderData.forEach(x => {
                this.series5[0].data.push(x.OrderCount)
                this.chartOptions5.xaxis.categories.push(x.ChannelName);
              })
            }
            setTimeout(() => {
              this.$refs.apex.updateOptions(this.chartOptions)
              this.$refs.apex.updateSeries(this.series)

              this.$refs.zhu.updateOptions(this.chartOptions5)
              this.$refs.zhu.updateSeries(this.series5)

              this.$refs.bing.updateSeries(this.series4)
            }, 500)
          }
        });
      },
    }
  }
</script>