st-comp 0.0.4 → 0.0.6

package/packages/Kline/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="st-kline">
+    <!-- 顶部Tips -->
+    <div class="st-kline-header">
+      <Tips
+        :activeIndex="activeIndex"
+        :klineData="klineData"
+        :indicatorData="indicatorData"
+        :indicatorConfig="indicatorConfigList[indicator]"
+      />
+    </div>
+    <!-- 图表 -->
+    <st-echarts
+      v-if="option"
+      :option="option"
+      :themeConfig="{
+        name: 'kline',
+        light: klineThemeLight,
+        dark: klineThemeDark,
+      }"
+      @highlight="highlight"
+      @afterInit="afterInit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import dayjs from 'dayjs'
+  import { ref, onMounted } from 'vue'
+  import Tips from './components/Tips/index.vue'
+  import klineThemeDark from './kline_theme_dark.json'
+  import klineThemeLight from './kline_theme_light.json'
+  import type { EChartsType, EChartsOption } from 'echarts'
+  import type { KlineDataType, IndicatorDataType, IndicatorConfigType } from './type.d.ts'
+  import { getKline, getIndicator, getIndicatorConfigList, getOption } from './utils'
+
+  const props = defineProps({
+    // 品种代码
+    code: {
+      type: String,
+      required: true,
+    },
+    // 默认展示K线条数
+    defaultCount: {
+      type: Number,
+      default: () => 500,
+    },
+    // 结束时间
+    tradeDate: {
+      type: String,
+      required: true,
+    },
+    // 周期名称
+    frequency: {
+      type: String,
+      required: true,
+    },
+    // 指标线类型
+    indicator: {
+      type: String,
+      required: true,
+    },
+  })
+
+  const option = ref<any>(null) // 图表配置
+  const klineData = ref<KlineDataType>([]) // K线数据
+  const indicatorData = ref<IndicatorDataType>([]) // 指标线具体数据
+  const indicatorConfigList = ref<IndicatorConfigType>({}) // 指标线配置项
+  const activeIndex = ref(0) // 当前鼠标激活的数据索引
+
+  // 获取K线数据
+  const getKlineData = async () => {
+    const { code, defaultCount, tradeDate, frequency } = props
+    const res = await getKline(code, defaultCount, tradeDate, frequency)
+    return res.data
+  }
+
+  // 获取指标线具体数据
+  const getIndicatorData = async (klineData: KlineDataType) => {
+    if (klineData.length === 0) return
+    const { code, frequency, indicator } = props
+    const start_date = dayjs(new Date(klineData[0][0] * 1000)).format('YYYY-MM-DD')
+    const end_date = dayjs(new Date(klineData[klineData.length - 1][0] * 1000)).format('YYYY-MM-DD')
+    const indicatorRes = await getIndicator(code, start_date, end_date, frequency, indicator)
+    // 格式处理,只格式化获取处于K线之中的指标线数据
+    return indicatorRes.data.datetime
+      ? indicatorRes.data.datetime.reduce((res: IndicatorDataType, date: number, index: number) => {
+          if (date >= klineData[0][0] && date <= klineData[klineData.length - 1][0]) {
+            return [
+              ...res,
+              {
+                ...Object.keys(indicatorRes.data).reduce((keyRes, key) => {
+                  return {
+                    ...keyRes,
+                    [key]: indicatorRes.data[key][index],
+                  }
+                }, {}),
+              },
+            ]
+          }
+          return res
+        }, [])
+      : null
+  }
+
+  // 初始化
+  const init = async () => {
+    // 1.获取K线数据
+    klineData.value = await getKlineData()
+    // 2.默认Tips激活展示最后一条
+    activeIndex.value = klineData.value.length - 1
+    // 3.获取指标线具体数据
+    indicatorData.value = await getIndicatorData(klineData.value)
+    // 4.获取指标相关配置
+    indicatorConfigList.value = (await getIndicatorConfigList()).data
+    // 5.获取图表配置
+    option.value = await getOption({
+      kLineData: klineData.value,
+      indicatorData: indicatorData.value,
+      indicator: props.indicator,
+      indicatorConfigList: indicatorConfigList.value,
+      defaultShowBarCount: 200,
+    })
+  }
+
+  // 图表高亮，用于记录当前高亮tooltip
+  const highlight = (data: any, chart: EChartsType) => {
+    if (data) {
+      // 图表内部移动
+      activeIndex.value =
+        typeof data?.batch[0]?.dataIndex === 'number' ? data?.batch[0]?.dataIndex : -1
+    } else {
+      // 移出图表
+      const chartOptions: EChartsOption = chart.getOption() as EChartsOption
+      if (chartOptions.dataZoom instanceof Array) {
+        activeIndex.value = chartOptions.dataZoom[0].endValue as number
+      }
+    }
+  }
+  // 默认区域刷选
+  const afterInit = (chart: EChartsType) => {
+    /**
+     * 获取匹配用户选择的交易日期对应X轴的索引,用于刷选范围区域
+     * 匹配思路:
+     * 1.时间轴均转换为年月日字符串做对比,相等则算匹配成功
+     * 2.特殊周期K线需要特殊处理:
+     *    [1w]:时间需要均转换成所处星期的星期五日期,判断它们星期五日期是否相等
+     *    [1m,5m,15m,30m,60m]:包含前一交易日21点后的,排除掉交易日期21点后的
+     */
+    const { tradeDate, frequency } = props
+    const xAxisData = option.value.xAxis.data
+    let brushXIndexList: Array<number> = []
+    // 长周期判断
+    xAxisData.forEach((xItem: number, index: number) => {
+      // X轴年月日
+      const xItemDate = dayjs(xItem * 1000).format('YYYY-MM-DD')
+      xItemDate === tradeDate && brushXIndexList.push(index)
+      // 如果是周线,则需要判断两者周五日期是否相等
+      if (frequency === '1w') {
+        dayjs(xItemDate).day(5).format('YYYY-MM-DD') ===
+          dayjs(tradeDate).day(5).format('YYYY-MM-DD') && brushXIndexList.push(index)
+      }
+    })
+    const shortFreq = ['1m', '5m', '15m', '30m', '60m']
+    // 短周期判断
+    if (shortFreq.includes(frequency)) {
+      // 拿到上一个交易日
+      const lastTradeDateIndex = brushXIndexList[0] - 1
+      const lastTradeDate = dayjs(xAxisData[lastTradeDateIndex] * 1000).format('YYYY-MM-DD')
+      // 包含了上一个交易日21点之后的数据索引数组
+      const lastTrade21List: Array<number> = []
+      xAxisData.forEach((xItem: number, index: number) => {
+        if (
+          dayjs(xItem * 1000).format('YYYY-MM-DD') === lastTradeDate &&
+          dayjs(xItem * 1000).isSameOrAfter(`${lastTradeDate} 21:00:00`)
+        ) {
+          lastTrade21List.push(index)
+        }
+      })
+      // 排除匹配到交易日期21点之后的数据索引
+      const finallyDateIndex = brushXIndexList[brushXIndexList.length - 1]
+      const finallyDate = dayjs(xAxisData[finallyDateIndex] * 1000).format('YYYY-MM-DD 21:00:00')
+      brushXIndexList = [...lastTrade21List, ...brushXIndexList].filter(item => {
+        return dayjs(xAxisData[item] * 1000).isBefore(finallyDate)
+      })
+    }
+    chart.dispatchAction({
+      type: 'brush',
+      areas: [
+        {
+          brushType: 'lineX',
+          coordRange: [brushXIndexList[0], brushXIndexList.slice(-1)[0]],
+          xAxisIndex: 0,
+        },
+      ],
+    })
+  }
+
+  onMounted(() => {
+    init()
+  })
+</script>
+
+<style lang="scss" scoped>
+  .st-kline {
+    width: 100%;
+    height: 100%;
+    background: #000;
+    position: relative;
+    &-header {
+      position: absolute;
+      padding: 2px 0 0 4px;
+    }
+  }
+</style>

