st-comp 0.0.277 → 0.0.279

package/packages/KlineBasic/index.vue

@@ -1,839 +0,0 @@
-<script setup>
-import dayjs from "dayjs";
-import * as echarts from "echarts";
-import { onMounted, onUnmounted, ref, watch, computed, nextTick } from "vue";
-import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from "./api";
-import { addResizeListener, debounce } from "st-func";
-import { getMainOptions, getWarningLineOptions } from "./utils";
-import KlineTips from "./components/KlineTips/index.vue";
-import KlineSub from "./components/KlineSub/index.vue";
-import Contextmenu from "./components/Contextmenu/index.vue";
-
-const defaultMenuData = [{ label: "画线预警", key: "drawWarningLine" }];
-
-let resizeRo = null; // dom元素监听事件
-let mainChartIns = null; // 主图实例
-let renderFrameId = null; // 渲染帧ID
-let drawLineFrameId = null; // 绘线帧ID
-let brushFrameId = null; // 区域框选帧ID
-
-let isLoadHistory = false; // 是否正在加载历史数据
-let isloadAllHistory = false; // 是否加载完全部历史数据
-
-const emit = defineEmits(["change", "getFactorData"]);
-
-const props = defineProps({
-  variety: {
-    type: [String, Number],
-    default: () => null,
-  },
-  varietyName: {
-    type: [String, Number],
-    default: () => null,
-  },
-  featureId: {
-    type: [String, Number],
-    default: () => null,
-  },
-  featureType: {
-    type: [String, Number],
-    default: () => null,
-  },
-  cycle: {
-    type: [String, Number],
-    default: () => null,
-  },
-  mainIndicator: {
-    type: String,
-    default: () => "",
-  },
-  indicatorStore: {
-    type: Object,
-    default: () => null,
-  },
-  startTime: {
-    type: String,
-    default: () => null,
-  },
-  endTime: {
-    type: String,
-    default: () => null,
-  },
-  right: {
-    type: [String, Number],
-    default: 1,
-  },
-  config: {
-    type: Object,
-    default: () => ({}),
-  },
-  env: {
-    type: Object,
-    default: () => ({}),
-  },
-  brushRange: {
-    type: [Array, null],
-    default: () => null,
-  },
-});
-
-const isHover = ref(false);
-const isEmpty = ref(false);
-const isError = ref(false);
-
-const klineBasicMainRef = ref(null);
-const klineSubRef = ref(null);
-const subIndicator = ref("VOL");
-const activeIndex = ref(0);
-
-const chartData = ref({});
-const warningLineData = ref([]);
-const warningItem = ref({});
-const warningLineChangeVisible = ref(false);
-const warningLineChangeValue = ref("");
-
-const menuData = ref([...defaultMenuData]);
-
-const config = computed(() => {
-  return {
-    defaultShowCounts: 500,
-    addCounts: 2000,
-    maxShowCounts: 5000,
-    loadCheckCounts: 500,
-    gridTop: 48,
-    gridLeft: 80,
-    gridRight: 50,
-    showSubChart: true,
-    showWarningLine: true,
-    getFactorData: true,
-    ...props.config,
-  };
-});
-
-// 初始化图表
-const initChart = () => {
-  if (mainChartIns) return;
-  mainChartIns = echarts.init(klineBasicMainRef.value);
-  addEventListener();
-  if (config.value.showSubChart) {
-    klineSubRef.value.connect(mainChartIns);
-  }
-  resizeRo = addResizeListener(klineBasicMainRef.value);
-  resizeRo.listen(() => {
-    requestAnimationFrame(() => {
-      mainChartIns?.resize();
-      drawLine(); // resize后重绘预警线
-    });
-  });
-};
-// 隐藏loading
-const hideLoading = () => {
-  if (mainChartIns && !mainChartIns.isDisposed()) {
-    mainChartIns.hideLoading();
-  }
-};
-
-// 图表渲染: 全部
-const scheduleRender = (keepDataZoom = false) => {
-  // 取消正在进行的渲染
-  if (renderFrameId) {
-    cancelAnimationFrame(renderFrameId);
-    renderFrameId = null;
-  }
-  // 第一帧：渲染主图
-  renderFrameId = requestAnimationFrame(() => {
-    drawMain(keepDataZoom);
-    // 第二帧：渲染副图
-    renderFrameId = requestAnimationFrame(() => {
-      drawSub();
-      // 第三帧：渲染预警线
-      renderFrameId = requestAnimationFrame(() => {
-        drawLine();
-        renderFrameId = null;
-      });
-    });
-  });
-};
-// 图表渲染: 主图
-const drawMain = (keepDataZoom = false) => {
-  if (!mainChartIns || mainChartIns.isDisposed()) return;
-
-  const { time } = chartData.value;
-  const { defaultShowCounts } = config.value;
-
-  let startValue = time.length - 1 - defaultShowCounts;
-  let endValue = time.length - 1;
-
-  // 保持缩放位置
-  if (keepDataZoom && mainChartIns) {
-    const originOption = mainChartIns.getOption();
-    const originTime = originOption?.xAxis?.[0]?.data;
-    const originDataZoom = originOption?.dataZoom?.[0];
-
-    if (originTime?.length && originDataZoom) {
-      const originStartTime = originTime[originDataZoom.startValue];
-      const originEndTime = originTime[originDataZoom.endValue];
-      if (originStartTime && originEndTime) {
-        // startValue: 从前往后找第一个 >= 原始开始时间的索引
-        const foundStartIndex = time.findIndex((item) => new Date(item).getTime() >= new Date(originStartTime).getTime());
-        // endValue: 从后往前找最后一个 <= 原始结束时间的索引
-        const foundEndIndex = time.findLastIndex((item) => new Date(item).getTime() <= new Date(originEndTime).getTime());
-        // 使用找到的索引，如果没找到则使用默认值
-        startValue = foundStartIndex !== -1 ? foundStartIndex : 0;
-        endValue = foundEndIndex !== -1 ? foundEndIndex : time.length - 1;
-        // 确保 startValue 不大于 endValue
-        if (startValue > endValue) {
-          // 如果范围异常，以结束索引为准，向前取一定数量
-          startValue = Math.max(0, endValue - Math.min(100, time.length - 1));
-        }
-      }
-    }
-  }
-  const options = getMainOptions(chartData.value, config.value, startValue, endValue, props.cycle);
-
-  requestAnimationFrame(() => {
-    mainChartIns?.setOption(options, true);
-    activeIndex.value = endValue;
-
-    // 下一帧绘制brush
-    requestAnimationFrame(() => {
-      drawBrush();
-    });
-  });
-};
-// 图表渲染: 副图
-const drawSub = () => {
-  if (!config.value.showSubChart || !klineSubRef.value) return;
-
-  const { time } = chartData.value;
-  const { gridLeft, gridRight, maxShowCounts, defaultShowCounts } = config.value;
-  let startValue = time.length - 1 - defaultShowCounts;
-  let endValue = time.length - 1;
-
-  // 从主图获取当前的dataZoom位置
-  if (mainChartIns && !mainChartIns.isDisposed()) {
-    const option = mainChartIns.getOption();
-    if (option?.dataZoom?.[0]) {
-      const { startValue: cacheStart, endValue: cacheEnd } = option.dataZoom[0];
-      if (cacheStart !== undefined && cacheEnd !== undefined) {
-        startValue = cacheStart;
-        endValue = cacheEnd;
-      }
-    }
-  }
-
-  requestAnimationFrame(() => {
-    klineSubRef.value?.draw({ startValue, endValue, maxValueSpan: maxShowCounts }, { gridLeft, gridRight });
-  });
-};
-// 图表渲染: 预警线
-const drawLine = () => {
-  if (!mainChartIns) return;
-
-  // 取消正在进行的绘线
-  if (drawLineFrameId) {
-    cancelAnimationFrame(drawLineFrameId);
-    drawLineFrameId = null;
-  }
-
-  drawLineFrameId = requestAnimationFrame(() => {
-    const mainChartOption = mainChartIns?.getOption();
-    if (!mainChartOption) return;
-    const width = mainChartIns?.getWidth();
-    const height = mainChartIns?.getHeight();
-    if (!width || !height) return;
-
-    mainChartIns?.setOption(
-      {
-        graphic: getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () => {
-          updateWarningLineAndDraw();
-        }),
-      },
-      {
-        notMerge: false,
-        replaceMerge: ["graphic"],
-        lazyUpdate: true,
-      },
-    );
-    drawLineFrameId = null;
-  });
-};
-// 图表渲染: 区域框选
-const drawBrush = () => {
-  if (brushFrameId) {
-    cancelAnimationFrame(brushFrameId);
-  }
-
-  brushFrameId = requestAnimationFrame(() => {
-    const { time } = chartData.value;
-    if (!props.brushRange || !time?.length || !mainChartIns) return;
-
-    let startTime = dayjs(props.brushRange[0]).format("YYYY-MM-DD 00:00:00");
-    let endTime = dayjs(props.brushRange[1]).format("YYYY-MM-DD 23:59:59");
-    let brushStartTime = null;
-    let brushEndTime = null;
-
-    switch (String(props.cycle)) {
-      case "6": {
-        brushStartTime = time.find((item) => dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD"));
-        brushEndTime = brushStartTime;
-        break;
-      }
-      case "7": {
-        brushStartTime = time.find((item) => dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(startTime).day(5).format("YYYY-MM-DD"));
-        brushEndTime = time.findLast((item) => dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(endTime).day(5).format("YYYY-MM-DD"));
-        break;
-      }
-      case "8": {
-        brushStartTime = time.find((item) => dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(startTime).endOf("month").format("YYYY-MM-DD"));
-        brushEndTime = time.findLast((item) => dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(endTime).endOf("month").format("YYYY-MM-DD"));
-        break;
-      }
-      default: {
-        brushStartTime = time.find((item) => {
-          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(startTime).format("YYYY-MM-DD");
-          const condition2 = new Date(item).getTime() >= new Date(startTime).getTime();
-          return condition1 && condition2;
-        });
-        brushEndTime = time.findLast((item) => {
-          const condition1 = dayjs(item).format("YYYY-MM-DD") === dayjs(endTime).format("YYYY-MM-DD");
-          const condition2 = new Date(item).getTime() <= new Date(endTime).getTime();
-          return condition1 && condition2;
-        });
-      }
-    }
-
-    if (brushStartTime && brushEndTime) {
-      mainChartIns.dispatchAction({
-        type: "brush",
-        areas: [
-          {
-            brushType: "lineX",
-            coordRange: [brushStartTime, brushEndTime],
-            xAxisIndex: 0,
-          },
-        ],
-      });
-    }
-    brushFrameId = null;
-  });
-};
-
-// 获取主数据
-const getMainData = async () => {
-  try {
-    if (!props.variety || !props.cycle) return;
-
-    const { variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime } = props;
-    const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value;
-
-    // 显示loading
-    initChart();
-
-    if (mainChartIns && !mainChartIns.isDisposed()) {
-      mainChartIns.showLoading({
-        text: "加载中...",
-        color: "#409eff",
-        textColor: "#fff",
-        maskColor: "rgba(0, 0, 0, 0.7)",
-        zlevel: 0,
-      });
-    }
-
-    const params = {
-      variety,
-      featureId,
-      cycle,
-      mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),
-      subIndicator: subIndicator.value,
-      right,
-      showWarningLine,
-      getFactorData,
-    };
-
-    if (startTime && endTime) {
-      params.startTime = startTime;
-      params.endTime = endTime;
-    } else if (startTime) {
-      params.startTime = startTime;
-      params.limit = addCounts;
-    } else if (endTime) {
-      params.endTime = endTime;
-      params.limit = addCounts;
-    } else {
-      params.endTime = dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
-      params.limit = addCounts;
-    }
-
-    const res = await getKlineBasic(params);
-
-    if (!res?.body?.kline?.time?.length) {
-      isEmpty.value = true;
-      isError.value = false;
-      hideLoading();
-      return;
-    }
-
-    isEmpty.value = false;
-    isError.value = false;
-    chartData.value = res?.body?.kline;
-    warningLineData.value = res?.body?.warningLine || [];
-
-    // 使用RAF链式渲染
-    await nextTick();
-    scheduleRender(false);
-
-    if (getFactorData) {
-      emit("getFactorData", res?.body?.factor);
-    }
-
-    hideLoading();
-  } catch (err) {
-    hideLoading();
-    isError.value = true;
-    isEmpty.value = false;
-    throw new Error(err);
-  }
-};
-// 加载历史数据
-const getMoreData = async (type) => {
-  const { variety, cycle, indicatorStore, mainIndicator, right } = props;
-  const { addCounts } = config.value;
-  const { time } = chartData.value;
-
-  if (type === "history") {
-    const res = await getKline({
-      variety,
-      cycle,
-      endTime: time[0],
-      limit: addCounts,
-      mainIndicatorList: indicatorStore.getIndicatorParams(mainIndicator),
-      subIndicator: subIndicator.value,
-      right,
-    });
-    // 合并数据
-    chartData.value = {
-      time: [...res.body.time, ...chartData.value.time.slice(1)],
-      data: [...res.body.data, ...chartData.value.data.slice(1)],
-      mainIndicator: chartData.value.mainIndicator.map((item, index) => ({
-        ...item,
-        data: [...(res.body.mainIndicator[index]?.data ?? []), ...item.data.slice(1)],
-      })),
-      subIndicator: chartData.value.subIndicator.map((item, index) => ({
-        ...item,
-        data: [...(res.body.subIndicator[index]?.data ?? []), ...item.data.slice(1)],
-      })),
-    };
-    console.log("触发了加载更多数据");
-    // 使用RAF链式渲染，保持当前缩放位置
-    await nextTick();
-    scheduleRender(true);
-    if (res.body.data.length < addCounts) {
-      isloadAllHistory = true;
-      console.log("历史数据已经全部加载完毕");
-    }
-    isLoadHistory = false;
-  }
-};
-// 键盘事件
-const handleKeyDownEvent = ({ code, ctrlKey }) => {
-  if (!(ctrlKey || isHover.value)) return;
-  const { xAxis, dataZoom } = mainChartIns.getOption();
-  const { data: xAxisData } = xAxis?.[0] ?? { data: [] };
-  let { startValue, endValue } = dataZoom?.[0] ?? {};
-  if (!xAxisData?.length) return;
-
-  switch (code) {
-    case "ArrowUp": {
-      if (endValue - startValue < 5) return;
-      const diff = Math.floor((endValue - startValue) / 2) + 1;
-      startValue = startValue + diff;
-      if (endValue - startValue < 5) startValue = endValue - 4;
-      break;
-    }
-    case "ArrowDown": {
-      const diff = Math.min(500, endValue - startValue);
-      startValue = startValue - diff - 1;
-      break;
-    }
-    case "ArrowLeft": {
-      if (startValue > 0) {
-        startValue -= 1;
-        endValue -= 1;
-      }
-      if (activeIndex.value > 0) {
-        activeIndex.value -= 1;
-      }
-      break;
-    }
-    case "ArrowRight": {
-      if (endValue < xAxisData.length - 1) {
-        startValue += 1;
-        endValue += 1;
-      }
-      if (isHover.value && activeIndex.value < xAxisData.length - 1) {
-        activeIndex.value += 1;
-      }
-      break;
-    }
-  }
-
-  requestAnimationFrame(() => {
-    mainChartIns.dispatchAction({ type: "dataZoom", startValue, endValue });
-    mainChartIns.dispatchAction({
-      type: "updateAxisPointer",
-      seriesIndex: 0,
-      dataIndex: isHover.value ? activeIndex.value : null,
-    });
-    mainChartIns.dispatchAction({
-      type: "highlight",
-      dataIndex: isHover.value ? activeIndex.value : endValue,
-    });
-  });
-};
-// 图表事件
-const addEventListener = () => {
-  mainChartIns?.on(
-    "datazoom",
-    debounce((params) => {
-      const { loadCheckCounts } = config.value;
-      if (mainChartIns?.getOption()?.dataZoom?.[0]) {
-        const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
-        if (startValue < loadCheckCounts && !isLoadHistory && !isloadAllHistory) {
-          isLoadHistory = true;
-          getMoreData("history");
-        }
-        drawLine(); // 使用RAF优化的绘线
-      }
-    }, 100),
-  );
-
-  mainChartIns?.on(
-    "highlight",
-    debounce((data) => {
-      let index = data.dataIndex || -1;
-      if (data.batch) {
-        index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
-      }
-      activeIndex.value = index;
-    }, 20),
-  );
-
-  mainChartIns?.on(
-    "globalout",
-    debounce(() => {
-      if (mainChartIns) {
-        const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
-        activeIndex.value = index;
-      }
-    }, 30),
-  );
-
-  mainChartIns?.on(
-    "contextmenu",
-    debounce((params) => {
-      if (params.componentType === "graphic") {
-        warningItem.value = params.info;
-        menuData.value = [
-          { label: "删除画线", key: "deleteWarningLine" },
-          { label: "修改画线", key: "changeWarningLine" },
-        ];
-      }
-    }, 0),
-  );
-};
-
-// 预警线相关辅助函数
-const updateWarningLineAndDraw = async () => {
-  const res = await getWarningLine({ featureId: props.featureId });
-  warningLineData.value = res?.body || [];
-  drawLine();
-  emit("change", "warningLine", warningLineData.value);
-};
-const menuClick = async (item) => {
-  const { variety, varietyName, featureId, featureType } = props;
-
-  if (item.key === "drawWarningLine") {
-    const mainChartOption = mainChartIns?.getOption();
-    const oldTooltip = mainChartOption.tooltip[0];
-
-    mainChartIns?.setOption({
-      ...mainChartOption,
-      tooltip: {
-        ...oldTooltip,
-        axisPointer: {
-          ...oldTooltip.axisPointer,
-          lineStyle: { width: 0 },
-          crossStyle: { width: 2 },
-          label: {
-            ...oldTooltip.axisPointer.label,
-            backgroundColor: "transparent",
-            formatter: () => "",
-          },
-        },
-      },
-    });
-
-    const handleClick = async (el) => {
-      mainChartIns?.getZr().off("mousedown", handleClick);
-      const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, el.offsetY);
-      const newWarnPrice = Math.round(yAxisValue * 1000) / 1000;
-
-      mainChartIns?.setOption({
-        ...mainChartOption,
-        tooltip: {
-          ...oldTooltip,
-          axisPointer: {
-            ...oldTooltip.axisPointer,
-            lineStyle: { width: 1 },
-            crossStyle: { width: 1 },
-            label: {
-              ...oldTooltip.axisPointer.label,
-              backgroundColor: null,
-            },
-          },
-        },
-      });
-
-      await addWarningLine({
-        featureCode: variety,
-        featureName: varietyName,
-        featureId,
-        featureType,
-        warnPrice: newWarnPrice,
-      });
-      ElMessage.success("画线预警成功!");
-      updateWarningLineAndDraw();
-    };
-
-    mainChartIns?.getZr().on("mousedown", handleClick);
-  } else if (item.key === "deleteWarningLine") {
-    await deleteWarningLine({ id: warningItem.value.id });
-    ElMessage.success("画线预警删除成功");
-    updateWarningLineAndDraw();
-  } else if (item.key === "changeWarningLine") {
-    warningLineChangeVisible.value = true;
-    warningLineChangeValue.value = warningItem.value.warnPrice;
-  }
-};
-const changeWarningLine = async () => {
-  const { variety, varietyName, featureId, featureType } = props;
-  await updateWarningLine({
-    id: warningItem.value.id,
-    featureCode: variety,
-    featureName: varietyName,
-    featureId,
-    featureType,
-    warnPrice: warningLineChangeValue.value,
-  });
-  ElMessage.success("画线预警修改成功");
-  updateWarningLineAndDraw();
-};
-const closeContextMenuCallBack = () => {
-  menuData.value = [...defaultMenuData];
-};
-
-onMounted(() => {
-  initRequestByEnv(props.env);
-  getMainData();
-  window.addEventListener("keydown", handleKeyDownEvent);
-});
-watch(
-  () => [props.variety, props.cycle, props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator],
-  () => {
-    // 重置加载状态
-    isLoadHistory = false;
-    isloadAllHistory = false;
-    getMainData();
-  },
-  { deep: true },
-);
-onUnmounted(() => {
-  // 取消所有动画帧
-  if (renderFrameId) {
-    cancelAnimationFrame(renderFrameId);
-    renderFrameId = null;
-  }
-  if (drawLineFrameId) {
-    cancelAnimationFrame(drawLineFrameId);
-    drawLineFrameId = null;
-  }
-  mainChartIns?.off("datazoom");
-  mainChartIns?.off("highlight");
-  mainChartIns?.off("globalout");
-  mainChartIns?.dispose();
-  resizeRo?.dispose();
-  window.removeEventListener("keydown", handleKeyDownEvent);
-});
-defineExpose({
-  draw: (type, data) => {
-    if (type === "warningLine") {
-      warningLineData.value = data;
-      drawLine();
-    }
-  },
-});
-</script>
-
-<template>
-  <div
-    class="klineBasic"
-    @mousemove="isHover = true"
-    @mouseout="isHover = false"
-  >
-    <div
-      v-if="chartData.time?.length"
-      class="klineBasic-tips"
-    >
-      <KlineTips
-        :variety="variety"
-        :data="chartData"
-        :activeIndex="activeIndex"
-      />
-    </div>
-    <div
-      class="klineBasic-main"
-      :style="{ height: config.showSubChart ? '70%' : '100%' }"
-    >
-      <Contextmenu @closeContextMenuCallBack="closeContextMenuCallBack">
-        <div
-          ref="klineBasicMainRef"
-          style="height: 100%"
-        ></div>
-        <template #popover>
-          <el-menu
-            :style="{
-              borderRadius: '4px',
-              overflow: 'hidden',
-              background: '#fff',
-              borderRight: 0,
-            }"
-          >
-            <el-menu-item
-              v-for="item in menuData"
-              style="height: 36px"
-              :key="item.key"
-              :index="item.key"
-              @click="menuClick(item)"
-            >
-              {{ item.label }}
-            </el-menu-item>
-          </el-menu>
-        </template>
-      </Contextmenu>
-    </div>
-    <div
-      class="klineBasic-sub"
-      v-if="config.showSubChart"
-    >
-      <KlineSub
-        ref="klineSubRef"
-        v-model="subIndicator"
-        :data="chartData"
-        :cycle="cycle"
-        :activeIndex="activeIndex"
-        :subIndicatorList="indicatorStore?.subIndicatorList"
-      />
-    </div>
-    <div
-      class="klineBasic-empty"
-      v-if="isEmpty"
-    >
-      <el-empty
-        class="klineBasic-empty-content"
-        description="暂无数据"
-      />
-    </div>
-    <div
-      class="klineBasic-error"
-      v-if="isError"
-    >
-      <div class="klineBasic-error-content">加载失败，请刷新重试</div>
-      <div style="text-align: center">
-        <el-button @click="getMainData">刷新</el-button>
-      </div>
-    </div>
-  </div>
-  <!-- 画线预警-修改价格弹窗 -->
-  <el-dialog
-    v-model="warningLineChangeVisible"
-    title="画线预警-修改价格"
-    width="30%"
-    align-center
-  >
-    <span style="margin-right: 10px">预警价格:</span>
-    <el-input-number
-      v-model="warningLineChangeValue"
-      placeholder="输入预警价格"
-    />
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="warningLineChangeVisible = false">取消</el-button>
-        <el-button
-          type="primary"
-          @click="changeWarningLine"
-          >确定</el-button
-        >
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<style lang="scss" scoped>
-.klineBasic {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: #000;
-  &-tips {
-    position: absolute;
-    width: 100%;
-    top: 0;
-  }
-  &-main {
-    width: 100%;
-    height: 70%;
-  }
-  &-sub {
-    width: 100%;
-    height: 30%;
-  }
-  &-empty {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    &-content {
-      height: 100%;
-      padding: 0;
-      --el-empty-fill-color-0: var(--el-color-black);
-      --el-empty-fill-color-1: #4b4b52;
-      --el-empty-fill-color-2: #36383d;
-      --el-empty-fill-color-3: #1e1e20;
-      --el-empty-fill-color-4: #262629;
-      --el-empty-fill-color-5: #202124;
-      --el-empty-fill-color-6: #212224;
-      --el-empty-fill-color-7: #1b1c1f;
-      --el-empty-fill-color-8: #1c1d1f;
-      --el-empty-fill-color-9: #18181a;
-    }
-  }
-  &-error {
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: #000;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    &-content {
-      color: #fff;
-      font-size: 20px;
-      text-align: center;
-      margin-bottom: 12px;
-    }
-  }
-}
-</style>