Compare commits
No commits in common. "575e5d32c6984bb9b30ec5e0d2860aa559270ae6" and "75fa73f0e2fe583b7bab03ac965bd5d8635eeae3" have entirely different histories.
575e5d32c6
...
75fa73f0e2
@ -1,9 +1,8 @@
|
|||||||
<!-- <template>
|
<template>
|
||||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div>
|
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/demand-overview.png')})`"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, watch, onMounted, computed } from 'vue';
|
|
||||||
import { getAssetsFile } from '@/utils';
|
import { getAssetsFile } from '@/utils';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -13,168 +12,4 @@ import { getAssetsFile } from '@/utils';
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
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>
|
|
||||||
|
|||||||
@ -24,8 +24,7 @@ import { getAssetsFile } from '@/utils';
|
|||||||
<div class="search-bar-left">
|
<div class="search-bar-left">
|
||||||
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
<el-form ref="searchForm" :inline="true" :model="formInline" class="demo-form-inline" :label-width="'auto'">
|
||||||
<el-form-item label="" style="margin-left: -15px">
|
<el-form-item label="" style="margin-left: -15px">
|
||||||
<AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId"
|
<AreaCascader v-model:region-code="formInline.regionCode" v-model:grid-id="formInline.gridId" label="行政区域-网格" :width="500" />
|
||||||
label="行政区域-网格" :width="500" />
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="">
|
<el-form-item label="">
|
||||||
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
<el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
|
||||||
@ -38,13 +37,11 @@ import { getAssetsFile } from '@/utils';
|
|||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="12" class="statistics-echart-box">
|
<el-col :span="12" class="statistics-echart-box">
|
||||||
<p class="statistics-echart-title">产出品产量数据</p>
|
<p class="statistics-echart-title">产出品产量数据</p>
|
||||||
<customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'">
|
<customEchartPie ref="pie1" :chart-data="chartData1" :option="option" :width="'100%'" :height="'90%'"></customEchartPie>
|
||||||
</customEchartPie>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="statistics-echart-box">
|
<el-col :span="12" class="statistics-echart-box">
|
||||||
<p class="statistics-echart-title">产出品产量排行</p>
|
<p class="statistics-echart-title">产出品产量排行</p>
|
||||||
<customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'">
|
<customEchartBar ref="pie1" :chart-data="chartData2" :option="option2" :width="'100%'" :height="'100%'"></customEchartBar>
|
||||||
</customEchartBar>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,5 +1,8 @@
|
|||||||
<!-- <template>
|
<template>
|
||||||
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div>
|
<div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`">
|
||||||
|
<!-- <h1>统计数据</h1>
|
||||||
|
<div class="content"></div> -->
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -13,168 +16,4 @@ import { getAssetsFile } from '@/utils';
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
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>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user