st-comp 0.0.247 → 0.0.248

package/package.json

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

package/packages/KlinePlus/index.vue

@@ -11,7 +11,6 @@ import SliderChart from "./components/SliderChart.vue";
 const { round, formatValue } = stMath;
 const { request } = inject("stConfig"); // 组件库全局配置
 
-const sliderChartRef = ref();
 const loading = ref(false);
 const isHover = ref(false);
 const props = defineProps({
@@ -53,8 +52,9 @@ let isloadAllHistory = false;
 let resizeRo = null;
 let subChartIns = null;
 let mainChartIns = null;
-const subChartRef = ref(null);
 const mainChartRef = ref(null);
+const subChartRef = ref(null);
+const sliderChartRef = ref(null);
 
 // K线数据
 const klineData = ref({
@@ -112,57 +112,73 @@ const subIndicatorTips = computed(() => {
 
 // 图表: 初始化
 const initChart = () => {
-  if (mainChartIns) return;
+  // 检查DOM元素是否存在
+  if (!mainChartRef.value) {
+    console.warn("[K线] 主图DOM元素不存在，取消初始化");
+    return false;
+  }
+  if (mainChartIns) return true;
 
-  // 主图
-  mainChartIns = echarts.init(mainChartRef.value);
-  mainChartIns.on(
-    "highlight",
-    debounce((params) => {
-      if (params.dataIndex) {
-        activeIndex.value = params.dataIndex;
-      } else {
-        activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+  try {
+    // 主图
+    mainChartIns = echarts.init(mainChartRef.value);
+    mainChartIns.on(
+      "highlight",
+      debounce((params) => {
+        if (params.dataIndex) {
+          activeIndex.value = params.dataIndex;
+        } else {
+          activeIndex.value = params.batch?.[0].dataIndex ?? -1;
+        }
+      }, 10),
+    );
+    mainChartIns.on(
+      "datazoom",
+      debounce(async () => {
+        const { loadCheckCount } = loadKlineConfig;
+        const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+        // 当前开始索引 < 阈值边界, 触发加载更多数据
+        if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
+        // 当前结束索引 > 阈值边界, 触发加载更多数据
+        if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
+        getScreenTimeRange();
+        drawScreenMaxPrice();
+      }),
+    );
+    mainChartIns.on("globalout", () => {
+      if (mainChartIns) {
+        const option = mainChartIns.getOption();
+        activeIndex.value = option.dataZoom[0].endValue;
       }
-    }, 10)
-  );
-  mainChartIns.on(
-    "datazoom",
-    debounce(async () => {
-      const { loadCheckCount } = loadKlineConfig;
-      const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
-      // 当前开始索引 < 阈值边界, 触发加载更多数据
-      if (isLoadHistory === false && isloadAllHistory === false && startValue < loadCheckCount) await getMoreData("history");
-      // 当前结束索引 > 阈值边界, 触发加载更多数据
-      if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
-      getScreenTimeRange();
-      drawScreenMaxPrice();
-    })
-  );
-  mainChartIns.on("globalout", () => {
-    const option = mainChartIns.getOption();
-    activeIndex.value = option.dataZoom[0].endValue;
-  });
-  mainChartIns.getZr().on("contextmenu", () => {
-    contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
-  });
-  window.addEventListener("keydown", handleKeyDownEvent);
+    });
+    mainChartIns.getZr().on("contextmenu", () => {
+      contextmenuKlineTime.value = klineData.value?.time[activeIndex.value];
+    });
+    window.addEventListener("keydown", handleKeyDownEvent);
 
-  // 副图
-  if (props.userKlineConfig.enable_subChart) {
-    subChartIns = echarts.init(subChartRef.value);
-    echarts.connect([mainChartIns, subChartIns]);
-  }
+    // 副图
+    if (props.userKlineConfig.enable_subChart && subChartRef.value) {
+      subChartIns = echarts.init(subChartRef.value);
+      echarts.connect([mainChartIns, subChartIns]);
+    }
 
-  // DOM缩放
-  resizeRo = addResizeListener(mainChartRef.value);
-  resizeRo.listen(() => {
-    requestAnimationFrame(() => {
-      mainChartIns.resize();
-      subChartIns?.resize();
-      sliderChartRef.value?.resize();
-    });
-  });
+    // DOM缩放
+    if (mainChartRef.value) {
+      resizeRo = addResizeListener(mainChartRef.value);
+      resizeRo.listen(() => {
+        requestAnimationFrame(() => {
+          mainChartIns?.resize();
+          subChartIns?.resize();
+          sliderChartRef.value?.resize();
+        });
+      });
+    }
+
+    return true;
+  } catch (error) {
+    console.error("[st-klinePlus]: 初始化异常:", error);
+    return false;
+  }
 };
 // 图表: 获取数据 [首屏]
 const getMainData = async ({ startTime, endTime }) => {
@@ -312,7 +328,16 @@ const getScreenTimeRange = () => {
 
 // 图表: 绘制(主流程)
 const draw = (params = { startValue: 0, endValue: 0 }) => {
-  initChart();
+  const isInitialized = initChart();
+  // 确保图表存在
+  if (!isInitialized || !mainChartIns) {
+    return console.warn("[st-klinePlus]: 图表未准备就绪, 跳过绘制");
+  }
+  // 检查数据是否存在
+  if (!klineData.value.time.length) {
+    return console.warn("[st-klinePlus]: 图表无数据, 跳过绘制");
+  }
+
   const { maxValueSpan } = loadKlineConfig;
   const { time, data, mainIndicator } = klineData.value;
 
@@ -570,7 +595,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         },
       },
     },
-    true
+    true,
   );
   if (props.userKlineConfig.enable_subChart) {
     subChartIns.setOption(getSubOptions(klineData.value, startValue, endValue), true);
@@ -712,7 +737,7 @@ const drawScreenMaxPrice = () => {
     {
       notMerge: false, // 合并模式
       replaceMerge: [], // 不替换任何配置
-    }
+    },
   );
 };
 
@@ -727,6 +752,7 @@ const handleSliderChange = (params) => {
 };
 // 键盘控制 [↑↓←→缩放平移]
 const handleKeyDownEvent = ({ code, ctrlKey }) => {
+  if (!mainChartIns) return;
   if (!(ctrlKey || isHover.value)) return;
   const { xAxis, dataZoom } = mainChartIns.getOption();
   const { data: xAxisData } = xAxis?.[0] ?? { data: [] };
@@ -801,7 +827,7 @@ watch(
     const [startTime, endTime] = props.initTimeRange;
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [周期选项] => 重加载K线 (缩放不变+校验时间间隔)
 watch(
@@ -816,7 +842,7 @@ watch(
     });
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [主指标, 副指标, 指标配置, 复权选项, 常用选项] => 重加载K线 (缩放不变)
 watch(
@@ -826,7 +852,7 @@ watch(
     const [startTime, endTime] = [klineData.value.time[startValue], klineData.value.time[endValue]];
     getMainData({ startTime, endTime });
   },
-  { deep: true }
+  { deep: true },
 );
 // 监控: [成交点类型, 成交数据, 净值数据, 收益计算类型, 成交收益率数据] => 重绘K线 (缩放不变)
 watch(
@@ -835,19 +861,19 @@ watch(
     const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
     draw({ startValue, endValue });
   },
-  { deep: true }
+  { deep: true },
 );
 onUnmounted(() => {
   // 解绑
-  mainChartIns.off("highlight");
-  mainChartIns.off("globalout");
-  mainChartIns.off("datazoom");
-  mainChartIns.getZr().off("contextmenu");
+  mainChartIns?.off("highlight");
+  mainChartIns?.off("globalout");
+  mainChartIns?.off("datazoom");
+  mainChartIns?.getZr()?.off("contextmenu");
   window.removeEventListener("keydown", handleKeyDownEvent);
   // 销毁
-  mainChartIns.dispose();
+  mainChartIns?.dispose();
   subChartIns?.dispose();
-  resizeRo.dispose();
+  resizeRo?.dispose();
   resizeRo = null;
 });
 defineExpose({

package/src/App.vue

@@ -39,14 +39,25 @@ import routes from "./router/routes.ts";
 const route = useRoute();
 
 // const VITE_RUN_ENV = import.meta.env; // 正常使用
+// const VITE_RUN_ENV = {
+//   VITE_PROJECT_NAME: "动量回测",
+//   VITE_PROJECT_CLIENTID: "7",
+//   VITE_BASE_URL: "http://192.168.12.38:5173",
+//   BASE_URL: "/",
+//   MODE: "test49",
+//   DEV: true,
+//   PROD: false,
+//   SSR: false,
+// };
+
 const VITE_RUN_ENV = {
   VITE_PROJECT_NAME: "动量回测",
   VITE_PROJECT_CLIENTID: "7",
-  VITE_BASE_URL: "http://192.168.12.38:5173",
+  VITE_BASE_URL: "//investapi.hzyotoy.com",
   BASE_URL: "/",
-  MODE: "test49",
-  DEV: true,
-  PROD: false,
+  MODE: "production",
+  DEV: false,
+  PROD: true,
   SSR: false,
 };
 </script>

package/src/pages/KlineNew/components/KlineAction/mockApi/index.js

@@ -6,7 +6,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   return res.data.body

package/src/pages/KlineNew/components/KlineBasic/utils.js

@@ -38,7 +38,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: '36cbbea2e76aff9d99f88d50669c009c',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   getKlineNew(params)

package/src/pages/KlineNew/components/KlineSlide/utils.js

@@ -71,7 +71,7 @@ export const getKlineDataApi = async(params) => {
     headers: {
       token: 'ee08db9f1b8085e3c84fa22b60835951',
     },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
+    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
     data: params,
   })
   return res.data.body

package/src/pages/KlinePlus/KlineDialog/MultiCycle.vue

@@ -0,0 +1,312 @@
+<script setup>
+import dayjs from "dayjs";
+import { ref, onMounted, nextTick } from "vue";
+import { formatLabel, estimateKlineTime, getTimeRange } from "./tools";
+import { getCycleList } from "./api.js";
+
+const emit = defineEmits(["goToSingleCycle"]);
+const props = defineProps({
+  varietyCode: { type: String, required: true },
+  varietyStock: { type: Number, required: true }, // 品种市场类型 0-期货, 1-股票, 2-期权
+  indicatorStore: { type: Object, required: true }, // 指标配置Store
+  userKlineConfig: { type: Object, required: true }, // 用户自定义的K线配置
+
+  // 交互选项
+  sellBuy: { type: Number, default: 1 },
+  rightType: { type: Number, default: null },
+  klineType: { type: Number, default: null },
+  initTimeRange: { type: Array, required: true },
+  mainIndicator: { type: String, required: true },
+
+  // 绘制数据: 成交
+  tradeLog: { type: Array, default: () => [] }, // 成交数据
+  // 绘制数据: 净值
+  netPositionData: { type: Array, default: () => [] }, // 净值数据
+
+  // 功能: 强制定位高亮(非必填)
+  positionTime: { type: [String, null], default: null },
+});
+const chartList = ref([]); // 图表列表
+const chartDomRefList = ref([]); // 图表Dom列表
+const cycleOptions = ref([]);
+const menuList = [{ key: "syncBrushRangeOtherKline", label: "同步其它K线范围" }]; // 菜单列表
+
+// 同步刷选范围
+const syncBrushRange = ref({
+  cycleList: [], // 需要进行刷选的周期
+  startTime: null,
+  endTime: null,
+});
+
+// 清除单个图表的同步刷选
+const handleClearSyncBrush = (cycle) => {
+  if (syncBrushRange.value.cycleList.includes(cycle)) {
+    const index = syncBrushRange.value.cycleList.findIndex((i) => i === cycle);
+    syncBrushRange.value.cycleList.splice(index, 1);
+  }
+};
+
+// 绑定图表Ref
+const handleSetChartDomRef = (el, index) => {
+  if (el) chartDomRefList.value[index] = el;
+};
+
+// 点击菜单项
+const handleClickMenuItem = (menu, item, index) => {
+  switch (menu.key) {
+    // 同步刷选范围
+    case "syncBrushRangeOtherKline": {
+      const { screenTimeRange, contextmenuKlineTime } = chartDomRefList.value[index];
+      // 生成同步刷选的时间范围
+      switch (item.cycle) {
+        // 大周期将contextmenuKlineTime按周期拆成范围, 再使用
+        case "6": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        case "7": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        case "8": {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: dayjs(contextmenuKlineTime).startOf("month").format("YYYY-MM-DD 00:00:00"),
+            endTime: dayjs(contextmenuKlineTime).endOf("month").format("YYYY-MM-DD 23:59:59"),
+          };
+          break;
+        }
+        // 小周期直接用screenTimeRange
+        default: {
+          syncBrushRange.value = {
+            cycleList: [],
+            startTime: screenTimeRange[0],
+            endTime: screenTimeRange[1],
+          };
+        }
+      }
+      // 图表重绘
+      chartList.value.forEach((citem, cindex) => {
+        if (cindex !== index) {
+          syncBrushRange.value.cycleList.push(citem.cycle);
+          const startTime = estimateKlineTime(syncBrushRange.value.startTime, "before", 200, citem.cycle);
+          const endTime = estimateKlineTime(syncBrushRange.value.endTime, "after", 200, citem.cycle);
+          citem.initTimeRange = [startTime, endTime];
+        }
+        nextTick(() => chartDomRefList.value[index].reDraw());
+      });
+      break;
+    }
+  }
+};
+
+onMounted(async () => {
+  cycleOptions.value = (await getCycleList()).body[1002].map((item) => ({ label: item.dictName, value: item.dictCode }));
+  const { multiCycleNum, multiCycleList } = props.userKlineConfig;
+  chartList.value = multiCycleList.slice(0, multiCycleNum).map((cycle) => {
+    const params = {
+      type: "reset",
+      cycle,
+      startTime: props.tradeLog[0].openTime,
+      endTime: props.positionTime ? props.positionTime : props.tradeLog.at(-1).closeTime,
+    };
+    const initTimeRange = getTimeRange(params);
+    return { cycle, initTimeRange };
+  });
+});
+defineExpose({
+  changeTimeRange: (type) => {
+    chartList.value = chartList.value.map((item) => {
+      const params = {
+        type,
+        cycle: item.cycle,
+        startTime: props.tradeLog[0].openTime,
+        endTime: props.positionTime ? props.positionTime : props.tradeLog.at(-1).closeTime,
+      };
+      return {
+        ...item,
+        initTimeRange: getTimeRange(params),
+      };
+    });
+    // 同步刷选范围
+    switch (type) {
+      case "week": {
+        const startDate = dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00");
+        const endDate = dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59");
+        syncBrushRange.value = {
+          cycleList: ["6", "7", "8"],
+          startTime: startDate,
+          endTime: endDate,
+        };
+        break;
+      }
+      case "month": {
+        const startDate = dayjs().startOf("month").format("YYYY-MM-DD 00:00:00");
+        const endDate = dayjs().endOf("month").format("YYYY-MM-DD 23:59:59");
+        syncBrushRange.value = {
+          cycleList: ["6", "7", "8"],
+          startTime: startDate,
+          endTime: endDate,
+        };
+        break;
+      }
+      case "reset": {
+        syncBrushRange.value = {
+          cycleList: [],
+          startTime: null,
+          endTime: null,
+        };
+        break;
+      }
+    }
+  },
+});
+</script>
+
+<template>
+  <div :class="`kline-multi grid-${userKlineConfig.multiCycleNum}`">
+    <div
+      class="box"
+      v-for="(item, index) in chartList"
+      @dblclick="emit('goToSingleCycle', item)"
+    >
+      <div class="cycleName">
+        <span>{{ formatLabel(item.cycle, cycleOptions) }}</span>
+        <el-select
+          v-model="item.cycle"
+          popper-class="element-dark"
+          :popper-append-to-body="false"
+          @change="handleClearSyncBrush(item.cycle)"
+        >
+          <el-option
+            v-for="(item, index) in cycleOptions"
+            :key="index"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <st-contextmenu>
+        <st-klinePlus
+          :ref="(el) => handleSetChartDomRef(el, index)"
+          :varietyCode="varietyCode"
+          :varietyStock="varietyStock"
+          :indicatorStore="indicatorStore"
+          :userKlineConfig="userKlineConfig"
+          :cycle="item.cycle"
+          :sellBuy="sellBuy"
+          :rightType="rightType"
+          :klineType="klineType"
+          :initTimeRange="item.initTimeRange"
+          :mainIndicator="mainIndicator"
+          :tradeLog="tradeLog"
+          :netPositionData="netPositionData"
+          :positionTime="positionTime"
+          :syncBrushRange="syncBrushRange"
+        />
+        <template #popover>
+          <el-menu
+            :style="{
+              borderRadius: '4px',
+              overflow: 'hidden',
+              background: '#fff',
+              borderRight: 0,
+            }"
+          >
+            <el-menu-item
+              v-for="menuItem in menuList"
+              style="height: 36px"
+              :key="menuItem.key"
+              :index="menuItem.key"
+              @click="handleClickMenuItem(menuItem, item, index)"
+            >
+              {{ menuItem.label }}
+            </el-menu-item>
+          </el-menu>
+        </template>
+      </st-contextmenu>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.kline-multi {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 2px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(150px, 1fr));
+  grid-template-rows: repeat(2, minmax(100px, 1fr));
+  grid-gap: 2px;
+  .box {
+    position: relative;
+    border: 1px solid var(--el-border-color);
+    transition: 0.2s;
+    &:hover {
+      border: 1px solid var(--el-color-primary);
+    }
+    .cycleName {
+      color: white;
+      font-size: 12px;
+      padding: 1px 4px;
+      background-color: var(--el-color-primary);
+      display: flex;
+      align-items: center;
+      border-bottom-left-radius: 4px;
+      position: absolute;
+      z-index: 999;
+      right: 0px;
+      top: 0px;
+      :deep(.el-select) {
+        margin-left: 4px;
+        width: 14px;
+        .el-select__icon {
+          margin-left: 0;
+          color: black;
+          width: 14px;
+          height: 14px;
+        }
+        .el-select__wrapper {
+          border-radius: 50%;
+          background: #ccc;
+          padding: 0;
+          gap: 0;
+          min-height: 14px;
+          line-height: 14px;
+        }
+        .el-select__input {
+          min-width: 0 !important;
+          width: 0 !important;
+        }
+      }
+    }
+  }
+}
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(1, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+.grid-6 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, minmax(80px, 1fr));
+  grid-gap: 2px;
+}
+</style>