st-comp 0.0.13 → 0.0.16

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

@@ -0,0 +1,663 @@
+<!-- 单品种单周期K线组件-Demo -->
+<script setup lang="ts">
+  import { RefreshRight } from '@element-plus/icons-vue'
+  import { ref, onMounted, onUnmounted, computed, 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,
+    },
+  })
+
+  const loading = ref(true)
+  const netWorkErrorMsg = ref('')
+
+  // 筛选条件相关参数
+  const cycle = ref<any>('2')
+  const cycleName = computed(() => {
+    if (cycleOptions.value.length > 0) {
+      return cycleOptions.value.find((item: any) => item.value === cycle.value).label
+    }
+    return null
+  })
+  const cycleOptions = ref<any>([]) // 周期下拉框数据
+
+  const indicator = computed(() => {
+    if (indicatorOptions.value.length > 0) {
+      return indicatorOptions.value.find((item: any) => item.value === indicatorName.value).info
+    }
+    return null
+  })
+  const indicatorName = ref<any>('DKX_EMA')
+  const indicatorOptions = ref<any>([])
+
+  const sellBuyType = ref(1)
+  const sellBuyTypeName = computed(() => {
+    if (sellBuyTypeOptions.value.length > 0) {
+      return sellBuyTypeOptions.value.find((item: any) => item.value === sellBuyType.value).label
+    }
+    return null
+  })
+  const sellBuyTypeOptions = ref<any>([
+    { label: '开平', value: 1 },
+    { label: '买卖', value: 2 },
+  ])
+
+  // 接口原生-点位数据
+  const originPointData = ref<any>([])
+
+  // K线组件入参
+  const klineData = ref<any>([])
+  const markData = ref<any>([])
+  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 {
+      loading.value = true
+      await getIndicatorOptions()
+      await getDictCycle()
+      await getKlineData()
+      await getKlinePointData()
+      loading.value = false
+      await getKlineExtendData()
+    } catch (error) {
+      console.log(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * @description: 获取通用字典[周期]
+  */
+  const getDictCycle = async () => {
+    const params = {
+      dictIds: [1002],
+    }
+    const res = await getDict(params)
+    cycleOptions.value = res.data[1002].map((item: any) => {
+      return {
+        label: item.dictName,
+        value: item.dictCode,
+        data: item,
+      }
+    })
+  }
+  /**
+   * @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 () => {
+    const params = {
+      right: 1, // 复权方式
+      variety: 'au8888', // 品种
+      cycle: cycle.value, // 周期
+      endTime: '2024-01-04 23:59:59', // 结束时间
+      limit: config.value.totalBarCount + config.value.preBarCount, // 总条数
+      queryType: 1, // 0-按时间，1-按结束时间，2-按开始时间
+    }
+    const res = await getSingleCycleSingleVariety(params)
+    klineData.value = res.data.body
+  }
+  /**
+   * @description: 获取点位数据
+   * @todo: 1.获取点位接口数据 2.格式化处理[数据合并,匹配K线时间轴] 建议分开,此处demo所以简写
+   */
+  const getKlinePointData = async () => {
+    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 = klineData.value.map((item: any) => item[0])
+    originPointData.value = resultApi.reduce((result: any, next) => {
+      const { data } = next
+      result.push({
+        key: next.key,
+        data: data.map((item: any) => {
+          const time = klineTimeAry.find((klineTime: string) => dayjs(klineTime).isSameOrAfter(item.time))
+          return {
+            ...item,
+            time,
+          }
+        }),
+      })
+      return result
+    }, [])
+    // 判断展示开平/买卖
+    sellBuyTypeChange()
+  }
+  /**
+   * @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 cycleChange = async () => {
+    try {
+      loading.value = true
+      await getKlineData()
+      await getKlinePointData()
+      loading.value = false
+    } catch (error) {
+      console.log(error)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * @description: 买卖点,开平点切换
+   */
+  const sellBuyTypeChange = () => {
+    if (sellBuyType.value === 1) {
+      markData.value = originPointData.value.filter((item: any) => {
+        return item.key !== 'sellBuy'
+      })
+    } else {
+      markData.value = originPointData.value.filter((item: any) => {
+        return item.key !== 'openClose'
+      })
+    }
+  }
+
+  // 画线预警
+  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,
+        },
+      })
+      console.log(lineData.value[0].data)
+      ElMessage.success('画线预警成功!')
+    }
+    // 绑定echarts点击事件
+    echartsInstance.getZr().on('mousedown', handleClick)
+  }
+
+  watch(
+    () => props.deBugValue,
+    (newValue: any) => {
+      if (newValue === 1) {
+        // 正常模式
+        netWorkErrorMsg.value = ''
+        componentInit()
+      } else if (newValue === 2) {
+        // 网络故障
+        loading.value = true
+        setTimeout(() => {
+          netWorkErrorMsg.value = '网络加载失败,请刷新重试'
+          loading.value = false
+        }, 1000)
+      } else if (newValue === 3) {
+        // 空数据
+        netWorkErrorMsg.value = ''
+        loading.value = true
+        setTimeout(() => {
+          klineData.value = []
+          loading.value = false
+        }, 1000)
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+
+  onUnmounted(() => {
+    console.log('---------单品种单周期组件: onUnmounted卸载成功---------')
+  })
+
+  // 刷新按钮
+  const reFresh = () => {
+    netWorkErrorMsg.value = ''
+    componentInit()
+  }
+</script>
+
+<template>
+  <div id="single-cycle-single-variety">
+    <div
+      class="st-Kline"
+      v-loading="loading"
+      element-loading-text="正在加载数据中,请稍等..."
+    >
+      <!-- 功能区 -->
+      <div class="kline-header">
+        <!-- 品种名称 -->
+        <div class="kline-header-item">黄金 au8888</div>
+        <!-- 周期展示 + 选择 -->
+        <div class="kline-header-item cycleSelect">
+          <span>{{ cycleName }}</span>
+          <el-select
+            v-model="cycle"
+            popper-class="element-dark"
+            @change="cycleChange"
+          >
+            <el-option
+              v-for="(item, index) in cycleOptions"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <!-- 指标展示 + 选择 -->
+        <div class="kline-header-item cycleSelect">
+          <span>{{ indicatorName }}</span>
+          <el-select
+            v-model="indicatorName"
+            popper-class="element-dark"
+          >
+            <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>{{ sellBuyTypeName }}</span>
+          <el-select
+            v-model="sellBuyType"
+            popper-class="element-dark"
+            @change="sellBuyTypeChange"
+          >
+            <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="!loading && klineData.length && !netWorkErrorMsg"
+        class="kline"
+        :indicator="indicator"
+        :klineData="klineData"
+        :markData="markData"
+        :lineData="lineData"
+        :brushRange="brushRange"
+        :defaultMenuData="defaultMenuData"
+        :config="config"
+      />
+      <!-- 网络请求错误时 -->
+      <div
+        v-if="netWorkErrorMsg"
+        class="netWorkError"
+      >
+        <span>{{ netWorkErrorMsg }}</span>
+        <el-button
+          @click="reFresh"
+          :icon="RefreshRight"
+          >刷新</el-button
+        >
+      </div>
+      <!-- 空数据时 -->
+      <div
+        class="empty"
+        v-else-if="!loading && klineData.length === 0"
+      >
+        <el-empty description="暂无数据" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  #single-cycle-single-variety {
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    .st-Kline {
+      height: 100%;
+      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 {
+        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;
+        }
+        // 功能区: 周期
+        .cycleSelect {
+          :deep(.el-select) {
+            margin-left: 6px;
+            width: 16px;
+            .el-input__wrapper {
+              height: 16px;
+              padding: 0;
+              border-radius: 50%;
+              background-color: #ccc;
+            }
+            .el-input__inner {
+              width: 0;
+            }
+            .el-select__icon {
+              color: black;
+              width: 16px;
+              height: 16px;
+              margin-left: 0;
+            }
+          }
+        }
+        // 功能区: 开平/买卖
+        .sellBuySelect {
+          :deep(.el-select) {
+            margin-left: 6px;
+            width: 16px;
+            .el-input__wrapper {
+              height: 16px;
+              padding: 0;
+              border-radius: 50%;
+              background-color: #ccc;
+            }
+            .el-input__inner {
+              width: 0;
+            }
+            .el-select__icon {
+              color: black;
+              width: 16px;
+              height: 16px;
+              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: 24px;
+      .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%;
+      font-size: 24px;
+    }
+  }
+</style>