cloudfile-ui/src/views/HomePage/HomePage.vue

<template>
  <div class="homePage">
    <div class="bg_box">
      <!-- 动态背景 -->
      <video autoplay="autoplay" loop class="fillWidth" muted="muted">
        <source src="@/assets/images/home/bg.mp4" type="video/mp4" />
      </video>
      <div class="bigC_box">
        <!-- 中间的大圆 -->
        <div class="bigImg_box">
          <img src="@/assets/images/home/bigC.jpg" class="bigC" alt="" />
          <div class="bidCText">
            <span class="percentage">{{ percent() }}%</span>
            <span>已使用空间</span>
          </div>
        </div>
        <div class="ORC_box" @click="toidentifyFont">
          <span class="text">OCR工具</span>
        </div>
        <div class="sacn_box" @click="scannerFile">
          <span class="text">扫描工具</span>
        </div>
        <div class="p2w_box" @click="pdf2word">
          <span class="text">PDF转Word</span>
        </div>
      </div>
    </div>
    <div class="list_box">
      <div class="top">
        <div class="left">快捷访问</div>
        <div class="right">最近文件</div>
      </div>
      <div class="btm">
        <div class="left_box">
          <div class="big_box">
            <div
              class="one_box"
              @click="openFolder(item)"
              v-for="item in colllectArr"
              :key="item"
            >
              <div class="left">
                <img
                  v-if="item.docDir.dirType === '1'"
                  src="@/assets/images/fileBox.png"
                  alt=""
                />
                <img v-else src="@/assets/images/ordinary.png" alt="" />
              </div>
              <div class="right">
                <span class="title">{{ item.docDir.dirName }}</span>
                <span class="path">{{ item.docDir.dirPath }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right_box">
          <div class="big_box">
            <el-table
              :data="tableFileData"
              style="width: 100%"
              height="29vh"
              :scrollbar-always-on="false"
              @row-click="toFile"
            >
              <el-table-column fixed prop="date" label="名称" width="500">
                <template #default="scope">
                  <div class="title_row">
                    <img
                      class="table_icon"
                      :src="setImg(scope.row == null ? '' : scope.row.fileType)"
                      alt=""
                      style=""
                    />
                    <span class="shouzhi">
                      {{ scope.row == null ? "" : scope.row.fileName }}</span
                    >
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="时间" width="180" />
              <el-table-column prop="fileType" label="类型" width="230" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 扫描文档 -->
  <ScanFile
    v-if="openScan"
    :openScan="openScan"
    :scannerFiles="scannerFiles"
    @saveScanFile="saveScanFile"
    @closeOpen="closeOpen"
  ></ScanFile>
  <!-- 可用扫描仪信息 -->
  <div>
    <el-dialog v-model="checkScanner" title="扫描仪" width="30%">
      <div
        v-for="item in scannerList"
        :key="item.scannerId"
        @click="checkScanFn(item)"
        id="Onescan"
        :class="{ checkScan: item.scannerId == checkScanId }"
      >
        <img src="@/assets/images/scanImg.png" alt="" />
        {{ item.scannerName }}
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeCheckScanner">取消</el-button>
          <el-button type="primary" @click="sureScaner">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
  <!-- 扫描文件移动到 -->
  <MoveTo
    v-if="openScanMove"
    :spaceType="3"
    :scanFileArr="scanFileArr"
    :thisFolder="thisFolder"
    :openScanMove="openScanMove"
    :spaceId="spaceId"
    @closeOpenScanMove="closeOpenScanMove"
  ></MoveTo>
  <ImgPreview
    :previewData="previewData"
    :copyFileType="copyFileType"
    :showPreview="showPreview"
    @closeImgPreview="closeImgPreview"
  ></ImgPreview>
  <div
    v-loading.fullscreen="loadingPreview"
    v-if="loadingPreview"
    class="lodingBox"
  ></div>
</template>

<script setup>
import { onMounted, ref, toRaw, inject } from "vue";
import { listRecent, getRecent } from "@/api/biz/recent";
import { getInfo, getInfoByDirId } from "@/api/biz/info";
import { canPreviewFile, rightMenuRole, setIcon } from "@/utils/index.js";
import { getDir } from "@/api/biz/dir";
import myfile from "@/api/myfile/myfile";
import ScanFile from "@/components/ScanFile/ScanFile.vue";
import MoveTo from "@/components/MoveTo/MoveTo.vue";
import { listInfo, selectInfo, getFileByScanerId } from "@/api/scanner/info.js";
import { listFavoriteById } from "@/api/biz/favorite.js";
import { preview } from "@/api/common/common.js";
import ImgPreview from '@/components/ImgPreview/ImgPreview.vue'
const tableFileData = ref([]);
const tableFolderData = ref([]);
const useSpace = ref();
const allSpace = ref();
const spaceId = ref();
const addFolderAdd = inject("addFolderAdd");
const scannerList = ref(); // 扫描仪数据
const checkScanId = ref(); // 选中的scan的id
const checkScanner = ref(false); //显示扫描仪选择框
const scannerFiles = ref([]); //选择的扫描仪的文件
const openScanMove = ref(false);
const openScan = ref(false); //控制扫描文档显示
const scanFileArr = ref([]); //认领的扫描文件数组
const colllectArr = ref([]); // 收藏文件夹
const addFileTab = inject("addFileTab");
const previewData = ref();
const showPreview = ref(false);
const loadingPreview = ref(false);
const copyFileType = ref();
const folersArr = ref([]); //路劲上的文件夹
const openFolderTop = ref(); // 所在的空间
const firstFolderData = ref(); // 第一层目录
const getList = async () => {
  const resY = await listRecent({ isFolder: "Y" });
  const resN = await listRecent({ isFolder: "N" });
  // console.log("resY", resY);
  // console.log("resN", resN);
  if (resY.code === 200) {
    var arr = [];
    resY.rows.map(async (item) => {
      const detail = await getDir(item.relaId);
      if (detail.data != null)
        tableFolderData.value.push(JSON.parse(JSON.stringify(detail.data)));
    });
  }
  if (resN.code === 200) {
    var arr = [];
    resN.rows.map(async (item) => {
      const detail = await getInfo(item.relaId);
      tableFileData.value.push(detail.data);
    });
  }
};
const setImg = (type) => {
  return setIcon(type);
};
// 计算百分比
function percent() {
  let numP = 0;
  if (useSpace.value && allSpace.value) {
    numP = (useSpace.value / allSpace.value) * 100;
  }
  // console.log("numP", numP);
  return numP.toFixed(2) - 0; // 将结果保留两位小数
}
function getSpaceList() {
  myfile.fileType(3).then((res) => {
    // console.log('Spaceres',res);
    useSpace.value = res.data.usedCap;
    allSpace.value = res.data.spaceCap;
    spaceId.value = res.data.spaceId;
  });
}
//去文字识别
const toidentifyFont = () => {
  const itemData = {
    name: "文字识别",
    path: "identifyFont",
    clickRowId: "N",
  };
  addFolderAdd(itemData);
};
//去pdf2word
const pdf2word = () => {
  const itemData = {
    name: "Pdf转Word",
    path: "pdf2word",
    clickRowId: "N",
  };
  addFolderAdd(itemData);
};
//获取扫描仪列表
const scannerFile = async () => {
  const res = await selectInfo();
  scannerList.value = res.rows;
  checkScanner.value = true;
  checkScanId.value = null;
  // console.log('scanner',res);
};
// 选择扫描仪
const checkScanFn = (item) => {
  checkScanId.value = item.scannerId;
};
// 确认选择扫描仪 获取扫描仪下文件列表
const sureScaner = async () => {
  if (!checkScanId.value) return;
  const res = await getFileByScanerId(checkScanId.value);
  // console.log("sureScanerres", res);
  scannerFiles.value = res.data;
  checkScanner.value = false;
  openScan.value = true;
};
// 关闭窗口
const closeCheckScanner = () => {
  checkScanner.value = false;
};
const closeOpen = () => {
  openScan.value = false;
};
// 移动到事件
const saveScanFile = (arr) => {
  // console.log("arr", arr);
  openScan.value = false;
  scanFileArr.value = arr;
  openScanMove.value = true;
};
// 关闭窗口
const closeOpenScanMove = () => {
  openScanMove.value = false;
  // refreshFile();
};
// 获取收藏数据
const getCollectFolder = async () => {
  const query = {
    isAsc: "desc",
    orderByColumn: "createTime",
  };
  const res = await listFavoriteById(-1, query);
  // console.log("res", res);
  // console.log("----res", res);
  colllectArr.value = res.rows.filter((item) => item.isFolder === "Y");
  // console.log('colllectArr.value',colllectArr.value);
};
// 打开文件
const toFile = async (row) => {
  copyFileType.value = row.fileType;
  loadingPreview.value = true;
  const filePreview = canPreviewFile(row.fileType);
  if (filePreview) {
    loadingPreview.value = false;
    addFileTab(row, 0, 0);
  } else {
    const res = await preview(row.docId);
    showPreview.value = true;
    previewData.value = URL.createObjectURL(res);
    loadingPreview.value = false;
  }
};
// 打开文件夹
const openFolder =async (row)=>{
  folersArr.value = []
  openFolderTop.value = null
  firstFolderData.value = null
  // console.log("thisFolder.value", thisFolder.value);
  const thisFolderD = toRaw(row); //打开的收藏文件
  async function getFoldersData(info) {
    if (info.parentId) {
      folersArr.value.push(JSON.parse(JSON.stringify(info)));
      const res = await getDir(info.parentId);
      // console.log('res====',res);
      await getFoldersData(res.data);
    } else {
      openFolderTop.value = info;
      return;
    }
  }
  await getFoldersData(thisFolderD.docDir);
  // folersArr = JSON.parse(JSON.stringify(folersArr))
  folersArr.value.reverse();
  firstFolderData.value = folersArr.value[0];
  // console.log("folersArr", folersArr.value);
  // console.log("openFolderTop", openFolderTop.value);
  sessionStorage.setItem('folderArr',JSON.stringify(folersArr.value))
  // 判断空间
  if (openFolderTop.value.dirName.includes("个人空间")) {
    // 创建标签
    const addData = {
      path: "/myfile" + firstFolderData.value.dirId,
      name: firstFolderData.value.dirName,
      clickRowId:firstFolderData.value,
    };
    addFolderAdd(addData);
  } else if (openFolderTop.value.dirName.includes("部门空间")) {
        // 创建标签
    const addData = {
      path: "/department" + firstFolderData.value.dirId,
      name: firstFolderData.value.dirName,
      clickRowId:firstFolderData.value,
    };
    addFolderAdd(addData);
  } else {
            // 创建标签
    const addData = {
      path: "/publicment" + firstFolderData.value.dirId,
      name: firstFolderData.value.dirName,
      clickRowId:firstFolderData.value,
    };
    addFolderAdd(addData);
  }
}
//关闭图片预览事件
const closeImgPreview = () => {
  // console.log('close');
  showPreview.value = false;
};
onMounted(() => {
  getList();
  getCollectFolder();
  getSpaceList();
});
</script>

<style lang="scss" scoped>
.homePage {
  width: 100%;
  height: 88vh;
  //   background-color: #fff;
}
.bg_box {
  width: 100%;
  height: 600px;
  position: relative;

  //   background-image: url("@/assets/images/home/backImg.png");
  //   background-repeat: no-repeat;
  //   background-size: contain;
  .fillWidth {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
  .bigC_box {
    width: 382px;
    height: 382px;
    position: absolute;
    top: calc(40% - 191px);
    left: calc(50% - 191px);
    .bidCText {
      position: absolute;
      width: 108px;
      height: 58px;
      left: calc(50% - 54px);
      top: calc(50% - 29px);
      display: flex;
      flex-direction: column;
      color: #fff;
      align-items: center;
      z-index: 15;
      .percentage {
        font-weight: 800;
        font-size: 40px;
        line-height: 52px;
      }
    }
    .ORC_box {
      width: 118px;
      height: 118px;
      position: absolute;
      top: 15%;
      left: -10%;
      background-image: url("@/assets/images/home/ORC.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 15;
      .text {
        width: 100px;
        text-align: center;
        position: absolute;
        bottom: -15%;
        left: calc(50% - 50px);
        font-size: 16px;
        color: #fff;
      }
      &:hover {
        background-image: url("@/assets/images/home/ORC_hover.jpg");
      }
    }
    .sacn_box {
      width: 118px;
      height: 118px;
      position: absolute;
      top: 15%;
      right: -10%;
      background-image: url("@/assets/images/home/scan.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 15;
      .text {
        width: 100px;
        text-align: center;
        position: absolute;
        bottom: -15%;
        left: calc(50% - 50px);
        font-size: 16px;
        color: #fff;
      }
      &:hover {
        background-image: url("@/assets/images/home/scan_hover.jpg");
      }
    }
    .p2w_box {
      width: 118px;
      height: 118px;
      position: absolute;
      bottom: -59px;
      left: calc(50% - 59px);
      background-image: url("@/assets/images/home/p2w.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      z-index: 15;
      .text {
        width: 100px;
        text-align: center;
        position: absolute;
        bottom: -15%;
        left: calc(50% - 50px);
        font-size: 16px;
        color: #fff;
      }
      &:hover {
        background-image: url("@/assets/images/home/p2w_hover.jpg");
      }
    }
  }
  .bigC {
    width: 382px;
    height: 382px;
    z-index: 10;
    position: absolute;
    top: calc(50% - 191px);
    left: calc(50% - 191px);
  }
}
.list_box {
  margin-top: -70px;
  box-sizing: border-box;
  position: relative;
  z-index: 105;
  width: 100%;
  height: calc(88vh - 600px + 70px);
  // background-image: url("@/assets/images/home/Rectangle.webp");
  // background-repeat: no-repeat;
  // background-size: cover;
  // display: flex;
  .top {
    width: 100%;
    height: 40px;
    color: #f4f5ff;
    display: flex;
    background-image: url("@/assets/images/home/up.png");
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    line-height: 40px;
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      width: 50%;
      height: 100%;
    }
  }
  .btm {
    background-image: url("@/assets/images/home/btm.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    .left_box {
      width: 50%;
      // height: 100%;
      // overflow-y: auto;
      // border-right: 1px solid #000;
      .big_box {
        width: 100%;
        height: 29vh;
        padding-left: 24px;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        .one_box {
          width: 214px;
          height: 77px;
          display: flex;
          align-items: center;
          cursor: pointer;
          .left {
            width: 64px;
            height: 64px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 124px;
            height: 46px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            // text-align: left;
            .title {
              width: 120px;
              color: #f4f5ff;
              /*第一步： 溢出隐藏 */
              overflow: hidden;
              /* 第二步：让文本不会换行， 在同一行继续 */
              white-space: nowrap;
              /* 第三步：用省略号来代表未显示完的文本 */
              text-overflow: ellipsis;
            }
            .path {
              font-size: 14px;
              color: #7a89ba;
              width: 120px;
              /*第一步： 溢出隐藏 */
              overflow: hidden;
              /* 第二步：让文本不会换行， 在同一行继续 */
              white-space: nowrap;
              /* 第三步：用省略号来代表未显示完的文本 */
              text-overflow: ellipsis;
            }
          }
        }
        .add_box {
          width: 214px;
          height: 77px;
          background-image: url("@/assets/images/home/addBox.png");
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
      &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0) !important;
      }
    }
    .right_box {
      width: 50%;
      // height: 100%;
      .title_row {
        display: flex;
        align-items: center;
        // vertical-align: middle;
      }
      .table_icon {
        width: 32px;
        height: 32px;
      }
      .shouzhi {
        cursor: pointer;
      }
    }
  }
}
.checkScan {
  background-color: #f5f7f9;
}
#Onescan {
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
:deep(.el-table) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table__header) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table tr) {
  background-color: rgba(0, 0, 0, 0) !important;
  // color: #F4F5FF !important;
}
:deep(.el-table__header-wrapper) {
  background-color: rgba(0, 0, 0, 0) !important;
}
:deep(.el-table td.el-table__cell) {
  border: none;
  font-size: 14px !important;
  font-weight: 400 !important;

  background-color: rgba(0, 0, 0, 0) !important;
  color: #f4f5ff !important;
}
:deep(.el-table__row) {
  height: 32px !important;
  vertical-align: middle;
  // border-bottom: 1px solid #c1cce3;
}

:deep(.el-table .el-table__header-wrapper tr) {
  background-color: rgba(50, 79, 153, 0) !important;
}
:deep(.el-table .el-table__header-wrapper th) {
  // border-right: 1px solid #c1cce3;
  border-bottom: 1px solid #324f99;
  background-color: rgba(50, 79, 153, 0.3) !important;
  color: #7a89ba;
  font-size: 14px;
}
::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>