st-comp 0.0.146 → 0.0.147

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

@@ -1,924 +0,0 @@
-<!-- 单品种单周期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 {
-  getDiffKLine,
-  queryDiffLineRevelance,
-  getDiffSubKLine,
-  getDict,
-  getNetPositionData,
-  queryPairedRecordByVariety,
-} from "../api.ts";
-import { mainIndicatorList } from "st-func";
-
-dayjs.extend(isSameOrAfter);
-
-const props = defineProps({
-  deBugValue: {
-    type: Number,
-  },
-});
-
-const loading = ref(true);
-const netWorkErrorMsg = ref("");
-
-// 筛选条件相关参数
-const cycle = ref<any>("5");
-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 (mainIndicatorList.length > 0) {
-    return mainIndicatorList.find((item: any) => item.value === indicatorName.value);
-  }
-  return null;
-});
-const indicatorName = ref<any>("DKX_EMA");
-
-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 otherChart = ref("价差分布图");
-const otherChartOptions = ["二腿价格走势图", "二腿价格走势百分比图", "二腿相关度", "价差周期性", "价差分布图"];
-
-// 接口原生-点位数据
-const originPointData = ref<any>([]);
-// 接口原生-二腿相关度数据
-const relevanceOriginData = ref<any>([]);
-// 接口原生-二腿价格趋势数据
-const priceTrendOriginData = ref<any>([]);
-const priceTrendPercentOriginData = ref<any>([]);
-// K线组件入参
-const isSelect = ref(false);
-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 netPositionData = ref<any>([]);
-const defaultMenuData = ref([
-  {
-    label: "画线预警",
-    callBack: (echartsInstance: any, cursorPenVisible: any) => createWarning(echartsInstance, cursorPenVisible),
-  },
-]);
-const relevanceData = computed(() => {
-  let result = [];
-  result = relevanceOriginData.value.reduce((res: any[], item: any) => {
-    res.push([
-      dayjs(item.genTime).format(cycle.value === "6" ? "YYYY-MM-DDT00:00:00" : "YYYY-MM-DDT15:00:00"),
-      item.rel,
-    ]);
-    return res;
-  }, []);
-  return result;
-});
-const priceTrendData = computed(() => {
-  let result = [];
-  result = priceTrendOriginData.value.reduce((res: any[], item: any) => {
-    res.push({
-      name: item.name,
-      data: item.infos.map((i) => {
-        return [dayjs(i.genTime).format("YYYY-MM-DDTHH:mm:ss"), i.close];
-      }),
-    });
-    return res;
-  }, []);
-  return result;
-});
-const priceTrendPercentData = computed(() => {
-  let result = [];
-  result = priceTrendPercentOriginData.value.reduce((res: any[], item: any) => {
-    res.push({
-      name: item.name,
-      data: item.infos.map((i) => {
-        return [dayjs(i.genTime).format("YYYY-MM-DDTHH:mm:ss"), i.close];
-      }),
-    });
-    return res;
-  }, []);
-  return result;
-});
-const config = ref({
-  totalBarCount: 2000, // 会被渲染的K线条数
-  preBarCount: 100, // 预加载K线条数
-  // 左上角Tips配置
-  tipsConfig: {
-    open: true,
-    heigh: true,
-    low: true,
-    close: true,
-    business: false,
-    riseAndFall: true,
-    netPosition: true,
-  },
-  // 动态数据加载配置
-  dynamicLoadConfig: {
-    historyVisible: true,
-    historyLoadCallBack: async (historyIsAllLoad: any) => {
-      const { totalBarCount, preBarCount } = config.value;
-      // 前置判断: 如果 [K线数据量 < 期望总渲染条数 + 预请求数] ,则标记完毕
-      if (klineData.value.length < totalBarCount + preBarCount) {
-        config.value.totalBarCount = klineData.value.length;
-        historyIsAllLoad.value = true;
-        return;
-      }
-      // 运算过程：
-      // 1.计算出当前K线数据中,第一根K线时间点
-      // 2.请求接口,获取历史K线数据,并拼接
-      // 3.如果请求到的数据量小于期望获得的条数,或当前数据总根数大于限制的10000条数, 则标记完毕
-      const endTime = dayjs(klineData.value[0][0]).format("YYYY-MM-DD HH:mm:ss");
-      const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime, queryType: 1 };
-      const res = await getDiffKLine(params);
-      const apiData = res.data.body.slice(0, res.data.body.length - 1);
-      klineData.value = [...apiData, ...klineData.value];
-      config.value.totalBarCount = klineData.value.length;
-      if (apiData.length < 2800 - 1 || config.value.totalBarCount > 10000) {
-        historyIsAllLoad.value = true;
-      }
-    },
-  },
-  isOpenDS: false,
-});
-
-watch(
-  otherChart,
-  (newValue: string) => {
-    config.value.isOpenDS = false;
-    relevanceOriginData.value = [];
-    priceTrendOriginData.value = [];
-    priceTrendPercentOriginData.value = [];
-    const callBackMap = new Map([
-      [
-        "二腿价格走势图",
-        async () => {
-          await getPriceTrendData("value");
-        },
-      ],
-      [
-        "二腿价格走势百分比图",
-        async () => {
-          await getPriceTrendData("percent");
-        },
-      ],
-      [
-        "二腿相关度",
-        async () => {
-          await getRelevanceData();
-        },
-      ],
-      ["价差周期性", async () => {}],
-      [
-        "价差分布图",
-        async () => {
-          config.value.isOpenDS = true;
-        },
-      ],
-    ]);
-    const callBack = callBackMap.get(newValue);
-    callBack instanceof Function && callBack();
-  },
-  {
-    immediate: true,
-  }
-);
-
-// 初始化
-const componentInit = async () => {
-  try {
-    loading.value = true;
-    await getDictCycle();
-    await getKlineData();
-    // await getKlinePointData();
-    // await getKlineNetPositionData();
-    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.body[1002].map((item: any) => {
-    return {
-      label: item.dictName,
-      value: item.dictCode,
-      data: item,
-    };
-  });
-};
-/**
- * @description: 获取K线数据(价差)
- */
-const getKlineData = async () => {
-  const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime: "2024-04-08 17:02:19", queryType: 1 };
-  const res = await getDiffKLine(params);
-  klineData.value = res.data.body;
-};
-/**
- * @description: 获取点位数据
- */
-const getKlinePointData = async () => {
-  // ------
-  const params = {
-    analyseId: 3172,
-    cycle: cycle.value,
-    ifStock: 0,
-    varietyName: "橡胶",
-  };
-  const res = await queryPairedRecordByVariety(params);
-  const body = res.data.body;
-  // console.log(body);
-  const formatData = [];
-  const markLine = [];
-  // 格式化: 每一笔订单都有开,平两对应的点
-  body.forEach((item) => {
-    let openTime = klineData.value.find((i) => dayjs(i[0]).isSameOrAfter(item.openTime))[0];
-    let closeTime = klineData.value.find((i) => dayjs(i[0]).isSameOrAfter(item.closeTime))[0];
-    // 日线
-    if (cycle.value == 6) {
-      // 只看年月日
-      const toYMD = (value) => {
-        return dayjs(value).format("YYYY-MM-DD");
-      };
-      openTime = klineData.value.find((i) => dayjs(toYMD(i[0])).isSameOrAfter(toYMD(item.openTime)))[0];
-      closeTime = klineData.value.find((i) => dayjs(toYMD(i[0])).isSameOrAfter(toYMD(item.closeTime)))[0];
-    }
-    // 周线
-    if (cycle.value == 7) {
-      // 只看这个时间点的周五
-    }
-    // 月线
-    if (cycle.value == 8) {
-      // 只看这个时间点的年月
-      const toYM = (value) => {
-        return dayjs(value).format("YYYY-MM");
-      };
-      openTime = klineData.value.find((i) => dayjs(toYM(i[0])).isSameOrAfter(toYM(item.openTime)))[0];
-      closeTime = klineData.value.find((i) => dayjs(toYM(i[0])).isSameOrAfter(toYM(item.closeTime)))[0];
-    }
-    const openItem = {
-      tradeAction: "开",
-      direction: item.tradeDirection ? "空" : "多", // 交易方向
-      tradeType: `开${item.tradeDirection ? "空" : "多"}`,
-      amount: item.tradeVolume, // 手数
-      part: null, // 份数
-      profitAndLoss: item.profitAndLoss,
-      time: openTime, // 匹配到X轴的时间
-      markLineTarget: [],
-    };
-    // 连线逻辑,当天的不连
-    if (openTime !== closeTime) {
-      openItem.markLineTarget = [
-        {
-          time: closeTime,
-          name: `平${item.tradeDirection ? "空" : "多"}`,
-          lineStyle: {
-            color: item.profitAndLoss >= 0 ? "#FF0000" : "#389e0d",
-          },
-        },
-      ];
-    }
-    const closeItem = {
-      tradeAction: "平",
-      direction: item.tradeDirection ? "空" : "多", // 交易方向
-      tradeType: `平${item.tradeDirection ? "空" : "多"}`,
-      amount: item.tradeVolume, // 手数
-      part: null, // 份数
-      profitAndLoss: item.profitAndLoss,
-      time: closeTime, // 匹配到X轴的时间
-    };
-    formatData.push(openItem);
-    formatData.push(closeItem);
-    // 连线数据
-    // markLine.push([
-    //   {
-    //     coord: [openTime, 1],
-    //   },
-    //   {
-    //     coord: [closeTime, 1],
-    //   },
-    // ]);
-  });
-  // 数据合并
-  const noRepeatMap = new Map([]);
-  formatData.forEach((i) => {
-    const { time, tradeType } = i;
-    const key = time + tradeType;
-    // 判断这个节点是否已存在数据
-    if (noRepeatMap.has(key)) {
-      // 已存在,说明节点重复,进行数据合并
-      const oldItem = noRepeatMap.get(key);
-      i.amount += oldItem.amount;
-      i.part += oldItem.part;
-      i.profitAndLoss += oldItem.profitAndLoss;
-      if (i.markLineTarget) {
-        // 如果新的markLineTarget没有存在过于老的markLineTarget中
-        const isRepeat = oldItem.markLineTarget.find(
-          (item) => item.time === i.markLineTarget[0].time && item.name === i.markLineTarget[0].name
-        );
-        if (!isRepeat) {
-          i.markLineTarget = [...i.markLineTarget, ...oldItem.markLineTarget];
-        }
-      }
-    }
-    i.tooltip = `<div>${tradeType}: ${i.amount}手<div>`;
-    // 如果是平仓则需要展示盈亏
-    if (i.tradeAction === "平") {
-      i.tooltip += `盈亏：${i.profitAndLoss.toFixed(2)}`;
-    }
-    noRepeatMap.set(key, i);
-  });
-  originPointData.value = [
-    {
-      key: "sellBuy",
-      data: [...noRepeatMap.values()],
-    },
-    {
-      key: "openClose",
-      data: [...noRepeatMap.values()],
-    },
-  ];
-  // 1.获取点位接口数据 2.格式化处理[数据合并,匹配K线时间轴] 建议分开,此处demo所以简写
-  // 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 getKlineNetPositionData = async () => {
-  const params = {
-    analyseId: "2229",
-    endTime: "2022-12-23T00:00:00",
-    startTime: "2020-12-23T00:00:00",
-    varietyCode: "FU",
-  };
-  const res = await getNetPositionData(params);
-  const body = res.data.body;
-  const netPositionMap = new Map();
-  if (Number(cycle.value) <= 5) {
-    body.forEach((item: any) => {
-      const key = dayjs(item.tradeDate).format("YYYY-MM-DD HH:mm:ss");
-      const value = item.netPositionValue;
-      netPositionMap.set(key, value);
-    });
-  } else {
-    body.forEach((item: any) => {
-      const key = dayjs(item.tradeDate).add(9, "hour").format("YYYY-MM-DD HH:mm:ss");
-      const value = item.netPositionValue;
-      netPositionMap.set(key, value);
-    });
-  }
-  netPositionData.value = klineData.value.map((item: any) => netPositionMap.get(item[0]) ?? null);
-};
-/**
- * @description: 获取二腿相关度数据
- */
-const getRelevanceData = async () => {
-  const params = {
-    diffId: 1481,
-  };
-  const res = await queryDiffLineRevelance(params);
-  const { body } = res.data;
-  relevanceOriginData.value = body;
-};
-/**
- * @description: 获取二腿价格走势数据
- */
-const getPriceTrendData = async (type: string) => {
-  const params = { diffId: 1481, cycle: cycle.value, limit: 2800, endTime: "2024-04-08 17:02:19", queryType: 1 };
-  const res = await getDiffSubKLine(params);
-  const { body } = res.data;
-  if (type === "value") {
-    priceTrendOriginData.value = body;
-  } else {
-    priceTrendPercentOriginData.value = body;
-  }
-};
-
-/**
- * @description: 周期切换
- */
-const cycleChange = async () => {
-  try {
-    loading.value = true;
-    config.value.totalBarCount = 2000;
-    await getKlineData();
-    // await getPriceTrendData();
-    // 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" @mousemove="isSelect = true" @mouseout="isSelect = false">
-    <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 mainIndicatorList"
-              :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 class="kline-header-item sellBuySelect">
-          <span>{{ otherChart }}</span>
-          <el-select v-model="otherChart" popper-class="element-dark" @change="sellBuyTypeChange">
-            <el-option v-for="item in otherChartOptions" :key="item" :label="item" :value="item" />
-          </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"
-        :netPositionData="netPositionData"
-        :relevanceData="relevanceData"
-        :priceTrendData="priceTrendData"
-        :priceTrendPercentData="priceTrendPercentData"
-        :defaultMenuData="defaultMenuData"
-        :isSelect="isSelect"
-        :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>