农业前端

src/api/bigdata/bigdata.js

@@ -76,3 +76,24 @@ export function YangZhiBigData() {
     method: 'get',
   })
 }
+// 按照部门统计还田量--漏斗图
+export function getHuanTianDept() {
+  return request({
+    url: '/center-agriculture/data/getHuanTianDept',
+    method: 'get',
+  })
+}
+//按照类型统计还田面积--饼图
+export function getHuanTianType() {
+  return request({
+    url: '/center-agriculture/data/getHuanTianType',
+    method: 'get',
+  })
+}
+// 按照部门统计离田量--饼图
+export function getLItianDept() {
+  return request({
+    url: '/center-agriculture/data/getLItianDept',
+    method: 'get',
+  })
+}

src/views/bigdata/bigdata.vue

@@ -31,12 +31,12 @@
           </div>
           <chartCollection ref="chartCollection"></chartCollection>
 				</div>
-				<div class="b-con">
+        <div class="b-con mg-b-20">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>耕地面积分布统计</span><!--按照部门统计耕地面积--柱状图-->
+            <span>畜保站分布统计</span><!--按照部门分数畜保站个数--柱状图-->
           </div>
-          <chartFireControl ref="chartFireControl"></chartFireControl>
-				</div>
+          <chartFoam ref="chartFoam"></chartFoam>
+        </div>
 			</div>
 			<!-- 第二纵向-->
 			<div class="bigdata-list wid-li-2 m-l-15">
@@ -74,11 +74,11 @@
 					</div>
 					<chartForestFarm ref="chartForestFarm"></chartForestFarm>
 				</div>
-        <div class="b-con mg-b-20">
+        <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>畜保站分布统计</span><!--按照部门分数畜保站个数--柱状图-->
+            <span>养殖分布统计</span><!--分组养殖类型分布--饼图-->
           </div>
-          <chartFoam ref="chartFoam"></chartFoam>
+          <chartFarmtype ref="chartFarmtype"></chartFarmtype>
         </div>
 			</div>
 			<!-- 第四纵向-->
@@ -95,13 +95,28 @@
 					</div>
 					<chartFarm ref="chartFarm"></chartFarm>
 				</div>
-				<div class="b-con">
-					<div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-						<span>养殖分布统计</span><!--分组养殖类型分布--饼图-->
-					</div>
-					<chartFarmtype ref="chartFarmtype"></chartFarmtype>
-				</div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>耕地面积分布统计</span><!--按照部门统计耕地面积--柱状图-->
+          </div>
+          <chartFireControl ref="chartFireControl"></chartFireControl>
+        </div>
 			</div>
+      <!-- 第八纵向-->
+      <div class="bigdata-list wid-li-1 m-l-15">
+        <div class="b-con mg-b-20 tall">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>还田分布、类型统计</span>
+          </div>
+          <chartDetector ref="chartDetector"></chartDetector>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>离田口分布统计</span>
+          </div>
+          <chartWaterIntake ref="chartWaterIntake"></chartWaterIntake>
+        </div>
+      </div>
 		</div>
 
 	</div>
@@ -137,6 +152,7 @@
     ,eventcatalogueBigData,deptBigData
     ,leidaBigData,protectInfoBigData,xubaoBigData
     ,zhongZiBigData,huaFeiBigData,YangZhiBigData
+    ,getHuanTianDept,getHuanTianType,getLItianDept
   } from '@/api/bigdata/bigdata';
 
 	export default {
@@ -174,6 +190,9 @@
       this.zhongZiBigData();
       this.huaFeiBigData();
       this.YangZhiBigData();
+      this.getHuanTianDept();
+      this.getHuanTianType();
+      this.getLItianDept();
     },
     mounted() {
       setTimeout(() => {
@@ -312,6 +331,27 @@
           this.$refs.chartFarmtype.myEcharts(res.data);
         })
       },
+      getHuanTianDept() {
+        getHuanTianDept().then(res => {
+          this.$refs.chartDetector.myEcharts1(res.data);
+        })
+      },
+      getHuanTianType() {
+        getHuanTianType().then(res => {
+          const xdataName=[];
+          const contractnum=[];
+          for (let index in res.data) {
+            xdataName.push(res.data[index].name);
+            contractnum.push(res.data[index].value);
+          }
+          this.$refs.chartDetector.myEcharts2(xdataName,contractnum);
+        })
+      },
+      getLItianDept() {
+        getLItianDept().then(res => {
+          this.$refs.chartWaterIntake.myEcharts(res.data);
+        })
+      },
     },
 
 	}
@@ -322,7 +362,7 @@
 
 
 	.bigdata-con {
-		width: 100%;
+    width: -webkit-fit-content;
 		height: 100%;
 		background: #01020c;
 
@@ -519,7 +559,7 @@
 		}
 
 		.wid-li-1 {
-			width: 375px;
+      width: 396px;
 		}
 
 		.wid-li-2 {

src/views/bigdata/chart-detector.vue

@@ -18,14 +18,14 @@
 			}
 		},
 		mounted() {
-			this.myEcharts1();
-			this.myEcharts2();
+			// this.myEcharts1();
+			// this.myEcharts2();
 
 		},
 
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=gK9VdA5_F06NTrpr
-			myEcharts1() {
+			myEcharts1(seriesData) {
 				var chartDom = document.getElementById('detector1');
 				var myChart = echarts.init(chartDom);
 				var option;
@@ -34,7 +34,7 @@
 				        trigger: 'item',
 				    },
 				    color: ['#f7c778', '#d77169', '#c14f60', '#4d9564', '#215b85', ],
-				  
+
 				    series : [
 				        {
 				            name:'探测器分布',
@@ -51,13 +51,8 @@
 				            maxSize: '100%',
 				            sort : 'descending', // 'ascending', 'descending'
 				            gap :0,
-				            data:[
-				                {value:60, name:'双辽市'},
-				                {value:40, name:'梨树县'},
-				                {value:20, name:'伊通县'},
-				                {value:80, name:'铁东区'},
-				                {value:100, name:'铁西区'}
-				            ].sort(function (a, b) { return a.value - b.value}),
+				            data:seriesData.sort(function (a, b) {
+                      return a.value - b.value}),
 				            roseType: true,
 				            label: {
 				                normal: {
@@ -69,7 +64,7 @@
 				                            fontSize:'20px',
 											color:'#ffffff',
 				                        },
-				                      
+
 				                    }
 				                }
 				            },
@@ -82,26 +77,26 @@
 				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
 				                }
 				            }
