1

李凌

2025-09-20 6b754cd28c45741a24e7f7193b894e3e386e4af8

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

@@ -9,12 +9,12 @@
        </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>
@@ -51,6 +51,7 @@
let chart = null
import { _getKline } from "@/service/trade.api";
import config from './config'
import { clearAllTimers } from '@/utils/utis.js'
import { Loading } from 'vant';
export default {
  name: 'KlineCharts',
@@ -127,6 +128,7 @@
    this.initData()
  },
  beforeUnmount() {
    this.clearTimer()
    dispose('kline')
  },
  watch: {
@@ -135,7 +137,6 @@
      this.fetchData()
    },
    updateKey() { // 更新charts

      const dataList = chart.getDataList()
      if (dataList.length > 0) {
        const lastData = dataList[dataList.length - 1]
@@ -174,7 +175,7 @@
      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 +190,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)
        })
      }, 30000);
    },
    setChartType() {
      let type = 'area'
@@ -236,6 +237,7 @@
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
      clearAllTimers()
    },
  },
  deactivated() {
@@ -248,5 +250,4 @@
// #kline {
//   // min-height: 828px;
//   height: 1200px;
// }
</style>
// }</style>