From 7cf35a4a14e8cf583563763a10b2322984116584 Mon Sep 17 00:00:00 2001
From: Xulinchuan <2026734208@qq.com>
Date: Thu, 10 Jul 2025 17:34:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9B=91=E7=AE=A1=E6=A6=82?=
 =?UTF-8?q?=E5=86=B5=E7=BB=9F=E8=AE=A1=EF=BC=8C=E6=8A=95=E5=85=A5=E5=93=81?=
 =?UTF-8?q?=E9=9C=80=E6=B1=82=E6=A6=82=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demandManage/demandOverview.vue           | 171 ++++++++++++++++-
 .../output-statistics/index.vue               |   9 +-
 .../planting-management/statistics/index.vue  | 173 +++++++++++++++++-
 3 files changed, 341 insertions(+), 12 deletions(-)

diff --git a/sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue b/sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue
index 1269652..a5b992b 100644
--- a/sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue
+++ b/sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue
@@ -1,8 +1,9 @@
-<template>
-  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/demand-overview.png')})`"></div>
+<!-- <template>
+  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div>
 </template>
 
 <script setup>
+import { ref, watch, onMounted, computed } from 'vue';
 import { getAssetsFile } from '@/utils';
 </script>
 
@@ -12,4 +13,168 @@ import { getAssetsFile } from '@/utils';
   background-size: cover;
   background-repeat: no-repeat;
 }
-</style>
+</style> -->
+
+<template>
+  <div class="app-container">
+    <div class="container-custom">
+      <h2 class="custom-h2">投入品需求概况</h2>
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
+              <el-form-item label="" style="margin-left: -15px">
+                <AreaCascader :region-code="formInline.regionCode" :grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
+              </el-form-item>
+              <el-form-item label="">
+                <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-cont">
+        <el-row :gutter="20">
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">产出品产量数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">肥料需求数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData2" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">农药需求数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData3" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">种植种苗需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData4" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">肥料需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData5" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">农药 需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData6" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import customEchartPie from '@/components/custom-echart-pie';
+import customEchartBar from '@/components/custom-echart-bar';
+import { ElMessage } from 'element-plus';
+
+// 查询条件
+const formInline = reactive({
+  regionCode: '',
+  regionName: '',
+  gridId: '',
+  gridName: '',
+});
+const searchForm = ref(null);
+
+const chartData1 = ref([
+  { value: 1048, name: '蔬菜类' },
+  { value: 735, name: '水果类' },
+  { value: 484, name: '药材类' },
+]);
+const chartData2 = ref([
+  { value: 1048, name: '磷肥' },
+  { value: 735, name: '钾肥' },
+  { value: 484, name: '复合肥' },
+  { value: 563, name: '微量元素肥' },
+  { value: 734, name: '氮肥' },
+]);
+const chartData3 = ref([
+  { value: 1048, name: '杀虫剂' },
+  { value: 735, name: '植物增长调节剂' },
+  { value: 484, name: '除草剂' },
+  { value: 343, name: '杀菌剂' },
+]);
+// 此处数据要大的在下，展示出来是按照这个数据的倒序展示的
+const chartData4 = ref([
+  { value: 30.57, name: '凤梨' },
+  { value: 44.43, name: '铁皮石斛' },
+  { value: 52.87, name: '芒果' },
+  { value: 65.43, name: '榴莲' },
+  { value: 74.54, name: '香蕉' },
+  { value: 85.88, name: '苦瓜' },
+  { value: 93.669, name: '丝瓜' },
+  { value: 103.67, name: '小米椒' },
+  { value: 118.98, name: '圆茄' },
+  { value: 127.65, name: '黄皮甘蔗' },
+]);
+const chartData5 = ref([
+  { value: 33.57, name: '氮化镓' },
+  { value: 44.43, name: '磷酸二铵' },
+  { value: 58.87, name: '磷酸一铵' },
+  { value: 69.43, name: '硝酸钙' },
+  { value: 74.54, name: '硝酸钠' },
+  { value: 87.88, name: '硝酸铵' },
+  { value: 98.669, name: '碳酸氪铵' },
+  { value: 109.67, name: '硫酸钾' },
+  { value: 111.98, name: '磷酸二氢钾' },
+  { value: 120.65, name: '尿素' },
+]);
+const chartData6 = ref([
+  { value: 34.57, name: '三氟吡啶腋' },
+  { value: 47.43, name: '氯虫苯甲酰铵' },
+  { value: 52.87, name: '高效氨氟氰菊酯' },
+  { value: 69.43, name: '草甘辫铵盐' },
+  { value: 75.54, name: '草铵瞵硝磺草酮' },
+  { value: 83.88, name: '螨双醚' },
+  { value: 97.669, name: '氟吡菌酰腋' },
+  { value: 102.67, name: '芸苔素' },
+  { value: 119.98, name: '赤酶素' },
+  { value: 125.65, name: '氯吡苯腺' },
+]);
+const option = reactive({
+  tooltip: {
+    formatter: '{b} ({c} 吨)',
+  },
+});
+const option2 = reactive({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow', // 阴影指示器
+    },
+    formatter: '{b}: {c} 吨', // 提示框格式
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true, // 包含坐标轴标签
+  },
+  xAxis: {
+    type: 'value',
+    name: '吨',
+    axisLabel: {
+      formatter: '{value} 吨',
+    },
+  },
+  yAxis: {
+    type: 'category',
+    data: ['凤梨', '铁皮石斛', '芒果', '榴莲', '香蕉', '苦瓜', '丝瓜', '小米椒', '圆茄', '黄皮甘蔗'],
+    axisLabel: {
+      interval: 0,
+    },
+  },
+});
+const onSubmit = () => {
+  console.log(formInline);
+};
+
+onMounted(() => {
+  // onSubmit();
+});
+</script>
+<style lang="scss" scoped></style>
diff --git a/sub-government-affairs-service/src/views/output-products/output-statistics/index.vue b/sub-government-affairs-service/src/views/output-products/output-statistics/index.vue
index 20c9209..170c558 100644
--- a/sub-government-affairs-service/src/views/output-products/output-statistics/index.vue
+++ b/sub-government-affairs-service/src/views/output-products/output-statistics/index.vue
@@ -24,7 +24,8 @@ import { getAssetsFile } from '@/utils';
           <div class="search-bar-left">
             <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
               <el-form-item label="" style="margin-left: -15px">
