修改爆仓指标

src/views/indicator/fot/index.vue

@@ -16,8 +16,8 @@
                 <lay-select-option v-for="item of iaExchanges" :value="item" :label="item" />
               </lay-select>
             </lay-form-item>
-            <lay-form-item label="查询时间" prop="minute_time_range">
-              <lay-input v-model="pageParams.minute_time_range" placeholder="查询时间(分钟)" />
+            <lay-form-item label="查询时间" prop="range_time">
+              <lay-date-picker v-model="pageParams.range_time" range type="datetime" :placeholder="['开始日期', '结束日期']" />
             </lay-form-item>
             <lay-form-item label="阈值" prop="value_ln">
               <lay-input v-model="pageParams.value_ln" placeholder="阈值" />
@@ -27,6 +27,11 @@
             </lay-form-item>
           </lay-form>
         </div>
+        <div class="button-wp">
+          <lay-button class="up-btn" @click="handleUpTime">往前{{ step_time }}分钟</lay-button>
+          <lay-input :style="{ width: '300px' }" v-model="step_time" placeholder="变动时间" />
+          <lay-button class="down-btn" @click="handleDownTime">往后{{ step_time }}分钟</lay-button>
+        </div>
         <div>
           <div class="chart" ref="chartRef"></div>
         </div>
@@ -38,6 +43,7 @@
 <script lang="ts" setup name="IndicatorFot">
 import { ref, reactive, onUnmounted, shallowRef } from "vue";
 import * as echarts from "echarts";
+import dayjs from "dayjs";
 import { get_indicator, get_ia_exchanges } from "@/api";
 
 const chartRef = ref();
@@ -50,7 +56,7 @@ interface PageConfig {
 interface FormItem {
   symbol?: String;
   exchange?: String;
-  minute_time_range?: String;
+  range_time: Array<string>;
   value_ln?: String;
 }
 
@@ -60,10 +66,12 @@ let pageConfig: PageConfig = reactive({
 
 let symbol: any = "btc_usdt";
 let exchange: any = "binance_usdt_swap";
-let minute_time_range: any = "30";
+let range_time: any = [dayjs().subtract(60, "minute").format("YYYY-MM-DD HH:mm:ss"), dayjs().format("YYYY-MM-DD HH:mm:ss")];
 let value_ln: any = "10";
 
-const pageParams: FormItem = reactive({ symbol, exchange, minute_time_range, value_ln });
+let step_time = ref(10);
+
+const pageParams: FormItem = reactive({ symbol, exchange, range_time, value_ln });
 
 let iaExchanges = ref<any>([]);
 const getIaExchanges = () => {
@@ -81,7 +89,16 @@ getIaExchanges();
 let msvChart = shallowRef();
 
 const getMsvData = () => {
-  const params = { indicator: "fot", query: pageParams };
+  const params = {
+    indicator: "fot",
+    query: {
+      symbol: pageParams.symbol,
+      exchange: pageParams.exchange,
+      start_time: +dayjs(pageParams.range_time[0]) + "",
+      end_time: +dayjs(pageParams.range_time[1]) + "",
+      value_ln: pageParams.value_ln,
+    },
+  };
   pageConfig.loading = true;
   get_indicator(params, (data: any) => {
     pageConfig.loading = false;
@@ -126,7 +143,7 @@ const initChart = (data: any) => {
   const chartOption = {
     title: [
       {
-        text: `${pageParams.exchange} ${pageParams.symbol?.toUpperCase()} ${parseFloat(((Number(pageParams.minute_time_range) || 240) / 60).toFixed(2)).toString()}小时波动幅度指标`,
+        text: `${pageParams.exchange} ${pageParams.symbol?.toUpperCase()} 爆仓指标`,
         textStyle: {
           fontSize: 20,
         },
@@ -216,6 +233,25 @@ const initChart = (data: any) => {
     }
   });
 };
+const handleUpTime = () => {
+  const rangeTime = pageParams.range_time;
+  const start_time = dayjs(rangeTime[0]).subtract(step_time.value, "minute").format("YYYY-MM-DD HH:mm:ss");
+  const end_time = dayjs(rangeTime[1]).subtract(step_time.value, "minute").format("YYYY-MM-DD HH:mm:ss");
+  pageParams.range_time = [start_time, end_time];
+  getMsvData();
+};
+const handleDownTime = () => {
+  const rangeTime = pageParams.range_time;
+  let start_time = dayjs(rangeTime[0]).add(step_time.value, "minute").format("YYYY-MM-DD HH:mm:ss");
+  let end_time = dayjs(rangeTime[1]).add(step_time.value, "minute").format("YYYY-MM-DD HH:mm:ss");
+  if (dayjs(end_time) > dayjs()) {
+    start_time = dayjs().subtract(step_time.value, "minute").format("YYYY-MM-DD HH:mm:ss");
+    end_time = dayjs().format("YYYY-MM-DD HH:mm:ss");
+  }
+  pageParams.range_time = [start_time, end_time];
+  getMsvData();
+};
+
 onUnmounted(() => {
   window.removeEventListener("resize", () => msvChart.value.resize());
 });
@@ -244,4 +280,8 @@ onUnmounted(() => {
     }
   }
 }
+.button-wp {
+  display: flex;
+  justify-content: space-between;
+}
 </style>