st-comp 0.0.166 → 0.0.168

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.166",
+  "version": "0.0.168",
   "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,10 +174,26 @@ 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: [] };
 
@@ -578,7 +594,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 +679,23 @@ 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,
+    });
+    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,29 @@ 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个交易日算）
+};
+
+// 校验时间间隔, 避免开始和结束时间过大, 超过一屏根数上限
+export const checkTimeInterval = ({ startTime, endTime, cycle }) => {
+  // 大切小时可能会出现请求超过一屏上限的数据量, 进行时间间隔校验, 由于是估算, 所以计算时可以比一屏上限根数多一些
+  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");
+  return [diff <= N ? startTime : dayjs(endTime).subtract(N, "day").format("YYYY-MM-DD HH:mm:ss"), endTime];
+};
+
 // 获取副图配置
 const getSubBarStyle = (data, index) => {
   const itemData = data[index];
@@ -446,7 +469,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/packages/VarietySearch/components/FactorScreen/index.vue

@@ -4,7 +4,6 @@ import { nextTick, ref, watch } from "vue";
 import { Plus, CircleCloseFilled, InfoFilled } from "@element-plus/icons-vue";
 import { handleVerifyScore, extractConditionDetails } from "./tools.js";
 import FactorDescription from "./FactorDescription.vue";
-import ScriptSelect from "./ScriptSelect.vue";
 import MonacoEditor from "../../../MonacoEditor/index.vue"
 
 const props = defineProps({
@@ -29,7 +28,7 @@ const data = defineModel("data", {
 });
 
 const monacoEditorRef = ref();
-const scriptSelectRef = ref();
+const stVarSelectDialogRef = ref();
 // 弹窗开关
 const visible = ref(false);
 const visibleDescriptions = ref(false);
@@ -55,7 +54,7 @@ const dialogForm = ref({
 
 watch(() => [factorType.value, visible.value], () => {
   if (factorType.value === '模版' || visible.value === false) {
-    scriptSelectRef.value.close();
+    stVarSelectDialogRef.value.close();
   }
 }, { deep: true })
 
@@ -236,7 +235,7 @@ const handleDeleteTag = (aciton, index) => {
 const open = () => {
   const zIndex = document.getElementsByClassName('factor-dialog')?.[0]?.style?.zIndex;
   console.log(zIndex)
-  scriptSelectRef.value.open(monacoEditorRef.value, zIndex);
+  stVarSelectDialogRef.value.open(monacoEditorRef.value, zIndex);
 }
 </script>
 
@@ -605,7 +604,7 @@ const open = () => {
     :data="config.factorDescriptions?.filter((item) => [1, 3].includes(item.type))"
   />
   <!-- 变量选择器 -->
-  <ScriptSelect ref="scriptSelectRef" />
+  <st-varSelectDialog ref="stVarSelectDialogRef" />
 </template>
 
 <style lang="scss" scoped>

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: 期权