st-comp 0.0.122 → 0.0.124

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "st-comp",
   "public": true,
-  "version": "0.0.122",
+  "version": "0.0.124",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -20,7 +20,7 @@
     "element-plus": "^2.9.4",
     "monaco-editor": "0.47.0",
     "pinia": "^2.1.6",
-    "st-func": "^0.0.58",
+    "st-func": "^0.0.59",
     "talib.js": "^0.1.0",
     "vue-router": "^4.2.5"
   },

package/packages/KlineBasic/api.js

@@ -0,0 +1,60 @@
+import axios from "axios";
+import { getToken, getUserData } from 'st-func'
+
+const token = getToken();
+const host = "http://127.0.0.1:7001";
+
+// 获取K线数据以及基础数据
+export const getKlineBasic = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token },
+    url: `${host}/middleLayer/kline/getKlineBasic`,
+    data: { ...data, userId: getUserData('id')},
+  });
+  return res.data;
+}
+
+// 获取K线数据
+export const getKline = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token },
+    url: `${host}/middleLayer/kline/getKline`,
+    data,
+  });
+  return res.data;
+}
+
+// 画线预警
+export const addWarningLine = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token },
+    url: `${host}/middleLayer/post/alarm/deliversign/addAlarmPrice`,
+    data: { ...data, userId: getUserData('id')},
+  });
+  return res.data;
+};
+
+// 获取画线预警列表
+export const getWarningLine = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token },
+    url: `${host}/middleLayer/post/alarm/deliversign/findAlarmPriceByUserId`,
+    data: { ...data, userId: getUserData('id')},
+  });
+  return res.data;
+};
+
+// 更新画线预警
+export const updateWarningLine = async (data) => {
+  const res = await axios({
+    method: "post",
+    headers: { token },
+    url: `${host}/middleLayer/post/alarm/deliversign/updateAlarmPrice`,
+    data: { ...data, userId: getUserData('id')},
+  });
+  return res.data;
+};

package/packages/KlineBasic/components/Contextmenu/index.vue

@@ -0,0 +1,105 @@
+<!-- 右键菜单组件 -->
+<template>
+  <div
+    ref="contextmenuRef"
+    class="contextmenu"
+    @contextmenu="openContextMenuContent"
+    @mouseleave="closeContextMenuContent"
+  >
+    <slot />
+    <div
+      ref="contextmenuContentRef"
+      v-if="contextmenuContentStyle.display !== 'none'"
+      class="contextmenu-popover"
+      :style="contextmenuContentStyle"
+    >
+      <slot name="popover" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from "vue";
+
+// 接收传入的自定义事件函数
+const emits = defineEmits(["closeContextMenuCallBack"]);
+
+// 组件Ref
+const contextmenuRef = ref();
+
+// 悬浮菜单Ref
+const contextmenuContentRef = ref();
+// 悬浮菜单样式
+const contextmenuContentStyle = ref({
+  display: "none",
+  top: "0px",
+  left: "0px",
+});
+
+/**
+ * @description: 关闭悬浮菜单
+ * @todo: 支持触发传入的回调函数
+ */
+const closeContextMenuContent = () => {
+  contextmenuContentStyle.value.display = "none";
+  emits("closeContextMenuCallBack");
+  document.removeEventListener("click", closeContextMenuContent);
+};
+
+/**
+ * @description: 右键点击
+ * @todo: 打开悬浮菜单
+ */
+const openContextMenuContent = (el: MouseEvent) => {
+  // 1.阻止默认事件 + 冒泡
+  el.preventDefault();
+  // el.stopPropagation()
+  /**
+   * @todo: 解决在悬浮菜单已经打开时,右键菜单项,重复触发本函数导致菜单位置异常问题
+   */
+  if (contextmenuContentStyle.value.display === "block") {
+    // 判断鼠标位置是否在悬浮菜单内,如果是,则return,否则继续执行在新的位置打开
+    const { offsetX, offsetY } = el; // 鼠标
+    const { offsetWidth, offsetHeight } = contextmenuContentRef.value;
+    if (offsetX <= offsetWidth && offsetY <= offsetHeight) {
+      return;
+    }
+  }
+  contextmenuRef.value.click();
+  // 2.初始化展示悬浮菜单位置
+  contextmenuContentStyle.value = {
+    display: "block",
+    top: `${el.offsetY}px`,
+    left: `${el.offsetX}px`,
+  };
+  // 3.计算悬浮菜单是否超出范围
+  nextTick(() => {
+    const parentDomInfo = contextmenuRef.value.getBoundingClientRect();
+    const menuDomInfo = contextmenuContentRef.value.getBoundingClientRect();
+    // 宽度超出
+    if (menuDomInfo.left + menuDomInfo.width >= parentDomInfo.right) {
+      contextmenuContentStyle.value.left = `${el.offsetX - menuDomInfo.width}px`;
+    }
+    // 高度超出
+    if (menuDomInfo.top + menuDomInfo.height >= parentDomInfo.bottom) {
+      console.log("高度超出");
+      contextmenuContentStyle.value.top = `${el.offsetY - menuDomInfo.height}px`;
+    }
+  });
+  // 4.监听点击事件 -> 调用关闭悬浮菜单事件
+  document.addEventListener("click", closeContextMenuContent);
+};
+</script>
+
+<style lang="scss" scoped>
+.contextmenu {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  &-popover {
+    position: absolute;
+    z-index: 10;
+    display: none;
+  }
+}
+</style>

