st-comp 0.0.174 → 0.0.176

package/package.json

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

package/packages/KlineConfig/config.js

@@ -27,6 +27,7 @@ export const getDefaultUserKlineConfig = () => {
      */
     enable_tradeLogBrush: true, // 高亮交易范围
     enable_showScreenTimeRange: true, // 展示当屏时间范围
+    enable_showScreenMaxPrice: true, // 展示当屏最高价
     enable_dbClickOpenSingel: true, // 多周期双击图表切换至单周期
     
     /**

package/packages/KlineConfig/index.vue

@@ -183,6 +183,10 @@ defineExpose({
           <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" />

package/packages/KlinePlus/index.vue

@@ -4,16 +4,7 @@ import dayjs from "dayjs";
 import * as echarts from "echarts";
 import { stMath, debounce, addResizeListener } from "st-func";
 import { ref, watch, computed, onMounted, onUnmounted, inject } from "vue";
-import {
-  loadKlineConfig,
-  checkTimeInterval,
-  getSubOptions,
-  mergeklineData,
-  handleMarkPointTradeLog,
-  handleNetPositionLine,
-  handleTradeIncomeRateLine,
-  normalizeToKlineTimeByMatch,
-} from "./utils.js";
+import { loadKlineConfig, checkTimeInterval, getSubOptions, mergeklineData, handleMarkPointTradeLog, handleNetPositionLine, handleTradeIncomeRateLine, normalizeToKlineTimeByMatch } from "./utils.js";
 import Tips from "./components/Tips.vue";
 import SliderChart from "./components/SliderChart.vue";
 
@@ -145,6 +136,7 @@ const initChart = () => {
       // 当前结束索引 > 阈值边界, 触发加载更多数据
       if (isLoadNew === false && isloadAllNew === false && endValue > klineData.value.time.length - loadCheckCount) await getMoreData("new");
       getScreenTimeRange();
+      drawScreenMaxPrice();
     })
   );
   mainChartIns.on("globalout", () => {
@@ -317,7 +309,8 @@ const getScreenTimeRange = () => {
     screenTimeRange.value = [startTime, endTime];
   }
 };
-// 图表: 绘制
+
+// 图表: 绘制(主流程)
 const draw = (params = { startValue: 0, endValue: 0 }) => {
   initChart();
   const { maxValueSpan } = loadKlineConfig;
@@ -509,8 +502,10 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         },
       ],
       series: [
+        // K线
         {
           type: "candlestick",
+          name: "kLine",
           data,
           markPoint: { data: [...tradePointData] },
           markLine: { data: [...tradeLineData] },
@@ -522,8 +517,6 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
             borderWidth: 1,
           },
         },
-        // 指标线
-        ...indicatorSeries,
         // 净值曲线
         {
           type: "line",
@@ -554,6 +547,8 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
             width: 2,
           },
         },
+        // 指标线
+        ...indicatorSeries,
       ],
       toolbox: {
         show: false,
@@ -582,6 +577,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
    */
   {
     getScreenTimeRange();
+    drawScreenMaxPrice();
     activeIndex.value = endValue;
   }
 
@@ -640,6 +636,71 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
     });
   }
 };
