Compare commits
	
		
			No commits in common. "575e5d32c6984bb9b30ec5e0d2860aa559270ae6" and "75fa73f0e2fe583b7bab03ac965bd5d8635eeae3" have entirely different histories.
		
	
	
		
			575e5d32c6
			...
			75fa73f0e2
		
	
		
| @ -1,9 +1,8 @@ | ||||
| <!-- <template> | ||||
|   <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div> | ||||
| <template> | ||||
|   <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/demand-overview.png')})`"></div> | ||||
| </template> | ||||
| 
 | ||||
| <script setup> | ||||
| import { ref, watch, onMounted, computed } from 'vue'; | ||||
| import { getAssetsFile } from '@/utils'; | ||||
| </script> | ||||
| 
 | ||||
| @ -13,168 +12,4 @@ import { getAssetsFile } from '@/utils'; | ||||
|   background-size: cover; | ||||
|   background-repeat: no-repeat; | ||||
| } | ||||
| </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> | ||||
| </style> | ||||
|  | ||||
| @ -24,8 +24,7 @@ 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> | ||||
| @ -38,13 +37,11 @@ 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> | ||||
|  | ||||
| @ -1,5 +1,8 @@ | ||||
| <!-- <template> | ||||
|   <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/output/output.png')})`"></div> | ||||
| <template> | ||||
|   <div class="custom-page" :style="`background-image: url(${getAssetsFile('images/input/inputman.png')})`"> | ||||
|     <!-- <h1>统计数据</h1> | ||||
|     <div class="content"></div> --> | ||||
|   </div> | ||||
| </template> | ||||
| 
 | ||||
| <script setup> | ||||
| @ -13,168 +16,4 @@ import { getAssetsFile } from '@/utils'; | ||||
|   background-size: cover; | ||||
|   background-repeat: no-repeat; | ||||
| } | ||||
| </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> | ||||
| </style> | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user