st-comp 0.0.167 → 0.0.169

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.167",
+  "version": "0.0.169",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/packages/KlinePlus/index.vue

@@ -4,7 +4,7 @@ import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { stMath, debounce, addResizeListener } from "st-func";
 import { ref, watch, computed, onMounted, onUnmounted, inject } from "vue";
-import { loadKlineConfig, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleMarkPointOffset, normalizeToKlineTimeByMatch } from "./utils.js";
+import { loadKlineConfig, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleMarkPointOffset, normalizeToKlineTimeByMatch } from "./utils.js";
 import Tips from "./components/Tips.vue";
 import SliderChart from "./components/SliderChart.vue";
 
@@ -174,16 +174,47 @@ const getMainData = async ({ startTime, endTime }) => {
       contractType: props.varietyStock ? null : props.klineType, // 合约类型
       mainIndicatorList: props.indicatorStore.getIndicatorParams(props.mainIndicator),
       subIndicator: subIndicator.value,
-      startTime: dayjs(startTime).subtract(50, "day").format("YYYY-MM-DD HH:mm:ss"), // 确保缩放, 多请求部分数据, 也可以兼容undefined的情况
-      endTime: dayjs(endTime).add(50, "day").format("YYYY-MM-DD HH:mm:ss"), // 确保缩放, 多请求部分数据, 也可以兼容undefined的情况
       deleteFirstNumber: 1, // >> 重要: 绩效后端特殊要求传参 <<
     };
+    // Echarts如果一屏如果正好展示了所有数据, 是无法缩放触发加载更多的
+    // 所以在请求中需要对开始和结束时间进行延伸, 但是首屏的展示时间定位还是会以传入的开始结束时间为准
+    if (["1", "2", "3", "4", "5"].includes(props.cycle)) {
+      Object.assign(params, {
+        startTime: dayjs(startTime).subtract(1, "day").format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(endTime).add(1, "day").format("YYYY-MM-DD HH:mm:ss"),
+      });
+    } else if (["6", "7"].includes(props.cycle)) {
+      Object.assign(params, {
+        startTime: dayjs(startTime).subtract(50, "day").format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(endTime).add(50, "day").format("YYYY-MM-DD HH:mm:ss"),
+      });
+    } else {
+      Object.assign(params, {
+        startTime: dayjs(startTime).subtract(10, "month").format("YYYY-MM-DD HH:mm:ss"),
+        endTime: dayjs(endTime).add(10, "month").format("YYYY-MM-DD HH:mm:ss"),
+      });
+    }
     const { body } = await request.post("/middleLayer/kline/getKline", params);
     klineData.value = body ?? { data: [], mainIndicator: [], subIndicator: [], time: [] };
 
