1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 src/components/Transform/kline-charts/index.vue

@@ -1,5 +1,5 @@
<template>
  <div id="cryptos">
  <div >
    <div class="kline-charts">
      <ul class="flex px-32 pb-20 box-border justify-between text-grey fontStyle font-26"
        style="border-bottom:1px solid rgba(68,75,88,0.2);">
@@ -9,21 +9,63 @@
        </template>
        <template v-else>
          <template v-if="isNight">
            <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-white': item.id === timeValue.id }"
              @click="choiceTime(item)">{{ item.text }}</li>
            <li v-for="item in timeList" :key="item.id" class="mr-10"
              :class="{ 'text-white': item.id === timeValue.id }" @click="choiceTime(item)">{{ item.text }}</li>
          </template>
          <template v-if="!isNight">
            <li v-for="item in timeList" :key="item.id" class="mr-10" :class="{ 'text-black': item.id === timeValue.id }"
              @click="choiceTime(item)">{{ item.text }}</li>
            <li v-for="item in timeList" :key="item.id" class="mr-10"
              :class="{ 'text-black': item.id === timeValue.id }" @click="choiceTime(item)">{{ item.text }}</li>
          </template>
        </template>
      </ul>
      <div class="relative">
        <div id="kline" class="h-828"></div>
        <div
          class="flex justify-center items-center text-center text-grey absolute left-0 top-0  w-full h-full z-10 mainBackground"
          v-if="chartLoading">
          <van-loading type="spinner"></van-loading>
      <div class="chart-with-tools flex">
        <div class="relative flex-1 min-w-0">
          <div id="kline" class="h-828"></div>
          <div
            class="flex justify-center items-center text-center text-grey absolute left-0 top-0  w-full h-full z-10 mainBackground"
            v-if="chartLoading">
            <van-loading type="spinner"></van-loading>
          </div>
        </div>
        <!-- 铅笔图标：控制绘图工具栏显示/隐藏 -->
        <div class="draw-tools-wrap flex">
          <div class="pencil-trigger draw-tool-item" :class="[isNight ? 'draw-toolbar-night' : 'draw-toolbar-light', { active: showDrawToolbar }]"
            :title="showDrawToolbar ? $t('隐藏绘图工具') : $t('显示绘图工具')" @click="showDrawToolbar = !showDrawToolbar">
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
          </div>
          <!-- 绘图工具栏 -->
          <div v-show="showDrawToolbar" class="draw-toolbar" :class="isNight ? 'draw-toolbar-night' : 'draw-toolbar-light'">
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'fibonacciLine' }" title="斐波那契" @click="onDrawToolClick('fibonacciLine')">
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M4 20L20 4l-2-2L2 18v4h2z"/><circle cx="6" cy="18" r="1.5"/><circle cx="18" cy="6" r="1.5"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'segment' }" title="线段" @click="onDrawToolClick('segment')">
            <svg viewBox="0 0 24 24" width="20" height="20"><line x1="4" y1="20" x2="20" y2="4" stroke="currentColor" stroke-width="2"/><circle cx="4" cy="20" r="2"/><circle cx="20" cy="4" r="2"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'horizontalStraightLine' }" title="水平线" @click="onDrawToolClick('horizontalStraightLine')">
            <svg viewBox="0 0 24 24" width="20" height="20"><line x1="2" y1="12" x2="22" y2="12" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'horizontalSegment' }" title="水平线段" @click="onDrawToolClick('horizontalSegment')">
            <svg viewBox="0 0 24 24" width="20" height="20"><line x1="6" y1="12" x2="18" y2="12" stroke="currentColor" stroke-width="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'verticalStraightLine' }" title="垂直线" @click="onDrawToolClick('verticalStraightLine')">
            <svg viewBox="0 0 24 24" width="20" height="20"><line x1="12" y1="2" x2="12" y2="22" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="2"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'verticalSegment' }" title="垂直线段" @click="onDrawToolClick('verticalSegment')">
            <svg viewBox="0 0 24 24" width="20" height="20"><line x1="12" y1="6" x2="12" y2="18" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="6" r="2"/><circle cx="12" cy="18" r="2"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'rect' }" title="矩形" @click="onDrawToolClick('rect')">
            <svg viewBox="0 0 24 24" width="20" height="20"><rect x="5" y="7" width="14" height="10" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="5" cy="7" r="1.5"/><circle cx="19" cy="17" r="1.5"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'triangle' }" title="三角形" @click="onDrawToolClick('triangle')">
            <svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 5L4 19h16L12 5z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="5" r="1.5"/><circle cx="4" cy="19" r="1.5"/><circle cx="20" cy="19" r="1.5"/></svg>
          </div>
          <div class="draw-tool-item" :class="{ active: activeDrawTool === 'parallelogram' }" title="平行四边形" @click="onDrawToolClick('parallelogram')">
            <svg viewBox="0 0 24 24" width="20" height="20"><path d="M6 6h12l-4 12H2L6 6z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="6" cy="6" r="1.5"/><circle cx="18" cy="6" r="1.5"/><circle cx="14" cy="18" r="1.5"/></svg>
          </div>
          <div class="draw-tool-item" title="清除全部" @click="onDrawToolClick('remove')">
            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
          </div>
          </div>
        </div>
      </div>
      <ul class="flex  px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
