st-comp 0.0.45 → 0.0.47

package/packages/KlineNew/index.vue

@@ -1,363 +0,0 @@
-<template>
-  <div
-    class="kline"
-    @mousemove="isSelect = true"
-    @mouseout="isSelect = false"
-  >
-    <div class="kline-mainTips">
-      <MainTips :drawData="drawData" :activeIndex="activeIndex"/>
-    </div>
-    <div class="kline-mainChart" ref="mainChartRef"></div>
-    <div class="kline-sub">
-      <KlineSub ref="klineSubRef" v-model="subIndicator" :drawData="drawData" :activeIndex="activeIndex" :subIndicatorList="subIndicatorList" />
-    </div>
-    <KlineSlide ref="slideChartRef" :data="slideData" @change="slideChange" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, watch, computed } from "vue"
-import * as echarts from 'echarts'
-import type { EChartsType } from 'echarts'
-import { getMainOption } from './option.js'
-import { getKlineDataApi, formatData, initTalib } from './utils.js'
-import dayjs from "dayjs"
-import MainTips from "./components/MainTips/index.vue"
-import klineConfig from './klineConfig.js'
-import KlineSlide from "./components/KlineSlide/index.vue"
-import KlineSub from "./components/KlineSub/index.vue"
-
-const props = defineProps({
-  code: { type: String, required: true }, // 品种代码
-  freqId: { type: String, required: true }, // 周期
-  freqDict: { type: Object, required: true }, // 周期字典
-  mainIndicator: { type: String, required: true }, // 主图指标
-  mainIndicatorList: { type: Array, required: true }, // 主图指标列表
-  subIndicatorList: { type: Array, required: true }, // 副图指标列表
-  config: { type: Object, default: () => ({}) }, // 配置
-})
-
-const defaultconfig = {
-  defaultShowDays: 50, // 默认展示天数，会根据不同周期进行赋值
-  preLoadDays: 50, // 预加载天数，会分局不同周期进行赋值
-  maxShowDays: 500, // 最大展示天数，会分局不同周期进行赋值
-  defaultShowYears: 10, // 默认展示多少年数据
-  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
-  loadCheckCount: 500, // 加载数据检查条数
-  loadAddCount: 2000, // 加载数据条数
-}
-let mainChart: EChartsType
-let mainDataZoomTimer: any = null // 主图数据缩放定时器
-let isLoadHistory: boolean = false // 是否正在加载历史数据
-let isloadAllHistory: boolean = false // 是否加载完全部历史数据
-let isLoadNew: boolean = false // 是否正在加载新数据
-let isloadAllNew: boolean = false // 是否加载完全部新数据
-let resizeRo: any // dom元素监听事件
-let highlightTimer: any = null // 高亮处理事件的定时器
-
-const mainChartRef = ref<HTMLElement>() // 主图
-const klineSubRef = ref<HTMLElement>() // 副图
-const slideChartRef = ref<HTMLElement>() // 拖动轴
-const isSelect = ref(false) // 是否选中，选中可通过键盘按键操作
-const drawData = ref({
-  originData: [], // 原数据
-  xAxisData: [], // 时间数据
-  candlestickData: [], // k线数据
-  mainIndicatorData: [], // 主图指标线数据
-  subIndicatorData: [], // 副图数据
-  length: 0, // 数据长度
-  startTime: '', // 开始时间
-  endTime: '', // 结束时间
-}) // 绘图数据
-const slideData = ref([])
-const activeIndex = ref(0) // 显示的index
-const subIndicator = ref('VOL') // 副图指标
-
-const config = computed(() => {
-  const freqName = props.freqDict.find((item: any) => item.value === props.freqId).label
-  return {
-    ...defaultconfig,
-    ...klineConfig.freqConfig[freqName],
-    ...props.config,
-  }
-})
-
-watch(
-  () => [props.code, props.freqId, props.mainIndicator, subIndicator],
-  () => {
-    slideChartRef.value?.reset()
-  },
-  { deep: true }
-)
-
-onMounted(async () => {
-  // 初始化指标计算方法
-  await initTalib()
-  mainChart = echarts.init(mainChartRef.value)
-  klineSubRef.value.connect(mainChart)
-  addEventListener()
-  initChart()
-  // 绑定resize事件
-  let isFirst: boolean | null = true
-  resizeRo = new ResizeObserver(() => {
-    if (isFirst) {
-      isFirst = null
-      return
-    }
-    mainChart.resize()
-  })
-  resizeRo.observe(mainChartRef.value)
-  window.addEventListener('keydown', keyDownEvent)
-})
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', keyDownEvent)
-  mainChart.dispose()
-  resizeRo.disconnect()
-  resizeRo = null
-})
-
-// 项目初始化
-const initChart = async () => {
-  // 配置初始化
-  isLoadHistory = false
-  isloadAllHistory = false
-  isLoadNew = false
-  isloadAllNew = false
-  const { defaultShowYears } = config.value
-  // 请求滚动条数据
-  await getKlineData({
-    queryType: '0',
-    startTime: `${dayjs().subtract(defaultShowYears, 'year').format("YYYY-MM-DD")} 00:00:00`,
-    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    cycle: '6',
-  })
-}
-
-// 绑定事件
-const addEventListener = () => {
-  mainChart.on('datazoom', (params: any) => {
-    clearTimeout(mainDataZoomTimer)
-    mainDataZoomTimer = setTimeout(() => {
-      const { loadCheckCount, loadAddCount, preLoadCount } = config.value
-      let startIndex = 0
-      let endIndex = 0
-      if (params.batch) {
-        const { start, end } = params.batch[0]
-        startIndex = Math.floor(start * drawData.value.length / 100)
-        endIndex = end === 100 ? drawData.value.length - 1 : Math.floor(end * drawData.value.length / 100)
-      } else {
-        startIndex = params.startValue
-        endIndex = params.endValue
-      }
-      // 加载数据
-      if (startIndex < loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
-        // 左侧数据小于1000条，加载左侧数据
-        isLoadHistory = true
-        getMoreData({
-          queryType: '1',
-          endTime: drawData.value.startTime,
-          cycle: props.freqId,
-          limit: loadAddCount + preLoadCount,
-        })
-      }
-      if (endIndex > drawData.value.length - loadCheckCount && isLoadNew === false && isloadAllNew === false) {
-        // 右侧数据小于1000条，加载右侧数据
-        isLoadNew = true
-        getMoreData({
-          queryType: '2',
-          startTime: drawData.value.endTime,
-          cycle: props.freqId,
-          limit: loadAddCount,
-          preLimit: preLoadCount, // 向前多查询数量
-        })
-      }
-      // 重置滚动条
-      const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
-      const klineDataTime = (mainChart.getOption().xAxis as any)[0].data
-      const startTime = (klineDataTime[startValue] as string).split(' ')[0]
-      const endTime = (klineDataTime[endValue] as string).split(' ')[0]
-      slideChartRef.value.resetSlide(startTime, endTime)
-      clearTimeout(mainDataZoomTimer)
-    }, 100)
-  })
-  // 高亮事件
-  mainChart.on('highlight', (data: any) => {
-    let index = data.dataIndex || -1
-    if (data.batch ) {
-      index = typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
-    }
-    clearTimeout(highlightTimer)
-    highlightTimer = setTimeout(() => {
-        activeIndex.value = index
-      clearTimeout(highlightTimer)
-    }, 20)
-  })
-  // 移出图表事件
-  mainChart.on('globalout', () => {
-    const index = mainChart.getOption().dataZoom[0].endValue
-    activeIndex.value = index
-  })
-}
-
-// 键盘事件 
-const keyDownEvent = e => {
-  // 只有选中或者按ctrl才激活按键
-  if (!(e.ctrlKey || isSelect.value)) return
-  const option = mainChart.getOption()
-  let { startValue, endValue } = (option.dataZoom as any)[0]
-  if (e.code === 'ArrowLeft') {
-    // 左按键
-    if (startValue === 0) {
-      return
-    }
-    startValue = startValue - 1
-    endValue = endValue - 1
-    mainChart.dispatchAction({
-      type: 'highlight',
-      dataIndex: endValue,
-    })
-  } else if (e.code === 'ArrowRight') {
-    // 右按键
-    if (endValue === (option.xAxis as any)[0].data.length - 1) {
-      return
-    }
-    startValue = startValue + 1
-    endValue = endValue + 1
-    mainChart.dispatchAction({
-      type: 'highlight',
-      dataIndex: endValue,
-    })
-  } 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
-  }
-  mainChart.dispatchAction({
-    type: 'dataZoom',
-    startValue,
-    endValue
-  })
-}
-
-// 拖动轴发生变化
-const slideChange = async({ startTime, showStartTime, endTime, showEndTime }) => {
-  const { preLoadCount } = config.value
-  await getKlineData({
-    queryType: '0',
-    startTime,
-    endTime,
-    preLimit: preLoadCount, // 向前多查询数量
-    cycle: props.freqId,
-  })
-  draw('main', { showStartTime, showEndTime })
-  draw('sub', { showStartTime, showEndTime })
-}
-
-// 获取更多数据
-const getMoreData = async(params: any) => {
-  const { preLoadCount } = config.value
-  const res = await getKlineData(params)
-  const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
-  const klineDataTime = (mainChart.getOption().xAxis as any)[0].data
-  const showStartTime = klineDataTime[startValue]
-  const showEndTime = klineDataTime[endValue]
-  if (params.queryType === '1') {
-    // 加载历史数据
-    if (new Date(slideData.value[0][0]) > new Date(res[0][0])) {
-      // 表示历史数据已加载完
-      isloadAllHistory = true
-    }
-    isLoadHistory = false
-  } else {
-    // 加载新数据
-    if (res.length < 1 + preLoadCount) {
-      // 表示已经加载完全部新数据
-      isloadAllNew = true
-      isLoadNew = false
-      return
-    }
-    isLoadNew = false
-  }
-  draw('main', { showStartTime, showEndTime })
-  draw('sub', { showStartTime, showEndTime })
-}
-
-// 获取k线数据
-const getKlineData = async(params: any) => {
-  const apiParams = {
-    contractType: 0, // 合约类型 0-主连 1-加权
-    variety: props.code, // 品种
-    right: 1, // 0-不复权 1-前复权 2-后复权
-    ...params,
-  }
-  const res = await getKlineDataApi(apiParams)
-  if (slideData.value.length === 0) {
-    slideData.value = res.map(i => [i[0], i[4]])
-    return res
-  }
-  drawData.value = formatData({
-    originDrawData: drawData.value,
-    addData: res,
-    params: apiParams,
-    mainIndicator: props.mainIndicator,
-    mainIndicatorList: props.mainIndicatorList,
-    subIndicator: subIndicator.value,
-    subIndicatorList: props.subIndicatorList,
-    config: config.value,
-    slideData: slideData.value,
-  })
-  return res
-}
-
-// 绘制函数
-const draw = (type: string, params: any = {}) => {
-  const { showStartTime, showEndTime } = params
-  const { maxShowDays } = config.value
-  const { subIndicatorList } = props
-  const callBackMap = new Map([
-    [ "main", () => {
-      mainChart.setOption(getMainOption({ showStartTime, showEndTime, drawData: drawData.value, maxShowDays }), true)
-    }],
-    [ "sub", () => {
-      klineSubRef.value.draw({ showStartTime, showEndTime, drawData: drawData.value , subIndicator: subIndicator.value, subIndicatorList, maxShowDays })
-    }],
-  ]);
-  const callBack = callBackMap.get(type);
-  if (callBack instanceof Function) {
-    callBack();
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.kline {
-  width: 100%;
-  height: 100%;
-  background: #000;
-  &-mainTips {
-    height: 26px;
-  }
-  &-mainChart {
-    width: 100%;
-    height: calc(65% - 26px);
-  }
-  &-subTips {
-    height: 16px;
-  }
-  &-sub {
-    width: 100%;
-    height: calc(35% - 50px - 16px);
-  }
-}
-</style>

package/packages/KlineNew/klineConfig.ts

@@ -1,44 +0,0 @@
-export default {
-  freqConfig: {
-    '1m': {
-      defaultShowDays: 2, // 默认展示天数
-      preLoadDays: 4, // 预加载天数
-      maxShowDays: 20, // 最大展示天数
-    },
-    '5m': {
-      defaultShowDays: 4, // 默认展示天数
-      preLoadDays: 10, // 预加载天数
-      maxShowDays: 20, // 最大展示天数
-    },
-    '15m': {
-      defaultShowDays: 12, // 默认展示天数
-      preLoadDays: 24, // 预加载天数
-      maxShowDays: 50, // 最大展示天数
-    },
-    '30m': {
-      defaultShowDays: 25, // 默认展示天数
-      preLoadDays: 50, // 预加载天数
-      maxShowDays: 100, // 最大展示天数
-    },
-    '60m': {
-      defaultShowDays: 50, // 默认展示天数
-      preLoadDays: 100, // 预加载天数
-      maxShowDays: 200, // 最大展示天数
-    },
-    '1d': {
-      defaultShowDays: 200, // 默认展示天数
-      preLoadDays: 400, // 预加载天数
-      maxShowDays: 800, // 最大展示天数
-    },
-    '1w': {
-      defaultShowDays: 1000, // 默认展示天数
-      preLoadDays: 2000, // 预加载天数
-      maxShowDays: 4000, // 最大展示天数
-    },
-    '1mon': {
-      defaultShowDays: 4000, // 默认展示天数
-      preLoadDays: 8000, // 预加载天数
-      maxShowDays: 16000, // 最大展示天数
-    }
-  }
-}

package/packages/KlineNew/option.ts

@@ -1,111 +0,0 @@
-import { stMath } from 'st-func'
-const { round } = stMath
-
-// 获取主图配置
-export const getMainOption = (config: any) => {
-  const { showStartTime, showEndTime, drawData, maxShowDays } = config
-  const { xAxisData, candlestickData } = drawData
-  let startValue = -1
-  let endValue = -1
-  let dayPerTime: any = {}
-  xAxisData.forEach((time: any, index: number) => {
-    dayPerTime[time.split(' ')[0]] = dayPerTime[time.split(' ')[0]] || 0
-    dayPerTime[time.split(' ')[0]] += 1
-    if (new Date(time) >= new Date(showStartTime) && startValue === -1) {
-      startValue = index
-    }
-    if (new Date(time) <= new Date(showEndTime)) {
-      endValue = index
-    }
-  })
-  const maxShowCount = Math.max(...Object.values(dayPerTime)) * maxShowDays
-  const indicatorSeries = drawData.mainIndicatorData.map((item: any) => {
-    return {
-      name: item.key,
-      type: 'line',
-      silent: true,
-      symbol: 'none',
-      data: item.data,
-      lineStyle: {
-        width: item.width || 1,
-      },
-      itemStyle: {
-        color: item.color,
-      }
-    }
-  })
-  return {
-    animation: false,
-    grid: {
-      left: '60px',
-      top: '20px',
-      right: '20px',
-      bottom: '6px',
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        startValue,
-        endValue,
-        maxValueSpan: maxShowCount,
-      }
-    ],
-    tooltip: {
-      trigger: 'axis',
-      appendToBody: true,
-      confine: true,
-      axisPointer: {
-        type: 'cross',
-        label: {
-          rich: {},
-          formatter: data => {
-            const { axisDimension, value } = data
-            if(axisDimension === 'x') {
-              return ''
-            } else {
-              return String(round(value))
-            }
-          }
-        },
-      },
-      formatter: () => '',
-    },
-    xAxis: {
-      show: false,
-      type: 'category',
-      data: xAxisData,
-      splitLine: {
-        show: false,
-      },
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        show: true,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: "dotted",
-          color: "#333",
-        },
-      },
-      min: (value: any) => round(value.min),
-      max: (value: any) => round(value.max),
-    },
-    series: [
-      {
-        type: 'candlestick',
-        data: candlestickData,
-        itemStyle: {
-          color: "transparent",
-          color0: "#00FFFF",
-          borderColor: "#FF0000",
-          borderColor0: "#00FFFF",
-          borderWidth: 1,
-        },
-      },
-      ...indicatorSeries,
-    ]
-  }
-}

