st-comp 0.0.122 → 0.0.124

package/packages/KlineBasic/index.vue

@@ -0,0 +1,565 @@
+<template>
+  <div class="klineBasic">
+    <div class="klineBasic-tips">
+      <KlineTips :data="chartData" :activeIndex="activeIndex" />
+    </div>
+    <div
+      class="klineBasic-main"
+      :style="{ height: config.showSubChart ? '70%' : '100%' }"
+    >
+      <Contextmenu>
+        <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"
+        :activeIndex="activeIndex"
+        :subIndicatorList="indicatorStore?.subIndicatorList"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted, ref, watch, computed } from "vue"
+import * as echarts from "echarts"
+import dayjs from "dayjs"
+import { getKlineBasic, getKline, addWarningLine } from './api'
+import { addResizeListener, stMath } from 'st-func'
+import { 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 { round } = stMath;
+
+let resizeRo = null; // dom元素监听事件
+let mainChartIns = null // 主图实例
+
+let highlightTimer // 高亮事件定时器
+let mainDataZoomTimer // datazoom事件定时器
+
+let isLoadHistory = false; // 是否正在加载历史数据
+let isloadAllHistory = false; // 是否加载完全部历史数据
+
+const emit = defineEmits(['change', 'getFactorData']);
+
+const props = defineProps({
+  variety: {
+    type: [String, Number],
+    required: true,
+  }, // 品种代码
+  varietyName: {
+    type: [String, Number],
+    default: () => ''
+  }, // 品种名称
+  featureId: {
+    type: [String, Number],
+    default: () => ''
+  }, // 合约id
+  featureType: {
+    type: [String, Number],
+    default: () => ''
+  }, // 合约类型
+  cycle: {
+    type: String,
+    required: true,
+  }, // 周期id
+  mainIndicator: {
+    type: Object,
+    default: () => ''
+  }, // 主图指标名称
+  indicatorStore: {
+    type: Object,
+    default: () => null
+  }, // 指标配置Store
+  startTime: {
+    type: String,
+    default: () => null,
+  },
+  endTime: {
+    type: String,
+    default: () => null,
+  },
+  right: {
+    type: Number,
+    default: 1,
+  }, // 复权方式，前复权-1，不复权-0
+  config: {
+    type: Object,
+    default: () => ({})
+  }, // 配置
+})
+
+const klineBasicMainRef = ref(null) // 主图Dom元素
+const klineSubRef = ref(null) // 副图组件元素
+const subIndicator = ref('VOL') // 副图指标
+const activeIndex = ref(0) // 当前选中的k线
+
+const chartData = ref({}) // 图表数据
+const warningLineData = ref([]) // 预警线数据
+
+const menuData = ref([{ label: "画线预警", key: "drawWarningLine" }]);
+
+const config = computed(() => {
+  return {
+    defaultShowCounts: 500, // 默认展示条数
+    addCounts: 2000, // 滚动加载条数
+    maxShowCounts: 5000, // 单页最大展示条数
+    loadCheckCounts: 500, // 滚动加载检测的条数
+    showSubChart: true, // 是否展示副图
+    gridLeft: 80, // 主图左侧距离
+    gridRight: 50, // 主图右侧距离
+    showWarningLine: true, // 是否展示预警线
+    getFactorData: true, // 是否获取因子数据
+    ...props.config,
+  }
+})
+
+watch(
+  () => [
+    props.variety, props.cycle, props.mainIndicator, subIndicator.value,
+    indicatorStore.filterIndicator, indicatorStore.customIndicator
+  ],
+  () => {
+    getMainData()
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  getMainData()
+})
+
+onUnmounted(() => {
+  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 (config.value.showSubChart) {
+    klineSubRef.value.connect(mainChartIns)
+  }
+  resizeRo = addResizeListener(klineBasicMainRef.value)
+  resizeRo.listen(() => {
+    requestAnimationFrame(() => {
+      mainChartIns.resize()
+    })
+  })
+}
+// 图表事件
+const addEventListener = () => {
+  // datazoom事件
+  mainChartIns?.on("datazoom", (params) => {
+    clearTimeout(mainDataZoomTimer);
+    mainDataZoomTimer = setTimeout(() => {
+      const { loadCheckCounts } = config.value;
+      if (mainChartIns?.getOption()?.dataZoom?.[0]) {
+        const { startValue } = mainChartIns?.getOption()?.dataZoom?.[0];
+        // 加载历史数据
+        if (startValue < loadCheckCounts && isLoadHistory === false && isloadAllHistory === false) {
+          // 左侧数据小于检测条数，加载左侧数据
+          isLoadHistory = true;
+          getMoreData('history');
+        }
+        drawLine()
+      }
+      clearTimeout(mainDataZoomTimer);
+    }, 100);
+  });
+  // 高亮事件
+  mainChartIns?.on("highlight", (data) => {
+    let index = data.dataIndex || -1;
+    if (data.batch) {
+      index = typeof data?.batch[0]?.dataIndex === "number" ? data?.batch[0]?.dataIndex : -1;
+    }
+    clearTimeout(highlightTimer);
+    highlightTimer = setTimeout(() => {
+      activeIndex.value = index;
+      clearTimeout(highlightTimer);
+    }, 20);
+  });
+  // 移出图表事件
+  mainChartIns?.on("globalout", () => {
+    const index = mainChartIns?.getOption()?.dataZoom?.[0]?.endValue;
+    activeIndex.value = index;
+  });
+  // 右键点击事件
+  // let echartsContextMenuTimer = null;
+  // mainChart?.on("contextmenu", (params) => {
+  //   echartsContextMenuTimer = setTimeout(() => {
+  //     if (params.componentType === "graphic") {
+  //       warningItem.value = params.info;
+  //       menuData.value = [
+  //         { label: "删除画线", key: "delete" },
+  //         { label: "修改画线", key: "change" },
+  //       ];
+  //     }
+  //     clearTimeout(echartsContextMenuTimer);
+  //     echartsContextMenuTimer = null;
+  //   });
+  // });
+};
+
+const getMainData = async () => {
+  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,
+    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 = defaultShowCounts + addCounts
+  } else if (endTime) {
+    // 结束时间
+    params.endTime = endTime
+    params.limit = defaultShowCounts + addCounts
+  } else {
+    // 未传入时间，使用最新时间作为结束时间请求数据
+    params.endTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+    params.limit = defaultShowCounts + addCounts
+  }
+  const res = await getKlineBasic(params)
+  chartData.value = res?.body?.kline
+  warningLineData.value = res?.body?.warningLine || []
+  draw()
+  drawLine()
+  if (getFactorData) {
+    emit('getFactorData', res?.body?.factorData?.filter(i => i.freqId === cycle))
+  }
+}
+
+// 加载历史/未来数据
+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) => {
+        return {
+          ...item,
+          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) ],
+        }
+      }),
+    }
+    // 绘制
+    draw(true)
+    // 判断是否加载完全部数据
+    if (res.body.data.length < addCounts) {
+      isloadAllHistory = true;
+    }
+    isLoadHistory = false;
+  } else {
+    // 加载未来数据
+  }
+}
+
+const draw = (keepDataZoom = false) => {
+  initChart()
+  const { data, time } = chartData.value
+  const { gridRight, gridLeft, defaultShowCounts, maxShowCounts, showSubChart } = config.value
+  let startValue = data.length - 1 - defaultShowCounts
+  let endValue = data.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)
+  }
+  mainChartIns.setOption({
+    animation: false,
+    grid: {
+      top: '48px',
+      right: `${gridRight}px`,
+      bottom: showSubChart ? '6px' : '24px',
+      left: `${gridLeft}px`,
+    },
+    dataZoom: [
+      {
+        type: "inside",
+        startValue,
+        endValue,
+        maxValueSpan: maxShowCounts,
+      },
+    ],
+    tooltip: {
+      trigger: "axis",
+      appendToBody: true,
+      confine: true,
+      axisPointer: {
+        type: "cross",
+        label: {
+          rich: {},
+          formatter: (data) => {
+            const { axisDimension, value } = data;
+            if (axisDimension === "x") {
+              return showSubChart ? "" : value;
+            } else {
+              return String(round(value));
+            }
+          },
+        },
+      },
+      formatter: () => "",
+    },
+    xAxis: {
+      show: showSubChart ? false : true,
+      type: "category",
+      data: time,
+      splitLine: {
+        show: false,
+      },
+    },
+    yAxis: {
+      type: "value",
+      axisLine: {
+        show: true,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          type: "dotted",
+          color: "#333",
+        },
+      },
+      min: (value) => round(value.min),
+      max: (value) => round(value.max),
+    },
+    series: [
+      {
+        type: "candlestick",
+        data,
+        itemStyle: {
+          color: "transparent",
+          color0: "#00FFFF",
+          borderColor: "#FF0000",
+          borderColor0: "#00FFFF",
+          borderWidth: 1,
+        },
+      },
+      ...chartData.value.mainIndicator.map((item) => {
+        return {
+          name: item.key,
+          type: 'line',
+          silent: true,
+          symbol: 'none',
+          data: item.data,
+          lineStyle: {
+            width: item.width || 1,
+          },
+          itemStyle: {
+            color: item.color,
+          }
+        }
+      })
+    ],
+  }, true)
+  activeIndex.value = endValue
+  if (showSubChart) {
+    klineSubRef.value.draw(
+      { startValue, endValue, maxValueSpan: maxShowCounts },
+      { gridLeft, gridRight }
+    )
+  }
+}
+
+// 绘制线
+const drawLine = () => {
+  if (!mainChartIns) return;
+  const mainChartOption = mainChartIns?.getOption();
+  if (!mainChartOption) return;
+  mainChartIns?.setOption(
+    {
+      ...mainChartOption,
+      graphic: [
+        ...getWarningLineOptions(mainChartIns, warningLineData.value, props, config.value, (newWarningLineData) => {
+          warningLineData.value = newWarningLineData;
+          drawLine()
+          emit('change', 'warningLine', newWarningLineData);
+        })
+      ],
+    },
+    true
+  );
+}
+
+const menuClick = (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,
+          // X轴指示线的宽度
+          lineStyle: {
+            width: 0,
+          },
+          // Y轴指示线的宽度
+          crossStyle: {
+            width: 2,
+          },
+          // 文本标签
+          label: {
+            // 保留原有部分配置
+            ...oldTooltip.axisPointer.label,
+            // 颜色改为透明
+            backgroundColor: "transparent",
+            // 仅显示Y轴值
+            formatter: (data) => "",
+          },
+        },
+      },
+    });
+    // 编写点击事件:获取到数据发送给后端
+    const handleClick = async (el) => {
+      // (1).在触发点击事件后,第一时间将图表绑定的点击事件清除
+      mainChartIns?.getZr().off("mousedown", handleClick);
+      // (2).根据点击位置获取到Y轴具体数据
+      const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, el.offsetY);
+      // (3).格式化画线预警价格
+      const newWarnPrice = Math.round(yAxisValue * 1000) / 1000;
+      // (4).将指示器恢复成原始样式
+      mainChartIns?.setOption({
+        ...mainChartOption,
+        // 指示器样式
+        tooltip: {
+          ...oldTooltip,
+          axisPointer: {
+            ...oldTooltip.axisPointer,
+            lineStyle: {
+              width: 1,
+            },
+            crossStyle: {
+              width: 1,
+            },
+            label: {
+              ...oldTooltip.axisPointer.label,
+              backgroundColor: null,
+            },
+          },
+        },
+      });
+      // (6).发送新增预警线请求
+      await addWarningLine({
+        featureCode: variety, //品种代码
+        featureName: varietyName, //品种名称
+        featureId, //品种id
+        featureType, //品种类型
+        warnPrice: newWarnPrice,
+      });
+      ElMessage.success("画线预警成功!");
+    };
+    // 4.绑定echarts点击事件
+    mainChartIns?.getZr().on("mousedown", handleClick);
+  }
+}
+
+defineExpose({
+  draw(type, data) {
+    if (type === 'warningLine') {
+      warningLineData.value = data;
+      drawLine()
+    }
+  }
+})
+</script>
+
+<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%;
+  }
+}
+</style>

