st-comp 0.0.277 → 0.0.279

package/packages/KlineBasic/api.js

@@ -1,58 +0,0 @@
-import { initRequest, isLogin, getToken, loginout, getUserData } from "st-func";
-
-let get = null;
-let post = null;
-
-export const initRequestByEnv = (env) => {
-  const requestFn = initRequest(env, {
-    handleReq: (request) => {
-      if (isLogin()) {
-        request.headers["token"] = getToken();
-      }
-    },
-    handleRes: (response) => {
-      const { data } = response;
-      // 登录失效
-      if (data.code === 401) {
-        if (location.origin.includes("localhost")) {
-          location.href = `${location.origin}/#/404`;
-        } else {
-          loginout();
-        }
-        return true;
-      }
-    },
-  });
-  get = requestFn.get;
-  post = requestFn.post;
-}
-
-// 获取K线数据以及基础数据
-export const getKlineBasic = (data) => {
-  return post("/middleLayer/kline/getKlineBasic", { ...data, userId: getUserData('id')});
-}
-
-// 获取K线数据
-export const getKline = (data) => {
-  return post("/middleLayer/kline/getKline", data);
-}
-
-// 画线预警
-export const addWarningLine = async (data) => {
-  return post("/alarm/deliversign/addAlarmPrice", { ...data, userId: getUserData('id')});
-};
-
-// 获取画线预警列表
-export const getWarningLine = async (data) => {
-  return post("/alarm/deliversign/findAlarmPriceByUserId", { ...data, userId: getUserData('id')});
-};
-
-// 更新画线预警
-export const updateWarningLine = async (data) => {
-  return post("/alarm/deliversign/updateAlarmPrice", { ...data, userId: getUserData('id')});
-};
-
-// 删除画线预警
-export const deleteWarningLine = async (data) => {
-  return post("/alarm/deliversign/deleteAlarmPrice", { ...data, userId: getUserData('id')});
-};

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

@@ -1,33 +0,0 @@
-<template>
-  <div class="kline-averageTips">
-    <div
-      v-for="(item, index) in data"
-      :key="index"
-      class="kline-averageTips-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-averageTips {
-    width: 100%;
-    color: #fff;
-    font-size: 12px;
-    line-height: 1.5;
-    &-item {
-      display: inline-block;
-      margin-right: 10px;
-    }
-  }
-</style>

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

@@ -1,105 +0,0 @@
-<!-- 右键菜单组件 -->
-<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

