1

src/api/bigdata.js

@@ -5,12 +5,11 @@ export function getEventSourceAndTypeStatistics(param) {
   return request({
     url: '/center-fire/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
     method: 'post',
-    data:param
+    data: param
   })
 }
 
 
-
 // 设备类型统计
 export function getCameaCount() {
   return request({
@@ -18,6 +17,7 @@ export function getCameaCount() {
     method: 'post',
   })
 }
+
 // 设备分布
 export function getSbfb() {
   return request({
@@ -26,5 +26,139 @@ export function getSbfb() {
   })
 }
 
+//林场分布统计
+export function getLcfbtj() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFarmDeptCount',
+    method: 'post'
+  })
+}
+
+//起火原因统计
+export function getQhyytj(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectEventByYearGroupByFireSource',
+    data: param,
+    method: 'post'
+  })
+}
+
+//重点区域
+export function getZdqy() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataImportareaDeptCount',
+    method: 'post'
+  })
+}
+
+//设备上报事件数量
+export function getSbsbsjsl(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getAIEventNum',
+    data: param,
+    method: 'post'
+  })
+}
+
+//珍惜古树
+export function getZxgs() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataTreesDeptCount',
+    method: 'post'
+  })
+}
+
+//事件趋势
+export function getSjqs(param) {
+  //暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/getEventTrend',
+    data: param,
+    method: 'post'
+  })
+}
+
+//网格分布
+export function getWgfb() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFridDeptCount',
+    method: 'post'
+  })
+}
+
+
+//天气趋势
+export function getTqqs(param) {
+  if (param == null) {
+    let myDate = new Date();
+    let month = myDate.getMonth() + 1;
+    if (month < 10) {
+      month = "0" + month
+    }
+    param = {day: myDate.getFullYear() + "-" + month}
+  }
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataByYearMonthFegin',
+    data: param,
+    method: 'post'
+  })
+}
+
+//网格人员
+export function getWgry() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFridLZDeptCount',
+    method: 'post'
+  })
+}
+
+//防火队
+export function getFhd() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataFireTeamDeptCount',
+    method: 'post'
+  })
+}
+
+//气象站
+export function getQxz() {
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataWeatherStationDeptCount',
+    method: 'post'
+  })
+}
+
+//综合信息
+export function getZhxx(param) {
+//暂时传当年，以后再说
+  if (param == null) {
+    let myDate = new Date();
+    param = {day: myDate.getFullYear()}
+  }
+  return request({
+    url: '/center-fire/VisuForestCloudBigDataController/selectBigDataZhxx',
+    data: param,
+    method: 'post'
+  })
+
+}
+
+
+
+
 
 

src/views/bigdata/chart-ancientTree.vue

@@ -1,174 +1,179 @@
 <!-- **************************************NO.8 养殖场分布*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="farm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="farm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getZxgs} from '@/api/bigdata.js'
 
-		},
+  export default {
+    name: 'farm',
+    data() {
+      return {
+        count: 0,
+        data_num:[],
+        data_name:[]
+      }
+    },
+    mounted() {
+      this.zxgs()
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
+    },
 
-			myEcharts() {
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=KH0XpN7nyKZZae11
+      zxgs() {
+        let that = this
+        getZxgs().then(resp => {
+          that.data_num = resp.data.value
+          that.data_name = resp.data.name
+          that.myEcharts();
+        })
+      },
+      myEcharts() {
 
+        let that = this
+        var chartDom = document.getElementById('farm');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
+        var data = this.data_num;
+        option = {
+          color: ["#41FF80"],
+          title: {
+            show: false
+          },
+          grid: {
+            top: '15%',
+            right: '12%',
+            bottom: '22%',
+            left: '15%'
+          },
+          tooltip: {
+            show: false
+          },
+          xAxis: {
+            data: that.data_name,
+            axisLine: {
+              show: true, //隐藏X轴轴线
+              lineStyle: {
+                color: '#2D455A'
+              }
+            },
+            axisTick: {
+              show: false //隐藏X轴刻度
+            },
+            axisLabel: {
+              show: true,
+              margin: 14,
+              fontSize: 10,
+              textStyle: {
+                color: '#ffffff' //X轴文字颜色
+              }
+            }
+          },
+          yAxis: [{
+            type: 'value',
+            gridIndex: 0,
+            interval: 25,
+            // splitNumber: 4,
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'solid',
+                color: '#325A9F',
+                width: 1
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              show: true,
+              formatter: '{value}',
+              fontSize: 10,
+              textStyle: {
+                color: '#6ad8ff' //X轴文字颜色
+              }
+            }
+          }],
+          series: [{
+            name: '养殖场分布',
+            type: 'bar',
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true, //开启显示
+                  position: 'top', //在上方显示
+                  textStyle: { //数值样式
+                    color: '#fff',
+                  }
+                },
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                  offset: 0,
+                  color: '#fffa55'
+                },
+                  {
+                    offset: 0.5,
+                    color: '#55ff18'
+                  },
+                  {
+                    offset: 1,
+                    color: '#29eeff'
+                  }
+                ])
+              }
+            },
+            data: data,
+            z: 10,
+            zlevel: 0
+          },
+            {
+              // 分隔
+              type: 'pictorialBar',
+              itemStyle: {
+                normal: {
+                  color: '#0F375F'
+                }
+              },
+              symbolRepeat: 'fixed',
+              symbolMargin: 2,
+              symbol: 'rect',
+              symbolClip: true,
+              symbolSize: [8, 2],
+              symbolPosition: 'start',
+              symbolOffset: [0, -1],
+              // symbolBoundingData: this.total,
+              data: data,
+              width: "100%",
+              z: 0,
+              zlevel: 1
+            }
+          ]
+        };
+        option && myChart.setOption(option);
+      },
 
