st-comp 0.0.277 → 0.0.279

package/packages/KlineBasic/utils.js

@@ -1,258 +0,0 @@
-import dayjs from "dayjs";
-import { stMath } from "st-func";
-import { updateWarningLine } from "./api";
-
-const { round } = stMath;
-
-// 获取主图配置
-export const getMainOptions = (chartData, config, startValue, endValue, cycle) => {
-  const { data, time } = chartData;
-  const { gridTop, gridRight, gridLeft, maxShowCounts, showSubChart } = config;
-  return {
-    animation: false,
-    grid: {
-      top: `${gridTop}px`,
-      right: `${gridRight}px`,
-      bottom: showSubChart ? "6px" : "24px",
-      left: `${gridLeft}px`,
-    },
-    dataZoom: [
-      {
-        type: "inside",
-        startValue,
-        endValue,
-        maxValueSpan: maxShowCounts,
-      },
-    ],
-    tooltip: {
-      trigger: "axis",
-      appendToBody: true,
-      confine: true,
-      axisPointer: {
-        type: "cross",
-        label: {
-          rich: {},
-          formatter: (data) => {
-            const { axisDimension, value } = data;
-            if (axisDimension === "x") {
-              if (showSubChart) {
-                return "";
-              } else {
-                if (["6", "7", "8"].includes(cycle)) {
-                  return dayjs(value).format("YYYY-MM-DD");
-                } else {
-                  return value;
-                }
-              }
-            } else {
-              return String(round(value));
-            }
-          },
-        },
-      },
-      formatter: () => "",
-    },
-    xAxis: {
-      show: showSubChart ? false : true,
-      type: "category",
-      data: time,
-      splitLine: {
-        show: false,
-      },
-      axisLabel: {
-        formatter: (value) => {
-          if (["6", "7", "8"].includes(cycle)) {
-            return dayjs(value).format("YYYY-MM-DD");
-          } else {
-            return value;
-          }
-        },
-      },
-    },
-    yAxis: {
-      type: "value",
-      axisLine: {
-        show: true,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dotted",
-          color: "#333",
-        },
-      },
-      min: (value) => round(value.min),
-      max: (value) => round(value.max),
-    },
-    series: [
-      {
-        type: "candlestick",
-        data,
-        itemStyle: {
-          color: "transparent",
-          color0: "#00FFFF",
-          borderColor: "#FF0000",
-          borderColor0: "#00FFFF",
-          borderWidth: 1,
-        },
-      },
-      ...chartData.mainIndicator.map((item) => {
-        return {
-          name: item.key,
-          type: "line",
-          silent: true,
-          symbol: "none",
-          data: item.data,
-          lineStyle: {
-            width: item.width || 1,
-          },
-          itemStyle: {
-            color: item.color,
-          },
-        };
-      }),
-    ],
-    toolbox: {
-      show: false,
-    },
-    brush: {
-      xAxisIndex: "all",
-      brushLink: "all",
-      transformable: false,
-      outOfBrush: {
-        colorAlpha: 2,
-      },
-      brushStyle: {
-        color: "rgba(255,255,255,0.1)",
-        borderColor: "rgba(255,255,255,0.4)",
-      },
-    },
-  };
-};
-
-// 获取画线预警配置
-export const getWarningLineOptions = (mainChartIns, warningLineData, props, config, callback) => {
-  const { variety, featureId, featureType } = props;
-  const { gridTop, gridLeft, gridRight } = config;
-  return warningLineData.reduce((res, item) => {
-    const { warnPrice } = item;
-    const y = mainChartIns?.convertToPixel({ yAxisIndex: 0 }, warnPrice);
-    // 位于顶部的预警线不绘制
-    if (y <= gridTop) return res;
-    // 超出图表的预警线不绘制
-    if (y >= mainChartIns?.getHeight()) return res;
-    let dragStart = 0; // 记录拖拽开始的位置
-    return [
-      ...res,
-      {
-        type: "group",
-        name: "warningLine",
-        info: item,
-        draggable: "vertical",
-        children: [
-          {
-            type: "line",
-            info: item,
-            shape: {
-              x1: gridLeft, // 开始X坐标
-              y1: y, // 开始Y坐标
-              x2: mainChartIns?.getWidth() - gridRight, // 结束X坐标
-              y2: y, // 结束Y坐标
-            },
-            style: {
-              stroke: "#FFF",
-              lineWidth: 1,
-              lineDash: [8, 4],
-            },
-            z: 10,
-          },
-          {
-            type: "text",
-            info: item,
-            x: mainChartIns?.getWidth() - gridRight,
-            y: y - 5,
-            style: {
-              fill: "#FFF",
-              text: warnPrice,
-              stroke: "#000",
-              lineWidth: 1,
-              opacity: 1,
-            },
-            z: 10,
-          },
-        ],
-        // 事件:开始拖拽
-        ondragstart: (params) => {
-          dragStart = params.offsetY; // 记录拖拽开始坐标
-        },
-        ondrag: (params) => {
-          if (params.target && params.target.childAt(1)) {
-            const newValue = mainChartIns.convertFromPixel({ yAxisIndex: 0 }, y + (params.offsetY - dragStart));
-            params.target
-              .childAt(1)
-              ?.animate("style", false)
-              .when(1, { text: round(newValue, 3) })
-              .start();
-          }
-        },
-        // 事件:结束拖拽
-        ondragend: async (params) => {
-          /**
-           * 之所以不直接使用dragEnd,是因为echarts拖拽会有偏差问题
-           * 需要使用偏移量才会更加准备,不然会出现画完线渲染位置和拖拽位置不一致
-           */
-          const dragEnd = params.offsetY; // 记录结束拖拽坐标
-          const dragInterval = dragEnd - dragStart; // 拖拽偏移量
-          if (dragInterval !== 0) {
-            // 计算偏移后对应的Y轴数据
-            const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, dragInterval + y);
-            const params = {
-              id: item.id,
-              warnPrice: round(yAxisValue, 3),
-              featureId, //品种id
-              featureCode: variety, //品种代码
-              featureType, //品种类型
-            };
-            await updateWarningLine(params);
-            ElMessage.success("画线预警修改成功");
-            callback && callback();
-          }
-        },
-      },
-    ];
-  }, []);
-};
-
-// 格式化指标数据，整数保留两位小数，小数保留两位有效数字 AI生成
-export function formatIndicatorNumber(value) {
-  // ----- 辅助函数：转换为有效的有限数字 -----
-  function toValidNumber(v) {
-    if (typeof v === 'number') {
-      return Number.isFinite(v) ? v : null;               // 排除 NaN / Infinity
-    }
-    if (typeof v === 'string') {
-      const trimmed = v.trim();
-      if (trimmed === '') return null;                     // 空字符串视为异常
-      const num = Number(trimmed);
-      return Number.isFinite(num) ? num : null;            // 转换后必须为有限数字
-    }
-    return null;                                              // 其他类型一律异常
-  }
-  const validNum = toValidNumber(value);
-  if (validNum === null) return "-";
-
-  try {
-    if (validNum >= 1 || validNum <= -1) {
-      // 整数：保留两位小数
-      return round(validNum);
-    } else {
-      // 非整数：先获得两位有效数字的科学计数法形式
-      const precisionStr = validNum.toPrecision(3);
-      // 最后一位小数进行四舍五入
-      return round(precisionStr, precisionStr.split('.')[1].length - 1)
-    }
-  } catch (e) {
-    // 防御性捕获（理论上不会发生）
-    return "-";
-  }
-}

