st-comp 0.0.133 → 0.0.135

package/packages/KlineBasic/index.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="klineBasic">
     <div class="klineBasic-tips">
-      <KlineTips :data="chartData" :activeIndex="activeIndex" />
+      <KlineTips
+        :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>
+        <div
+          ref="klineBasicMainRef"
+          style="height: 100%"
+        ></div>
         <template #popover>
           <el-menu
             :style="{
@@ -31,7 +37,10 @@
         </template>
       </Contextmenu>
     </div>
-    <div class="klineBasic-sub" v-if="config.showSubChart">
+    <div
+      class="klineBasic-sub"
+      v-if="config.showSubChart"
+    >
       <KlineSub
         ref="klineSubRef"
         v-model="subIndicator"
@@ -40,17 +49,21 @@
         :subIndicatorList="indicatorStore?.subIndicatorList"
       />
     </div>
-    <div class="klineBasic-empty" v-if="isEmpty">
+    <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;">
+    <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>
@@ -81,57 +94,57 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref, watch, computed } from "vue"
-import * as echarts from "echarts"
-import dayjs from "dayjs"
-import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from './api'
-import { addResizeListener } 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'
+import { onMounted, onUnmounted, ref, watch, computed } from "vue";
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import { initRequestByEnv, getKlineBasic, getKline, getWarningLine, addWarningLine, updateWarningLine, deleteWarningLine } from "./api";
+import { addResizeListener } 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" }]
+const defaultMenuData = [{ label: "画线预警", key: "drawWarningLine" }];
 
 let resizeRo = null; // dom元素监听事件
-let mainChartIns = null // 主图实例
+let mainChartIns = null; // 主图实例
 
-let highlightTimer // 高亮事件定时器
-let mainDataZoomTimer // datazoom事件定时器
+let highlightTimer; // 高亮事件定时器
+let mainDataZoomTimer; // datazoom事件定时器
 
 let isLoadHistory = false; // 是否正在加载历史数据
 let isloadAllHistory = false; // 是否加载完全部历史数据
 
-const emit = defineEmits(['change', 'getFactorData']);
+const emit = defineEmits(["change", "getFactorData"]);
 
 const props = defineProps({
   variety: {
     type: [String, Number],
-    default: () => null
+    default: () => null,
   }, // 品种代码
   varietyName: {
     type: [String, Number],
-    default: () => null
+    default: () => null,
   }, // 品种名称
   featureId: {
     type: [String, Number],
-    default: () => null
+    default: () => null,
   }, // 合约id
   featureType: {
     type: [String, Number],
-    default: () => null
+    default: () => null,
   }, // 合约类型
   cycle: {
     type: [String, Number],
-    default: () => null
+    default: () => null,
   }, // 周期id
   mainIndicator: {
     type: String,
-    default: () => ''
+    default: () => "",
   }, // 主图指标名称
   indicatorStore: {
     type: Object,
-    default: () => null
+    default: () => null,
   }, // 指标配置Store
   startTime: {
     type: String,
@@ -147,30 +160,34 @@ const props = defineProps({
   }, // 复权方式，前复权-1，不复权-0
   config: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   }, // 配置
   env: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
   }, // 环境变量
-})
+  brushRange: {
+    type: [Array, null],
+    default: () => null,
+  }, // 时段框选
+});
 
-const isEmpty = ref(false) // 是否无数据
-const isError = ref(false) // 是否异常
+const isEmpty = ref(false); // 是否无数据
+const isError = ref(false); // 是否异常
 
-const klineBasicMainRef = ref(null) // 主图Dom元素
-const klineSubRef = ref(null) // 副图组件元素
-const subIndicator = ref('VOL') // 副图指标
-const activeIndex = ref(0) // 当前选中的k线
+const klineBasicMainRef = ref(null); // 主图Dom元素
+const klineSubRef = ref(null); // 副图组件元素
+const subIndicator = ref("VOL"); // 副图指标
+const activeIndex = ref(0); // 当前选中的k线
 
