bug旋转单个pdf

src/components/PDFView/index.vue

@@ -94,53 +94,44 @@ const rendered = () => {
   const clickableElementsA = document.querySelectorAll(
     ".el-drawer__body .vue-pdf-embed div"
   );
-  clickableElementsA.forEach((element) => {
-    // 设置为 flex 布局
-    element.style.display = "flex";
-
-    // 垂直居中
-    element.style.alignItems = "center";
-
-    // 水平居中（可选）
-    element.style.justifyContent = "center";
-  });
   const clickableElements = document.querySelectorAll(
     ".el-drawer__body .vue-pdf-embed .vue-pdf-embed__page"
   );
-  // 为每个元素添加双击事件监听器
+
   clickableElements.forEach((element) => {
     // 初始化一个属性来跟踪旋转角度
     let rotationAngle = 0;
-
     element.addEventListener("click", () => {
-      // 获取当前的宽度和高度
       const currentWidth = element.offsetWidth;
       const currentHeight = element.offsetHeight;
-
-      // 交换宽度和高度
-      element.style.width = `${currentHeight}px`;
-      element.style.height = `${currentWidth}px`;
-
-      // 更新旋转角度
+      let distance = 0;
+      if (currentHeight > currentWidth) {
+        distance = currentHeight - currentWidth;
+      }
       rotationAngle = (rotationAngle + 90) % 360;
-
-      // 检查旋转角度并调整相应的旋转变换
-
-      if (rotationAngle === 0) {
-        element.style.transform = `rotate(${rotationAngle}deg)`;
+      if (rotationAngle == 0) {
+        element.style.transform = `rotate(${rotationAngle}deg) `;
+        element.firstElementChild.style.transform = `translateY(0px) `;
       }
       if (rotationAngle === 90) {
-        element.style.transform = `rotate(${rotationAngle}deg) `;
+        element.style.transform = `rotate(${rotationAngle}deg)`;
+        element.firstElementChild.style.transform = `translateY(-${distance / 2}px) `;
       }
       if (rotationAngle === 180) {
         element.style.transform = `rotate(${rotationAngle}deg) `;
+        element.firstElementChild.style.transform = `translateY(0px) `;
       }
       if (rotationAngle === 270) {
         element.style.transform = `rotate(${rotationAngle}deg) `;
+        element.firstElementChild.style.transform = `translateY(${distance / 2}px) `;
       }
     });
   });
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.a {
+  position: relative;
+}
+</style>

src/views/pro-operation/drawing/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar>
+  <el-scrollbar style="height: calc(100vh - 120px)">
     <div class="grid-container">
       <div v-for="(box, index) in drawingData" :key="index" class="suit-box">
         <div class="pdf-box">

src/views/pro-operation/inspect/components/checkForm.vue

@@ -3,15 +3,53 @@
     <!-- <el-form-item label="检验项名称" prop="checkName">
       <el-input v-model="modelValue.checkName" />
     </el-form-item> -->
+    <el-form-item label="检验名称" prop="checkName">
+      <el-input v-model="modelValue.checkName" :disabled="true" />
+      <!-- <el-select v-model="modelValue.checkContent" filterable>
+        <el-option
+          v-for="(item, index) in options"
+          :key="index"
+          :label="item.label"
+          :value="item.label"
+        />
+      </el-select> -->
+    </el-form-item>
+    <el-form-item label="检验编码" prop="checkCode">
+      <div class="flex" style="justify-content: space-between; width: 100%">
+        <el-input v-model="modelValue.checkCode" :disabled="true" />
+        <el-button
+          style="margin-left: 10px"
+          class="sureBtn"
+          type="primary"
+          @click="openPop"
+          >选 择
+        </el-button>
+      </div>
+
+      <!-- <el-select v-model="modelValue.checkContent" filterable>
+        <el-option
+          v-for="(item, index) in options"
+          :key="index"
+          :label="item.label"
+          :value="item.label"
+        />
+      </el-select> -->
+    </el-form-item>
+
     <el-form-item label="检验内容" prop="checkContent">
-      <el-select v-model="modelValue.checkContent" filterable>
+      <el-input
+        v-model="modelValue.checkContent"
+        :disabled="true"
+        type="textarea"
+      />
+      <!-- <el-select v-model="modelValue.checkContent" filterable>
         <el-option
           v-for="(item, index) in options"
           :key="index"
           :label="item.label"
           :value="item.label"
         />
-      </el-select>
+      </el-select> -->
     </el-form-item>
     <el-form-item label="结果" prop="result">
       <el-select v-model="modelValue.result">
@@ -36,22 +74,23 @@
     <!--      <FilesUpload v-model:src="modelValue.filePath" ref="uploadRef" />-->
     <!--    </el-form-item>-->
   </el-form>
+  <Pop v-model="showPop" v-if="showPop" />
 </template>
 <script setup>
 import { useProcessStore } from "@/store/modules/processView";
-import { checkLists } from "@/api/prosteps/dianjian";
+
+import Pop from "./pop.vue";
 const processStore = useProcessStore();
 const checkListData = ref([]);
-const getCheckOpList = async () => {
-  const { data } = await checkLists({
-    pageSize: 9999,
-    pageNo: 1,
-  });
-  checkListData.value = data.records;
+const showPop = ref(false);
+const openPop = () => {
+  showPop.value = true;
 };
+const getCheckOpList = async () => {};
 const rules = reactive({
   checkContent: [{ required: true, trigger: "blur" }],
   checkName: [{ required: true, trigger: "blur" }],
+  checkCode: [{ required: true, trigger: "blur" }],
   result: [{ required: true, trigger: "blur" }],
   seqNoList: [{ required: true, trigger: "blur" }],
 });
@@ -77,15 +116,15 @@ const getSeq = async () => {
     seqNoList: SeqArray.value,
   });
 };
-const options = computed(() => {
-  let arr = [];
-  for (let i = 0; i < checkListData.value.length; i++) {
-    arr.push({
-      label: checkListData.value[i].content,
-    });
-  }
-  return arr;
-});
+// const options = computed(() => {
+//   let arr = [];
+//   for (let i = 0; i < checkListData.value.length; i++) {
+//     arr.push({
+//       label: checkListData.value[i].content,
+//     });
+//   }
+//   return arr;
+// });
 onMounted(() => {
   getSeq();
   getCheckOpList();

src/views/pro-operation/inspect/components/pop.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="midPopUp" v-if="modelValue" @click="handleClose">
+    <div class="container" @click.stop>
+      <div class="search">
+        <div class="body">
+          <el-form
+            ref="formRef"
+            :model="searchData"
+            label-width="100px"
+            style="display: flex"
+          >
+            <el-form-item
+              style="margin-right: 10px"
+              label="点检项名称:"
+              prop="checkName"
+            >
+              <el-input v-model="searchData.checkName" />
+            </el-form-item>
+            <el-form-item label="点检项编码:" prop="checkCode">
+              <el-input v-model="searchData.checkCode" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="seatchBtn">
+          <el-button class="sureBtn" type="primary" @click="getListData"
+            >搜 索
+          </el-button>
+          <el-button class="sureBtn" @click="clearSearch">清 空 </el-button>
+        </div>
+      </div>
+      <el-scrollbar class="table">
+        <el-table id="table" :data="checkListData">
+          <el-table-column label="点检项名称" prop="checkName" />
+          <el-table-column label="点检项编码" prop="checkCode" />
+          <el-table-column label="内容" prop="content" />
+          <el-table-column label="操作" width="80px">
+            <template #default="scope">
+              <span class="opera" @click="select(scope.row)">选择</span>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <div class="empty">
+              <Empty />
+            </div>
+          </template>
+        </el-table>
+      </el-scrollbar>
+      <div class="bottom">
+        <div>
+          <Pagination
+            v-model:limit="page.pageSize"
+            v-model:page="page.pageNo"
+            :total="page.total"
+            @pagination="getListData"
+          />
+        </div>
+        <div>
+          <el-button class="sureBtn" @click="handleClose">关闭 </el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { checkLists } from "@/api/prosteps/dianjian";
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+});
+const page = reactive({
+  pageSize: 10,
+  pageNo: 1,
+  total: 0,
+});
+const searchData = ref({
+  checkName: null,
+  checkCode: null,
+});
+const formData = inject("formData");
+const select = (row) => {
+  formData.value.checkCode = row.checkCode;
+  formData.value.checkName = row.checkName;
+  formData.value.checkContent = row.content;
+  handleClose();
+};
+const checkListData = ref([]);
+const reset = () => {
+  searchData.value.checkCode = null;
+  searchData.value.checkName = null;
+  page.pageNo = 1;
+  getListData();
+};
+const clearSearch = async () => {
+  reset();
+};
+const getListData = async () => {
+  const { data } = await checkLists({
+    pageSize: page.pageSize,
+    pageNo: page.pageNo,
+    ...searchData.value,
+  });
+  checkListData.value = data.records;
+  page.total = data.totalCount;
+};
+const handleClose = () => {
+  emits("update:modelValue", false);
+};
+onMounted(() => {
+  getListData();
+});
+</script>
+
+<style lang="scss" scoped>
+.opera {
+  font-size: 20px;
+  margin-right: 10px;
+  cursor: pointer;
+  color: rgb(64, 158, 255);
+}
+.search {
+  width: 100%;
+  height: 90px;
+}
+.seatchBtn {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+.table {
+  width: 100%;
+  flex: 1;
+  border-radius: 16px;
+}
+.bottom {
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+</style>

src/views/pro-operation/inspect/index.vue

@@ -66,7 +66,8 @@
           style="height: calc(100vh - 250px); border-radius: 16px"
         >
           <el-table-column label="序号" type="index" width="80" />
-          <!-- <el-table-column label="检验项名称" prop="checkName" /> -->
+          <el-table-column label="检验项名称" prop="checkName" />
+          <el-table-column label="检验项编码" prop="checkCode" />
           <el-table-column label="检验项内容" prop="checkContent" />
           <el-table-column label="流转卡号" prop="seqNo" />
           <el-table-column label="备注" prop="remark" />
@@ -161,6 +162,7 @@ import CheckForm from "./components/checkForm.vue";
 
 const formRef = ref(null);
 const formData = ref({});
+provide("formData", formData);
 const checkName = ref(null);
 const checkType = ref("first_check");
 const editStatus = ref(false);
@@ -168,6 +170,7 @@ const editCheck = async (row) => {
   editType.value = "edit";
   formData.value.checkContent = row.checkContent;
   formData.value.checkName = row.checkName;
+  formData.value.checkCode = row.checkCode;
   formData.value.result = row.result;
   formData.value.remark = row.remark;
   formData.value.id = row.id;