feat:政务首页
This commit is contained in:
parent
c3e044f6e9
commit
1f726c42f0
92
main/src/components/custom-echart-radar/index.vue
Normal file
92
main/src/components/custom-echart-radar/index.vue
Normal file
@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, watchEffect } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '../../hooks/useEcharts';
|
||||
|
||||
export default {
|
||||
name: 'CustomEchartRadar',
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'radar',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance } = useEcharts(chartRef);
|
||||
const option = reactive({
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
legend: {},
|
||||
radar: {},
|
||||
tooltip: {},
|
||||
series: [
|
||||
{
|
||||
type: 'radar',
|
||||
data: [],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
props.chartData && initCharts();
|
||||
});
|
||||
|
||||
function initCharts() {
|
||||
if (props.option) {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
let typeArr = Array.from(new Set(props.chartData.map((item) => item.type)));
|
||||
let indicator = Array.from(
|
||||
new Set(
|
||||
props.chartData.map((item) => {
|
||||
let { name, max } = item;
|
||||
return { name, max };
|
||||
})
|
||||
)
|
||||
);
|
||||
let data = [];
|
||||
typeArr.forEach((type) => {
|
||||
const radarStyle = props.option?.radarStyle ?? {};
|
||||
let obj = { name: type, ...radarStyle };
|
||||
let chartArr = props.chartData.filter((item) => type === item.type);
|
||||
obj['value'] = chartArr.map((item) => item.value);
|
||||
data.push(obj);
|
||||
});
|
||||
option.radar.indicator = indicator;
|
||||
option.series[0]['data'] = data;
|
||||
setOptions(option);
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,13 +1,18 @@
|
||||
<template>
|
||||
<div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
|
||||
<div v-if="title" class="title">{{ title }}</div>
|
||||
<div class="panel">
|
||||
<el-input v-if="filter" v-model="state.keyword" clearable placeholder="请输入关键字筛选" class="panel-filter" />
|
||||
<el-tree
|
||||
:data="data"
|
||||
ref="treeRef"
|
||||
:data="state.list"
|
||||
:node-key="option.nodeKey"
|
||||
:show-checkbox="option.showCheckbox"
|
||||
:default-expanded-keys="option.defaultExpandedKeys"
|
||||
:default-checked-keys="option.defaultCheckedKeys"
|
||||
:default-expand-all="option.defaultExpandAll"
|
||||
:props="option.props ?? option.defaultProps"
|
||||
:filter-node-method="filterNodeMethod"
|
||||
@node-click="handleNodeClick"
|
||||
>
|
||||
<template #default="{ data: rows }">
|
||||
@ -15,11 +20,15 @@
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup name="custom-table-tree">
|
||||
import { reactive, ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
shadow: { type: Boolean, default: true },
|
||||
filter: { type: Boolean, default: false },
|
||||
data: { type: Array, default: () => [] },
|
||||
option: {
|
||||
type: Object,
|
||||
@ -34,12 +43,42 @@ const props = defineProps({
|
||||
},
|
||||
defaultExpandedKeys: [],
|
||||
defaultCheckedKeys: [],
|
||||
defaultExpandAll: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(['node-click']);
|
||||
|
||||
const treeRef = ref(null);
|
||||
const state = reactive({
|
||||
keyword: '',
|
||||
list: [],
|
||||
});
|
||||
const label = props.option.props?.label ?? 'label';
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(val) => {
|
||||
state.list = val;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => state.keyword,
|
||||
(val) => {
|
||||
treeRef.value.filter(val);
|
||||
}
|
||||
);
|
||||
|
||||
const filterNodeMethod = (value, data) => {
|
||||
if (!value) return true;
|
||||
return data[label].includes(value);
|
||||
};
|
||||
|
||||
const handleNodeClick = (data, node) => {
|
||||
emit('node-click', data, node);
|
||||
};
|
||||
@ -48,6 +87,7 @@ const handleNodeClick = (data, node) => {
|
||||
.custom-table-tree {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
min-width: 200px;
|
||||
@include flex-column();
|
||||
|
||||
@ -65,8 +105,15 @@ const handleNodeClick = (data, node) => {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
.panel {
|
||||
padding: 16px 10px 10px;
|
||||
|
||||
&-filter {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,7 @@ import CustomRichEditor from './custom-rich-editor';
|
||||
import CustomEchartBar from './custom-echart-bar';
|
||||
import CustomEchartPie from './custom-echart-pie';
|
||||
import CustomEchartLine from './custom-echart-line';
|
||||
import CustomEchartRadar from './custom-echart-radar';
|
||||
import CustomEchartMixin from './custom-echart-mixin';
|
||||
import customEchartPictorialBar from './custom-echart-pictorial-bar';
|
||||
import CustomEchartLineLine from './custom-echart-line-line';
|
||||
@ -26,6 +27,7 @@ export {
|
||||
CustomEchartBar,
|
||||
CustomEchartPie,
|
||||
CustomEchartLine,
|
||||
CustomEchartRadar,
|
||||
CustomEchartMixin,
|
||||
customEchartPictorialBar,
|
||||
CustomEchartLineLine,
|
||||
|
||||
@ -1,6 +1,453 @@
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div></div>
|
||||
<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" />
|
||||
</el-col>
|
||||
<el-col :span="8" class="text-center">
|
||||
<p>耕地面积（万亩）</p>
|
||||
<avue-count-up end="103.88" :decimals="2" class="text-warning" />
|
||||
</el-col>
|
||||
<el-col :span="8" class="text-center">
|
||||
<p>农业总产值（亿元）</p>
|
||||
<avue-count-up end="92.88" :decimals="2" class="text-danger" />
|
||||
</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" />
|
||||
</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 name="home"></script>
|
||||
<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: 18px;
|
||||
font-weight: bold;
|
||||
font-family: '黑体';
|
||||
color: #333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-data {
|
||||
height: 440px;
|
||||
font-size: 18px;
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
&-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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user