-const chartData = ref({}) // 图表数据
+const chartData = ref({}); // 图表数据
 
-const warningLineData = ref([]) // 预警线数据
+const warningLineData = ref([]); // 预警线数据
 const warningItem = ref({}); // 右键点击的预警线
 const warningLineChangeVisible = ref(false); // 修改预警线价格弹窗visible
-const warningLineChangeValue = ref(''); // 修改预警线价格弹窗value
+const warningLineChangeValue = ref(""); // 修改预警线价格弹窗value
 
-const menuData = ref([ ...defaultMenuData ]); // 右键菜单
+const menuData = ref([...defaultMenuData]); // 右键菜单
 
 const config = computed(() => {
   return {
@@ -185,48 +202,45 @@ const config = computed(() => {
     showWarningLine: true, // 是否展示预警线
     getFactorData: true, // 是否获取因子数据
     ...props.config,
-  }
-})
+  };
+});
 
 watch(
-  () => [
-    props.variety, props.cycle, props.mainIndicator, subIndicator.value,
-    props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator
-  ],
+  () => [props.variety, props.cycle, props.mainIndicator, subIndicator.value, props.indicatorStore?.filterIndicator, props.indicatorStore?.customIndicator],
   () => {
-    getMainData()
+    getMainData();
   },
   { deep: true }
-)
+);
 
 onMounted(() => {
-  initRequestByEnv(props.env)
-  getMainData()
-})
+  initRequestByEnv(props.env);
+  getMainData();
+});
 
 onUnmounted(() => {
-  mainChartIns?.off("datazoom")
-  mainChartIns?.off("highlight")
-  mainChartIns?.off("globalout")
-  mainChartIns?.dispose()
-  resizeRo?.dispose()
-})
+  mainChartIns?.off("datazoom");
+  mainChartIns?.off("highlight");
+  mainChartIns?.off("globalout");
+  mainChartIns?.dispose();
+  resizeRo?.dispose();
+});
 
 // 初始化图表
 const initChart = () => {
-  if (mainChartIns) return
-  mainChartIns = echarts.init(klineBasicMainRef.value)
-  addEventListener()
+  if (mainChartIns) return;
+  mainChartIns = echarts.init(klineBasicMainRef.value);
+  addEventListener();
   if (config.value.showSubChart) {
-    klineSubRef.value.connect(mainChartIns)
+    klineSubRef.value.connect(mainChartIns);
   }
-  resizeRo = addResizeListener(klineBasicMainRef.value)
+  resizeRo = addResizeListener(klineBasicMainRef.value);
   resizeRo.listen(() => {
     requestAnimationFrame(() => {
-      mainChartIns.resize()
-    })
-  })
-}
+      mainChartIns.resize();
+    });
+  });
+};
 // 图表事件
 const addEventListener = () => {
   // datazoom事件
@@ -240,9 +254,9 @@ const addEventListener = () => {
         if (startValue < loadCheckCounts && isLoadHistory === false && isloadAllHistory === false) {
           // 左侧数据小于检测条数，加载左侧数据
           isLoadHistory = true;
-          getMoreData('history');
+          getMoreData("history");
         }
-        drawLine()
+        drawLine();
       }
       clearTimeout(mainDataZoomTimer);
     }, 100);
