数字消防 统计分析

src/api/bigdata.js

@@ -174,4 +174,26 @@ export function getRlt(param) {
   })
 }
 
+// 联动车辆统计
+export function getG1() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectWaterGateDeptCount',
+    method: 'post',
+  })
+}
 
+// 消防事件统计
+export function getG2() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectWaterProjectDeptCount',
+    method: 'post',
+  })
+}
+
+// 其他力量统计
+export function getG3() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectReachWaterDeptCount',
+    method: 'post',
+  })
+}

src/views/bigdata/bigdata.vue

@@ -129,8 +129,28 @@
           <chartEquipmentDistribution></chartEquipmentDistribution>
         </div>
       </div>
+      <!-- 第七纵向-->
+      <div class="bigdata-list wid-li-1 m-l-15">
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>联动车辆统计</span>
+          </div>
+          <chartPitG1></chartPitG1>
+        </div>
+        <div class="b-con mg-b-20">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>消防事件统计</span>
+          </div>
+          <chartPitG2></chartPitG2>
+        </div>
+        <div class="b-con">
+          <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
+            <span>其他力量统计</span>
+          </div>
+          <chartPitG3></chartPitG3>
+        </div>
+      </div>
     </div>
-
   </div>
 </template>
 
@@ -153,6 +173,9 @@ import chartFireHydrant from './chart-fireHydrant.vue' //12 消火栓、、
 import chartFullTimeStation from './chart-fullTimeStation.vue' //13 专职站、、
 import chartFoamLiquid from './chart-foamLiquid.vue' //14 泡沫液、、
 import chartEquipmentDistribution from './chart-equipmentDistribution' //16 设备分布、、
