|
|
|
@ -343,19 +343,33 @@ const pieChartOptions = reactive<Record<Period, any>>({ |
|
|
|
] |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const updateLineChart = () => { |
|
|
|
if (linechart.value) { |
|
|
|
createEcharts(linechart, lineChartOptions[selectedLinePeriod.value]); |
|
|
|
if (selectedLinePeriod.value) { |
|
|
|
fetchLineAndUpdateChart(lineChartOptions[selectedLinePeriod.value], selectedLinePeriod.value); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
const updateLinesChart = () => { |
|
|
|
if (lineschart.value) { |
|
|
|
createEcharts(lineschart, linesChartOptions[selectedLinesPeriod.value]); |
|
|
|
console.log(`output->`,selectedLinesPeriod.value) |
|
|
|
if(selectedLinesPeriod.value==="thisyear"){ |
|
|
|
fetchLinesAndUpdateChart(0, linesChartOptions.thisyear) |
|
|
|
}else{ |
|
|
|
fetchLinesAndUpdateChart(1, linesChartOptions.thisyear) |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
const updatePieChart = () => { |
|
|
|
if (piechart.value) { |
|
|
|
createEcharts(piechart, pieChartOptions[selectedPiePeriod.value]); |
|
|
|
if(selectedPiePeriod.value){ |
|
|
|
fetchPieAndUpdateChart(pieChartOptions[selectedPiePeriod.value], selectedPiePeriod.value); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
@ -371,18 +385,23 @@ const updateLinesChartData = (disbursetype: any, disbursedate: any, disbursedata |
|
|
|
const updatePieChartData = (pieData: any, chartOptions: any) => { |
|
|
|
chartOptions.series[0].data = pieData; |
|
|
|
} |
|
|
|
const updateBarChartData = (barData:any) => { |
|
|
|
barChartOptions.dataset.source=barData; |
|
|
|
const updateBarChartData = (barData: any) => { |
|
|
|
barChartOptions.dataset.source = barData; |
|
|
|
} |
|
|
|
const fetchLineAndUpdateChart = async (days: number, chartOptions: any) => { |
|
|
|
const response = await get("/disburses/list/specificdate", { days }); |
|
|
|
const fetchLineAndUpdateChart = async (chartOptions: any, datetype:any="nighweek" ) => { |
|
|
|
const response = await get(`/disburses/line/${datetype}`); |
|
|
|
const data = response.data.data; |
|
|
|
const createDates = data.map((item: any) => item.create_date); |
|
|
|
const totalDisbursePrices = data.map((item: any) => item.total_disburseprice); |
|
|
|
updateLineChartData(createDates, totalDisbursePrices, chartOptions); |
|
|
|
createEcharts(linechart, chartOptions); |
|
|
|
} |
|
|
|
|
|
|
|
const fetchPieAndUpdateChart = async (chartOptions: any, datetype:any="nighweek") => { |
|
|
|
const response = await get(`/disburses/pie/${datetype}`); |
|
|
|
const data = response.data.data; |
|
|
|
updatePieChartData(data, chartOptions); |
|
|
|
createEcharts(piechart, chartOptions); |
|
|
|
} |
|
|
|
const fetchLinesAndUpdateChart = async (days: number, chartOptions: any) => { |
|
|
|
const now = new Date(); |
|
|
|
let currentYear = now.getFullYear(); |
|
|
|
@ -409,41 +428,25 @@ const fetchLinesAndUpdateChart = async (days: number, chartOptions: any) => { |
|
|
|
createEcharts(lineschart, chartOptions); |
|
|
|
} |
|
|
|
|
|
|
|
const fetchPieAndUpdateChart = async (days: number, chartOptions: any) => { |
|
|
|
const response = await get("/disburses/list/classifieddata", { days }); |
|
|
|
const data = response.data.data; |
|
|
|
updatePieChartData(data, chartOptions); |
|
|
|
createEcharts(piechart, chartOptions); |
|
|
|
} |
|
|
|
const fetchBarAndUpdateChart = async () => { |
|
|
|
const response = await get("/disburses/list/calendar"); |
|
|
|
const data = response.data.data; |
|
|
|
updateBarChartData(data); |
|
|
|
createEcharts(barchart, barChartOptions); |
|
|
|
} |
|
|
|
const getLineWeekList = () => fetchLineAndUpdateChart(7, lineChartOptions.nighweek); |
|
|
|
const getLineMonthList = () => fetchLineAndUpdateChart(30, lineChartOptions.nighmonth); |
|
|
|
const getLineYearList = () => fetchLineAndUpdateChart(365, lineChartOptions.nighyear); |
|
|
|
const getPieWeekList = () => fetchPieAndUpdateChart(7, pieChartOptions.nighweek); |
|
|
|
const getPieMonthList = () => fetchPieAndUpdateChart(30, pieChartOptions.nighmonth); |
|
|
|
const getPieYearList = () => fetchPieAndUpdateChart(365, pieChartOptions.nighyear); |
|
|
|
|
|
|
|
const getLineWeekList = () => fetchLineAndUpdateChart(lineChartOptions.nighweek, 'nighweek'); |
|
|
|
const getPieWeekList = () => fetchPieAndUpdateChart(pieChartOptions.nighweek, 'nighweek'); |
|
|
|
const getLinesThisYearList = () => fetchLinesAndUpdateChart(0, linesChartOptions.thisyear) |
|
|
|
const getLinesLastYearList = () => fetchLinesAndUpdateChart(1, linesChartOptions.lastyear) |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
getLineWeekList() |
|
|
|
getLineMonthList() |
|
|
|
getLineYearList() |
|
|
|
getPieWeekList() |
|
|
|
getPieMonthList() |
|
|
|
getPieYearList() |
|
|
|
getLineWeekList() |
|
|
|
getLinesThisYearList() |
|
|
|
getLinesLastYearList() |
|
|
|
fetchBarAndUpdateChart() |
|
|
|
createEcharts(lineschart, linesChartOptions.thisyear) |
|
|
|
createEcharts(linechart, lineChartOptions.nighweek); |
|
|
|
createEcharts(piechart, pieChartOptions.nighweek); |
|
|
|
createEcharts(barchart, barChartOptions); |
|
|
|
}); |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
