1

src/api/bigdata.js

@@ -21,6 +21,7 @@ export function getShfbtj() {
     method: 'post',
   })
 }
+
 //设备类型统计
 export function getShlxtj() {
   return request({
@@ -29,5 +30,19 @@ export function getShlxtj() {
   })
 }
 
+//综合信息
+export function getZhxx(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/selectBigDataZhxx',
+    data: param,
+    method: 'post',
+  })
+}
+
 
 

src/views/bigdata/chart-equipmentType.vue

@@ -1,126 +1,135 @@
 <!-- **************************************NO.3 企业*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="enterprise" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="enterprise" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	import {getShlxtj} from '@/api/bigdata'
-	export default {
-		name: 'enterprise',
-		data() {
-			return {
-				count: 0,
-        data_deviceCount:[],
-        data_deviceType:[]
-			}
-		},
-		mounted() {
+  import * as echarts from 'echarts';
+  import {getShlxtj} from '@/api/bigdata'
+
+  export default {
+    name: 'enterprise',
+    data() {
+      return {
+        count: 0,
+        data_deviceCount: [],
+        data_deviceType: [],
+        deviceTypeCount: []
+      }
+    },
+    mounted() {
       this.sblxtj()
-		},
+    },
 
-		methods:{
-		  sblxtj(){
-		    let that = this
-        getShlxtj().then(resp =>{
-          console.log("bbbbb",resp);
+    methods: {
+      color16() {//十六进制颜色随机
+        var r = Math.floor(Math.random() * 256)
+        var g = Math.floor(Math.random() * 256)
+        var b = Math.floor(Math.random() * 256)
+        //var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
+        var color = '#' + (Array(6).join(0) + (r.toString(16) + g.toString
+        (16) + b.toString(16))).slice(-6)
+        return color
+      },
+      sblxtj() {
+        let that = this
+        getShlxtj().then(resp => {
           that.data_deviceCount = resp.data.deviceCount
           that.data_deviceType = resp.data.deviceType
+          for (let i = 0; i < resp.data.deviceCount.length; i++) {
+            that.deviceTypeCount.push({
+              value: resp.data.deviceCount[i],
+              name: resp.data.deviceType[i],
+              itemStyle: {color: that.color16()}
+            })
+          }
           that.myEcharts()
         })
       },
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-			myEcharts() {
+      myEcharts() {
         let that = this
-				var chartDom = document.getElementById('enterprise');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				 var value = that.data_deviceCount;
-				var temp = 0;
-				option = {
+        var chartDom = document.getElementById('enterprise');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        var value = that.data_deviceCount;
+        var temp = 0;
+        option = {
 
-				    tooltip: {
-				        trigger: 'item',
-				        formatter: '{a} <br/>{b} : {c} ',
-				    },
+          tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ',
+          },
 
-				    legend: {
-				        // show: false,
-						textStyle:{
-							color:'#fffff',
-							fontSize:10
-						},
-						itemWidth:19,
-						top:'2%',
-				        data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
-				    },
-				    series: [
-				        {
-				            name: '企业分布',
-				            type: 'funnel',
-							top:'25%',
-				            left: '10%',
-				            width: '70%',
-							height:'68%',
+          legend: {
+            // show: false,
+            textStyle: {
+              color: '#fffff',
+              fontSize: 10
+            },
+            itemWidth: 19,
+            top: '2%',
+            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
+          },
+          series: [
+            {
+              name: '企业分布',
+              type: 'funnel',
+              top: '25%',
+              left: '10%',
+              width: '70%',
+              height: '68%',
 
-				            label: {
-				                show: true,
-				                color: '#07faa9',
-				                formatter: function () {
-				                    for (var i in value) {
-				                        if (i == temp) {
-				                            temp++;
-				                            return value[i] ;
-				                        }
-				                    }
-				                },
-				            },
-				            labelLine: {
-				                show: true,
-				            },
-				            itemStyle: {
-				                opacity: 1,
-				            },
-				            emphasis: {
-				                label: {
-				                    position: 'inside',
-				                    // formatter: '{b}Expected: {c}%',
-				                },
-				            },
-				            // data: [
-				            //     { value: 100, name: '双辽市', itemStyle: { color: '#4672F7' } },
-				            //     { value: 80, name: '梨树县', itemStyle: { color: '#4C9DFF' } },
-				            //     { value: 60, name: '伊通县', itemStyle: { color: '#36DC88' } },
-				            //     { value: 40, name: '铁东区', itemStyle: { color: '#FBC71B' } },
-				            //     { value: 20, name: '铁西区', itemStyle: { color: '#F9A646' } },
-				            // ],
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
+              label: {
+                show: true,
+                color: '#07faa9',
+                formatter: function () {
+                  for (var i in value) {
+                    if (i == temp) {
+                      temp++;
+                      return value[i];
+                    }
+                  }
+                },
+              },
+              labelLine: {
+                show: true,
+              },
+              itemStyle: {
+                opacity: 1,
+              },
+              emphasis: {
+                label: {
+                  position: 'inside',
+                  // formatter: '{b}Expected: {c}%',
+                },
+              },
+              data: that.deviceTypeCount,
+            },
+          ],
+        };
+        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;
-	}
-
-
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 
 
 </style>

src/views/bigdata/tabbar.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+  import {getZhxx} from '@/api/bigdata'
 	export default {
 		data() {
 			return {