st-comp 0.0.247 → 0.0.248

package/src/pages/KlinePlus/KlineDialog/indicator.js

@@ -0,0 +1,109 @@
+import { defineStore } from "pinia";
+import { getIndicator, getConfig, setConfig } from "./api";
+
+const useIndicatorStore = defineStore("indicator", {
+  state: () => ({
+    visible: false, // 是否显示配置弹窗
+    originConfig: {}, // 原始配置
+    filterIndicator: {}, // 内置指标过滤配置
+    customIndicator: [], // 自定义指标配置
+    mainSystemIndicatorList: [], // 内置主图指标配置
+    subIndicatorList: [], // 副图指标配置
+    indicatorItemList: [], // 指标项配置
+  }),
+  getters: {
+    mainIndicatorList: (state) => {
+      // 主图指标列表（过滤隐藏的指标）
+      return [...state.mainSystemIndicatorList, ...state.customIndicator];
+    },
+    // 获取指标项配置
+    getIndicatorParams: (state) => {
+      return (mainIndicator) => {
+        let indicatorParams = [];
+        state.mainSystemIndicatorList.forEach((item) => {
+          if (item.label === mainIndicator) {
+            const filterConfig = state.filterIndicator[mainIndicator] || [];
+            indicatorParams = item.config.filter((i) => !filterConfig.includes(i.key)).map((i) => i.key);
+          }
+        });
+        state.customIndicator.forEach((item) => {
+          if (item.label === mainIndicator) {
+            indicatorParams = item.config.map((i) => i.key);
+          }
+        });
+        return indicatorParams;
+      };
+    },
+  },
+  actions: {
+    // 初始化配置
+    async init() {
+      const indicatorRes = await getIndicator();
+      this.mainSystemIndicatorList = indicatorRes?.body?.mainIndicatorList || [];
+      this.subIndicatorList = indicatorRes?.body?.subIndicatorList || [];
+      this.indicatorItemList = indicatorRes?.body?.indicatorItemList || [];
+      const res = await getConfig();
+      let originConfig = {};
+      let filterIndicator = {};
+      let customIndicator = [];
+      if (res.data) {
+        originConfig = JSON.parse(res.data);
+        filterIndicator = originConfig.filterIndicator || {};
+        customIndicator = originConfig.customIndicator || [];
+      }
+      this.originConfig = originConfig;
+      this.filterIndicator = filterIndicator;
+      this.customIndicator = customIndicator;
+    },
+    // 代开配置弹窗
+    config() {
+      this.visible = true;
+    },
+    // 更新内置指标过滤配置
+    async setFilterIndicator(key, filterIndicatorList) {
+      await setConfig({
+        data: JSON.stringify({
+          ...this.originConfig,
+          filterIndicator: {
+            ...this.filterIndicator,
+            [key]: filterIndicatorList,
+          },
+        }),
+      });
+      this.filterIndicator[key] = filterIndicatorList;
+    },
+    // 更新自定义指标配置配置
+    async setCustomIndicator({ label, config, originLabel, type }) {
+      let newCustomIndicator = [...this.customIndicator];
+      if (type === "add") {
+        // 新增指标
+        newCustomIndicator = [...newCustomIndicator, { label, value: label, config: [], type: "custom" }];
+      } else if (type === "editLabel") {
+        // 编辑指标名称
+        newCustomIndicator = newCustomIndicator.map((item) => {
+          if (item.label === originLabel) {
+            return { ...item, label, value: label };
+          }
+          return item;
+        });
+      } else if (type === "editConfig") {
+        // 编辑指标配置
+        newCustomIndicator = newCustomIndicator.map((item) => {
+          if (item.label === label) {
+            return { ...item, config };
+          }
+          return item;
+        });
+      } else if (type === "delete") {
+        // 删除指标
+        newCustomIndicator = newCustomIndicator.filter((item) => item.label !== label);
+      }
+      await setConfig({
+        data: JSON.stringify({ ...this.originConfig, customIndicator: newCustomIndicator }),
+      });
+      this.customIndicator = newCustomIndicator;
+    },
+  },
+});
+
+export default useIndicatorStore;

package/src/pages/KlinePlus/KlineDialog/tools.js

