数字水利 水利工程资源统计

src/api/bigdata.js

@@ -34,6 +34,14 @@ export function getG1() {
   })
 }
 
+// 水利工程资源统计
+export function getG2() {
+  return request({
+    url: '/center-water/VisuForestCloudBigDataController/selectWaterProjectDeptCount',
+    method: 'post',
+  })
+}
+
 //林场分布统计
 export function getLcfbtj() {
   return request({

src/views/bigdata/bigdata.vue

@@ -139,9 +139,9 @@
         </div>
         <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>
-          <chartForestFarm></chartForestFarm>
+          <chartPitG2></chartPitG2>
         </div>
         <div class="b-con">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -175,6 +175,7 @@ import chartGridStaff from './chart-gridStaff.vue' //13 网格人员、、
 import chartWeatherStation from './chart-weatherStation.vue' //14 气象站、、
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
 import chartPitG1 from './chart-pit' //17 闸口资源统计、、
+import chartPitG2 from './chart-firecontrol' //17 水利工程资源统计、、
 
 import {getRlt} from '@/api/bigdata'
 
@@ -196,7 +197,8 @@ export default {
     chartGridStaff,
     chartWeatherStation,
     chartEquipmentDistribution,
-    chartPitG1
+    chartPitG1,
+    chartPitG2,
   },
   data() {
 

src/views/bigdata/chart-firecontrol.vue

@@ -0,0 +1,142 @@
+<!-- **************************************NO.18 消防*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG2" style="width: 100%; height:25vh; ">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {getG2} from '@/api/bigdata'
+	export default {
+		name: 'chartPitG2',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts1();
+      this.getG2()
+		},
+
+		methods: {
+      getG2() {
+        let that = this
+        getG2().then(res => {
+          this.source = res.data
+          console.log("水利工程资源统计", res.data)
+          that.myEcharts1()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=f46x0t0c7883X-D6
+			myEcharts1() {
+				var chartDom = document.getElementById('chartPitG2');
+				var myChart = echarts.init(chartDom);
+				var option;
+				 option = {
+				    tooltip: {
+				        trigger: 'axis',
+				        axisPointer: {
+				            type: 'shadow'
+				        }
+				    },
+				    grid:{
+				        top:'15%',
+				        left:'10%',
+				        right:'10%',
+				        buttom:'15%',
+				    },
+				     xAxis: {
+				        type: 'category',
+				        axisLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)',
+				            },
+				        },
+				        axisLabel: {
+				            margin: 10,
+				            color: '#e2e9ff',
+				            textStyle: {
+				                fontSize: 10
+				            },
+				        },
+				        axisTick:{
+				            show:false,
+				        },
+				         // data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区']
+				         data: this.source.name
+				    },
+				    yAxis: {
+				        nameTextStyle:{
+				            color:'#fff',
+				        },
+				        type: 'value',
+				         axisLine: {
+				             show:false,
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            },
+				        },
+				        axisLabel: {
+							 show:false,
+				            formatter: '{value}',
+				            color: '#e2e9ff',
+				        },
+				         splitLine: {
+				            lineStyle: {
+				                color: 'rgba(255,255,255,0.12)'
+				            }
+				        },
+				        axisTick:{
+				            show:true,
+
+				            lineStyle:{
+				                color:'#fff',
+				            },
+				        },
+				    },
+				    series: [{
+				        itemStyle:{
+				            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+				                    offset: 0,
+				                    color: 'rgba(0,244,255,1)'
+				                }, {
+				                    offset: 1,
+				                    color: 'rgba(0,77,167,1)'
+				                }], false),
+				                barBorderRadius: 10,
+				                opacity:0.8
+				        },
+				        barWidth:10,
+				        label:{
+				            show:true,
+				            position:['0','-20'],
+				            color:'#fff',
+				        },
+				        // data: [120, 200, 150, 80, 70],
+				        data: this.source.value,
+				        type: 'bar',
+				    }]
+				};
+				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;
+		flex-direction: column;
+	}
+</style>

src/views/bigdata/chart-pit.vue

@@ -10,7 +10,7 @@
 	import * as echarts from 'echarts';
   import {getG1} from '@/api/bigdata'
 	export default {
-		name: 'pit',
+		name: 'pitG1',
 		data() {
 			return {
         source: [],