-				var chartDom = document.getElementById('farm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
-				var option;
-				var data =  [20, 80, 100, 40, 34];
-				option = {
-				    color: ["#41FF80"],
-				    title: {
-				        show: false
-				    },
-				    grid: {
-				        top: '15%',
-				        right: '12%',
-				        bottom: '22%',
-				        left: '15%'
-				    },
-				    tooltip: {
-				        show: false
-				    },
-				    xAxis: {
-				        data: [
-				            "双辽市",
-				            "梨树县",
-				            "伊通县",
-				            "铁东区",
-				            "铁西区",
-				        ],
-				        axisLine: {
-				            show: true, //隐藏X轴轴线
-				            lineStyle: {
-				                color: '#2D455A'
-				            }
-				        },
-				        axisTick: {
-				            show: false //隐藏X轴刻度
-				        },
-				        axisLabel: {
-				            show: true,
-				            margin: 14,
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#ffffff' //X轴文字颜色
-				            }
-				        }
-				    },
-				    yAxis: [{
-				        type: 'value',
-				        gridIndex: 0,
-				        interval: 25,
-				        // splitNumber: 4,
-				        splitLine: {
-				            show: true,
-				            lineStyle: {
-				                type: 'solid',
-				                color: '#325A9F',
-				                width: 1
-				            }
-				        },
-				        axisTick: {
-				            show: false
-				        },
-				        axisLine: {
-				            show: false
-				        },
-				        axisLabel: {
-				            show: true,
-				            formatter: '{value}',
-				            fontSize: 10,
-				            textStyle: {
-				                color: '#6ad8ff' //X轴文字颜色
-				            }
-				        }
-				    }],
-				    series: [{
-				            name: '养殖场分布',
-				            type: 'bar',
-				            barWidth: 8,
-				            itemStyle: {
-				                normal: {
-				                    label: {
-				                        show: true, //开启显示
-				                        position: 'top', //在上方显示
-				                        textStyle: { //数值样式
-				                            color: '#fff',
-				                        }
-				                    },
-				                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				                            offset: 0,
-				                            color: '#fffa55'
-				                        },
-				                        {
-				                            offset: 0.5,
-				                            color: '#55ff18'
-				                        },
-				                        {
-				                            offset: 1,
-				                            color: '#29eeff'
-				                        }
-				                    ])
-				                }
-				            },
-				            data:data,
-				            z: 10,
-				            zlevel: 0
-				        },
-				        {
-				            // 分隔
-				            type: 'pictorialBar',
-				            itemStyle: {
-				                normal: {
-				                    color: '#0F375F'
-				                }
-				            },
-				            symbolRepeat: 'fixed',
-				            symbolMargin: 2,
-				            symbol: 'rect',
-				            symbolClip: true,
-				            symbolSize: [8, 2],
-				            symbolPosition: 'start',
-				            symbolOffset: [0, -1],
-				            // symbolBoundingData: this.total,
-				            data:data,
-				            width: "100%",
-				            z: 0,
-				            zlevel: 1
-				        }
-				    ]
-				};
-				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/chart-deviceReportingEvents.vue

@@ -1,149 +1,160 @@
 <!-- **************************************NO.5 林场*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="forestfarm" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="forestfarm" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'forestfarm',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-
-		},
-
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
-
-			myEcharts() {
-
-
-				var chartDom = document.getElementById('forestfarm');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				option = {
-				        tooltip: {
-				          trigger: 'axis',
-				          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-				            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-				          }
-				        },
-				        grid: {
-				          left: '10%',
-				          right: '10%',
-				          bottom: '10%',
-				          top:'16%',
-				          containLabel: true
-				        },
-				        
-				        xAxis: {
-				          type: 'category',
-				          data: ['双辽市','梨树县','伊通县','铁东区','铁西区'],
-				          axisLine: {
-				            lineStyle: {
-				              color: '#1cc6a1'
-				
-				            }
-				          },
-				          axisLabel: {
-				            // interval: 0,
-				            // rotate: 40,
-				            textStyle: {
-				              fontFamily: 'Microsoft YaHei'
-				            }
-				          },
-				        },
-				
-				        yAxis: {
-				          type: 'value',
-				          max:'500',
-				          axisLine: {
-				            show: false,
-				            lineStyle: {
-				              color: '#19b1e8'
-				            }
-				          },
-				          splitLine: {
-				            show: true,
-				            lineStyle: {
-				              color: 'rgba(255,255,255,0.1)'
-				            }
-				          },
-				          axisLabel: {}
-				        },
-				        
-				        series: [{
-				          type: 'bar',
-				          barWidth: '15%',
-				          itemStyle: {
-				            normal: {
-				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-				                    offset: 0,
-				                    color: '#fccb05'
-				                }, {
-				                    offset: 1,
-				                    color: '#1689f5'
-				                }]),
-				                barBorderRadius: 12,
-				            },
-				          },
-				          data: [400, 400, 300, 300, 300]
-				        }]
-				      };
-				
-				      var app = {
-				        currentIndex: -1,
-				      };
-				      setInterval(function () {
-				        var dataLen = option.series[0].data.length;
-				
-				        // 取消之前高亮的图形
-				        myChart.dispatchAction({
-				          type: 'downplay',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				        app.currentIndex = (app.currentIndex + 1) % dataLen;
-				        //console.log(app.currentIndex);
-				        // 高亮当前图形
-				        myChart.dispatchAction({
-				          type: 'highlight',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex,
-				        });
-				        // 显示 tooltip
-				        myChart.dispatchAction({
-				          type: 'showTip',
-				          seriesIndex: 0,
-				          dataIndex: app.currentIndex
-				        });
-				
-				
-				      }, 1000);
-				option && myChart.setOption(option);
-			},
-
-		},
-
-
-	}
+  import * as echarts from 'echarts';
+  import {getSbsbsjsl} from '@/api/bigdata.js'
+
+  export default {
+    name: 'forestfarm',
+    data() {
+      return {
+        count: 0,
+        data_num:[],
+        data_reportor:[]
+      }
+    },
+    mounted() {
+      this.sjsbsbsl()
+
+    },
+
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=2nuQSYycLWN0P_EG
+      sjsbsbsl() {
+        let that = this
+        getSbsbsjsl().then(resp => {
+          that.data_num = resp.data.num;
+          that.data_reportor = resp.data.reportor
+          that.myEcharts()
+        })
+      },
+      myEcharts() {
+
+        let that = this
+        var chartDom = document.getElementById('forestfarm');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        option = {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: { // 坐标轴指示器，坐标轴触发有效
+              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+            }
+          },
+          grid: {
+            left: '10%',
+            right: '10%',
+            bottom: '10%',
+            top: '16%',
+            containLabel: true
+          },
+
+          xAxis: {
+            type: 'category',
+            data:that.data_reportor,
+            axisLine: {
+              lineStyle: {
+                color: '#1cc6a1'
+
+              }
+            },
+            axisLabel: {
+              // interval: 0,
+              // rotate: 40,
+              textStyle: {
+                fontFamily: 'Microsoft YaHei'
+              }
+            },
+          },
+
+          yAxis: {
+            type: 'value',
+            max: '500',
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: '#19b1e8'
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: 'rgba(255,255,255,0.1)'
+              }
+            },
+            axisLabel: {}
+          },
+
+          series: [{
+            type: 'bar',
+            barWidth: '15%',
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: '#fccb05'
+                }, {
+                  offset: 1,
+                  color: '#1689f5'
+                }]),
+                barBorderRadius: 12,
+              },
+            },
+            data: that.data_num
+          }]
+        };
+
+        var app = {
+          currentIndex: -1,
+        };
+        setInterval(function () {
+          var dataLen = option.series[0].data.length;
+
+          // 取消之前高亮的图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+          app.currentIndex = (app.currentIndex + 1) % dataLen;
+          //console.log(app.currentIndex);
+          // 高亮当前图形
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex,
+          });
+          // 显示 tooltip
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: app.currentIndex
+          });
+
+
+        }, 1000);
+        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/chart-equipmentDistribution.vue

@@ -1,393 +1,393 @@
 <!-- **************************************NO.16 摄像头*************************************** -->
 <template>
