时间轴

src/components/Timer/Timer.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="time-step-select">
+    <div class="left-icon" @click="handleLeft"></div>
+    <div class="center-box">
+      <div
+        class="center-content line-box-id-only"
+        :style="{ transform: `translateX(${-translateXNum}px)` }"
+      >
+        <div
+          class="center-box-item line-box-item-id-only"
+          v-for="(item, index) in timeList"
+          @click="handleSelect(item)"
+          :class="{ hasActive: checkValue == item.value }"
+        >
+          <div class="box-icon"></div>
+          <div class="title">{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="right-icon" @click="handleRight"></div>
+  </div>
+</template>
+<script setup>
+import { ref, defineProps, computed, defineEmits } from "vue";
+const translateXNum = ref(0);
+const props = defineProps({
+  timeList: {
+    type: Array,
+    default: () => [],
+  },
+});
+const emit = defineEmits("update:modelValue");
+const checkValue = ref();
+const handleSelect = (item) => {
+  checkValue.value = item.value;
+};
+
+const handleLeft = () => {
+  const numWidth =
+    document.getElementsByClassName("line-box-item-id-only")[0].clientWidth;
+  if (translateXNum.value <= 0) {
+    translateXNum.value = 0;
+  } else {
+    translateXNum.value -= numWidth;
+  }
+};
+
+const handleRight = () => {
+  const boxWidth =
+    document.getElementsByClassName("line-box-id-only")[0].scrollWidth;
+  const boxShowWidth =
+    document.getElementsByClassName("line-box-id-only")[0].clientWidth;
+  const numWidth = document.getElementsByClassName("line-box-item-id-only")[0]
+    .clientWidth;
+  console.log(document.getElementsByClassName("line-box-id-only"));
+  if (translateXNum.value >= boxWidth - boxShowWidth) {
+    // translateXNum.value = boxWidth - numWidth;
+  } else {
+    translateXNum.value += numWidth;
+  }
+};
+</script>
+<style lang="scss" scoped>
+.time-step-select {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  background-color: #042f74bb;
+  padding: 10px 20px;
+  border-radius: 5px;
+  .left-icon,
+  .right-icon {
+    width: 22px;
+    height: 30px;
+  }
+  .left-icon {
+    cursor: pointer;
+
+    background-image: url("../../assets/img/箭头1.png");
+    background-size: 100% 100%;
+  }
+  .center-box {
+    width: calc(100% - 80px);
+    overflow: hidden;
+    background-image: url("../../../assets/img/时间轴.png");
+    background-size: 100% 100%;
+  }
+  .center-content {
+    display: flex;
+    width: 100%;
+    transition: transform 0.4s;
+  }
+  .center-box-item {
+    position: relative;
+    width: 70px;
+    flex-shrink: 0;
+    flex-grow: 0;
+    padding-bottom: 20px;
+    cursor: pointer;
+
+    .box-icon {
+      position: absolute;
+      top: 3px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 15px;
+      height: 15px;
+      background-image: url("../../assets/img/普通点.png");
+      background-size: 100% 100%;
+      z-index: 9;
+    }
+    &.hasActive {
+      // background-image: url('../../assets/images/0211/时间轴选中节点.png');
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      .box-icon {
+        top: -5px;
+        width: 30px;
+        height: 30px;
+        background-image: url("../../assets/img/选中点.png");
+      }
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      top: 10px;
+      width: 100%;
+      border-bottom: 1px dashed #cccccc6c;
+    }
+    .title {
+      position: relative;
+      top: 20px;
+      text-align: center;
+      font-family: DIN;
+      font-weight: 500;
+      font-size: 16px;
+      color: #9daac7;
+    }
+  }
+  .right-icon {
+    cursor: pointer;
+    background-image: url("../../assets/img/箭头2.png");
+    background-size: 100% 100%;
+  }
+}
+</style>

src/store/rightPanel.js

@@ -29,6 +29,9 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
     // warningVisible.value = false;
   };
 
