st-comp 0.0.21 → 0.0.23

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

@@ -1,533 +1,539 @@
 <!-- 单品种多周期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'
+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)
+dayjs.extend(isSameOrAfter);
 
-  const props = defineProps({
-    deBugValue: {
-      type: Number,
-    },
-  })
+const props = defineProps({
+  deBugValue: {
+    type: Number,
+  },
+});
 
-  // K线组件数组[多周期]
-  interface multiCycleKlineType {
-    loading: boolean
-    cycle: string // 周期
-    cycleName: string // 周期名称
-    sellBuyType: number // 开平/买卖类型
-    sellBuyTypeName: string // 开平/买卖
-    klineData: any[] // K线接口数据
-    markData: any[] // 点位接口数据
-    netWorkErrorMsg: string
-    indicatorName: string
-    indicator: object
-  }
-  const multiCycleKline = ref<multiCycleKlineType[]>([])
+// 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 sellBuyTypeOptions = ref<any>([
+  { label: "开平", value: 1 },
+  { label: "买卖", value: 2 },
+]);
 
-  // 接口原生-点位数据
-  const originPointData = ref<any>([])
+// 接口原生-点位数据
+const originPointData = ref<any>([]);
 
-  // K线组件统一入参
-  const lineData = ref<any>([])
-  const brushRange = ref<any>(['2024-01-04 10:10:00', '2024-01-04 21:40:00'])
-  const defaultMenuData = ref([
-    {
-      label: '画线预警',
-      callBack: (echartsInstance: any, cursorPenVisible: any) => createWarning(echartsInstance, cursorPenVisible),
-    },
-  ])
-  const config = ref({
-    totalBarCount: 1900,
-    preBarCount: 100,
-  })
+// 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挂载成功---------')
-  })
+onMounted(() => {
+  console.log("---------单品种多周期组件: onMounted挂载成功---------");
+});
 
