st-comp 0.0.41 → 0.0.43

package/package.json

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

package/packages/Kline/utils.ts

@@ -539,10 +539,10 @@ const handleSellBuyConfig = (data: any[], originData: KlineDataType) => {
      * 简单判断该条K线上是否有多个数据即可判断出是否是买卖同时存在,如果同时存在图标变成T
      */
     const timeTradeList = data.filter((item: any) => item.time === next.time)
-    let symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
+        let symbol = "image://" + new URL(`./images/${tradeType === "买" ? "buy" : "sell"}.svg`, import.meta.url).href;
     if (timeTradeList.length > 1) {
       // 存在多条数据, 处理出他们的交易类型, 进行去重
-      const timeTradeTypes = [...new Set(...timeTradeList.map(i => handleTradeType(i, "sellBuy")))]
+      const timeTradeTypes = [...new Set(timeTradeList.map(i => handleTradeType(i, "sellBuy")))]
       if (timeTradeTypes.length > 1) {
         symbol = "image://" + new URL("./images/t.svg", import.meta.url).href;
       } else {

package/packages/KlineNew/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StKlineNew from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-klineNew", StKlineNew);
+  },
+}

package/packages/KlineNew/index.vue

@@ -0,0 +1,310 @@
+<template>
+  <div
+    class="kline"
+    @mousemove="isSelect = true"
+    @mouseout="isSelect = false"
+  >
+    <div class="kline-mainChart" ref="mainChartRef"></div>
+    <div class="kline-subChart" ref="subChartRef"></div>
+    <div class="kline-slideChart" ref="slideChartRef"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue"
+import * as echarts from 'echarts'
+import type { EChartsType } from 'echarts'
+import { getMainOption, getSubOption, getSlideOption } from './option.js'
+import { getKlineDataApi } from './utils.js'
+import dayjs from "dayjs"
+
+const config = {
+  defaultShowDays: 50, // 默认展示天数
+  preLoadDays: 50, // 预加载天数
+  preLoadCount: 800, // 预加载数据条数(用于计算指标线)
+  loadCheckCount: 500, // 加载数据检查条数
+}
+let mainChart: EChartsType
+let subChart: EChartsType
+let slideChart: EChartsType
+let mainDataZoomTimer: any = null
+let slideDataZoomTimer: any = null
+let isLoadHistory: boolean = false // 是否正在加载历史数据
+let isloadAllHistory: boolean = false // 是否加载完全部历史数据
+let isLoadNew: boolean = false // 是否正在加载新数据
+let isloadAllNew: boolean = false // 是否加载完全部新数据
+let resizeRo: any
+let slideData: any[] = [] // 拖动轴数据
+let klineData: any[] = [] // 时间轴数据
+
+const mainChartRef = ref<HTMLElement>()
+const subChartRef = ref<HTMLElement>()
+const slideChartRef = ref<HTMLElement>()
+const isSelect = ref(false)
+
+onMounted(async () => {
+  // 请求滚动条数据
+  slideData = await getKlineData({
+    queryType: '0',
+    startTime: `${dayjs().subtract(5, 'year').format("YYYY-MM-DD")} 00:00:00`,
+    endTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
+    cycle: '6',
+  })
+  // 请求首屏k线数据
+  const { startTime, showStartTime, endTime, showEndTime } = getTime(slideData.length - 1 - config.defaultShowDays, slideData.length - 1)
+  klineData = await getKlineData({
+    queryType: '0',
+    startTime: `${startTime} 00:00:00`,
+    endTime: `${endTime} 24:00:00`,
+    cycle: '5',
+  })
+  init()
+  addEventListener()
+  draw('main', { showStartTime, showEndTime })
+  draw('sub', { showStartTime, showEndTime })
+  draw('slide')
+  // 绑定resize事件
+  let isFirst: boolean | null = true
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null
+      return
+    }
+    mainChart.resize()
+    subChart.resize()
+    slideChart.resize()
+  })
+  resizeRo.observe(mainChartRef.value)
+  window.addEventListener('keydown', keyDownEvent)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', keyDownEvent)
+  mainChart.dispose()
+  subChart.dispose()
+  slideChart.dispose()
+  resizeRo.disconnect()
+  resizeRo = null
+})
+
+const init = () => {
+  mainChart = echarts.init(mainChartRef.value)
+  subChart = echarts.init(subChartRef.value)
+  slideChart = echarts.init(slideChartRef.value)
+  echarts.connect([mainChart, subChart])
+}
+
+const addEventListener = () => {
+  mainChart.on('datazoom', (params: any) => {
+    clearTimeout(mainDataZoomTimer)
+    mainDataZoomTimer = setTimeout(() => {
+      let startIndex = 0
+      let endIndex = 0
+      if (params.batch) {
+        const { start, end } = params.batch[0]
+        startIndex = Math.floor(start * klineData.length / 100)
+        endIndex = end === 100 ? klineData.length - 1 : Math.floor(end * klineData.length / 100)
+      } else {
+        startIndex = params.startValue
+        endIndex = params.endValue
+      }
+      // 加载数据
+      if (startIndex < config.loadCheckCount && isLoadHistory === false && isloadAllHistory === false) {
+        // 左侧数据小于1000条，加载左侧数据
+        isLoadHistory = true
+        getMoreData({
+          queryType: '1',
+          endTime: klineData[0][0],
+          cycle: '5',
+          limit: 2000,
+        })
+      }
+      if (endIndex > klineData.length - config.loadCheckCount && isLoadNew === false && isloadAllNew === false) {
+        // 右侧数据小于1000条，加载右侧数据
+        isLoadNew = true
+        getMoreData({
+          queryType: '2',
+          startTime: klineData[klineData.length - 1][0],
+          cycle: '5',
+          limit: 2000,
+        })
+      }
+      // 重置滚动条
+      const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
+      const startTime = (klineData[startValue][0] as string).split(' ')[0]
+      const endTime = (klineData[endValue][0] as string).split(' ')[0]
+      const slideTime = slideData.map(item => (item[0] as string).split(' ')[0])
+      slideChart.dispatchAction({
+        type: 'dataZoom',
+        startValue: slideTime.indexOf(startTime),
+        endValue: slideTime.indexOf(endTime)
+      })
+      clearTimeout(mainDataZoomTimer)
+    }, 300)
+  })
+  slideChart.on('datazoom', (params: any) => {
+    if(!params.dataZoomId) return
+    clearTimeout(slideDataZoomTimer)
+    slideDataZoomTimer = setTimeout(async() => {
+      const { start, end } = params
+      const startIndex = Math.floor(start * slideData.length / 100)
+      const endIndex = end === 100 ? slideData.length - 1 : Math.floor(end * slideData.length / 100)
+      const { startTime, showStartTime, endTime, showEndTime } = getTime(startIndex, endIndex)
+      klineData = await getKlineData({
+        queryType: '0',
+        startTime: `${startTime} 00:00:00`,
+        endTime: `${endTime} 24:00:00`,
+        cycle: '5',
+      })
+      isLoadHistory = false
+      isloadAllHistory = false
+      isLoadNew = false
+      isloadAllNew = false
+      draw('main', { showStartTime, showEndTime })
+      draw('sub', { showStartTime, showEndTime })
+      clearTimeout(slideDataZoomTimer)
+    }, 100)
+  })
+}
+
+  // 键盘事件 
+  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 getTime = (startIndex: number, endIndex: number) => {
+  const startTime = (slideData[startIndex - config.preLoadDays < 0 ? 0 : startIndex - config.preLoadDays][0] as string).split(' ')[0]
+  const showStartTime = (slideData[startIndex][0] as string).split(' ')[0]
+  const endTime = (slideData[endIndex + config.preLoadDays > slideData.length ? slideData.length - 1 : endIndex + config.preLoadDays][0] as string).split(' ')[0]
+  const showEndTime = (slideData[endIndex][0] as string).split(' ')[0]
+  return { startTime, showStartTime, endTime, showEndTime }
+}
+
+const getMoreData = async(params: any) => {
+  const { startValue, endValue } = (mainChart.getOption().dataZoom as any[])[0]
+  const showStartTime = klineData[startValue][0]
+  const showEndTime = klineData[endValue][0]
+  const res = await getKlineData(params)
+  if (params.queryType === '1') {
+    // 加载历史数据
+    if (new Date(slideData[0][0]) > new Date(res[0][0])) {
+      // 表示历史数据已加载完
+      isloadAllHistory = true
+      klineData = [
+        ...res.filter(item => new Date(item[0]) >= new Date(slideData[0][0])),
+        ...klineData.slice(1)
+      ]
+    } else {
+      klineData = [...res, ...klineData.slice(1)]
+    }
+    isLoadHistory = false
+  } else {
+    // 加载新数据
+    if (res.length === 0) {
+      // 表示已经加载完全部新数据
+      isloadAllNew = true
+      isLoadNew = false
+      return
+    }
+    klineData = [...klineData, ...res.slice(1)]
+  }
+  draw('main', { showStartTime, showEndTime })
+  draw('sub', { showStartTime, showEndTime })
+}
+
+const getKlineData = async(params: any) => {
+  const res = await getKlineDataApi({
+    contractType: 0, // 合约类型 0-主连 1-加权
+    variety: "RU", // 品种
+    preLimit: 0, // 向前多查询数量
+    postLimit: 0, // 向后多查询数量
+    right: 0, // 0-不复权 1-前复权 2-后复权
+    ...params,
+  })
+  return res
+}
+
+const draw = (type: string, params: any = {}) => {
+  const { showStartTime, showEndTime } = params
+  const { defaultShowDays } = config
+  const callBackMap = new Map([
+    [ "main", () => {
+      mainChart.setOption(getMainOption({ data: klineData, showStartTime, showEndTime }))
+    }],
+    [ "sub", () => {
+      subChart.setOption(getSubOption({ data: klineData, showStartTime, showEndTime }))
+    }],
+    [ "slide", () => {
+      slideChart.setOption(getSlideOption({ data: slideData, defaultShowDays }))
+    }],
+  ]);
+  const callBack = callBackMap.get(type);
+  if (callBack instanceof Function) {
+    callBack();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.kline {
+  width: 100%;
+  height: 100%;
+  &-mainChart {
+    width: 100%;
+    height: 60%;
+  }
+  &-subChart {
+    width: 100%;
+    height: calc(40% - 50px);
+  }
+  &-slideChart {
+    width: 100%;
+    height: 50px;
+  }
+}
+</style>

package/packages/KlineNew/option.ts

@@ -0,0 +1,150 @@
+export const getMainOption = (config: any) => {
+  const { data, showStartTime, showEndTime } = config
+  const xAxisData: any[] = []
+  const klineData: any[] = []
+  let startValue = -1
+  let endValue = -1
+  data.forEach((item: any, index: number) => {
+    xAxisData.push(item[0])
+    klineData.push([ item[1], item[4], item[3], item[2] ])
+    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
+      startValue = index
+    }
+    if (new Date(item[0]) <= new Date(showEndTime)) {
+      endValue = index
+    }
+  })
+  return {
+    animation: false,
+    grid: {
+      left: '50px',
+      top: '20px',
+      right: '20px',
+      bottom: '20px',
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        realtime: true,
+        startValue,
+        endValue,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData
+    },
+    yAxis: {
+      type: 'value',
+      min: (value: any) => value.min,
+      max: (value: any) => value.max,
+    },
+    series: [
+      {
+        type: 'candlestick',
+        data: klineData,
+      }
+    ]
+  }
+}
+
+export const getSubOption = (config: any) => {
+  const { data, showStartTime, showEndTime } = config
+  const xAxisData: any[] = []
+  const barData: any[] = []
+  let startValue = -1
+  let endValue = -1
+  data.forEach((item: any, index: number) => {
+    xAxisData.push(item[0])
+    barData.push(item[5])
+    if (new Date(item[0]) >= new Date(showStartTime) && startValue === -1) {
+      startValue = index
+    }
+    if (new Date(item[0]) <= new Date(showEndTime)) {
+      endValue = index
+    }
+  })
+  return {
+    animation: false,
+    grid: {
+      left: '50px',
+      top: '20px',
+      right: '20px',
+      bottom: '20px',
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+        realtime: true,
+        startValue,
+        endValue,
+      }
+    ],
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "cross",
+      },
+    }, 
+    xAxis: {
+      type: 'category',
+      data: xAxisData
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: barData,
+        type: 'bar'
+      }
+    ]
+  }
+}
+
+export const getSlideOption = (config: any) => {
+  const { data, defaultShowDays } = config
+  const xAxisData = data.map((item: any) => item[0].split(' ')[0])
+  const lineData = data.map((item: any) => item[4])
+  return {
+    grid: {
+      height: 0,
+      left: '80px',
+      right: '80px',
+    },
+    dataZoom: [
+      {
+        show: true,
+        realtime: true,
+        startValue: data.length - 1 - defaultShowDays,
+        endValue: data.length - 1,
+      },
+      {
+        type: 'inside',
+        realtime: true,
+        startValue: data.length - 1 - defaultShowDays,
+        endValue: data.length - 1,
+      }
+    ],
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      show: false,
+    },
+    yAxis: {
+      type: 'value'
+    },
+    series: [
+      {
+        data: lineData,
+        type: 'line'
+      }
+    ]
+  }
+}

