今日工事

股票篩選器API組合完成
資料格式整理完成
簡易選項刻版

程式碼

//stockFilter.vue

<template>
  <NuxtLayout name="header">
    <template #main>
      <div>
        <div class="my-1 w-[50%]">
          <label for="marketCap" class="font-bold">市值超過:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="marketCap"
            v-model="marketCap"
          >
            <option value="10000000000">10000000000</option>
          </select>
        </div>
        <div class="my-1 w-[50%]">
          <label for="volume" class="font-bold">單日交易量超過:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="volume"
            v-model="volume"
          >
            <option value="50000">50000</option>
          </select>
        </div>
        <div class="my-1 w-[50%]">
          <label for="sector" class="font-bold">產業版塊:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="sector"
            v-model="sector"
          >
            <option value="Technology">Technology</option>
          </select>
        </div>
        <div class="my-1 w-[50%]">
          <label for="industry" class="font-bold">產業:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="industry"
            v-model="industry"
          >
            <option value="Software—Infrastructure">Software—Infrastructure</option>
          </select>
        </div>
        <div class="my-1 w-[50%]">
          <label for="beta" class="font-bold">Beta值低於:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="beta"
            v-model="beta"
          >
            <option value="1.5">1.5</option>
          </select>
        </div>
        <div class="my-1 w-[50%]">
          <label for="divid" class="font-bold">股息:</label>
          <select
            class="border border-solid border-[#bebebe] rounded shadow ms-2 w-[70%]"
            id="divid"
            v-model="divid"
          >
            <option value="0">0</option>
          </select>
        </div>
      </div>

      <!-- <button @click="test">test</button> -->
    </template>
  </NuxtLayout>
</template>
<script setup>

const axios = inject('axios')
definePageMeta({
  layout: false,
})

// key
const fmp = import.meta.env.VITE_KEY_FMP

// api

const marketCap=ref('10000000000')
const volume =ref('50000')
const sector = ref('Technology')
const industry = ref('Software—Infrastructure')
const divid = ref('0')
const beta = ref('1.5')

const stockApi = computed(()=>{`https://financialmodelingprep.com/api/v3/stock-screener?marketCapMoreThan=${marketCap.value}&volumeMoreThan=${volume.value}&sector=${sector.value}&industry=${industry.value}&dividendMoreThan=${divid.value}&betaLowerThan=${beta.value}&limit=500&apikey=${fmp}`})

const stockData = ref([])

const getData = () => {
  axios
    .get(stockApi.value)
    .then((res) => {
      console.log(res.data)
      stockData.value = res.data
    })
    .catch((rej) => {
      console.log(rej)
    })
}

onMounted(() => {
  getData()
})

const stockName = computed(() => {
  const data =
    stockData.value.length !== 0
      ? stockData.value.map((v) => v.symbol).join(',')
      : undefined
  return data
})

const stockByChangeApi = computed(() => {
  return `https://financialmodelingprep.com/api/v3/quote/${stockName.value}?apikey=${fmp}`
})

const stockByChange = ref([])

const stockResult = computed(() => {
  const data = stockByChange.value.length
    ? stockData.value.map((v) => {
        let matchSymbol = stockByChange.value.find(
          (change) => v.symbol === change.symbol
        )
        if (matchSymbol) {
          v.changesPercentage = matchSymbol.changesPercentage
        }
        return v
      })
    : undefined
  return data
})

watchEffect(() => {
  if (stockName.value) {
    axios
      .get(stockByChangeApi.value)
      .then((res) => {
        console.log(res)
        stockByChange.value = res.data
      })
      .catch((rej) => {
        console.log(rej)
      })
  }
})
</script>

先將篩選器篩選後的table表頭確定好
基本上會有:
股票代號,公司名稱,產業版塊,產業,市值,現價,當日現價變化,交易量
回傳的資料最少要有這些
所以用兩隻API回傳的資料組成stockResult

再來最主要的API-stockApi
裡面的變數跟連接的select先處理好
確保資料回傳無誤
今天的進度大致就先這樣

小結

明天預計完成篩選完的table

選項可能會在新增

並且分類會更細