Vue.js 代码问题:数据更新后问题仍然存在
<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { apiGetDogQd } from '@/api/dog_qd'
const url = 'server_api/getTravelData'
const urlOdds = 'server_api/getOdds/travel'
const dog_qd = ref([])
const odds = ref(0)
const status = ref(false) // 用于阻止获取数据前渲染页面导致 undefine ['机场', '巴黎', '马尔代夫', '爱琴海', '冰岛', '威尼斯', '埃及']
const data = ref([])
const total = ref({'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0})
const totalNumber = ref([0,0,0,0,0,0,0])
const totalAll = ref(0)
const getData = () => {
apiGetDogQd(url)
.then(
(response) => {
//dog_total.value = response.data.total;
dog_qd.value = response.data;
console.log('获取数据成功');
setTimeout(() => {
getData();
}, (10000)) // 10秒作为刷新间隔
})
.catch(
(error) => {
console.log(error);
});
}
const getOdds = () => {
apiGetDogQd(urlOdds)
.then(
(response) => {
odds.value = response.data;
console.log(odds.value);
status.value = true; // 获取到数据后才渲染
setTimeout(() => {
getOdds();
}, (43200000)) // 43,200秒即12小时作为刷新间隔
})
.catch(
(error) => {
console.log(error);
});
}
watch(dog_qd, async (newDog_qd, oldDog_qd) => {
data.value = [];
var dataLength = dog_qd.value.length <= 100 ? dog_qd.value.length : 100 + dog_qd.value.length % 20;
var indexData = dog_qd.value.length - dataLength
let dataTemp = dog_qd.value.slice(indexData)
total.value = {'机场':0,'巴黎':0,'马尔代夫':0,'爱琴海':0,'冰岛':0,'威尼斯':0,'埃及':0}
totalNumber.value = [0,0,0,0,0,0,0]
totalAll.value = 0;
for (var indexTmp = 0; indexTmp<dog_qd.value.length; indexTmp++){
if (indexTmp >= indexData){
if (indexTmp - indexData<20){
// data.value[(indexTmp - indexData)%20] = [dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name];
data.value[(indexTmp - indexData)%20] = [(indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name];
}else{
// data.value[(indexTmp - indexData)%20].push(dataTemp[(indexTmp - indexData)].time.substring(11,16)+' '+dataTemp[(indexTmp - indexData)].name);
data.value[(indexTmp - indexData)%20].push((indexTmp+1)+' '+dataTemp[(indexTmp - indexData)].name);
}
}
totalAll.value += 1;
switch(dog_qd.value[indexTmp].name){
case '机场':
total.value.机场 += 1;break;
case '巴黎':
total.value.巴黎 += 1;break;
case '马尔代夫':
total.value.马尔代夫 += 1;break;
case '爱琴海':
total.value.爱琴海 += 1;break;
case '冰岛':
total.value.冰岛 += 1;break;
case '威尼斯':
total.value.威尼斯 += 1;break;
case '埃及':
total.value.埃及 += 1;break;
}
}
totalNumber.value[0] = (total.value.机场/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[1] = (total.value.巴黎/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[2] = (total.value.马尔代夫/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[3] = (total.value.爱琴海/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[4] = (total.value.冰岛/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[5] = (total.value.威尼斯/totalAll.value*100).toFixed(1)+'%'
totalNumber.value[6] = (total.value.埃及/totalAll.value*100).toFixed(1)+'%'
})
getData();
getOdds();
</script>
<p>内容:</p>
<p>请提供更多上下文或错误信息,以便更好地了解问题所在。</p>
原文地址: https://www.cveoy.top/t/topic/lEB1 著作权归作者所有。请勿转载和采集!