数字水利 偷钓偷捕事件分析

src/api/bigdata.js

@@ -58,6 +58,22 @@ export function getG4() {
   })
 }
 
+// 偷钓偷捕事件分析
+export function get5() {
+  return request({
+    url: '/center-water/VisuForestCloudBigDataController/getEventDeptStatistics',
+    method: 'post',
+  })
+}
+
+// 水利事件分析
+export function get6() {
+  return request({
+    url: '/center-water/VisuForestCloudBigDataController/getEventDeptStatistics',
+    method: 'post',
+  })
+}
+
 //林场分布统计
 export function getLcfbtj() {
   return request({

src/components/vBottomMenu.vue

@@ -447,17 +447,17 @@
 						icon: 'iconfont sj-icon-clgj',
 						click: 'editableLayers'
 					},
-					{
-						name: '林班',
-						icon: 'iconfont sj-icon-lbzy',
-						click: 'forestban'
-					},
-
-					{
-						name: '林场',
-						icon: 'iconfont sj-icon-lczy',
-						click: 'forestchang'
-					},
+					// {
+					// 	name: '林班',
+					// 	icon: 'iconfont sj-icon-lbzy',
+					// 	click: 'forestban'
+					// },
+          //
+					// {
+					// 	name: '林场',
+					// 	icon: 'iconfont sj-icon-lczy',
+					// 	click: 'forestchang'
+					// },
 					{
 						name: '电视墙',
 						icon: 'el-icon-s-grid',

src/views/bigdata/bigdata.vue

@@ -93,11 +93,23 @@
           </div>
           <chartGridDistribution></chartGridDistribution>
         </div>
-        <div class="b-con">
+        <!--<div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
             <span>天气趋势</span>
           </div>
           <chartWeatherTrends></chartWeatherTrends>
+        </div>-->
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>偷钓偷捕事件分析</span>
+          </div>
+          <chartPitG5></chartPitG5>
+        </div>
+        <div class="b-con mg-b-20 b-49">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>水利事件分析</span>
+          </div>
+          <chartPitG6></chartPitG6>
         </div>
       </div>
       <!-- 第五纵向-->
@@ -185,6 +197,8 @@ import chartPitG1 from './chart-pit' //17 闸口资源统计、、
 import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
 import chartPitG3 from './chart-hydrant' //19 河段资源统计、、
 import chartPitG4 from './chart-waterintake' //20 河流资源统计、、
+import chartPitG5 from './chart-farmtype' //21 偷钓偷捕事件分析、、
+import chartPitG6 from './chart-waterTotal' //22 水利事件分析、、
 
 import {getRlt} from '@/api/bigdata'
 
@@ -210,6 +224,8 @@ export default {
     chartPitG2,
     chartPitG3,
     chartPitG4,
+    chartPitG5,
+    chartPitG6,
   },
   data() {
 

src/views/bigdata/chart-farmtype.vue

@@ -0,0 +1,118 @@
+<!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG5" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {get5} from '@/api/bigdata.js'
+	export default {
+		name: 'chartPitG5',
+		data() {
+			return {
+        data: [],
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+      this.getPitG5();
+		},
+
+		methods: {
+      getPitG5(){
+        let that = this
+        get5().then(resp =>{
+          console.log("偷钓偷捕事件分析", resp.data)
+          that.source = resp.data
+          that.data = []
+          for (let i = 0; i < resp.data.length; i++) {
+            that.data.push(resp.data[i].name)
+          }
+          // that.data_name = resp.data.name
+          // that.data_value = resp.data.value
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+
+			myEcharts() {
+        let that = this
+
+				var chartDom = document.getElementById('chartPitG5');
+				var myChart = echarts.init(chartDom);
+				var color = ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'];
+				var option;
+				option = {
+				    color:color,
+				    tooltip : {
+				        formatter: "{b}：{c}%"
+				    },
+
+
+				    legend: {
+						textStyle:{
+							color:'#fffff',
+							fontSize:10
+						},
+						itemWidth:15,
+				        orient: 'vertical',
+				        left: '10%',
+						top:'5%',
+				        data: that.data
+				        // data: ['一般修剪', '浇水', '除草', '绿篱修剪', '病虫害防治', '施肥', '伐除', '其他']
+				    },
+				    series: [
+				        {
+				            name: '',
+				            type: 'pie',
+				            radius: '80%',
+				            center: ['65%', '48%'],
+				            data: that.source,
+                  // data:[
+				          //       {value:40, name:'一般修剪'},
+				          //       {value:30, name:'浇水'},
+				          //       {value:25, name:'除草'},
+				          //       {value:18, name:'绿篱修剪'},
+				          //       {value:10, name:'病虫害防治'},
+				          //       {value:5, name:'施肥'},
+				          //       {value:4, name:'伐除'},
+				          //       {value:3, name:'其他'}
+				          //   ],
+				            emphasis: {
+				                itemStyle: {
+				                    shadowBlur: 10,
+				                    shadowOffsetX: 0,
+				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+				                }
+				            },
+				            label: {
+				                normal: {
+				                    show: false,
+				                }
+				            }
+				        }
+				    ]
+				};
+				option && myChart.setOption(option);
+			},
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>

src/views/bigdata/chart-waterTotal.vue

@@ -0,0 +1,173 @@
+<!-- **************************************NO.14 泡沫液*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG6" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {get6} from '@/api/bigdata.js'
+
+	export default {
+		name: 'chartPitG6',
+		data() {
+			return {
+				count: 0,
+        source: [],
+			}
+		},
+		mounted() {
+		  this.getPitG6();
+		},
+
+		methods: {
+		  getPitG6(){
+        let that = this
+        get6().then(resp =>{
+          console.log("水利事件分析", resp.data)
+          that.source = resp.data
+          // that.data_name = resp.data.name
+          // that.data_value = resp.data.value
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
+      myEcharts() {
+        var chartDom = document.getElementById('chartPitG6');
+        var myChart = echarts.init(chartDom);
+        var option;
+        option = {
+          color: ['#3D91F7', '#61BE67'],
+          tooltip: {},
+          legend: {
+            show: true,
+            icon: "circle",
+            bottom: 30,
+            center: 0,
+            itemWidth: 14,
+            itemHeight: 14,
+            itemGap: 21,
+            orient: "horizontal",
+            data: ['a', 'b'],
+            textStyle: {
+              color: '#8C8C8C'
+            },
+          },
+
+          radar: {
+            // shape: 'circle',
+            radius: '80%',
+            triggerEvent: true,
+            name: {
+              textStyle: {
+                color: '#fff',
+                fontSize: '10',
+                borderRadius: 3,
+                padding: [3, 5]
+              }
+            },
+            nameGap: '2',
+            indicator: [{ //[4300, 10000, 28000, 35000, 50000, 19000, 21000]
+              name: '型号1',
+              max: 6500
+            },
+              {
+                name: '型号2',
+                max: 16000
+              },
+              {
+                name: '型号3',
+                max: 30000
+              },
+              {
+                name: '型号4',
+                max: 38000
+              },
+              {
+                name: '型号5',
+                max: 52000
+              },
+              {
+                name: '型号6',
+                max: 25000
+              },
+              {
+                name: '型号7',
+                max: 25000
+              }
+            ],
+            splitArea: {
+              areaStyle: {
+                color: [
+                  'rgba(222,134,85, 0.1)', 'rgba(222,134,85, 0.2)',
+                  'rgba(222,134,85, 0.4)', 'rgba(222,134,85, 0.6)',
+                  'rgba(222,134,85, 0.8)', 'rgba(222,134,85, 1)'
+                ].reverse()
+              }
+            },
+            // axisLabel:{//展示刻度
+            //     show: true
+            // },
+            axisLine: { //指向外圈文本的分隔线样式
+              lineStyle: {
+                color: 'rgba(0,0,0,0)'
+              }
+            },
+            splitLine: {
+              lineStyle: {
+                width: 2,
+                color: [
+                  'rgba(224,134,82, 0.1)', 'rgba(224,134,82, 0.2)',
+                  'rgba(224,134,82, 0.4)', 'rgba(224,134,82, 0.6)',
+                  'rgba(224,134,82, 0.8)', 'rgba(224,134,82, 1)'
+                ].reverse()
+              }
+            },
+
+          },
+
+          series: [{
+            name: '型号统计',
+            type: 'radar',
+            //areaStyle: {normal: {}},
+            areaStyle: {
+              normal: {
+                color: 'rgba(252,211,3, 0.3)'
+              }
+            },
+            symbolSize: 0,
+            lineStyle: {
+              normal: {
+                color: 'rgba(252,211,3, 1)',
+                width: 1
+              }
+            },
+            data: [{
+              value: [4300, 10000, 28000, 35000, 50000, 19000, 21000],
+              name: '型号统计',
+
+
+
+            }]
+          }]
+        };
+        option && myChart.setOption(option);
+      },
+
+		},
+
+
+	}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.chart-container {
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-bottom: 10px;
+		display: flex;
+	}
+</style>