+import chartPitG1 from './chart-pit' //17 闸口资源统计、、
+import chartPitG2 from './chart-firecontrol' //18 水利工程资源统计、、
+import chartPitG3 from './chart-hydrant' //19 河段资源统计、、
 
 import { getRlt } from '@/api/bigdata'
 import {
@@ -176,7 +199,10 @@ export default {
     chartFireHydrant,
     chartFullTimeStation,
     chartFoamLiquid,
-    chartEquipmentDistribution
+    chartEquipmentDistribution,
+    chartPitG1,
+    chartPitG2,
+    chartPitG3,
   },
   data() {
     return {

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-hydrant.vue

@@ -0,0 +1,222 @@
+<!-- **************************************NO.13 消火栓*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="chartPitG3" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {getG3} from '@/api/bigdata'
+	export default {
+		name: 'chartPitG3',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+			this.getG3()
+
+		},
+
+		methods: {
+      getG3() {
+        let that = this
+        getG3().then(res => {
+          this.source = res.data
+          console.log("其他力量统计", res.data)
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
+			myEcharts() {
+
+
+				var chartDom = document.getElementById('chartPitG3');
+				var myChart = echarts.init(chartDom);
+				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+				var option;
+        var trafficWay = this.source;
+				var data = [];
+				var color = ['#F6C558', '#25EFBD', '#21bad6', '#3283F5', '#E44660'];
+				for (var i = 0; i < trafficWay.length; i++) {
+				    data.push(
+				        {
+				            value: trafficWay[i].value,
+				            name: trafficWay[i].name,
+				            itemStyle: {
+				                normal: {
+				                    borderWidth: 8,
+				                    shadowBlur: 0,
+				                    borderColor: color[i],
+				                    shadowColor: color[i],
+				                },
+				            },
+				        },
+				        {
+				            value: 3,
+				            name: '',
+				            labelLine:{
+				              show:false
+				            },
+				            itemStyle: {
+				                normal: {
+				                    label: {
+				                        show: false,
+				                    },
+				                    labelLine: {
+				                        show: false,
+				                    },
+				                    color: 'rgba(0, 0, 0, 0)',
+				                    borderColor: 'rgba(0, 0, 0, 0)',
+				                    borderWidth: 0,
+				                },
+				            },
+				        }
+				    );
+				}
+				var seriesOption = [
+				    {
+				        name: '',
+				        type: 'pie',
+				        clockWise:true,
+				        radius: [70, 70],
+				        hoverAnimation: true,
+				        itemStyle: {
+				            normal: {
+				                label: {
+				                    show: true
+				                },
+				            },
+				        },
+				        data: data,
+				        labelLine: {
+				            normal: {
+				                length: 20,
+				                length2: 20,
+				                lineStyle: {
+				                    type: 'solid',
+				                    color: '#31FFFF',
+				                },
+				            },
+				        },
+				        label: {
+				            normal: {
+				                formatter: function (params) {
+				                    var result = '';
+				                    if (params.name) {
+				                        result +=  params.name+'{blue|' + params.value  + '}';
+				                    }
+				                    return result;
+				                },
+				                borderWidth: 0,
+				                borderRadius: 4,
+				                padding: [60, 0],
+				                height: 10,
+				                fontSize: 10,
+				                align: 'center',
+				                color: '#DEDEDE',
+				                rich: {
+				                    blue: {
+				                        fontSize: 10,
+				                        lineHeight: 5,
+				                        color: '#31FFFF',
+				                        padding: [0, 5],
+				                    },
+				                },
+				            },
+				        },
+				    },
+				    {
+				        type: 'pie',
+				        radius: [60, 60],
+				        hoverAnimation: false,
+				        clockWise: false,
+				        itemStyle: {
+				            normal: {
+				                borderColor: 'rgba(2,178,247,0.2)',
+				                borderWidth: 10,
+				            },
+				        },
+				        label: {
+				            show: false,
+				        },
+				        data: [200],
+				    },
+				    {
+				        type: 'pie',
+				        radius: [0, '20%'],
+				        zlevel: 3,
+				        silent: true,
+				        label: {
+				            normal: {
+				                show: false,
+				            },
+				        },
+				        labelLine: {
+				            normal: {
+				                show: false,
+				            },
+				        },
+				        data: [
+				            {
+				                value: 6,
+				                name: '总数',
+				                itemStyle: {
+				                    normal: {
+				                        color: {
+				                            x: 0,
+				                            y: 0,
+				                            x2: 1,
+				                            y2: 0,
+				                            type: 'linear',
+				                            global: false,
+				                            colorStops: [
+				                                {
+				                                    offset: 0,
+				                                    color: 'rgba(2,178,247,0.2)',
+				                                },
+				                                {
+				                                    offset: 1,
+				                                    color: 'rgba(2,178,247,0.2)',
+				                                },
+				                            ],
+				                        },
+				                    },
+				                },
+				            },
+				        ],
+				    },
+				];
+				option = {
+				    color: color,
+				    tooltip: {
+				        show: false,
+				    },
+				    toolbox: {
+				        show: false,
+				    },
+				    series: seriesOption,
+				};
+				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-pit.vue

@@ -0,0 +1,92 @@
+<!-- **************************************NO.6 矿坑*************************************** -->
+<template>
+	<div class="chart-container">
+		<div id="pitG1" style="width: 100%; height:23vh;">
+		</div>
+	</div>
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+  import {getG1} from '@/api/bigdata'
+	export default {
+		name: 'pitG1',
+		data() {
+			return {
+        source: [],
+				count: 0
+			}
+		},
+		mounted() {
+			// this.myEcharts()
+			this.getG1()
+
+		},
+
+		methods: {
+      getG1() {
+        let that = this
+        getG1().then(res => {
+          this.source = res.data
+          console.log("联动车辆统计", res.data)
+          that.myEcharts()
+        })
+      },
+			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+
+			myEcharts() {
+
+
+				var chartDom = document.getElementById('pitG1');
+				var myChart = echarts.init(chartDom);
+				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
+				var option;
+				option = {
+
+				    color:color,
+				    tooltip : {
+				        trigger: 'item',
+				        formatter: "{b}: {c}"
+				    },
+				    toolbox: {
+				        show : true,
+
+				    },
+
+				    series : [
+				        {
+				            name:'业务警种',
+				            type:'pie',
+				            roseType: true,
+				            radius : ['50%', '70%'],
+				            label: {
+				              show: true,
+				              formatter: "{b} {c}",
+							  textStyle: {
+							      fontSize: 10 ,
+
+							  }
+
+				            },
+				            data:this.source
+				        }
+				    ]
+				};
+				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>