saas_entrepot_admin/src/views/index.vue

<template>
  <div id="index">
    <p class="TopSystem">
      {{ user.userName }}，欢迎您使用本系统<span style="margin-left: 20px"
        >本次登录的时间：{{ changeDateTime(user.loginDate) }}</span
      >
      <span style="margin-left: 14px"
        >您上次登录的时间：{{ changeDateTime(user.preLoginDate) }}</span
      >
    </p>
    <template v-if="ShowStatus">
      <div>
        <ul class="style_ul">
          <li
            class="style_btn"
            v-for="(item, index) in educationType"
            :key="index"
            :class="activeEduId === item.id ? 'style_btn_active' : ''"
            @click="activeEduId = item.id"
          >
            {{ item.educationName }}
          </li>
          <div style="clear: both"></div>
        </ul>
        <ul class="style_ul">
          <li
            class="style_btn"
            v-for="(item, index) in businessList"
            :key="index"
            :class="activeBusId === item.id ? 'style_btn_active' : ''"
            @click="activeBusId = item.id"
          >
            {{ item.projectName + " - " + item.businessName }}
          </li>
          <div style="clear: both"></div>
        </ul>
      </div>
      <div class="style_div">
        <div class="flex_boxs dy_sty1">
          <p><span>学员数量</span></p>
          <div class="style_box flex1">
            <p class="p1">当前累计人数</p>
            <p class="p2">{{ uploadAnimalData.allStudent.toFixed(0) }}</p>
            <div class="foot_numbox">
              <span class="span1">昨日新增人数</span>
              <span class="span2" @click="jumpPage(1)">{{
                studentInfomModification.ytdStudent || 0
              }}</span>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty2">
          <p>
            <span>学员资料修改动态</span
            ><span class="watch_all" @click="jumpPage(2)">查看全部</span>
          </p>
          <div class="style_box flex2">
            <div class="flex2_top_box">
              <div class="flex2_label">
                <div class="top">今日修改</div>
                <div class="nums">
                  {{ studentInfomModification.todUpdateNum || 0 }}
                </div>
              </div>
              <div class="flex2_label">
                <div class="top">昨日修改</div>
                <div class="nums">
                  {{ studentInfomModification.ytdUpdateNum || 0 }}
                </div>
              </div>
              <div class="flex2_label">
                <div class="top">近7日修改</div>
                <div class="nums">
                  {{ studentInfomModification.sevenUpdateNum || 0 }}
                </div>
              </div>
            </div>
            <ul class="flex2_footer">
              <li
                v-for="(item, index) in studentInfomModification.lastUpdateList"
                :key="index"
                style="font-size: 14px; margin-bottom: 10px; color: #666666"
              >
                <i class="el-icon-s-custom"></i>
                学员<span style="color: #fa541c"
                  >【{{ item.nowRealname }}】</span
                >
                ，<span style="color: #fa541c"
                  >【{{ $methodsTools.onlyForma(item.createTime) }}】</span
                >
                修改了<span style="color: #fa541c"
                  >【{{ item.realname ? "姓名" : ""
                  }}{{ item.idCard ? "身份证" : ""
                  }}{{ item.telphone ? "手机号码" : "" }}】</span
                >
                ，如涉及上报注册中心数据，请及时处理。
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="style_div">
        <div class="flex_boxs dy_sty3">
          <p><span>订单数量</span></p>
          <div class="style_box flex1">
            <p class="p1">当前累计数量</p>
            <p class="p2">{{ uploadAnimalData.allNum.toFixed(0) }}</p>
            <div class="foot_list_box">
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl1.png" alt="" /> 线上订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(3)">{{
                    orderconsoledData.allOnVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(4)">{{
                    orderconsoledData.allOnBankNum || 0
                  }}</span>
                </div>
              </div>
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl2.png" alt="" />线下订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(5)">{{
                    orderconsoledData.allOffVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(6)">{{
                    orderconsoledData.allOffBankNum || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3">
          <p><span>今日订单数量</span></p>
          <div class="style_box flex1">
            <p class="p1">当前累计数量</p>
            <p class="p2">{{ uploadAnimalData.todNum.toFixed(0) }}</p>
            <div class="foot_list_box">
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl1.png" alt="" /> 线上订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(3, 0)">{{
                    orderconsoledData.todOnVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(4, 0)">{{
                    orderconsoledData.todOnBankNum || 0
                  }}</span>
                </div>
              </div>
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl2.png" alt="" />线下订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(5, 0)">{{
                    orderconsoledData.todOffVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(6, 0)">{{
                    orderconsoledData.todOffBankNum || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3">
          <p><span>昨日订单数量</span></p>
          <div class="style_box flex1">
            <p class="p1">当前累计数量</p>
            <p class="p2">{{ uploadAnimalData.ytdNum.toFixed(0) }}</p>
            <div class="foot_list_box">
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl1.png" alt="" /> 线上订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(3, 1)">{{
                    orderconsoledData.ytdOnVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(4, 1)">{{
                    orderconsoledData.ytdOnBankNum || 0
                  }}</span>
                </div>
              </div>
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl2.png" alt="" />线下订单
                </div>
                <div class="aNumbox">
                  <span class="span1">视频商品</span>
                  <span class="span2" @click="jumpPage(5, 1)">{{
                    orderconsoledData.ytdOffVideoNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">题库商品</span>
                  <span class="span2" @click="jumpPage(6, 1)">{{
                    orderconsoledData.ytdOffBankNum || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3" style="margin-right: 0px !important">
          <p>
            <span>视频商品：订单学时冲突</span
            ><span class="watch_all" @click="jumpPage(7)">查看全部</span>
          </p>
          <div class="style_box flex3">
            <div class="flex3_1">
              <div class="flex3_children" style="margin-right: 16px">
                <div class="top_label">当前累计数量</div>
                <div class="nums">
                  {{ uploadAnimalData.allRebuyNum.toFixed(0) }}
                </div>
              </div>
              <div class="flex3_children">
                <div class="top_label">今日数量</div>
                <div class="nums">
                  {{ uploadAnimalData.todRebuyNum.toFixed(0) }}
                </div>
              </div>
            </div>
            <div class="flex3_2">
              <div class="flex3_children" style="margin-right: 16px">
                <div class="top_label">昨日数量</div>
                <div class="nums">
                  {{ uploadAnimalData.ytdRebuyNum.toFixed(0) }}
                </div>
              </div>
              <div class="flex3_children">
                <div class="top_label">近7日数量</div>
                <div class="nums">
                  {{ uploadAnimalData.sevenRebuyNum.toFixed(0) }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="style_div">
        <div class="flex_boxs dy_sty3">
          <p>班级数量</p>
          <div class="style_box_tran">
            <div class="imgIBx imgUrl1 imgSize" @click="jumpPage(8, -1)">
              <p class="p1">当前累计数量</p>
              <p class="p2">
                {{ uploadAnimalData.allNumClass.toFixed(0) }}
              </p>
            </div>
            <div class="li_s">
              <div class="li_s_child">
                <span class="li_s_child_left">今日新增</span
                ><span class="li_s_child_right" @click="jumpPage(8, 0)">{{
                  classconsoleData.todOpenNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">昨日新增</span
                ><span class="li_s_child_right" @click="jumpPage(8, 1)">{{
                  classconsoleData.todPreNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">近7日新增</span
                ><span class="li_s_child_right" @click="jumpPage(8, 2)">{{
                  classconsoleData.sevNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3">
          <p class="tranSty">xxx</p>
          <div class="style_box_tran">
            <div class="imgIBx imgUrl2 imgSize" @click="jumpPage(9, -1)">
              <p class="p1">已开班</p>
              <p class="p2">
                {{ uploadAnimalData.allOpenNumClass.toFixed(0) }}
              </p>
            </div>
            <div class="li_s">
              <div class="li_s_child">
                <span class="li_s_child_left">今日新增</span
                ><span class="li_s_child_right" @click="jumpPage(9, 0)">{{
                  classconsoleData.todOpenNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">昨日新增</span
                ><span class="li_s_child_right" @click="jumpPage(9, 1)">{{
                  classconsoleData.ytdOpenNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">近7日新增</span
                ><span class="li_s_child_right" @click="jumpPage(9, 2)">{{
                  classconsoleData.sevOpenNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3">
          <p class="tranSty">xxx</p>
          <div class="style_box_tran">
            <div class="imgIBx imgUrl3 imgSize" @click="jumpPage(10, -1)">
              <p class="p1">预报名</p>
              <p class="p2">
                {{ uploadAnimalData.allPreNumClass.toFixed(0) }}
              </p>
            </div>
            <div class="li_s">
              <div class="li_s_child">
                <span class="li_s_child_left">今日新增</span
                ><span class="li_s_child_right" @click="jumpPage(10, 0)">{{
                  classconsoleData.todPreNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">昨日新增</span
                ><span class="li_s_child_right" @click="jumpPage(10, 1)">{{
                  classconsoleData.ytdPreNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">近7日新增</span
                ><span class="li_s_child_right" @click="jumpPage(10, 2)">{{
                  classconsoleData.sevPreNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty3" style="margin-right: 0px !important">
          <p>
            <span>学习账号标记</span
            ><span class="watch_all" @click="jumpPage(11)">查看全部</span>
          </p>
          <div class="style_box flex1">
            <div class="foot_box" style="margin-bottom: 16px">
              <div
                class="foot_box_list"
                style="margin-right: 16px; height: 64px"
              >
                <div class="top_label">未配置班级</div>
                <div class="nums_mini">
                  {{ classconsoleData.noConfigNum || 0 }}
                </div>
              </div>
              <div
                class="foot_box_list"
                style="margin-right: 16px; height: 64px"
              >
                <div class="top_label">有接口班级</div>
                <div class="nums_mini">
                  {{ classconsoleData.interfNum || 0 }}
                </div>
              </div>
              <div class="foot_box_list" style="height: 64px">
                <div class="top_label">无接口班级</div>
                <div class="nums_mini">
                  {{ classconsoleData.noInterfNum || 0 }}
                </div>
              </div>
            </div>
            <div class="foot_list_box" style="align-items: flex-start">
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl8.png" alt="" />
                  账号开通标记
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">未开通</span>
                  <span class="span3">{{
                    classconsoleData.noOpenNum || 0
                  }}</span>
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">已开通</span>
                  <span class="span3">{{ classconsoleData.openNum || 0 }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">标记失败</span>
                  <span class="span3">{{ classconsoleData.failNum || 0 }}</span>
                </div>
              </div>
              <div class="foot_list_style" style="align-items: flex-start">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl9.png" alt="" />学完标记
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">未完成</span>
                  <span class="span3">{{
                    classconsoleData.noFinishNum || 0
                  }}</span>
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">已完成</span>
                  <span class="span3">{{
                    classconsoleData.finishNum || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="style_div">
        <div class="flex_boxs dy_sty4">
          <p>填写资料审核</p>
          <div class="style_box flex1">
            <p class="p1">待审数量</p>
            <p class="p3" @click="jumpPage(15, null, 2)">
              {{ uploadAnimalData.pendingTrialNum.toFixed(0) }}
            </p>
            <div class="foot_box">
              <div class="foot_box_list" style="margin-right: 16px">
                <div class="top_label">不通过数量</div>
                <div class="nums" @click="jumpPage(15, null, 3)">
                  {{ periodconsoleprofileData.unPassNum || 0 }}
                </div>
              </div>
              <div class="foot_box_list">
                <div class="top_label">通过数量</div>
                <div class="nums" @click="jumpPage(15, null, 1)">
                  {{ periodconsoleprofileData.passNum || 0 }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty4">
          <p>学时审核</p>
          <div class="style_box_tran_yellow">
            <div class="imgIBx imgUrl4 imgSize" @click="jumpPage(16, null, 2)">
              <p class="p1">待初审</p>
              <p class="p2">{{ uploadAnimalData.waitAllNum.toFixed(0) }}</p>
            </div>
            <div class="li_s">
              <div class="li_s_child">
                <span class="li_s_child_left">今日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 1, 2)">{{
                  periodconsoleData.waitTodNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">昨日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 2, 2)">{{
                  periodconsoleData.waitYtdNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">近7日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 3, 2)">{{
                  periodconsoleData.waitSevNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty4">
          <p class="tranSty">xxx</p>

          <div class="style_box_tran_yellow">
            <div class="imgIBx imgUrl5 imgSize" @click="jumpPage(16, null, 3)">
              <p class="p1">待复审</p>
              <p class="p2">{{ uploadAnimalData.ingAllNum.toFixed(0) }}</p>
            </div>
            <div class="li_s">
              <div class="li_s_child">
                <span class="li_s_child_left">今日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 1, 3)">{{
                  periodconsoleData.ingTodNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">昨日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 2, 3)">{{
                  periodconsoleData.ingYtdNum || 0
                }}</span>
              </div>
              <div class="li_s_child">
                <span class="li_s_child_left">近7日新增</span
                ><span class="li_s_child_right" @click="jumpPage(16, 3, 3)">{{
                  periodconsoleData.ingSevNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex_boxs dy_sty4" style="margin-right: 0px !important">
          <p>
            <span>学员推送数据</span
            ><span class="watch_all" @click="jumpPage(12)">查看全部</span>
          </p>
          <div class="style_box flex1">
            <div class="foot_box" style="margin-bottom: 16px">
              <div
                class="foot_box_list"
                style="margin-right: 16px; height: 64px"
              >
                <div class="top_label">未配置报名接口班级</div>
                <div class="nums_mini">
                  {{ periodconsoleData.noInfoNum || 0 }}
                </div>
              </div>
              <div class="foot_box_list" style="height: 64px">
                <div class="top_label">有配置报名接口班级</div>
                <div class="nums_mini">
                  {{ periodconsoleData.infoNum || 0 }}
                </div>
              </div>
            </div>
            <div class="foot_box" style="margin-bottom: 16px">
              <div
                class="foot_box_list"
                style="margin-right: 16px; height: 64px"
              >
                <div class="top_label">未配置学时接口班级</div>
                <div class="nums_mini">
                  {{ periodconsoleData.noPeriodNum || 0 }}
                </div>
              </div>
              <div class="foot_box_list" style="height: 64px">
                <div class="top_label">有配置学时接口班级</div>
                <div class="nums_mini">
                  {{ periodconsoleData.periodNum || 0 }}
                </div>
              </div>
            </div>
            <div class="foot_list_box" style="align-items: flex-start">
              <div class="foot_list_style">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl10.png" alt="" /> 报名推送
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">报名人数</span>
                  <span class="span3">{{
                    periodconsoleData.applyUserNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">已推送人数</span>
                  <span class="span3">{{
                    periodconsoleData.applyPushUserNum || 0
                  }}</span>
                </div>
              </div>
              <div class="foot_list_style" style="align-items: flex-start">
                <div class="aNumTopTitle">
                  <img src="@/assets/index_images/sl11.png" alt="" />学时推送
                </div>
                <div class="aNumbox" style="margin-bottom: 13px">
                  <span class="span1">学时审核通过人数</span>
                  <span class="span3">{{
                    periodconsoleData.periodUserNum || 0
                  }}</span>
                </div>
                <div class="aNumbox">
                  <span class="span1">已推送人数</span>
                  <span class="span3">{{
                    periodconsoleData.periodPushUserNum || 0
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="style_div" style="align-items: flex-start">
        <div class="flex_boxs dy_sty2" style="margin-right: 13px; height: auto">
          <p>
            <span>考试数据</span
            ><span class="watch_all" @click="jumpPage(13)">查看全部</span>
          </p>
          <div class="style_box changeTABLE">
            <el-table
              :data="tableData"
              style="width: 99%"
              :header-cell-style="{
                'background-color': '#E6FFFB',
                color: '#13C2C2',
                fontSize: '14px',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in tableSet"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="flex_boxs dy_sty2" style="height: auto">
          <p>
            <span>模考数据</span
            ><span class="watch_all" @click="jumpPage(14)">查看全部</span>
          </p>
          <div class="style_box changeTABLE">
            <el-table
              :data="MKtableData"
              style="width: 99%"
              :header-cell-style="{
                'background-color': '#E6FFFB',
                color: '#13C2C2',
                fontSize: '14px',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in tableSet"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row[item.prop] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import { getInfo } from "@/api/login";
import { mapGetters } from "vuex";
export default {
  name: "Index",
  data() {
    return {
      activeEduId: "",
      businessList: [],
      activeBusId: "",
      tableSet: [
        {
          label: "类别",
          prop: "name",
        },
        {
          label: "今日",
          prop: "TodNum",
        },
        {
          label: "昨日",
          prop: "YtdNum",
        },
        {
          label: "近7日",
          prop: "SevNum",
        },
        {
          label: "累计",
          prop: "Num",
        },
      ],
      tableData: [],
      MKtableData: [],
      num1: 0,
      studentInfomModification: {}, //学员资料修改动态
      orderconsoledData: {},
      classconsoleData: {},
      periodconsoleData: {},
      periodconsoleprofileData: {}, //填写资料审核
      testDataconsoleData: {}, //考试预约
      uploadAnimalData: {
        allStudent: 0, //当前累计人数
        allNum: 0,
        todNum: 0,
        ytdNum: 0,
        allRebuyNum: 0,
        todRebuyNum: 0,
        ytdRebuyNum: 0,
        sevenRebuyNum: 0,
        allNumClass: 0,
        allOpenNumClass: 0,
        allPreNumClass: 0,
        waitAllNum: 0,
        ingAllNum: 0,
        pendingTrialNum: 0,
      }, //需要动画滚动的数值
      user: {},
      ShowStatus: true,
    };
  },
  watch: {
    educationType(val) {
      if (val.length > 0) {
        this.activeEduId = val[0].id;
      }
    },
    activeEduId(val) {
      this.$api
        .inquirebusinessList({ status: 1, educationId: val })
        .then((res) => {
          if (res.rows.length > 0) {
            this.activeBusId = res.rows[0].id;
          }
          this.businessList = res.rows;
        });
    },
    activeBusId(val) {
      this.getBusUploadData(val);
    },
    "studentInfomModification.allStudent"(val) {
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allStudent: val,
      });
    },
    orderconsoledData(val) {
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allNum: val.allNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        todNum: val.todNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ytdNum: val.ytdNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allRebuyNum: val.allRebuyNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        todRebuyNum: val.todRebuyNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ytdRebuyNum: val.ytdRebuyNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        sevenRebuyNum: val.sevenRebuyNum,
      });
    },
    classconsoleData(val) {
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allNumClass: val.allNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allOpenNumClass: val.allOpenNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allPreNumClass: val.allPreNum,
      });
    },
    periodconsoleData(val) {
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        waitAllNum: val.waitAllNum,
      });
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ingAllNum: val.ingAllNum,
      });
    },
    periodconsoleprofileData(val) {
      this.gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        pendingTrialNum: val.pendingTrialNum,
      });
    },
  },
  computed: {
    educationType(){
      return this.$store.getters['educationType']
    },
    changeDateTime: function () {
      return function (date) {
        if (date) {
          let da = this.$methodsTools.onlyForma(
            new Date(date).getTime() / 1000
          );
          return da;
        } else {
          return "没有记录";
        }
      };
    },
  },
  created() {
      getInfo().then((res) => {
        this.user = res.data.user;
      });
  },
  mounted() {
    if (
      this.$store.state.user.roles.includes("supervisory")
    ) {
      this.ShowStatus = false;
    }
    /**
     * 防止监听未触发导致没有选中教育类型-业务层级
     */
    if (!this.activeEduId && this.educationType && this.educationType.length) {
      this.activeEduId = this.educationType[0].id;
    }
  },
  methods: {
    /**
     * 跳转页面 1.学员列表数据 2.学员资料修改动态 3.线上订单视频 4.线上订单题库 5.线下订单视频 6.线下订单题库
     */
    jumpPage(int, timeType, type) {
      if (int === 1) {
        const jump = () => {
          this.$router.push({
            name: "StudentList",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              timeType: timeType,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "StudentList";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "StudentList",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 2) {
        const jump = () => {
          this.$router.push({
            name: "StudentInfoChange",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "StudentInfoChange";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "StudentInfoChange",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 3 || int === 4) {
        const jump = () => {
          this.$router.push({
            name: "OrderList",
            params: {
              goodsType: int === 3 ? 1 : 2,
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              timeType: timeType,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "OrderList";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "OrderList",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 5 || int === 6) {
        const jump = () => {
          this.$router.push({
            name: "OfflineOrder",
            params: {
              goodsType: int === 5 ? 1 : 2,
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              timeType: timeType,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "OfflineOrder";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "OfflineOrder",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 7) {
        const jump = () => {
          this.$router.push({
            name: "SchoolHoursConflictOrder",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "SchoolHoursConflictOrder";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "SchoolHoursConflictOrder",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 8 || int === 9 || int === 10) {
        const jump = () => {
          this.$router.push({
            name: "ClassList",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              timeType: timeType,
              classStatus: int === 9 ? 1 : int === 10 ? 0 : "",
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "ClassList";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "ClassList",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 11) {
        const jump = () => {
          this.$router.push({
            name: "LearningAccoutTags",
            params: {
              educationId: this.activeEduId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "LearningAccoutTags";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "LearningAccoutTags",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 12) {
        const jump = () => {
          this.$router.push({
            name: "StudentPushData",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "StudentPushData";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "StudentPushData",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 13) {
        const jump = () => {
          this.$router.push({
            name: "ApplicationData",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "ApplicationData";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "ApplicationData",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 14) {
        const jump = () => {
          this.$router.push({
            name: "MockTestData",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "MockTestData";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "MockTestData",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 15) {
        const jump = () => {
          this.$router.push({
            name: "DataConfig",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              type: type,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "DataConfig";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "DataConfig",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
      if (int === 16) {
        const jump = () => {
          this.$router.push({
            name: "ListOfhoursToBeReviewed",
            params: {
              educationId: this.activeEduId,
              businessId: this.activeBusId,
              timeType: timeType,
              type: type,
            },
          });
        };
        const statusPage = this.$store.state.tagsView.visitedViews.some(
          (item) => {
            return item.name == "ListOfhoursToBeReviewed";
          }
        );
        if (statusPage) {
          this.$store
            .dispatch("tagsView/delCachedView", {
              name: "ListOfhoursToBeReviewed",
            })
            .then((res) => {
              jump();
            });
        } else {
          jump();
        }
      }
    },
    /**
     * 表格颜色
     */
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "";
      }
      return "success-row";
    },
    /**
     * 初始获取数据
     */
    getBusUploadData(id) {
      this.$api.baseconsolestudentData({ businessId: id }).then((res) => {
        this.studentInfomModification = res.data;
      });
      this.$api.baseconsoleorderData({ businessId: id }).then((res) => {
        this.orderconsoledData = res.data;
      });
      this.$api.baseconsolegradeData({ businessId: id }).then((res) => {
        this.classconsoleData = res.data;
      });
      this.$api.baseconsoleperiodData({ businessId: id }).then((res) => {
        this.periodconsoleData = res.data;
      });
      this.$api.baseconsoletestData({ businessId: id }).then((res) => {
        this.getInData(res);
      });
      this.$api.baseconsolemockData({ businessId: id }).then((res) => {
        this.getMKData(res);
      });
      this.$api.baseconsoleprofileData({ businessId: id }).then((res) => {
        this.periodconsoleprofileData = res.data;
      });
    },
    /**
     * 考试预约数据格式处理
     */
    getInData(res) {
      let data = [
        {
          name: "考试预约",
        },
        {
          name: "考试待登记",
        },
        {
          name: "考试已登记",
        },
      ];
      for (let k in res.data) {
        switch (k) {
          case "subTodNum":
          case "subYtdNum":
          case "subSevNum":
          case "subscribeNum":
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === "考试预约") {
                if (k === "subTodNum") {
                  data[i].TodNum = res.data[k];
                }
                if (k === "subYtdNum") {
                  data[i].YtdNum = res.data[k];
                }
                if (k === "subSevNum") {
                  data[i].SevNum = res.data[k];
                }
                if (k === "subscribeNum") {
                  data[i].Num = res.data[k];
                }
                break;
              }
            }
            break;
          case "waitRegisterTodNum":
          case "waitRegisterYtdNum":
          case "waitRegisterSevNum":
          case "waitRegisterNum":
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === "考试待登记") {
                if (k === "waitRegisterTodNum") {
                  data[i].TodNum = res.data[k];
                }
                if (k === "waitRegisterYtdNum") {
                  data[i].YtdNum = res.data[k];
                }
                if (k === "waitRegisterSevNum") {
                  data[i].SevNum = res.data[k];
                }
                if (k === "waitRegisterNum") {
                  data[i].Num = res.data[k];
                }
                break;
              }
            }
            break;
          case "registerTodNum":
          case "registerYtdNum":
          case "registerSevNum":
          case "registerNum":
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === "考试已登记") {
                if (k === "registerTodNum") {
                  data[i].TodNum = res.data[k];
                }
                if (k === "registerYtdNum") {
                  data[i].YtdNum = res.data[k];
                }
                if (k === "registerSevNum") {
                  data[i].SevNum = res.data[k];
                }
                if (k === "registerNum") {
                  data[i].Num = res.data[k];
                }
                break;
              }
            }
            break;
          default:
            break;
        }
      }
      this.tableData = data;
    },
    /**
     * 模考数据格式处理
     */
    getMKData(res) {
      let data = [
        {
          name: "模考预约",
        },
        {
          name: "主观题待评分",
        },
      ];
      for (let k in res.data) {
        switch (k) {
          case "subTodNum":
          case "subYtdNum":
          case "subSevNum":
          case "subscribeNum":
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === "模考预约") {
                if (k === "subTodNum") {
                  data[i].TodNum = res.data[k];
                }
                if (k === "subYtdNum") {
                  data[i].YtdNum = res.data[k];
                }
                if (k === "subSevNum") {
                  data[i].SevNum = res.data[k];
                }
                if (k === "subscribeNum") {
                  data[i].Num = res.data[k];
                }
                break;
              }
            }
            break;
          case "toScoreTodNum":
          case "toScoreYtdNum":
          case "toScoreSevNum":
          case "toScoreNum":
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === "主观题待评分") {
                if (k === "toScoreTodNum") {
                  data[i].TodNum = res.data[k];
                }
                if (k === "toScoreYtdNum") {
                  data[i].YtdNum = res.data[k];
                }
                if (k === "toScoreSevNum") {
                  data[i].SevNum = res.data[k];
                }
                if (k === "toScoreNum") {
                  data[i].Num = res.data[k];
                }
                break;
              }
            }
            break;
          default:
            break;
        }
      }
      this.MKtableData = data;
    },
  },
};
</script>

<style lang="less" scoped>
.TopSystem {
  margin: 0px;
  font-size: 14px;
  font-weight: 400;
  color: #999999;
}
.style_ul {
  .style_btn {
    float: left;
    background-color: #e6f2ff;
    box-shadow: 2px 2px 6px 0px rgba(217, 217, 217, 0.5);
    padding: 0px 16px;
    border-radius: 4px;
    height: 40px;
    line-height: 40px;
    margin: 0px 16px 16px 0px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    user-select: none;
    transition: all 0.1s;
    cursor: pointer;
    &:hover {
      background-color: #0c5dfb;
      color: #fff;
    }
  }
  .style_btn_active {
    background-color: #0c5dfb !important;
    color: #fff !important;
  }
}
.style_div {
  margin-bottom: 44px;
  display: flex;
  align-items: center;
  .flex_boxs {
    display: flex;
    flex-direction: column;
    & > p {
      margin: 0px 0px 16px 0px;
      flex-shrink: 0;
      font-size: 16px;
      font-weight: bold;
      color: #666666;
      & > .watch_all {
        font-size: 14px;
        font-weight: 400;
        color: #0c5dfb;
        float: right;
        user-select: none;
        cursor: pointer;
      }
    }
  }
  .flex_box_right {
    height: 258px;
    flex: 1;
    border: 1px solid #666;
  }
}
.style_box {
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  flex: 1;
}
.style_box_tran {
  margin-top: 51px;
  flex: 1;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  display: flex;
  .imgIBx {
    width: 224px;
    height: 258px;
    margin-top: -47px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      box-shadow: 3px 3px 14px 0px rgba(9, 109, 217, 0.7);
      transform: scale(1.01);
    }
    padding: 15px 16px;
    & > .p1 {
      margin: 0px 0px 23px 0px;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }
    & > .p2 {
      font-size: 40px;
      font-weight: bold;
      color: #fff;
      margin: 0px;
    }
  }
  .imgUrl1 {
    background: transparent url("../assets/index_images/sl3.png") no-repeat
      center;
  }
  .imgUrl2 {
    background: transparent url("../assets/index_images/sl4.png") no-repeat
      center;
  }
  .imgUrl3 {
    background: transparent url("../assets/index_images/sl5.png") no-repeat
      center;
  }
  .imgUrl4 {
    background: transparent url("../assets/index_images/sl6.png") no-repeat
      center;
  }
  .imgUrl5 {
    background: transparent url("../assets/index_images/sl7.png") no-repeat
      center;
  }
  .imgSize {
    background-size: 224px 258px;
  }
  .li_s {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .li_s_child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding: 0px 15px;
      line-height: 48px;
      border-right: 2px solid #13c2c2;
      background: linear-gradient(
        90deg,
        rgba(245, 245, 245, 0) 0%,
        #f5f5f5 100%
      );
      .li_s_child_left {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      .li_s_child_right {
        cursor: pointer;
        user-select: none;
        font-size: 24px;
        font-weight: 400;
        color: #13c2c2;
      }
    }
  }
}
.style_box_tran_yellow {
  margin-top: 88px;
  flex: 1;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
  border-radius: 8px;
  display: flex;
  .imgIBx {
    width: 224px;
    height: 296px;
    margin-top: -82px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      box-shadow: 3px 3px 14px 0px rgba(217, 112, 0, 0.7);
      transform: scale(1.01);
    }
    padding: 15px 16px;
    & > .p1 {
      margin: 0px 0px 23px 0px;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
    }
    & > .p2 {
      font-size: 40px;
      font-weight: bold;
      color: #fff;
      margin: 0px;
    }
  }
  .imgUrl4 {
    background: transparent url("../assets/index_images/sl6.png") no-repeat
      center;
  }
  .imgUrl5 {
    background: transparent url("../assets/index_images/sl7.png") no-repeat
      center;
  }
  .imgSize {
    background-size: 224px 296px;
  }
  .li_s {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .li_s_child {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 48px;
      padding: 0px 15px;
      line-height: 48px;
      border-right: 2px solid #13c2c2;
      background: linear-gradient(
        90deg,
        rgba(245, 245, 245, 0) 0%,
        #f5f5f5 100%
      );
      .li_s_child_left {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      .li_s_child_right {
        cursor: pointer;
        user-select: none;
        font-size: 24px;
        font-weight: 400;
        color: #13c2c2;
      }
    }
  }
}
.dy_sty1 {
  margin-right: 13px;
  height: 258px;
  width: 433px;
}
.dy_sty2 {
  height: 258px;
  flex: 1;
}
.dy_sty3 {
  margin-right: 13px;
  height: 296px;
  flex: 1;
}
.dy_sty4 {
  margin-right: 13px;
  height: 336px;
  flex: 1;
}
.tranSty {
  color: transparent !important;
  visibility: hidden !important;
  user-select: none;
}
.flex1 {
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  & > .p1 {
    margin: 0px 0px 23px 0px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }
  & > .p2 {
    font-size: 40px;
    font-weight: bold;
    color: #333333;
    margin: 0px;
    flex: 1;
  }
  & > .p3 {
    font-size: 40px;
    font-weight: bold;
    text-decoration: underline;
    color: #0c5dfb;
    margin: 0px;
    flex: 1;
    user-select: none;
    cursor: pointer;
  }
  & > .foot_numbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .span1 {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
    .span2 {
      font-size: 24px;
      font-weight: 400;
      text-decoration: underline;
      color: #0c5dfb;
      cursor: pointer;
      user-select: none;
    }
  }
  & > .foot_list_box {
    display: flex;
    align-items: center;
    .foot_list_style {
      flex: 1;
      &:first-child {
        border-right: 1px solid #d9d9d9;
        padding-right: 15px;
        margin-right: 15px;
      }
      .aNumTopTitle {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        img {
          width: 20px;
          height: 19px;
          margin-right: 8px;
        }
      }
      .aNumbox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .span1 {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
        .span2 {
          font-size: 24px;
          font-weight: 400;
          text-decoration: underline;
          color: #0c5dfb;
          cursor: pointer;
          user-select: none;
        }
        .span3 {
          font-size: 24px;
          font-weight: 400;
          color: #13c2c2;
        }
      }
    }
  }
  & > .foot_box {
    display: flex;
    align-items: center;
    .foot_box_list {
      flex: 1;
      height: 120px;
      background-color: #f5f5f5;
      border-radius: 8px;
      padding: 8px;
      .top_label {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      .nums {
        margin-top: 33px;
        font-size: 40px;
        font-weight: bold;
        color: #333333;
        text-align: center;
      }
      .nums_mini {
        margin-top: 6px;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }
    }
  }
}
.flex2 {
  padding: 16px;
  display: flex;
  flex-direction: column;
  & > .flex2_top_box {
    flex: 1;
    margin-bottom: 16px;
    .flex2_label {
      width: 160px;
      height: 64px;
      background: #f5f5f5;
      border-radius: 8px;
      margin-right: 16px;
      display: inline-block;
      padding: 7px;
      .top {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      .nums {
        font-size: 24px;
        font-weight: 400;
        color: #333333;
        text-align: center;
      }
    }
  }
  & > .flex2_footer {
    max-height: 106px;
    overflow: auto;
    background: #f5f5f5;
    border-radius: 8px;
    margin: 0px;
    padding: 16px 16px 0px 16px;
  }
}
.flex3 {
  padding: 16px;
  .flex3_1 {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flex3_2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flex3_children {
    height: 104px;
    flex: 1;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 8px;
    .top_label {
      font-size: 14px;
      font-weight: 400;
      color: #666666;
    }
    .nums {
      margin-top: 15px;
      text-align: center;
      font-size: 40px;
      font-weight: bold;
      color: #333333;
    }
  }
}
.changeTABLE {
  box-shadow: none !important;
  .el-table {
    border-radius: 8px;
    box-shadow: 0px 0px 8px 0px rgba(217, 217, 217, 0.8);
    margin-left: 0.5%;
  }
}
/deep/ .el-table .success-row {
  background: rgb(246, 255, 254);
}
</style>