feature/动画实现

src/App.vue

@@ -1,12 +1,17 @@
 <template>
   <el-config-provider :locale="locale" :size="size">
     <!-- 开启水印 -->
-    <el-watermark v-if="watermarkEnabled" :font="{ color: fontColor }" :content="defaultSettings.watermarkContent"
-      class="wh-full">
+    <el-watermark
+      v-if="watermarkEnabled"
+      :font="{ color: fontColor }"
+      :content="defaultSettings.watermarkContent"
+      class="wh-full"
+    >
       <router-view />
     </el-watermark>
     <!-- 关闭水印 -->
     <router-view v-else />
+    <Waves />
   </el-config-provider>
 </template>
 

src/components/Waves/index.vue

@@ -0,0 +1,109 @@
+//waves.vue
+<template>
+  <div data-tname="WaveItem">
+    <div class="main-container">
+      <div class="waves">
+        <div class="wave" v-for="(item, key) in waves" :key="key" :style="item">
+          <div
+            v-for="n in wavesConfig.total"
+            :key="n"
+            class="wave-item"
+            :style="{
+              transform: `scale(${0.1 * Math.sqrt(n - 1)})`, // 使得波纹大小指数增长
+              opacity: 0.3 * (1 / n), // 因为相互层叠的波纹透明度会相互叠加，需要越小的波纹透明度越低，以免中心颜色过重
+              animationDelay: `${(n - 1) * 0.12}s`, // 越大的波纹越晚出现，以呈现波纹逐渐扩散的效果
+              animationDuration: `${
+                0.6 + n * 0.3 + parseInt(item.width) * 0.002
+              }s`, // 波纹动画时间渐增，表现波纹向外扩散渐慢的效果,波纹尺寸越大动画时间越长。
+              backgroundColor: wavesConfig.waveColor,
+            }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WaveItem",
+  data() {
+    return {
+      waves: [],
+      wavesConfig: {
+        maxSize: 80, // px，波纹最大尺寸
+        minSize: 30, // px，波纹最小尺寸
+        zIndexCount: 9999, // 波纹父元素其z-index数值
+        waveColor: "#3E8CE3", //波纹基础颜色
+        total: 5, //波纹圈层数
+      },
+      clear: {
+        delay: 5000,
+        timeoutId: null,
+      },
+    };
+  },
+  mounted() {
+    document.getElementById("app").onclick = (e) => {
+      this.createWave(e);
+      this.intervalClearWave();
+    };
+  },
+  methods: {
+    createWave(e) {
+      // 让新生成的波纹始终在之前波纹的上层产生叠加效果
+      if (this.wavesConfig.zIndexCount > 999999999) {
+        this.wavesConfig.zIndexCount = 999999999;
+      } else {
+        this.wavesConfig.zIndexCount++;
+      }
+      // 在一定范围内随机生成波纹的大小
+      const waveSize = parseInt(
+        Math.random() * (this.wavesConfig.maxSize - this.wavesConfig.minSize) +
+          this.wavesConfig.minSize
+      );
+      //添加新的波纹数据
+      this.waves.push({
+        left: `${e.clientX - waveSize / 2}px`,
+        top: `${e.clientY - waveSize / 2}px`,
+        zIndex: this.wavesConfig.zIndexCount,
+        width: `${waveSize}px`,
+        height: `${waveSize}px`,
+      });
+    },
+    intervalClearWave() {
+      clearTimeout(this.clear.timeoutId);
+      this.clear.timeoutId = setTimeout(() => {
+        this.waves = [];
+      }, this.clear.delay);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.waves {
+  .wave {
+    position: fixed;
+    pointer-events: none; // 点击事件穿透，使得鼠标点击可以穿透波纹，兼容ie11及以上
+    @keyframes wave {
+      to {
+        //波纹逐渐扩散变大变透明
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+    .wave-item {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      border-radius: 100%;
+      animation: {
+        name: wave;
+        fill-mode: forwards; // 动画结束后保持最后一帧的状态
+        timing-function: ease-out; // 波纹向外扩散渐缓
+      }
+    }
+  }
+}
+</style>

src/styles/index.scss

@@ -1,5 +1,5 @@
 @use "./reset";
-
+@use "./transition";
 .app-container {
   padding: 10px;
 }

src/styles/transition.scss

@@ -0,0 +1,74 @@
+//v-if
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+//tabs
+.tab-enter-active,
+.tab-leave-active {
+  transition: opacity 1.2s ease;
+}
+
+.tab-enter-from,
+.tab-leave-to {
+  opacity: 0;
+}
+//list
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes bodyHover {
+  from {
+    background-color: white;
+  }
+  to {
+    background-color: #0a59f7;
+  }
+}
+@keyframes stepHover {
+  from {
+    background-color: white;
+  }
+  to {
+    background-color: grey;
+  }
+}
+@keyframes cardHover {
+  from {
+    color: black;
+  }
+  to {
+    color: #0a59f7;
+  }
+}
+@keyframes tabShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/styles/variables.scss

@@ -29,6 +29,7 @@ $sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
 $navbar-height: 80px; // 导航栏高度
 $tags-view-height: 34px; // TagsView 高度
 
+$animation-duration:1.5s;
 $select-hover: #0a59f7; //选中主题色
 $font-default-black: #303030; //字体默认黑
 $font-default-60: #00000060; //黑字体透明60%

src/views/prepare-complete-suit/components/first.vue

@@ -1,17 +1,33 @@
 <template>
   <el-row :gutter="20">
     <el-col :span="5" class="elColClasss">
-      <el-input class="searchInput" style="margin-bottom: 10px" v-model="seachInput" placeholder="搜索工单编号">
-        <template #prefix> </template></el-input>
-      <el-scrollbar>
-        <Order v-for="(item, index) in seachOrderData" :key="index"
-          :hoverStatus="index == selectOrderIndex ? true : false" :item="item" @click="setOrderIndex(index)" />
+      <el-input
+        class="searchInput"
+        style="margin-bottom: 10px"
+        v-model="seachInput"
+        placeholder="搜索工单编号"
+      >
+        <template #prefix> </template
+      ></el-input>
+      <el-scrollbar class="scrollbarSty">
+        <Order
+          v-for="(item, index) in seachOrderData"
+          :key="index"
+          :hoverStatus="index == selectOrderIndex ? true : false"
+          :item="item"
+          @click="setOrderIndex(index)"
+        />
         <Empty v-if="orderData.length == 0" />
       </el-scrollbar>
     </el-col>
     <el-col :span="5" class="elColClasss">
       <el-scrollbar>
-        <Steps :opsArray="opsArray" @setstepindex="setSelectStepIndex" :selectStepIndex="selectStepIndex" />
+  
+        <Steps
+          :opsArray="opsArray"
+          @setstepindex="setSelectStepIndex"
+          :selectStepIndex="selectStepIndex"
+        />
       </el-scrollbar>
     </el-col>
     <el-col :span="14" class="elColClasss">
@@ -24,18 +40,26 @@
             <el-table-column prop="completeNum" label="已经装箱数量" />
             <el-table-column prop="" label="还需装箱数量">
               <template #default="scope">
-                <span :class="scope.row.totalMaterial - scope.row.completeNum < 0
-                    ? 'sumOk'
-                    : 'sumFail'
-                  ">{{
-                    scope.row.totalMaterial - scope.row.completeNum < 1 ? 0 : scope.row.totalMaterial -
-                      scope.row.completeNum }}</span>
+                <span
+                  :class="
+                    scope.row.totalMaterial - scope.row.completeNum < 0
+                      ? 'sumOk'
+                      : 'sumFail'
+                  "
+                  >{{
+                    scope.row.totalMaterial - scope.row.completeNum < 1
+                      ? 0
+                      : scope.row.totalMaterial - scope.row.completeNum
+                  }}</span
+                >
               </template>
             </el-table-column>
 
             <el-table-column label="操作">
               <template #default="scope">
-                <span class="opera" @click="showInfoPop(scope.row)">查询料箱</span>
+                <span class="opera" @click="showInfoPop(scope.row)"
+                  >查询料箱</span
+                >
               </template>
             </el-table-column>
             <template #empty>
@@ -44,7 +68,13 @@
               </div>
             </template>
           </el-table>
-          <Pagination :position="'right'" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
+          <Pagination
+            :position="'right'"
+            :page="page"
+            :limit="limit"
+            :total="total"
+            @pagination="getPagination"
+          />
         </div>
         <!-- <div class="scanCode">
           <ScanCode />
@@ -53,12 +83,31 @@
     </el-col>
   </el-row>
   <div class="scanBox">
-    <el-button type="primary" :disabled="disabled" @click="openPop('扫描料箱')" plain>扫描料箱</el-button>
+    <el-button
+      type="primary"
+      :disabled="disabled"
+      @click="openPop('扫描料箱')"
+      plain
+      >扫描料箱</el-button
+    >
   </div>
-  <ScanCode v-model="modelValue" :title="scanCodeTitle" :operationId="operationId" :workOrderCode="workOrderCode"
-    @gettable="getTableData" />
-  <ShowInfo :key="showInfoKey" v-model="infoModelValue" :operationId="operationId" :workOrderCode="workOrderCode"
-    @reset-options-data="getTableData" />
+  <Transition>
+    <ScanCode
+      v-model="modelValue"
+      :title="scanCodeTitle"
+      :operationId="operationId"
+      :workOrderCode="workOrderCode"
+      @gettable="getTableData"
+  /></Transition>
+  <Transition>
+    <ShowInfo
+      :key="showInfoKey"
+      v-model="infoModelValue"
+      :operationId="operationId"
+      :workOrderCode="workOrderCode"
+      @reset-options-data="getTableData"
+    />
+  </Transition>
 </template>
 
 <script lang="ts" setup>
@@ -224,7 +273,6 @@ watch(infoModelValue, () => {
 
 .elColClasss {
   padding-bottom: 69px;
-
   .rightCol {
     display: flex;
     flex-direction: column;
@@ -254,4 +302,7 @@ watch(infoModelValue, () => {
     }
   }
 }
+.scrollbarSty {
+  height: calc(100vh - 260px);
+}
 </style>

src/views/prepare-complete-suit/components/order.vue

@@ -67,6 +67,8 @@ defineProps({
 .bodyHover {
   background-color: $select-hover;
   color: white;
+  animation-name: bodyHover;
+  animation-duration: $animation-duration;
 }
 
 .boxTextHover {

src/views/prepare-complete-suit/components/steps.vue

@@ -1,36 +1,64 @@
 <template>
   <div class="body">
-    <div class="steps" v-for="(item, index) in opsArray" :key="index" @click="boxClick(item, index)">
-      <div :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'">
-        <div style="display: flex; align-items: center">
-          <div :class="selectStepIndex == index
-              ? 'stepIndex stepIndexHover'
-              : 'stepIndex'
-            ">
-            <span :class="selectStepIndex == index
-                ? 'indexText hoverTextColor'
-                : 'indexText'
-              ">{{ index + 1 }}</span>
-          </div>
-          <div class="midTextBox">
-            <div :class="selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
-              ">
-              {{ item.operationName }}
+    <TransitionGroup name="list">
+      <div
+        class="steps"
+        v-for="(item, index) in opsArray"
+        :key="index"
+        @click="boxClick(item, index)"
+      >
+        <div
+          :class="selectStepIndex == index ? 'stepBox stepBoxHover' : 'stepBox'"
+        >
+          <div style="display: flex; align-items: center">
+            <div
+              :class="
+                selectStepIndex == index
+                  ? 'stepIndex stepIndexHover'
+                  : 'stepIndex'
+              "
+            >
+              <span
+                :class="
+                  selectStepIndex == index
+                    ? 'indexText hoverTextColor'
+                    : 'indexText'
+                "
+                >{{ index + 1 }}</span
+              >
             </div>
-            <div :class="selectStepIndex == index
-                ? 'stepStation stepStationHover'
-                : 'stepStation'
-              ">
-              {{ item.operationCode }}
+            <div class="midTextBox">
+              <div
+                :class="
+                  selectStepIndex == index
+                    ? 'stepName stepNameHover'
+                    : 'stepName'
+                "
+              >
+                {{ item.operationName }}
+              </div>
+              <div
+                :class="
+                  selectStepIndex == index
+                    ? 'stepStation stepStationHover'
+                    : 'stepStation'
+                "
+              >
+                {{ item.operationCode }}
+              </div>
             </div>
           </div>
+          <div
+            :class="
+              selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'
+            "
+          >
+            {{ item.completeNum }}
+          </div>
         </div>
-        <div :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'">
-          {{ item.completeNum }}
-        </div>
+        <div class="line" v-if="index != opsArray.length - 1"></div>
       </div>
-      <div class="line" v-if="index != opsArray.length - 1"></div>
-    </div>
+    </TransitionGroup>
     <el-empty v-if="!opsArray" description="暂无数据" />
   </div>
 </template>
@@ -78,6 +106,8 @@ watch(
 .stepBoxHover {
   box-shadow: 0px 0px 0px 0px;
   background-color: $select-hover;
+  animation-name: bodyHover;
+  animation-duration: $animation-duration;
 }
 
 .stepIndexHover {

src/views/prepare-complete-suit/index.vue

@@ -7,19 +7,25 @@
       @tab-click="handleClick"
     >
       <el-tab-pane label="预齐套" name="first">
-        <div class="contentBox">
-          <First />
-        </div>
+        <Transition name="tab">
+          <div v-if="activeName == 'first'" class="contentBox">
+            <First />
+          </div>
+        </Transition>
       </el-tab-pane>
       <el-tab-pane label="出库" name="second">
-        <div v-if="activeName === 'second'" class="contentBox">
-          <StorageOut />
-        </div>
+        <Transition name="tab">
+          <div v-if="activeName === 'second'" class="contentBox">
+            <StorageOut />
+          </div>
+        </Transition>
       </el-tab-pane>
       <el-tab-pane label="入库" name="third">
-        <div class="contentBox">
-          <StorageIn />
-        </div>
+        <Transition name="tab">
+          <div v-if="activeName == 'third'" class="contentBox">
+            <StorageIn />
+          </div>
+        </Transition>
       </el-tab-pane>
     </el-tabs>
   </div>

src/views/process/components/operate.vue

@@ -8,24 +8,27 @@
       </el-button>
     </div>
     <template v-for="(item, index) in operationObjs" :key="index">
-      <div
-        v-if="
-          index == 1
-            ? selectSeqArray.length > 0 && selectSeqIndex > -1
-              ? true
-              : false
-            : true
-        "
-        class="operateBox"
-        @click="handleClick(item)"
+      <Transition>
+        <div
+          v-if="
+            index == 1
+              ? selectSeqArray.length > 0 && selectSeqIndex > -1
+                ? true
+                : false
+              : true
+          "
+          class="operateBox"
+          @click="handleClick(item)"
+        >
+          <span class="operateText">{{ item.text }}</span>
+          <svg-icon v-if="item.icon" :icon-class="item.icon" size="30" />
+          <span v-else>{{ item.num }}</span>
+        </div></Transition
       >
-        <span class="operateText">{{ item.text }}</span>
-        <svg-icon v-if="item.icon" :icon-class="item.icon" size="30" />
-        <span v-else>{{ item.num }}</span>
-      </div>
     </template>
-
-    <OperatePop v-model="callStatus" />
+    <Transition>
+      <OperatePop v-model="callStatus" />
+    </Transition>
   </div>
 </template>
 
@@ -101,6 +104,7 @@ const call = () => {
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
+    cursor: pointer;
 
     .operateText {
       font-size: $f24;

src/views/process/components/order.vue

@@ -4,15 +4,21 @@
     <div class="topArea">
       <div class="productName">{{ item.materialName }}</div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">产品型号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >产品型号</span
+        >
         <span class="msgValue">{{ item.materialModel }}</span>
       </div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">工单编号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >工单编号</span
+        >
         <span class="msgValue">{{ item.workOrderCode }}</span>
       </div>
       <div class="productMsg">
-        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'">计划编号</span>
+        <span :class="hoverStatus ? 'msgName msgNameHover' : 'msgName'"
+          >计划编号</span
+        >
         <span class="msgValue">{{ item.orderCode }}</span>
       </div>
     </div>
@@ -36,7 +42,10 @@
       </div>
     </div>
     <!-- 右下角状态盒子 -->
-    <div class="statusBox" :style="`background-color:${planStyle(item.workOrderState).bgColor};`">
+    <div
+      class="statusBox"
+      :style="`background-color:${planStyle(item.workOrderState).bgColor};`"
+    >
       {{ dictS.getLableByValue("plan_work_order_state", item.workOrderState) }}
     </div>
   </div>
@@ -102,6 +111,8 @@ const planStyle = (val) => {
 .bodyHover {
   background-color: $select-hover;
   color: white;
+  animation-name: bodyHover;
+  animation-duration: $animation-duration;
 }
 
 .boxTextHover {

src/views/process/components/steps.vue

@@ -1,69 +1,76 @@
 <template>
   <div class="body">
-    <div
-      class="steps"
-      v-for="(item, index) in opsArray"
-      :key="index"
-      @click="boxClick(item, index)"
-    >
+    <TransitionGroup name="list">
       <div
-        :class="
-          item.exists == true
-            ? selectStepIndex == index
-              ? 'stepBox stepBoxHover'
-              : 'stepBox'
-            : 'stepBox stepExistsHover'
-        "
+        class="steps"
+        v-for="(item, index) in opsArray"
+        :key="index"
+        @click="boxClick(item, index)"
       >
-        <div style="display: flex; align-items: center">
-          <div
-            :class="
-              selectStepIndex == index
-                ? 'stepIndex stepIndexHover'
-                : 'stepIndex'
-            "
-          >
-            <span
-              :class="
-                selectStepIndex == index
-                  ? 'indexText hoverTextColor'
-                  : 'indexText'
-              "
-              >{{ index + 1 }}</span
-            >
-          </div>
-          <div class="midTextBox">
-            <div
-              :class="
-                selectStepIndex == index ? 'stepName stepNameHover' : 'stepName'
-              "
-            >
-              {{ item.operationName }}
-            </div>
+        <div
+          :class="
+            item.exists == true
+              ? selectStepIndex == index
+                ? 'stepBox stepBoxHover'
+                : 'stepBox'
+              : 'stepBox stepExistsHover'
+          "
+        >
+          <div style="display: flex; align-items: center">
             <div
               :class="
                 selectStepIndex == index
-                  ? 'stepStation stepStationHover'
-                  : 'stepStation'
+                  ? 'stepIndex stepIndexHover'
+                  : 'stepIndex'
               "
             >
-              {{ item.operationCode }}
+              <span
+                :class="
+                  selectStepIndex == index
+                    ? 'indexText hoverTextColor'
+                    : 'indexText'
+                "
+                >{{ index + 1 }}</span
+              >
+            </div>
+            <div class="midTextBox">
+              <div
+                :class="
+                  selectStepIndex == index
+                    ? 'stepName stepNameHover'
+                    : 'stepName'
+                "
+              >
+                {{ item.operationName }}
+              </div>
+              <div
+                :class="
+                  selectStepIndex == index
+                    ? 'stepStation stepStationHover'
+                    : 'stepStation'
+                "
+              >
+                {{ item.operationCode }}
+              </div>
             </div>
           </div>
+          <div
+            :class="
+              selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'
+            "
+          >
+            {{ item.completeNum }}
+          </div>
         </div>
-        <div
-          :class="selectStepIndex == index ? 'timeBox timeBoxHover' : 'timeBox'"
-        >
-          {{ item.completeNum }}
+        <div v-if="item.exists != true" class="existsText">
+          注：该工位在计划上未分配此工序任务！
         </div>
+        <div class="line" v-if="index != opsArray.length - 1"></div>
       </div>
-      <div v-if="item.exists != true" class="existsText">
-        注：该工位在计划上未分配此工序任务！
-      </div>
-      <div class="line" v-if="index != opsArray.length - 1"></div>
-    </div>
+    </TransitionGroup>
     <el-empty v-if="!opsArray" description="暂无数据" />
     <!-- 弹窗 -->
+    、
     <el-dialog
       v-model="centerDialogVisible"
       width="500"
@@ -88,6 +95,8 @@
 import { useProcessStore } from "@/store";
 import { emitter, EventsNames } from "@/utils/common";
 import { getScan } from "@/api/process";
+import { Transition } from "vue";
+import { Translation } from "vue-i18n";
 const store = useProcessStore();
 const selectSeqArray = inject("selectSeqArray");
 const ordersDataArray = inject("ordersDataArray");
@@ -200,10 +209,14 @@ onBeforeUnmount(() => {
 .stepBoxHover {
   box-shadow: 0px 0px 0px 0px;
   background-color: $select-hover;
+  animation-name: bodyHover;
+  animation-duration: $animation-duration;
 }
 
 .stepExistsHover {
   background-color: grey;
+  animation-name: stepHover;
+  animation-duration: $animation-duration;
   cursor: not-allowed;
 }
 

src/views/process/components/transferNum.vue

@@ -9,44 +9,55 @@
           display: flex;
           align-items: center;
           justify-content: center;
-          min-height: calc(100vh - 216px);
+          min-height: calc(100vh - 210px);
         "
       >
         请选择工序
       </div>
-      <div
-        class="row"
-        @click="clickCardNum(index)"
-        v-for="(item, index) in selectSeqArray"
-        :key="index"
-      >
-        <el-tooltip
-          effect="dark"
-          :content="item.seqNo"
-          placement="left"
-          trigger="hover"
-        >
-          <span
-            :class="
-              index == selectSeqIndex ? 'describeText active' : 'describeText'
-            "
-            style="cursor: pointer"
-            >{{ item.seqNo }}</span
+      <Transition>
+        <div v-if="selectSeqArray.length > 0">
+          <div
+            class="row"
+            @click="clickCardNum(index)"
+            v-for="(item, index) in selectSeqArray"
+            :key="index"
           >
-        </el-tooltip>
-        <div
-          :class="
-            dictS.getLableByValue('work_order_seq_state', String(item.state)) ==
-            '完成'
-              ? 'status success'
-              : 'status'
-          "
-        >
-          {{
-            dictS.getLableByValue("work_order_seq_state", String(item.state))
-          }}
+            <el-tooltip
+              effect="dark"
+              :content="item.seqNo"
+              placement="left"
+              trigger="hover"
+            >
+              <span
+                :class="
+                  index == selectSeqIndex
+                    ? 'describeText active'
+                    : 'describeText'
+                "
+                style="cursor: pointer"
+                >{{ item.seqNo }}</span
+              >
+            </el-tooltip>
+            <div
+              :class="
+                dictS.getLableByValue(
+                  'work_order_seq_state',
+                  String(item.state)
+                ) == '完成'
+                  ? 'status success'
+                  : 'status'
+              "
+            >
+              {{
+                dictS.getLableByValue(
+                  "work_order_seq_state",
+                  String(item.state)
+                )
+              }}
+            </div>
+          </div>
         </div>
-      </div>
+      </Transition>
     </el-scrollbar>
   </div>
 </template>
@@ -54,6 +65,7 @@
 <script lang="ts" setup>
 import { useDictionaryStore } from "@/store";
 import { useProcessStore } from "@/store";
+import { Transition } from "vue";
 const store = useProcessStore();
 const dictS = useDictionaryStore();
 const selectSeqIndex = inject("selectSeqIndex");
@@ -69,7 +81,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .success {
-  color: #64BB5C;
+  color: #64bb5c;
 }
 .body {
   width: 100%;
@@ -105,6 +117,8 @@ onMounted(() => {
 
 .active {
   color: $select-hover;
+  animation-name: cardHover;
+  animation-duration: 0.5s;
 }
 
 .scrollbar {

src/views/process/main.vue

@@ -11,7 +11,9 @@
       </el-col>
       <CurrentProduction />
     </el-row>
-    <CheckPop v-model="checkPop" />
+    <Transition>
+      <CheckPop v-model="checkPop" />
+    </Transition>
   </div>
 </template>
 

src/views/process/orders.vue

@@ -3,6 +3,7 @@
     <div class="commonTitle">
       {{ activeName == "ok" ? "已完成工单" : "待完成工单" }}[{{ ordersSum }}]
     </div>
+
     <el-tabs
       v-model="activeName"
       class="demo-tabs"
@@ -19,6 +20,7 @@
       v-loading="map.get('getProcessOrders')"
     >
       <!-- <el-scrollbar class="barHeight" ref="wrapRef" @scroll="handleScroll"> -->
+
       <Order
         v-for="(item, index) in ordersDataArray"
         :key="index"
@@ -26,7 +28,7 @@
         :hoverStatus="index == selectIndex ? true : false"
         :item="item"
       />
-      <Empty v-if="ordersDataArray.length < 1" />
+
       <div
         class="describeText notice"
         v-if="ordersQuery.pageNo == ordersQuery.totalPages"

src/views/process/processes.vue

@@ -2,10 +2,12 @@
   <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
   <el-scrollbar class="barHeight">
     <div class="titleText notice" v-if="!selectedOderStatus">请选择订单</div>
-    <template v-else>
-      <Steps :opsArray="opsArray" />
-      <Empty v-if="opsArray.length < 1" />
-    </template>
+
+    <Transition>
+      <Steps v-if="selectedOderStatus" :opsArray="opsArray" />
+    </Transition>
+
+    <Empty v-if="selectedOderStatus && opsArray.length < 1" />
   </el-scrollbar>
 </template>
 <script lang="ts" setup>