@@ -283,11 +297,9 @@ const addEventListener = () => {
 
 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
+    if (!props.variety || !props.cycle) return;
+    const { variety, featureId, cycle, indicatorStore, mainIndicator, right, startTime, endTime } = props;
+    const { defaultShowCounts, addCounts, showWarningLine, getFactorData } = config.value;
     const params = {
       variety,
       featureId,
@@ -297,53 +309,53 @@ const getMainData = async () => {
       right,
       showWarningLine,
       getFactorData,
-    }
+    };
     if (startTime && endTime) {
       // 开始时间+结束时间
-      params.startTime = startTime
-      params.endTime = endTime
+      params.startTime = startTime;
+      params.endTime = endTime;
     } else if (startTime) {
       // 开始时间
-      params.startTime = startTime
-      params.limit = defaultShowCounts + addCounts
+      params.startTime = startTime;
+      params.limit = defaultShowCounts + addCounts;
     } else if (endTime) {
       // 结束时间
-      params.endTime = endTime
-      params.limit = defaultShowCounts + addCounts
+      params.endTime = endTime;
+      params.limit = defaultShowCounts + addCounts;
     } else {
       // 未传入时间，使用最新时间作为结束时间请求数据
-      params.endTime = dayjs().add(1, "hour").format('YYYY-MM-DD HH:mm:ss')
-      params.limit = defaultShowCounts + addCounts
+      params.endTime = dayjs().add(1, "hour").format("YYYY-MM-DD HH:mm:ss");
+      params.limit = defaultShowCounts + addCounts;
     }
-    const res = await getKlineBasic(params)
+    const res = await getKlineBasic(params);
     if (!res?.body?.kline?.time?.length) {
       isEmpty.value = true;
       isError.value = false;
-      return
+      return;
     } else {
       isEmpty.value = false;
       isError.value = false;
     }
-    chartData.value = res?.body?.kline
-    warningLineData.value = res?.body?.warningLine || []
-    draw()
-    drawLine()
+    chartData.value = res?.body?.kline;
+    warningLineData.value = res?.body?.warningLine || [];
+    draw();
+    drawLine();
     if (getFactorData) {
-      emit('getFactorData', res?.body?.factor)
+      emit("getFactorData", res?.body?.factor);
     }
-  } catch(err) {
+  } catch (err) {
     isError.value = true;
     isEmpty.value = false;
-    throw new Error(err)
+    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 { variety, cycle, indicatorStore, mainIndicator, right } = props;
+  const { addCounts } = config.value;
+  const { time } = chartData.value;
+  if (type === "history") {
     // 加载历史数据
     const res = await getKline({
       variety,
@@ -353,26 +365,26 @@ const getMoreData = async (type) => {
       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) ],
+      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) => {
         return {
           ...item,
-          data: [ ...res.body.mainIndicator[index].data, ...item.data.slice(1) ],
-        }
+          data: [...res.body.mainIndicator[index].data, ...item.data.slice(1)],
+        };
       }),
       subIndicator: chartData.value.subIndicator.map((item, index) => {
         return {
           ...item,
-          data: [ ...res.body.subIndicator[index].data, ...item.data.slice(1) ],
-        }
+          data: [...res.body.subIndicator[index].data, ...item.data.slice(1)],
+        };
       }),
-    }
+    };
     // 绘制
