st-comp 0.0.146 → 0.0.147

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

@@ -1,701 +0,0 @@
-<!-- 单品种多周期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 } from "../api.ts";
-import { mainIndicatorList } from "st-func";
-
-dayjs.extend(isSameOrAfter);
-
-const props = defineProps({
-  deBugValue: {
-    type: Number,
-  },
-});
-
-// K线组件数组[多周期]
-interface multiCycleKlineType {
-  loading: boolean;
-  isSelect: 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 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,
-  dynamicLoadConfig: {
-    historyVisible: false,
-    historyLoadCallBack: () => {},
-    futureVisible: false,
-  },
-});
-
-onMounted(() => {
-  console.log("---------单品种多周期组件: onMounted挂载成功---------");
-});
-
-// 初始化
-const componentInit = async () => {
-  try {
-    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.body[1002].map((item: any) => {
-    return {
-      loading: true,
-      cycle: Number(item.dictCode),
-      cycleName: item.dictName,
-      sellBuyType: 1,
-      sellBuyTypeName: "开平",
-      klineData: [],
-      markData: [],
-      netWorkErrorMsg: "",
-      indicator: mainIndicatorList.find((i: any) => i.value === "DKX_EMA"),
-      indicatorName: "DKX_EMA",
-    };
-  });
-};
-/**
- * @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 = mainIndicatorList.find((i: any) => i.value === item.indicatorName);
-};
-
-// 画线预警
-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"
-        @mousemove="item.isSelect = true"
-        @mouseout="item.isSelect = false"
-        :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 mainIndicatorList"
-                :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"
-          :isSelect="item.isSelect"
-          :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>