st-comp 0.0.21 → 0.0.23

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

@@ -1,466 +1,528 @@
 <!-- 单品种单周期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 } from '../api.ts'
-  import { mainIndicatorList } from 'st-func'
+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 } from "../api.ts";
+import { mainIndicatorList } from "st-func";
 
-  dayjs.extend(isSameOrAfter)
+dayjs.extend(isSameOrAfter);
 
-  const props = defineProps({
-    deBugValue: {
-      type: Number,
-    },
-  })
+const props = defineProps({
+  deBugValue: {
+    type: Number,
+  },
+});
 
-  const loading = ref(true)
-  const netWorkErrorMsg = ref('')
+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 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 (mainIndicatorList.length > 0) {
-      return mainIndicatorList.find((item: any) => item.value === indicatorName.value)
-    }
-    return null
-  })
-  const indicatorName = ref<any>('DKX_EMA')
+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 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>([])
+// 接口原生-点位数据
+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),
+// 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 defaultMenuData = ref([
+  {
+    label: "画线预警",
+    callBack: (echartsInstance: any, cursorPenVisible: any) => createWarning(echartsInstance, cursorPenVisible),
+  },
+]);
+const config = ref({
+  totalBarCount: 2000,
+  preBarCount: 100,
+  tipsConfig: {
+    open: true,
+    heigh: true,
+    low: true,
+    close: true,
+    business: false,
+    riseAndFall: true,
+  },
+  dynamicLoadConfig: {
+    historyVisible: true,
+    historyLoadCallBack: async (historyIsAllLoad: any) => {
+      const { totalBarCount, preBarCount } = config.value;
+      // 1.如果当前K线数据量就小于API希望得到的数量,说明已经没有数据了,将API得到的数据作全部展示
+      // 并且打上标记,此K线数据已无更多
+      if (klineData.value.length < totalBarCount + preBarCount) {
+        config.value.totalBarCount = klineData.value.length;
+        console.log('K线数据已无更多-1')
+        historyIsAllLoad.value = true;
+        return;
+      }
+      // 2.已当前存储的K线数据第一条时间作为结束时间,往前再次请求
+      const params = {
+        right: 1, // 复权方式
+        variety: "au8888", // 品种
+        cycle: cycle.value, // 周期
+        endTime: klineData.value[0][0], // 结束时间
+        limit: 2000, // 总条数
+        queryType: 1, // 0-按时间，1-按结束时间，2-按开始时间
+      };
+      const res = await getSingleCycleSingleVariety(params);
+      const apiData = res.data.body.slice(0, res.data.body.length - 1)
+      klineData.value = [...apiData, ...klineData.value];
+      config.value.totalBarCount = config.value.totalBarCount + apiData.length;
+      // 3.如果请求到的数据量小于期望的条数,或者当前数据总根数大于限制的10000条数
+      // 也打上标记,此K线数据已无更多
+      if (apiData.length < 2000 - 1 || config.value.totalBarCount > 6000) {
+        console.log('K线数据已无更多-2')
+        historyIsAllLoad.value = true;
+      }
     },
-  ])
-  const config = ref({
-    totalBarCount: 1900,
-    preBarCount: 100,
-    tipsConfig: {
-      open: true,
-      heigh: true,
-      low: true,
-      close: true,
-      business: false,
-      riseAndFall: true
-    }
-  })
+    futureVisible: true,
+    futureLoadCallBack: async (futureIsAllLoad: any) => {
+      const { totalBarCount, preBarCount } = config.value;
+      // 1.如果当前K线数据量就小于API希望得到的数量,说明已经没有数据了,将API得到的数据作全部展示
+      // 并且打上标记,此K线数据已无更多
+      if (klineData.value.length < totalBarCount + preBarCount) {
+        config.value.totalBarCount = klineData.value.length;
+        console.log('K线数据已无更多-1')
+        futureIsAllLoad.value = true;
+        return;
+      }
+      // 2.已当前存储的K线数据最后一条时间作为开始时间,往后再次请求
+      const params = {
+        right: 1, // 复权方式
+        variety: "au8888", // 品种
+        cycle: cycle.value, // 周期
+        startTime: klineData.value[klineData.value.length - 1][0], // 开始
+        limit: 20, // 总条数
+        queryType: 2, // 0-按时间，1-按结束时间，2-按开始时间
+      };
+      const res = await getSingleCycleSingleVariety(params);
+      const apiData = res.data.body.slice(1); // 取掉重复数据
+      klineData.value = [...klineData.value, ...apiData];
+      config.value.totalBarCount = config.value.totalBarCount + apiData.length;
+      // 3.如果请求到的数据量小于期望的条数,或者当前数据总根数大于限制的10000条数
+      // 也打上标记,此K线数据已无更多
+      if (apiData.length < 20 - 1 || config.value.totalBarCount > 6000) {
+        console.log('K线数据已无更多-2')
+        futureIsAllLoad.value = true;
+      }
+    },
+  },
+});
 