package/packages/KlineBasic/utils.js

@@ -0,0 +1,86 @@
+import { stMath } from "st-func";
+import { updateWarningLine, getWarningLine } from './api'
+
+const { round } = stMath;
+
+export const getWarningLineOptions = (mainChartIns, warningLineData, props, config, callback) => {
+  const { variety, featureId, featureType } = props
+  const { gridLeft, gridRight } = config;
+  return warningLineData.map((item) => {
+    const { warnPrice } = item;
+    const y = mainChartIns?.convertToPixel({ yAxisIndex: 0 }, warnPrice)
+    let dragStart = 0; // 记录拖拽开始的位置
+    return {
+      type: "group",
+      name: "warningLine",
+      info: item,
+      draggable: "vertical",
+      children: [
+        {
+          type: "line",
+          info: item,
+          shape: {
+            x1: gridLeft, // 开始X坐标
+            y1: y, // 开始Y坐标
+            x2: mainChartIns?.getWidth() - gridRight, // 结束X坐标
+            y2: y, // 结束Y坐标
+          },
+          style: {
+            stroke: "#FFF",
+            lineWidth: 1,
+            lineDash: [8, 4],
+          },
+          z: 10,
+        },
+        {
+          type: "text",
+          info: item,
+          x: mainChartIns?.getWidth() - gridRight,
+          y: y - 5,
+          style: {
+            fill: "#FFF",
+            text: warnPrice,
+            stroke: "#000",
+            lineWidth: 1,
+            opacity: 1,
+          },
+          z: 10,
+        },
+      ],
+      // 事件:开始拖拽
+      ondragstart: (params) => {
+        dragStart = params.offsetY; // 记录拖拽开始坐标
+      },
+      ondrag: params => {
+        if (params.target && params.target.childAt(1)) {
+          const newValue = mainChartIns.convertFromPixel({ yAxisIndex: 0 }, y + (params.offsetY - dragStart))
+          params.target.childAt(1)?.animate('style', false).when(1, { text: round(newValue, 3) }).start()
+        }
+      },
+      // 事件:结束拖拽
+      ondragend: async (params) => {
+        /**
+         * 之所以不直接使用dragEnd,是因为echarts拖拽会有偏差问题
+         * 需要使用偏移量才会更加准备,不然会出现画完线渲染位置和拖拽位置不一致
+         */
+        const dragEnd = params.offsetY; // 记录结束拖拽坐标
+        const dragInterval = dragEnd - dragStart; // 拖拽偏移量
+        if (dragInterval !== 0) {
+          // 计算偏移后对应的Y轴数据
+          const yAxisValue = mainChartIns?.convertFromPixel({ yAxisIndex: 0 }, dragInterval + y);
+          const params = {
+            id: item.id,
+            warnPrice: round(yAxisValue, 3),
+            featureId, //品种id
+            featureCode: variety, //品种代码
+            featureType, //品种类型
+          };
+          await updateWarningLine(params);
+          ElMessage.success("画线预警修改成功");
+          const res = await getWarningLine({ featureId })
+          callback && callback(res?.body || []);
+        }
+      },
+    };
+  })
+};

