1

admin

2026-01-06 03043192ddf00f9a36b7454799a9152cd1b50a0b

 src/views/usStock/List.vue

@@ -49,8 +49,8 @@
                'text-up': item.changeRatio > 0,
                'text-down': item.changeRatio <= 0,
              }">{{ item.changeRatio ? `${item.changeRatio}%` : item.changeRatio === 0 ? 0
  :
  '--' }}</p>
                :
                '--' }}</p>
            </div>
          </div>
          <div class="divider mt-10"></div>
@@ -115,7 +115,7 @@
          </div>
          <div class="divider"></div>
          <div class="all-etf-ranking">
            <p class="title">{{ t('WellUSstocks') }}</p>
            <p class="title">{{ t('涨幅榜') }}</p>
            <div class="etf-table">
              <ul>
                <li class="title-line">
@@ -131,7 +131,7 @@
                    </div>
                  </div>
                </li>
                <li v-for="(item, index) in prominentListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
                <li v-for="(item) in prominentListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
                  <div class="flex-l">
                    <p>{{ item.name }}</p>
                    <p class="gray-text">
@@ -151,7 +151,7 @@
                </li>
              </ul>
            </div>
            <div class="more-box" @click="moreOpen(0, t('WellUSstocks'), 'prominent')">
            <div class="more-box" @click="moreOpen(0, t('涨幅榜'), 'prominent')">
              <div class="icon-group">
                <p class="">{{ t('更多') }}</p>
                <img src="@/assets/image/quotes/right-arrow-grey.png" alt="" class="icon arrow">
@@ -186,7 +186,8 @@
                    </div>
                  </li>

                  <li v-for="(item, index) in technologyListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
                  <li v-for="(item, index) in technologyListData.slice(0, 5)" :key="item.symbol"
                    @click="itemClick(item)">
                    <div class="flex-l">
                      <p>{{ item.name }}</p>
                      <p class="gray-text">
@@ -234,7 +235,8 @@
                      </div>
                    </div>
                  </li>
                  <li v-for="(item, index) in dinancialListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
                  <li v-for="(item, index) in dinancialListData.slice(0, 5)" :key="item.symbol"
                    @click="itemClick(item)">
                    <div class="flex-l">
                      <p>{{ item.name }}</p>
                      <p class="gray-text">
@@ -282,7 +284,8 @@
                      </div>
                    </div>
                  </li>
                  <li v-for="(item, index) in healthcareListData.slice(0, 5)" :key="item.symbol" @click="itemClick(item)">
                  <li v-for="(item, index) in healthcareListData.slice(0, 5)" :key="item.symbol"
                    @click="itemClick(item)">
                    <div class="flex-l">
                      <p>{{ item.name }}</p>
                      <p class="gray-text">
@@ -508,6 +511,7 @@
const isZh = language == "zh-CN" || language == "CN"
const isLoading = ref(false)
const initObjData = ref({})
const sockets = ref(null)
const props = defineProps({
  index: {
    type: Number,
@@ -521,23 +525,26 @@

onMounted(async () => {
  getNewsList()
  getRealtimeByType()
  publicRealtimeTop()
  letMeGo()
  await getRealtimeByType()
  await publicRealtimeTop()
  await startStocksSocket()
  // letMeGo() // 取消美股的轮询请求,通过ws来获取最新的数据
  nextTick(() => {
    renderFundChart(linesData)
  })
})

const emit = defineEmits(['changeLetMego'])
const letMeGo = () => {
  emit('changeLetMego', () => {
    getRealtimeByType()
    publicRealtimeTop()
  })
}
// 轮询相关
// const emit = defineEmits(['changeLetMego'])
// const letMeGo = () => {
//   emit('changeLetMego', () => {
//     getRealtimeByType()
//     publicRealtimeTop()
//   })
// }
onBeforeUnmount(() => {
  fundChart && fundChart.dispose()
  sockets.value && sockets.value.close()
})

const renderFundChart = (_rawData) => {
@@ -639,6 +646,7 @@
    type: 'US-stocks',
  }).then(data => {
    indexCardInfo.value = data.slice(0, 3) || []
    initObjData.value = data[0]
  }).catch((e) => {

  })
@@ -659,8 +667,75 @@
    energyListData.value = data.filter(item => item.category.indexOf('energy') > -1) || []
    manufacturingListData.value = data.filter(item => item.category.indexOf('manufacturing') > -1) || []
    chineseListData.value = data.filter(item => item.category.indexOf('chinese') > -1) || []
    initObjData.value = data[0]
    // initObjData.value = data[0]
  })
}

// 去除字符串中的 % 符号
const removePercentSign = (str) => {
  if (typeof str === 'string' && str.includes('%')) {
    return str.replace(/%/g, '')
  }
  return str
}

const startStocksSocket = () => {
  sockets.value = new WebSocket(`wss://ws.sceazy.com/websocket-server`)
  sockets.value.onmessage = (evt) => {
    const { data } = evt
    const _data = JSON.parse(data)
    
    // 处理 pcp 值，去除 % 符号
    const pcpValue = removePercentSign(_data.pcp)
    
    let upData = prominentListData.value.find(item => item.pid == _data.pid); 
    if (upData) {
      upData.changeRatio = pcpValue;
      upData.close = _data.last;
    }

    let upData1 = technologyListData.value.find(item => item.pid == _data.pid); 
    if (upData1) {
      upData1.changeRatio = pcpValue;
      upData1.close = _data.last;
    }

    let upData2 = dinancialListData.value.find(item => item.pid == _data.pid); 
    if (upData2) {
      upData2.changeRatio = pcpValue;
      upData2.close = _data.last;
    }

    let upData3 = healthcareListData.value.find(item => item.pid == _data.pid); 
    if (upData3) {
      upData3.changeRatio = pcpValue;
      upData3.close = _data.last;
    }

    let upData4 = energyListData.value.find(item => item.pid == _data.pid); 
    if (upData4) {
      upData4.changeRatio = pcpValue;
      upData4.close = _data.last;
    }

    let upData5 = manufacturingListData.value.find(item => item.pid == _data.pid); 
    if (upData5) {
      upData5.changeRatio = pcpValue;
      upData5.close = _data.last;
    }

    let upData6 = chineseListData.value.find(item => item.pid == _data.pid); 
    if (upData6) {
      upData6.changeRatio = pcpValue;
      upData6.close = _data.last;
    }

    let upData7 = indexCardInfo.value.find(item => item.pid == _data.pid); 
    if (upData7) {
      upData7.changeRatio = pcpValue;
      upData7.close = _data.last;
    }
  }
}

const onRoute = (path) => {
@@ -682,6 +757,7 @@
  }
})
</script>

<style lang="scss" scoped>
.loading-box-us {
  position: absolute;
@@ -1086,7 +1162,7 @@
              flex: 1;
              align-self: center;
              text-align: center;
			

              &:last-child {
                text-align: right;
              }