mky-vent-base/src/views/vent/performance/fileIndex/index.vue

<template>
  <div class="performance">
    <customHeader>文件共享中心</customHeader>
    <div class="main-container">
      <div
        class="card"
        v-for="(item, index) in titleList"
        :class="index === active ? 'actived' : 'isActived'"
        :key="index"
        @click="getDetails(index)"
      >
        <div class="card-t">{{ item.sysOrgName }}</div>
        <div class="card-b">
          <div class="box" v-for="(items, ind) in item.tab" :key="ind" @click="getToggle(ind, item)">
            <div class="img"> <img :src="items.src" alt="" /> </div>
            <div class="text">{{ items.text }}</div>
            <div class="num">{{ items.num }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';

  import { useRouter } from 'vue-router';
  import leftImg from '../../../../assets/images/files/homes/file.svg';
  import rightImg from '../../../../assets/images/files/homes/sp.svg';
  import { list } from './fileIndex.api';
  import customHeader from '/@/views/vent/comment/components/customHeader.vue';
  let router = useRouter(); //路由
  let active = ref(); //当前选中项
  let titleList = reactive<any[]>([]);
  let homeParam = reactive({
    sysOrgCode: '',
    bpmStatus: null,
    flag: '',
  });
  //获取首页数据
  let getPageList = async () => {
    let data = await list();
    console.log(data, '首页数据');
    if (data.length !== 0) {
      let datas = data.map((el) => {
        return {
          sysOrgName: el.sysOrgName,
          sysOrgCode: el.sysOrgCode,
          flag: el.flag,
          tab: [
            { src: leftImg, text: '文档总数', num: el.tolalNum },
            { src: rightImg, text: '待审批数', num: el.approveNum },
          ],
        };
      });
      titleList.push(...datas);
      console.log(titleList, '123456');
    }
  };

  //切换选项
  let getDetails = (index) => {
    active.value = index;
  };
  // //切换左右选项
  let getToggle = (ind, item) => {
    console.log(ind, '审批状态索引');
    console.log(item, 'item');
    homeParam.sysOrgCode = item.sysOrgCode;
    homeParam.flag = item.flag;
    if (ind) {
      homeParam.bpmStatus = 2;
    } else {
      homeParam.bpmStatus = homeParam.flag ? '' : 'All';
    }

    console.log(homeParam, 'home0000000000');
    router.push({
      path: '/fileManager/fileDetail/home',
      query: { sysOrgCode: homeParam.sysOrgCode, bpmStatus: homeParam.bpmStatus, flag: homeParam.flag },
    });
  };
  onMounted(() => {
    getPageList();
  });
</script>

<style lang="less" scoped>
  @font-face {
    font-family: 'douyuFont';
    src: url(../../../../assets/images/files/douyuFont.otf);
  }

  .performance {
    width: 100%;
    height: 100%;
    padding: 15px;
    position: relative;
    box-sizing: border-box;
    background: url(../../../../assets/images/files/homes/bd.png) no-repeat center;

    .main-container {
      width: 100%;
      height: calc(100% - 30px);
      display: flex;
      flex-direction: row;
      // justify-content: flex-start;
      // align-items: flex-start;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .card {
        width: 331px;
        height: 235px;
        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
        background-size: 100% 100%;
        margin: 0px 23px 15px 23px;
        cursor: pointer;

        .card-t {
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: '思源黑体', 'Microsoft Yahei';
          font-size: 20px;
          color: #fff;
        }

        .card-b {
          height: calc(100% - 65px);
          margin-top: 15px;
          display: flex;
          flex-direction: row;

          .box {
            display: flex;
            flex: 1;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;

            &:first-child .img {
              position: relative;
              width: 72px;
              height: 78px;
              background: url(../../../../assets/images/files/homes/file1.png) no-repeat center;

              img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -75%);
              }
            }

            &:last-child .img {
              position: relative;
              width: 72px;
              height: 78px;
              background: url(../../../../assets/images/files/homes/sp.png) no-repeat center;

              img {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -75%);
              }
            }

            .text {
              margin: 5px 0px;
              font-family: '思源黑体', 'Microsoft Yahei';
              color: #fff;
              font-size: 14px;
            }

            &:first-child .num {
              width: 120px;
              height: 30px;
              font-family: 'douyuFont';
              color: #fff;
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: url(../../../../assets/images/files/homes/file2.png) no-repeat center;
            }

            &:last-child .num {
              width: 120px;
              height: 30px;
              font-family: 'douyuFont';
              color: #fff;
              font-size: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: url(../../../../assets/images/files/homes/sp2.png) no-repeat center;
            }
          }
        }
      }

      .actived {
        background: url(../../../../assets/images/files/homes/mouse.png) no-repeat center;
        background-size: 100% 100%;
      }

      .isActived {
        background: url(../../../../assets/images/files/homes/default.png) no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
</style>