-				            
+
 				        }
-				        
+
 				    ]
 				};
 				option && myChart.setOption(option);
 			},
 
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=APfCRAFKxpN_qWeq
-			myEcharts2() {
+			myEcharts2(xdataName,contractnum) {
 				var chartDom = document.getElementById('detector2');
 				var myChart = echarts.init(chartDom);
 				var option;
 				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
 				let dataArray = {
-				    xdataName: ['类型1', '类型1', '类型3', '类型3', '类型4', '类型5', '类型6'],
-				    contractnum: [9999, 8888, 7777, 6666, 5555, 4444, 3333]
+				    xdataName: xdataName,
+				    contractnum: contractnum
 				}
-				
-				
+
+
 				let color2 = [
 				    [{ offset: 0, color: '#ff8881' }, { offset: 0.15, color: '#ff564c' },{ offset: 1, color: 'rgba(255,86,76, 0.08)' }],
 				    [{ offset: 0, color: '#fff9e1' }, { offset: 0.15, color: '#ffe376' },{ offset: 1, color: 'rgba(255,209,26, 0.08)' }],
@@ -122,10 +117,10 @@
 				        `
 				    }
 				}
-				
+
 				// grid
 				let grid = { top: '20%', left: '10%', right: '10%', bottom: '20%' }
-				
+
 				// xAxis
 				let xAxis = {
 				    type: 'category',
@@ -138,12 +133,12 @@
 				    },
 				    axisTick: { show: false }, //坐标轴刻度
 				}
-				
+
 				// yAxis
 				let yAxis = {
 				     show: false
 				}
-				
+
 				// series
 				let series = [{
 				    name: '中高风险地区',
@@ -156,43 +151,43 @@
 				    data: dataArray.contractnum,
 				     itemStyle: {
 				        color: params => {
-				            return params.name === dataArray.xdataName[0] 
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[0]) 
-				            : params.name === dataArray.xdataName[1] 
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[1]) 
+				            return params.name === dataArray.xdataName[0]
+				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[0])
+				            : params.name === dataArray.xdataName[1]
+				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[1])
 				            : params.name === dataArray.xdataName[2]
-				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[2]) 
-				            : new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[3]) 
-				        } 
+				            ? new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[2])
+				            : new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[3])
+				        }
 				    },
 				    label: {
 				        show: true,
 				        position: 'top',
-				        formatter: params => { 
-				            return params.name === dataArray.xdataName[0] 
-				            ? `{a|${params.value}}` 
-				            : params.name === dataArray.xdataName[1] 
-				            ? `{b|${params.value}}` 
+				        formatter: params => {
+				            return params.name === dataArray.xdataName[0]
+				            ? `{a|${params.value}}`
+				            : params.name === dataArray.xdataName[1]
+				            ? `{b|${params.value}}`
 				            : params.name === dataArray.xdataName[2]
-				            ? `{c|${params.value}}` 
-				            : `{d|${params.value}}` 
+				            ? `{c|${params.value}}`
+				            : `{d|${params.value}}`
 				        },
 				        rich: {
 				            a: { color: '#ff564c' },
 				            b: { color: '#ffd11a' },
 				            c: { color: '#efff37' },
 				            d: { color: '#32ffee' },
-				
+
 				        },
 				        textStyle: { fontSize: 16 }
 				    },
 				}]
-				
+
 				// 渲染
 				option = { tooltip, grid, xAxis, yAxis, series }
 				option && myChart.setOption(option);
 			},
-			
+
 
 
 		},

src/views/bigdata/chart-waterintake.vue

@@ -16,13 +16,13 @@
 			}
 		},
 		mounted() {
-			this.myEcharts()
+			// this.myEcharts()
 
 		},
 
 		methods: {
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=AQ8Ea8ewtkr0NVzH
-			myEcharts() {
+			myEcharts(seriesData) {
 
 
 				var chartDom = document.getElementById('waterintake');
@@ -46,35 +46,14 @@
 				                 color: '#00a0e5',
 				                 formatter: '{b} {c}',
 				                 // 自定义富文本样式
-				               
+
 				             },
 				             labelLine: {
 				                 show: true,
 				                 // length: 6,
 				                 // length2: 15
 				             },
-				             data: [
-				                 {
-				                     name: '双辽市',
-				                     value: '40',
-				                 },
-				                 {
-				                     name: '梨树县',
-				                     value: '25',
-				                 },
-				                 {
-				                     name: '伊通县',
-				                     value: '18',
-				                 },
-				                 {
-				                     name: '铁东区',
-				                     value: '12',
-				                 },
-				                 {
-				                     name: '铁西区',
-				                     value: '5',
-				                 },
-				             ],
+				             data: seriesData,
 				         },
 				         {
 				             type: 'pie',