st-comp 0.0.13 → 0.0.16

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

@@ -0,0 +1,728 @@
+<!-- 单品种多周期K线组件-Demo -->
+<script setup lang="ts">
+  import { RefreshRight } from '@element-plus/icons-vue'
+  import { ref, onMounted, onUnmounted, watch } from 'vue'
+  import dayjs from 'dayjs'
+  import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
+  import { ElMessage } from 'element-plus'
+  import 'element-plus/dist/index.css'
+  import { formatValue } from '../../../../packages/Kline/utils'
+  import { getSingleCycleSingleVariety, getDict, getIndicatorConfig } from '../api.ts'
+
+  dayjs.extend(isSameOrAfter)
+
+  const props = defineProps({
+    deBugValue: {
+      type: Number,
+    },
+  })
+
+  // K线组件数组[多周期]
+  interface multiCycleKlineType {
+    loading: boolean
+    cycle: string // 周期
+    cycleName: string // 周期名称
+    sellBuyType: number // 开平/买卖类型
+    sellBuyTypeName: string // 开平/买卖
+    klineData: any[] // K线接口数据
+    markData: any[] // 点位接口数据
+    netWorkErrorMsg: string
+    indicatorName: string
+    indicator: object
+  }
+  const multiCycleKline = ref<multiCycleKlineType[]>([])
+
+  // 筛选条件相关参数
+  const sellBuyTypeOptions = ref<any>([
+    { label: '开平', value: 1 },
+    { label: '买卖', value: 2 },
+  ])
+  const indicatorOptions = ref<any>([])
+
+  // 接口原生-点位数据
+  const originPointData = ref<any>([])
+
+  // K线组件统一入参
+  const lineData = ref<any>([])
+  const brushRange = ref<any>(['2024-01-04 10:10:00', '2024-01-04 21:40:00'])
+  const defaultMenuData = ref([
+    {
+      label: '画线预警',
+      callBack: (echartsInstance: any, cursorPenVisible: any) => createWarning(echartsInstance, cursorPenVisible),
+    },
+  ])
+  const config = ref({
+    totalBarCount: 1900,
+    preBarCount: 100,
+  })
+
+  onMounted(() => {
+    console.log('---------单品种多周期组件: onMounted挂载成功---------')
+  })
+
+  // 初始化
+  const componentInit = async () => {
+    try {
+      await getIndicatorOptions()
+      await getDictCycle()
+      await getKlineData()
+      await getKlineExtendData()
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  /**
+   * @description: 获取通用字典[周期],初始化多周期结构
+  */
+  const getDictCycle = async () => {
+    const params = {
+      dictIds: [1002],
+    }
+    const res = await getDict(params)
+    multiCycleKline.value = res.data[1002].map((item: any) => {
+      return {
+        loading: true,
+        cycle: Number(item.dictCode),
+        cycleName: item.dictName,
+        sellBuyType: 1,
+        sellBuyTypeName: '开平',
+        klineData: [],
+        markData: [],
+        netWorkErrorMsg: '',
+        indicator: indicatorOptions.value.find((i: any) => i.value === 'DKX_EMA').info,
+        indicatorName: 'DKX_EMA',
+      }
+    })
+  }
+  /**
+   * @description: 获取指标配置表
+   */
+  const getIndicatorOptions = async () => {
+    const res = await getIndicatorConfig()
+    indicatorOptions.value = Object.keys(res.data).reduce((result: any, key: any) => {
+      if (res.data[key].WINDOW === '#0') {
+        result.push({
+          value: key,
+          label: key,
+          info: res.data[key],
+        })
+      }
+      return result
+    }, [])
+  }
+  /**
+   * @description: 获取K线数据 / 点位数据
+   */
+  const getKlineData = async () => {
+    multiCycleKline.value.forEach(async (item: any) => {
+      item.loading = true
+
+      // ---------K线数据逻辑----------
+      const params = {
+        right: 1, // 复权方式
+        variety: 'au8888', // 品种
+        cycle: item.cycle, // 周期
+        endTime: '2024-01-04 23:59:59', // 结束时间
+        limit: config.value.totalBarCount + config.value.preBarCount, // 总条数
+        queryType: 1, // 0-按时间，1-按结束时间，2-按开始时间
+      }
+      const res = await getSingleCycleSingleVariety(params)
+      item.klineData = res.data.body
+      // ---------点位数据逻辑---------
+      const resultApi = [
+        {
+          key: 'sellBuy',
+          data: [
+            {
+              tradeAction: '开', // 交易动作
+              direction: '多', // 交易方向
+              tradeType: '开多', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 22:30:00', // 交易时间
+              tooltip: '<div>买卖点1</div>',
+            },
+            {
+              tradeAction: '平', // 交易动作
+              direction: '空', // 交易方向
+              tradeType: '平空', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 22:40:00', // 交易时间
+              tooltip: '<div>买卖点2</div>',
+            },
+            {
+              tradeAction: '开', // 交易动作
+              direction: '空', // 交易方向
+              tradeType: '开空', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 23:50:00', // 交易时间
+              tooltip: '<div>买卖点3</div>',
+            },
+          ],
+        },
+        {
+          key: 'openClose',
+          data: [
+            {
+              tradeAction: '开', // 交易动作
+              direction: '多', // 交易方向
+              tradeType: '开多', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 22:30:00', // 交易时间
+              tooltip: '<div>开平点1</div>',
+            },
+            {
+              tradeAction: '平', // 交易动作
+              direction: '空', // 交易方向
+              tradeType: '平空', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 22:40:00', // 交易时间
+              tooltip: '<div>开平点2</div>',
+            },
+            {
+              tradeAction: '开', // 交易动作
+              direction: '空', // 交易方向
+              tradeType: '开空', // 交易类型
+              amount: 2, // 手数
+              part: 2, // 份数
+              time: '2024-01-04 23:50:00', // 交易时间
+              tooltip: '<div>买卖点3</div>',
+            },
+          ],
+        },
+        {
+          key: 'signal',
+          data: [],
+        },
+      ]
+      const klineTimeAry = item.klineData.map((item: any) => item[0])
+      originPointData.value = resultApi.reduce((result: any, next) => {
+        const { data } = next
+        result.push({
+          key: next.key,
+          data: data.map((i: any) => {
+            const time = klineTimeAry.find((klineTime: string) => dayjs(klineTime).isSameOrAfter(i.time))
+            return {
+              ...i,
+              time,
+            }
+          }),
+        })
+        return result
+      }, [])
+      sellBuyTypeChange(item)
+
+      item.loading = false
+    })
+  }
+  /**
+   * @description: 获取K线额外画线数据
+   */
+  const getKlineExtendData = async () => {
+    lineData.value = [
+      {
+        key: 'warning',
+        data: [
+          {
+            value: 479,
+            text: 479,
+            // 自定义信息
+            info: {},
+            // 自定义配置
+            config: {
+              draggable: true,
+            },
+          },
+        ],
+        ondragstart: (params: any, info: any) => {
+          console.log('拖拽开始', params, info)
+        },
+        ondragend: (params: any, info: any, yAxisValue: number) => {
+          console.log('拖拽结束', params, info, yAxisValue)
+          ElMessage.success('预警线修改更新成功!')
+        },
+        oncontextmenu: (params: any, info: any, menuData: any) => {
+          console.log('右击了', params, info)
+          menuData.value = [
+            {
+              label: '删除画线',
+              callBack: () => ElMessage.success('预警线删除成功!'),
+            },
+            {
+              label: '修改画线',
+              callBack: () => ElMessage.success('预警线修改成功!'),
+            },
+          ]
+        },
+      },
+      {
+        key: 'position',
+        data: [
+          {
+            value: 480,
+            text: '持仓:192.14万(1份) 数量:4手 方向:多 浮动盈亏:-1280.00',
+            // 自定义信息
+            info: {},
+            // 自定义配置
+            config: {},
+          },
+        ],
+      },
+      {
+        key: 'condition',
+        data: [
+          {
+            value: 482,
+            text: '[多损][多盈] 开多↓2269 1份(22手)',
+            profitValue: 483,
+            profitText: '上破484',
+            lossValue: 481,
+            lossText: '下破482',
+            // 自定义信息
+            info: {},
+            // 自定义配置
+            config: {},
+          },
+        ],
+      },
+    ]
+  }
+  /**
+   * @description: 买卖点,开平点切换
+   */
+  const sellBuyTypeChange = (item: any) => {
+    if (sellBuyTypeOptions.value.length > 0) {
+      item.sellBuyTypeName = sellBuyTypeOptions.value.find((i: any) => i.value === item.sellBuyType).label ?? null
+    }
+    if (item.sellBuyType === 1) {
+      item.markData = originPointData.value.filter((i: any) => {
+        return i.key !== 'sellBuy'
+      })
+    } else {
+      item.markData = originPointData.value.filter((i: any) => {
+        return i.key !== 'openClose'
+      })
+    }
+  }
+  /**
+   * @description: 切换指标
+   */
+  const indicatorChange = (item: any) => {
+    item.indicator = indicatorOptions.value.find((i: any) => i.value === item.indicatorName).info
+  }
+
+  // 画线预警
+  const createWarning = (echartsInstance: any, cursorPenVisible: any) => {
+    // 1.打开画笔模式,并修改指示器样式[画预览线]
+    cursorPenVisible.value = true
+    const echartsOptions = echartsInstance.getOption()
+    const oldTooltip = (echartsOptions.tooltip as Array<any>)[0]
+    echartsInstance.setOption({
+      ...echartsOptions,
+      // 指示器样式
+      tooltip: {
+        ...oldTooltip,
+        // 坐标轴指示器
+        axisPointer: {
+          // 保留原有部分配置
+          ...oldTooltip.axisPointer,
+          // X轴指示线的宽度
+          lineStyle: {
+            width: 0,
+          },
+          // Y轴指示线的宽度
+          crossStyle: {
+            width: 2,
+          },
+          // 文本标签
+          label: {
+            // 保留原有部分配置
+            ...oldTooltip.axisPointer.label,
+            // 颜色改为透明
+            backgroundColor: 'transparent',
+            // 仅显示Y轴值
+            formatter: (data: any) => {
+              const { axisDimension, value } = data
+              if (axisDimension === 'y') {
+                return String(formatValue(value))
+              }
+              return ''
+            },
+          },
+        },
+      },
+    })
+    // 2.获取当前列数据并发送请求至后端记录
+    const handleClick = (el: any) => {
+      // 关闭画笔模式,并移除echarts点击事件
+      cursorPenVisible.value = false
+      echartsInstance.getZr().off('mousedown', handleClick)
+      const yAxisValue = echartsInstance.convertFromPixel({ yAxisIndex: 0 }, el.offsetY)
+      const newWarnPrice = Math.round(yAxisValue * 1000) / 1000
+      // 3.恢复指示器样式
+      echartsInstance.setOption({
+        ...echartsOptions,
+        // 指示器样式
+        tooltip: {
+          ...oldTooltip,
+          axisPointer: {
+            ...oldTooltip.axisPointer,
+            lineStyle: {
+              width: 1,
+            },
+            crossStyle: {
+              width: 1,
+            },
+            label: {
+              ...oldTooltip.axisPointer.label,
+              backgroundColor: null,
+            },
+          },
+        },
+      })
+      // 4.发送保存预警线请求
+      lineData.value[0].data.push({
+        value: newWarnPrice,
+        text: newWarnPrice,
+        // 自定义信息
+        info: {},
+        // 自定义配置
+        config: {
+          draggable: true,
+        },
+      })
+      ElMessage.success('画线预警成功!')
+    }
+    // 绑定echarts点击事件
+    echartsInstance.getZr().on('mousedown', handleClick)
+  }
+
+  watch(
+    () => props.deBugValue,
+    (newValue: any) => {
+      if (newValue === 1) {
+        // 正常模式
+        componentInit()
+      } else {
+        multiCycleKline.value.forEach((item: any) => {
+          if (newValue === 2) {
+            // 网络故障
+            item.loading = true
+            setTimeout(() => {
+              item.netWorkErrorMsg = '网络加载失败,请刷新重试'
+              item.loading = false
+            }, 1000)
+          } else if (newValue === 3) {
+            // 空数据
+            item.netWorkErrorMsg = ''
+            item.loading = true
+            setTimeout(() => {
+              item.klineData = []
+              item.loading = false
+            }, 1000)
+          }
+        })
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  onUnmounted(() => {
+    console.log('---------单品种多周期组件: onUnmounted卸载成功---------')
+  })
+
+  const reFresh = async (item: any) => {
+    item.netWorkErrorMsg = ''
+    item.loading = true
+
+    // ---------K线数据逻辑----------
+    const params = {
+      right: 1, // 复权方式
+      variety: 'au8888', // 品种
+      cycle: item.cycle, // 周期
+      endTime: '2024-01-04 23:59:59', // 结束时间
+      limit: config.value.totalBarCount + config.value.preBarCount, // 总条数
+      queryType: 1, // 0-按时间，1-按结束时间，2-按开始时间
+    }
+    const res = await getSingleCycleSingleVariety(params)
+    item.klineData = res.data.body
+    // ---------点位数据逻辑---------
+    const resultApi = [
+      {
+        key: 'sellBuy',
+        data: [
+          {
+            tradeAction: '开', // 交易动作
+            direction: '多', // 交易方向
+            tradeType: '开多', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 22:30:00', // 交易时间
+            tooltip: '<div>买卖点1</div>',
+          },
+          {
+            tradeAction: '平', // 交易动作
+            direction: '空', // 交易方向
+            tradeType: '平空', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 22:40:00', // 交易时间
+            tooltip: '<div>买卖点2</div>',
+          },
+          {
+            tradeAction: '开', // 交易动作
+            direction: '空', // 交易方向
+            tradeType: '开空', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 23:50:00', // 交易时间
+            tooltip: '<div>买卖点3</div>',
+          },
+        ],
+      },
+      {
+        key: 'openClose',
+        data: [
+          {
+            tradeAction: '开', // 交易动作
+            direction: '多', // 交易方向
+            tradeType: '开多', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 22:30:00', // 交易时间
+            tooltip: '<div>开平点1</div>',
+          },
+          {
+            tradeAction: '平', // 交易动作
+            direction: '空', // 交易方向
+            tradeType: '平空', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 22:40:00', // 交易时间
+            tooltip: '<div>开平点2</div>',
+          },
+          {
+            tradeAction: '开', // 交易动作
+            direction: '空', // 交易方向
+            tradeType: '开空', // 交易类型
+            amount: 2, // 手数
+            part: 2, // 份数
+            time: '2024-01-04 23:50:00', // 交易时间
+            tooltip: '<div>买卖点3</div>',
+          },
+        ],
+      },
+      {
+        key: 'signal',
+        data: [],
+      },
+    ]
+    const klineTimeAry = item.klineData.map((item: any) => item[0])
+    originPointData.value = resultApi.reduce((result: any, next) => {
+      const { data } = next
+      result.push({
+        key: next.key,
+        data: data.map((i: any) => {
+          const time = klineTimeAry.find((klineTime: string) => dayjs(klineTime).isSameOrAfter(i.time))
+          return {
+            ...i,
+            time,
+          }
+        }),
+      })
+      return result
+    }, [])
+    sellBuyTypeChange(item)
+
+    item.loading = false
+
+    getKlineExtendData()
+  }
+</script>
+
+<template>
+  <div id="single-cycle-single-variety">
+    <template v-if="multiCycleKline.length">
+      <div
+        v-for="(item, index) in multiCycleKline"
+        :key="index"
+        class="st-Kline"
+        v-loading="item.loading"
+        element-loading-text="正在加载数据中,请稍等..."
+      >
+        <!-- 功能区 -->
+        <div class="kline-header">
+          <!-- 品种名称 -->
+          <div class="kline-header-item">黄金 au8888</div>
+          <!-- 周期名称 -->
+          <div class="kline-header-item">
+            <span>{{ item.cycleName }}</span>
+          </div>
+          <!-- 指标展示 + 选择 -->
+          <div class="kline-header-item sellBuySelect">
+            <span>{{ item.indicatorName }}</span>
+            <el-select
+              v-model="item.indicatorName"
+              popper-class="element-dark"
+              @change="indicatorChange(item)"
+            >
+              <el-option
+                v-for="(item, index) in indicatorOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+          <!-- 开平/买卖展示 + 选择 -->
+          <div class="kline-header-item sellBuySelect">
+            <span>{{ item.sellBuyTypeName }}</span>
+            <el-select
+              v-model="item.sellBuyType"
+              popper-class="element-dark"
+              @change="sellBuyTypeChange(item)"
+            >
+              <el-option
+                v-for="(item, index) in sellBuyTypeOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
+        <!-- K线本体 -->
+        <st-kline
+          v-if="!item.loading && item.klineData.length && !item.netWorkErrorMsg"
+          class="kline"
+          :indicator="item.indicator"
+          :klineData="item.klineData"
+          :markData="item.markData"
+          :lineData="lineData"
+          :brushRange="brushRange"
+          :defaultMenuData="defaultMenuData"
+          :config="config"
+        />
+        <!-- 网络请求错误时 -->
+        <div
+          v-if="item.netWorkErrorMsg"
+          class="netWorkError"
+        >
+          <span>{{ item.netWorkErrorMsg }}</span>
+          <el-button
+            size="small"
+            @click="reFresh(item)"
+            :icon="RefreshRight"
+            >刷新</el-button
+          >
+        </div>
+        <!-- 空数据时 -->
+        <div
+          class="empty"
+          v-else-if="!item.loading && item.klineData.length === 0"
+        >
+          <el-empty description="暂无数据" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  #single-cycle-single-variety {
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(3, 33%);
+    grid-template-rows: repeat(6, 33%);
+    grid-gap: 4px;
+    overflow: hidden;
+    .st-Kline {
+      display: flex;
+      flex-direction: column;
+      border-radius: 2px;
+      box-sizing: border-box;
+      background-color: black;
+      color-scheme: dark;
+      --el-mask-color: rgba(0, 0, 0, 0.8);
+      .kline-header {
+        font-size: 12px;
+        display: flex;
+        align-items: center;
+        color: white;
+        border-bottom: 1px solid rgb(153, 153, 153);
+        .kline-header-item {
+          display: flex;
+          align-items: center;
+          border-right: 1px solid rgb(153, 153, 153);
+          padding: 6px;
+          box-sizing: border-box;
+        }
+        // 功能区: 开平/买卖
+        .sellBuySelect {
+          :deep(.el-select) {
+            margin-left: 6px;
+            width: 12px;
+            .el-input__wrapper {
+              height: 12px;
+              padding: 0;
+              border-radius: 50%;
+              background-color: #ccc;
+            }
+            .el-input__inner {
+              width: 0;
+            }
+            .el-select__icon {
+              color: black;
+              width: 12px;
+              height: 12px;
+              margin-left: 0;
+            }
+          }
+        }
+      }
+      .kline {
+        flex: 1;
+      }
+      .netWorkError {
+        color: white;
+        font-weight: 600;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        font-size: 18px;
+        .el-button {
+          margin-top: 10px;
+          background-color: rgb(0, 0, 0);
+          color: white;
+        }
+      }
+      .empty {
+        color: white;
+        font-weight: 600;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        :deep(.el-empty__image) {
+          svg {
+            width: 100px;
+          }
+        }
+      }
+    }
+  }
+</style>