dbsd_kczx/src/views/report/statisticst/index.vue

139 lines
4.8 KiB
Vue
Raw Normal View History

2022-03-10 09:47:29 +08:00
<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>