我将laravel用于后端和vue组件来构建前端。我的目标是从汇总表中获取所有类型为“ tips”的数据,并将我当前的入职月份与前一个入职月份进行比较,并计算出一个百分比以显示盈亏。除了实际按当前月份和上个月的数据进行隔离之外,我已经拥有所有功能。
这是到目前为止我的总计小部件的代码。我停留的部分是比较我只是用控制台记录res数据的月份。(当前数据是用于测试我的百分比的虚拟数据)
name: "TotalsWidget",
props: ['type'],
data() {
return {
desc: 'Tips',
percentage: 0,
thisMonth: 100,
lastMonth: 500,
total: 5477,
state: null,
}
},
methods: {
getData(type){
axios.get('/api/totals/'+ type).then((res) => {
/* Adding totals together */
let total = [];
Object.entries(res.data).forEach(([key, val]) => {
total.push(val.value)
});
this.total = total.reduce((total, num) => {return total + num}, 0);
/* Compare Months */
let months = [];
console.log(res.data)
});
}
},
computed:{
getPercentage(thisMonth, lastMonth){
this.percentage = Math.floor((this.thisMonth - this.lastMonth) / this.lastMonth * 100);
if(Math.sign(this.percentage) == 1){
return this.state = 'mdi mdi-arrow-up-drop-circle text-success mr-1'
} else {
return this.state = 'mdi mdi-arrow-down-drop-circle mr-1 text-danger'
}
},
},
mounted(){
this.getData(this.type);
console.log('Tips Widget Loaded');
}
这是我的res.data中的内容:
[{…}, {…}]
0: {id: 1, type: "tips", desc: "Tips", value: 740, created_at: "2019-05-22 03:46:25", …}
1: {id: 2, type: "tips", desc: "Tips", value: 1105, created_at: "2019-04-22 03:46:25", …}
每个星期一都会有条目,这只是一些虚拟数据,试图使其正常运行。我不确定如何比较两者,以及是否应该使用javascript的Date函数或第三方(例如moment.js)以及如何进行比较。
答案 0 :(得分:0)
所以我以一种非常混乱的方式使它工作,但是它可以工作。
getData(type){
axios.get('/api/totals/'+ type).then((res) => {
let data = res.data;
/* Adding totals together */
let total = [];
Object.entries(res.data).forEach(([key, val]) => {
total.push(val.value)
return val.created_at = moment(val.created_at).format("YY-MM")
});
this.total = total.reduce((total, num) => {return total + num}, 0);
/* Compare Months */
let currentMonth = moment(moment().format()).format("YY-MM")
let previousMonth = moment(this.currentMonth).subtract(1, 'months').format("YY-MM")
let calculateThisMonth = [];
let calculateLastMonth = [];
/* Calculating this Months */
let thisMonth = data.filter((total) => {
return total.created_at == currentMonth
})
Object.entries(thisMonth).forEach(([key, val]) => {
calculateThisMonth.push(val.value)
});
this.thisMonth = calculateThisMonth.reduce((total, num) => {return total + num}, 0);
/* Calculating last Months */
let lastMonth = data.filter((total) => {
return total.created_at == previousMonth
})
Object.entries(lastMonth).forEach(([key, val]) => {
calculateLastMonth.push(val.value)
});
this.lastMonth = calculateLastMonth.reduce((total, num) => {return total + num}, 0);
});
}
我觉得绝对有更好的方法,如果您有任何批评,我很乐意听到。