Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

使用监管概况统计，投入品需求概况

Browse Source
This commit is contained in:
Xulinchuan 2025-07-10 17:34:23 +08:00
parent 6f546c8050
commit 7cf35a4a14
3 changed files with 341 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
sub-government-affairs-service/src/views/inputSuppliesManage/demandManage/demandOverview.vue
View File

@ -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>

9
sub-government-affairs-service/src/views/output-products/output-statistics/index.vue
View File

@ -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>

173
sub-government-affairs-service/src/views/planting-management/statistics/index.vue
View File

@ -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>