-    draw(true)
+    draw(true);
     // 判断是否加载完全部数据
     if (res.body.data.length < addCounts) {
       isloadAllHistory = true;
@@ -381,34 +393,88 @@ const getMoreData = async (type) => {
   } else {
     // 加载未来数据
   }
-}
+};
 
 const draw = (keepDataZoom = false) => {
-  initChart()
-  const { time } = chartData.value
-  const { gridRight, gridLeft, defaultShowCounts, maxShowCounts, showSubChart } = config.value
-  let startValue = time.length - 1 - defaultShowCounts
-  let endValue = time.length - 1
+  initChart();
+  const { time } = chartData.value;
+  const { gridRight, gridLeft, defaultShowCounts, maxShowCounts, showSubChart } = config.value;
+  let startValue = time.length - 1 - defaultShowCounts;
+  let endValue = time.length - 1;
   // 保持缩放位置
   if (keepDataZoom) {
-    const originOption = mainChartIns.getOption()
-    const originTime = originOption?.xAxis?.[0]?.data
-    const originDataZoom = originOption?.dataZoom?.[0]
-    const originStartTime = originTime[originDataZoom?.startValue]
-    const originEndTime = originTime[originDataZoom?.endValue]
-    startValue = time.findIndex((item) => item === originStartTime)
-    endValue = time.findIndex((item) => item === originEndTime)
+    const originOption = mainChartIns.getOption();
+    const originTime = originOption?.xAxis?.[0]?.data;
+    const originDataZoom = originOption?.dataZoom?.[0];
+    const originStartTime = originTime[originDataZoom?.startValue];
+    const originEndTime = originTime[originDataZoom?.endValue];
+    startValue = time.findIndex((item) => item === originStartTime);
+    endValue = time.findIndex((item) => item === originEndTime);
+  }
+  const options = getMainOptions(chartData.value, config.value, startValue, endValue);
+  mainChartIns.setOption(options, true);
+  activeIndex.value = endValue;
+  // 如果传入了刷选时间段
+  if (props.brushRange) {
+    let brushStartTime = null;
+    let brushEndTime = null;
+    switch (props.cycle) {
+      // 日
+      case "6": {
+        brushStartTime = time.find((item) => {
+          return new Date(item).getTime() >= new Date(props.brushRange[0]).getTime() || dayjs(item).format("YYYY-MM-DD") === dayjs(props.brushRange[0]).format("YYYY-MM-DD");
+        });
+        brushEndTime = time.findLast((item) => {
+          return new Date(item).getTime() <= new Date(props.brushRange[1]).getTime() || dayjs(item).format("YYYY-MM-DD") === dayjs(props.brushRange[1]).format("YYYY-MM-DD");
+        });
+        break;
+      }
+      // 周
+      case "7": {
+        brushStartTime = time.find((item) => {
+          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(props.brushRange[0]).day(5).format("YYYY-MM-DD");
+        });
+        brushEndTime = time.findLast((item) => {
+          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(props.brushRange[1]).day(5).format("YYYY-MM-DD");
+        });
+        break;
+      }
+      // 月
+      case "8": {
+        brushStartTime = time.find((item) => {
+          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(props.brushRange[0]).endOf("month").format("YYYY-MM-DD");
+        });
+        brushEndTime = time.findLast((item) => {
+          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(props.brushRange[1]).endOf("month").format("YYYY-MM-DD");
+        });
+        break;
+      }
+      default: {
+        brushStartTime = time.find((item) => {
+          return new Date(item).getTime() >= new Date(props.brushRange[0]).getTime();
+        });
+        brushEndTime = time.findLast((item) => {
+          return new Date(item).getTime() <= new Date(props.brushRange[1]).getTime();
+        });
+      }
+    }
+    console.log(brushStartTime, brushEndTime);
+    mainChartIns.dispatchAction({
+      type: "brush",
+      areas: [
+        {
+          brushType: "lineX",
+          coordRange: [brushStartTime, brushEndTime],
+          xAxisIndex: 0,
+        },
+      ],
+    });
   }
-  const options = getMainOptions(chartData.value, config.value, startValue, endValue)
-  mainChartIns.setOption(options, true)
-  activeIndex.value = endValue
   if (showSubChart) {
-    klineSubRef.value.draw(
-      { startValue, endValue, maxValueSpan: maxShowCounts },
-      { gridLeft, gridRight }
-    )
+    klineSubRef.value.draw({ startValue, endValue, maxValueSpan: maxShowCounts }, { gridLeft, gridRight });
   }
-}
+  drawBrush();
+};
 
 // 绘制线
 const drawLine = () => {
@@ -420,25 +486,90 @@ const drawLine = () => {
       ...mainChartOption,
       graphic: [
         ...getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, () => {
-          updateWarningLineAndDraw()
-        })
+          updateWarningLineAndDraw();
+        }),
       ],
     },
     true
   );