+// 图表: 绘制(当屏最高价)
+const drawScreenMaxPrice = () => {
+  const { data } = klineData.value;
+  const { startValue, endValue } = mainChartIns.getOption()?.dataZoom[0] ?? {};
+  let maxPrice = 0;
+  let maxPriceIndex = startValue;
+  for (let i = startValue; i <= endValue; i++) {
+    if (Number(data[i][3]) >= maxPrice) {
+      maxPrice = Number(data[i][3]);
+      maxPriceIndex = i;
+    }
+  }
+
+  const originOption = mainChartIns.getOption();
+  const filterSeries = originOption.series?.filter((item) => item.name !== "maxPrice") || [];
+  const dataLength = endValue - startValue;
+  const positionInView = (maxPriceIndex - startValue) / dataLength;
+  let position = "right";
+  let formatter = `←${maxPrice}`;
+  if (positionInView > 0.7) {
+    position = "left";
+    formatter = `${maxPrice}→`;
+  } else {
+    position = "right";
+    formatter = `←${maxPrice}`;
+  }
+  mainChartIns?.setOption(
+    {
+      ...originOption,
+      series: [
+        ...filterSeries,
+        {
+          type: "line",
+          name: "maxPrice",
+          markPoint: {
+            // 点位原本样式通过透明去进行隐藏, 从而仅展示文案
+            symbol: "circle",
+            symbolSize: 1,
+            itemStyle: {
+              color: "transparent",
+              borderColor: "transparent",
+            },
+            z: 100, // 设置较高的 z 值，确保在最上层
+            zlevel: 10, // 设置较高的 zlevel
+            label: {
+              show: true,
+              position,
+              formatter,
+              color: "#fff",
+              fontSize: 12,
+              padding: [4, -4],
+            },
+            data: [
+              {
+                name: "最高点",
+                coord: [maxPriceIndex, maxPrice],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    true
+  );
+};
 
 // 拖拽轴: 拖拽回调
 const handleSliderChange = (params) => {

package/packages/VarSelectDialog/index.vue

@@ -242,7 +242,9 @@ defineExpose({
             placement="top-start"
           >
             <template #content>
-              <span style="white-space: pre-line">{{ formatItem.tip }}</span>
+              <div style="max-width: 820px;">
+                <span style="white-space: pre-line">{{ formatItem.tip }}</span>
+              </div>
             </template>
             <el-icon><InfoFilled /></el-icon>
           </el-tooltip>

package/packages/VarietySearch/components/FactorScreen/index.vue

@@ -365,236 +365,239 @@ const open = () => {
         </div>
       </template>
       <!-- 模版模式 -->
-      <el-form
+      <el-scrollbar
         v-if="factorType === '模版'"
-        ref="dialogFormRef"
-        :model="dialogForm"
-        style="height: 400px"
+        height="400px"
       >
-        <!-- 因子筛选表格 -->
-        <div
-          v-for="(item, index) in dialogForm.list"
-          class="form-row"
+        <el-form
+          ref="dialogFormRef"
+          :model="dialogForm"
         >
-          <!-- 序列号 -->
-          <span class="index">{{ `条件${index + 1}` }}</span>
-          <!-- 对比因子: 分值因子 -->
-          <template v-if="item.key === 'compare'">
-            <!-- 周期 -->
-            <el-form-item
-              v-if="config.cycleShow"
-              :prop="'list.' + index + '.cycle'"
-              :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
-              style="width: 100px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.cycle"
-                placeholder="选择周期"
-                size="small"
-              >
-                <el-option
-                  v-for="{ label, value } in config.cycleOptions"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 因子 -->
-            <el-form-item
-              :prop="'list.' + index + '.factor'"
-              :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
-              style="width: 132px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.factor"
-                placeholder="选择因子"
-                filterable
-                size="small"
-                no-match-text="无匹配数据"
+          <!-- 因子筛选表格 -->
+          <div
+            v-for="(item, index) in dialogForm.list"
+            class="form-row"
+          >
+            <!-- 序列号 -->
+            <span class="index">{{ `条件${index + 1}` }}</span>
+            <!-- 对比因子: 分值因子 -->
+            <template v-if="item.key === 'compare'">
+              <!-- 周期 -->
+              <el-form-item
+                v-if="config.cycleShow"
+                :prop="'list.' + index + '.cycle'"
+                :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
+                style="width: 100px; margin-right: 10px"
               >
-                <el-option
-                  v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 对比符 -->
-            <el-form-item style="width: 52px; margin-right: 10px">
-              <el-select
-                v-model="item.compareType"
-                size="small"
+                <el-select
+                  v-model="item.cycle"
+                  placeholder="选择周期"
+                  size="small"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.cycleOptions"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 因子 -->
+              <el-form-item
+                :prop="'list.' + index + '.factor'"
+                :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
+                style="width: 132px; margin-right: 10px"
               >
-                <el-option
-                  v-for="item in ['>', '>=', '<', '<=']"
-                  :label="item"
-                  :value="item"
-                  :key="item"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 周期2 -->
-            <el-form-item
-              v-if="config.cycleShow"
-              :prop="'list.' + index + '.cycle2'"
-              :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
-              style="width: 100px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.cycle2"
-                placeholder="选择周期"
-                size="small"
+                <el-select
+                  v-model="item.factor"
+                  placeholder="选择因子"
+                  filterable
+                  size="small"
+                  no-match-text="无匹配数据"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 对比符 -->
+              <el-form-item style="width: 52px; margin-right: 10px">
+                <el-select
+                  v-model="item.compareType"
+                  size="small"
+                >
+                  <el-option
+                    v-for="item in ['>', '>=', '<', '<=']"
+                    :label="item"
+                    :value="item"
+                    :key="item"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 周期2 -->
+              <el-form-item
+                v-if="config.cycleShow"
+                :prop="'list.' + index + '.cycle2'"
+                :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
+                style="width: 100px; margin-right: 10px"
               >
-                <el-option
-                  v-for="{ label, value } in config.cycleOptions"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 因子2 -->
-            <el-form-item
-              :prop="'list.' + index + '.factor2'"
-              :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
-              style="width: 132px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.factor2"
-                placeholder="选择因子"
-                filterable
-                size="small"
-                no-match-text="无匹配数据"
+                <el-select
+                  v-model="item.cycle2"
+                  placeholder="选择周期"
+                  size="small"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.cycleOptions"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 因子2 -->
+              <el-form-item
+                :prop="'list.' + index + '.factor2'"
+                :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
+                style="width: 132px; margin-right: 10px"
               >
-                <el-option
-                  v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-          </template>
-          <!-- 常规因子: 机器打分, 人工打分因子 -->
-          <template v-else>
-            <!-- 周期 -->
-            <el-form-item
-              v-if="config.cycleShow"
-              :prop="'list.' + index + '.cycle'"
-              :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
-              style="width: 100px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.cycle"
-                placeholder="选择周期"
-                size="small"
+                <el-select
+                  v-model="item.factor2"
+                  placeholder="选择因子"
+                  filterable
+                  size="small"
+                  no-match-text="无匹配数据"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+            </template>
+            <!-- 常规因子: 机器打分, 人工打分因子 -->
+            <template v-else>
+              <!-- 周期 -->
+              <el-form-item
+                v-if="config.cycleShow"
+                :prop="'list.' + index + '.cycle'"
+                :rules="{ required: true, message: '周期不能为空', trigger: 'blur' }"
+                style="width: 100px; margin-right: 10px"
               >
-                <el-option
-                  v-for="{ label, value } in config.cycleOptions"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 因子 -->
-            <el-form-item
-              :prop="'list.' + index + '.factor'"
-              :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
-              style="width: 194px; margin-right: 10px"
-            >
-              <el-select
-                v-model="item.factor"
-                placeholder="选择因子"
-                filterable
-                size="small"
-                no-match-text="无匹配数据"
+                <el-select
+                  v-model="item.cycle"
+                  placeholder="选择周期"
+                  size="small"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.cycleOptions"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 因子 -->
+              <el-form-item
+                :prop="'list.' + index + '.factor'"
+                :rules="{ required: true, message: '因子不能为空', trigger: 'blur' }"
+                style="width: 194px; margin-right: 10px"
               >
-                <el-option
-                  v-for="{ label, value } in config.factorOptions?.filter((item) => [1, 3].includes(item.type))"
-                  :label="label"
-                  :value="value"
-                  :key="value"
-                />
-              </el-select>
-            </el-form-item>
-            <!-- 分数 -->
-            <el-form-item
-              :prop="'list.' + index + '.score'"
-              :rules="{ validator: handleVerifyScore, trigger: 'blur' }"
-              style="width: 200px; margin-right: 10px"
-            >
-              <div style="display: flex; align-items: center; width: 100%; height: 24px">
-                <el-input-number
-                  v-model="item.score[0]"
+                <el-select
+                  v-model="item.factor"
+                  placeholder="选择因子"
+                  filterable
                   size="small"
-                  controls-position="right"
+                  no-match-text="无匹配数据"
+                >
+                  <el-option
+                    v-for="{ label, value } in config.factorOptions?.filter((item) => [1, 3].includes(item.type))"
+                    :label="label"
+                    :value="value"
+                    :key="value"
+                  />
+                </el-select>
+              </el-form-item>
+              <!-- 分数 -->
+              <el-form-item
+                :prop="'list.' + index + '.score'"
+                :rules="{ validator: handleVerifyScore, trigger: 'blur' }"
+                style="width: 200px; margin-right: 10px"
+              >
+                <div style="display: flex; align-items: center; width: 100%; height: 24px">
+                  <el-input-number
+                    v-model="item.score[0]"
+                    size="small"
+                    controls-position="right"
+                  />
+                  <span>~</span>
+                  <el-input-number
+                    v-model="item.score[1]"
+                    size="small"
+                    controls-position="right"
+                  />
+                </div>
+              </el-form-item>
+            </template>
+            <!-- 删除 -->
+            <el-icon @click="handleDeleteFactor(index)"><CircleCloseFilled /></el-icon>
+          </div>
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            :icon="Plus"
+            @click="handleAppendFactor"
+            style="margin-bottom: 10px"
+            >添加因子</el-button
+          >
+          <el-button
+            type="primary"
+            plain
+            size="small"
+            :icon="Plus"
+            @click="handleAppendFactor('compare')"
+            style="margin-bottom: 10px"
+            >添加因子对比</el-button
+          >
+          <!-- SQL功能 -->
+          <template v-if="config.sqlShow">
+            <el-form-item label="SQL功能: ">
+              <el-radio-group v-model="dialogForm.sqlEnable">
+                <el-radio
+                  label="关闭"
+                  :value="0"
                 />
-                <span>~</span>
-                <el-input-number
-                  v-model="item.score[1]"
-                  size="small"
-                  controls-position="right"
+                <el-radio
+                  label="启用"
+                  :value="1"
                 />
-              </div>
+              </el-radio-group>
+              <el-button
+                v-if="dialogForm.sqlEnable"
+                type="primary"
+                size="small"
+                @click="handleGenerateSql"
+                style="margin-left: auto"
+                >生成SQL</el-button
+              >
             </el-form-item>
-          </template>
-          <!-- 删除 -->
-          <el-icon @click="handleDeleteFactor(index)"><CircleCloseFilled /></el-icon>
-        </div>
-        <el-button
-          type="primary"
-          plain
-          size="small"
-          :icon="Plus"
-          @click="handleAppendFactor"
-          style="margin-bottom: 10px"
-          >添加因子</el-button
-        >
-        <el-button
-          type="primary"
-          plain
-          size="small"
-          :icon="Plus"
-          @click="handleAppendFactor('compare')"
-          style="margin-bottom: 10px"
-          >添加因子对比</el-button
-        >
-        <!-- SQL功能 -->
-        <template v-if="config.sqlShow">
-          <el-form-item label="SQL功能: ">
-            <el-radio-group v-model="dialogForm.sqlEnable">
-              <el-radio
-                label="关闭"
-                :value="0"
+            <template v-if="dialogForm.sqlEnable">
+              <el-input
+                v-model="dialogForm.sqlValue"
+                :autosize="{ minRows: 4 }"
+                type="textarea"
+                style="margin-bottom: 10px"
               />
-              <el-radio
-                label="启用"
-                :value="1"
-              />
-            </el-radio-group>
-            <el-button
-              v-if="dialogForm.sqlEnable"
-              type="primary"
-              size="small"
-              @click="handleGenerateSql"
-              style="margin-left: auto"
-              >生成SQL</el-button
-            >
-          </el-form-item>
-          <template v-if="dialogForm.sqlEnable">
-            <el-input
-              v-model="dialogForm.sqlValue"
-              :autosize="{ minRows: 4 }"
-              type="textarea"
-              style="margin-bottom: 10px"
-            />
-            <span>&&代表and，||代表or</span>
+              <span>&&代表and，||代表or</span>
+            </template>
           </template>
-        </template>
-      </el-form>
+        </el-form>
+      </el-scrollbar>
       <!-- 脚本模式 -->
       <div
         style="width: 968px; height: 400px"