-	<div class="chart-container">
-		<!-- <div id="camera1" style="width: 100%; height:25vh; ">
-		</div> -->
-		<div id="camera2" style="width: 100%; height:85vh; ">
-		</div>
-		<!-- <div id="camera3" style="width: 100%; height:30vh; ">
-		</div> -->
-	</div>
+  <div class="chart-container">
+    <!-- <div id="camera1" style="width: 100%; height:25vh; ">
+        </div> -->
+    <div id="camera2" style="width: 100%; height:85vh; ">
+    </div>
+    <!-- <div id="camera3" style="width: 100%; height:30vh; ">
+        </div> -->
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-  import { getSbfb } from '@/api/bigdata'
-	export default {
-		name: 'camera',
-		data() {
-			return {
+  import * as echarts from 'echarts';
+  import {getSbfb} from '@/api/bigdata'
+
+  export default {
+    name: 'camera',
+    data() {
+      return {
         source: []
-			}
-		},
-		mounted() {
-			// this.myEcharts1();
-			// this.myEcharts2();
-			// this.myEcharts3();
+      }
+    },
+    mounted() {
+      // this.myEcharts1();
+      // this.myEcharts2();
+      // this.myEcharts3();
       this.getSbfb()
-		},
+    },
 
-		methods: {
+    methods: {
       getSbfb() {
         let that = this
         getSbfb().then(res => {
-          this.source=res.data
+          this.source = res.data
           that.myEcharts2()
         })
       },
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
-			myEcharts1() {
-				var chartDom = document.getElementById('camera1');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						dimensions: ['name', '摄像头'],
-						source: [{
-								name: '双辽市',
-								'摄像头': 50
-							},
-							{
-								name: '梨树县',
-								'摄像头': 40
-							},
-							{
-								name: '伊通县',
-								'摄像头': 30
-							},
-							{
-								name: '铁东区',
-								'摄像头': 20
-							},
-							{
-								name: '铁西区',
-								'摄像头': 30
-							}
-						]
-					},
-					tooltip: {
-						trigger: 'item',
-						position: function(point, params, dom, rect, size) {
-							const x = point[0];
-							const y = point[1];
-				 		const viewWidth = size.viewSize[0];
-							const viewHeight = size.viewSize[1];
-							const boxWidth = size.contentSize[0];
-				 		const boxHeight = size.contentSize[1];
-							let posX = 0;
-							let posY = 0;
-				 		if (x < boxWidth) {
-								// 左边放不开
-								posX = 5;
-							} else {
-								// 左边放的下
-								posX = x - boxWidth;
-							}
-							if (y < boxHeight) {
-								// 上边放不开
-								posY = 5;
-							} else {
-								// 上边放得下
-								posY = y - boxHeight;
-							}
-							return [posX, posY];
-						},
-					},
-					angleAxis: {
-						max(value) {
-							return value.max * 1.1;
-						},
-						axisLabel: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-				  axisLine: {
-							show: false
-						},
-						splitLine: {
-							show: false
-						},
-						startAngle: 270
-					},
-					radiusAxis: {
-						type: 'category',
-						minorTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLabel: {
-							show: false
-						},
-					},
-					polar: {
-				 	radius: ['40%', '90%'],
-				 },
-					// angleAxis:{
-					//     clockwise:false
-					// },
-					series: [{
-						type: 'bar',
-						coordinateSystem: 'polar',
-						itemStyle: {
-				  	color(params) {
-								const idx = params.dataIndex;
-								return dfColor[idx];
-							},
-						},
-						barWidth: 5,
-						roundCap: true,
-						showBackground: true,
-						backgroundStyle: {
-							color: 'RGBA(0, 69, 117, 0.5)',
-						},
-					}],
-				};
-				option && myChart.setOption(option);
-			},
-
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
-			myEcharts2() {
-				var chartDom = document.getElementById('camera2');
-				var myChart = echarts.init(chartDom);
-				var option;
-				const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
-				option = {
-					dataset: {
-						source: this.source,
-					},
-					tooltip: {
-						trigger: 'item',
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=TMyJh73uiXkeu3_v
+      myEcharts1() {
+        var chartDom = document.getElementById('camera1');
+        var myChart = echarts.init(chartDom);
+        var option;
+        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
+        option = {
+          dataset: {
+            dimensions: ['name', '摄像头'],
+            source: [{
+              name: '双辽市',
+              '摄像头': 50
+            },
+              {
+                name: '梨树县',
+                '摄像头': 40
+              },
+              {
+                name: '伊通县',
+                '摄像头': 30
+              },
+              {
+                name: '铁东区',
+                '摄像头': 20
+              },
+              {
+                name: '铁西区',
+                '摄像头': 30
+              }
+            ]
+          },
+          tooltip: {
+            trigger: 'item',
+            position: function (point, params, dom, rect, size) {
+              const x = point[0];
+              const y = point[1];
+              const viewWidth = size.viewSize[0];
+              const viewHeight = size.viewSize[1];
+              const boxWidth = size.contentSize[0];
+              const boxHeight = size.contentSize[1];
+              let posX = 0;
+              let posY = 0;
+              if (x < boxWidth) {
+                // 左边放不开
+                posX = 5;
+              } else {
+                // 左边放的下
+                posX = x - boxWidth;
+              }
+              if (y < boxHeight) {
+                // 上边放不开
+                posY = 5;
+              } else {
+                // 上边放得下
+                posY = y - boxHeight;
+              }
+              return [posX, posY];
+            },
+          },
+          angleAxis: {
+            max(value) {
+              return value.max * 1.1;
+            },
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            splitLine: {
+              show: false
+            },
+            startAngle: 270
+          },
+          radiusAxis: {
+            type: 'category',
+            minorTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            },
+          },
+          polar: {
+            radius: ['40%', '90%'],
+          },
+          // angleAxis:{
+          //     clockwise:false
+          // },
+          series: [{
+            type: 'bar',
+            coordinateSystem: 'polar',
+            itemStyle: {
+              color(params) {
+                const idx = params.dataIndex;
+                return dfColor[idx];
+              },
+            },
+            barWidth: 5,
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'RGBA(0, 69, 117, 0.5)',
+            },
+          }],
+        };
+        option && myChart.setOption(option);
+      },
 
-					},
-					grid: {
-						top: "0%",
-						left: "6%",
-						// right: "4%",
-						bottom: "5%",
-						width: '75%',
-						containLabel: true,
-					},
-					xAxis: {
-						show: false,
-						type: "value",
-					},
-					yAxis: {
-						type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
-						inverse: true,
-						axisLabel: {
-							show: true,
-							textStyle: {
-								color: '#5deaff',
-								fontSize: '12'
-							}
-						},
-				  splitLine: {
-							show: false
-						},
-						axisTick: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						},
-					},
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=pAD_0lcRq_zOGf_k
+      myEcharts2() {
+        var chartDom = document.getElementById('camera2');
+        var myChart = echarts.init(chartDom);
+        var option;
+        const dfColor = ['#92E1FF', '#0097FB', '#30ECA6', '#FFC227', '#FF4848'];
+        option = {
+          dataset: {
+            source: this.source,
+          },
+          tooltip: {
+            trigger: 'item',
 
-					series: [{
+          },
+          grid: {
+            top: "0%",
+            left: "6%",
+            // right: "4%",
+            bottom: "5%",
+            width: '75%',
+            containLabel: true,
+          },
+          xAxis: {
+            show: false,
+            type: "value",
+          },
+          yAxis: {
+            type: "category", // 不设置类目轴，抽离的dataset数据展示不出来
+            inverse: true,
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: '#5deaff',
+                fontSize: '12'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+          },
 
-						type: "bar",
-						animationCurve: "easeOutBack",
-						barWidth: 8,
-						label: {
-							show: true,
-							position: "right",
-							offset: [0, 0],
-							color: "#88dfd5",
-							// fontSize: "12",
-							style: {
-				   	fill: "#fff"
-							},
-						},
-						backgroundBar: {
-							show: true,
-							style: {
-								fill: "rgba(97,152,255,0.30)",
-							},
-						},
-						barStyle: {
-							stroke: "rgba(41,244,236,1)",
-						},
-						gradient: {
-							color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
-						},
-						itemStyle: {
-							label: {
-								show: true
-							},
-							labelLine: {
-								show: false,
-							},
-							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-				 				offset: 0,
-									color: "rgba(41,244,236,0)"
-								},
-								{
-									offset: 1,
-									color: "rgba(41,244,236,1)"
-								},
-							]),
-							borderColor: "#a2f9f7",
-							shadowBlur: 16,
-							shadowColor: "#a2f9f7",
-						},
-					}, ],
-				};
-				option && myChart.setOption(option);
-			},
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
-			myEcharts3() {
-				var chartDom = document.getElementById('camera3');
-				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'
-						},
-					},
+          series: [{
 
-					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()
-							}
-						},
+            type: "bar",
+            animationCurve: "easeOutBack",
+            barWidth: 8,
+            label: {
+              show: true,
+              position: "right",
+              offset: [0, 0],
+              color: "#88dfd5",
+              // fontSize: "12",
+              style: {
+                fill: "#fff"
+              },
+            },
+            backgroundBar: {
+              show: true,
+              style: {
+                fill: "rgba(97,152,255,0.30)",
+              },
+            },
+            barStyle: {
+              stroke: "rgba(41,244,236,1)",
+            },
+            gradient: {
+              color: ["rgba(41,244,236,1)", "rgba(41,244,236,0)"],
+            },
+            itemStyle: {
+              label: {
+                show: true
+              },
+              labelLine: {
+                show: false,
+              },
+              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
+                offset: 0,
+                color: "rgba(41,244,236,0)"
+              },
+                {
+                  offset: 1,
+                  color: "rgba(41,244,236,1)"
+                },
+              ]),
+              borderColor: "#a2f9f7",
+              shadowBlur: 16,
+              shadowColor: "#a2f9f7",
+            },
+          },],
+        };
+        option && myChart.setOption(option);
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=ELjN7o3m72tLtmbv
+      myEcharts3() {
+        var chartDom = document.getElementById('camera3');
+        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: '型号统计',
+          },
 
