增加时间轴拖动功能

src/components/GanttView.vue

@@ -9,6 +9,10 @@
       <a-range-picker v-model:value="dateRange" show-time="{ format: 'HH:mm' }" :format="dateFormat"
         :placeholder="['开始时间', '结束时间']" allowClear @change="onRangeChange" />
     </div>
+    <div style="padding: 0 24px;">
+<el-slider v-model="sliderValue" :min="minSliderValue" :max="maxSliderValue" :format-tooltip="formatTooltip" range  @change="onSliderChange"></el-slider>
+    </div>
+    
     <g-gantt-chart :chart-start="chartStart" :chart-end="chartEnd" precision="minute" :minuteInterval="interval"
       :row-height="40" grid width="100%" bar-start="beginProcessDate" bar-end="endProcessDate" :date-format="format">
       <template v-for="item in contree" :key="item.helicopterInfoDTO.id">
@@ -23,14 +27,28 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, nextTick } from "vue";
+import { reactive, ref, nextTick, Ref } from "vue";
 import GGanttRow from "./GGanttRow.vue";
 import GGanttChart from "./GGanttChart.vue";
 import { GanttBarObject } from "../models/models";
-import { ElSelect, ElMessage, ElSelectV2, ElButton } from "element-plus"
+import { ElSelect, ElMessage, ElSelectV2, ElButton, ElSlider } from "element-plus"
 import httpRequest from '@/utils/httpRequest.js'
 import dayjs, { Dayjs } from 'dayjs';
 import { computed } from "@vue/reactivity";
+const sliderValue = ref<[number, number]>([0,100])
+const minSliderValue = ref()
+const maxSliderValue = ref()
+
+const onSliderChange = () => {
+    const [min, max] = sliderValue.value
+    chartStart.value = dayjs(min).format('YYYY-MM-DD HH:mm')
+    chartEnd.value = dayjs(max).format('YYYY-MM-DD HH:mm')
+    
+}
+
+const formatTooltip=(value:number)=>{
+  return dayjs(value).format('YYYY-MM-DD HH:mm')
+}
 const optionList = [
   { label: 1, value: 1 },
   { label: 5, value: 5 },
@@ -92,6 +110,9 @@ httpRequest
     dateValueStart.value = beginTime;
     dateValueEnd.value = endTime;
 
+    minSliderValue.value = dayjs(beginTime).toDate().getTime();
+    maxSliderValue.value = dayjs(endTime).toDate().getTime();
+    sliderValue.value = [minSliderValue.value, maxSliderValue.value];
     // dateRange.value = [dayjs(beginTime, dateFormat), dayjs(endTime, dateFormat)];
     if (minuteInterval) {
       interval.value = minuteInterval