st-comp 0.0.45 → 0.0.47

package/packages/KlineNew/components/KlineUtils/index.vue

@@ -0,0 +1,304 @@
+<template></template>
+
+<script setup lang="ts">
+import * as talib from 'talib.js'
+
+let isInit = false // 是否初始化
+let loading = true // 初始化loading
+let requestPromise: any[] = [] // 用于存储loading中的计算请求
+
+// 导出数据长度处理
+const sliceData = (data: any[], length: number) => {
+  return data.length > length ? data.slice(data.length - length) : data
+}
+
+defineExpose({
+  // 注册计算指标线方法
+  initTalib: async () => {
+    if (!isInit) {
+      // 未初始化
+      isInit = true
+      await talib.init('./talib.wasm')
+      loading = false
+      requestPromise.forEach(resolve => {
+        resolve()
+      })
+    } else if(loading) {
+      // 正在初始化
+      return new Promise((resolve) => {
+        requestPromise.push(resolve)
+      })
+    }
+  },
+  // 键盘事件处理
+  handleKeyDown: (e: any, params: any) => {
+    let { startValue, endValue, maxIndex } = params
+    if (e.code === 'ArrowLeft') {
+      // 左按键
+      if (startValue === 0) {
+        return
+      }
+      startValue = startValue - 1
+      endValue = endValue - 1
+    } else if (e.code === 'ArrowRight') {
+      // 右按键
+      if (endValue === maxIndex) {
+        return
+      }
+      startValue = startValue + 1
+      endValue = endValue + 1
+    } else if (e.code === 'ArrowUp') {
+      // 上按键-放大 最少保持5条数据
+      if(endValue - startValue < 5) {
+        return
+      }
+      const diff = Math.floor((endValue - startValue) / 2) + 1
+      startValue = startValue + diff
+      if (endValue - startValue < 5) {
+        startValue = endValue - 4
+      }
+    } else if (e.code === 'ArrowDown') {
+      // 下按键-缩小
+      const diff = Math.min(500, (endValue - startValue))
+      startValue = startValue - diff - 1
+    }
+    return({
+      startValue,
+      endValue
+    })
+  },
+  // 根据时间解析dataZoom
+  getDataZoomInfoByTime: (params: any) => {
+    const { showStartTime, showEndTime, xAxisData, maxShowDays } = params
+    let startValue = -1
+    let endValue = -1
+    let dayPerTime: any = {}
+    xAxisData.forEach((time: any, index: number) => {
+      const date = time.split(' ')[0]
+      dayPerTime[date] = dayPerTime[date] || 0
+      dayPerTime[date] += 1
+      if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
+        startValue = index
+      }
+      if (new Date(time) <= new Date(showEndTime)) {
+        endValue = index
+      }
+    })
+    return {
+      startValue,
+      endValue,
+      maxValueSpan: Math.max(...Object.values(dayPerTime)) * maxShowDays,
+    }
+  },
+  // 计算绘图数据（拖动轴使用）
+  formatDataBySlide: (formatDataParams: any) => {
+    const { originDrawData, addData, startTime, endTime, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config, timeRange } = formatDataParams
+    let drawData: any = {}
+    const { loadAddCount, preLoadCount } = config
+
+    const time: any[] = [] // 新增数据全部时间数据，用于计算指标线
+    const open: any[]  = [] // 新增数据全部开盘价，用于指标线计算
+    const close: any[]  = [] // 新增数据全部收盘价，用于指标线计算
+    const high: any[]  = [] // 新增数据全部最高价，用于指标线计算
+    const low: any[]  = [] // 新增数据全部最低价，用于指标线计算
+    let xAxisData: any[] = [] // 用于绘图的x轴时间数据
+    let candlestickData: any[] = [] // 用于绘图的k线图数据
+
+    const originData = addData.filter((item: any, index: number) => {
+      // 赋值
+      time.push(item[0])
+      open.push(item[1])
+      close.push(item[4])
+      high.push(item[2])
+      low.push(item[3])
+      xAxisData.push(item[0])
+      candlestickData.push([ item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4] ])
+      // 取范围中的数据
+      if (startTime && endTime) {
+        return new Date(startTime) <= new Date(item[0]) && new Date(item[0]) <= new Date(endTime)
+      } else if (endTime) {
+        return index >= addData.length - loadAddCount && new Date(timeRange[0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(timeRange[1])
+      } else if (startTime) {
+        return index >= preLoadCount && new Date(timeRange[0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(timeRange[1])
+      }
+      return false
+    })
+    xAxisData = sliceData(xAxisData, originData.length)
+    candlestickData = sliceData(candlestickData, originData.length)
+    // 指标线相关计算
+    const indicatorFormatData = { time, open, close, high, low, originData: addData }
+    const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config
+    const mainIndicatorData = mainIndicatorConfig.map((item: any) => ({
+      ...item,
+      data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData, {
+        time: [], open: [], close: [], high: [], low: [], originData: []
+      }) : [], xAxisData.length),
+    }))
+    const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config
+    const subIndicatorData = subIndicatorConfig.reduce((res: any[], item: any) => {
+      if (item.source === 'calculation') {
+        return [
+          ...res,
+          {
+            ...item,
+            data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [], xAxisData.length)
+          }
+        ]
+      }
+      return res
+    }, [])
+    // 根据不同情况处理数据
+    if (startTime && endTime) {
+      // 重新搜索
+      drawData = {
+        originData, // 原数据
+        xAxisData, // 时间数据
+        candlestickData, // k线数据
+        mainIndicatorData, // 主图指标线数据
+        subIndicatorData, // 副图数据
+      }
+    } else if (endTime) {
+      // 加载历史数据
+      drawData = {
+        originData: [...originData, ...originDrawData.originData], // 原数据
+        xAxisData: [...xAxisData, ...originDrawData.xAxisData], // 时间数据
+        candlestickData: [...candlestickData, ...originDrawData.candlestickData], // k线数据
+        mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...mainIndicatorData[index].data, ...item.data],
+          }
+        }), // 主图指标线数据
+        subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...subIndicatorData[index].data, ...item.data],
+          }
+        }), // 副图数据
+      }
+    } else if (startTime) {
+      // 加载新数据
+      drawData = {
+        originData: [...originDrawData.originData, ...originData], // 原数据
+        xAxisData: [...originDrawData.xAxisData, ...xAxisData], // 时间数据
+        candlestickData: [...originDrawData.candlestickData, ...candlestickData], // k线数据
+        mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...item.data, ...mainIndicatorData[index].data],
+          }
+        }), // 主图指标线数据
+        subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...item.data, ...subIndicatorData[index].data],
+          }
+        }), // 副图数据
+      }
+    }
+    // 添加一些字段，用于方便使用
+    drawData.length = drawData.xAxisData.length
+    drawData.startTime = drawData.xAxisData[0]
+    drawData.endTime = drawData.xAxisData[drawData.length - 1]
+    return drawData
+  },
+  // 计算绘图数据（根据长度使用）
+  formatDataByCount: (formatDataParams: any) => {
+    const { originDrawData, addData, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config } = formatDataParams
+    let drawData: any = {}
+    const { addCount, preLoadCount } = config
+
+    const time: any[] = [] // 新增数据全部时间数据，用于计算指标线
+    const open: any[]  = [] // 新增数据全部开盘价，用于指标线计算
+    const close: any[]  = [] // 新增数据全部收盘价，用于指标线计算
+    const high: any[]  = [] // 新增数据全部最高价，用于指标线计算
+    const low: any[]  = [] // 新增数据全部最低价，用于指标线计算
+    let xAxisData: any[] = [] // 用于绘图的x轴时间数据
+    let candlestickData: any[] = [] // 用于绘图的k线图数据
+
+    const originData = addData.filter((item: any, index: number) => {
+      // 赋值
+      time.push(item[0])
+      open.push(item[1])
+      close.push(item[4])
+      high.push(item[2])
+      low.push(item[3])
+      xAxisData.push(item[0])
+      candlestickData.push([ item[1], item[4], item[3], item[2], index === 0 ? 0 : addData[index - 1][4] ])
+      if (addData.length >= addCount + preLoadCount - 1) {
+        // 还有未加载数据
+        return index >= preLoadCount
+      } else {
+        // 全部剩余数据
+        return true
+      }
+    })
+    xAxisData = sliceData(xAxisData, originData.length)
+    candlestickData = sliceData(candlestickData, originData.length)
+    // 指标线相关计算
+    const indicatorFormatData = { time, open, close, high, low, originData: addData }
+    const mainIndicatorConfig = mainIndicatorList.find((item: any) => item.value === mainIndicator).config
+    const mainIndicatorData = mainIndicatorConfig.map((item: any) => ({
+      ...item,
+      data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData, {
+        time: [], open: [], close: [], high: [], low: [], originData: []
+      }) : [], xAxisData.length),
+    }))
+    let subIndicatorData = []
+    if (subIndicator && subIndicatorList) {
+      const subIndicatorConfig = subIndicatorList.find((item: any) => item.value === subIndicator).config
+      subIndicatorData = subIndicatorConfig.reduce((res: any[], item: any) => {
+        if (item.source === 'calculation') {
+          return [
+            ...res,
+            {
+              ...item,
+              data: sliceData(item.calculationFn ? item.calculationFn(talib, indicatorFormatData) : [], xAxisData.length)
+            }
+          ]
+        }
+        return res
+      }, [])
+    }
+    // 根据不同情况处理数据
+    if (originDrawData.length) {
+      // 加载历史数据
+      drawData = {
+        originData: [...originData, ...originDrawData.originData], // 原数据
+        xAxisData: [...xAxisData, ...originDrawData.xAxisData], // 时间数据
+        candlestickData: [...candlestickData, ...originDrawData.candlestickData], // k线数据
+        mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...mainIndicatorData[index].data, ...item.data],
+          }
+        }), // 主图指标线数据
+        subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
+          return {
+            ...item,
+            data: [...subIndicatorData[index].data, ...item.data],
+          }
+        }), // 副图数据
+      }
+    } else {
+      // 首屏数据
+      drawData = {
+        originData, // 原数据
+        xAxisData, // 时间数据
+        candlestickData, // k线数据
+        mainIndicatorData, // 主图指标线数据
+        subIndicatorData, // 副图数据
+      }
+    }
+    // 添加一些字段，用于方便使用
+    drawData.length = drawData.xAxisData.length
+    drawData.startTime = drawData.xAxisData[0]
+    drawData.endTime = drawData.xAxisData[drawData.length - 1]
+    return drawData
+  },
+  fn: () => {},
+})
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/KlineNew/index.ts

