1

李凌

2025-10-18 fab9d57071a7cc1dc1dcce0c9ee4640d20727251

 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>
@@ -49,6 +49,7 @@
<script>
import { init, dispose } from 'klinecharts'
let chart = null
let timer = null
import { _getKline } from "@/service/trade.api";
import config from './config'
import { Loading } from 'vant';
@@ -69,7 +70,6 @@
      chartLoading: true, //加载动画
      paneId: '',
      chartData: [], // 图表数据
      timer: null
    }
  },
  computed: {
@@ -135,7 +135,6 @@
      this.fetchData()
    },
    updateKey() { // 更新charts

      const dataList = chart.getDataList()
      if (dataList.length > 0) {
        const lastData = dataList[dataList.length - 1]
@@ -191,25 +190,27 @@
        chart.applyNewData(data);
        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.clearTimer()
      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'
@@ -234,8 +235,8 @@
      chart.createTechnicalIndicator(type, false, { id: this.paneId })
    },
    clearTimer() {
      clearInterval(this.timer)
      this.timer = null
      clearInterval(timer)
      timer = null
    },
  },
  deactivated() {
@@ -248,5 +249,4 @@
// #kline {
//   // min-height: 828px;
//   height: 1200px;
// }
</style>
// }</style>