+  //时间轴开关
+  const timerSwitchStatus = ref(false);
+
   watch(
     () => commonStore.activeIndex,
     () => {
@@ -45,5 +48,6 @@ export const useRightPanelStore = defineStore("rightPanelStore", () => {
     publicHealthVisible,
     districtString,
     handleCloseAllVisible,
+    timerSwitchStatus
   };
 });

src/views/right/components/common/RightLegend.vue

@@ -90,13 +90,23 @@
         ></div>
       </div>
     </template>
+    <div class="legend-item">
+      <div class="text-box">时间轴</div>
+      <div
+        class="switch-box"
+        :class="{ switchOpen: rightPanelStore.timerSwitchStatus }"
+        @click="handleTimerSwitch"
+      ></div>
+    </div>
   </div>
 </template>
 <script setup>
 import { ref } from "vue";
 import { useCommonStore } from "@/store/common.js";
+import { useRightPanelStore } from "../../../../store/rightPanel";
 
-let commonStore = useCommonStore();
+const commonStore = useCommonStore();
+const rightPanelStore = useRightPanelStore();
 
 const bingliSwitch = ref(true);
 const videoSwitch = ref(true);
@@ -105,6 +115,10 @@ const handleBingli = () => {
   bingliSwitch.value = !bingliSwitch.value;
 };
 
+const handleTimerSwitch = () => {
+  rightPanelStore.timerSwitchStatus = !rightPanelStore.timerSwitchStatus;
+};
+
 const handleVideo = () => {
   videoSwitch.value = !videoSwitch.value;
 };
@@ -212,6 +226,7 @@ const handleInstitutionLevel = (item) => {
   // height: 750px;
   background-image: url("../../../../assets/img/撒点弹窗.png");
   background-size: 100% 100%;
+  z-index: 99;
   .legend-item {
     display: flex;
     align-items: center;
@@ -248,6 +263,7 @@ const handleInstitutionLevel = (item) => {
       height: 26px;
       background-image: url("../../../../assets/img/Component 15(2).png");
       background-size: 100% 100%;
+      cursor: pointer;
     }
     .switchOpen {
       background-image: url("../../../../assets/img/Component 14.png");
@@ -267,7 +283,7 @@ const handleInstitutionLevel = (item) => {
         )
         1 1;
       .el-select__wrapper {
-        background-color: transparent!important;
+        background-color: transparent !important;
         box-shadow: none;
         color: #45d2ff !important;
       }

src/views/right/index.vue

@@ -9,16 +9,18 @@
         'right-legend-max': rightPanelStore.emergencyVisible,
       }"
     ></RightLegend>
+    <Timer class="timer-box" v-if="rightPanelStore.timerSwitchStatus" :time-list="hotCurrentTime"/>
   </div>
 </template>
 <script setup>
-import { ref, watch, reactive, toRefs, onBeforeMount, onMounted } from "vue";
+import { ref, watch, reactive, toRefs, onBeforeMount, computed } from "vue";
 import reportHandle from "./components/reportHandle/index.vue";
 import handleProcess from "./components/handleProcess/index.vue";
 import warningDialog from "./components/warningDialog.vue";
 import { useRightPanelStore } from "../../store/rightPanel";
 import { useCommonStore } from "@/store/common.js";
 import RightLegend from "./components/common/RightLegend.vue";
+import Timer from "../../components/Timer/Timer.vue";
 
 let commonStore = useCommonStore();
 
@@ -34,6 +36,30 @@ watch(
     // immediate: true
   }
 );
+
+const hotCurrentTime = computed(() => {
+  let nowTime = Date.now();
+  let TimeArr = [
+    {
+      name: new Date(nowTime)
+        .toLocaleDateString()
+        .slice(5, 10)
+        .replaceAll("/", "-"),
+      value: nowTime,
+    },
+  ];
+  let timeNum = 60 * 60 * 1000 * 24;
+  for (let i = 1; i <= 30; i++) {
+    TimeArr.push({
+      name: new Date(nowTime + i * timeNum)
+        .toLocaleDateString()
+        .slice(5, 10)
+        .replaceAll("/", "-"),
+      value: nowTime + i * timeNum,
+    });
+  }
+  return TimeArr;
+});
 </script>
 <style lang="scss" scoped>
 .right_container {
@@ -54,4 +80,12 @@ watch(
 .right-dialog-max {
   right: 1420px;
 }
+.timer-box {
+  position: fixed;
+  z-index: 9;
+  left: 53%;
+  transform: translateX(-50%);
+  top: 850px;
+  width: 700px;
+}
 </style>