影像对比时间轴

src/views/LandConsolidation/components/AsideBottom.vue

@@ -26,11 +26,7 @@
 // const { config } = window;
 
 // const global = inject<any>("global");
-export function useTimerInterval(callback, t = 10000) {
-  const timer = setInterval(callback, t);
-  b(() => clearInterval(timer));
-  return timer;
-}
+
 export default {
   props: {
     interObj: {
@@ -41,13 +37,12 @@ export default {
   data() {
     return {
       dataArray: ["2020", "2021", "2022", "2023", "2024"],
-      activeVal: "2024",
+      activeVal: 5,
       timer: "",
     };
   },
   mounted() {
-    // this.init();
-    this.$emit("activeValChange", this.getdate());
+    this.$emit("activeValChange", this.activeVal);
   },
   methods: {
     stepPropsClick(active) {
@@ -56,57 +51,53 @@ export default {
       if (this.timer) {
         clearInterval(this.timer);
         this.timer = null;
-        global.setMonthTimer(false);
+        // global.setMonthTimer(false);
       }
-      this.$emit("activeValChange", this.getdate());
+      this.$emit("activeValChange", this.activeVal);
     },
-    // // methods 方法
     clickHandler() {
       if (this.timer) {
         clearInterval(this.timer);
         this.timer = null;
-        global.setMonthTimer(false);
+        // global.setMonthTimer(false);
       } else {
-        global.setMonthTimer(true);
+        // global.setMonthTimer(true);
         this.addActiveValFun();
-        this.timer = useTimerInterval(
-          this.addActiveValFun,
-          config.data.timerInterval
-        );
+        this.timer = setInterval(this.addActiveValFun, 1000);
       }
     },
     addActiveValFun() {
       this.activeVal++;
-      if (this.activeVal > 12) this.activeVal = 1;
-      this.$emit("activeValChange", this.getdate());
-    },
-    getdate() {
-      return (
-        new Date().getFullYear() +
-        (this.activeVal > 9 ? "-" : "-0") +
-        this.activeVal
-      );
+      if (this.activeVal > 5) this.activeVal = 0;
+      this.$emit("activeValChange", this.activeVal);
     },
   },
-
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
   watch: {},
 };
 </script>
 <style lang="scss" scoped>
 .aside-bottom-cont {
   width: 50%;
-  height: 120px;
+  height: 90px;
   position: absolute;
   bottom: 22px;
   left: 25%;
   display: flex;
   align-items: center;
+  background: #103451;
+  border-radius: 5px;
+  // background-image: url("/static/images/ghzc/内容框.png");
+  // background-size: 100% 100%;
+  z-index: 100;
 
   .action-img {
     cursor: pointer;
     width: 40px;
     height: 40px;
-    z-index: 100;
+    margin-left: 20px;
     // margin: 0px 46px;
   }
 

src/views/LandConsolidation/components/contrast.vue

@@ -145,6 +145,21 @@ export default {
   height: 100%;
   position: absolute;
   z-index: 100;
+  .headerCheck {
+    width: 600px;
+  }
+  .el-icon-close {
+    font-size: 20px;
+    color: #64daff;
+    border: 2px solid #64daff;
+    border-radius: 9px;
+    border-top-right-radius: 0px;
+    border-bottom-left-radius: 0px;
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    line-height: 36px;
+  }
   .splitScreen {
     float: left;
     height: calc(100% - 80px);