package/packages/KlineNew/utils.ts

@@ -1,156 +0,0 @@
-import axios from 'axios'
-import * as talib from 'talib.js'
-
-// ---------------------------------- 公共方法 ----------------------------------
-// 导出数据长度处理
-const sliceData = (data: any[], length: number) => {
-  return data.length > length ? data.slice(data.length - length) : data
-}
-
-
-// ---------------------------------- 工具方法 ----------------------------------
-// 注册计算指标线方法
-let isInit = false // 是否初始化
-let loading = true // 初始化loading
-let requestPromise: any[] = [] // 用于存储loading中的计算请求
-export const 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)
-    })
-  }
-}
-
-// 默认获取k线参数
-export const getKlineDataApi = async(params: any) => {
-  const res = await axios({
-    method: 'post',
-    headers: {
-      token: '041fd377d5d5efc7e08e2ed5b61b0c8d',
-    },
-    url: 'http://invest.hzyotoy.com/common/qt/getSingleCycleSingleVariety',
-    data: params,
-  })
-  return res.data.body
-}
-
-// 初始化数据
-export const formatData = (formatDataParams: any) => {
-  const { originDrawData, addData, params, mainIndicator, mainIndicatorList, subIndicator, subIndicatorList, config, slideData } = formatDataParams
-  let drawData: any = {}
-  const { startTime, endTime, queryType } = params
-  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 (queryType === '0') {
-      return new Date(startTime) <= new Date(item[0]) && new Date(item[0]) <= new Date(endTime)
-    } else if (queryType === '1') {
-      return index >= addData.length - loadAddCount && new Date(slideData[0][0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(slideData[slideData.length - 1][0])
-    } else if (queryType === '2') {
-      return index >= preLoadCount && new Date(slideData[0][0]) <= new Date(item[0]) && new Date(item[0]) <= new Date(slideData[slideData.length - 1][0])
-    }
-    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, []) : [], 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 (queryType === '0') {
-    // 重新搜索
-    drawData = {
-      originData, // 原数据
-      xAxisData, // 时间数据
-      candlestickData, // k线数据
-      mainIndicatorData, // 主图指标线数据
-      subIndicatorData, // 副图数据
-    }
-  } else if (queryType === '1') {
-    // 加载历史数据
-    drawData = {
-      originData: [...originData, ...originDrawData.originData.slice(1)], // 原数据
-      xAxisData: [...xAxisData, ...originDrawData.xAxisData.slice(1)], // 时间数据
-      candlestickData: [...candlestickData, ...originDrawData.candlestickData.slice(1)], // k线数据
-      mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
-        return {
-          ...item,
-          data: [...mainIndicatorData[index].data, ...item.data.slice(1)],
-        }
-      }), // 主图指标线数据
-      subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
-        return {
-          ...item,
-          data: [...subIndicatorData[index].data, ...item.data.slice(1)],
-        }
-      }), // 副图数据
-    }
-  } else if (queryType === '2') {
-    // 加载新数据
-    drawData = {
-      originData: [...originDrawData.originData, ...originData.slice(1)], // 原数据
-      xAxisData: [...originDrawData.xAxisData, ...xAxisData.slice(1)], // 时间数据
-      candlestickData: [...originDrawData.candlestickData, ...candlestickData.slice(1)], // k线数据
-      mainIndicatorData: originDrawData.mainIndicatorData.map((item: any, index: number) => {
-        return {
-          ...item,
-          data: [...item.data, ...mainIndicatorData[index].data.slice(1)],
-        }
-      }), // 主图指标线数据
-      subIndicatorData: originDrawData.subIndicatorData.map((item: any, index: number) => {
-        return {
-          ...item,
-          data: [...item.data, ...subIndicatorData[index].data.slice(1)],
-        }
-      }), // 副图数据
-    }
-  }
-  // 添加一些字段，用于方便使用
-  drawData.length = drawData.xAxisData.length
-  drawData.startTime = drawData.xAxisData[0]
-  drawData.endTime = drawData.xAxisData[drawData.length - 1]
-  return drawData
-}