+          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);
-			},
+            }]
+          }]
+        };
+        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;
-	}
+  .chart-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

src/views/bigdata/chart-eventTrend.vue

@@ -1,48 +1,50 @@
 <!-- **************************************NO.6 矿坑*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="pit" style="width: 100%; height:24vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="pit" style="width: 100%; height:24vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'pit',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getSjqs} from '@/api/bigdata.js'
 
-		},
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+  export default {
+    name: 'pit',
+    data() {
+      return {
+        count: 0,
+        data_month: [],
+        data_num: []
+      }
+    },
+    mounted() {
+      this.sjqs()
 
-			myEcharts() {
+    },
 
+    methods: {
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=udduEFcFiEYEEj4Q
+      sjqs() {
+        let that = this
+        getSjqs().then(resp => {
+          that.data_month = resp.data.month
+          that.data_num = resp.data.num
+          that.myEcharts()
+        })
+      },
 
-				var chartDom = document.getElementById('pit');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#ef5f9d','#ecb935'];
-				var option;
+      myEcharts() {
+        let that = this
+        var chartDom = document.getElementById('pit');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
+        var option;
         option = {
           xAxis: {
-            data: [
-              '2021-05-17',
-              '2021-05-18',
-              '2021-05-19',
-              '2021-05-20',
-              '2021-05-21',
-              '2021-05-24',
-              '2021-05-25',
-              '2021-05-26',
-              '2021-05-27',
-            ],
+            data: that.data_month,
           },
           yAxis: {
             axisLabel: {
@@ -87,25 +89,25 @@
               shadowColor: 'rgba(194, 47, 67)',
               shadowBlur: 0,
               shadowOffsetX: 0,
-              data: [1.56, -1.34, 0.57, 2.34, -0.45, 0.57, 2.34, 1.2, 0.34],
+              data: that.data_num,
             },
           ],
         };
-				option && myChart.setOption(option);
-			},
+        option && myChart.setOption(option);
+      },
 
-		},
+    },
 
 
-	}
+  }
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: 100%;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
+  .chart-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    padding-bottom: 10px;
+    display: flex;
+  }
 </style>

src/views/bigdata/chart-fireBrigade.vue

