st-comp 0.0.277 → 0.0.279

package/src/pages/KlineNew/components/KlineBasic/index.vue

@@ -1,336 +0,0 @@
-<template>
-  <div
-    class="kline"
-    @mousemove="isSelect = true"
-    @mouseout="isSelect = false"
-  >
-    <div class="kline-mainTips">
-      <st-klineTips :drawData="drawData" :activeIndex="activeIndex"/>
-    </div>
-    <div class="kline-mainChart" ref="mainChartRef"></div>
-    <div class="kline-sub">
-      <st-klineSub ref="klineSubRef" v-model="subIndicator" :config="config" :drawData="drawData" :activeIndex="activeIndex" :subIndicatorList="subIndicatorList" />
-    </div>
-    <st-klineUtils ref="klineUtilsRef" />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from "vue"
-import * as echarts from 'echarts'
-import { getKlineDataApi, formatConfig } from './utils'
-import dayjs from "dayjs"
-import { stMath } from 'st-func'
-const { round } = stMath
-
-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: () => ({}) }, // 配置
-})
-
-let mainChart
-let mainDataZoomTimer = null // 主图数据缩放定时器
-let isLoadHistory = false // 是否正在加载历史数据
-let isloadAllHistory = false // 是否加载完全部历史数据
-let resizeRo // dom元素监听事件
-let highlightTimer = null // 高亮处理事件的定时器
-
-const mainChartRef = ref() // 主图
-const klineSubRef = ref() // 副图
-const klineUtilsRef = ref() // k线辅助函数实例
-const isSelect = ref(false) // 是否选中，选中可通过键盘按键操作
-const drawData = ref({}) // 绘图数据
-const activeIndex = ref(0) // 显示的index
-const subIndicator = ref('VOL') // 副图指标
-
-const config = computed(() => formatConfig(props.config))
-
-watch(
-  () => [props.code, props.freqId, props.mainIndicator, subIndicator],
-  async () => {
-    isLoadHistory = false
-    isloadAllHistory = false
-    initChart()
-  },
-  { deep: true }
-)
-
-onMounted(async () => {
-  // 初始化指标计算方法
-  await klineUtilsRef.value.initTalib()
-  mainChart = echarts.init(mainChartRef.value)
-  klineSubRef.value.connect(mainChart)
-  addEventListener()
-  initChart()
-  // 绑定resize事件
-  let isFirst = 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.off('datazoom')
-  mainChart.off('highlight')
-  mainChart.off('globalout')
-  mainChart.dispose()
-  resizeRo.disconnect()
-  resizeRo = null
-})
-
-// 项目初始化
-const initChart = async () => {
-  const { addCount, preLoadCount } = config.value
-  const res = await getKlineData({
-    queryType: '1',
-    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    cycle: props.freqId,
-    limit: addCount + preLoadCount,
-  })
-  drawData.value = klineUtilsRef.value.formatDataByCount({
-    originDrawData: {},
-    addData: res,
-    mainIndicator: props.mainIndicator,
-    mainIndicatorList: props.mainIndicatorList,
-    subIndicator: subIndicator.value,
-    subIndicatorList: props.subIndicatorList,
-    config: config.value,
-  })
-  draw('main', { startValue: drawData.value.length - 1 - config.value.defaultShowCount, endValue: drawData.value.length - 1 })
-  draw('sub', { startValue: drawData.value.length - 1 - config.value.defaultShowCount, endValue: drawData.value.length - 1})
-  activeIndex.value = mainChart.getOption().dataZoom[0].endValue
-}
-
-// 绑定事件
-const addEventListener = () => {
-  mainChart.on('datazoom', (params) => {
-    clearTimeout(mainDataZoomTimer)
-    mainDataZoomTimer = setTimeout(() => {
-      const { loadCheckCount, addCount, preLoadCount } = config.value
-      const { startValue } = mainChart.getOption().dataZoom[0]
-      // 加载数据
-      if (startValue < loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
-        // 左侧数据小于1000条，加载左侧数据
-        isLoadHistory = true
-        getMoreData({
-          queryType: '1',
-          endTime: drawData.value.startTime,
-          cycle: props.freqId,
-          limit: addCount + preLoadCount,
-        })
-      }
-      clearTimeout(mainDataZoomTimer)
-    }, 100)
-  })
-  // 高亮事件
-  mainChart.on('highlight', (data) => {
-    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[0]
-  mainChart.dispatchAction({
-    type: 'dataZoom',
-    ...klineUtilsRef.value.handleKeyDown(e, { startValue, endValue, maxIndex: option.xAxis[0].data.length - 1})
-  })
-}
-
-// 获取更多数据
-const getMoreData = async(params) => {
-  const { addCount, preLoadCount, maxLoadCount } = config.value
-  const res = await getKlineData(params)
-  drawData.value = klineUtilsRef.value.formatDataByCount({
-    originDrawData: drawData.value,
-    addData: res.slice(0, res.length - 1),
-    params,
-    mainIndicator: props.mainIndicator,
-    mainIndicatorList: props.mainIndicatorList,
-    subIndicator: subIndicator.value,
-    subIndicatorList: props.subIndicatorList,
-    config: config.value,
-  })
-  const { startValue, endValue } = mainChart.getOption().dataZoom[0]
-  let dataZoomAddCount = addCount
-  if(drawData.value.length > maxLoadCount){
-    // 超出设置的最长加载数据条数
-    isloadAllHistory = true
-  } else if (res.length < addCount + preLoadCount) {
-    // 表示历史数据已加载完
-    isloadAllHistory = true
-    dataZoomAddCount = res.length - 1
-  }
-  isLoadHistory = false
-  draw('main', { startValue: startValue + dataZoomAddCount, endValue: endValue + dataZoomAddCount })
-  draw('sub', { startValue: startValue + dataZoomAddCount, endValue: endValue + dataZoomAddCount })
-}
-
-// 获取k线数据
-const getKlineData = async(params) => {
-  const apiParams = {
-    contractType: 0, // 合约类型 0-主连 1-加权
-    variety: props.code, // 品种
-    right: 1, // 0-不复权 1-前复权 2-后复权
-    ...params,
-  }
-  const res = await getKlineDataApi(apiParams)
-  return res
-}
-
-// 绘制函数
-const draw = (type, params = {}) => {
-  const { startValue, endValue, maxValueSpan } = params
-  const callBackMap = new Map([
-    [ "main", () => {
-      const { xAxisData, candlestickData, mainIndicatorData } = drawData.value
-      const indicatorSeries = mainIndicatorData.map((item) => {
-        return {
-          name: item.key,
-          type: 'line',
-          silent: true,
-          symbol: 'none',
-          data: item.data,
-          lineStyle: {
-            width: item.width || 1,
-          },
-          itemStyle: {
-            color: item.color,
-          }
-        }
-      })
-      mainChart.setOption({
-        animation: false,
-        grid: {
-          left: `${config.value.gridLeft}px`,
-          top: '20px',
-          right: `${config.value.gridRight}px`,
-          bottom: '6px',
-        },
-        dataZoom: [
-          {
-            type: 'inside',
-            startValue,
-            endValue,
-            maxValueSpan: config.value.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) => round(value.min),
-          max: (value) => round(value.max),
-        },
-        series: [
-          {
-            type: 'candlestick',
-            data: candlestickData,
-            itemStyle: {
-              color: "transparent",
-              color0: "#00FFFF",
-              borderColor: "#FF0000",
-              borderColor0: "#00FFFF",
-              borderWidth: 1,
-            },
-          },
-          ...indicatorSeries,
-        ]
-      }, true)
-    }],
-    [ "sub", () => {
-      klineSubRef.value.draw({ startValue, endValue, maxValueSpan })
-    }],
-  ]);
-  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%);
-  }
-}
-</style>