@@ -51,7 +93,9 @@
let chart = null
import { _getKline } from "@/service/trade.api";
import config from './config'
import { clearAllTimers } from '@/utils/utis.js'
import { Loading } from 'vant';
import { customShapeTemplates } from './drawTools'
export default {
  name: 'KlineCharts',
  data() {
@@ -69,19 +113,21 @@
      chartLoading: true, //加载动画
      paneId: '',
      chartData: [], // 图表数据
      timer: null
      timer: null,
      activeDrawTool: '', // 当前选中的绘图工具
      showDrawToolbar: true // 绘图工具栏是否显示，由铅笔图标切换
    }
  },
  computed: {
    timeList() {
      return [
        { id: '1min', time: '1min', text: this.$t('分时'), ts: 1 * 60 * 1000 },
        { id: '1mins', time: '1min', text: '1' + this.$t('分'), ts: 1 * 60 * 1000 },
        // { id: '1mins', time: '1min', text: '1' + this.$t('分'), ts: 1 * 60 * 1000 },
        { id: '5min', time: '5min', text: '5' + this.$t('分'), ts: 5 * 60 * 1000 },
        { id: '15min', time: '15min', text: '15' + this.$t('分'), ts: 15 * 60 * 1000 },
        { id: '30min', time: '30min', text: '30' + this.$t('分'), ts: 30 * 60 * 1000 },
        { id: '60min', time: '60min', text: '1' + this.$t('小时'), ts: 60 * 60 * 1000 },
        { id: '4hour', time: '4hour', text: '4' + this.$t('小时'), ts: 4 * 60 * 60 * 1000 },
        // { id: '4hour', time: '4hour', text: '4' + this.$t('小时'), ts: 4 * 60 * 60 * 1000 },
        { id: '1day', time: '1day', text: '1' + this.$t('天'), ts: 24 * 60 * 60 * 1000 },
        { id: '1week', time: '1week', text: '1' + this.$t('周'), ts: 7 * 24 * 60 * 60 * 1000 },
        { id: '1mon', time: '1mon', text: '1' + this.$t('月'), ts: 30 * 24 * 60 * 60 * 1000 }
@@ -127,6 +173,7 @@
    this.initData()
  },
  beforeUnmount() {
    this.clearTimer()
    dispose('kline')
  },
  watch: {
@@ -134,26 +181,14 @@
      this.clearTimer()
      this.fetchData()
    },
    updateKey() { // 更新charts

    updateKey() { // 更新charts：只更新 this.updateData 的 close，其余沿用最后一根
      const dataList = chart.getDataList()
      if (dataList.length > 0) {
        const lastData = dataList[dataList.length - 1]
        const nowData = this.updateData
        const timeValue = this.timeValue
        const newData = {
          close: nowData.close / 1,
          current_time: lastData.current_time,
          high: lastData.high > nowData.close / 1 ? lastData.high : (nowData.close / 1),
          // high: lastData.high,
          line: timeValue.id,
          low: lastData.low < nowData.close / 1 ? lastData.low : (nowData.close / 1),
          // low: lastData.low,
          open: lastData.open,
          symbol: lastData.symbol,
          ts: lastData.ts, //
          timestamp: (nowData.ts - lastData.ts) < timeValue.ts ? lastData.ts : (lastData.ts + timeValue.ts),
          volume: lastData.volume / 1
          ...lastData,
          close: nowData.close != null && nowData.close !== '' ? (nowData.close / 1) : lastData.close
        }
        this.$nextTick(() => {
          this.setChartType()
@@ -164,17 +199,19 @@
  },
  methods: {
    initData() {
      this.timeValue = this.timeList[0]
      this.timeValue = this.timeList.find(t => t.id === '15min') || this.timeList[0]
      chart = init('kline', config);
      chart.setOffsetRightSpace(25)
      chart.setDataSpace(10)
      chart.setPriceVolumePrecision(4, 2)
      chart.createTechnicalIndicator('MA', false, { id: 'candle_pane' });
      this.paneId = chart.createTechnicalIndicator('VOL');
      // 注册自定义绘图图形：矩形、三角形、平行四边形
      chart.addShapeTemplate(customShapeTemplates)
      this.fetchData()
    },
    fetchData(time) { // 获取数据
      this.chartLoading = true
      // this.chartLoading = true
      _getKline(this.symbol, this.timeValue.time || '1min').then(data => {
        this.chartLoading = false
        data.map(item => {
@@ -189,27 +226,27 @@
        chart.setPriceVolumePrecision(length, 2)
        this.setChartType()
        chart.applyNewData(data);
        this.$emit('updataLine', false)
        this.$emit('updataLine', false) // 关闭计时器
      })
      // TODO:轮询，删掉上面那段，添加到定时器中
      // this.timer = setInterval(() => {
      //   _getKline(this.symbol, this.timeValue.time || time).then(data => {
      //     this.chartLoading = false
      //     data.map(item => {
      //       item.timestamp = item.ts
      //     })
      //     let str = data[0] ? data[0].close.toString() : ''
      //     let length = 2
      //     if (str.indexOf('.') != -1) {
      //       length = str.split('.')[1].length
      //     }
      //     //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
      //     chart.setPriceVolumePrecision(length, 2)
      //     this.setChartType()
      //     chart.applyNewData(data);
      //     this.$emit('updataLine', false)
      //   })
      // }, 1000);
      this.timer = setInterval(() => {
        _getKline(this.symbol, this.timeValue.time || time).then(data => {
          this.chartLoading = false
          data.map(item => {
            item.timestamp = item.ts
          })
          let str = data[0] ? data[0].close.toString() : ''
          let length = 2
          if (str.indexOf('.') != -1) {
            length = str.split('.')[1].length
          }
          //let length = data[0] ? data[0].close.toString().split('.')[1].length : 4
          chart.setPriceVolumePrecision(length, 2)
          this.setChartType()
          chart.applyNewData(data);
          this.$emit('updataLine', false)
        })
      }, 10000);
    },
    setChartType() {
      let type = 'area'
@@ -236,6 +273,17 @@
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
      clearAllTimers()
    },
    onDrawToolClick(name) {
      if (!chart) return
      if (name === 'remove') {
        chart.removeShape()
        this.activeDrawTool = ''
        return
      }
      this.activeDrawTool = name
      chart.createShape(name, 'candle_pane')
    },
  },
  deactivated() {
@@ -245,8 +293,99 @@
</script>
<style lang="scss" scoped>
@import "@/assets/init.scss";
// #kline {
//   // min-height: 828px;
//   height: 1200px;
// }

.chart-with-tools {
  position: relative;
}

.draw-tools-wrap {
  flex-shrink: 0;
  display: flex;
  border-left: 1px solid rgba(68, 75, 88, 0.2);
}

.draw-tools-wrap .pencil-trigger {
  width: 44px;
  min-width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0;
}
.pencil-trigger.draw-toolbar-light {
  background: rgba(255, 255, 255, 0.98);
  color: #333;
}
.pencil-trigger.draw-toolbar-light:hover,
.pencil-trigger.draw-toolbar-light.active {
  background: rgba(0, 0, 0, 0.06);
  color: #2196f3;
}
.pencil-trigger.draw-toolbar-night {
  background: rgba(17, 26, 46, 0.98);
  color: #d9d9d9;
}
.pencil-trigger.draw-toolbar-night:hover,
.pencil-trigger.draw-toolbar-night.active {
  background: rgba(255, 255, 255, 0.08);
  color: #42a5f5;
}

.draw-toolbar {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
}

.draw-toolbar-light {
  background: rgba(255, 255, 255, 0.98);
  color: #333;
}

.draw-toolbar-night {
  background: rgba(17, 26, 46, 0.98);
  color: #d9d9d9;
  border-left-color: rgba(68, 75, 88, 0.4);
}

.draw-tool-item {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.draw-toolbar-light .draw-tool-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.draw-toolbar-light .draw-tool-item.active {
  background: rgba(33, 150, 243, 0.15);
  color: #2196f3;
}

.draw-toolbar-night .draw-tool-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.draw-toolbar-night .draw-tool-item.active {
  background: rgba(33, 150, 243, 0.25);
  color: #42a5f5;
}

.draw-tool-item svg {
  display: block;
}
</style>