JG-CLIENT-TEMP/src/views/pro-operation/drawing/index.vue

<template>
  <el-scrollbar>
    <div class="grid-container">
      <div v-for="(box, index) in drawingData" :key="index" class="suit-box">
        <div class="pdf-box">
          <PDFView
            :need-to-show-pdf="true"
            :pdf-source="baseUrl + box.drawingPath"
          />
        </div>
        <div class="suit-title">{{ box?.drawingTitle }}</div>
        <div class="suit-desc">{{ box?.created }}</div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import { drawingList } from "@/api/process/reportBreak";
import { useProcessStore } from "@/store/modules/processView";
import PDFView from "@/components/PDFView/index.vue";

const processStore = useProcessStore();
const drawingData = ref<any>([]);

const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;

onMounted(() => {
  drawingList({ materialCode: processStore.scanInfo.materialCode }).then(
    (res) => {
      drawingData.value = res.data;
    }
  );
});
</script>

<style lang="scss" scoped>
.grid-container {
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  overflow-y: auto;
  padding: 24px;
  width: calc(100% - 48px);
  grid-template-columns: 1fr 1fr 1fr;

  .suit-box {
    height: 343px;
    background-color: white;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;

    .pdf-box {
      height: 263px;
      width: 100%;
      overflow: hidden;
    }

    .suit-title {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      margin-left: 24px;
    }

    .suit-desc {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      margin-left: 24px;
    }
  }
}
</style>