@@ -0,0 +1,86 @@
+import dayjs from "dayjs";
+
+// 数据源: 成交点类型
+export const sellBuyOptions = [
+  { label: "买卖", value: 0 },
+  { label: "开平", value: 1 },
+];
+// 数据源: 复权类型
+export const rightTypeOptions = [
+  { label: "不复权", value: 0 },
+  { label: "前复权", value: 1 },
+];
+// 数据源: 合约类型
+export const klineTypeOptions = [
+  { value: 0, label: "主连" },
+  { value: 1, label: "加权" },
+  { value: 2, label: "收益率指数" },
+];
+
+// 字典文案映射
+export const formatLabel = (value, options) => {
+  return options.find((item) => item.value === value)?.label ?? "-";
+};
+
+// 前端估算K线根数的周期分布
+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个交易日算）
+};
+// 前端估算大致根数的K线时间
+export const estimateKlineTime = (time, direction, num, cycle) => {
+  const dayBarsNum = dayBarsNumByCycle[cycle] || 1;
+  // 计算需要的大概天数
+  const daysNeeded = num / dayBarsNum;
+
+  let resultTime;
+  if (direction === "before") {
+    resultTime = dayjs(time).subtract(daysNeeded, "day");
+  } else {
+    resultTime = dayjs(time).add(daysNeeded, "day");
+  }
+
+  return resultTime.format("YYYY-MM-DD HH:mm:ss");
+};
+/**
+ * @description: 根据开始时间, 结束时间, 返回拓展K线根数+校验间隔后的时间范围
+ * @params
+ * {
+ *  startTime 开始时间;
+ *  endTime: 结束时间;
+ *  cycle: 周期Id;
+ *
+ *  type: 类型, 默认reset;
+ *  num: 推算根数, 默认200;
+ *  maxSpan: 一屏上限根数, 默认3000; 这里是因为前端估算忽略了交易日等因素, 所以在计算差值时, 根数的上限可以比常规的一屏上限数量大一些
+ * }
+ * @return [startTime, endTime]
+ */
+export const getTimeRange = (rest) => {
+  const params = Object.assign({}, { type: "reset", num: 200, maxSpan: 3000 }, rest);
+  switch (params.type) {
+    case "week": {
+      return [dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD HH:mm:ss")];
+    }
+    case "month": {
+      return [dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss")];
+    }
+    case "reset": {
+      // 1. 推算根数后的时间范围
+      const startTime = estimateKlineTime(params.startTime, "before", params.num, params.cycle);
+      const endTime = estimateKlineTime(params.endTime, "after", params.num, params.cycle);
+      // 2. 进行N天间隔校验
+      const N = Math.ceil(params.maxSpan / dayBarsNumByCycle[params.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];
+    }
+  }
+};

package/src/pages/KlinePlus/index.vue

@@ -1,216 +1,30 @@
-<template>
-  <div>
-    <div style="display: flex; align-items: center; gap: 10px">
-      <el-button @click="stKlineConfigRef?.open">打开K线自定义配置</el-button>
-      <el-select
-        v-model="sellBuy"
-        style="width: 100px"
-      >
-        <el-option
-          v-for="item in [
-            { label: '买卖', value: 0 },
-            { label: '开平', value: 1 },
-          ]"
-          :key="item.value"
-          :value="item.value"
-          :label="item.label"
-        />
-      </el-select>
-      <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
-          :varietyCode="varietyCode"
-          :varietyStock="varietyStock"
-          :indicatorStore="indicatorStore"
-          :userKlineConfig="userKlineConfig"
-          :cycle="cycle"
-          :sellBuy="sellBuy"
-          :rightType="rightType"
-          :klineType="klineType"
-          :initTimeRange="initTimeRange"
-          :mainIndicator="mainIndicator"
-          :tradeLog="tradeLog"
-          :netPositionData="netPositionData"
-          :positionTime="positionTime"
-        />
-      </template>
-    </div>
-    <st-klineConfig
-      ref="stKlineConfigRef"
-      :indicatorStore="indicatorStore"
-      @callBack="(formJson) => handleUserKlineConfig('update', formJson)"
-    />
-  </div>
-</template>
-
 <script setup>
-import dayjs from "dayjs";
-import tradeLogMock from "./tradeLogMock";
-import { onMounted, ref, reactive, provide, inject, nextTick } from "vue";
-
-const { request } = inject("stConfig"); // 组件库全局配置
-
-const stKlineConfigRef = ref(null);
-const loading = ref(true);
-const userKlineConfig = reactive({});
-provide("userKlineConfig", userKlineConfig);
-
-const cycleOptions = [
-  { label: "1m", value: "1" },
-  { label: "60m", value: "5" },
-  { label: "1d", value: "6" },
-  { label: "1mon", value: "8" },
-];
-
-const varietyName = ref("国债指数");
-const varietyCode = ref("Z000012");
-const varietyStock = ref(1); // 0: 期货, 1: 股票, 2: 期权
-const tradeLog = ref(tradeLogMock);
-const netPositionData = ref([]);
-const pageType = ref(1);
-const cycle = ref("5");
-const sellBuy = ref(1);
-const rightType = ref(1);
-const klineType = ref(0);
-const mainIndicator = ref("MA");
-const initTimeRange = ref([]);
-const positionTime = ref(null);
-
-const indicatorStore = {
-  mainIndicatorList: [
-    { label: "DKX_EMA", value: "DKX_EMA" },
-    { label: "MA", value: "MA" },
-  ],
-  getIndicatorParams: () => {
-    return ["MA5", "MA10", "MA20", "MA60", "MA120", "MA240", "MA360", "MA720"];
-  },
-};
-
-// 前端估算K线根数的周期分布
-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个交易日算）
-};
-// 前端估算大致根数的K线时间
-const estimateKlineTime = (time, direction, num, cycle) => {
-  const dayBarsNum = dayBarsNumByCycle[cycle] || 1;
-  // 计算需要的大概天数
-  const daysNeeded = num / dayBarsNum;
+import { ref } from "vue";
+import KlineDialog from "./KlineDialog/index.vue"
 
-  let resultTime;
-  if (direction === "before") {
-    resultTime = dayjs(time).subtract(daysNeeded, "day");
-  } else {
-    resultTime = dayjs(time).add(daysNeeded, "day");
-  }
-
-  return resultTime.format("YYYY-MM-DD HH:mm:ss");
-};
-/**
- * @description: 根据开始时间, 结束时间, 返回拓展K线根数+校验间隔后的时间范围
- * @params
- * {
- *  startTime 开始时间;
- *  endTime: 结束时间;
- *  cycle: 周期Id;
- *
- *  type: 类型, 默认reset;
- *  num: 推算根数, 默认200;
- *  maxSpan: 一屏上限根数, 默认3000; 这里是因为前端估算忽略了交易日等因素, 所以在计算差值时, 根数的上限可以比常规的一屏上限数量大一些
- * }
- * @return [startTime, endTime]
- */
-const getTimeRange = (rest) => {
-  const params = Object.assign({}, rest, { type: "reset", num: 200, maxSpan: 3000 });
-  switch (params.type) {
-    case "week": {
-      return [dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD HH:mm:ss")];
-    }
-    case "month": {
-      return [dayjs().startOf("month").format("YYYY-MM-DD HH:mm:ss"), dayjs().endOf("month").format("YYYY-MM-DD HH:mm:ss")];
-    }
-    case "reset": {
-      // 1. 推算根数后的时间范围
-      const startTime = estimateKlineTime(params.startTime, "before", params.num, params.cycle);
-      const endTime = estimateKlineTime(params.endTime, "after", params.num, params.cycle);
-      // 2. 进行N天间隔校验
-      const N = Math.ceil(params.maxSpan / dayBarsNumByCycle[params.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];
-    }
-  }
-};
-// 用户自定义K线配置(获取, 更新)
-const handleUserKlineConfig = async (action, formJson) => {
-  switch (action) {
-    case "get": {
-      const { body } = await request.post("/common/qt/getUserConfig", { appId: 1 });
-      Object.assign(userKlineConfig, stKlineConfigRef.value?.getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});
-      break;
-    }
-    case "update": {
-      loading.value = true;
-      // 更新配置数据
-      Object.assign(userKlineConfig, JSON.parse(formJson));
-      // 默认值 [自定义配置]
-      pageType.value = userKlineConfig.pageType;
-      cycle.value = userKlineConfig.singelCycle;
-      sellBuy.value = userKlineConfig.sellBuy;
-      mainIndicator.value = userKlineConfig.mainIndicator;
-      nextTick(() => (loading.value = false));
-    }
-  }
-};
-
-onMounted(async () => {
-  loading.value = true;
-
-  await handleUserKlineConfig("get");
+const KlineDialogRef = ref(null);
 
+// 查看K线弹窗组件
+const openKlineDialog = () => {
   const params = {
-    type: "rest",
-    cycle: cycle.value,
-    startTime: tradeLog.value[0]?.openTime,
-    endTime: positionTime.value ? positionTime.value : tradeLog.value.at(-1)?.closeTime,
+    analyseId: "6186",
+    varietyInfo: {
+      index: 0,
+      varietyName: "荃银高科",
+      varietyCode: "300087",
+      ifBasket: 0,
+      tradeLog: [],
+    },
+    varietyList: [],
   };
-  initTimeRange.value = getTimeRange(params);
-
-  // 默认值 [自定义配置]
-  pageType.value = userKlineConfig.pageType;
-  cycle.value = userKlineConfig.singelCycle;
-  sellBuy.value = userKlineConfig.sellBuy;
-  mainIndicator.value = userKlineConfig.mainIndicator;
-
-  setTimeout(() => {
-    loading.value = false;
-  }, 200);
-});
+  KlineDialogRef.value.open(params);
+};
 </script>
 
-<style lang="scss" scoped>
-.main {
-  width: 1400px;
-  height: 800px;
-  background-color: black;
-}
-</style>
+<template>
+  <div>
+    <el-button @click="openKlineDialog">打开K线窗口</el-button>
+    <!-- K线弹窗 -->
+    <KlineDialog ref="KlineDialogRef" />
+  </div>
+</template>

package/es/raf-80ef0c0a.js

@@ -1,6 +0,0 @@
-import { s as o } from "./base-a5af3db3.js";
-const e = (i) => o ? window.requestAnimationFrame(i) : setTimeout(i, 16), r = (i) => o ? window.cancelAnimationFrame(i) : clearTimeout(i);
-export {
-  r as c,
-  e as r
-};