st-comp 0.0.11 → 0.0.13

package/packages/Kline/index.vue

@@ -34,28 +34,31 @@
   import type { KlineDataType, IndicatorDataType, IndicatorConfigType } from './type.d.ts'
   import { getKline, getIndicator, getIndicatorConfigList, getOption } from './utils'
 
+  /**
+   * 组件接收参数
+   * @param {String} code 品种代码
+   * @param {Number} defaultCount 默认K线总条数
+   * @param {String} tradeDate 最终交易日时间
+   * @param {String} frequency 周期名称
+   * @param {String} indicator 指标线类型
+   */
   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,
@@ -114,16 +117,20 @@
     // 4.获取指标相关配置
     indicatorConfigList.value = (await getIndicatorConfigList()).data
     // 5.获取图表配置
-    option.value = await getOption({
+    const params = {
       kLineData: klineData.value,
       indicatorData: indicatorData.value,
       indicator: props.indicator,
       indicatorConfigList: indicatorConfigList.value,
       defaultShowBarCount: 200,
-    })
+    }
+    option.value = await getOption(params)
   }
 
-  // 图表高亮，用于记录当前高亮tooltip
+  /**
+   * echarts相关事件--
+   * 鼠标移动激活数据时触发,动态更新Tips数据
+  */
   const highlight = (data: any, chart: EChartsType) => {
     if (data) {
       // 图表内部移动
@@ -137,63 +144,12 @@
       }
     }
   }
-  // 默认区域刷选
+  /**
+   * echarts相关事件--
+   * 修改echarts图表配置渲染后,进行的回调
+  */
   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(() => {

package/packages/Kline/type.d.ts

@@ -13,7 +13,7 @@ export interface InOption {
   kLineData: KlineDataItem[];
   indicatorData: IndicatorDataItem[];
   indicator: string;
-  indicatorList: any;
+  indicatorConfigList: any;
   defaultShowBarCount: number;
 }
 

package/packages/Kline/utils.ts

@@ -1,28 +1,6 @@
 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,
-    },
-  })
-}
+import type { KlineDataItem, InOption } from './type.d.ts'
 
 /**
  * @description: 获取K线数据
@@ -38,28 +16,7 @@ export const getKline = async (
   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`
-  }
+  let dt: null | string = dayjs(tradeDate).format('YYYY-MM-DD HH:mm:ss')
   return axios(
     `http://116.62.161.92:8005/history_kline?code=${code}&bar_count=${bar_count}&dt=${dt}&frequency=${frequency}`
   )

package/packages/Pagination/index.vue

@@ -10,8 +10,8 @@
       :page-sizes="pageSizes"
       :layout="layout"
       v-bind="$attrs"
-      @size-change="handlePageChange"
-      @current-change="handlePageChange"
+      @size-change="change"
+      @current-change="change"
     />
   </el-config-provider>
 </template>
@@ -20,7 +20,7 @@
   import zhCn from 'element-plus/es/locale/lang/zh-cn'
   import { computed } from 'vue'
 
-  const emit = defineEmits(['update:pageData', 'handlePageChange'])
+  const emit = defineEmits(['update:pageData', 'change'])
   /**
    * 组件接收参数
    * @param {Object} pageData 页码和每页条数
@@ -72,8 +72,8 @@
   /**
    * 分页数据变动
    */
