gj-erp-kban-vue/src/components/ViewPDF/index.vue

<template>
  <!-- 查看pdf -->
  <div class="viewpdf-container">
    <!-- 筛选 -->
    <div class="formData-box">
      <el-select v-model="formData.dcCh" size="mini" placeholder="请选择船号">
        <el-option
          v-for="(item, index) in dcChOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="formData.dcPl" size="mini" placeholder="请选择批次">
        <el-option
          v-for="(item, index) in dcPlOptions"
          :key="index"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select v-model="formData.kw" size="mini" placeholder="请选择套料图">
        <el-option label="四垮" :value="4"></el-option>
        <el-option label="五垮" :value="5"></el-option>
        <el-option label="六垮" :value="6"></el-option>
      </el-select>
      <div class="query-btn" @click="queryBtn">确定</div>
    </div>
    <div class="viewpdf-box">
      <div class="border-out">
        <div class="border-inner">
          <div class="viewpdf-flex">
            <div class="left-box">
              <div></div>
            </div>
            <div class="right-box"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getProject } from "@/api/viewPDF";
// import pdf from 'vue-pdf'
export default {
  name: "ViewPDF",
  // components:{
  //   pdf
  // },
  data() {
    return {
      formData: {
        dcCh: "",
        dcPl: "",
      },
      dcChOptions: [],
      dcPlOptions: [],
    };
  },
  mounted() {
    this.queryBtn();
  },
  methods: {
    // 根据年份查询
    queryBtn() {
      this.getProject();
    },
    getProject() {
      getProject({
        nf: this.formData.year,
      }).then((res) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.viewpdf-container {
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  .formData-box {
    width: 450px !important;
    margin-bottom: 18px;
  }
  .viewpdf-box {
    display: flex;
    align-items: stretch;
    height: calc(100vh - 105px);
    .viewpdf-flex {
      display: flex;
    }
    .left-box {
    }
    .right-box {
    }
  }

  .box-top {
    margin-top: 5px;
  }

  .border-out {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px #0174f5 solid;
    padding: 1px;
    box-sizing: border-box;
  }
  .border-inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px solid #016ae0;
    border-radius: 10px;
  }
  .border-inner {
    background-color: rgba(2, 8, 23, 0.1);
  }
}
</style>