package/packages/KlineNew/utils.ts

@@ -0,0 +1,13 @@
+import axios from 'axios'
+
+export const getKlineDataApi = async(params: any) => {
+  const res = await axios({
+    method: 'post',
+    headers: {
+      token: '78e4d78065e760bb3d0dcc3d442e6a0e',
+    },
+    url: 'http://192.168.12.49/common/qt/getSingleCycleSingleVariety',
+    data: params,
+  })
+  return res.data.body
+}

package/packages/index.ts

@@ -3,6 +3,7 @@ import StChartLayout from "./ChartLayout/index.ts"
 import StDialog from "./Dialog/index.ts"
 import StHeatMap from "./HeatMap/index.ts"
 import StKline from "./Kline/index.ts"
+import StKlineNew from "./KlineNew/index.ts"
 import StLinearLegend from "./LinearLegend/index.ts"
 import StMap from "./Map/index.ts"
 import StPagination from "./Pagination/index.ts"
@@ -17,6 +18,7 @@ export default {
     StDialog.install(app)
     StHeatMap.install(app)
     StKline.install(app)
+    StKlineNew.install(app)
     StLinearLegend.install(app)
     StMap.install(app)
     StPagination.install(app)

package/src/pages/Kline/api.ts

@@ -7,9 +7,9 @@ export const getSingleCycleSingleVariety = async (data: any) => {
   return axios({
     method: 'post',
     headers: {
-      token: '9593c16255001925afeed6dd2770eea7',
+      token: '4b26c72f990a5b02be1a79eb33c1bedf',
     },
-    url: 'http://192.168.12.49:88/common/qt/getSingleCycleSingleVariety',
+    url: 'http://120.27.237.138/common/qt/getSingleCycleSingleVariety',
     data,
   })
 }
@@ -63,9 +63,9 @@ export const getNetPositionData = async (data: any) => {
   return axios({
     method: 'post',
     headers: {
-      token: 'b1ef55eb206f7ae49b85b528231c5d87',
+      token: '4b26c72f990a5b02be1a79eb33c1bedf',
     },
-    url: 'http://192.168.12.49:88/invest/analysis/queryVarietyNetPositionValue',
+    url: 'http://120.27.237.138/invest/analysis/queryVarietyNetPositionValue',
     data
   })
 }
@@ -77,9 +77,9 @@ export const queryPairedRecordByVariety = async (data: any) => {
   return axios({
     method: 'post',
     headers: {
-      token: 'b1ef55eb206f7ae49b85b528231c5d87',
+      token: '4b26c72f990a5b02be1a79eb33c1bedf',
     },
-    url: 'http://192.168.12.49:88/invest/analysis/queryPairedRecordByVariety',
+    url: 'http://120.27.237.138/invest/analysis/queryPairedRecordByVariety',
     data
   })
 }

package/src/pages/Kline/components/SingleCycleSingleVariety.vue

@@ -22,7 +22,7 @@ const loading = ref(true);
 const netWorkErrorMsg = ref("");
 
 // 筛选条件相关参数
-const cycle = ref<any>("6");
+const cycle = ref<any>("5");
 const cycleName = computed(() => {
   if (cycleOptions.value.length > 0) {
     return cycleOptions.value.find((item: any) => item.value === cycle.value).label;
@@ -191,12 +191,12 @@ const getKlineData = async () => {
   const params = {
     contractType: 0,
     cycle: cycle.value,
-    endTime: "2015-04-09 15:00:00",
+    endTime: "2024-03-28 15:00:00",
     preLimit: 800,
     queryType: 0,
     right: 0,
-    startTime: "2015-02-08 15:00:00",
-    variety: "IF",
+    startTime: "2024-01-28 15:00:00",
+    variety: "RU",
   };
   const res = await getSingleCycleSingleVariety(params);
   klineData.value = res.data.body;
@@ -207,10 +207,10 @@ const getKlineData = async () => {
 const getKlinePointData = async () => {
   // ------
   const params = {
-    analyseId: 2248,
+    analyseId: 3172,
     cycle: cycle.value,
     ifStock: 0,
-    varietyName: "沪深300",
+    varietyName: "橡胶",
   };
   const res = await queryPairedRecordByVariety(params);
   const body = res.data.body;

package/src/pages/KlineNew/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div style="width: 100%; height: 100%;">
+    <st-klineNew />    
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss" scoped>
+
+</style>

package/src/router/routes.ts

@@ -19,6 +19,11 @@ export default [
     name: 'Kline',
     component: () => import('../pages/Kline/index.vue'),
   },
+  {
+    path: '/klineNew',
+    name: 'KlineNew',
+    component: () => import('../pages/KlineNew/index.vue'),
+  },
   {
     path: '/linearLegend',
     name: 'LinearLegend',