st-comp 0.0.247 → 0.0.249

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

@@ -0,0 +1,582 @@
+<script setup>
+import { actionStat } from "st-func";
+import { ref, reactive, onMounted, provide, nextTick, watch } from "vue";
+import { ArrowLeftBold, ArrowRightBold, RefreshRight, CloseBold, Setting } from "@element-plus/icons-vue";
+import { sellBuyOptions, rightTypeOptions, klineTypeOptions, formatLabel, getTimeRange } from "./tools.js";
+import useIndicatorStore from "./indicator.js";
+import { queryContractType, queryVarietyNetPositionValue, queryPairedRecordByVariety, queryJCVariety, getUserConfig, getCycleList } from "./api.js";
+import MultiCycle from "./MultiCycle.vue";
+
+const actionParams = ref({ pageName: null, other: null }); // 数据埋点
+
+const stKlineConfigRef = ref(null);
+const userKlineConfig = reactive({});
+provide("userKlineConfig", userKlineConfig);
+
+const indicatorStore = useIndicatorStore();
+const cycleOptions = ref([]);
+
+const visible = ref(false);
+const loading = ref(false); // 初始数据载入, 参数变动等
+const MultiCycleRef = ref(null);
+
+const pageType = ref(1);
+const analyseId = ref(null);
+const varietyList = ref([]);
+const varietyIndex = ref(0);
+
+const varietyName = ref(null);
+const varietyCode = ref(null);
+const jcVarietyOptions = ref([]); // 价差品种数据源
+const ifBasket = ref(0); // 1: 是篮子, 0: 不是篮子
+
+// 品种参数
+const varietyStock = ref(1); // 0: 期货, 1: 股票, 2: 期权
+const tradeLog = ref([]);
+const netPositionData = ref([]);
+
+// 交互参数
+const cycle = ref("6");
+const sellBuy = ref(1);
+const rightType = ref(1);
+const klineType = ref(0);
+const mainIndicator = ref("DKX_EMA");
+
+/**
+ * @description: 首屏时间
+ * 1. 默认按照交易第一笔开仓 ~ 最后一笔平仓时间 (前后拓展200根)
+ * 2. 如果参数positionTime, 则以此时间为准 (前后拓展200根)
+ */
+const initTimeRange = ref([]);
+const positionTime = ref(null);
+
+// 获取主品种类型
+const getVarietyStock = async () => {
+  const params = { condition: varietyCode.value, conditionName: varietyName.value };
+  const { body } = await queryContractType(params);
+  varietyStock.value = body;
+};
+// 获取价差品种数据
+const getJcVarietyOptions = async () => {
+  if (varietyStock.value === 1) {
+    const params = { condition: varietyCode.value, conditionName: varietyName.value };
+    const { body } = await queryJCVariety(params);
+    jcVarietyOptions.value = body ?? [];
+  } else {
+    jcVarietyOptions.value = [{ varietyName: varietyName.value, varietyCode: varietyCode.value }];
+  }
+};
+
+// 获取品种交易数据
+const getTradeLog = async () => {
+  // 如果已经自带了交易数据, 说明是要聚焦这一笔明细的, 就不用拉取全部数据
+  if (tradeLog.value.length !== 0) return;
+  const params = {
+    analyseId: analyseId.value,
+    varietyName: varietyName.value,
+    varietyCode: varietyCode.value,
+    ifBasket: ifBasket.value, // 是否篮子
+    cycle: cycle.value,
+  };
+  const { body } = await queryPairedRecordByVariety(params);
+  tradeLog.value = body ?? [];
+};
+// 获取品种净值数据
+const getNetPositionData = async () => {
+  // 如果没有交易数据, 就不用请求净值数据了
+  if (tradeLog.value.length === 0) return;
+  if (ifBasket.value === 1) return;
+  const params = {
+    analyseId: analyseId.value,
+    varietyCode: varietyCode.value,
+    startTime: tradeLog.value[0].openTime,
+    endTime: tradeLog.value.at(-1).closeTime,
+  };
+  const { body } = await queryVarietyNetPositionValue(params);
+  netPositionData.value = body;
+};
+
+// 顶栏: 时间控制
+const handleTimeRange = async (type) => {
+  // 单周期
+  if (pageType.value === 1) {
+    const params = {
+      type,
+      cycle: cycle.value,
+      startTime: tradeLog.value[0]?.openTime,
+      endTime: positionTime.value ? positionTime.value : tradeLog.value.at(-1)?.closeTime,
+    };
+    initTimeRange.value = getTimeRange(params);
+  }
+  // 多周期
+  else if (pageType.value === 2) MultiCycleRef.value?.changeTimeRange(type);
+};
+// 顶栏: 主品种切换
+const handleChangeVariety = async (type) => {
+  const oldIndex = varietyIndex.value;
+  const maxIndex = varietyList.value.length - 1;
+  switch (type) {
+    // 上一个品种
+    case "pre": {
+      if (oldIndex === 0) return ElMessage.warning("已是本页第一个品种");
+      varietyIndex.value -= 1;
+      break;
+    }
+    // 下一个品种
+    case "next": {
+      if (oldIndex === maxIndex) return ElMessage.warning("已是本页最后一个品种");
+      varietyIndex.value += 1;
+      break;
+    }
+  }
+  if (oldIndex !== varietyIndex.value) {
+    loading.value = true;
+    const varietyInfo = varietyList.value[varietyIndex.value];
+    varietyName.value = varietyInfo.varietyName;
+    varietyCode.value = varietyInfo.varietyCode;
+    ifBasket.value = varietyInfo.ifBasket;
+    tradeLog.value = varietyInfo.tradeLog ?? [];
+    netPositionData.value = [];
+    await getVarietyStock();
+    await getJcVarietyOptions();
+    await getTradeLog();
+    await getNetPositionData();
+    handleTimeRange("reset");
+    loading.value = false;
+  }
+};
+// 顶栏: 价差品种切换
+const handleChangeJcVariety = (varietyCode) => {
+  const item = jcVarietyOptions.value.find((i) => i.varietyCode === varietyCode);
+  // 由于这里要修改其它响应式数据, select组件内部原因, 自动关闭下拉框这一行为会受到影响, 所以使用nextTick
+  nextTick(() => {
+    varietyName.value = item.varietyName;
+    handleTimeRange("reset");
+  });
+};
+
+// 多周期双击切到单周期
+const goToSingleCycle = (item) => {
+  if (!userKlineConfig.enable_dbClickOpenSingel) return;
+  cycle.value = item.cycle;
+  pageType.value = 1;
+};
+// 用户自定义K线配置(获取, 更新)
+const handleUserKlineConfig = async (action, formJson) => {
+  switch (action) {
+    case "get": {
+      const { body } = await getUserConfig({ appId: 1 });
+      Object.assign(userKlineConfig, stKlineConfigRef.value?.getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});
+      console.log(userKlineConfig)
+      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 () => {
+  await indicatorStore.init();
+  handleUserKlineConfig("get");
+  cycleOptions.value = (await getCycleList()).body[1002].map((item) => ({ label: item.dictName, value: item.dictCode }));
+});
+watch(
+  () => pageType.value,
+  (newValue) => {
+    // 当切换到单周期的时候, 需要重置初始时间, 多周期业务组件内部自带了重置触发逻辑
+    if (newValue === 1) handleTimeRange("reset");
+    actionParams.value?.pageName && actionStat(actionParams.value?.pageName, "查看K线", pageType.value === 1 ? "单周期" : "多周期");
+  }
+);
+defineExpose({
+  /**
+   * @description: 打开K线弹窗组件
+   * @param {Object} params - 入参
+   * params.analyseId - 绩效记录id
+   * params.varietyInfo - 品种信息 { index, varietyName, varietyCode, ifBasket, positionTime, tradeLog }
+   * params.varietyList - 当页品种列表 <varietyInfo>
+   * params.actionParams - 行为埋点参数
+   */
+  open: async (params) => {
+    try {
+      loading.value = true;
+      visible.value = true;
+
+      // 外部传入
+      analyseId.value = params.analyseId;
+      varietyList.value = params.varietyList ?? [];
+      varietyIndex.value = params.varietyInfo.index ?? 0;
+      varietyName.value = params.varietyInfo.varietyName;
+      varietyCode.value = params.varietyInfo.varietyCode;
+      ifBasket.value = params.varietyInfo.ifBasket;
+      positionTime.value = params.varietyInfo.positionTime;
+      tradeLog.value = params.varietyInfo.tradeLog ?? [];
+
+      // 默认值 [内部固定]
+      varietyStock.value = 1;
+      rightType.value = 1;
+      klineType.value = 0;
+      initTimeRange.value = [];
+      netPositionData.value = [];
+
+      // 默认值 [自定义配置]
+      pageType.value = userKlineConfig.pageType;
+      cycle.value = userKlineConfig.singelCycle;
+      sellBuy.value = userKlineConfig.sellBuy;
+      mainIndicator.value = userKlineConfig.mainIndicator;
+
+      await getVarietyStock();
+      await getJcVarietyOptions();
+      await getTradeLog();
+      await getNetPositionData();
+      handleTimeRange("reset");
+    } catch (error) {
+      throw new Error(`打开K线弹窗异常: ${error}`);
+    } finally {
+      loading.value = false;
+      // 埋点
+      actionParams.value = params.actionParams;
+      actionParams.value?.pageName && actionStat(actionParams.value?.pageName, "查看K线", pageType.value === 1 ? "单周期" : "多周期");
+    }
+  },
+});
+</script>
+
+<template>
+  <el-dialog
+    class="kline-dialog"
+    v-model="visible"
+    :fullscreen="true"
+    :show-close="false"
+    :destroy-on-close="true"
+    :z-index="2000"
+  >
+    <div class="main element-dark">
+      <template v-if="!loading">
+        <!-- 功能栏 -->
+        <div class="kline-header">
+          <!-- 标题 -->
+          <div class="kline-header-item kline-header-item-select">
+            <span> {{ varietyName }} {{ varietyCode }} </span>
+            <el-select
+              v-model="varietyCode"
+              popper-class="element-dark"
+              @change="handleChangeJcVariety"
+            >
+              <el-option
+                v-for="(item, index) in jcVarietyOptions"
+                :key="item.varietyCode"
+                :label="`${item.varietyName} ${item.varietyCode}`"
+                :value="item.varietyCode"
+              />
+            </el-select>
+          </div>
+          <!-- 周期 -->
+          <template v-if="pageType === 1">
+            <div class="kline-header-item kline-header-item-select">
+              <span>{{ formatLabel(cycle, cycleOptions) }}</span>
+              <el-select
+                v-model="cycle"
+                popper-class="element-dark"
+              >
+                <el-option
+                  v-for="(item, index) in cycleOptions"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </template>
+          <!-- 指标 -->
+          <div class="kline-header-item kline-header-item-select">
+            <span>{{ mainIndicator }}</span>
+            <el-select
+              v-model="mainIndicator"
+              popper-class="element-dark"
+            >
+              <el-option
+                v-for="(item, index) in indicatorStore.mainIndicatorList"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+              <template #footer>
+                <el-button
+                  text
+                  :icon="Setting"
+                  @click="indicatorStore.config"
+                >
+                  指标配置
+                </el-button>
+              </template>
+            </el-select>
+          </div>
+          <!-- 买卖 -->
+          <div class="kline-header-item kline-header-item-select">
+            <span>{{ formatLabel(sellBuy, sellBuyOptions) }}</span>
+            <el-select
+              v-model="sellBuy"
+              popper-class="element-dark"
+            >
+              <el-option
+                v-for="(item, index) in sellBuyOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <!-- 复权选项 [股票] -->
+          <template v-if="varietyStock === 1">
+            <div class="kline-header-item kline-header-item-select">
+              <span>{{ formatLabel(rightType, rightTypeOptions) }}</span>
+              <el-select
+                v-model="rightType"
+                popper-class="element-dark"
+              >
+                <el-option
+                  v-for="(item, index) in rightTypeOptions"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </template>
+          <!-- 常用选项 [期货] -->
+          <template v-if="varietyStock === 0">
+            <div class="kline-header-item kline-header-item-select">
+              <span>{{ formatLabel(klineType, klineTypeOptions) }}</span>
+              <el-select
+                v-model="klineType"
+                popper-class="element-dark"
+              >
+                <el-option
+                  v-for="(item, index) in klineTypeOptions"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </template>
+          <!-- 品种切换 -->
+          <template v-if="varietyList.length">
+            <div class="kline-header-item">
+              <el-button
+                size="small"
+                :icon="ArrowLeftBold"
+                @click="handleChangeVariety('pre')"
+              >
+                上一品种
+              </el-button>
+              <el-button
+                size="small"
+                @click="handleChangeVariety('next')"
+              >
+                下一品种
+                <el-icon class="el-icon--right"><ArrowRightBold /></el-icon>
+              </el-button>
+            </div>
+          </template>
+          <!-- 时间控制 -->
+          <div class="kline-header-item">
+            <el-button
+              link
+              size="small"
+              @click="handleTimeRange('week')"
+              >本周</el-button
+            >
+            <el-button
+              link
+              size="small"
+              @click="handleTimeRange('month')"
+              >本月</el-button
+            >
+            <el-button
+              size="small"
+              :icon="RefreshRight"
+              @click="handleTimeRange('reset')"
+              >重置</el-button
+            >
+          </div>
+          <!-- 关闭 -->
+          <div class="kline-header-item-right">
+            <el-radio-group
+              size="small"
+              v-model="pageType"
+            >
+              <el-radio-button :value="1">单周期</el-radio-button>
+              <el-radio-button :value="2">多周期</el-radio-button>
+            </el-radio-group>
+            <el-icon
+              class="setting-icon"
+              title="K线自定义配置"
+              :size="20"
+              @click="stKlineConfigRef?.open"
+            >
+              <Setting />
+            </el-icon>
+            <el-button
+              size="small"
+              @click="() => (visible = false)"
+            >
+              关闭窗口
+              <el-icon class="close-icon">
+                <CloseBold />
+              </el-icon>
+            </el-button>
+          </div>
+        </div>
+        <!-- 内容 -->
+        <div class="kline-body">
+          <!-- K线组件 [单周期] -->
+          <template v-if="pageType === 1">
+            <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>
+          <!-- K线组件 [多周期] -->
+          <template v-else>
+            <MultiCycle
+              ref="MultiCycleRef"
+              :varietyCode="varietyCode"
+              :varietyStock="varietyStock"
+              :indicatorStore="indicatorStore"
+              :userKlineConfig="userKlineConfig"
+              :sellBuy="sellBuy"
+              :rightType="rightType"
+              :klineType="klineType"
+              :initTimeRange="initTimeRange"
+              :mainIndicator="mainIndicator"
+              :tradeLog="tradeLog"
+              :netPositionData="netPositionData"
+              :positionTime="positionTime"
+              @goToSingleCycle="goToSingleCycle"
+            />
+          </template>
+        </div>
+      </template>
+      <template v-else>
+        <div
+          class="user-kline-config-loading"
+          v-loading="loading"
+        />
+      </template>
+    </div>
+  </el-dialog>
+  <st-klineConfig
+    ref="stKlineConfigRef"
+    :indicatorStore="indicatorStore"
+    @callBack="(formJson) => handleUserKlineConfig('update', formJson)"
+  />
+</template>
+
+<style lang="scss">
+.kline-dialog {
+  padding: 0;
+  background-color: black;
+  .el-dialog__header {
+    display: none !important;
+  }
+  .el-dialog__body {
+    padding: 0;
+    border: none;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.kline-dialog {
+  .main {
+    width: 100vw;
+    height: 100vh;
+    color-scheme: dark;
+    background-color: black;
+    overflow: hidden;
+    position: relative;
+    .kline-header {
+      color: white;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      border-bottom: 1px solid rgb(100, 100, 100);
+      position: relative;
+      .kline-header-item {
+        height: 32px;
+        line-height: 32px;
+        display: flex;
+        align-items: center;
+        border-right: 1px solid rgb(100, 100, 100);
+        padding: 0 6px;
+        box-sizing: border-box;
+      }
+      .kline-header-item-select {
+        :deep(.el-select) {
+          margin-left: 4px;
+          width: 16px;
+          .el-select__icon {
+            margin-left: 0;
+            color: black;
+            width: 16px;
+            height: 16px;
+          }
+          .el-select__wrapper {
+            border-radius: 50%;
+            background: #ccc;
+            padding: 0;
+            gap: 0;
+            min-height: 12px;
+            line-height: 12px;
+          }
+        }
+      }
+      .kline-header-item-right {
+        height: 100%;
+        position: absolute;
+        top: 0px;
+        right: 6px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .el-icon {
+          font-size: 18px;
+          cursor: pointer;
+          &:hover {
+            color: var(--el-color-primary);
+          }
+        }
+      }
+    }
+    .kline-body {
+      width: 100vw;
+      height: calc(100vh - 39px);
+    }
+    .user-kline-config-loading {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

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;