-  const handlePageChange = () => {
-    emit('handlePageChange', props.pageData)
+  const change = () => {
+    emit('change', props.pageData)
   }
 </script>
 

package/packages/index.ts

@@ -1,4 +1,6 @@
 import { App } from "vue"
+import StChartLayout from "./ChartLayout/index.ts"
+import StDialog from "./Dialog/index.ts"
 import StEcharts from "./Echarts/index.ts"
 import StKline from "./Kline/index.ts"
 import StPagination from "./Pagination/index.ts"
@@ -6,6 +8,8 @@ import StTable from "./Table/index.ts"
         
 export default {
   install(app: App) {
+    StChartLayout.install(app)
+    StDialog.install(app)
     StEcharts.install(app)
     StKline.install(app)
     StPagination.install(app)

package/src/components/Dialog/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :style="{ width: '100%', height: '600px' }">
+    <el-button @click="dialogVisible = true">
+      click to open the Dialog
+    </el-button>
+    <st-dialog v-model="dialogVisible"> </st-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const dialogVisible = ref(false);
+
+</script>
+
+<style lang="scss" scoped></style>

package/src/pages/ChartLayout/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div style="width: 100%;height: 100%;">
+    <st-chartLayout
+      :data="data"
+      :row="2"
+      :col="3"
+    >
+      <template #default="{ data }">
+        <div style="width: 100%;height: 100%;;background: #ccc">{{ data }}</div>
+      </template>
+    </st-chartLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+const data = [
+  1,2,3,4,5,6
+]
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/pages/Dialog/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div :style="{ width: '100%', height: '600px' }">
+    <el-button @click="dialogVisible = true">
+      click to open the Dialog
+    </el-button>
+    <st-dialog v-model="dialogVisible"> </st-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const dialogVisible = ref(false);
+
+</script>
+
+<style lang="scss" scoped></style>

package/src/pages/Kline/index.vue

@@ -1,12 +1,21 @@
 <template>
-  <div>
-    Kline123456
+  <div id="Kline">
+    <st-kline
+      code="ao8888.SHFE"
+      tradeDate="2023-10-13T16:24:28"
+      indicator="DKX_EMA"
+      frequency="1m"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 </script>
 
-<style lang="scss" scoped>
-
+<style scoped>
+#Kline{
+  margin: auto;
+  width: 1200px;
+  height: 600px;
+}
 </style>

package/src/pages/Pagination/index.vue

@@ -2,7 +2,7 @@
   <st-pagination
     :total="total"
     v-model:pageData="pageData"
-    @handlePageChange="getTableData"
+    @change="getTableData"
   />
 </template>
 
@@ -17,7 +17,7 @@
 
   // 模拟表格数据接口请求发送函数
   const getTableData = () => {
-    // console.log('分页数据自动更新:', pageData.value)
+    console.log('分页数据自动更新:', pageData.value)
   }
 </script>
 

package/src/router/routes.ts

@@ -1,4 +1,14 @@
 export default [
+  {
+    path: '/chartLayout',
+    name: 'ChartLayout',
+    component: () => import('../pages/ChartLayout/index.vue'),
+  },
+  {
+    path: '/dialog',
+    name: 'Dialog',
+    component: () => import('../pages/Dialog/index.vue'),
+  },
   {
     path: '/echarts',
     name: 'Echarts',

package/src/components/KlineGroup/index.vue

@@ -1,58 +0,0 @@
-<!-- KlineGroup [默认六宫格]多周期业务K线组件 -->
-<script setup lang="ts">
-  import dayjs from 'dayjs'
-  const props = defineProps({
-    // 品种代码
-    code: {
-      type: String,
-      require: true,
-    },
-    // 周期名称
-    freqNameArray: {
-      type: Array,
-      default: () => {
-        return ['5m', '15m', '30m', '60m', '1d', '1w']
-      },
-    },
-    // 指标类型
-    indicatorType: {
-      type: String,
-      default: 'DKX_EMA',
-    },
-    // 交易日期
-    tradeDate: {
-      type: String,
-      default: dayjs().format('YYYY-MM-DD'),
-    },
-  })
-  console.log('六宫格需要接收到的参数:',props)
-</script>
-
-<template>
-  <h2>传入的交易时间: 2023-10-13</h2>
-  <div class="KlineGroup element-dark">
-    <st-kline
-      class="st-kline"
-      v-for="item in freqNameArray"
-      code="ao8888.SHFE"
-      indicator="DKX_EMA"
-      :frequency="item"
-      tradeDate="2023-10-13"
-    />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-  .KlineGroup {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    height: 800px;
-    justify-content: space-between;
-    align-content: space-between;
-    .st-kline {
-      width: calc(100% / 3 - 2px);
-      height: calc(100% / 2 - 2px);
-    }
-  }
-</style>