zc_saas_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>
    <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">{{
              studentInfomModification.ytdStudent || 0
            }}</span>
          </div>
        </div>
      </div>
      <div class="flex_boxs dy_sty2">
        <p>
          <span>学员资料修改动态</span><span class="watch_all">查看全部</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">{{
                  orderconsoledData.allOnVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  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">{{
                  orderconsoledData.allOffVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  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">{{
                  orderconsoledData.todOnVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  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">{{
                  orderconsoledData.todOffVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  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">{{
                  orderconsoledData.ytdOnVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  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">{{
                  orderconsoledData.ytdOffVideoNum || 0
                }}</span>
              </div>
              <div class="aNumbox">
                <span class="span1">题库商品</span>
                <span class="span2">{{
                  orderconsoledData.ytdOffBankNum || 0
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_boxs dy_sty3" style="margin-right: 0px !important">
        <p><span>视频商品：订单学时冲突</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">
            <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">{{
                classconsoleData.todOpenNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">昨日新增</span
              ><span class="li_s_child_right">{{
                classconsoleData.todPreNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">近7日新增</span
              ><span class="li_s_child_right">{{
                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">
            <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">{{
                classconsoleData.todOpenNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">昨日新增</span
              ><span class="li_s_child_right">{{
                classconsoleData.ytdOpenNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">近7日新增</span
              ><span class="li_s_child_right">{{
                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">
            <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">{{
                classconsoleData.todPreNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">昨日新增</span
              ><span class="li_s_child_right">{{
                classconsoleData.ytdPreNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">近7日新增</span
              ><span class="li_s_child_right">{{
                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">查看全部</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">83949</p>
          <div class="foot_box">
            <div class="foot_box_list" style="margin-right: 16px">
              <div class="top_label">不通过数量</div>
              <div class="nums">839</div>
            </div>
            <div class="foot_box_list">
              <div class="top_label">通过数量</div>
              <div class="nums">839</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex_boxs dy_sty4">
        <p>学时审核</p>
        <div class="style_box_tran_yellow">
          <div class="imgIBx imgUrl4 imgSize">
            <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">{{
                periodconsoleData.waitTodNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">昨日新增</span
              ><span class="li_s_child_right">{{
                periodconsoleData.waitYtdNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">近7日新增</span
              ><span class="li_s_child_right">{{
                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">
            <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">{{
                periodconsoleData.ingTodNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">昨日新增</span
              ><span class="li_s_child_right">{{
                periodconsoleData.ingYtdNum || 0
              }}</span>
            </div>
            <div class="li_s_child">
              <span class="li_s_child_left">近7日新增</span
              ><span class="li_s_child_right">{{
                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">查看全部</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">查看全部</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">查看全部</span></p>
        <div class="style_box changeTABLE">
          <el-table
            :data="tableData_MN"
            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>
  </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: "label",
        },
        {
          label: "昨日",
          prop: "label",
        },
        {
          label: "近7日",
          prop: "label",
        },
        {
          label: "累计",
          prop: "label",
        },
      ],
      tableData: [
        {
          name: "考试预约",
          label: "123",
        },
        {
          name: "考试预约",
          label: "123",
        },
        {
          name: "考试预约",
          label: "123",
        },
      ],
      tableData_MN: [
        {
          name: "考试预约",
          label: "123",
        },
        {
          name: "考试预约",
          label: "123",
        },
      ],
      num1: 0,
      studentInfomModification: {}, //学员资料修改动态
      orderconsoledData: {},
      classconsoleData: {},
      periodconsoleData: {},
      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,
      }, //需要动画滚动的数值
      user: {},
    };
  },
  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) {
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allStudent: val,
      });
    },
    orderconsoledData(val) {
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allNum: val.allNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        todNum: val.todNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ytdNum: val.ytdNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allRebuyNum: val.allRebuyNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        todRebuyNum: val.todRebuyNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ytdRebuyNum: val.ytdRebuyNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        sevenRebuyNum: val.sevenRebuyNum,
      });
    },
    classconsoleData(val) {
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allNumClass: val.allNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allPreNumClass: val.allOpenNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        allOpenNumClass: val.allPreNum,
      });
    },
    periodconsoleData(val) {
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        waitAllNum: val.waitAllNum,
      });
      gsap.to(this.$data.uploadAnimalData, {
        duration: 0.5,
        ingAllNum: val.ingAllNum,
      });
    },
  },
  computed: {
    ...mapGetters(["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;
    });
  },
  methods: {
    /**
     * 表格颜色
     */
    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;
      });
    },
  },
};
</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: 16px;
  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 {
        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 {
        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;
  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;
  }
  & > .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;
    }
  }
  & > .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;
        }
        .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>