st-comp 0.0.146 → 0.0.147

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

@@ -1,110 +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 { bottom, height, right, width } = contextmenuContentRef.value.getBoundingClientRect()
-      if (bottom > window.innerHeight) {
-        // 高度超出
-        contextmenuContentStyle.value = {
-          display: 'block',
-          top: `${el.offsetY - height}px`,
-          left: `${el.offsetX}px`,
-        }
-      } else if (right > window.innerWidth) {
-        // 宽度超出
-        contextmenuContentStyle.value = {
-          display: 'block',
-          top: `${el.offsetY}px`,
-          left: `${el.offsetX - width}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/Kline/components/Tips/index.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="st-kline-tips">
-    <div class="st-kline-tips-row">
-      <div
-        v-for="item in data"
-        class="st-kline-tips-row-item"
-        :style="{ color: item.color }"
-      >
-        {{ item.label }} {{ item.value }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-  interface dataType {
-    label: string
-    value: any
-    color: string
-  }
-  const props = defineProps({
-    // 提示数据
-    data: {
-      type: Array as () => dataType[],
-      default: () => [],
-    },
-  })
-</script>
-
-<style lang="scss" scoped>
-  .st-kline-tips {
-    font-size: 12px;
-    &-row {
-      &-item {
-        display: inline-block;
-        margin-right: 10px;
-      }
-    }
-  }
-</style>

package/packages/Kline/componentsNew/KlineSlide/index.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="klineSlide" ref="slideChartRef"></div>
-</template>
-
-<script setup>
-import { ref, watch, onMounted, onUnmounted } from 'vue'
-import * as echarts from 'echarts'
-
-let slideChart
-let resizeRo // dom元素监听事件
-let slideDataZoomTimer = null // 滑动图数据缩放定时器
-
-const emit = defineEmits(['change'])
-const props = defineProps({
-  data: { type: Array, default: () => [] }, // 时间数据
-})
-
-const slideChartRef = ref() // 拖动轴
-
-watch(
-  () => props.data,
-  () => {
-    draw()
-  },
-  { deep: true },
-)
-
-onMounted(() => {
-  slideChart = echarts.init(slideChartRef.value)
-  addEventListener()
-  draw()
-  // 绑定resize事件
-  let isFirst = true
-  resizeRo = new ResizeObserver(() => {
-    if (isFirst) {
-      isFirst = null
-      return
-    }
-    slideChart.resize()
-  })
-  resizeRo.observe(slideChartRef.value)
-})
-
-onUnmounted(() => {
-  slideChart.off("datazoom");
-  slideChart.dispose()
-  resizeRo.disconnect()
-  resizeRo = null
-})
-
-// 绑定事件
-const addEventListener = () => {
-  slideChart.on('datazoom', params => {
-    if(!params.dataZoomId) return
-    clearTimeout(slideDataZoomTimer)
-    slideDataZoomTimer = setTimeout(() => {
-      const { data } = props
-      const { start, end } = params
-      const startIndex = Math.floor(start * data.length / 100)
-      const endIndex = end === 100 ? data.length - 1 : Math.floor(end * data.length / 100)
-      change(startIndex, endIndex)
-      clearTimeout(slideDataZoomTimer)
-    }, 100)
-  })
-}
-
-// 拖动回调
-const change = (startIndex, endIndex) => {
-  const data = props.data
-  if (data.length === 0) return
-  const startTime = data[startIndex][0].split(' ')[0]
-  const endTime = data[endIndex][0].split(' ')[0]
-  emit('change', {
-    startTime: `${startTime} 00:00:00`,
-    endTime: `${endTime} 24:00:00`,
-  })
-}
-
-const draw = () => {
-  const { data } = props
-  if(data.length === 0) return
-  const xAxisData = data.map(item => item[0].split(' ')[0])
-  const lineData = data.map(item => item[1])
-  slideChart.setOption({
-    grid: {
-      height: 0,
-      left: '80px',
-      right: '80px',
-    },
-    xAxis: {
-      type: 'category',
-      data: xAxisData,
-      show: false,
-    },
-    yAxis: {
-      type: 'value'
-    },
-    series: [
-      {
-        data: lineData,
-        type: 'line'
-      }
-    ]
-  }, true)
-}
-
-defineExpose({
-  resetSlide: (startTime, endTime, maxValueSpan) => {
-    let slideStartIndex = -1
-    let slideEndIndex = -1
-    props.data.forEach((item, index) => {
-      if (slideStartIndex === -1 && item[0] === startTime) {
-        slideStartIndex = index
-      } else if (slideStartIndex === -1 && new Date(item[0]) > new Date(startTime)) {
-        slideStartIndex = index - 1
-      }
-      if (slideEndIndex === -1 && item[0] === endTime) {
-        slideEndIndex = index
-      } else if (slideEndIndex === -1 && new Date(item[0]) > new Date(endTime)) {
-        slideEndIndex = index
-      }
-    })
-    slideEndIndex = slideEndIndex === -1 ? props.data.length - 1 : slideEndIndex
-    slideChart.setOption({
-      dataZoom: [
-        {
-          show: true,
-          startValue: slideStartIndex,
-          endValue: slideEndIndex,
-          maxValueSpan,
-          textStyle: {
-            color: '#ccc',
-          }
-        },
-        {
-          type: 'inside',
-          startValue: slideStartIndex,
-          endValue: slideEndIndex,
-          maxValueSpan,
-        }
-      ],
-    })
-  }, // 重置
-  resize: () => {
-    slideChart?.resize()
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.klineSlide {
-  width: 100%;
-  height: 50px;
-}
-</style>

package/packages/Kline/componentsNew/KlineSub/index.vue

@@ -1,297 +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>
-      <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/Kline/componentsNew/KlineTips/index.vue

@@ -1,66 +0,0 @@
-<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>