139 lines
4.8 KiB
Vue
139 lines
4.8 KiB
Vue
![]() |
<template>
|
||
|
<div class="p-4">
|
||
|
<a-card :bordered="false" style="height: 100%;">
|
||
|
<a-tabs v-model:activeKey="activeKey" @change="tabChange">
|
||
|
<a-tab-pane key="bar" tab="柱状图">
|
||
|
<a-row>
|
||
|
<a-col :span="10">
|
||
|
<a-radio-group v-model:value="barType" @change="statisticst">
|
||
|
<a-radio-button value="year">按年统计</a-radio-button>
|
||
|
<a-radio-button value="month">按月统计</a-radio-button>
|
||
|
<a-radio-button value="category">按类别统计</a-radio-button>
|
||
|
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||
|
</a-radio-group>
|
||
|
</a-col>
|
||
|
</a-row>
|
||
|
<Bar :chartData="dataSource" height="50vh"></Bar>
|
||
|
</a-tab-pane>
|
||
|
<a-tab-pane key="pie" tab="饼状图" force-render>
|
||
|
<a-row :gutter="24">
|
||
|
<a-col :span="10">
|
||
|
<a-radio-group v-model:value="pieType" @change="statisticst">
|
||
|
<a-radio-button value="year">按年统计</a-radio-button>
|
||
|
<a-radio-button value="month">按月统计</a-radio-button>
|
||
|
<a-radio-button value="category">按类别统计</a-radio-button>
|
||
|
<a-radio-button value="cabinet">按柜号统计</a-radio-button>
|
||
|
</a-radio-group>
|
||
|
</a-col>
|
||
|
<Pie :chartData="dataSource" height="40vh"></Pie>
|
||
|
</a-row>
|
||
|
</a-tab-pane>
|
||
|
</a-tabs>
|
||
|
</a-card>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts" setup>
|
||
|
|
||
|
import {defHttp} from '/@/utils/http/axios';
|
||
|
import { ref,unref,reactive } from 'vue';
|
||
|
import Bar from '/@/components/chart/Bar.vue';
|
||
|
import Pie from '/@/components/chart/Pie.vue';
|
||
|
|
||
|
|
||
|
const activeKey = ref('bar');
|
||
|
const barType = ref('year');
|
||
|
const pieType = ref('year');
|
||
|
const dataSource = ref([]);
|
||
|
const url = reactive({
|
||
|
getYearCountInfo: "/mock/api/report/getYearCountInfo",
|
||
|
getMonthCountInfo:"/mock/api/report/getMonthCountInfo",
|
||
|
getCntrNoCountInfo:"/mock/api/report/getCntrNoCountInfo",
|
||
|
getCabinetCountInfo:"/mock/api/report/getCabinetCountInfo",
|
||
|
});
|
||
|
|
||
|
async function loadDate(url,type,params) {
|
||
|
const res = await defHttp.get({url,params},{isTransformResponse:false ,errorMessageMode:'none'})
|
||
|
if(res.success){
|
||
|
dataSource.value = [];
|
||
|
switch (type) {
|
||
|
case 'year':
|
||
|
getYearCountSource(res.result);
|
||
|
break;
|
||
|
case 'month':
|
||
|
getMonthCountSource(res.result);
|
||
|
break;
|
||
|
case 'category':
|
||
|
getCategoryCountSource(res.result);
|
||
|
break;
|
||
|
case 'cabinet':
|
||
|
getCabinetCountSource(res.result);
|
||
|
break;
|
||
|
default:
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
}
|
||
|
function getYearCountSource(data){
|
||
|
for (let i = 0; i < data.length; i++) {
|
||
|
dataSource.value.push({
|
||
|
name: `${data[i].year}年`,
|
||
|
value: data[i].yearcount
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
function getMonthCountSource(data){
|
||
|
for (let i = 0; i < data.length; i++) {
|
||
|
dataSource.value.push({
|
||
|
name: `${data[i].month}`,
|
||
|
value: data[i].monthcount
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
function getCategoryCountSource(data){
|
||
|
for (let i = 0; i < data.length; i++) {
|
||
|
dataSource.value.push({
|
||
|
name: `${data[i].classifyname}`,
|
||
|
value: data[i].cntrnocount
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
function getCabinetCountSource(data){
|
||
|
for (let i = 0; i < data.length; i++) {
|
||
|
dataSource.value.push({
|
||
|
name: `${data[i].cabinetname}`,
|
||
|
value: data[i].cabinetcocunt
|
||
|
})
|
||
|
}
|
||
|
}
|
||
|
// 选择统计类别
|
||
|
function statisticst(e) {
|
||
|
if(unref(activeKey) === "pie"){
|
||
|
loadDate(getUrl(unref(pieType)),unref(pieType),{});
|
||
|
}else{
|
||
|
loadDate(getUrl(unref(barType)),unref(barType),{});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function getUrl(type){
|
||
|
if(type === 'year'){
|
||
|
return url.getYearCountInfo;
|
||
|
}
|
||
|
if(type === 'month'){
|
||
|
return url.getMonthCountInfo;
|
||
|
}
|
||
|
if(type === 'category'){
|
||
|
return url.getCntrNoCountInfo;
|
||
|
}
|
||
|
if(type === 'cabinet'){
|
||
|
return url.getCabinetCountInfo;
|
||
|
}
|
||
|
}
|
||
|
//tab切换
|
||
|
function tabChange(key) {
|
||
|
console.log("切换的key:",key)
|
||
|
}
|
||
|
loadDate(url.getYearCountInfo,'year',{});
|
||
|
</script>
|