@@ -8,45 +8,46 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getFhd} from '@/api/bigdata.js'
+
 	export default {
 		name: 'processing',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_fhd:[],
+        data_name:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
-
+		  this.fhd()
 		},
 
 		methods: {
+
+		  fhd(){
+		    let that = this
+        getFhd().then(resp =>{
+          that.data_fhd = resp.data
+          that.data_fhd.forEach(function (item,index) {
+            that.data_name.push(item.name)
+          })
+          this.myEcharts()
+        })
+      },
+
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=vNg2RQ3LrePk4CnZ
 			myEcharts() {
 
-
+		    let that = this
 				var chartDom = document.getElementById('processing');
 				var myChart = echarts.init(chartDom);
 				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
 				var option;
-				let dataList = [{
-				    name: '双辽市',
-				    value: '56'
-				}, {
-				    name: '梨树县',
-				    value: '75'
-				}, {
-				    name: '伊通县',
-				    value: '85'
-				}, {
-				    name: '铁东区',
-				    value: '78'
-				}, {
-				    name: '铁西区',
-				    value: '76'
-				}];
-				
-				option = {
+        let dataList =that.data_fhd
+        console.log(dataList);
+
+        option = {
 				        grid: {
 				            left: "16%", //距离左边的距离
 				            right: "12%", //距离右边的距离
@@ -75,7 +76,7 @@
 				        },
 				        xAxis: [{
 				            type: "category",
-				            data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
+				            data: that.data_name,
 				            axisLabel: {
 				                textStyle: {
 				                    color: "#42a7ff",
@@ -110,7 +111,7 @@
 				                    show: false
 				                }
 				            },
-				            
+
 				        ],
 				        dataZoom: [{
 				            type: 'inside',
@@ -148,7 +149,7 @@
 				                    }
 				                },
 				            },
-				            
+
 				        ]
 				};
 				option && myChart.setOption(option);

src/views/bigdata/chart-fireCause.vue

@@ -1,289 +1,304 @@
 <!-- **************************************NO.4 隐患*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="danger" style="width: 100%; height:23vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="danger" style="width: 100%; height:23vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'danger',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getQhyytj} from '@/api/bigdata.js'
 
-		},
+  export default {
+    name: 'danger',
+    data() {
+      return {
+        count: 0,
+        data: [],
+        indicator: []
+      }
+    },
+    mounted() {
+      this.qhyytj()
+    },
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
+    methods: {
 
-			myEcharts() {
+      qhyytj() {
+        let that = this
+        getQhyytj(null).then(resp => {
+          that.data = resp.data.num
+          that.indicator = resp.data.firesource
+          that.myEcharts()
+        })
+      },
 
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=XWNjkKJQ3NBt1FK6
 
-				var chartDom = document.getElementById('danger');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
-				var option;
-				let data = [582, 421, 622, 625, 265]
-				let indicator = [{
-						name: '双辽市',
-						max: 1000
-					},
-					{
-						name: '梨树县',
-						max: 1000
-					},
-					{
-						name: '伊通县',
-						max: 1000
-					},
-					{
-						name: '铁东区',
-						max: 1000
-					},
-					{
-						name: '铁西区',
-						max: 1000
-					},
-				]
+      myEcharts() {
 
-				option = {
+        let that = this
+        var chartDom = document.getElementById('danger');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
+        // let data = [582, 421, 622, 625, 265]
+        let data = this.data;
+        let indicator = this.indicator
+        // let indicator = [{
+        //   name: '双辽市',
+        //   max: 1000
+        // },
+        //   {
+        //     name: '梨树县',
+        //     max: 1000
+        //   },
+        //   {
+        //     name: '伊通县',
+        //     max: 1000
+        //   },
+        //   {
+        //     name: '铁东区',
+        //     max: 1000
+        //   },
+        //   {
+        //     name: '铁西区',
+        //     max: 1000
+        //   },
+        // ]
 
-					radar: {
-						center: ['50%', '50%'],
-						radius: '89%',
-						name: {
-							formatter: function(name, indicator) {
-								let arr;
-								//   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
-								//         arr = [
-								//         '{a|'+name+'}{b|'+indicator.value+'万}'
-								//     ]
-								//   }else{
-								arr = [
-									'{a|' + name + '}'
-								]
-								//   }
+        option = {
 
-								return arr.join('\n')
-							},
-							textStyle: {
-								rich: { //根据文字的组设置格式
-									a: {
-										color: '#13ffdc',
-										fontSize: 12,
-										fontFamily: 'Source Han Sans CN',
-									},
-									// b:{
-									//     fontSize:14,
-									//     verticalAlign:'top',
-									//     width:57,
-									//     color:'#8E88FE',
-									//     fontWeight:600,
-									//     align:'center'
-									// },
-								}
+          radar: {
+            center: ['50%', '50%'],
+            radius: '89%',
+            name: {
+              formatter: function (name, indicator) {
+                let arr;
+                //   if(name=='开卡绑定数'||name=='渠道批量办理业务'){
+                //         arr = [
+                //         '{a|'+name+'}{b|'+indicator.value+'万}'
+                //     ]
+                //   }else{
+                arr = [
+                  '{a|' + name + '}'
+                ]
+                //   }
 
-							}
-						},
-						nameGap: 0,
-						indicator: indicator,
-						splitLine: {
-							show: false
+                return arr.join('\n')
+              },
+              textStyle: {
+                rich: { //根据文字的组设置格式
+                  a: {
+                    color: '#13ffdc',
+                    fontSize: 12,
+                    fontFamily: 'Source Han Sans CN',
+                  },
+                  // b:{
+                  //     fontSize:14,
+                  //     verticalAlign:'top',
+                  //     width:57,
+                  //     color:'#8E88FE',
+                  //     fontWeight:600,
+                  //     align:'center'
+                  // },
+                }
 
-						},
-						splitArea: {
-							show: false
-						},
-						axisLine: {
-							show: false
-						}
-					},
-					series: [{
-							// name: '家庭融合包',
-							type: 'radar',
-							data: [data],
-							// value:14,
-							label: {
-								show: true,
-								formatter: function(params) {
-									console.log(params)
-									return params.value ;
-								},
-								color: '#ffffff',
-								// position:[-20,-10,-10,-10],
-								align: 'right',
-								distance: 10,
-								align: 'right'
-							},
-							symbolSize: [6, 6],
-							lineStyle: { //边缘颜色
-								width: 0
-							},
-							itemStyle: {
-								borderWidth: 1,
-								color: '#fff',
-								borderColor: '#F2F063',
-							},
-							areaStyle: {
-								color: '#7D77F1',
-								opacity: 0.6
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[1000, 1000, 1000, 1000, 1000, 1000],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              }
+            },
+            nameGap: 0,
+            indicator: indicator,
+            splitLine: {
+              show: false
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.06
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[900, 900, 900, 900, 900, 900],
-							],
+            },
+            splitArea: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            }
+          },
+          series: [{
+            // name: '家庭融合包',
+            type: 'radar',
+            data: [data],
+            // value:14,
+            label: {
+              show: true,
+              formatter: function (params) {
+                console.log(params)
+                return params.value;
+              },
+              color: '#ffffff',
+              // position:[-20,-10,-10,-10],
+              align: 'right',
+              distance: 10,
+              align: 'right'
+            },
+            symbolSize: [6, 6],
+            lineStyle: { //边缘颜色
+              width: 0
+            },
+            itemStyle: {
+              borderWidth: 1,
+              color: '#fff',
+              borderColor: '#F2F063',
+            },
+            areaStyle: {
+              color: '#7D77F1',
+              opacity: 0.6
+            }
+          },
+            {
+              type: 'radar',
+              data: [
+                [1000, 1000, 1000, 1000, 1000, 1000],
+              ],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#2C72C8'
-							},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.06
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [900, 900, 900, 900, 900, 900],
+              ],
 
-							areaStyle: {
-								color: '#2C72C8',
-								opacity: 0.12
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[800, 800, 800, 800, 800, 800]
-							],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#2C72C8'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              areaStyle: {
+                color: '#2C72C8',
+                opacity: 0.12
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [800, 800, 800, 800, 800, 800]
+              ],
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.18
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[700, 700, 700, 700, 700, 700]
-							],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.18
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [700, 700, 700, 700, 700, 700]
+              ],
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.19
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[600, 600, 600, 600, 600, 600],
-							],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.19
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [600, 600, 600, 600, 600, 600],
+              ],
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.17
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[500, 500, 500, 500, 500, 500],
-							],
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.16
-							}
-						},
-						{
-							type: 'radar',
-							data: [
-								[400, 400, 400, 400, 400, 400],
-							],
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.17
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [500, 500, 500, 500, 500, 500],
+              ],
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-							symbol: 'none',
-							lineStyle: {
-								width: 0
-							},
-							itemStyle: {
-								color: '#4175F5'
-							},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.16
+              }
+            },
+            {
+              type: 'radar',
+              data: [
+                [400, 400, 400, 400, 400, 400],
+              ],
 
-							areaStyle: {
-								color: '#4175F5',
-								opacity: 0.13
-							}
-						},
-					]
-				};
-				option && myChart.setOption(option);
-			},
+              symbol: 'none',
+              lineStyle: {
+                width: 0
+              },
+              itemStyle: {
+                color: '#4175F5'
+              },
 
-		},
+              areaStyle: {
+                color: '#4175F5',
+                opacity: 0.13
+              }
+            },
+          ]
+        };
+        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/chart-gridDistribution.vue

@@ -1,137 +1,126 @@
 <!-- **************************************NO.10 收集点*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="collection" style="width: 100%; height:50vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="collection" style="width: 100%; height:50vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'collection',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getWgfb} from '@/api/bigdata.js'
 
