影像对比

src/views/LandConsolidation/components/AsideBottom.vue

@@ -0,0 +1,233 @@
+
+<template>
+  <div class="aside-bottom-cont">
+    <div
+      class="action-img"
+      @click="clickHandler"
+      :class="timer ? 'play-class' : 'suspend-class'"
+    ></div>
+    <el-steps :active="activeVal" align-center class="stepClass">
+      <!-- <el-step /> -->
+      <el-step
+        :title="item"
+        v-for="(item, i) in dataArray"
+        :key="i + 'o'"
+        icon=""
+        :class="(i + 1) % 2 === 0 ? 'topText' : ''"
+        @click="stepPropsClick(i + 1)"
+      />
+      <!-- <el-step /> -->
+    </el-steps>
+  </div>
+</template>
+<script >
+// import { ref } from "vue";
+// import { useTimerInterval } from '@/hooks/timerInterval'
+// 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: {
+      type: Object,
+    },
+  },
+  components: {},
+  data() {
+    return {
+      dataArray: ["2020", "2021", "2022", "2023", "2024"],
+      activeVal: "2024",
+      timer: "",
+    };
+  },
+  mounted() {
+    // this.init();
+    this.$emit("activeValChange", this.getdate());
+  },
+  methods: {
+    stepPropsClick(active) {
+      if (this.activeVal == active) return;
+      this.activeVal = active;
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+        global.setMonthTimer(false);
+      }
+      this.$emit("activeValChange", this.getdate());
+    },
+    // // methods 方法
+    clickHandler() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+        global.setMonthTimer(false);
+      } else {
+        global.setMonthTimer(true);
+        this.addActiveValFun();
+        this.timer = useTimerInterval(
+          this.addActiveValFun,
+          config.data.timerInterval
+        );
+      }
+    },
+    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
+      );
+    },
+  },
+
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+.aside-bottom-cont {
+  width: 50%;
+  height: 120px;
+  position: absolute;
+  bottom: 22px;
+  left: 25%;
+  display: flex;
+  align-items: center;
+
+  .action-img {
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    z-index: 100;
+    // margin: 0px 46px;
+  }
+
+  .suspend-class {
+    background: url("/static/images/land/suspend.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .play-class {
+    background: url("/static/images/land/play.png") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .stepClass {
+    margin-top: 20px;
+    margin-left: -5%;
+    flex: 1;
+  }
+}
+
+::v-deep(.el-steps) {
+  .el-step {
+    position: relative;
+    top: -5px;
+    left: 0px;
+
+    .el-step__head {
+      .el-step__line {
+        top: 4px;
+        height: 2px;
+        background-color: #63718b;
+
+        .el-step__line-inner {
+          display: none;
+        }
+      }
+
+      .el-step__icon {
+        background-color: #495a98;
+        width: 9px;
+        height: 9px;
+        border: none;
+        position: absolute;
+        top: 0px;
+
+        &::after {
+          content: "";
+          display: block;
+          width: 15px;
+          height: 15px;
+          position: absolute;
+          top: 50%;
+          left: 48%;
+          border-radius: 50%;
+          border: 1px solid rgba(73, 90, 152, 0.32);
+          background-image: radial-gradient(
+            circle,
+            rgba(73, 90, 152, 0) 30%,
+            rgba(73, 90, 152, 0.52)
+          );
+          transform: translate(-50%, -50%);
+        }
+
+        .el-step__icon-inner {
+          display: none;
+        }
+      }
+    }
+
+    .is-process {
+      .el-step__icon {
+        background-color: rgba(255, 168, 50, 1);
+
+        &::after {
+          border: rgba(255, 168, 50, 0.32);
+          background-image: radial-gradient(
+            circle,
+            rgba(255, 168, 50, 0) 20%,
+            rgba(255, 168, 50, 0.52)
+          );
+        }
+      }
+    }
+
+    .el-step__main {
+      .el-step__title {
+        position: relative;
+        top: 14px;
+        left: 5px;
+        font: 400 12px/17px SourceHanSansSC;
+        color: #c9d3ea;
+      }
+    }
+
+    &:first-child,
+    &:last-child {
+      .el-step__head {
+        .el-step__icon {
+          &::after {
+            display: none;
+          }
+        }
+      }
+
+      .is-process {
+        .el-step__icon {
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .topText {
+    .el-step__main {
+      .el-step__title {
+        top: -26px;
+        left: 5px;
+      }
+    }
+  }
+}
+</style>

src/views/LandConsolidation/components/contrast.vue

@@ -34,6 +34,7 @@
       </div>
       <div class="sm-toolTitle">{{ `整治${!i ? "前" : "后"}地类图斑` }}</div>
     </div>
+    <AsideBottom></AsideBottom>
   </div>
 </template>
 
@@ -41,6 +42,7 @@
 import { district } from "@/api/Idleland.js";
 import { setImageryRoller, hideImageryRoller } from "@/utils/MapHelper/map.js";
 import { loadGeoJSON } from "@/utils/MapHelper/help.js";
+import AsideBottom from "./AsideBottom.vue";
 let geoSources = {};
 export default {
   props: {},
@@ -61,7 +63,7 @@ export default {
       checkList: ["耕地"],
     };
   },
-  components: {},
+  components: { AsideBottom },
   mounted() {
     this.active = 0;
     this.getData();

src/views/LandConsolidation/components/qhdb.vue

@@ -34,7 +34,7 @@
     </div>
     <div class="echars">
       <barAndLine class="echart" ref="echartRef1" v-show="!tab1"></barAndLine>
-      <sankey class="echart" ref="echartRef2" v-show="tab1"></sankey>
+      <sankey class="echart2" ref="echartRef2" v-show="tab1"></sankey>
     </div>
   </div>
 </template>
@@ -158,7 +158,6 @@ export default {
     border-radius: 5px;
     padding: 0 5px;
     cursor: pointer;
-    
   }
 
   .selectTab {
@@ -180,9 +179,18 @@ export default {
 </style>
 <style lang="scss" scoped>
 .qhdb {
+  .echars {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 260px;
+  }
   .echart {
     width: 810px !important;
-    height: 260px !important;
+    height: 250px !important;
+  }
+  .echart2 {
+    width: 810px !important;
+    height: 400px !important;
   }
 }
 </style>

src/views/LandConsolidation/components/sdgk.vue

@@ -192,7 +192,7 @@ export default {
       newVal.forEach((res, index) => {
         let color = legends[res.type].color;
         if (res.geom)
-          loadGeoJSON(res.geom, color, { isfly: false }, (data) => {
+          loadGeoJSON(res.geom, color, { isfly: true }, (data) => {
             geoSources[res.id] = data;
             data.name = "LandConsolidation";
             // data.entities.values.forEach((entity) => {