-  // 初始化
-  const componentInit = async () => {
-    try {
-      await getDictCycle()
-      await getKlineData()
-      await getKlineExtendData()
-    } catch (error) {
-      console.log(error)
-    }
+// 初始化
+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
+/**
+ * @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', // 品种
+      variety: "au8888", // 品种
       cycle: item.cycle, // 周期
-      endTime: '2024-01-04 23:59:59', // 结束时间
+      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 res = await getSingleCycleSingleVariety(params);
+    item.klineData = res.data.body;
     // ---------点位数据逻辑---------
     const resultApi = [
       {
-        key: 'sellBuy',
+        key: "sellBuy",
         data: [
           {
-            tradeAction: '开', // 交易动作
-            direction: '多', // 交易方向
-            tradeType: '开多', // 交易类型
+            tradeAction: "开", // 交易动作
+            direction: "多", // 交易方向
+            tradeType: "开多", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 22:30:00', // 交易时间
-            tooltip: '<div>买卖点1</div>',
+            time: "2024-01-04 22:30:00", // 交易时间
+            tooltip: "<div>买卖点1</div>",
           },
           {
-            tradeAction: '平', // 交易动作
-            direction: '空', // 交易方向
-            tradeType: '平空', // 交易类型
+            tradeAction: "平", // 交易动作
+            direction: "空", // 交易方向
+            tradeType: "平空", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 22:40:00', // 交易时间
-            tooltip: '<div>买卖点2</div>',
+            time: "2024-01-04 22:40:00", // 交易时间
+            tooltip: "<div>买卖点2</div>",
           },
           {
-            tradeAction: '开', // 交易动作
-            direction: '空', // 交易方向
-            tradeType: '开空', // 交易类型
+            tradeAction: "开", // 交易动作
+            direction: "空", // 交易方向
+            tradeType: "开空", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 23:50:00', // 交易时间
-            tooltip: '<div>买卖点3</div>',
+            time: "2024-01-04 23:50:00", // 交易时间
+            tooltip: "<div>买卖点3</div>",
           },
         ],
       },
       {
-        key: 'openClose',
+        key: "openClose",
         data: [
           {
-            tradeAction: '开', // 交易动作
-            direction: '多', // 交易方向
-            tradeType: '开多', // 交易类型
+            tradeAction: "开", // 交易动作
+            direction: "多", // 交易方向
+            tradeType: "开多", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 22:30:00', // 交易时间
-            tooltip: '<div>开平点1</div>',
+            time: "2024-01-04 22:30:00", // 交易时间
+            tooltip: "<div>开平点1</div>",
           },
           {
-            tradeAction: '平', // 交易动作
-            direction: '空', // 交易方向
-            tradeType: '平空', // 交易类型
+            tradeAction: "平", // 交易动作
+            direction: "空", // 交易方向
+            tradeType: "平空", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 22:40:00', // 交易时间
-            tooltip: '<div>开平点2</div>',
+            time: "2024-01-04 22:40:00", // 交易时间
+            tooltip: "<div>开平点2</div>",
           },
           {
-            tradeAction: '开', // 交易动作
-            direction: '空', // 交易方向
-            tradeType: '开空', // 交易类型
+            tradeAction: "开", // 交易动作
+            direction: "空", // 交易方向
+            tradeType: "开空", // 交易类型
             amount: 2, // 手数
             part: 2, // 份数
-            time: '2024-01-04 23:50:00', // 交易时间
-            tooltip: '<div>买卖点3</div>',
+            time: "2024-01-04 23:50:00", // 交易时间
+            tooltip: "<div>买卖点3</div>",
           },
         ],
       },
       {
-        key: 'signal',
+        key: "signal",
         data: [],
       },
-    ]
-    const klineTimeAry = item.klineData.map((item: any) => item[0])
+    ];
+    const klineTimeAry = item.klineData.map((item: any) => item[0]);
     originPointData.value = resultApi.reduce((result: any, next) => {
-      const { data } = 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))
+          const time = klineTimeAry.find((klineTime: string) => dayjs(klineTime).isSameOrAfter(i.time));
           return {
             ...i,
             time,
-          }
+          };
         }),
-      })
-      return result
-    }, [])
-    sellBuyTypeChange(item)
+      });
+      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);
+};
 
-    item.loading = false
+// 画线预警
+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);
+};
 
-    getKlineExtendData()
+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>
@@ -535,6 +541,8 @@
     <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"
@@ -551,11 +559,7 @@
           <!-- 指标展示 + 选择 -->
           <div class="kline-header-item sellBuySelect">
             <span>{{ item.indicatorName }}</span>
-            <el-select
-              v-model="item.indicatorName"
-              popper-class="element-dark"
-              @change="indicatorChange(item)"
-            >
+            <el-select v-model="item.indicatorName" popper-class="element-dark" @change="indicatorChange(item)">
               <el-option
                 v-for="(item, index) in mainIndicatorList"
                 :key="index"
@@ -567,11 +571,7 @@
           <!-- 开平/买卖展示 + 选择 -->
           <div class="kline-header-item sellBuySelect">
             <span>{{ item.sellBuyTypeName }}</span>
-            <el-select
-              v-model="item.sellBuyType"
-              popper-class="element-dark"
-              @change="sellBuyTypeChange(item)"
-            >
+            <el-select v-model="item.sellBuyType" popper-class="element-dark" @change="sellBuyTypeChange(item)">
               <el-option
                 v-for="(item, index) in sellBuyTypeOptions"
                 :key="index"
@@ -591,26 +591,16 @@
           :lineData="lineData"
           :brushRange="brushRange"
           :defaultMenuData="defaultMenuData"
+          :isSelect="item.isSelect"
           :config="config"
         />
         <!-- 网络请求错误时 -->
-        <div
-          v-if="item.netWorkErrorMsg"
-          class="netWorkError"
-        >
+        <div v-if="item.netWorkErrorMsg" class="netWorkError">
           <span>{{ item.netWorkErrorMsg }}</span>
-          <el-button
-            size="small"
-            @click="reFresh(item)"
-            :icon="RefreshRight"
-            >刷新</el-button
-          >
+          <el-button size="small" @click="reFresh(item)" :icon="RefreshRight">刷新</el-button>
         </div>
         <!-- 空数据时 -->
-        <div
-          class="empty"
-          v-else-if="!item.loading && item.klineData.length === 0"
-        >
+        <div class="empty" v-else-if="!item.loading && item.klineData.length === 0">
           <el-empty description="暂无数据" />
         </div>
       </div>
@@ -619,93 +609,93 @@
 </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 {
+#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;
-      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;
+      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;
-        }
-        // 功能区: 开平/买卖
-        .sellBuySelect {
-          :deep(.el-select) {
-            margin-left: 6px;
+        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;
-            .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;
-            }
+            height: 12px;
+            margin-left: 0;
           }
         }
       }
-      .kline {
-        flex: 1;
-      }
-      .netWorkError {
+    }
+    .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;
-        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;
-          }
+    }
+    .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>