package/packages/KlineBasic/components/KlineSub/index.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="klineSub">
+    <div class="klineSub-tips">
+      <div
+        class="klineSub-tips-select"
+        v-if="subIndicatorTips.length"
+      >
+        <el-select
+          v-model="subIndicator"
+          size="small"
+          popper-class="element-dark"
+          class="element-dark subIndicator"
+        >
+          <el-option
+            v-for="item in subIndicatorList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+      <Tips :data="subIndicatorTips" />
+    </div>
+    <div
+      class="klineSub-chart"
+      ref="subChartRef"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
+import * as echarts from "echarts";
+import Tips from "../Tips/index.vue";
+import { stMath } from "st-func";
+const { round } = stMath;
+
+let subChart;
+let resizeRo; // dom元素监听事件
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  data: { type: Object, require: true },
+  activeIndex: { type: [Number, String], require: true },
+  modelValue: { type: String, required: true }, // 副图指标
+  subIndicatorList: { type: Array, required: true }, // 副图指标列表
+});
+
+const subChartRef = ref(); // 拖动轴
+const subIndicator = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit("update:modelValue", val);
+  },
+});
+
+const subIndicatorTips = computed(() => {
+  const { data, activeIndex } = props;
+  return data?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: item.data[activeIndex] || "-" })) || [];
+});
+onMounted(() => {
+  subChart = echarts.init(subChartRef.value);
+  // 绑定resize事件
+  let isFirst = true;
+  resizeRo = new ResizeObserver(() => {
+    if (isFirst) {
+      isFirst = null;
+      return;
+    }
+    subChart.resize();
+  });
+  resizeRo.observe(subChartRef.value);
+});
+
+onUnmounted(() => {
+  subChart.dispose();
+  resizeRo.disconnect();
+  resizeRo = null;
+});
+
+// 获取副图颜色
+const getSubBarStyle = (data, index) => {
+  const itemData = data[index];
+  const preItemData = index === 0 ? data[index] : data[index - 1];
+  if (itemData[0] === itemData[1]) {
+    return itemData[0] >= preItemData[1]
+      ? {
+          color: "transparent",
+          borderColor: "#FF0000",
+        }
+      : {
+          color: "#00FFFF",
+        };
+  } else {
+    return itemData[1] > itemData[0]
+      ? {
+          color: "transparent",
+          borderColor: "#FF0000",
+        }
+      : {
+          color: "#00FFFF",
+        };
+  }
+};
+
+defineExpose({
+  connect: (chart) => {
+    echarts.connect([chart, subChart]);
+  }, // 联动
+  draw: (drawConfig, config) => {
+    nextTick(() => {
+      const { startValue, endValue, maxValueSpan } = drawConfig;
+      const { leftYAxisRange, rightYAxisRange } = props.data.subIndicator[0];
+      const series = props.data.subIndicator.map((item) => {
+        if (item.series === "bar") {
+          return {
+            name: "subMain",
+            xAxisIndex: 0,
+            yAxisIndex: 1,
+            type: "bar",
+            silent: true,
+            symbol: "none",
+            data: item.data.map((val, index) => {
+              if (item.seriesColor === "kline") {
+                return {
+                  value: val,
+                  itemStyle: getSubBarStyle(props.data.data, index),
+                };
+              } else if (item.seriesColor === "value") {
+                return {
+                  value: val,
+                  itemStyle: {
+                    color: val >= 0 ? "#FF0000" : "#00FFFF",
+                  },
+                };
+              } else {
+                return {
+                  value: val,
+                  itemStyle: {
+                    color: item.seriesColor,
+                  },
+                };
+              }
+            }),
+          };
+        } else if (item.series === "line") {
+          return {
+            xAxisIndex: 0,
+            yAxisIndex: item.yAxis === "right" ? 2 : 1,
+            name: item.key,
+            type: "line",
+            silent: true,
+            symbol: "none",
+            data: item.data,
+            lineStyle: {
+              width: 1,
+            },
+            itemStyle: {
+              color: item.color,
+            },
+          };
+        }
+      });
+
+      subChart.setOption(
+        {
+          animation: false,
+          grid: {
+            left: `${config.gridLeft}px`,
+            top: "10px",
+            right: `${config.gridRight}px`,
+            bottom: "20px",
+          },
+          dataZoom: [
+            {
+              type: "inside",
+              startValue,
+              endValue,
+              maxValueSpan,
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+            appendToBody: true,
+            confine: true,
+            axisPointer: {
+              type: "cross",
+              label: {
+                rich: {},
+                formatter: (data) => {
+                  const { axisDimension, value } = data;
+                  if (axisDimension === "x") {
+                    return value;
+                  } else if (data.axisIndex === 1) {
+                    return String(round(value));
+                  }
+                },
+              },
+            },
+            formatter: () => "",
+          },
+          xAxis: {
+            type: "category",
+            data: props.data.time,
+            axisLine: {
+              show: true,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              formatter: (data) => data,
+            },
+          },
+          yAxis: [
+            {
+              position: "right",
+            },
+            {
+              position: "left",
+              min: leftYAxisRange === "cover" ? (value) => value.min : null,
+              max: leftYAxisRange === "cover" ? (value) => value.max : null,
+              splitNumber: 1,
+              axisLine: {
+                show: true,
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  type: "dotted",
+                  color: "#333",
+                },
+              },
+            },
+            {
+              position: "right",
+              min: rightYAxisRange === "cover" ? (value) => value.min : null,
+              max: rightYAxisRange === "cover" ? (value) => value.max : null,
+              splitNumber: 1,
+              axisLine: {
+                show: false,
+              },
+              splitLine: {
+                show: false,
+              },
+              axisLabel: {
+                show: false,
+              },
+            },
+          ],
+          series,
+        },
+        true
+      );
+    });
+  }, // 重置
+});
+</script>
+
+<style lang="scss" scoped>
+.klineSub {
+  width: 100%;
+  height: 100%;
+  &-tips {
+    height: 16px;
+    padding-left: 6px;
+    display: flex;
+    align-items: start;
+    &-select {
+      margin-right: 6px;
+      line-height: 12px;
+      :deep(.el-select__selection) {
+        display: none;
+      }
+      :deep(.el-select__wrapper) {
+        padding: 0;
+        width: 12px;
+        height: 12px;
+        min-height: 12px;
+        border-radius: 50%;
+        background-color: #ccc;
+      }
+      :deep(.el-select__icon) {
+        color: black;
+        font-size: 12px;
+      }
+    }
+  }
+  &-chart {
+    width: 100%;
+    height: calc(100% - 26px);
+  }
+}
+</style>