package/packages/KlineConfig/config.js

@@ -1,46 +0,0 @@
-export const sellBuyOptions = [
-  { label: "买卖", value: 0 },
-  { label: "开平", value: 1 },
-];
-
-// 默认K线用户自定义配置
-export const getDefaultUserKlineConfig = () => {
-  return {
-    /**
-     * @description: 偏好设置
-     */
-    // 主图指标默认展示
-    mainIndicator: "MA",
-    // 成交点默认展示
-    sellBuy: 1,
-    // 成交点默认按照实际价格标记
-    sellBuyByPrice: 1,
-    // 单周期默认展示
-    singelCycle: "6",
-    // 多周期布局 2 4 6
-    multiCycleNum: 6,
-    // 多周期N宫格周期
-    multiCycleList: ["1", "2", "3", "4", "5", "6"],
-    // 默认展示模块
-    pageType: 1, // 展示模块 1-单周期, 2-多周期
-
-    /**
-     * @description: 功能配置
-     */
-    enable_tradeLogBrush: true, // 高亮交易范围
-    enable_showScreenTimeRange: true, // 展示当屏时间范围
-    enable_showScreenMaxPrice: true, // 展示当屏最高价
-    enable_dbClickOpenSingel: true, // 多周期双击图表切换至单周期
-    
-    /**
-     * @description: 组件开关
-    */
-   enable_subChart: true, // 是否启用副图
-   enable_sliderChart: true, // 是否启用拖拽轴
-  };
-};
-
-// 字典文案映射
-export const formatLabel = (value, options) => {
-  return options.find((item) => item.value === value)?.label ?? "-";
-};

