st-comp 0.0.277 → 0.0.279

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

@@ -1,582 +0,0 @@
-<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

@@ -1,109 +0,0 @@
-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;