-  onMounted(() => {
-    console.log('---------单品种单周期组件: onMounted挂载成功---------')
-  })
+onMounted(() => {
+  console.log("---------单品种单周期组件: onMounted挂载成功---------");
+});
 
-  // 初始化
-  const componentInit = async () => {
-    try {
-      loading.value = true
-      await getDictCycle()
-      await getKlineData()
-      await getKlinePointData()
-      loading.value = false
-      await getKlineExtendData()
-    } catch (error) {
-      console.log(error)
-    } finally {
-      loading.value = false
-    }
+// 初始化
+const componentInit = async () => {
+  try {
+    loading.value = true;
+    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.body[1002].map((item: any) => {
-      return {
-        label: item.dictName,
-        value: item.dictCode,
-        data: item,
-      }
-    })
-  }
-  /**
-   * @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)
+/**
+ * @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 = {
+    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>",
         },
-        ondragend: (params: any, info: any, yAxisValue: number) => {
-          console.log('拖拽结束', params, info, yAxisValue)
-          ElMessage.success('预警线修改更新成功!')
+        {
+          tradeAction: "平", // 交易动作
+          direction: "空", // 交易方向
+          tradeType: "平空", // 交易类型
+          amount: 2, // 手数
+          part: 2, // 份数
+          time: "2024-01-04 22:40:00", // 交易时间
+          tooltip: "<div>开平点2</div>",
         },
-        oncontextmenu: (params: any, info: any, menuData: any) => {
-          console.log('右击了', params, info)
-          menuData.value = [
-            {
-              label: '删除画线',
-              callBack: () => ElMessage.success('预警线删除成功!'),
-            },
-            {
-              label: '修改画线',
-              callBack: () => ElMessage.success('预警线修改成功!'),
-            },
-          ]
+        {
+          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("预警线修改更新成功!");
       },
-      {
-        key: 'position',
-        data: [
+      oncontextmenu: (params: any, info: any, menuData: any) => {
+        console.log("右击了", params, info);
+        menuData.value = [
           {
-            value: 480,
-            text: '持仓:192.14万(1份) 数量:4手 方向:多 浮动盈亏:-1280.00',
-            // 自定义信息
-            info: {},
-            // 自定义配置
-            config: {},
+            label: "删除画线",
+            callBack: () => ElMessage.success("预警线删除成功!"),
           },
-        ],
-      },
-      {
-        key: 'condition',
-        data: [
           {
-            value: 482,
-            text: '[多损][多盈] 开多↓2269 1份(22手)',
-            profitValue: 483,
-            profitText: '上破484',
-            lossValue: 481,
-            lossText: '下破482',
-            // 自定义信息
-            info: {},
-            // 自定义配置
-            config: {},
+            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 cycleChange = async () => {
+  try {
+    loading.value = true;
+    config.value.totalBarCount = 2000;
+    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'
-      })
-    }
+/**
+ * @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]
+// 画线预警
+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,
-          // X轴指示线的宽度
           lineStyle: {
-            width: 0,
+            width: 1,
           },
-          // Y轴指示线的宽度
           crossStyle: {
-            width: 2,
+            width: 1,
           },
-          // 文本标签
           label: {
-            // 保留原有部分配置
             ...oldTooltip.axisPointer.label,
-            // 颜色改为透明
-            backgroundColor: 'transparent',
-            // 仅显示Y轴值
-            formatter: (data: any) => {
-              const { axisDimension, value } = data
-              if (axisDimension === 'y') {
-                return String(formatValue(value))
-              }
-              return ''
-            },
+            backgroundColor: null,
           },
         },
       },
-    })
-    // 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)
-  }
+    });
+    // 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,
+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卸载成功---------')
-  })
+onUnmounted(() => {
+  console.log("---------单品种单周期组件: onUnmounted卸载成功---------");
+});
 
-  // 刷新按钮
-  const reFresh = () => {
-    netWorkErrorMsg.value = ''
-    componentInit()
-  }
+// 刷新按钮
+const reFresh = () => {
+  netWorkErrorMsg.value = "";
+  componentInit();
+};
 </script>
 
 <template>
-  <div id="single-cycle-single-variety">
-    <div
-      class="st-Kline"
-      v-loading="loading"
-      element-loading-text="正在加载数据中,请稍等..."
-    >
+  <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">
         <!-- 品种名称 -->
@@ -468,26 +530,14 @@
         <!-- 周期展示 + 选择 -->
         <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 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-select v-model="indicatorName" popper-class="element-dark">
             <el-option
               v-for="(item, index) in mainIndicatorList"
               :key="index"
@@ -499,11 +549,7 @@
         <!-- 开平/买卖展示 + 选择 -->
         <div class="kline-header-item sellBuySelect">
           <span>{{ sellBuyTypeName }}</span>
-          <el-select
-            v-model="sellBuyType"
-            popper-class="element-dark"
-            @change="sellBuyTypeChange"
-          >
+          <el-select v-model="sellBuyType" popper-class="element-dark" @change="sellBuyTypeChange">
             <el-option
               v-for="(item, index) in sellBuyTypeOptions"
               :key="index"
@@ -523,25 +569,16 @@
         :lineData="lineData"
         :brushRange="brushRange"
         :defaultMenuData="defaultMenuData"
+        :isSelect="isSelect"
         :config="config"
       />
       <!-- 网络请求错误时 -->
-      <div
-        v-if="netWorkErrorMsg"
-        class="netWorkError"
-      >
+      <div v-if="netWorkErrorMsg" class="netWorkError">
         <span>{{ netWorkErrorMsg }}</span>
-        <el-button
-          @click="reFresh"
-          :icon="RefreshRight"
-          >刷新</el-button
-        >
+        <el-button @click="reFresh" :icon="RefreshRight">刷新</el-button>
       </div>
       <!-- 空数据时 -->
-      <div
-        class="empty"
-        v-else-if="!loading && klineData.length === 0"
-      >
+      <div class="empty" v-else-if="!loading && klineData.length === 0">
         <el-empty description="暂无数据" />
       </div>
     </div>
@@ -549,106 +586,106 @@
 </template>
 
 <style lang="scss" scoped>
-  #single-cycle-single-variety {
-    margin: auto;
-    width: 100%;
+#single-cycle-single-variety {
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  .st-Kline {
     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;
-      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 {
+      align-items: center;
+      color: white;
+      border-bottom: 1px solid rgb(153, 153, 153);
+      .kline-header-item {
         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;
+        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;
-            .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;
-            }
+            height: 16px;
+            margin-left: 0;
           }
         }
-        // 功能区: 开平/买卖
-        .sellBuySelect {
-          :deep(.el-select) {
-            margin-left: 6px;
+      }
+      // 功能区: 开平/买卖
+      .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;
-            .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;
-            }
+            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;
-      }
+    .kline {
+      flex: 1;
     }
-    .empty {
+  }
+  .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;
-      font-weight: 600;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      font-size: 24px;
     }
   }
+  .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>