feat:analysis-land

sub-government-affairs-service/src/router/index.js

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2023-06-20 11:48:41
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-02-28 13:50:00
+ * @LastEditTime: 2025-03-04 10:42:19
  */
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layouts/index.vue';
@@ -12,7 +12,7 @@ import resourceRouter from './modules/resource';
 import plantingAndBreedingRouter from './modules/plantingAndBreeding';
 import landsRoutes from './modules/lands';
 import annualplanRoutes from './modules/annualplan';
-import statisticsRoutes from './modules/statistics';
+import statisticsRoutes from './modules/statisticAnalysis';
 import dictRoutes from './modules/dict';
 
 export const constantRoutes = [

sub-government-affairs-service/src/router/modules/statisticAnalysis.js

@@ -0,0 +1,32 @@
+import Layout from '@/layouts/index.vue';
+import Views from '@/layouts/Views.vue';
+
+export default [
+  {
+    path: '/sub-government-affairs-service/analysis',
+    name: 'analysis',
+    component: Layout,
+    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'),
+        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' },
+      // },
+    ],
+  },
+];

sub-government-affairs-service/src/views/statisticAnalysis/land/index.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="analysis">
+    <!-- <h3 class="analysis-title">土地利用与规划分析</h3> -->
+    <el-row :gutter="16" style="margin-bottom: 10px">
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-pie :chart-data="state.landData" height="460px" :option="state.landOption" />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="hover">
+          <custom-echart-bar :chart-data="state.cropData" height="460px" :option="state.cropOption" />
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row :gutter="16">
+      <el-col :span="24">
+        <el-card shadow="hover">
+          <custom-echart-multi-line :chart-data="state.landTrendData" height="500px" :option="state.landTrendOption" type="line" />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from 'vue';
+
+const state = reactive({
+  landOption: {
+    color: ['#3685fe', '#41b879', '#ffd500'],
+    title: {
+      text: '土地用途分析',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    legend: {
+      data: ['耕地', '林地', '建设用地'],
+    },
+    label: {
+      color: '#333',
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: [80, 140],
+        roseType: 'area',
+        itemStyle: {
+          borderRadius: 20,
+        },
+      },
+    ],
+  },
+  landData: [
+    { value: 100, name: '耕地' },
+    { value: 105, name: '林地' },
+    { value: 217, name: '建设用地' },
+  ],
+  cropOption: {
+    title: {
+      text: '作物种植结构',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      data: ['土豆', '西红柿', '玉米', '花生', '水稻'],
+    },
+    yAxis: {
+      type: 'value',
+      name: '面积（亩）',
+      // splitLine: {
+      //   show: false,
+      // },
+    },
+    series: [
+      {
+        name: 'bar',
+        type: 'bar',
+        barWidth: 50,
+        data: [],
+        itemStyle: {
+          borderRadius: 25,
+        },
+      },
+    ],
+  },
+  cropData: [
+    { value: 230, name: '土豆' },
+    { value: 165, name: '西红柿' },
+    { value: 217, name: '玉米' },
+    { value: 200, name: '花生' },
+    { value: 305, name: '水稻' },
+  ],
+  landTrendOption: {
+    color: ['#3685fe', '#41b879', '#ffd500'],
+    title: {
+      text: '土地变更趋势',
+      textStyle: {
+        color: '#333',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      name: '年份',
+    },
+    yAxis: {
+      type: 'value',
+      name: '面积（亩）',
+      // splitLine: {
+      //   show: false,
+      // },
+    },
+  },
+  landTrendData: [
+    {
+      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',
+    },
+    {
+      type: '耕地',
+      value: 160,
+      name: '2025',
+    },
+    {
+      type: '林地',
+      value: 286,
+      name: '2025',
+    },
+    {
+      type: '建设用地',
+      value: 161,
+      name: '2025',
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.analysis {
+  &-title {
+    font-size: 20px;
+    color: #000;
+    margin-bottom: 40px;
+  }
+}
+</style>