-		},
+  export default {
+    name: 'collection',
+    data() {
+      return {
+        count: 0,
+        data :[]
+      }
+    },
+    mounted() {
+      this.wgfb()
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
-			myEcharts() {
+    },
 
+    methods: {
+      wgfb() {
+        let that = this
+        getWgfb().then(resp => {
+          that.data = resp.data
+          this.myEcharts()
+        })
+      },
 
-				var chartDom = document.getElementById('collection');
-				var myChart = echarts.init(chartDom);
-				var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
-				var option;
-				let bgColor = '#fff';
-				let title = '总量';
-				let echartData = [
-				    {
-				        name: '双辽市',
-				        value: '3720',
-				    },
-				    {
-				        name: '梨树县',
-				        value: '2920',
-				    },
-				    {
-				        name: '伊通县',
-				        value: '2200',
-				    },
-				    {
-				        name: '铁东区',
-				        value: '1420',
-				    },
-					{
-					    name: '铁西区',
-					    value: '1620',
-					},
-				];
-				
-				let formatNumber = function (num) {
-				    let reg = /(?=(\B)(\d{3})+$)/g;
-				    return num.toString().replace(reg, ',');
-				};
-				let total = echartData.reduce((a, b) => {
-				    return a + b.value * 1;
-				}, 0);
-				
-				option = {
-				    color: color,
-				    series: [
-				        {
-				            type: 'pie',
-				            radius: ['60%', '80%'],
-				            center: ['50%', '50%'],
-				            data: echartData,
-				            hoverAnimation: false,
-				            itemStyle: {
-				                normal: {
-				                    borderWidth:1,
-				                },
-				
-				                emphasis: {
-				                    borderColor: bgColor,
-				                    borderWidth: 2,
-				                         shadowBlur: 8,
-				                borderColor: "#00ffff",
-				                shadowColor: "#00ffff",
-				                },
-				            },
-				            labelLine: {
-				                normal: {
-				                    length: 20,
-				                    length2:10,
-				                    lineStyle: {
-				                        color: '#356781',
-				                    },
-				                },
-				            },
-				            label: {
-				                normal: {
-				                    formatter: (params) => {
-				                        return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
-				                    },
-				                    rich: {
-				                        icon: {
-				                            fontSize: 10,
-				                        },
-				                        name: {
-				                            fontSize:10,
-				                            padding: [0, 3, 0, 4],
-				                            color: '#23c9ea',
-				                        },
-				                        value: {
-				                            fontSize: 10,
-				                            color: '#ffffff',
-				                        },
-				                    },
-				                },
-				            },
-				        },
-				    ],
-				};
-				option && myChart.setOption(option);
-			},
 
-		},
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=UDNqxg4NZdRORp80
+      myEcharts() {
+        var chartDom = document.getElementById('collection');
+        var myChart = echarts.init(chartDom);
+        var color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
+        var option;
+        let bgColor = '#fff';
+        let title = '总量';
+        let echartData = this.data;
 
+        let formatNumber = function (num) {
+          let reg = /(?=(\B)(\d{3})+$)/g;
+          return num.toString().replace(reg, ',');
+        };
+        let total = echartData.reduce((a, b) => {
+          return a + b.value * 1;
+        }, 0);
 
-	}
+        option = {
+          color: color,
+          series: [
+            {
+              type: 'pie',
+              radius: ['60%', '80%'],
+              center: ['50%', '50%'],
+              data: echartData,
+              hoverAnimation: false,
+              itemStyle: {
+                normal: {
+                  borderWidth: 1,
+                },
+
+                emphasis: {
+                  borderColor: bgColor,
+                  borderWidth: 2,
+                  shadowBlur: 8,
+                  borderColor: "#00ffff",
+                  shadowColor: "#00ffff",
+                },
+              },
+              labelLine: {
+                normal: {
+                  length: 20,
+                  length2: 10,
+                  lineStyle: {
+                    color: '#356781',
+                  },
+                },
+              },
+              label: {
+                normal: {
+                  formatter: (params) => {
+                    return '{icon|●}{name|' + params.name + '}{value|' + formatNumber(params.value) + '}';
+                  },
+                  rich: {
+                    icon: {
+                      fontSize: 10,
+                    },
+                    name: {
+                      fontSize: 10,
+                      padding: [0, 3, 0, 4],
+                      color: '#23c9ea',
+                    },
+                    value: {
+                      fontSize: 10,
+                      color: '#ffffff',
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        };
+        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/chart-gridStaff.vue

@@ -8,19 +8,29 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getWgry} from '@/api/bigdata.js'
+
 	export default {
 		name: 'hydrant',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_wgry:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
-
+			this.wgry()
 		},
 
 		methods: {
+		  wgry(){
+		    let that = this
+        getWgry().then(resp => {
+          that.data_wgry = resp.data
+          that.myEcharts()
+        })
+      },
+
 			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=Ve9zCnhVwZvXTdD0
 			myEcharts() {
 
@@ -55,13 +65,13 @@
           return val;
         }
 
-        var arr = [];
-        for (var i = 0; i < 10; i++) {
-          arr.push({
-            name: '类目名称' + rand(99),
-            amount: rand(99999) / 100 // 采购金额
-          });
-        }
+        var arr = this.data_wgry
+        // for (var i = 0; i < 10; i++) {
+        //   arr.push({
+        //     name: '类目名称' + rand(99),
+        //     amount: rand(99999) / 100 // 采购金额
+        //   });
+        // }
 
         var max = getMax(arr, 'amount'),
           angleAxisData = getValArr(arr, 'name');

src/views/bigdata/chart-keyArea.vue

@@ -8,21 +8,31 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getZdqy} from '@/api/bigdata.js'
 	export default {
 		name: 'freelyraise',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data: []
 			}
 		},
 		mounted() {
-			this.myEcharts()
+      this.zdqy()
 
 		},
 
 		methods: {
 			// 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE
 
+      zdqy(){
+        let that = this
+        getZdqy().then(resp => {
+          that.data = resp.data
+          that.myEcharts()
+        })
+      },
+
 			myEcharts() {
 
 
@@ -30,27 +40,28 @@
 				var myChart = echarts.init(chartDom);
 				var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
 				var option;
-				let data = [{
-						"name": "双辽市",
-						"num": "18.987691"
-					},
-					{
-						"name": "梨树县",
-						"num": "20.377176"
-					},
-					{
-						"name": "伊通县",
-						"num": "19.127404"
-					},
-					{
-						"name": "铁东区",
-						"num": "18.40882"
-					},
-					{
-						"name": "铁西区",
-						"num": "17.980597"
-					},
-				]
+				var data = this.data
+				// let data = [{
+				// 		"name": "双辽市",
+				// 		"num": "18.987691"
+				// 	},
+				// 	{
+				// 		"name": "梨树县",
+				// 		"num": "20.377176"
+				// 	},
+				// 	{
+				// 		"name": "伊通县",
+				// 		"num": "19.127404"
+				// 	},
+				// 	{
+				// 		"name": "铁东区",
+				// 		"num": "18.40882"
+				// 	},
+				// 	{
+				// 		"name": "铁西区",
+				// 		"num": "17.980597"
+				// 	},
+				// ]
 
 				function contains(arr, dst) {
 					var i = arr.length;
@@ -108,7 +119,7 @@
 							color: "#2EC7CF"
 						}
 					])
-					
+
 				];
 				var attackSourcesColor1 = [
 					"#EB3B5A",
@@ -270,7 +281,7 @@
 										lineHeight: 5
 									}
 								},
-								
+
 							}
 						},
 						{ //右侧名字
@@ -285,7 +296,7 @@
 									fontSize: "12"
 								}
 							},
