st-comp 0.0.172 → 0.0.174

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.172",
+  "version": "0.0.174",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,6 +19,7 @@
     "echarts": "^5.4.3",
     "element-plus": "^2.9.4",
     "interactjs": "^1.10.27",
+    "markdown-it": "^14.1.0",
     "monaco-editor": "0.47.0",
     "pinia": "^2.1.6",
     "st-func": "^0.0.59",

package/packages/KlinePlus/index.vue

@@ -12,7 +12,6 @@ import {
   handleMarkPointTradeLog,
   handleNetPositionLine,
   handleTradeIncomeRateLine,
-  handleMarkPointOffset,
   normalizeToKlineTimeByMatch,
 } from "./utils.js";
 import Tips from "./components/Tips.vue";
@@ -513,7 +512,7 @@ const draw = (params = { startValue: 0, endValue: 0 }) => {
         {
           type: "candlestick",
           data,
-          markPoint: { data: handleMarkPointOffset([...tradePointData]) },
+          markPoint: { data: [...tradePointData] },
           markLine: { data: [...tradeLineData] },
           itemStyle: {
             color: "transparent",

package/packages/KlinePlus/utils.js

@@ -489,28 +489,6 @@ export const normalizeToKlineTimeByMatch = (klineTimeArray, timeRange, cycle) =>
   return [klineStart, klineEnd];
 };
 
-// 统一处理markPoint标记点的偏移量
-export const handleMarkPointOffset = (markPointData) => {
-  const data = [];
-  markPointData.reduce((result, item) => {
-    // 1. 找到当前标记的位置
-    const key = `${item.coord[0]}+${item.label.position}`;
-    const baseOffset = item.label.position === "top" ? -16 : 16;
-    // 2. 找到先前处于相同位置 [key] 标记的数量
-    const sameNum = result.get(key);
-    if (sameNum) {
-      result.set(key, sameNum + 1);
-      item.symbolOffset[1] = baseOffset * (sameNum + 1);
-    } else {
-      result.set(key, 1);
-      item.symbolOffset[1] = item.label.position === "top" ? -7 : 7;
-    }
-    data.push(item);
-    return result;
-  }, new Map());
-  return data;
-};
-
 // 生成图表配置所需数据: 成交点位, 成交点位连线
 export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray, klineDataArray) => {
   // 获取交易类型
@@ -588,8 +566,7 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
       // 2.图标位置 [开在K线上方,平在K线下方]
       const position = ["开多", "开空"].includes(tradeType) ? "top" : "bottom";
       // 3.获取对应Y轴值
-      const klineIndex = binarySearch(klineTimeAry, next.klineTime);
-      const yAxisValue = position === "top" ? klineDataAry[klineIndex]?.[3] : klineDataAry[klineIndex]?.[2];
+      const yAxisValue = position === "top" ? (next.openPriceAll / next.amount)?.toFixed(2) : (next.closePriceAll / next.amount)?.toFixed(2);
       // 4.将Y轴值存到连线的数据中, 提供给连线配置使用
       baseLineData.forEach((item) => {
         const rangeTime = position === "top" ? item.range[0] : item.range[1];
@@ -624,50 +601,45 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
   };
   // 交易点: 生成基础点位, 连线数据
   const handleTradePointLineData = (tradeLog, cycle, klineTimeArray) => {
-    /**
-     * @description: 点位, 连线
-     * 1.生成点位, 连线基础数据
-     * 2.点位处理: 合并同一根K线上的数据, 整体按照时间排序
-     * 3.连线处理: 过滤相同范围的连线
-     */
+    // 1. 生成基础数据 { 点位数据, 连线数据 }
     const { basePointData, baseLineData } = tradeLog.reduce(
       (result, item) => {
-        // 开仓点位的数据
+        // 开仓点
         const startPoint = {
-          pointTime: item.openTime, // 交易点位的真实时间
-          klineTime: normalizeToKlineTime(klineTimeArray, item.openTime, cycle), // 交易点位的K线时间
-
+          pointTime: item.openTime, // 交易时间
           tradeAction: "开", // 交易行为
           tradeDirection: item.tradeDirection ? "空" : "多", // 交易方向 1:空, 0:多
           tradeType: `开${item.tradeDirection ? "空" : "多"}`,
-
           part: null, // 份数,
           amount: item.tradeVolume, // 手数
           profitAndLoss: item.profitAndLoss, // 盈亏
-          openPriceAll: item.openPrice * item.tradeVolume, // 开仓价格
-          closePriceAll: item.closePrice * item.tradeVolume, // 平仓价格
+          openPriceAll: item.openPrice * item.tradeVolume, // 开仓总价
+          closePriceAll: item.closePrice * item.tradeVolume, // 平仓总价
+
+          klineTime: normalizeToKlineTime(klineTimeArray, item.openTime, cycle), // K线时间
         };
-        // 平仓点位的数据
+        // 平仓点
         const endPoint = {
-          pointTime: item.closeTime, // 交易点位的真实时间
-          klineTime: normalizeToKlineTime(klineTimeArray, item.closeTime, cycle), // 交易点位的K线时间
-
+          pointTime: item.closeTime, // 交易时间
           tradeAction: "平", // 交易行为
           tradeDirection: item.tradeDirection ? "空" : "多", // 交易方向 1:空, 0:多
           tradeType: `平${item.tradeDirection ? "空" : "多"}`,
-
           part: null, // 份数,
           amount: item.tradeVolume, // 手数
           profitAndLoss: item.profitAndLoss, // 盈亏
-          openPriceAll: item.openPrice * item.tradeVolume, // 开仓价格
-          closePriceAll: item.closePrice * item.tradeVolume, // 平仓价格
+          openPriceAll: item.openPrice * item.tradeVolume, // 开仓总价
+          closePriceAll: item.closePrice * item.tradeVolume, // 平仓总价
+
+          klineTime: normalizeToKlineTime(klineTimeArray, item.closeTime, cycle), // K线时间
         };
-        result.basePointData.push(startPoint, endPoint);
-        result.baseLineData.push({
+        // 连线
+        const line = {
           range: [startPoint.klineTime, endPoint.klineTime],
           rangeValue: [null, null],
           color: endPoint.profitAndLoss > 0 ? "#FF0000" : "#389e0d",
-        });
+        };
+        result.basePointData.push(startPoint, endPoint);
+        result.baseLineData.push(line);
         return result;
       },
       {
@@ -675,12 +647,12 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
         baseLineData: [], // 连线数据
       }
     );
+    // 2. 合并同一根K线上的数据, 整体按照时间排序
     const basePointDataMergeMap = basePointData.reduce((result, item) => {
       const newItem = JSON.parse(JSON.stringify(item));
+      // 判断这个节点是否已存在数据, 若存在说明重复, 进行数据合并
       const key = newItem.klineTime + newItem.tradeType;
-      // 判断这个节点是否已存在数据
       if (result.has(key)) {
-        // 已存在,说明节点重复,进行数据合并
         const oldItem = result.get(key);
         newItem.amount += oldItem.amount;
         newItem.part += oldItem.part;
@@ -692,6 +664,7 @@ export const handleMarkPointTradeLog = (tradeLog, cycle, sellBuy, klineTimeArray
       return result;
     }, new Map([]));
     const pointData = [...basePointDataMergeMap.values()].sort((a, b) => new Date(a.klineTime) - new Date(b.klineTime));
+    // 3. 过滤掉开始和结束都在一根K线上的连线
     const lineData = baseLineData.filter(({ range }) => range[0] !== range[1]);
     return { pointData, lineData };
   };

package/packages/VarSelectDialog/index.vue

@@ -239,9 +239,11 @@ defineExpose({
           <!-- Tip示例 -->
           <el-tooltip
             effect="dark"
-            :content="formatItem.tip"
             placement="top-start"
           >
+            <template #content>
+              <span style="white-space: pre-line">{{ formatItem.tip }}</span>
+            </template>
             <el-icon><InfoFilled /></el-icon>
           </el-tooltip>
         </div>

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

@@ -1,37 +1,71 @@
 <!-- 因子说明 -->
 <script setup name="FactorDescription">
+import { ref, onMounted, inject } from "vue";
+import MarkdownIt from "markdown-it";
+
+const { env } = inject("stConfig"); // 组件库全局配置
+
+// 选股变量说明文档
+const md = new MarkdownIt();
+const markdownContent = ref("");
+
 const props = defineProps({
+  factorType: { type: String, default: "模版" },
   data: { type: Array, default: [] },
 });
 const visible = defineModel("visible", { default: false });
+
+onMounted(async () => {
+  let res = "";
+  if (env.MODE === "production") {
+    res = await fetch("//47.99.165.133/factor_select.md");
+  } else {
+    res = await fetch("//192.168.12.38/factor_select.md");
+  }
+  const markdownText = await res.text();
+  markdownContent.value = md.render(markdownText);
+});
 </script>
 
 <template>
   <el-dialog
     v-model="visible"
-    title="因子使用说明"
+    :title="factorType === '模版' ? '因子说明' : '脚本编写说明'"
     width="1000"
     align-center
+    draggable
+    overflow
+    append-to-body
     destroy-on-close
   >
-    <el-table
-      :data="data"
-      border
-      height="500"
-    >
-      <el-table-column
-        prop="factorName"
-        label="因子名称"
-        width="200"
-      />
-      <el-table-column
-        prop="factorDesc"
-        label="因子说明"
-      />
-      <el-table-column
-        prop="factorScoreDefine"
-        label="分值定义"
-      />
-    </el-table>
+    <el-scrollbar height="500px">
+      <template v-if="factorType === '模版'">
+        <el-table
+          :data="data"
+          border
+          height="500"
+        >
+          <el-table-column
+            prop="factorName"
+            label="因子名称"
+            width="200"
+          />
+          <el-table-column
+            prop="factorDesc"
+            label="因子说明"
+          />
+          <el-table-column
+            prop="factorScoreDefine"
+            label="分值定义"
+          />
+        </el-table>
+      </template>
+      <template v-if="factorType === '脚本'">
+        <div
+          class="markdown-body"
+          v-html="markdownContent"
+        />
+      </template>
+    </el-scrollbar>
   </el-dialog>
 </template>

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

@@ -1,10 +1,10 @@
 <!-- 因子筛选组件 -->
 <script setup name="FactorScreen">
 import { nextTick, ref, watch } from "vue";
-import { Plus, CircleCloseFilled, InfoFilled } from "@element-plus/icons-vue";
+import { Close, Plus, CircleCloseFilled, InfoFilled } from "@element-plus/icons-vue";
 import { handleVerifyScore, extractConditionDetails } from "./tools.js";
 import FactorDescription from "./FactorDescription.vue";
-import MonacoEditor from "../../../MonacoEditor/index.vue"
+import MonacoEditor from "../../../MonacoEditor/index.vue";
 
 const props = defineProps({
   config: {
@@ -49,14 +49,18 @@ const dialogForm = ref({
   // SQL语句
   sqlValue: null,
   // 脚本语句
-  factorSelectExpr: '',
+  factorSelectExpr: "",
 });
 
-watch(() => [factorType.value, visible.value], () => {
-  if (factorType.value === '模版' || visible.value === false) {
-    stVarSelectDialogRef.value.close();
-  }
-}, { deep: true })
+watch(
+  () => [factorType.value, visible.value],
+  () => {
+    if (factorType.value === "模版" || visible.value === false) {
+      stVarSelectDialogRef.value.close();
+    }
+  },
+  { deep: true }
+);
 
 // 打开
 const handleOpenDialog = () => {
@@ -73,15 +77,15 @@ const handleOpenDialog = () => {
   // 解决初次访问样式错乱问题
   nextTick(() => {
     if (factorSelectExpr) {
-      factorType.value = '脚本'
+      factorType.value = "脚本";
       monacoEditorRef.value.setValue(factorSelectExpr);
-    } else factorType.value = '模版';
+    } else factorType.value = "模版";
     monacoEditorRef.value.resize();
-  })
+  });
 };
 // 确定
 const handleSubmit = () => {
-  if (factorType.value === '模版') {
+  if (factorType.value === "模版") {
     dialogFormRef.value.validate((valid) => {
       const { list, sqlEnable, sqlValue } = dialogForm.value;
       if (!valid) return;
@@ -100,7 +104,7 @@ const handleSubmit = () => {
         list: JSON.parse(JSON.stringify(list)),
         sqlEnable,
         sqlValue,
-        factorSelectExpr: '',
+        factorSelectExpr: "",
       };
       visible.value = false;
     });
@@ -220,12 +224,18 @@ const handleDeleteTag = (aciton, index) => {
       break;
     }
     case "scriptTag": {
-      data.value = {
-        list: [],
-        sqlEnable: 0,
-        sqlValue: null,
-        factorSelectExpr: '',
-      };
+      ElMessageBox.confirm("是否确认删除因子筛选: 脚本模式", "删除操作", {
+        confirmButtonText: "确认",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        data.value = {
+          list: [],
+          sqlEnable: 0,
+          sqlValue: null,
+          factorSelectExpr: "",
+        };
+      });
       break;
     }
   }
@@ -233,10 +243,10 @@ const handleDeleteTag = (aciton, index) => {
 
 // 打开变量选择器
 const open = () => {
-  const zIndex = document.getElementsByClassName('factor-dialog')?.[0]?.style?.zIndex;
-  console.log(zIndex)
+  const zIndex = document.getElementsByClassName("factor-dialog")?.[0]?.style?.zIndex;
+  console.log(zIndex);
   stVarSelectDialogRef.value.open(monacoEditorRef.value, zIndex);
-}
+};
 </script>
 
 <template>
@@ -277,7 +287,7 @@ const open = () => {
         width="500"
         placement="bottom-start"
       >
-        <div style="white-space: pre-line;">
+        <div style="white-space: pre-line">
           {{ data.factorSelectExpr }}
         </div>
         <template #reference>
@@ -309,38 +319,49 @@ const open = () => {
       width="1000"
       align-center
       destroy-on-close
+      :show-close="false"
     >
       <template #header="{ titleId, titleClass }">
         <div class="custom-header">
-          <span
-            :id="titleId"
-            :class="titleClass"
-          >
-            因子筛选
-          </span>
-          <el-tooltip
-            effect="dark"
-            content="点击查看: 因子使用说明"
-            placement="right"
-          >
-            <el-icon @click="visibleDescriptions = true"><InfoFilled /></el-icon>
-          </el-tooltip>
-          <el-radio-group
-            v-model="factorType"
-            size="small"
-            style="margin-left: 12px;"
-          >
-            <el-radio-button label="模版" value="模版" />
-            <el-radio-button label="脚本" value="脚本" />
-          </el-radio-group>
-          <!-- 变量选择器 -->
-           <div style="flex: 1; text-align: right;" v-if="factorType === '脚本'">
+          <div class="left">
+            <span
+              :id="titleId"
+              :class="titleClass"
+            >
+              因子筛选
+            </span>
+            <el-tooltip
+              effect="dark"
+              content="点击查看: 因子使用说明"
+              placement="right"
+            >
+              <el-icon @click="visibleDescriptions = true"><InfoFilled /></el-icon>
+            </el-tooltip>
+            <el-radio-group
+              v-model="factorType"
+              size="small"
+            >
+              <el-radio-button
+                label="模版"
+                value="模版"
+              />
+              <el-radio-button
+                label="脚本"
+                value="脚本"
+              />
+            </el-radio-group>
+          </div>
+          <!-- 变量选择器 + 关闭 -->
+          <div class="right">
             <el-button
+              v-if="factorType === '脚本'"
               size="small"
               type="primary"
               @click="open"
-            >变量选择器</el-button>
-           </div>
+              >变量选择器</el-button
+            >
+            <el-icon @click="visible = false"><Close /></el-icon>
+          </div>
         </div>
       </template>
       <!-- 模版模式 -->
@@ -348,6 +369,7 @@ const open = () => {
         v-if="factorType === '模版'"
         ref="dialogFormRef"
         :model="dialogForm"
+        style="height: 400px"
       >
         <!-- 因子筛选表格 -->
         <div
@@ -576,11 +598,7 @@ const open = () => {
       <!-- 脚本模式 -->
       <div
         style="width: 968px; height: 400px"
-        :style="
-          factorType === '脚本' ?
-            null :
-            { position: 'fixed', top: '-400px', zIndex: -1 }
-          "
+        :style="factorType === '脚本' ? null : { position: 'fixed', top: '-400px', zIndex: -1 }"
       >
         <MonacoEditor
           ref="monacoEditorRef"
@@ -601,6 +619,7 @@ const open = () => {
   <!-- 因子说明: 机器打分, 人工打分因子 -->
   <FactorDescription
     v-model:visible="visibleDescriptions"
+    :factorType="factorType"
     :data="config.factorDescriptions?.filter((item) => [1, 3].includes(item.type))"
   />
   <!-- 变量选择器 -->
@@ -615,8 +634,14 @@ const open = () => {
   .custom-header {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    .left,
+    .right {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
     .el-icon {
-      margin-left: 4px;
       cursor: pointer;
     }
   }

package/src/pages/KlinePlus/index.vue

@@ -2,6 +2,20 @@
   <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"
@@ -43,6 +57,7 @@
 
 <script setup>
 import dayjs from "dayjs";
+import tradeLogMock from "./tradeLogMock";
 import { onMounted, ref, reactive, provide, inject, nextTick } from "vue";
 
 const { request } = inject("stConfig"); // 组件库全局配置
@@ -54,14 +69,15 @@ provide("userKlineConfig", userKlineConfig);
 
 const cycleOptions = [
   { label: "1m", value: "1" },
+  { label: "60m", value: "5" },
   { label: "1d", value: "6" },
   { label: "1mon", value: "8" },
 ];
 
-const varietyName = ref(null);
-const varietyCode = ref("000016");
-const varietyStock = ref(1); // 0: 期货, 1: 股票, 2: 期权
-const tradeLog = ref([]);
+const varietyName = ref("棉花");
+const varietyCode = ref("CF");
+const varietyStock = ref(0); // 0: 期货, 1: 股票, 2: 期权
+const tradeLog = ref(tradeLogMock);
 const netPositionData = ref([]);
 const cycle = ref("6");
 const sellBuy = ref(1);