465 lines
10 KiB
Vue
465 lines
10 KiB
Vue
<template>
|
||
<div v-loading="state.loading" class="statistic">
|
||
<el-row :gutter="16" style="margin-bottom: 20px">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover" class="statistic-data">
|
||
<b class="statistic-title">综合数据统计</b>
|
||
<el-row :gutter="16" style="margin-top: 40px">
|
||
<el-col :span="8" class="text-center">
|
||
<p>农村人口</p>
|
||
<avue-count-up end="27.88" :decimals="2" class="text-primary" />
|
||
<em>万人</em>
|
||
</el-col>
|
||
<el-col :span="8" class="text-center">
|
||
<p>耕地面积</p>
|
||
<avue-count-up end="103.88" :decimals="2" class="text-warning" />
|
||
<em>万亩</em>
|
||
</el-col>
|
||
<el-col :span="8" class="text-center">
|
||
<p>农业总产值</p>
|
||
<avue-count-up end="92.88" :decimals="2" class="text-danger" />
|
||
<em>亿元</em>
|
||
</el-col>
|
||
<el-col :span="24" class="text-center" style="margin-top: 90px">
|
||
<p>品牌农产品销售情况</p>
|
||
<avue-count-up end="17.88" :decimals="2" class="text-success" />
|
||
<em>亿元</em>
|
||
</el-col>
|
||
</el-row>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<custom-echart-bar :chart-data="state.areaData" height="400px" :option="state.areaOption" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="16" style="margin-bottom: 20px">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<custom-echart-bar :chart-data="state.breedingData" height="400px" :option="state.breedingOption" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<custom-echart-radar :chart-data="state.inputsData" height="400px" :option="state.inputsOption" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="16" style="margin-bottom: 20px">
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<custom-echart-pie :chart-data="state.businessData" height="400px" :option="state.businessOption" />
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card shadow="hover">
|
||
<custom-echart-mixin :chart-data="state.codingData" :option="state.codingOption" height="400px" />
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { reactive } from 'vue';
|
||
import { useRouter } from 'vue-router';
|
||
import { useApp } from '@/hooks';
|
||
import { sleep } from '@/utils';
|
||
|
||
const router = useRouter();
|
||
const app = useApp();
|
||
const state = reactive({
|
||
areaOption: {
|
||
// color: ['#fed500'],
|
||
title: {
|
||
text: '土地分布数据统计',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
name: '区域',
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '亩',
|
||
},
|
||
tooltip: {
|
||
formatter: function (params) {
|
||
return `${params.name}：${params.value}亩`;
|
||
},
|
||
},
|
||
barStyle: {
|
||
barWidth: 50,
|
||
showBackground: true,
|
||
itemStyle: {
|
||
borderRadius: 20,
|
||
},
|
||
},
|
||
},
|
||
areaData: [
|
||
{ value: 230, name: '耿马镇' },
|
||
{ value: 165, name: '勐永镇' },
|
||
{ value: 217, name: '勐撒镇' },
|
||
{ value: 200, name: '孟定镇' },
|
||
{ value: 305, name: '大兴乡' },
|
||
],
|
||
breedingOption: {
|
||
color: ['#41b879', '#fed500'],
|
||
title: {
|
||
text: '种养殖综合数据统计',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
const find = state.breedingData.find((item) => item.name === params.name);
|
||
return `${params.name}：${params.value}${find.unit}`;
|
||
},
|
||
},
|
||
barStyle: {
|
||
barWidth: 50,
|
||
showBackground: true,
|
||
itemStyle: {
|
||
borderRadius: 20,
|
||
},
|
||
},
|
||
},
|
||
breedingData: [
|
||
{ value: 230, name: '种植面积', unit: '亩' },
|
||
{ value: 165, name: '养殖面积', unit: '亩' },
|
||
{ value: 217, name: '种植基地', unit: '个' },
|
||
{ value: 200, name: '养殖基地', unit: '个' },
|
||
],
|
||
inputsOption: {
|
||
color: ['#ffd500'],
|
||
title: {
|
||
text: '投入品数据统计',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
legend: { show: false },
|
||
radar: {
|
||
indicator: [],
|
||
center: ['50%', '50%'],
|
||
radius: 140,
|
||
startAngle: 90,
|
||
splitNumber: 4,
|
||
shape: 'circle',
|
||
axisName: {
|
||
formatter: '{value}',
|
||
// formatter: (params) => {
|
||
// const find = state.inputsData.find((item) => item.name === params);
|
||
// return `${params}：${find.value}${find.unit}`;
|
||
// },
|
||
color: '#333',
|
||
},
|
||
splitArea: {
|
||
areaStyle: {
|
||
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
|
||
shadowColor: 'rgba(0, 0, 0, 0.2)',
|
||
shadowBlur: 10,
|
||
},
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(211, 253, 250, 0.8)',
|
||
},
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: 'rgba(211, 253, 250, 0.8)',
|
||
},
|
||
},
|
||
},
|
||
radarStyle: {
|
||
areaStyle: {},
|
||
},
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
let str = params.marker + params.name + '<br/>';
|
||
state.inputsData.forEach((item) => {
|
||
str += item.name + '：' + item.value + item.unit + '<br/>';
|
||
});
|
||
return str;
|
||
},
|
||
},
|
||
},
|
||
inputsData: [
|
||
{ value: 75, name: '农药使用', type: '投入品', max: 100, unit: '吨' },
|
||
{ value: 38, name: '农机使用', type: '投入品', max: 100, unit: '台' },
|
||
{ value: 74, name: '种源使用', type: '投入品', max: 100, unit: '万吨' },
|
||
{ value: 55, name: '兽药使用', type: '投入品', max: 100, unit: '千克' },
|
||
{ value: 65, name: '肥料使用', type: '投入品', max: 100, unit: '吨' },
|
||
],
|
||
businessOption: {
|
||
title: {
|
||
text: '经营主体分类统计',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
legend: {
|
||
right: '0',
|
||
top: 'middle',
|
||
orient: 'vertical',
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
},
|
||
label: {
|
||
color: '#333',
|
||
// formatter: ({ data }) => {
|
||
// return data.name + '：' + data.value;
|
||
// },
|
||
},
|
||
tooltip: {
|
||
formatter: (params) => {
|
||
return `${params.name}：${params.value}家`;
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
radius: [80, 140],
|
||
itemStyle: {
|
||
borderRadius: 10,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
businessData: [
|
||
{ value: 28, name: '个体户' },
|
||
{ value: 358, name: '村集体' },
|
||
{ value: 217, name: '合作社' },
|
||
{ value: 128, name: '农资企业' },
|
||
{ value: 22, name: '种源企业' },
|
||
{ value: 41, name: '生产加工企业' },
|
||
],
|
||
codingOption: {
|
||
color: ['#41b879', '#ffd500'],
|
||
title: {
|
||
text: '溯源赋码扫码统计',
|
||
textStyle: {
|
||
color: '#333',
|
||
},
|
||
},
|
||
legend: {},
|
||
yAxis: {
|
||
type: 'value',
|
||
name: '次',
|
||
},
|
||
barStyle: {
|
||
barWidth: 50,
|
||
},
|
||
// tooltip: {
|
||
// formatter: (params) => {
|
||
// const arr = state.codingData.filter((item) => item.name === params.name);
|
||
// return `${params.name}<br/>
|
||
// ${arr[0].type}：${arr[0].value}次<br/>
|
||
// ${arr[1].type}：${arr[1].value}次`;
|
||
// },
|
||
// },
|
||
},
|
||
codingData: [
|
||
{
|
||
name: '一月',
|
||
value: 40,
|
||
type: '赋码',
|
||
seriesType: 'bar',
|
||
},
|
||
{
|
||
name: '一月',
|
||
value: 60,
|
||
type: '扫码',
|
||
seriesType: 'line',
|
||
},
|
||
{
|
||
name: '二月',
|
||
value: 100,
|
||
type: '赋码',
|
||
seriesType: 'bar',
|
||
},
|
||
{
|
||
name: '二月',
|
||
value: 120,
|
||
type: '扫码',
|
||
seriesType: 'line',
|
||
},
|
||
{
|
||
name: '三月',
|
||
value: 80,
|
||
type: '赋码',
|
||
seriesType: 'bar',
|
||
},
|
||
{
|
||
name: '三月',
|
||
value: 124,
|
||
type: '扫码',
|
||
seriesType: 'line',
|
||
},
|
||
{
|
||
name: '四月',
|
||
value: 200,
|
||
type: '赋码',
|
||
seriesType: 'bar',
|
||
},
|
||
{
|
||
name: '四月',
|
||
value: 220,
|
||
type: '扫码',
|
||
seriesType: 'line',
|
||
},
|
||
],
|
||
loading: false,
|
||
});
|
||
|
||
// 加载
|
||
const loadData = async () => {
|
||
state.loading = true;
|
||
await sleep(500);
|
||
state.loading = false;
|
||
// GetEntityList(state.query)
|
||
// .then((res) => {
|
||
// if (res.code === 200) {
|
||
// const { current, size, total, records } = res.data;
|
||
// state.data = records;
|
||
// state.pageData = {
|
||
// currentPage: current || 1,
|
||
// pageSize: size || 10,
|
||
// total: total,
|
||
// };
|
||
// }
|
||
// })
|
||
// .catch((err) => {
|
||
// app.$message.error(err.msg);
|
||
// state.data = [];
|
||
// })
|
||
// .finally(() => {
|
||
// state.loading = false;
|
||
// });
|
||
};
|
||
|
||
loadData();
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.statistic {
|
||
.el-card {
|
||
border: 0 !important;
|
||
border-radius: 16px !important;
|
||
}
|
||
|
||
&-title {
|
||
font-size: 19px;
|
||
font-weight: bold;
|
||
font-family: '黑体';
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
&-data {
|
||
height: 440px;
|
||
font-size: 18px;
|
||
|
||
p {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
span {
|
||
font-size: 30px;
|
||
font-weight: bolder;
|
||
}
|
||
|
||
em {
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
&-display {
|
||
@include flex-column();
|
||
background-repeat: no-repeat;
|
||
background-position: right bottom;
|
||
|
||
dt {
|
||
@include flex-row();
|
||
align-items: center;
|
||
margin-bottom: 30px;
|
||
|
||
i {
|
||
display: inline-block;
|
||
width: 72px;
|
||
height: 72px;
|
||
margin-right: 20px;
|
||
}
|
||
span {
|
||
font-size: 18px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
dd {
|
||
span {
|
||
font-size: 22px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
}
|
||
|
||
&.d1 {
|
||
dt span {
|
||
color: #ff4975;
|
||
}
|
||
}
|
||
&.d2 {
|
||
dt span {
|
||
color: #41b879;
|
||
}
|
||
}
|
||
&.d3 {
|
||
dt span {
|
||
color: #3685fe;
|
||
}
|
||
}
|
||
&.d4 {
|
||
dt span {
|
||
color: #6b66ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
&-table {
|
||
@include flex-row();
|
||
align-items: center;
|
||
}
|
||
|
||
&-rank {
|
||
li {
|
||
@include flex-row();
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
|
||
i {
|
||
width: 72px;
|
||
height: 72px;
|
||
margin-right: 20px;
|
||
}
|
||
span {
|
||
@include flex-column();
|
||
flex: 1;
|
||
font-size: 14px;
|
||
}
|
||
em {
|
||
font-style: normal;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|