1

src/api/bigdata.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 事件来源
+export function getSjlylxtj() {
+  return request({
+    url: '/center-firecontrol/VisuForestCloudBigDataController/getEventSourceAndTypeStatistics',
+    method: 'post',
+  })
+}

src/views/bigdata/chart-event.vue

@@ -1,314 +1,321 @@
 <!-- **************************************NO.2 事件类型 分类*************************************** -->
 <template>
-	<div class="chart-container">
-		<div id="event" style="width: 50%; height:21vh;">
-		</div>
-		<div id="event2" style="width: 50%; height:21vh;">
-		</div>
-	</div>
+  <div class="chart-container">
+    <div id="event" style="width: 50%; height:21vh;">
+    </div>
+    <div id="event2" style="width: 50%; height:21vh;">
+    </div>
+  </div>
 </template>
 
 <script>
-	import * as echarts from 'echarts';
-	export default {
-		name: 'event',
-		data() {
-			return {
-				count: 0
-			}
-		},
-		mounted() {
-			this.myEcharts()
-			this.myEcharts2()
+  import * as echarts from 'echarts';
+  import {getSjlylxtj} from '@/api/bigdata'
 
-		},
+  export default {
+    name: 'event',
+    data() {
+      return {
+        count: 0
+      }
+    },
+    mounted() {
+      this.sjlylxtj()
+    },
 
-		methods:{
-			// 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
-			//http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
-			
-			myEcharts() {
-				
-				
-				var chartDom = document.getElementById('event');
-				var myChart = echarts.init(chartDom);
-				var color = ['#02CDFF', '#62FBE7', '#7930FF','#E148EB','#ecb935']
-				var option;
-				
-				
-				option = {
-				  color: color,
-				  tooltip: {
-				    trigger: 'item',
-					position: 'top'
-				  },
-				  series: [
-				    {
-				      name: '事件类型',
-				      type: 'pie',
-					  center:['50%','60%'],
-				      radius: ['55%', '70%'],
-				      avoidLabelOverlap: false,
-				      
-				      label: {
-				        show: false,
-				        position: 'center'
-				      },
-				      emphasis: {
-				        label: {
-				          show: true,
-				          fontSize: '12',
-				          fontWeight: 'bold'
-				        }
-				      },
-				      labelLine: {
-				        show: false
-				      },
-				      data: [
-				        { value: 1048, name: '事件1' },
-				        { value: 735, name: '事件2' },
-				        { value: 580, name: '事件3' },
-				        { value: 484, name: '事件4' },
-				        { value: 300, name: '事件5' }
-				      ]
-				    },
-					
-				  ]
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
-			myEcharts2() {
-				
-				
-				var chartDom = document.getElementById('event2');
-				var myChart = echarts.init(chartDom);
-				 let dashedPic =
-				    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-				let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff','#E148EB'];
-				var option;
-				let chartData = [
-				    {
-				        name: '双辽市',
-				        value: 40083,
-				        unit: '列',
-				    },
-				    {
-				        name: '梨树县',
-				        value: 33974,
-				        unit: '列',
-				    },
-				    {
-				        name: '伊通县',
-				        value: 15400,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁东区',
-				        value: 11021,
-				        unit: '列',
-				    },
-				    {
-				        name: '铁西区',
-				        value: 30696,
-				        unit: '列',
-				    },
-				
-				];
-				let arrName = [];
-				let arrValue = [];
-				let sum = 0;
-				let pieSeries = [],
-				    lineYAxis = [];
-				
-				// 数据处理
-				chartData.forEach((v, i) => {
-				    arrName.push(v.name);
-				    arrValue.push(v.value);
-				    sum = sum + v.value;
-				});
-				
-				// 图表option整理
-				chartData.forEach((v, i) => {
-				    pieSeries.push({
-				        name: '沪昆线到达晚点情况',
-				        type: 'pie',
-				        clockWise: false,
-				        hoverAnimation: false,
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderRadius: 20,
-				        },
-				        data: [
-				            {
-				                value: v.value,
-				                name: v.name,
-				                 itemStyle: {
-				                    normal: {
-				                        borderWidth: 5,
-				                        borderColor:color[i]
-				                    }
-				                }
-				            },
-				            {
-				                value: sum - v.value,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    pieSeries.push({
-				        name: '',
-				        type: 'pie',
-				        silent: true,
-				        z: 1,
-				        clockWise: false, //顺时加载
-				        hoverAnimation: false, //鼠标移入变大
-				        radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
-				        center: ['35%', '60%'],
-				        label: {
-				            show: false,
-				        },
-				        itemStyle: {
-				            borderCap: 'round',
-				            borderJoin: 'round',
-				        },
-				        data: [
-				            {
-				                value: 7.5,
-				                itemStyle: {
-				                    color: '#E3F0FF',
-				                },
-				            },
-				            {
-				                value: 2.5,
-				                name: '',
-				                itemStyle: {
-				                    color: 'rgba(0,0,0,0)',
-				                },
-				            },
-				        ],
-				    });
-				    v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
-				    lineYAxis.push({
-				        value: i,
-				        textStyle: {
-				            rich: {
-				                circle: {
-				                    color: color[i],
-				                    padding: [0, 0],
-				                },
-				            },
-				        },
-				    });
-				});
-				
-				option = {
-				    color: color,
-				    grid: {
-				        top: '20%',
-				        bottom: '45%',
-				        left: '40%',
-				        containLabel: false,
-				    },
-				    yAxis: [
-				        {
-				            type: 'category',
-				            inverse: true,
-				            axisLine: {
-				                show: false,
-				            },
-				            axisTick: {
-				                show: false,
-				            },
-				            axisLabel: {
-				                formatter: function (params) {
-				                    let item = chartData[params];
-				                    console.log(item);
-				                    return (
-				                        '{circle|●}{name|' +
-				                        item.name +
-				                        '}{bd||}{percent|' +
-				                        item.percent +
-				                        '}'
-				                    );
-				                },
-				                interval: 0,
-				                inside: true,
-				                textStyle: {
-				                    color: '#333',
-				                    fontSize: 10,
-				                    rich: {
-				                        line: {
-				                            width: 170,
-				                            height: 5,
-				                            backgroundColor: { image: dashedPic },
-				                        },
-				                        name: {
-				                            color: '#fff',
-				                            fontSize: 10,
-				                        },
-				                        bd: {
-				                            color: '#72afff',
-				                            padding: [0, 5],
-				                            fontSize: 10,
-				                        },
-				                        percent: {
-				                            color: '#5cdad0',
-				                            fontSize: 10,
-				                        },
-				                        value: {
-				                            color: '#333',
-				                            fontSize: 16,
-				                            fontWeight: 500,
-				                            padding: [0, 0, 0, 10],
-				                        },
-				                        unit: {
-				                            fontSize: 14,
-				                        },
-				                    },
-				                },
-				                show: true,
-				            },
-				            data: lineYAxis,
-				        },
-				    ],
-				    xAxis: [
-				        {
-				            show: false,
-				        },
-				    ],
-				    series: pieSeries,
-				};
-				
-				option && myChart.setOption(option);
-				
-			},
+    methods: {
 
+      sjlylxtj() {
+        let that = this
+        getSjlylxtj().then(resp => {
+          resp.log("=====", resp)
+          that.myEcharts()
+          that.myEcharts2()
+        })
+      },
+      // 出处 https://echarts.apache.org/examples/zh/editor.html?c=pie-borderRadius
+      //http://192.144.199.210:8080/editor/index.html?chart_id=K8nTnNyu0caN65uT
 
-		},
+      myEcharts() {
 
 
-	}
-</script>
+        var chartDom = document.getElementById('event');
+        var myChart = echarts.init(chartDom);
+        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#E148EB', '#ecb935']
+        var option;
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	.chart-container {
-		width: 100%;
-		height: auto;
-		position: relative;
-		padding-bottom: 10px;
-		display: flex;
-	}
 
+        option = {
+          color: color,
+          tooltip: {
+            trigger: 'item',
+            position: 'top'
+          },
+          series: [
+            {
+              name: '事件类型',
+              type: 'pie',
+              center: ['50%', '60%'],
+              radius: ['55%', '70%'],
+              avoidLabelOverlap: false,
+
+              label: {
+                show: false,
+                position: 'center'
+              },
+              emphasis: {
+                label: {
+                  show: true,
+                  fontSize: '12',
+                  fontWeight: 'bold'
+                }
+              },
+              labelLine: {
+                show: false
+              },
+              data: [
+                {value: 1048, name: '事件1'},
+                {value: 735, name: '事件2'},
+                {value: 580, name: '事件3'},
+                {value: 484, name: '事件4'},
+                {value: 300, name: '事件5'}
+              ]
+            },
+
+          ]
+        };
+
+        option && myChart.setOption(option);
+
+      },
+      myEcharts2() {
+
+
+        var chartDom = document.getElementById('event2');
+        var myChart = echarts.init(chartDom);
+        let dashedPic =
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
+        let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff', '#E148EB'];
+        var option;
+        let chartData = [
+          {
+            name: '双辽市',
+            value: 40083,
+            unit: '列',
+          },
+          {
+            name: '梨树县',
+            value: 33974,
+            unit: '列',
+          },
+          {
+            name: '伊通县',
+            value: 15400,
+            unit: '列',
+          },
+          {
+            name: '铁东区',
+            value: 11021,
+            unit: '列',
+          },
+          {
+            name: '铁西区',
+            value: 30696,
+            unit: '列',
+          },
+
+        ];
+        let arrName = [];
+        let arrValue = [];
+        let sum = 0;
+        let pieSeries = [],
+          lineYAxis = [];
+
+        // 数据处理
+        chartData.forEach((v, i) => {
+          arrName.push(v.name);
+          arrValue.push(v.value);
+          sum = sum + v.value;
+        });
 
+        // 图表option整理
+        chartData.forEach((v, i) => {
+          pieSeries.push({
+            name: '沪昆线到达晚点情况',
+            type: 'pie',
+            clockWise: false,
+            hoverAnimation: false,
+            radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+            center: ['35%', '60%'],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              borderRadius: 20,
+            },
+            data: [
+              {
+                value: v.value,
+                name: v.name,
+                itemStyle: {
+                  normal: {
+                    borderWidth: 5,
+                    borderColor: color[i]
+                  }
+                }
+              },
+              {
+                value: sum - v.value,
+                name: '',
+                itemStyle: {
+                  color: 'rgba(0,0,0,0)',
+                },
+              },
+            ],
+          });
+          pieSeries.push({
+            name: '',
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 10 + '%', 66.5 - i * 10 + '%'],
+            center: ['35%', '60%'],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              borderCap: 'round',
+              borderJoin: 'round',
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: '#E3F0FF',
+                },
+              },
+              {
+                value: 2.5,
+                name: '',
+                itemStyle: {
+                  color: 'rgba(0,0,0,0)',
+                },
+              },
+            ],
+          });
+          v.percent = ((v.value / sum) * 100).toFixed(1) + '%';
+          lineYAxis.push({
+            value: i,
+            textStyle: {
+              rich: {
+                circle: {
+                  color: color[i],
+                  padding: [0, 0],
+                },
+              },
+            },
+          });
+        });
+
+        option = {
+          color: color,
+          grid: {
+            top: '20%',
+            bottom: '45%',
+            left: '40%',
+            containLabel: false,
+          },
+          yAxis: [
+            {
+              type: 'category',
+              inverse: true,
+              axisLine: {
+                show: false,
+              },
+              axisTick: {
+                show: false,
+              },
+              axisLabel: {
+                formatter: function (params) {
+                  let item = chartData[params];
+                  console.log(item);
+                  return (
+                    '{circle|●}{name|' +
+                    item.name +
+                    '}{bd||}{percent|' +
+                    item.percent +
+                    '}'
+                  );
+                },
+                interval: 0,
+                inside: true,
+                textStyle: {
+                  color: '#333',
+                  fontSize: 10,
+                  rich: {
+                    line: {
+                      width: 170,
+                      height: 5,
+                      backgroundColor: {image: dashedPic},
+                    },
+                    name: {
+                      color: '#fff',
+                      fontSize: 10,
+                    },
+                    bd: {
+                      color: '#72afff',
+                      padding: [0, 5],
+                      fontSize: 10,
+                    },
+                    percent: {
+                      color: '#5cdad0',
+                      fontSize: 10,
+                    },
+                    value: {
+                      color: '#333',
+                      fontSize: 16,
+                      fontWeight: 500,
+                      padding: [0, 0, 0, 10],
+                    },
+                    unit: {
+                      fontSize: 14,
+                    },
+                  },
+                },
+                show: true,
+              },
+              data: lineYAxis,
+            },
+          ],
+          xAxis: [
+            {
+              show: false,
+            },
+          ],
+          series: pieSeries,
+        };
+
+        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>

vue.config.js

@@ -50,8 +50,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `https://www.sunyishi.com: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]: ''