-                <AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
+                <AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId"
+                  label="行政区域-网格" :width="500" />
               </el-form-item>
               <el-form-item label="">
                 <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
@@ -37,11 +38,13 @@ import { getAssetsFile } from '@/utils';
         <el-row :gutter="20">
           <el-col :span="12" class="statistics-echart-box">
             <p class="statistics-echart-title">产出品产量数据</p>
-            <customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"></customEchartPie>
+            <customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'">
+            </customEchartPie>
           </el-col>
           <el-col :span="12" class="statistics-echart-box">
             <p class="statistics-echart-title">产出品产量排行</p>
-            <customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'"></customEchartBar>
+            <customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'">
+            </customEchartBar>
           </el-col>
         </el-row>
       </div>
diff --git a/sub-government-affairs-service/src/views/planting-management/statistics/index.vue b/sub-government-affairs-service/src/views/planting-management/statistics/index.vue
index 8a9680a..923d349 100644
--- a/sub-government-affairs-service/src/views/planting-management/statistics/index.vue
+++ b/sub-government-affairs-service/src/views/planting-management/statistics/index.vue
@@ -1,8 +1,5 @@
-<template>
-  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`">
-    <!-- <h1>统计数据</h1>
-    <div class="content"></div> -->
-  </div>
+<!-- <template>
+  <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div>
 </template>
 
 <script setup>
@@ -16,4 +13,168 @@ import { getAssetsFile } from '@/utils';
   background-size: cover;
   background-repeat: no-repeat;
 }
-</style>
+</style> -->
+
+<template>
+  <div class="app-container">
+    <div class="container-custom">
+      <h2 class="custom-h2">使用监管概况</h2>
+      <div ref="searchBarRef" class="search-box">
+        <div class="search-bar">
+          <div class="search-bar-left">
+            <el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
+              <el-form-item label="" style="margin-left: -15px">
+                <AreaCascader :region-code="formInline.regionCode" :grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
+              </el-form-item>
+              <el-form-item label="">
+                <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <div class="statistics-cont">
+        <el-row :gutter="20">
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">产出品产量数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">肥料需求数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData2" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">农药需求数据</p>
+            <customEchartPie ref="pie1" :chart-data="chartData3" :option="option" :width="'100%'" :height="'90%'"> </customEchartPie>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">种植种苗需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData4" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">肥料需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData5" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+          <el-col :span="8" class="statistics-echart-box">
+            <p class="statistics-echart-title">农药 需求排名前十</p>
+            <customEchartBar ref="pie1" :chart-data="chartData6" :option="option2" :width="'100%'" :height="'100%'"> </customEchartBar>
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import customEchartPie from '@/components/custom-echart-pie';
+import customEchartBar from '@/components/custom-echart-bar';
+import { ElMessage } from 'element-plus';
+
+// 查询条件
+const formInline = reactive({
+  regionCode: '',
+  regionName: '',
+  gridId: '',
+  gridName: '',
+});
+const searchForm = ref(null);
+
+const chartData1 = ref([
+  { value: 1048, name: '蔬菜类' },
+  { value: 735, name: '水果类' },
+  { value: 484, name: '药材类' },
+]);
+const chartData2 = ref([
+  { value: 1048, name: '磷肥' },
+  { value: 735, name: '钾肥' },
+  { value: 484, name: '复合肥' },
+  { value: 563, name: '微量元素肥' },
+  { value: 734, name: '氮肥' },
+]);
+const chartData3 = ref([
+  { value: 1048, name: '杀虫剂' },
+  { value: 735, name: '植物增长调节剂' },
+  { value: 484, name: '除草剂' },
+  { value: 343, name: '杀菌剂' },
+]);
+// 此处数据要大的在下，展示出来是按照这个数据的倒序展示的
+const chartData4 = ref([
+  { value: 30.57, name: '凤梨' },
+  { value: 44.43, name: '铁皮石斛' },
+  { value: 52.87, name: '芒果' },
+  { value: 65.43, name: '榴莲' },
+  { value: 74.54, name: '香蕉' },
+  { value: 85.88, name: '苦瓜' },
+  { value: 93.669, name: '丝瓜' },
+  { value: 103.67, name: '小米椒' },
+  { value: 118.98, name: '圆茄' },
+  { value: 127.65, name: '黄皮甘蔗' },
+]);
+const chartData5 = ref([
+  { value: 33.57, name: '氮化镓' },
+  { value: 44.43, name: '磷酸二铵' },
+  { value: 58.87, name: '磷酸一铵' },
+  { value: 69.43, name: '硝酸钙' },
+  { value: 74.54, name: '硝酸钠' },
+  { value: 87.88, name: '硝酸铵' },
+  { value: 98.669, name: '碳酸氪铵' },
+  { value: 109.67, name: '硫酸钾' },
+  { value: 111.98, name: '磷酸二氢钾' },
+  { value: 120.65, name: '尿素' },
+]);
+const chartData6 = ref([
+  { value: 34.57, name: '三氟吡啶腋' },
+  { value: 47.43, name: '氯虫苯甲酰铵' },
+  { value: 52.87, name: '高效氨氟氰菊酯' },
+  { value: 69.43, name: '草甘辫铵盐' },
+  { value: 75.54, name: '草铵瞵硝磺草酮' },
+  { value: 83.88, name: '螨双醚' },
+  { value: 97.669, name: '氟吡菌酰腋' },
+  { value: 102.67, name: '芸苔素' },
+  { value: 119.98, name: '赤酶素' },
+  { value: 125.65, name: '氯吡苯腺' },
+]);
+const option = reactive({
+  tooltip: {
+    formatter: '{b} ({c} 吨)',
+  },
+});
+const option2 = reactive({
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow', // 阴影指示器
+    },
+    formatter: '{b}: {c} 吨', // 提示框格式
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '10%',
+    containLabel: true, // 包含坐标轴标签
+  },
+  xAxis: {
+    type: 'value',
+    name: '吨',
+    axisLabel: {
+      formatter: '{value} 吨',
+    },
+  },
+  yAxis: {
+    type: 'category',
+    data: ['凤梨', '铁皮石斛', '芒果', '榴莲', '香蕉', '苦瓜', '丝瓜', '小米椒', '圆茄', '黄皮甘蔗'],
+    axisLabel: {
+      interval: 0,
+    },
+  },
+});
+const onSubmit = () => {
+  console.log(formInline);
+};
+
+onMounted(() => {
+  // onSubmit();
+});
+</script>
+<style lang="scss" scoped></style>