package/packages/VarietySearch/components/FactorScreen/index.vue

@@ -268,7 +268,7 @@ const handleDeleteTag = (aciton, index) => {
         >
           <!-- 序列号 -->
           <span class="index">{{ `条件${index + 1}` }}</span>
-          <!-- 对比因子 -->
+          <!-- 对比因子: 分值因子 -->
           <template v-if="item.key === 'compare'">
             <!-- 周期 -->
             <el-form-item
@@ -304,7 +304,7 @@ const handleDeleteTag = (aciton, index) => {
                 no-match-text="无匹配数据"
               >
                 <el-option
-                  v-for="{ label, value } in config.factorOptions"
+                  v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
                   :label="label"
                   :value="value"
                   :key="value"
@@ -359,7 +359,7 @@ const handleDeleteTag = (aciton, index) => {
                 no-match-text="无匹配数据"
               >
                 <el-option
-                  v-for="{ label, value } in config.factorOptions"
+                  v-for="{ label, value } in config.factorOptions?.filter((item) => [4].includes(item.type))"
                   :label="label"
                   :value="value"
                   :key="value"
@@ -367,7 +367,7 @@ const handleDeleteTag = (aciton, index) => {
               </el-select>
             </el-form-item>
           </template>
-          <!-- 常规因子 -->
+          <!-- 常规因子: 机器打分, 人工打分因子 -->
           <template v-else>
             <!-- 周期 -->
             <el-form-item
@@ -403,7 +403,7 @@ const handleDeleteTag = (aciton, index) => {
                 no-match-text="无匹配数据"
               >
                 <el-option
-                  v-for="{ label, value } in config.factorOptions"
+                  v-for="{ label, value } in config.factorOptions?.filter((item) => [1, 3].includes(item.type))"
                   :label="label"
                   :value="value"
                   :key="value"
@@ -496,10 +496,10 @@ const handleDeleteTag = (aciton, index) => {
       </template>
     </el-dialog>
   </div>
-  <!-- 因子说明 -->
+  <!-- 因子说明: 机器打分, 人工打分因子 -->
   <FactorDescription
     v-model:visible="visibleDescriptions"
-    :data="config.factorDescriptions"
+    :data="config.factorDescriptions?.filter((item) => [1, 3].includes(item.type))"
   />
 </template>