package/src/pages/KlineNew/components/KlineBasic/utils.js

@@ -1,46 +0,0 @@
-import axios from 'axios'
-
-const defaultConfig = {
-  defaultShowCount: 500, // 默认展示天数
-  addCount: 2000, // 首屏加载条数，滚动加载条数
-  maxLoadCount: 50000, // 最多加载多少条数据
-  maxShowCount: 5000, // 一屏幕最多展示多少条数据
-  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
-  loadCheckCount: 500, // 加载数据检查条数
-  gridLeft: 60, // echarts绘图左侧grid距离
-  gridRight: 20, // echarts绘图右侧grid距离
-}
-
-// 获取配置
-export const formatConfig = (config) => {
-  return {
-    ...defaultConfig,
-    ...config,
-  }
-}
-
-const getKlineNew = async(params) => {
-  const res = await axios({
-    method: 'post',
-    headers: {
-      token: '36cbbea2e76aff9d99f88d50669c009c',
-    },
-    url: 'http://127.0.0.1:7001/middleLayer/kline/getKline',
-    data: params,
-  })
-  console.log('getKlineNew', res.data.data)
-}
-
-// 默认获取k线参数
-export const getKlineDataApi = async(params) => {
-  const res = await axios({
-    method: 'post',
-    headers: {
-      token: '36cbbea2e76aff9d99f88d50669c009c',
-    },
-    url: 'http://invest.hzyotoy.com/common/webjars/qt/getSingleCycleSingleVariety',
-    data: params,
-  })
-  getKlineNew(params)
-  return res.data.body
-}

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

