Merge branch 'dev' of http://192.168.18.88:8077/sznyb/daimp-front into dev
This commit is contained in:
lzc
commit
a6742c5f17
@ -3,16 +3,14 @@
|
||||
* @Author: zenghua.wang
|
||||
* @Date: 2023-06-20 11:48:41
|
||||
* @LastEditors: zenghua.wang
|
||||
* @LastEditTime: 2025-03-04 10:42:19
|
||||
* @LastEditTime: 2025-03-06 16:11:29
|
||||
*/
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
import resourceRouter from './modules/resource';
|
||||
import plantingAndBreedingRouter from './modules/plantingAndBreeding';
|
||||
import traceRouter from './modules/trace';
|
||||
import landsRoutes from './modules/lands';
|
||||
import annualplanRoutes from './modules/annualplan';
|
||||
import statisticsRoutes from './modules/statisticAnalysis';
|
||||
import dictRoutes from './modules/dict';
|
||||
|
||||
export const constantRoutes = [
|
||||
@ -44,10 +42,8 @@ export const constantRoutes = [
|
||||
],
|
||||
},
|
||||
...resourceRouter,
|
||||
...plantingAndBreedingRouter,
|
||||
...annualplanRoutes,
|
||||
...traceRouter,
|
||||
...landsRoutes,
|
||||
...statisticsRoutes,
|
||||
...dictRoutes,
|
||||
];
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
import Views from '@/layouts/Views.vue';
|
||||
|
||||
const annualplanRoutes = [
|
||||
{
|
||||
path: '/sub-government-affairs-service/annualPlan',
|
||||
name: 'annualPlan',
|
||||
component: Layout,
|
||||
component: Views,
|
||||
redirect: '/sub-government-affairs-service/annualPlans',
|
||||
meta: { title: '年度计划', icon: 'Document' },
|
||||
children: [
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
import Views from '@/layouts/Views.vue';
|
||||
import annualplanRouters from './annualplan';
|
||||
import statisticsRoutes from './statisticAnalysis';
|
||||
|
||||
export default [
|
||||
{
|
||||
@ -15,12 +16,8 @@ export default [
|
||||
name: 'grid',
|
||||
meta: { title: '网格化管理', icon: 'Document' },
|
||||
},
|
||||
// {
|
||||
// path: '/annual-plan',
|
||||
// component: () => import('@/views/resource/plan/index.vue'),
|
||||
// name: 'annual-plan',
|
||||
// meta: { title: '年度计划', icon: 'Document' },
|
||||
// },
|
||||
...annualplanRouters,
|
||||
...statisticsRoutes,
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,32 +1,31 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
import Views from '@/layouts/Views.vue';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/sub-government-affairs-service/analysis',
|
||||
name: 'analysis',
|
||||
component: Layout,
|
||||
component: Views,
|
||||
redirect: '/sub-government-affairs-service/analysis-land',
|
||||
meta: { title: '统计分析', icon: 'icon-test' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/analysis-land',
|
||||
component: () => import('@/views/statisticAnalysis/land/index.vue'),
|
||||
component: () => import('@/views/resource/statisticAnalysis/land/index.vue'),
|
||||
name: 'analysis-land',
|
||||
meta: { title: '土地利用与规划分析', icon: 'Document' },
|
||||
},
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/analysis-agriculture',
|
||||
// name: 'analysis-agriculture',
|
||||
// component: () => import('@/views/statisticAnalysis/agriculture/index.vue'),
|
||||
// meta: { title: '农业生产效率分析', icon: 'Document' },
|
||||
// },
|
||||
// {
|
||||
// path: '/sub-government-affairs-service/analysis-environment',
|
||||
// name: 'analysis-environment',
|
||||
// component: () => import('@/views/statisticAnalysis/environment/index.vue'),
|
||||
// meta: { title: '环境影响与经济效益分析', icon: 'Document' },
|
||||
// },
|
||||
{
|
||||
path: '/sub-government-affairs-service/analysis-agriculture',
|
||||
name: 'analysis-agriculture',
|
||||
component: () => import('@/views/resource/statisticAnalysis/agriculture/index.vue'),
|
||||
meta: { title: '农业生产效率分析', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/analysis-environment',
|
||||
name: 'analysis-environment',
|
||||
component: () => import('@/views/resource/statisticAnalysis/environment/index.vue'),
|
||||
meta: { title: '环境影响与经济效益分析', icon: 'Document' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
import Layout from '@/layouts/index.vue';
|
||||
|
||||
const statisticsRoutes = [
|
||||
{
|
||||
path: '/sub-government-affairs-service/statistics',
|
||||
name: 'statistics',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/utilizePlan',
|
||||
meta: { title: '统计分析', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/utilizePlan',
|
||||
name: 'utilizePlan',
|
||||
component: () => import('@/views/statistics/component/utilizePlan/index.vue'),
|
||||
meta: { title: '土地利用与规划分析', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/agriculture',
|
||||
name: 'agriculture',
|
||||
component: () => import('@/views/statistics/component/agriculture/index.vue'),
|
||||
meta: { title: '农业生产效率分析', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/environment',
|
||||
name: 'environment',
|
||||
component: () => import('@/views/statistics/component/environment/index.vue'),
|
||||
meta: { title: '环境影响与经济效益分析', icon: 'Document' },
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
export default statisticsRoutes;
|
||||
@ -3,11 +3,11 @@ import Views from '@/layouts/Views.vue';
|
||||
|
||||
export default [
|
||||
{
|
||||
path: '/sub-government-affairs-service/plantingAndBreeding',
|
||||
name: 'plantingAndBreeding',
|
||||
path: '/sub-government-affairs-service/trace',
|
||||
name: 'trace',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/breeding',
|
||||
meta: { title: '种养殖管理', icon: 'Document' },
|
||||
meta: { title: '溯源管理', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/planting',
|
||||
@ -51,27 +51,26 @@ export default [
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace',
|
||||
name: 'trace',
|
||||
component: Layout,
|
||||
redirect: '/sub-government-affairs-service/trace-search',
|
||||
meta: { title: '溯源查询', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-search',
|
||||
name: 'trace-search',
|
||||
component: () => import('@/views/trace/search/index.vue'),
|
||||
meta: { title: '溯源查询', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-info',
|
||||
name: 'trace-info',
|
||||
component: () => import('@/views/trace/search/info.vue'),
|
||||
meta: { title: '溯源详情', icon: 'Document' },
|
||||
hidden: true,
|
||||
path: '/sub-government-affairs-service/trace-manage',
|
||||
name: 'trace-manage',
|
||||
component: Views,
|
||||
meta: { title: '溯源查询和统计', icon: 'Document' },
|
||||
children: [
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-search',
|
||||
name: 'trace-search',
|
||||
component: () => import('@/views/trace/search/index.vue'),
|
||||
meta: { title: '溯源查询', icon: 'Document' },
|
||||
},
|
||||
{
|
||||
path: '/sub-government-affairs-service/trace-info',
|
||||
name: 'trace-info',
|
||||
component: () => import('@/views/trace/search/info.vue'),
|
||||
meta: { title: '溯源详情', icon: 'Document' },
|
||||
hidden: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="analysis">
|
||||
<el-row :gutter="16" style="margin-bottom: 10px">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-bar :chart-data="state.yieldTrendData" height="460px" :option="state.yieldTrendOption" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-line :chart-data="state.yieldData" height="460px" :option="state.yieldOption" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-mixin :chart-data="state.inputOtputRatioData" :option="state.inputOtputRatioOption" height="500px" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
yieldTrendOption: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: '产量趋势',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 50,
|
||||
stack: 'total',
|
||||
},
|
||||
},
|
||||
yieldTrendData: [
|
||||
{ value: 80, type: '花生', name: '耿马镇' },
|
||||
{ value: 105, type: '花生', name: '大兴乡' },
|
||||
{ value: 187, type: '花生', name: '孟定镇' },
|
||||
{ value: 100, type: '土豆', name: '耿马镇' },
|
||||
{ value: 125, type: '土豆', name: '大兴乡' },
|
||||
{ value: 217, type: '土豆', name: '孟定镇' },
|
||||
{ value: 200, type: '玉米', name: '耿马镇' },
|
||||
{ value: 155, type: '玉米', name: '大兴乡' },
|
||||
{ value: 247, type: '玉米', name: '孟定镇' },
|
||||
],
|
||||
yieldOption: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: '单产水平',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '年份',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '产量',
|
||||
// splitLine: {
|
||||
// show: false,
|
||||
// },
|
||||
},
|
||||
},
|
||||
yieldData: [
|
||||
{
|
||||
type: '花生',
|
||||
value: 40,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 146,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 81,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '花生',
|
||||
value: 60,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 166,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 101,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '花生',
|
||||
value: 80,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 176,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 91,
|
||||
name: '2024',
|
||||
},
|
||||
],
|
||||
inputOtputRatioOption: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
||||
title: {
|
||||
text: '投入品产出比',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['农药', '化肥', '产出', '产出比'],
|
||||
},
|
||||
},
|
||||
inputOtputRatioData: [
|
||||
{
|
||||
name: '耿马',
|
||||
value: 40,
|
||||
type: '农药',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '耿马',
|
||||
value: 30,
|
||||
type: '化肥',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '耿马',
|
||||
value: 100,
|
||||
type: '产出',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '耿马',
|
||||
value: 60,
|
||||
type: '产出比',
|
||||
seriesType: 'line',
|
||||
},
|
||||
{
|
||||
name: '大香乡',
|
||||
value: 20,
|
||||
type: '农药',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '大香乡',
|
||||
value: 20,
|
||||
type: '化肥',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '大香乡',
|
||||
value: 80,
|
||||
type: '产出',
|
||||
seriesType: 'bar',
|
||||
},
|
||||
{
|
||||
name: '大香乡',
|
||||
value: 40,
|
||||
type: '产出比',
|
||||
seriesType: 'line',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.analysis {
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="analysis">
|
||||
<el-row :gutter="16" style="margin-bottom: 10px">
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-line :chart-data="state.soilQualityData" height="460px" :option="state.soilQualityOption" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-bar :chart-data="state.costBenefitData" height="460px" :option="state.costBenefitOption" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover">
|
||||
<custom-echart-line :chart-data="state.marketPriceData" height="500px" :option="state.marketPriceOption" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const state = reactive({
|
||||
soilQualityOption: {
|
||||
color: ['#3685fe', '#41b879', '#fed500'],
|
||||
title: {
|
||||
text: '土壤质量检测',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '年份',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
},
|
||||
},
|
||||
soilQualityData: [
|
||||
{
|
||||
type: '土壤肥力',
|
||||
value: 40,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '酸碱度',
|
||||
value: 146,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '重金属含量',
|
||||
value: 81,
|
||||
name: '2022',
|
||||
},
|
||||
{
|
||||
type: '土壤肥力',
|
||||
value: 60,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '酸碱度',
|
||||
value: 186,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '重金属含量',
|
||||
value: 101,
|
||||
name: '2023',
|
||||
},
|
||||
{
|
||||
type: '土壤肥力',
|
||||
value: 230,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
type: '酸碱度',
|
||||
value: 256,
|
||||
name: '2024',
|
||||
},
|
||||
{
|
||||
type: '重金属含量',
|
||||
value: 301,
|
||||
name: '2024',
|
||||
},
|
||||
],
|
||||
costBenefitOption: {
|
||||
title: {
|
||||
text: '成本收益分析',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 50,
|
||||
},
|
||||
},
|
||||
costBenefitData: [
|
||||
{ value: 80, type: '成本', name: '2022' },
|
||||
{ value: 105, type: '收入', name: '2022' },
|
||||
{ value: 187, type: '利润', name: '2022' },
|
||||
{ value: 100, type: '成本', name: '2023' },
|
||||
{ value: 125, type: '收入', name: '2023' },
|
||||
{ value: 217, type: '利润', name: '2023' },
|
||||
{ value: 200, type: '成本', name: '2024' },
|
||||
{ value: 155, type: '收入', name: '2024' },
|
||||
{ value: 247, type: '利润', name: '2024' },
|
||||
],
|
||||
marketPriceOption: {
|
||||
color: ['#3685fe', '#41b879', '#fed500'],
|
||||
title: {
|
||||
text: '市场价格波动',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '月份',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '价格（元）',
|
||||
},
|
||||
},
|
||||
marketPriceData: [
|
||||
{
|
||||
type: '花生',
|
||||
value: 40,
|
||||
name: '1月',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 146,
|
||||
name: '1月',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 81,
|
||||
name: '1月',
|
||||
},
|
||||
{
|
||||
type: '花生',
|
||||
value: 60,
|
||||
name: '2月',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 186,
|
||||
name: '2月',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 101,
|
||||
name: '2月',
|
||||
},
|
||||
{
|
||||
type: '花生',
|
||||
value: 230,
|
||||
name: '3月',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 256,
|
||||
name: '3月',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 301,
|
||||
name: '3月',
|
||||
},
|
||||
{
|
||||
type: '花生',
|
||||
value: 160,
|
||||
name: '4月',
|
||||
},
|
||||
{
|
||||
type: '土豆',
|
||||
value: 286,
|
||||
name: '4月',
|
||||
},
|
||||
{
|
||||
type: '玉米',
|
||||
value: 161,
|
||||
name: '4月',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.analysis {
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,261 +0,0 @@
|
||||
<template>
|
||||
<section>农业生产效率分析</section>
|
||||
<div>
|
||||
<el-row :gutter="20" style="margin: 16px 0">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div ref="rOI" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin: 16px 0">
|
||||
<el-card>
|
||||
<div ref="yieldSingle" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div ref="yieldTrend" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
const rOI = ref(null);
|
||||
const yieldSingle = ref(null);
|
||||
const yieldTrend = ref(null);
|
||||
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
onMounted(() => {
|
||||
const rOIChart = echarts.init(rOI.value);
|
||||
const yieldSingleChart = echarts.init(yieldSingle.value);
|
||||
const yieldTrendChart = echarts.init(yieldTrend.value);
|
||||
|
||||
const rOIoption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '产量趋势',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '土豆',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 100, 90, 230, 210],
|
||||
color: 'rgb(80,135,236)',
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '花生',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [100, 101, 191, 234, 290, 158, 259],
|
||||
color: 'rgb(104,187,196)',
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '水稻',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [150, 232, 201, 154, 190, 200, 250],
|
||||
color: 'rgb(88,165,92)',
|
||||
},
|
||||
{
|
||||
name: '西红柿',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [128, 156, 180, 60, 190, 157, 169],
|
||||
color: 'rgb(242,189,66)',
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [100, 232, 201, 154, 190, 330, 200],
|
||||
color: 'rgb(238,117,47)',
|
||||
},
|
||||
],
|
||||
};
|
||||
const yieldSingloption = {
|
||||
title: {
|
||||
text: '单产水平',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['新乡镇', '马关镇', '五华区', '官渡区', '北市区', '呈贡区', '西山区'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '花生',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '土豆',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '水稻',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '西红柿',
|
||||
barWidth: '12px',
|
||||
type: 'bar',
|
||||
data: [862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
// markLine: {
|
||||
// lineStyle: {
|
||||
// type: 'dashed',
|
||||
// },
|
||||
// data: [[{ type: 'min' }, { type: 'max' }]],
|
||||
// },
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const yieldTrendoption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '产量趋势',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '耕地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
color: 'rgb(80,135,236)',
|
||||
},
|
||||
{
|
||||
name: '林地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
color: 'rgb(104,187,196)',
|
||||
},
|
||||
{
|
||||
name: '建设用地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
color: 'rgb(88,165,92)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
rOIoption && rOIChart.setOption(rOIoption);
|
||||
yieldSingloption && yieldSingleChart.setOption(yieldSingloption);
|
||||
});
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,265 +0,0 @@
|
||||
<template>
|
||||
<section>环境影响与经济效益分析</section>
|
||||
<div>
|
||||
<el-row :gutter="20" style="margin: 16px 0">
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div ref="environment" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin: 16px 0">
|
||||
<el-card>
|
||||
<div ref="market" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-card>
|
||||
<div ref="profit" style="width: 100%; height: 200px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
const environment = ref(null);
|
||||
const market = ref(null);
|
||||
const profit = ref(null);
|
||||
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
onMounted(() => {
|
||||
const environmentChart = echarts.init(environment.value);
|
||||
const marketChart = echarts.init(market.value);
|
||||
const profitChart = echarts.init(profit.value);
|
||||
|
||||
const environmentOption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '土壤质量监测',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['土壤肥力', '酸碱度', '重金属含量'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '土壤肥力',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 100, 90, 230, 210],
|
||||
color: 'rgb(80,135,236)',
|
||||
},
|
||||
{
|
||||
name: '酸碱度',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [100, 101, 191, 234, 290, 158, 259],
|
||||
color: 'rgb(104,187,196)',
|
||||
},
|
||||
{
|
||||
name: '重金属含量',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [150, 232, 201, 154, 190, 200, 250],
|
||||
color: 'rgb(88,165,92)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const marketOption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '市场价格波动',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['土豆', '花生', '水稻', '西红柿', '玉米'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '土豆',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 100, 90, 230, 210],
|
||||
color: 'rgb(80,135,236)',
|
||||
},
|
||||
{
|
||||
name: '花生',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [100, 101, 191, 234, 290, 158, 259],
|
||||
color: 'rgb(104,187,196)',
|
||||
},
|
||||
{
|
||||
name: '水稻',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [150, 232, 201, 154, 190, 200, 250],
|
||||
color: 'rgb(88,165,92)',
|
||||
},
|
||||
{
|
||||
name: '西红柿',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [128, 156, 180, 60, 190, 157, 169],
|
||||
color: 'rgb(242,189,66)',
|
||||
},
|
||||
{
|
||||
name: '玉米',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
smooth: true,
|
||||
data: [100, 232, 201, 154, 190, 330, 200],
|
||||
color: 'rgb(238,117,47)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const profitOption = {
|
||||
title: {
|
||||
text: '成本收益分析',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['2021', '2022', '2023', '2024', '2025'],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '利润',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '成本',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [320, 332, 301, 334, 390, 330, 320],
|
||||
},
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '利润',
|
||||
type: 'line',
|
||||
barWidth: '12px',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
tooltip: {
|
||||
valueFormatter: function (value) {
|
||||
return value + ' %';
|
||||
},
|
||||
},
|
||||
data: [60, 60, 30, 40, 60, 50, 80],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
environmentOption && environmentChart.setOption(environmentOption);
|
||||
marketOption && marketChart.setOption(marketOption);
|
||||
profitOption && profitChart.setOption(profitOption);
|
||||
});
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,187 +0,0 @@
|
||||
<template>
|
||||
<section>土地利用与规划分析</section>
|
||||
<div>
|
||||
<el-row :gutter="20" style="margin: 16px 0">
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div ref="planUsed" style="width: 100%; height: 300px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card>
|
||||
<div ref="cropStructure" style="width: 100%; height: 300px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin: 16px 0">
|
||||
<el-card>
|
||||
<div ref="changeTrend" style="width: 100%; height: 300px"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
const planUsed = ref(null);
|
||||
const cropStructure = ref(null);
|
||||
const changeTrend = ref(null);
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
|
||||
onMounted(() => {
|
||||
const planUsedChart = echarts.init(planUsed.value);
|
||||
const cropStructureChart = echarts.init(cropStructure.value);
|
||||
const changeTrendChart = echarts.init(changeTrend.value);
|
||||
|
||||
const planUsedoption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '土地用途分析',
|
||||
subtext: '',
|
||||
left: 'left',
|
||||
top: '0px',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: '10%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 1048, name: '耕地', itemStyle: { color: 'rgb(88,165,92)' } },
|
||||
{ value: 735, name: '林地', itemStyle: { color: 'rgb(80,135,236)' } },
|
||||
{ value: 580, name: '建设用地', itemStyle: { color: 'rgb(104,187,196)' } },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const cropStructureoption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '作物种植结构',
|
||||
subtext: '',
|
||||
left: 'left',
|
||||
top: '0px',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'horizontal',
|
||||
left: 'center',
|
||||
top: '10%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '占比',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
center: ['50%', '60%'],
|
||||
data: [
|
||||
{ value: 1048, name: '土豆', itemStyle: { color: 'rgb(80,135,236)' } },
|
||||
{ value: 735, name: '西红柿', itemStyle: { color: 'rgb(104,187,196)' } },
|
||||
{ value: 580, name: '玉米', itemStyle: { color: 'rgb(88,165,92)' } },
|
||||
{ value: 580, name: '花生', itemStyle: { color: 'rgb(242,189,66)' } },
|
||||
{ value: 580, name: '水稻', itemStyle: { color: 'rgb(238,117,47)' } },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const changeTrendoption = {
|
||||
// color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'], // 全局颜色列表
|
||||
title: {
|
||||
text: '土地变更趋势',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: ['耕地', '林地', '建设用地'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['2020', '2021', '2022', '2023', '2024'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '耕地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
mooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
color: 'rgb(80,135,236)',
|
||||
},
|
||||
{
|
||||
name: '林地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
mooth: true,
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
color: 'rgb(104,187,196)',
|
||||
},
|
||||
{
|
||||
name: '建设用地',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
mooth: true,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
color: 'rgb(88,165,92)',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
planUsedoption && planUsedChart.setOption(planUsedoption);
|
||||
cropStructureoption && cropStructureChart.setOption(cropStructureoption);
|
||||
changeTrendoption && changeTrendChart.setOption(changeTrendoption);
|
||||
});
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
x
Reference in New Issue
Block a user