更改旋转组件老报错的问题

huaxin-web/src/views/bigWindow/Ind/components/DeviceScrollTable.vue

@@ -17,7 +17,7 @@
         :class="{ 'is-scrolling': shouldScroll, 'is-paused': isPaused }"
         :style="shouldScroll ? { animationDuration: scrollDuration + 's' } : {}"
       >
-        <div v-for="(row,index) in cycleList" :key="row.id + row.createTime" class="row">
+        <div v-for="(row,index) in cycleList" :key="index+''+row.id + row.createTime" class="row">
           <div class="col id">{{ index+1 }}</div>
           <div class="col type">{{ row.devTypeName }}</div>
           <div class="col date">{{ parseTime(row.createTime, '{y}-{m}-{d}') }}</div>
@@ -39,7 +39,7 @@
         <template v-if="shouldScroll">
           <div
             v-for="(row, index) in cycleList"
-            :key="'clone-' + index + row.id"
+            :key="'clone-' + index + '-' + row.id + '-' + row.createTime"
             class="row"
           >
             <div class="col id">{{ index+1 }}</div>

huaxin-web/src/views/bigWindow/Ind/components/Rotate.vue

@@ -20,7 +20,7 @@
       :style="{ transform: `scale(${imgScale})` }"
       alt=""
     />
-    <div class="out-box">
+    <div class="out-box" ref="outBox">
       <div
         v-for="item in imgArr"
         :key="item.src"
@@ -35,11 +35,11 @@
       ></div>
       <!-- <div class="a"></div> -->
       <!-- 地图 -->
-      <div class="b"></div>
+      <div class="b" ref="b"></div>
       <!-- 两个圆圈 -->
-      <div class="c"></div>
-      <div class="d"></div>
-      <div class="e"></div>
+      <div class="c" ref="c"></div>
+      <div class="d" ref="d"></div>
+      <div class="e" ref="e"></div>
     </div>
   </div>
 </template>
@@ -90,13 +90,9 @@ export default {
     rotate() {
       this.timer = setInterval(() => {
         this.rotateNum += 0.1;
-        const outBox = document.querySelector(".out-box");
-        const b = document.querySelector(".b");
-        const c = document.querySelector(".c");
-        const d = document.querySelector(".d");
-        const e = document.querySelector(".e");
-        const imgcenterShadow = document.querySelector(".imgcenter-shadow");
-        const a = document.querySelectorAll(".a");
+        const { outBox, b, c, d, e } = this.$refs;
+        // 防止组件销毁后 refs 变为 null 导致报错
+        if (!outBox || !b || !c || !d || !e) return;
 
         outBox.style.transform = `rotateY(${this.rotateNum}deg)`;
         b.style.transform = ` rotateY(-${this.rotateNum}deg)  translateZ(10px) `;
@@ -104,6 +100,7 @@ export default {
         d.style.transform = `rotateX(90deg)  translateZ(230px) rotateZ(${this.rotateNum}deg)`;
         e.style.transform = `rotateX(90deg)  translateZ(130px) rotateZ(${this.rotateNum}deg)`;
         const degNum = 360 / this.imgArr.length;
+        const a = this.$el.querySelectorAll(".a");
         a.forEach((item, index) => {
           item.style.transform = ` rotateY(${
             degNum * index