package/packages/KlineBasic/components/KlineTips/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="kline-tips">
+    <Tips :data="mainTips" />
+    <Tips :data="mainIndicatorTips" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import Tips from "../Tips/index.vue";
+import { stMath } from "st-func";
+const { round, formatValue } = stMath;
+
+const props = defineProps({
+  // 提示数据
+  data: {
+    type: Object,
+    require: true,
+  },
+  activeIndex: {
+    type: [Number, String],
+    require: true,
+  },
+});
+
+const mainTips = computed(() => {
+  const { data, activeIndex } = props;
+  if (data.data && data.data[activeIndex]) {
+    const itemData = data.data[activeIndex];
+    const result = [
+      { label: "开", value: round(itemData[0]) },
+      { label: "高", value: round(itemData[3]) },
+      { label: "低", value: round(itemData[2]) },
+      { label: "收", value: round(itemData[1]) },
+    ];
+    // 特殊: 交易总额
+    itemData[4] !== null && result.push({ label: "额", value: formatValue(itemData[4]) });
+    // 特殊: 涨跌幅 公式:收盘价 - 昨收 / (昨收绝对值)
+    let diffColor;
+    if (itemData[6] > 0) {
+      diffColor = "red";
+    } else if (itemData[6] < 0) {
+      diffColor = "green";
+    }
+    result.push({ label: "涨跌", value: `${round(itemData[6])}%`, color: diffColor });
+    return result;
+  }
+  return [];
+});
+
+const mainIndicatorTips = computed(() => {
+  const { data, activeIndex } = props;
+  return (
+    data?.mainIndicator?.map((item) => {
+      return { label: item.key, value: round(item.data[activeIndex]), color: item.color };
+    }) || []
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.kline-tips {
+  padding-left: 3px;
+  width: 100%;
+}
+</style>

package/packages/KlineBasic/components/Tips/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="kline-tips">
+    <div
+      v-for="(item, index) in data"
+      :key="index"
+      class="kline-tips-item"
+      :style="{ color: item.color }"
+    >{{ item.label }} {{ item.value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  defineProps({
+    // 提示数据
+    data: {
+      type: Array,
+      require: true,
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kline-tips {
+    width: 100%;
+    color: #fff;
+    font-size: 12px;
+    line-height: 1.5;
+    &-item {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+</style>

package/packages/KlineBasic/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import StKlineBasic from "./index.vue";
+
+export default {
+  install(app: App) {
+    app.component("st-klineBasic", StKlineBasic);
+  },
+}