package/packages/Kline/kline_theme_dark.json

@@ -0,0 +1,30 @@
+
+{
+  "candlestick": {
+    "itemStyle": {
+      "color": "transparent",
+      "color0": "#00FFFF",
+      "borderColor": "#FF0000",
+      "borderColor0": "#00FFFF",
+      "borderWidth": 1
+    }
+  },
+  "categoryAxis": {
+    "splitLine": {
+      "lineStyle": {
+        "color": [
+          "#333"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "splitLine": {
+      "lineStyle": {
+        "color": [
+          "#333"
+        ]
+      }
+    }
+  }
+}

package/packages/Kline/kline_theme_light.json

@@ -0,0 +1,30 @@
+
+{
+  "candlestick": {
+    "itemStyle": {
+      "color": "transparent",
+      "color0": "#00FFFF",
+      "borderColor": "#FF0000",
+      "borderColor0": "#00FFFF",
+      "borderWidth": 1
+    }
+  },
+  "categoryAxis": {
+    "splitLine": {
+      "lineStyle": {
+        "color": [
+          "#333"
+        ]
+      }
+    }
+  },
+  "valueAxis": {
+    "splitLine": {
+      "lineStyle": {
+        "color": [
+          "#333"
+        ]
+      }
+    }
+  }
+}

package/packages/Kline/type.d.ts

@@ -0,0 +1,34 @@
+// K线数据类型
+export type KlineDataItem = [number, number, number, number, number, number, number, number, number]
+export type KlineDataType = Array<KlineDataItem>
+
+// 指标线数据类型
+export interface IndicatorDataItem {
+  datetime: number;
+  [key: string]: number;
+}
+export type IndicatorDataType = Array<IndicatorDataItem>
+
+export interface InOption {
+  kLineData: KlineDataItem[];
+  indicatorData: IndicatorDataItem[];
+  indicator: string;
+  indicatorList: any;
+  defaultShowBarCount: number;
+}
+
+// 指标线配置项数据类型
+export interface IndicatorConfigType {
+  [key: string]: {
+    [key: string]: string
+  };
+}
+
+// 获取图表配置项入参类型
+export interface InOption {
+  kLineData: KlineDataType;
+  indicatorData: IndicatorDataType;
+  indicator: string;
+  indicatorConfigList: any;
+  defaultShowBarCount: number;
+}

package/packages/Kline/utils.ts

@@ -0,0 +1,272 @@
+import axios from 'axios'
+import dayjs from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+import type { KlineDataItem, IndicatorDataItem, InOption } from './type.d.ts'
+dayjs.extend(isSameOrAfter)
+
+/**
+ * @description: 获取固定间隔后的交易日
+ * @param {string} currentDate 初始交易日期
+ * @param {number | undefined} days 间隔天数
+ * @return {*}
+ */
+const getTradeByAddDays = (currentDate: string, days: number | undefined) => {
+  return axios({
+    headers: {
+      Token: '8c9e48f3bfff810c3403829233f76515',
+    },
+    method: 'post',
+    url: '/proxy/review/review/getTradeByAddDays',
+    data: {
+      currentDate,
+      days,
+    },
+  })
+}
+
+/**
+ * @description: 获取K线数据
+ * @param {string} code 品种代码
+ * @param {number} bar_count 请求数据条数
+ * @param {string} tradeDate 交易日期
+ * @param {string} frequency 周期
+ * @return {*}
+ */
+export const getKline = async (
+  code: string,
+  bar_count: number,
+  tradeDate: string,
+  frequency: string
+) => {
+  // 周期对应的间隔交易日
+  const timeIntervalMap = new Map([
+    ['1m', 1],
+    ['5m', 1],
+    ['15m', 4],
+    ['30m', 8],
+    ['60m', 16],
+    ['1d', 80],
+    ['1w', 80],
+  ])
+  // 根据周期判断逻辑请求到对应的间隔末尾交易日
+  const interval = timeIntervalMap.get(frequency)
+  const res = await getTradeByAddDays(tradeDate, interval)
+  const nowDate = dayjs().format('YYYY-MM-DD')
+  const resDate = res.data.body.tradeDate.split(' ')[0]
+  let dt: null | string = null
+  // 判断接口获取到的交易日是否大于等于今日,如果为真,则以今日日期为末尾
+  if (dayjs(resDate).isSameOrAfter(nowDate)) {
+    dt = dayjs().format('YYYY-MM-DD HH:mm:ss')
+  } else {
+    dt = `${resDate} 23:59:59`
+  }
+  return axios(
+    `http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`
+  )
+}
+
+/**
+ * @description: 获取指标线下拉列表类型数据以及相关样式配置
+ * @return {*}
+ */
+export const getIndicatorConfigList = () => {
+  return axios('http://116.62.161.92:8005/get_indicator')
+}
+
+/**
+ * @description: 获取指标线具体数据
+ * @param {string} code 品种代码
+ * @param {string} start_date 开始日期
+ * @param {string} end_date 结束日期
+ * @param {string} frequency 周期
+ * @param {string} indicator 指标类型
+ * @return {*}
+ */
+export const getIndicator = (
+  code: string,
+  start_date: string,
+  end_date: string,
+  frequency: string,
+  indicator: string
+) => {
+  return axios(
+    `http://116.62.161.92:8005/realtime_indicator?code=${code}&start_date=${start_date}&end_date=${end_date}&indicator=${indicator}&frequency=${frequency}`
+  )
+}
+
+/**
+ * @description: 格式化数字:保留后三位小数
+ * @param {number} value
+ * @return {*}
+ */
+export const formatValue = (value: number) => {
+  return value || value === 0 ? Math.round(value * 1000) / 1000 : null
+}
+
+/**
+ * @description: 格式化价格:万 || 亿 || 万亿
+ * @param {number} value
+ * @return {*}
+ */
+export const formatPrice = (value: number) => {
+  if (value >= 1000000000000) {
+    return `${(value / 1000000000000).toFixed(2)}万亿`
+  } else if (value >= 100000000) {
+    return `${(value / 100000000).toFixed(2)}亿`
+  } else if (value >= 10000) {
+    return `${(value / 10000).toFixed(2)}万`
+  } else {
+    return value.toFixed(2)
+  }
+}
+
+/**
+ * @description: 格式化K线图配置项
+ * @param {InOption} data
+ * @return {*}
+ */
+export const getOption = async (data: InOption) => {
+  const { kLineData, indicatorData, indicator, indicatorConfigList, defaultShowBarCount } = data
+  // 处理k线数据，x轴数据
+  const candlestickData: any[] = [] // k线数据
+  const xAxisData: number[] = [] // x轴数据
+  const kLineLength = kLineData.length // k线条数
+
+  kLineData.forEach((item: KlineDataItem) => {
+    candlestickData.push([
+      formatValue(item[1]),
+      formatValue(item[4]),
+      formatValue(item[3]),
+      formatValue(item[2]),
+    ])
+    xAxisData.push(item[0])
+  })
+
+  // 处理指标线数据
+  const indicatorInfo = indicatorConfigList[indicator]
+  const lineSeries = indicatorData
+    ? Object.keys(indicatorData[0])
+        .filter(i => i !== 'datetime')
+        .map((key: string) => {
+          let color = 'rgba(238, 238, 238, 0.5)'
+          if (indicatorInfo && indicatorInfo[key]) {
+            color = `#${indicatorInfo[key].split('#')[1]}`
+          }
+          return {
+            name: key,
+            type: 'line',
+            symbol: 'none',
+            data: indicatorData.map(i => i[key]),
+            lineStyle: {
+              width: 1,
+            },
+            itemStyle: {
+              color,
+            },
+          }
+        })
+    : []
+
+  return {
+    dataset: {
+      id: 'data',
+      source: {
+        kLineData,
+      },
+    },
+    grid: {
+      left: '50px',
+      top: '50px',
+      right: '30px',
+      bottom: '30px',
+    },
+    tooltip: {
+      trigger: 'axis',
+      showContent: false,
+      axisPointer: {
+        type: 'cross',
+        label: {
+          formatter: (data: any) => {
+            const { axisDimension, value } = data
+            if (axisDimension === 'x') {
+              return dayjs(new Date(value * 1000)).format('YYYY-MM-DD HH:mm')
+            } else {
+              return String(formatValue(value))
+            }
+          },
+        },
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: xAxisData,
+      axisLine: {
+        lineStyle: {
+          color: 'red',
+        },
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: 'dotted',
+        },
+      },
+      axisLabel: {
+        show: true,
+        formatter: data => dayjs(new Date(data * 1000)).format('YYYY-MM-DD HH:mm'),
+      },
+    },
+    yAxis: [
+      {
+        index: 0,
+        min: 'dataMin',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'red',
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dotted',
+          },
+        },
+        axisLabel: {
+          formatter: (value: number) => formatValue(value),
+        },
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        xAxisIndex: [0, 0],
+        startValue: kLineLength >= defaultShowBarCount ? kLineLength - defaultShowBarCount : 0,
+        endValue: kLineLength - 1,
+      },
+    ],
+    series: [
+      {
+        name: 'k线',
+        type: 'candlestick',
+        data: candlestickData,
+      },
+      ...lineSeries,
+    ],
+    toolbox: {
+      show: false,
+    },
+    brush: {
+      xAxisIndex: 'all',
+      brushLink: 'all',
+      transformable: false,
+      outOfBrush: {
+        colorAlpha: 1,
+      },
+      brushStyle: {
+        color: 'rgba(120,140,180,0)',
+        borderColor: 'rgba(255,255,255,0.4)',
+      },
+    },
+  }
+}

package/packages/List/index.ts

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

package/packages/Table/components/Button/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <template v-if="show">
+    <el-popconfirm
+      v-if="option.needCheck"
+      :title="option.needCheck.title"
+      @confirm="option.onClick(scope.row, scope.$index)"
+    >
+      <template #reference>
+        <el-button
+          :type="option.type"
+          :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
+        >
+          {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
+        </el-button>
+      </template>
+    </el-popconfirm>
+    <el-button
+      v-else
+      :type="option.type"
+      :disabled="typeof option.disabled === 'function' ? option.disabled(scope.row, scope.$index) : option.disabled"
+      @click="option.onClick(scope.row, scope.$index)"
+    >
+      {{ typeof option.text === 'function' ? option.text(scope.row, scope.$index) : option.text }}
+    </el-button>
+  </template>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  const props = defineProps({
+    option: {
+      type: Object,
+      required: true
+    },
+    scope: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const show = computed(() => {
+    const { option, scope } = props
+    if(typeof option.show === 'function') {
+      return option.show(scope.row, scope.$index)
+    } else if (option.show === false) {
+      return false
+    }
+    return true
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/Table/components/Formatter/index.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    :style="typeof option.style === 'function' ? option.style(scope.row[option.prop], scope.row) : option.style"
+  >
+    {{
+      typeof option.formatter === 'function' ? option.formatter(scope.row[option.prop], scope.row) : scope.row[option.prop]
+    }}
+  </div>
+</template>
+
+<script setup lang="ts">
+
+  defineProps({
+    option: {
+      type: Object,
+      required: true,
+    },
+    scope: {
+      type: Object,
+      required: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+</style>

package/packages/Table/index.ts

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