@@ -1,316 +0,0 @@
-<template>
-  <div
-    class="kline"
-    @mousemove="isSelect = true"
-    @mouseout="isSelect = false"
-  >
-    <div class="kline-mainTips">
-      <st-kline-tips-new :data="klineData" :activeIndex="activeIndex"/>
-    </div>
-    <div class="kline-mainChart" ref="mainChartRef"></div>
-    <div class="kline-sub">
-      <st-kline-sub-new
-        ref="klineSubRef"
-        v-model="subIndicator"
-        :data="klineData"
-        :activeIndex="activeIndex"
-        :subIndicatorList="subIndicatorList"
-      />
-    </div>
-    <st-kline-utils-new ref="klineUtilsRef" />
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, onUnmounted, watch, computed } from "vue"
-import * as echarts from 'echarts'
-import { getKlineDataApi, formatConfig } from './utils'
-import dayjs from "dayjs"
-import { stMath } from 'st-func'
-const { round } = stMath
-
-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: () => ({}) }, // 配置
-})
-
-let mainChart
-let mainDataZoomTimer = null // 主图数据缩放定时器
-let isLoadHistory = false // 是否正在加载历史数据
-let isloadAllHistory = false // 是否加载完全部历史数据
-let resizeRo // dom元素监听事件
-let highlightTimer = null // 高亮处理事件的定时器
-const activeIndex = ref(0) // 显示的index
-
-const mainChartRef = ref() // 主图
-const klineSubRef = ref() // 副图
-const klineUtilsRef = ref() // k线辅助函数实例
-const isSelect = ref(false) // 是否选中，选中可通过键盘按键操作
-const klineData = ref({}) // 绘图数据
-const subIndicator = ref('VOL') // 副图指标
-
-const config = computed(() => formatConfig(props.config))
-
-watch(
-  () => [props.code, props.freqId, props.mainIndicator, subIndicator],
-  async () => {
-    initChart()
-  },
-  { deep: true }
-)
-
-onMounted(async () => {
-  // 初始化指标计算方法
-  mainChart = echarts.init(mainChartRef.value)
-  klineSubRef.value.connect(mainChart)
-  addEventListener()
-  initChart()
-  // 绑定resize事件
-  let isFirst = 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.off('datazoom')
-  mainChart.off('highlight')
-  mainChart.off('globalout')
-  mainChart.dispose()
-  resizeRo.disconnect()
-  resizeRo = null
-})
-
-// 项目初始化
-const initChart = async () => {
-  const { addCount } = config.value
-  const res = await getKlineDataApi({
-    varietyCode: props.code,
-    right: 1,
-    cycle: 5,
-    mainIndicator: props.mainIndicator,
-    subIndicator: subIndicator.value,
-    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
-    limit: addCount,
-  })
-  klineData.value = res
-  draw('main', { startValue: res.time.length - 1 - config.value.defaultShowCount, endValue: res.time.length - 1 })
-  draw('sub', { startValue: res.time.length - 1 - config.value.defaultShowCount, endValue: res.time.length - 1 })
-  activeIndex.value = mainChart.getOption().dataZoom[0].endValue
-}
-// 绑定事件
-const addEventListener = () => {
-  mainChart.on('datazoom', (params) => {
-    clearTimeout(mainDataZoomTimer)
-    mainDataZoomTimer = setTimeout(() => {
-      const { loadCheckCount, addCount } = config.value
-      const { startValue } = mainChart.getOption().dataZoom[0]
-      // 加载数据
-      if (startValue < loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
-        // 左侧数据小于1000条，加载左侧数据
-        isLoadHistory = true
-        getMoreData()
-      }
-      clearTimeout(mainDataZoomTimer)
-    }, 100)
-  })
-  // 高亮事件
-  mainChart.on('highlight', (data) => {
-    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[0]
-  mainChart.dispatchAction({
-    type: 'dataZoom',
-    ...klineUtilsRef.value.handleKeyDown(e, { startValue, endValue, maxIndex: option.xAxis[0].data.length - 1})
-  })
-}
-
-// 获取更多数据
-const getMoreData = async(params) => {
-  const { addCount, maxLoadCount } = config.value
-  const res = await getKlineDataApi({
-    varietyCode: props.code,
-    contractType: 0, // 合约类型 0-主连 1-加权
-    right: 1,
-    cycle: 5,
-    mainIndicator: props.mainIndicator,
-    subIndicator: subIndicator.value,
-    endTime: klineData.value.time[0],
-    limit: addCount,
-  })
-  klineData.value = klineUtilsRef.value.mergeData(res, klineData.value)
-  const { startValue, endValue } = mainChart.getOption().dataZoom[0]
-  let dataZoomAddCount = addCount
-  if(klineData.value.time.length > maxLoadCount){
-    // 超出设置的最长加载数据条数
-    isloadAllHistory = true
-  } else if (res.time.length < addCount) {
-    // 表示历史数据已加载完
-    isloadAllHistory = true
-    dataZoomAddCount = res.length - 1
-  }
-  isLoadHistory = false
-  draw('main', { startValue: startValue + dataZoomAddCount, endValue: endValue + dataZoomAddCount })
-  draw('sub', { startValue: startValue + dataZoomAddCount, endValue: endValue + dataZoomAddCount })
-}
-
-// 绘制函数
-const draw = (type, params = {}) => {
-  const { startValue, endValue, maxValueSpan } = params
-  const callBackMap = new Map([
-    [ "main", () => {
-      const { data, time } = klineData.value
-      const indicatorSeries = klineData.value.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,
-          }
-        }
-      })
-      mainChart.setOption({
-        animation: false,
-        grid: {
-          left: `${config.value.gridLeft}px`,
-          top: '20px',
-          right: `${config.value.gridRight}px`,
-          bottom: '6px',
-        },
-        dataZoom: [
-          {
-            type: 'inside',
-            startValue,
-            endValue,
-            maxValueSpan: config.value.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: time,
-          splitLine: {
-            show: false,
-          },
-        },
-        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,
-            },
-          },
-          ...indicatorSeries,
-        ]
-      }, true)
-    }],
-    [ "sub", () => {
-      klineSubRef.value.draw({ startValue, endValue, maxValueSpan }, config.value)
-    }],
-  ]);
-  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%);
-  }
-}
-</style>