功能新增：pdf详情单击旋转

src/components/PDFView/index.vue

@@ -33,6 +33,7 @@
         cMapPacked: true,
       }"
       :page="showPdfNumber"
+      @rendered="rendered"
       annotation-layer
       text-layer
     />
@@ -89,6 +90,57 @@ const visible = ref(false);
 const showPdf = () => {
   visible.value = true;
 };
+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`;
+
+      // 更新旋转角度
+      rotationAngle = (rotationAngle + 90) % 360;
+
+      // 检查旋转角度并调整相应的旋转变换
+
+      if (rotationAngle === 0) {
+        element.style.transform = `rotate(${rotationAngle}deg)`;
+      }
+      if (rotationAngle === 90) {
+        element.style.transform = `rotate(${rotationAngle}deg) scaleY(1.4)`;
+      }
+      if (rotationAngle === 180) {
+        element.style.transform = `rotate(${rotationAngle}deg) `;
+      }
+      if (rotationAngle === 270) {
+        element.style.transform = `rotate(${rotationAngle}deg) scaleY(1.4)`;
+      }
+    });
+  });
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/process/popUpView/operatePop.vue

@@ -11,20 +11,18 @@
         v-loading="map.get('callItems')"
         :style="lcRes ? 'background-color: white !important;' : ''"
       >
-        <transition>
-          <div v-if="!lcRes">
-            <div class="titleText">流程叫料</div>
-            <div class="describeText">（向上一流程工序呼叫流程物料）</div>
-          </div>
-          <div v-else>
-            <el-progress type="circle" :percentage="100" status="success">
-              <template #default>
-                <div class="percentage-label">叫料成功</div>
-                <div class="percentage-label">请等待{{ time }}秒后再试</div>
-              </template>
-            </el-progress>
-          </div>
-        </transition>
+        <div v-if="!lcRes">
+          <div class="titleText">流程叫料</div>
+          <div class="describeText">（向上一流程工序呼叫流程物料）</div>
+        </div>
+        <div v-else>
+          <el-progress type="circle" :percentage="100" status="success">
+            <template #default>
+              <div class="percentage-label">叫料成功</div>
+              <div class="percentage-label">请等待{{ time }}秒后再试</div>
+            </template>
+          </el-progress>
+        </div>
       </div>
 
       <div
@@ -104,10 +102,18 @@ emitter.on(EventsNames.PROCESS_STEPOBJ, (data: any) => {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 .titleText {
   text-align: center;
 }
-
 .container {
   height: 50vh;
   width: 40vw;