package/packages/KlineConfig/index.ts

@@ -1,8 +0,0 @@
-import { App } from "vue";
-import StKlineConfig from "./index.vue";
-
-export default {
-  install(app: App) {
-    app.component("st-klineConfig", StKlineConfig);
-  },
-}

package/packages/KlineConfig/index.vue

@@ -1,356 +0,0 @@
-<!-- 用户K线自定义配置 -->
-<script setup>
-import { ref, reactive, onMounted, inject, watch } from "vue";
-import { getDefaultUserKlineConfig, sellBuyOptions, formatLabel } from "./config";
-
-const { request } = inject("stConfig"); // 组件库全局配置
-
-const emit = defineEmits("callBack");
-const props = defineProps({
-  indicatorStore: { type: Object, default: () => ({}) }, // 指标配置Store
-  origin: { type: String, default: "server" }, // 数据来源: server服务器, local本地
-  // 如果server此项不用管, 如果local则使用此项
-  cycleOptions: { type: Array, default: () => [] },
-});
-
-const visible = ref(false);
-const form = reactive({});
-
-const cycleOptions = ref([]);
-const mainIndicatorOptions = ref([]);
-
-// 配置: 恢复默认
-const handleReset = () => {
-  Object.assign(form, getDefaultUserKlineConfig());
-};
-// 配置: 保存配置
-const handleSubmit = async () => {
-  const json = JSON.stringify(form);
-  if (props.origin === "server") {
-    await request.post("/common/qt/updateUserConfig", { appId: 1, json });
-  } else {
-    localStorage.setItem("userKlineConfig", json);
-  }
-  emit("callBack", json);
-  visible.value = false;
-};
-// 获取配置数据
-const getKlineConfig = async () => {
-  if (props.origin === "server") {
-    const { body } = await request.post("/common/qt/getUserConfig", { appId: 1 });
-    Object.assign(form, getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});
-  } else {
-    const body = localStorage.getItem("userKlineConfig");
-    Object.assign(form, getDefaultUserKlineConfig(), body ? JSON.parse(body) : {});
-  }
-};
-// 获取周期选项
-const getCycleOptions = async () => {
-  if (props.origin === "server") {
-    const { body } = await request.post("/common/qt/getDict", { dictIds: [1002] });
-    cycleOptions.value = body[1002].map((item) => {
-      return {
-        label: item.dictName,
-        value: item.dictCode,
-      };
-    });
-  } else {
-    cycleOptions.value = props.cycleOptions;
-  }
-};
-
-onMounted(() => {
-  getCycleOptions();
-  mainIndicatorOptions.value = props.indicatorStore.mainIndicatorList ?? [];
-});
-watch(
-  () => props.indicatorStore.mainIndicatorList,
-  () => {
-    mainIndicatorOptions.value = props.indicatorStore.mainIndicatorList ?? [];
-  },
-);
-defineExpose({
-  // 打开
-  open: async () => {
-    await getKlineConfig();
-    visible.value = true;
-  },
-  // 获取默认配置
-  getDefaultUserKlineConfig,
-});
-</script>
-
-<template>
-  <div class="kline-config element-dark">
-    <!-- 自定义配置 -->
-    <el-drawer
-      v-model="visible"
-      title="K线自定义配置"
-      :size="320"
-    >
-      <el-scrollbar class="setting-main">
-        <!-- 偏好设置 -->
-        <el-divider style="margin-top: 8px">偏好设置</el-divider>
-        <div class="setting-item">
-          <span class="label">主图指标: </span>
-          <el-select
-            v-model="form.mainIndicator"
-            popper-class="element-dark"
-          >
-            <el-option
-              v-for="(item, index) in mainIndicatorOptions"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="setting-item">
-          <span class="label">交易点位: </span>
-          <el-select
-            v-model="form.sellBuy"
-            popper-class="element-dark"
-          >
-            <el-option
-              v-for="(item, index) in sellBuyOptions"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="setting-item">
-          <span class="label">开平点按价格标: </span>
-          <el-checkbox
-            v-model="form.sellBuyByPrice"
-            :true-value="1"
-            :false-value="0"
-          />
-        </div>
-        <div class="setting-item">
-          <span class="label">单周期: </span>
-          <el-select
-            v-model="form.singelCycle"
-            popper-class="element-dark"
-          >
-            <el-option
-              v-for="(item, index) in cycleOptions"
-              :key="index"
-              :label="item.label"
-              :value="item.value"
-            />
-          </el-select>
-        </div>
-        <div class="setting-item">
-          <span class="label">多周期: </span>
-          <el-segmented
-            size="small"
-            v-model="form.multiCycleNum"
-            :options="[
-              { label: '二图', value: 2 },
-              { label: '四图', value: 4 },
-              { label: '六图', value: 6 },
-            ]"
-            style="height: 26px"
-          />
-        </div>
-        <div :class="`setting-multi-box grid-${form.multiCycleNum}`">
-          <template v-for="(item, index) in form.multiCycleList.slice(0, form.multiCycleNum)">
-            <div class="mode">
-              <div class="cycleName">
-                <span>{{ formatLabel(form.multiCycleList[index], cycleOptions) }}</span>
-                <el-select
-                  v-model="form.multiCycleList[index]"
-                  popper-class="element-dark"
-                >
-                  <el-option
-                    v-for="(item, index) in cycleOptions"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value"
-                  />
-                </el-select>
-              </div>
-              <span class="content">{{ index + 1 }}号位K线</span>
-            </div>
-          </template>
-        </div>
-        <div class="setting-item">
-          <span class="label">默认展示: </span>
-          <el-segmented
-            size="small"
-            v-model="form.pageType"
-            :options="[
-              { label: '单周期', value: 1 },
-              { label: '多周期', value: 2 },
-            ]"
-            style="height: 26px"
-          />
-        </div>
-        <!-- 功能配置 -->
-        <el-divider style="margin-top: 44px">功能配置</el-divider>
-        <div class="setting-item">
-          <span class="label">高亮交易范围: </span>
-          <el-switch v-model="form.enable_tradeLogBrush" />
-        </div>
-        <div class="setting-item">
-          <span class="label">展示当屏时间: </span>
-          <el-switch v-model="form.enable_showScreenTimeRange" />
-        </div>
-        <div class="setting-item">
-          <span class="label">展示当屏最高价: </span>
-          <el-switch v-model="form.enable_showScreenMaxPrice" />
-        </div>
-        <div class="setting-item">
-          <span class="label">多周期双击图表切换至单周期: </span>
-          <el-switch v-model="form.enable_dbClickOpenSingel" />
-        </div>
-        <!-- 组件开关 -->
-        <el-divider style="margin-top: 44px">组件开关</el-divider>
-        <div class="setting-item">
-          <span class="label">开启副图: </span>
-          <el-switch v-model="form.enable_subChart" />
-        </div>
-        <div class="setting-item">
-          <span class="label">开启拖拽轴: </span>
-          <el-switch v-model="form.enable_sliderChart" />
-        </div>
-      </el-scrollbar>
-      <div class="setting-footer">
-        <!-- 恢复默认 -->
-        <el-button @click="handleReset"> 恢复默认 </el-button>
-        <el-button
-          type="primary"
-          @click="handleSubmit"
-        >
-          保存配置
-        </el-button>
-      </div>
-    </el-drawer>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.kline-config {
-  cursor: default;
-  height: 20px;
-  :deep(.el-drawer__header) {
-    margin-bottom: 0;
-    background-color: #141414;
-  }
-  :deep(.el-drawer__body) {
-    background-color: #141414;
-  }
-  // 配置入口
-  .setting-icon {
-    cursor: pointer;
-    &:hover {
-      color: var(--el-color-primary);
-    }
-  }
-  // 配置内容
-  .setting-main {
-    font-size: 14px;
-    color: var(--el-text-color-primary);
-    height: calc(100% - 80px);
-    box-sizing: border-box;
-    padding-right: 10px;
-    // 单行控制项
-    .setting-item {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 8px;
-      .label {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-      }
-      .el-select {
-        width: 130px;
-      }
-    }
-    // 多周期布局
-    .setting-multi-box {
-      margin-top: 13px;
-      margin-bottom: 18px;
-      .cycleName {
-        color: white;
-        font-size: 10px;
-        padding: 1px 2px;
-        padding-left: 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: 12px;
-          .el-select__icon {
-            margin-left: 0;
-            color: black;
-            width: 12px;
-            height: 12px;
-          }
-          .el-select__wrapper {
-            border-radius: 50%;
-            background: #ccc;
-            padding: 0;
-            gap: 0;
-            min-height: 12px;
-            line-height: 12px;
-            box-shadow: none;
-          }
-          .el-select__input {
-            min-width: 0 !important;
-            width: 0 !important;
-          }
-        }
-      }
-      .mode {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid var(--el-border-color);
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .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;
-    }
-  }
-  // 底部按钮
-  .setting-footer {
-    height: 80px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .el-button {
-      margin-left: 0;
-    }
-  }
-}
-</style>