-}
+  drawBrush();
+};
+
+// 区域框选
+const drawBrush = () => {
+  const { time } = chartData.value;
+  // 如果传入了刷选时间段
+  if (props.brushRange && time?.length) {
+    // 传入时段的始末时间
+    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");
+    // 匹配到对应K线的时间段始末时间
+    let brushStartTime = null;
+    let brushEndTime = null;
+    switch (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) => {
+          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(startTime).day(5).format("YYYY-MM-DD");
+        });
+        brushEndTime = time.findLast((item) => {
+          return dayjs(item).day(5).format("YYYY-MM-DD") === dayjs(endTime).day(5).format("YYYY-MM-DD");
+        });
+        break;
+      }
+      // 月
+      case "8": {
+        brushStartTime = time.find((item) => {
+          return dayjs(item).endOf("month").format("YYYY-MM-DD") === dayjs(startTime).endOf("month").format("YYYY-MM-DD");
+        });
+        brushEndTime = time.findLast((item) => {
+          return 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;
+        });
+      }
+    }
+    mainChartIns.dispatchAction({
+      type: "brush",
+      areas: [
+        {
+          brushType: "lineX",
+          coordRange: [brushStartTime, brushEndTime],
+          xAxisIndex: 0,
+        },
+      ],
+    });
+  }
+};
 
 // 更新预警线并绘制
 const updateWarningLineAndDraw = async () => {
-  const res = await getWarningLine({ featureId: props.featureId })
+  const res = await getWarningLine({ featureId: props.featureId });
   warningLineData.value = res?.body || [];
-  drawLine()
-  emit('change', 'warningLine', warningLineData.value);
-}
+  drawLine();
+  emit("change", "warningLine", warningLineData.value);
+};
 
 const menuClick = async (item) => {
-  const { variety, varietyName, featureId, featureType } = props
-  if (item.key === 'drawWarningLine') {
+  const { variety, varietyName, featureId, featureType } = props;
+  if (item.key === "drawWarningLine") {
     // 画线预警
     // 拿到当前主图配置项
     const mainChartOption = mainChartIns?.getOption();
@@ -510,23 +641,23 @@ const menuClick = async (item) => {
         warnPrice: newWarnPrice,
       });
       ElMessage.success("画线预警成功!");
-      updateWarningLineAndDraw()
+      updateWarningLineAndDraw();
     };
     // 4.绑定echarts点击事件
     mainChartIns?.getZr().on("mousedown", handleClick);
-  } else if (item.key === 'deleteWarningLine') {
+  } else if (item.key === "deleteWarningLine") {
     // 删除预警线
     await deleteWarningLine({ id: warningItem.value.id });
     ElMessage.success("画线预警删除成功");
-    updateWarningLineAndDraw()
-  } else if (item.key === 'changeWarningLine') {
+    updateWarningLineAndDraw();
+  } else if (item.key === "changeWarningLine") {
     warningLineChangeVisible.value = true;
     warningLineChangeValue.value = warningItem.value.warnPrice;
   }
-}
+};
 
 const changeWarningLine = async () => {
-  const { variety, varietyName, featureId, featureType } = props
+  const { variety, varietyName, featureId, featureType } = props;
   await updateWarningLine({
     id: warningItem.value.id,
     featureCode: variety, //品种代码
@@ -536,21 +667,21 @@ const changeWarningLine = async () => {
     warnPrice: warningLineChangeValue.value,
   });
   ElMessage.success("画线预警修改成功");
-  updateWarningLineAndDraw()
-}
+  updateWarningLineAndDraw();
+};
 
 const closeContextMenuCallBack = () => {
-  menuData.value =[ ...defaultMenuData ];
+  menuData.value = [...defaultMenuData];
 };
 
 defineExpose({
   draw: (type, data) => {
-    if (type === 'warningLine') {
+    if (type === "warningLine") {
       warningLineData.value = data;
-      drawLine()
+      drawLine();
     }
-  }
-})
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -576,7 +707,7 @@ defineExpose({
     position: absolute;
     top: 0;
     width: 100%;
-    height: 100%; 
+    height: 100%;
     background: #000;
     &-content {
       height: 100%;
@@ -597,7 +728,7 @@ defineExpose({
     position: absolute;
     top: 0;
     width: 100%;
-    height: 100%; 
+    height: 100%;
     background: #000;
     display: flex;
     flex-direction: column;