-							//data: attackSourcesDataFmt(attaName) 
+							//data: attackSourcesDataFmt(attaName)
 							data: attackSourcesDataFmt(attaData) //数字
 						},
 						{ //名称

src/views/bigdata/chart-weatherStation.vue

@@ -8,23 +8,33 @@
 
 <script>
 	import * as echarts from 'echarts';
+  import {getQxz} from '@/api/bigdata.js'
+
 	export default {
 		name: 'foam',
 		data() {
 			return {
-				count: 0
+				count: 0,
+        data_name:[],
+        data_value:[]
 			}
 		},
 		mounted() {
-			this.myEcharts()
-
+		  this.qxz();
 		},
 
 		methods: {
+		  qxz(){
+        let that = this
+        getQxz().then(resp =>{
+          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=daPJGrcYMpZanpxR
 			myEcharts() {
-
-
+		    let that = this
 				var chartDom = document.getElementById('foam');
 				var myChart = echarts.init(chartDom);
 				var zdslColorList = ['#D0A00E', '#34DA62', '#00C0E9', '#0096F3', '#33CCFF'];
@@ -46,7 +56,7 @@
 				      yAxis: [{
 				              type: 'category',
 							  inverse:true,
-				              data: ['双辽市', '梨树县', '伊通县', '铁东区', '铁西区'],
+				              data: that.data_name,
 				              axisLabel: {
 				                  show: true,
 				                  textStyle: {
@@ -81,10 +91,10 @@
 				                      fontSize: '12'
 				                  }
 				              },
-				              data: [150, 298, 206, 75, 154]
+				              data: that.data_value
 				          }
 				      ],
-				 
+
 				      series: [{
 				              name: "受理数", // bar图的外边框
 				              type: "bar",

src/views/bigdata/chart-weatherTrends.vue

@@ -1,37 +1,51 @@
 <!-- **************************************NO.9 散养户、养殖场养殖种类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="farmtype" style="width: 100%; height:24vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="farmtype" style="width: 100%; height:24vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'farmtype',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
+  import * as echarts from 'echarts';
+  import {getTqqs} from '@/api/bigdata.js'
 
-		},
+  export default {
+    name: 'farmtype',
+    data() {
+      return {
+        count: 0,
+        data_day:[],
+        data_heigh:[],
+        data_low:[]
+      }
+    },
+    mounted() {
+      this.tqqs()
 
-		methods: {
-			// 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
+    },
 
-			myEcharts() {
+    methods: {
+      tqqs() {
+        let that = this
+        getTqqs().then(resp => {
+          that.data_day = resp.data.day
+          that.data_heigh = resp.data.heigh
+          that.data_low = resp.data.low
+          that.myEcharts()
+        })
+      },
+      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=smh2KYnoCMWnT1IN
 
+      myEcharts() {
 
-				var chartDom = document.getElementById('farmtype');
-				var myChart = echarts.init(chartDom);
-        var xData = ['2022年1月','2022年2月','2022年3月','2022年4月','2022年5月','2022年6月','2022年7月','2022年8月','2022年9月','2022年10月','2022年11月','2022年12月'];
+        let that = this
+        var chartDom = document.getElementById('farmtype');
+        var myChart = echarts.init(chartDom);
+        var xData =  this.data_day
         var option;
         option = {
-          backgroundColor:'#232d36',
+          backgroundColor: '#232d36',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
@@ -63,39 +77,39 @@
             right: '5%',
             bottom: '15%',
           },
-          legend:{
-            data:['最高气温','最低气温'],
-            textStyle:{
-              color:'#fff',
+          legend: {
+            data: ['最高气温', '最低气温'],
+            textStyle: {
+              color: '#fff',
               align: 'center',
               fontSize: 16
             },
-            x:'center'
+            x: 'center'
           },
           xAxis: [{
             type: 'category',
             // 轴线
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4',
               }
             },
             // 轴刻度线
-            axisTick:{
-              show:false,
+            axisTick: {
+              show: false,
             },
             // 坐标轴名称
             axisLabel: {
               color: '#fff',
-              margin:6,
+              margin: 6,
             },
             // 轴分隔线
             splitLine: {
               show: false
             },
             // 轴两侧留白
-            boundaryGap: ['5%','5%'],
+            boundaryGap: ['5%', '5%'],
             data: xData
 
           }],
@@ -110,7 +124,7 @@
             },
             axisLine: {
               show: true,
-              lineStyle:{
+              lineStyle: {
                 color: '#85B1B4'
               }
             },
@@ -128,7 +142,7 @@
           }],
           series: [
             {
-              name:'最高气温',
+              name: '最高气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
@@ -160,14 +174,14 @@
               //         ], false),
               //     }
               // },
-              data: [4,7,8,12,15,23,24,24,25,28,27,24,21,23]//data.values
+              data: that.data_heigh//data.values
             },
             {
-              name:'最低气温',
+              name: '最低气温',
               type: 'line',
               showAllSymbol: true,
               symbol: 'circle',
-              symbolSize:4,
+              symbolSize: 4,
               lineStyle: {
                 normal: {
                   color: "#13EFB7",
@@ -195,25 +209,25 @@
                   ], false),
                 }
               },
-              data: [3,5,4,2,1,7,6,3,4,5,6,7,1,2]//data.values
+              data:that.data_low//data.values
             },
           ]
         };
-				option && myChart.setOption(option);
-			},
+        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

@@ -1,207 +1,226 @@
 <template>
-	<div class="bigdata-map-tabbar">
-				<el-row :gutter="20">
-					<el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
-						<div class="list-content">
-							<span>{{regionNum.count}}</span>
-							<h5>{{regionNum.name}}</h5>
-						</div>
-					</el-col>
-				</el-row>
-	</div>
+  <div class="bigdata-map-tabbar">
+    <el-row :gutter="20">
+      <el-col :span="4" v-for="(regionNum,index) in regionNum" :key="index">
+        <div class="list-content">
+          <span>{{regionNum.value}}</span>
+          <h5>{{regionNum.name}}</h5>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				//tab默认停留项el-tab-pane > name = "?"
-				activeName: 'sp',
-				//地区分类tabtitle
-				district:[
-					{
-						label:'四平市',
-						name:'sp',
-						id:''
-					},
-					{
-						label:'双辽市',
-						name:'sl',
-						id:''
-					},
-					{
-						label:'梨树县',
-						name:'ls',
-						id:''
-					},
-					{
-						label:'伊通县',
-						name:'yt',
-						id:''
-					},
-					{
-						label:'铁东区',
-						name:'td',
-						id:''
-					},
-					{
-						label:'铁西区',
-						name:'tx',
-						id:''
-					},
-				],
-				// 本地区内分类项数量
-				regionNum:[
-					{
-				       count:641,
-					   name:'事件'
-					},
-					{
-					   count:351,
-					   name:'隐患'
-					},
-					{
-					   count:785,
-					   name:'人口'
-					},
-					{
-					   count:512,
-					   name:'企业'
-					},
-					{
-					   count:786,
-					   name:'林场'
-					},
-					{
-					   count:544,
-					   name:'矿坑'
-					},
-					{
-					   count:320,
-					   name:'收集点'
-					},
-					{
-					   count:321,
-					   name:'水鹤'
-					},
-					{
-					   count:400,
-					   name:'取水口'
-					},
-					{
-					   count:654,
-					   name:'消火栓'
-					},
-					{
-					   count:806,
-					   name:'摄像头'
-					},
-					{
-					   count:312,
-					   name:'养殖场'
-					},
-					{
-					   count:713,
-					   name:'处理中心'
-					},
-					{
-					   count:132,
-					   name:'泡沫液'
-					},
-					{
-					   count:466,
-					   name:'泡沫液'
-					},
-					{
-					   count:897,
-					   name:'消防力量'
-					},
-					{
-					   count:132,
-					   name:'探测器'
-					}
-				]
-			};
-		},
-		methods: {
-			handleClick(tab, event) {
-				console.log(tab, event);
-			}
-		}
-	};
+
+  import {getZhxx} from '@/api/bigdata.js'
+
+  export default {
+    data() {
+      return {
+        //tab默认停留项el-tab-pane > name = "?"
+        activeName: 'sp',
+        //地区分类tabtitle
+        district: [
+          {
+            label: '四平市',
+            name: 'sp',
+            id: ''
+          },
+          {
+            label: '双辽市',
+            name: 'sl',
+            id: ''
+          },
+          {
+            label: '梨树县',
+            name: 'ls',
+            id: ''
+          },
+          {
+            label: '伊通县',
+            name: 'yt',
+            id: ''
+          },
+          {
+            label: '铁东区',
+            name: 'td',
+            id: ''
+          },
+          {
+            label: '铁西区',
+            name: 'tx',
+            id: ''
+          },
+        ],
+        // 本地区内分类项数量
+        regionNum: [
+          {
+            count: 641,
+            name: '事件'
+          },
+          {
+            count: 351,
+            name: '隐患'
+          },
+          {
+            count: 785,
+            name: '人口'
+          },
+          {
+            count: 512,
+            name: '企业'
+          },
+          {
+            count: 786,
+            name: '林场'
+          },
+          {
+            count: 544,
+            name: '矿坑'
+          },
+          {
+            count: 320,
+            name: '收集点'
+          },
+          {
+            count: 321,
+            name: '水鹤'
+          },
+          {
+            count: 400,
+            name: '取水口'
+          },
+          {
+            count: 654,
+            name: '消火栓'
+          },
+          {
+            count: 806,
+            name: '摄像头'
+          },
+          {
+            count: 312,
+            name: '养殖场'
+          },
+          {
+            count: 713,
+            name: '处理中心'
+          },
+          {
+            count: 132,
+            name: '泡沫液'
+          },
+          {
+            count: 466,
+            name: '泡沫液'
+          },
+          {
+            count: 897,
+            name: '消防力量'
+          },
+          {
+            count: 132,
+            name: '探测器'
+          }
+        ]
+      };
+    },
+
+    mounted() {
+      this.zhxx()
+    },
+
+    methods: {
+
+      zhxx() {
+        let that = this
+        getZhxx().then(resp => {
+          console.log("hhh",resp)
+          that.regionNum = resp.data.data
+        })
+      },
+
+      handleClick(tab, event) {
+        console.log(tab, event);
+      }
+    }
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-	@import '@/assets/styles/base.scss';
-	.bigdata-map-tabbar {
-		width: 100%;
-		height: 28.5vh;
-		padding: 0 1rem 1rem 1rem!important;
-		box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
-			-0 -0 20px rgba($color: #163696, $alpha: .6) inset;
-
-		.el-tabs__item {
-			color: #fff;
-			font-size: 12px;
-			height: 32px;
-			line-height: 32px;
-			padding: 0 10px;
-		}
-
-		.el-tabs__item.is-active {
-			color: #3ec6fc;
-		}
-
-		.el-tabs__nav-wrap::after {
-			background: none;
-		}
-
-		.el-tabs__active-bar {
-			// background-color: #ffbc30;
-			border-radius: 20px;
-		}
-
-		.el-tab-pane {
-			color: #fff;
-		}
-
-		.el-tabs__nav-next,
-		.el-tabs__nav-prev {
-			line-height: 40px;
-		}
-
-		.el-tabs__header {
-			margin: 0 0 10px;
-		}
-
-		.list-content {
-			width: 95%;
-			margin: 0 auto;
-			text-align: center;
-			margin-top: 1rem;
-
-			h5 {
-				width: 100%;
-				color: #0aaef2;
-				padding: .2rem 0;
-				border: 1px solid #091641;
-				font-size: 12px;
-			}
-
-			span {
-				width: 100%;
-				display: flex;
-				flex-direction: column;
-				font-size: 12px;
-				color: $white;
-				padding: .5rem 0;
-				font-weight: bolder;
-				border: 1px solid #091641;
-				border-bottom:none ;
-			}
-		}
-		.list-content:hover{
-			filter: brightness(2.3);
-		}
-	}
+  @import '@/assets/styles/base.scss';
+
+  .bigdata-map-tabbar {
+    width: 100%;
+    height: 28.5vh;
+    padding: 0 1rem 1rem 1rem !important;
+    box-shadow: 0 0 1px rgba($color: #163696, $alpha: .1),
+    -0 -0 20px rgba($color: #163696, $alpha: .6) inset;
+
+    .el-tabs__item {
+      color: #fff;
+      font-size: 12px;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 10px;
+    }
+
+    .el-tabs__item.is-active {
+      color: #3ec6fc;
+    }
+
+    .el-tabs__nav-wrap::after {
+      background: none;
+    }
+
+    .el-tabs__active-bar {
+      // background-color: #ffbc30;
+      border-radius: 20px;
+    }
+
+    .el-tab-pane {
+      color: #fff;
+    }
+
+    .el-tabs__nav-next,
+    .el-tabs__nav-prev {
+      line-height: 40px;
+    }
+
+    .el-tabs__header {
+      margin: 0 0 10px;
+    }
+
+    .list-content {
+      width: 95%;
+      margin: 0 auto;
+      text-align: center;
+      margin-top: 1rem;
+
+      h5 {
+        width: 100%;
+        color: #0aaef2;
+        padding: .2rem 0;
+        border: 1px solid #091641;
+        font-size: 12px;
+      }
+
+      span {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        color: $white;
+        padding: .5rem 0;
+        font-weight: bolder;
+        border: 1px solid #091641;
+        border-bottom: none;
+      }
+    }
+
+    .list-content:hover {
+      filter: brightness(2.3);
+    }
+  }
 </style>

vue.config.js

@@ -52,8 +52,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `https://127.0.0.1:3031`,
-        target: `http://117.78.49.164:3031`,
+        target: `http://192.168.1.113:3031`,
+        // target: `http://117.78.49.164:3031`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''