@@ -1,332 +0,0 @@
-<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>
-      <AverageTips :data="subIndicatorTips" />
-    </div>
-    <div
-      class="klineSub-chart"
-      ref="subChartRef"
-    ></div>
-  </div>
-</template>
-
-<script setup>
-import dayjs from "dayjs";
-import { ref, onMounted, onUnmounted, nextTick, computed } from "vue";
-import * as echarts from "echarts";
-import AverageTips from "../AverageTips/index.vue";
-import { formatIndicatorNumber } from "../../utils" 
-import { stMath } from "st-func";
-const { round } = stMath;
-
-let subChart = null;
-let resizeRo = null;
-const isAlive = ref(true); // 组件活跃状态
-
-const emit = defineEmits(["update:modelValue"]);
-const props = defineProps({
-  cycle: {
-    type: [String, Number],
-    default: () => null,
-  },
-  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(() => {
-  if (!isAlive.value) return [];
-  const { data, activeIndex } = props;
-  return data?.subIndicator?.map((item) => ({ label: item.key, color: item.color, value: formatIndicatorNumber(item.data[activeIndex]) })) || [];
-});
-
-onMounted(() => {
-  isAlive.value = true;
-  if (!subChartRef.value) return;
-  
-  subChart = echarts.init(subChartRef.value);
-  
-  let isFirst = true;
-  resizeRo = new ResizeObserver(() => {
-    if (isFirst) {
-      isFirst = false;
-      return;
-    }
-    if (isAlive.value && subChart && !subChart.isDisposed()) {
-      subChart.resize();
-    }
-  });
-  resizeRo.observe(subChartRef.value);
-});
-
-onUnmounted(() => {
-  isAlive.value = false;
-  
-  if (subChart && !subChart.isDisposed()) {
-    subChart.dispose();
-    subChart = null;
-  }
-  if (resizeRo) {
-    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) => {
-    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
-    echarts.connect([chart, subChart]);
-  },
-  draw: (drawConfig, config) => {
-    if (!isAlive.value || !subChart || subChart.isDisposed()) return;
-    
-    nextTick(() => {
-      if (!isAlive.value || !subChart || subChart.isDisposed()) return;
-      
-      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") {
-                    if (["6", "7", "8"].includes(props.cycle)) {
-                      return dayjs(value).format("YYYY-MM-DD");
-                    } else {
-                      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: {
-              formatter: (value) => {
-                if (["6", "7", "8"].includes(props.cycle)) {
-                  return dayjs(value).format("YYYY-MM-DD");
-                } else {
-                  return value;
-                }
-              },
-            },
-          },
-          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

@@ -1,99 +0,0 @@
-<template>
-  <div class="kline-tips">
-    <Tips :data="mainTips" />
-    <Tips :data="mainIndicatorTips" />
-  </div>
-</template>
-
-<script setup>
-import { computed, watch, ref } from "vue";
-import Tips from "../Tips/index.vue";
-import { stMath } from "st-func";
-import { formatIndicatorNumber } from "../../utils";
-const { round, formatValue } = stMath;
-
-const props = defineProps({
-  // 提示数据
-  data: {
-    type: Object,
-    require: true,
-  },
-  activeIndex: {
-    type: [Number, String],
-    require: true,
-  },
-  variety: {
-    type: [String, Number],
-    default: () => null,
-  },
-});
-
-const close = ref(null);
-
-watch(() => props.activeIndex, () => { 
-  if (close.value === null) {
-    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
-  }
-});
-
-watch(() => props.data, () => { 
-  if (close.value === null) {
-    close.value = props.data.data[props.activeIndex]?.[1] ?? 0
-  }
-});
-
-
-
-watch(() => props.variety, () => {
-  close.value = null
-});
-
-const mainTips = computed(() => {
-  const { data, activeIndex } = props;
-  if (data.data && data.data[activeIndex]) {
-    const itemData = data.data[activeIndex];
-    const result = [
-      { label: "开", value: itemData[0] },
-      { label: "高", value: itemData[3] },
-      { label: "低", value: itemData[2] },
-      { label: "收", value: 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 });
-    const mowPercent = ((close.value / itemData[1]) - 1) * 100
-    let nowPercentColor;
-    if (mowPercent > 0) {
-      nowPercentColor = "red";
-    } else if (mowPercent < 0) {
-      nowPercentColor = "green";
-    }
-    result.push({ label: "至今涨幅", value: `${round(mowPercent)}%`, color: nowPercentColor });
-    return result;
-  }
-  return [];
-});
-
-const mainIndicatorTips = computed(() => {
-  const { data, activeIndex } = props;
-  return (
-    data?.mainIndicator?.map((item) => {
-      return { label: item.key, value: formatIndicatorNumber(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

@@ -1,56 +0,0 @@
-<template>
-  <div class="kline-tips" ref="tipsRef">
-    <div
-      v-for="(item, index) in data"
-      :key="index"
-      class="kline-tips-item"
-      :style="{ color: item.color, width: widthList[index] ? widthList[index] : null }"
-    >{{ item.label }} {{ item.value }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { ref, watch, nextTick } from "vue";
-  const props = defineProps({
-    // 提示数据
-    data: {
-      type: Array,
-      require: true,
-    },
-  })
-
-  const tipsRef = ref<any>(null)
-  const widthList = ref<Array<string>>([])
-
-  watch(() => props.data, () => { 
-    if (widthList.value.length === 0) {
-      nextTick(() => {
-        Array.from(tipsRef.value.children).forEach((item: any, index) => {
-          if (props.data?.[index]?.label === '涨跌') {
-            widthList.value[index] = '85px'
-          } else if(props.data?.[index]?.label === '至今涨幅') {
-            widthList.value[index] = '115px'
-          } else if(props.data?.[index]?.label === '额') {
-            widthList.value[index] = '85px'
-          } else if(['开', '高', '低', '收'].includes(props.data?.[index]?.label)) {
-            widthList.value[index] = `${item.offsetWidth + 24}px`
-          } else {
-            widthList.value[index] = `${item.offsetWidth + 36}px`
-          }
-        })
-      })
-    }
-  })
-</script>
-
-<style lang="scss" scoped>
-  .kline-tips {
-    width: 100%;
-    color: #fff;
-    font-size: 12px;
-    line-height: 1.5;
-    &-item {
-      display: inline-block;
-    }
-  }
-</style>

package/packages/KlineBasic/index.ts

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