-    // 绘制图表
-    const startValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(startTime));
-    const endValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(endTime));
+    // 找到匹配对应传入的开始, 结束时间的数据索引, 绘制图表
+    let startValue = -1;
+    let endValue = -1;
+    for (let index = 0; index < klineData.value.time.length; index++) {
+      const day = dayjs(klineData.value.time[index]).format("YYYY-MM-DD");
+      if (startValue !== -1 && endValue !== -1) break;
+      if (startValue === -1) {
+        if (new Date(day) === new Date(startTime)) startValue = index;
+        else if (new Date(day) > new Date(startTime)) startValue = index - 1;
+      }
+      if (endValue === -1) {
+        if (new Date(day) === new Date(endTime)) endValue = index;
+        else if (new Date(day) > new Date(endTime)) endValue = index - 1;
+      }
+    }
+    if (endValue === -1) endValue = klineData.value.time.length - 1;
+    // const startValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(startTime));
+    // const endValue = klineData.value.time.findIndex((item) => new Date(item) >= new Date(endTime));
     draw({
       startValue: startValue === -1 ? 0 : startValue,
       endValue: endValue === -1 ? klineData.value.time.length - 1 : endValue,
@@ -578,7 +609,11 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
 
 // 拖拽轴: 拖拽回调
 const handleSliderChange = (params) => {
-  const { startTime, endTime } = params;
+  const [startTime, endTime] = checkTimeInterval({
+    startTime: params.startTime,
+    endTime: params.endTime,
+    cycle: props.cycle,
+  });
   getMainData({ startTime, endTime });
 };
 // 键盘控制 [↑↓←→缩放平移]
@@ -659,9 +694,24 @@ watch(
   },
   { deep: true }
 );
-// 监控: [主指标, 副指标, 指标配置, 周期选项, 复权选项, 常用选项] => 重加载K线 (缩放不变)
+// 监控: [周期选项] => 重加载K线 (缩放不变+校验时间间隔)
+watch(
+  () => [props.cycle],
+  () => {
+    const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+    const [startTime, endTime] = checkTimeInterval({
+      startTime: klineData.value.time[startValue],
+      endTime: klineData.value.time[endValue],
+      cycle: props.cycle,
+      type: "middle",
+    });
+    getMainData({ startTime, endTime });
+  },
+  { deep: true }
+);
+// 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] => 重加载K线 (缩放不变)
 watch(
-  () => [props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator, props.cycle, props.rightType, props.klineType],
+  () => [props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator, props.rightType, props.klineType],
   () => {
     const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
     const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];

package/packages/KlinePlus/utils.js

@@ -14,6 +14,46 @@ export const loadKlineConfig = {
   loadAddCount: 2000,
 };
 
+// 前端估算K线根数的周期分布
+export const dayBarsNumByCycle = {
+  1: 240, // 每天240根（4小时×60分钟）
+  2: 48, // 每天48根（4小时×12根）
+  3: 16, // 每天16根（4小时×4根）
+  4: 8, // 每天8根（4小时×2根）
+  5: 4, // 每天4根（4小时×1根）
+  6: 1, // 每天1根
+  7: 0.2, // 每周1根（按5个交易日算）
+  8: 0.033, // 每月1根（按21个交易日算）
+};
+
+/**
+ * @description: 校验时间间隔, 避免开始和结束时间过大, 超过一屏根数上限
+ */
+export const checkTimeInterval = ({ startTime, endTime, cycle, type = "end" }) => {
+  // 大切小时可能会出现请求超过一屏上限的数据量, 进行时间间隔校验, 由于是估算, 所以计算时可以比一屏上限根数多一些
+  const { maxValueSpan } = loadKlineConfig;
+  const N = Math.ceil((maxValueSpan + 1000) / dayBarsNumByCycle[cycle]);
+  const d1 = dayjs(startTime);
+  const d2 = dayjs(endTime);
+  const diff = d2.diff(d1, "day");
+  // 未超出间隔, 返回原本的开始, 结束时间
+  if (diff <= N) return [startTime, endTime];
+  // 超出间隔, 按照期望以结束时间, 还是中间时间去计算
+  if (type === "end") return [dayjs(endTime).subtract(N, "day").format("YYYY-MM-DD HH:mm:ss"), endTime];
+  if (type === "middle") {
+    const middleTime = dayjs((dayjs(startTime).valueOf() + dayjs(endTime).valueOf()) / 2).format("YYYY-MM-DD HH:mm:ss");
+    console.log("超过一屏数量上限, 进行中间时间计算", middleTime, N / 2);
+    return [
+      dayjs(middleTime)
+        .subtract(N / 2, "day")
+        .format("YYYY-MM-DD HH:mm:ss"),
+      dayjs(middleTime)
+        .add(N / 2, "day")
+        .format("YYYY-MM-DD HH:mm:ss"),
+    ];
+  }
+};
+
 // 获取副图配置
 const getSubBarStyle = (data, index) => {
   const itemData = data[index];
@@ -446,7 +486,7 @@ export const normalizeToKlineTimeByMatch = (klineTimeArray, timeRange, cycle) =>
       klineEnd = klineTimeArray.findLast((t) => new Date(t).getTime() <= new Date(end).getTime());
     }
   }
-  return [klineStart, klineEnd]
+  return [klineStart, klineEnd];
 };
 
 // 统一处理markPoint标记点的偏移量

package/src/pages/KlinePlus/index.vue

@@ -1,11 +1,19 @@
 <template>
   <div>
-    <el-button @click="stKlineConfigRef?.open">打开K线自定义配置</el-button>
-    <st-klineConfig
-      ref="stKlineConfigRef"
-      :indicatorStore="indicatorStore"
-      @callBack="(formJson) => handleUserKlineConfig('update', formJson)"
-    />
+    <div style="display: flex; align-items: center; gap: 10px">
+      <el-button @click="stKlineConfigRef?.open">打开K线自定义配置</el-button>
+      <el-select
+        v-model="cycle"
+        style="width: 100px"
+      >
+        <el-option
+          v-for="item in cycleOptions"
+          :key="item.value"
+          :value="item.value"
+          :label="item.label"
+        />
+      </el-select>
+    </div>
     <div class="main">
       <template v-if="!loading">
         <st-klinePlus
@@ -25,6 +33,11 @@
         />
       </template>
     </div>
+    <st-klineConfig
+      ref="stKlineConfigRef"
+      :indicatorStore="indicatorStore"
+      @callBack="(formJson) => handleUserKlineConfig('update', formJson)"
+    />
   </div>
 </template>
 
@@ -39,6 +52,12 @@ const loading = ref(true);
 const userKlineConfig = reactive({});
 provide("userKlineConfig", userKlineConfig);
 
+const cycleOptions = [
+  { label: "1m", value: "1" },
+  { label: "1d", value: "6" },
+  { label: "1mon", value: "8" },
+];
+
 const varietyName = ref(null);
 const varietyCode = ref("000016");
 const varietyStock = ref(1); // 0: 期货, 1: 股票, 2: 期权