baoman / Ezquiz_Platform

  <template>

    <div class="container">

      <ul class="nav-list" v-if="type == 'ROLE_XUEXIAO'">

        <li class="nav-item item1" @click="links('/setUpAccount')">

          <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" />
          <div class="text">
            <p class="p1">账号管理</p>

            <p class="p2">

              管理
              <template v-if="dataInfo.teacherCourseCount">
                {{ dataInfo.teacherCourseCount }}个任课教师，
              </template>
              <template v-if="dataInfo.classManagerCount">
                {{ dataInfo.classManagerCount }}个班主任，
              </template>
              <template v-if="dataInfo.teacherGradeCount">
                {{ dataInfo.teacherGradeCount }}个备课组长账号信息。
              </template>

            </p>

          </div>
        </li>

        <li class="nav-item item1" @click="links('/setUpSchool')">

          <img class="icon" src="../../assets/nav/setUpSchool.png" alt="" />
          <div class="text">
            <p class="p1">学校管理</p>

            <p class="p2">

              管理
              <template v-if="dataInfo.gradeCount"
                >{{ dataInfo.gradeCount }}个年级，
              </template>
              <template v-if="dataInfo.classCount">
                {{ dataInfo.classCount }}个班级，
              </template>
              <template v-if="dataInfo.studentCount">
                {{ dataInfo.studentCount }}名学生信息。
              </template>

            </p>

          </div>
        </li>

        <li class="nav-item item2" @click="links('/device')">

          <img class="icon" src="../../assets/nav/device.png" alt="" />
          <div class="text">
            <p class="p1">设备状态</p>

            <p class="p2">

              管理
              <template v-if="dataInfo.stationCount"
                >{{ dataInfo.stationCount }}个基站，</template
              >
              <template v-if="dataInfo.keyboardCount">
                {{ dataInfo.keyboardCount }}套答题器设备。</template
              >

            </p>

          </div>
        </li>
        <li class="item3">

          <div class="nav-item item1 item-child1" @click="links('/analysis')">

            <img class="icon" src="../../assets/nav/analysis.png" alt="" />
            <div class="text">
              <p class="p1">使用分析</p>
              <p class="p2">按班级、科目等维度分析设备使用频率。</p>
            </div>
          </div>

          <div class="nav-item item1 item-child2" @click="links('/card')">

            <img class="icon" src="../../assets/nav/card.png" alt="" />

            <p class="p1">发卡记录</p>

            <p class="p2">查看发卡、换卡记录信息。</p>

          </div>

          <div class="nav-item item1 item-child2" @click="links('/down')">

            <img class="icon" src="../../assets/nav/down.png" alt="" />
            <p class="p1">软件下载</p>
            <p class="p2">设置参数，下载授课端软件。</p>
          </div>
        </li>
      </ul>

      <ul class="nav-list" v-if="type == 'ROLE_JITUAN'">
        <template v-for="item in navList">

          <li
            v-if="!item.path.includes('dataSync')"
            :key="item.path"
            class="nav-item item4"
            @click="links(item.path)"
          >
            <img class="icon" :src="getImgs(item.path)" alt="" />

            <div class="text" v-if="item.path == '/setUpConglomerate'">

              <p class="p1">学校管理</p>

              <p class="p2">
                管理
                <template v-if="dataInfo.regionCount"
                  >{{ dataInfo.regionCount }}个区域，</template
                >
                <template v-if="dataInfo.schoolCount"
                  >{{ dataInfo.schoolCount }}个学校。</template
                >
              </p>

            </div>

            <div class="text" v-else-if="item.path == '/setUpAccount'">

              <p class="p1">账号管理</p>

              <p class="p2">
                共{{
                  dataInfo.regionManagerCount + dataInfo.schoolManagerCount
                }}个各层级管理员账号。
              </p>

            </div>

            <div class="text" v-else-if="item.path == '/device'">

              <p class="p1">设备状态</p>

              <p class="p2">
                管理
                <template v-if="dataInfo.stationCount"
                  >{{ dataInfo.stationCount }}个基站，</template
                >
                <template v-if="dataInfo.keyboardCount">
                  {{ dataInfo.keyboardCount }}套答题器设备。</template
                >
              </p>

            </div>

            <div class="text" v-else-if="item.path == '/analysis'">

              <p class="p1">使用分析</p>

              <p class="p2">按学校、学段统计使用频率。</p>

            </div>

          </li>

        </template>

      </ul>

      <ul
        class="nav-list"
        v-if="type == 'ROLE_JIAOSHI' || type == 'ROLE_BANZHUREN'"
      >
        <template v-for="item in navList">
          <li
            v-if="!item.path.includes('dataSync')"
            :key="item.path"
            class="nav-item item4"
            @click="links(item.path)"
          >
            <img class="icon" :src="getImgs(item.path)" alt="" />

            <div class="text" v-if="item.path == '/examinationPaper'">

              <p class="p1">备题组卷</p>

              <p class="p2" v-if="dataInfo.paperCount">
                {{ dataInfo.paperCount }}套答题卡。
              </p>

            </div>

            <div class="text" v-else-if="item.path == '/portrait'">

              <p class="p1">学生画像</p>

              <!-- <p class="p2">共分析{{ dataInfo.imagesCount }}名学生成绩。</p> -->

              <p class="p2">功能开发中。</p>

            </div>

            <div class="text" v-else-if="item.path == '/ask'">

              <p class="p1">随堂问报表</p>

              <p class="p2" v-if="dataInfo.classPeriodCount">

                对{{ dataInfo.classPeriodCount }}套随堂问答题记录分析。

              </p>

            </div>

            <div class="text" v-else-if="item.path == '/test'">

              <p class="p1">即时测报表</p>

              <p class="p2" v-if="dataInfo.examCount">
                对{{ dataInfo.examCount }}套即时测答题记录分析。
              </p>

            </div>

          </li>

        </template>

      </ul>

       <ul class="nav-list" v-if="type == 'ROLE_PERSONAL'">

          <li class="nav-item item1" @click="links('/examinationPaper')">
            <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" />
            <div class="text">
              <p class="p1">备题组卷</p>

              <p class="p2" v-if="dataInfo.paperCount">
                管理 {{ dataInfo.paperCount }}套答题卡，

              </p>
            </div>
          </li>
          <li class="nav-item item1" @click="links('/setUpStudent')">
            <img class="icon" src="../../assets/nav/setUpSchool.png" alt="" />
            <div class="text">
              <p class="p1">班级名单</p>

              <p class="p2" v-if="dataInfo.classCount">
                管理{{ dataInfo.classCount }}个班级的学生名单，

              </p>
            </div>
          </li>
          <li class="nav-item item2" @click="links('/portrait')">
            <img class="icon" src="../../assets/nav/device.png" alt="" />
            <div class="text">
              <p class="p1">学生画像</p>

              <p class="p2" v-if="dataInfo.stationCount">
                共分析{{ dataInfo.stationCount }}名学生成绩

              </p>
            </div>
          </li>
          <li class="item3">
            <div class="nav-item item1 item-child2" @click="links('/ask')">
              <img class="icon" src="../../assets/nav/card.png" alt="" />
              <p class="p1">随堂问报表</p>

              <p class="p2" v-if="dataInfo.classPeriodCount">
                对{{ dataInfo.classPeriodCount }}套随堂问答题记录分析

              </p>
            </div>
            <div class="nav-item item1 item-child2" @click="links('/test')">
              <img class="icon" src="../../assets/nav/analysis.png" alt="" />
              <p class="p1">即时测报表</p>

              <p class="p2" v-if="dataInfo.examCount">
                对{{ dataInfo.examCount }}套即时测答题记录分析

              </p>
            </div>
            <div class="nav-item item1 item-child1" @click="links('/down')">
              <img class="icon" src="../../assets/nav/down.png" alt="" />
              <div class="text">
                <p class="p1">软件下载</p>
                <p class="p2">授课端软件最新版本1.2.0。</p>
              </div>
            </div>
          </li>
        
      </ul>

      <ul class="nav-list" v-if="type == 'ROLE_PINGTAI'">

          <li class="nav-item item1" @click="links('/account')">
            <img class="icon" src="../../assets/nav/setUpAccount.png" alt="" />
            <div class="text">
              <p class="p1">账号管理</p>
            </div>
          </li>
          <li class="nav-item item1" @click="links('/device')">
            <img class="icon" src="../../assets/nav/device.png" alt="" />
            <div class="text">
              <p class="p1">设备管理</p>
            </div>
          </li>
          <li class="nav-item item2" @click="links('/clientVersion')">
            <img class="icon" src="../../assets/nav/down.png" alt="" />
            <div class="text">
              <p class="p1">授课端版本管理</p>
            </div>
          </li>
      </ul>

    </div>

  </template>
  
  <script>

  export default {
    name: "mainIndex",

    data() {
      return {

        type: "",
        navList: [],

        dataInfo: {},

      };

    },

    watch: {
      "$store.getters.info.showRoleName": function (val) {

        this._Init(val)
        this._QueryData();
      },
    },
    created() {
      this._Init(this.$store.getters.info.showRoleName);
      this._QueryData();
    },
    methods: {
      getImgs(path) {
        return require(`@/assets/nav${path}.png`);
      },
      links(path) {
        this.$router.push({
          path: path,
        });
      },
      _Init(val) {

        this.type = this.$store.getters.info.showRole || this.$store.getters.info.permissions[0].role;

        this.navList = this.$store.getters.addRouters.map((item) => {
          return {
            name: item.name,
            path: item.children[0].path,
          };
        });
      },

      _QueryData() {
        if (this.type == "ROLE_XUEXIAO") {
          this.schoolIndex();
        } else if (this.type == "ROLE_JIAOSHI") {
          this.teacherIndex();
        } else if (this.type == "ROLE_JITUAN") {
          this.tenantIndex();
        } else if (this.type == "ROLE_BANZHUREN") {
          this.classIndex();

        } else if (this.type == "ROLE_PERSONAL") {

          this.personalIndex();

        }

      },

      async teacherIndex() {
        const { data, status, info } = await this.$request.teacherIndex();
        if (status === 0) {

          this.dataInfo = { ...data };

        } else {
          this.$message.error(info);
        }
      },

      async schoolIndex() {
        const { data, status, info } = await this.$request.schoolIndex();
        if (status === 0) {

          this.dataInfo = { ...data };
        } else {
          this.$message.error(info);
        }
      },
      async tenantIndex() {
        const { data, status, info } = await this.$request.tenantIndex();
        if (status === 0) {
          this.dataInfo = { ...data };

        } else {
          this.$message.error(info);

        }
      },
      async classIndex() {
        const { data, status, info } = await this.$request.classIndex();
        if (status === 0) {
          this.dataInfo = { ...data };
        } else {
          this.$message.error(info);

        }
      },

       async personalIndex() {
        const { data, status, info } = await this.$request.personalIndex();
        if (status === 0) {
          this.dataInfo = { ...data };
        } else {
          this.$message.error(info);
        }
      },

    },
  };
  </script>
  
  <style lang="scss">

  .container {

    display: flex;

    justify-content: center;
    align-items: center;
    padding: 100px 90px 0 50px;
    .nav-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .nav-item {
        background: #f8f8f8;
        border-radius: 20px;
        box-shadow: 3px 3px 3px #aaaaaa59;
        cursor: pointer;
        &:hover {
          background-color: #ededed;

        }

        .icon {
          width: 110px;
          height: 110px;
          border-radius: 50%;

        }

        .p1 {
          font-size: 18px;
          color: #333;
          line-height: 18px;
          margin-bottom: 12px;
          font-weight: 500;

        }

        .p2 {
          font-size: 14px;
          color: #999;

        }

      }
      .item1 {
        width: calc(50% - 10px);
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;

        padding: 40px 20px 40px 80px;

        &:nth-child(2) {
          margin-right: 0;

        }

        .icon {
          margin-right: 20px;

        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 10px;

        }

        .p2 {
          line-height: 24px;
        }
        &.item-child1 {
          width: 100%;
          height: calc(50% - 8px);
          margin-bottom: 16px;
          padding: 0 20px;
          align-items: center;
          .icon {
            width: 80px;
            height: 80px;

          }

        }
        &.item-child2 {
          height: calc(50% - 8px);

          flex-wrap: wrap;

          padding: 12px 0 12px 30px;

          .icon {
            width: 60px;
            height: 60px;

          }

          .p1 {
            flex: 1;
            line-height: 60px;
            margin-bottom: 0;

          }

          .p2 {
            width: 100%;

          }

          &:last-of-type {
            margin-right: 0;

          }
        }
      }

      .item2 {
        width: calc(50% - 10px);
        height: 240px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        box-sizing: border-box;
        padding: 30px 0;
        text-align: center;
        &:last-of-type {
          margin-right: 0;
        }
        .icon {
          margin-bottom: 20px;
        }
        .p2 {
          line-height: 16px;
        }
      }
      .item3 {
        width: calc(50% - 10px);
        height: 240px;
        display: flex;
        flex-wrap: wrap;
      }
      .item4 {
        width: calc(50% - 10px);
        flex-shrink: 0;
        display: flex;
        justify-content: flex-start;
        margin-right: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 40px 80px;
        &:nth-child(2n) {
          margin-right: 0;
        }
        .icon {
          margin-right: 20px;
        }
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-top: 10px;
        }
        .p2 {
          line-height: 24px;
        }
      }

    }
  }

  </style>