@@ -1,8 +1,14 @@
 import { App } from "vue";
-import StKlineNew from "./index.vue";
+import KlineUtils from "./components/KlineUtils/index.vue"
+import KlineTips from "./components/KlineTips/index.vue"
+import KlineSub from "./components/KlineSub/index.vue"
+import KlineSlide from "./components/KlineSlide/index.vue"
 
 export default {
   install(app: App) {
-    app.component("st-klineNew", StKlineNew);
+    app.component("st-klineUtils", KlineUtils);
+    app.component("st-klineSub", KlineSub);
+    app.component("st-klineTips", KlineTips);
+    app.component("st-klineSlide", KlineSlide);
   },
 }

package/src/pages/KlineNew/components/KlineAction/components/ContextMenu/index.vue

@@ -0,0 +1,91 @@
+<!-- 提供右键菜单的父级DOM组件 -->
+<template>
+  <div ref="contextmenuRef" class="contextmenu" @contextmenu="handleContextMenu" @mouseleave="handleMouseLeave">
+    <!-- 主DOM插槽 -->
+    <slot />
+    <!-- 自定义菜单插槽 -->
+    <div ref="menuRef" v-if="menuStyle.display !== 'none'" class="contextmenu-popover" :style="menuStyle">
+      <slot name="popover" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from "vue";
+// 自定义事件函数: 关闭悬浮菜单回调
+const emits = defineEmits(["closeMenuCallBack"]);
+// 组件Ref
+const contextmenuRef = ref();
+// 悬浮菜单Ref
+const menuRef = ref();
+// 悬浮菜单样式
+const menuStyle = ref({
+  display: "none", // 是否展示
+  top: "0px", // 位置:上边距
+  left: "0px", // 位置:左边距
+});
+
+// 打开悬浮菜单
+const handleContextMenu = (el) => {
+  // 1.阻止默认事件 + 冒泡
+  el.preventDefault();
+  el.stopPropagation();
+  // @todo: 解决: 右键菜单项,重复触发本函数导致菜单位置异常问题
+  if (menuStyle.value.display === "block") {
+    // 判断鼠标位置是否在悬浮菜单内,如果是,则return,否则继续执行在新的位置打开
+    const { offsetX, offsetY } = el; // 鼠标
+    const { offsetWidth, offsetHeight } = menuRef.value;
+    if (offsetX <= offsetWidth && offsetY <= offsetHeight) {
+      return;
+    }
+  }
+  contextmenuRef.value.click();
+  // 2.初始化展示悬浮菜单位置
+  menuStyle.value = {
+    display: "block",
+    top: `${el.offsetY}px`,
+    left: `${el.offsetX}px`,
+  };
+  // 3.计算悬浮菜单是否超出范围
+  nextTick(() => {
+    const { bottom, height, right, width } = menuRef.value.getBoundingClientRect();
+    if (bottom > window.innerHeight) {
+      // 高度超出
+      menuStyle.value = {
+        display: "block",
+        top: `${el.offsetY - height}px`,
+        left: `${el.offsetX}px`,
+      };
+    } else if (right > window.innerWidth) {
+      // 宽度超出
+      menuStyle.value = {
+        display: "block",
+        top: `${el.offsetY}px`,
+        left: `${el.offsetX - width}px`,
+      };
+    }
+  });
+  // 4.监听点击事件 -> 调用关闭悬浮菜单事件
+  document.addEventListener("click", handleMouseLeave);
+};
+
+// 关闭悬浮菜单
+const handleMouseLeave = () => {
+  menuStyle.value.display = "none";
+  emits("closeMenuCallBack");
+  document.removeEventListener("click", handleMouseLeave);
+};
+</script>
+
+<style lang="scss" scoped>
+.contextmenu {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  &-popover {
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+}
+</style>