更新

public/config.js

@@ -1,4 +1,6 @@
 window.publicConfig={
     BASE_API:"http://192.168.66.16/api",
     // BASE_API:"http://10.97.121.2/api",
+    // socket url
+    WS_URL: 'ws://10.97.121.2/ws'
 }

src/views/cultrue/index.vue

@@ -87,7 +87,7 @@ import * as echarts from "echarts";
 
 // 引入api
 import * as homeApi from '@/api/home'
-
+let lineChart1 = null, lineChart2 = null, barChart = null;
 export default {
   data() {
     return {
@@ -156,6 +156,9 @@ export default {
       let that = this;
       var chartDom = document.getElementById("dinschart");
       // var option;
+      lineChart1 = echarts.init(chartDom);
+      
+      function run(){
         var xData = that.data24hX;
 
         var data = that.data24h;
@@ -170,7 +173,7 @@ export default {
           dataLenArr.push(0);// 获取和数据一样长度的图形数组
           dataBGArr.push(max);// 数组最大值做背景柱形
         })
-      // var data = [Math.random() * 300]
+        
         var option = {
           tooltip: {
             trigger: 'axis',
@@ -300,59 +303,24 @@ export default {
           },
           ]
         }
-      function run(myChart){
+        option && lineChart1.setOption(option);
-        that.getData24h();
-        var data = that.data24h;
-        let max=data[0];
-        for (let i = 0; i < data.length; i++) {
-          if (data[i]>max) {
-            max = data[i];
-          }
       }
-        let dataLenArr = [], dataBGArr = [];
+        
-        data.map(item=>{
+      run();
-          dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
-          dataBGArr.push(max);// 数组最大值做背景柱形
-        })
-        myChart.setOption({
-          animation: true,
-          xAxis: {
-            data: that.data24hX
-          },
-          series: [{
-              type: 'bar',
-              data: data,
-            },
-            {
-              type: 'scatter',
-              data: dataLenArr
-            },
-            {
-              name: '背景',
-              type: 'bar',
-              data: dataBGArr
-            },
-          ]
-        });
-      }
-      // 加延时器使图像绘制获取元素宽高最新的值2
-      setTimeout(() => {
-        var myChart = echarts.init(chartDom);
-        option && myChart.setOption(option);
       that.timer1 = setInterval(function () {
-          myChart.clear();
+        lineChart1.clear();
-          option && myChart.setOption(option);
+        run();
-          run(myChart);
       }, 3000);
-      }, 200);
     },
 
     // 各场馆服务人次趋势
     cultrue_bar2() {
       let that = this;
       var chartDom = document.getElementById("pcgchart");
-
+      lineChart2 = echarts.init(chartDom);
       var option
+      
+      function run(){
         var xData = that.rsqsXData;
         var name = that.rsqsDataName;
         // console.log(that.rsqsDataName, 'that.rsqsDataName')
@@ -515,21 +483,14 @@ export default {
           },
           series: series,
         }
-      function run(myChart){
+        option && lineChart2.setOption(option);
-        // 获取新数据-处理
-        myChart.setOption({
-          series: series
-        });
       }
-      setTimeout(() => {
+
-        var myChart = echarts.init(chartDom);
+      run();
-        option && myChart.setOption(option);
       that.timer2 = setInterval(function () {
-          myChart.clear();
+        lineChart2.clear();
-          option && myChart.setOption(option);
+        run();
-          run(myChart);
       }, 3000);
-      }, 200);
     },
 
     // 图书馆统计图数据
@@ -548,10 +509,10 @@ export default {
     cultrue_bar3() {
       let that = this;
       var chartDom = document.getElementById("tsgchart");
+      barChart = echarts.init(chartDom);
       var option;
 
-      function run(myChart){
+      function run(){
-        // 获取新数据-处理
         var data = [{
           name: '今日办证人数',
           icon: '../../assets/wh/wh_right3.png',
@@ -806,17 +767,14 @@ export default {
             }
           }]
         };
-        option && myChart.setOption(option);
+        option && barChart.setOption(option);
       }
-      setTimeout(() => {
+        
-        var myChart = echarts.init(chartDom);
+      run();
-        run(myChart);
       that.timer3 = setInterval(function () {
-          myChart.clear();
+        barChart.clear();
-          that.getLibraryData();
+        run();
-          run(myChart);
       }, 3000);
-      }, 200);
     },
     addNumber(start, end, id) {
       var o = document.getElementById(id);

src/views/index.vue

@@ -152,7 +152,7 @@ import * as echarts from "echarts";
 
 // 引入api
 import * as homeApi from '@/api/home'
-
+let barChart = null, lineChart = null, pieChart = null;
 export default {
   data() {
     return {
@@ -199,22 +199,24 @@ export default {
   mounted() {
 
     this.getStat();
-    this.btgetdata();
     this.getPieData();
     this.getInfoDatas();
     this.getGcgNumDatas();
+    this.autoTimer0();
 
     setTimeout(() => {
+      // 加延时器使图像绘制获取元素宽高最新的值、等待接口返回数据
       this.home_bar();
       this.line_zone();
       this.index_pie1();
     }, 1000)
 
-    this.autoTimer0();
+    this.getsckdata();
   },
   methods: {
     autoTimer0(){
       let that = this;
+      this.btgetdata();
       clearInterval(that.timer0);
       that.timer0 = setInterval(() => {
         if(this.klselt == 'y'){
@@ -269,11 +271,12 @@ export default {
     home_bar() {
       let that = this;
       var chartDom = document.getElementById("homebar");
-      var myChart = echarts.init(chartDom);
       var option;
+      barChart = echarts.init(chartDom);
       
-      let xData = this.klqsXDatas.slice(-8,this.klqsXDatas.length);
+      function run() {
-      var data = this.klqsDatas.slice(-8,this.klqsDatas.length);
+        let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
+        var data = that.klqsDatas.slice(-8,that.klqsDatas.length);
         let max=data[0];
         for (let i = 0; i < data.length; i++) {
           if (data[i]>max) {
@@ -447,58 +450,13 @@ export default {
           },
         };
 
-      option && myChart.setOption(option);
+        option && barChart.setOption(option);
-      function run(myChart) {
-        if(that.klselt == 'd'){
-          that.btgetdata();
-        }else if(that.klselt == 'm'){
-          that.btgetdata()
-        }else if(that.klselt == 'y'){
-          that.btgetdata()
       }
-        let xData = that.klqsXDatas.slice(-8,that.klqsXDatas.length);
+      run();
-        let data = that.klqsDatas.slice(-8,that.klqsDatas.length);
+      clearInterval(that.timer1);
-
-        let max=data[0];
-        for (let i = 0; i < data.length; i++) {
-          if (data[i]>max) {
-            max = data[i];
-          }
-        }
-        let dataLenArr = [], dataBGArr = [];
-        data.map(item=>{
-          dataLenArr.push(1);// 获取和数据一样长度的底部图形数组；
-          dataBGArr.push(max);// 数组最大值做背景柱形
-        })
-        myChart.setOption({
-          xAxis: {
-            data: xData
-          },
-          series: [
-            {
-              type: 'bar',
-              data: data
-            },
-            {
-              type: 'pictorialBar',
-              data: data
-            },
-            {
-              type: 'bar',
-              data: dataBGArr
-            },
-            {
-              type: 'pictorialBar',
-              data: dataBGArr
-            }
-          ]
-        });
-      }
-      clearInterval(that.timer1);//这个定时器看似多余，但是注释会影响效果，先保留
       that.timer1 = setInterval(function () {
-        myChart.clear();
+        barChart.clear();
-        option && myChart.setOption(option);
+        run(); 
-        run(myChart); 
       }, 5000);
     },
 
@@ -507,11 +465,12 @@ export default {
       let that = this;
       var chartDom = document.getElementById("kl-line");
       var option;
+      lineChart = echarts.init(chartDom);
+      
+      function run(){
+        // 获取新数据-处理--改用ws处理数据
+        // that.getGcgNumDatas();
         
-      function run(myChart){
-        // 获取新数据-处理
-        that.getGcgNumDatas();
-        setTimeout(() => {
         var xData = that.rsqsXData;
         var gcolor = ['#ff9acc', '#6666FF', '#FF6600', '#02ff00', '#00ffff', '#fdff00'];
 
@@ -667,17 +626,14 @@ export default {
           },
           series: series,
         }
-          option && myChart.setOption(option);
+        option && lineChart.setOption(option);
-        }, 200);
+        
       }
-      setTimeout(()=>{
+      run();
-        var myChart = echarts.init(chartDom);
-        run(myChart);
       that.timer3 = setInterval(function () {
-          myChart.clear();
+        lineChart.clear();
-          run(myChart);
+        run();
       }, 3000);
-      }, 200)
     },
 
     addNumber(start, end, id) {
@@ -794,6 +750,8 @@ export default {
     },
     index_pie1(){
       let that = this;
+      var pieDom1 = document.getElementById("indexPie1");
+      pieChart = echarts.init(pieDom1);
       // var dataP = [
       //   {name: '体育场',value: 5,},
       //   {name: '体育馆',value: 20,},
@@ -818,9 +776,8 @@ export default {
         );
       }
       
-      function run(myChart){
+      function run(){
         var dataP = that.dataP;
-        // 获取新数据-处理
         let color = ['#ff9acc', '#6666ff', '#ff6600', '#02ff00','#00ffff', '#fdff00'];
         let color1=[], color2=[], color3=[];
         // 设置每层圆环颜色和添加间隔的透明色
@@ -916,20 +873,41 @@ export default {
               },
           ],
         }
-        option && myChart.setOption(option);
+        option && pieChart.setOption(option);
       }
       
-      // 加延时器使图像绘制获取元素宽高最新的值
+      run();
-      setTimeout(()=>{
-        var pieDom1 = document.getElementById("indexPie1");
-        var myChart = echarts.init(pieDom1);
-        run(myChart);
       that.timer4 = setInterval(function () {
-          myChart.clear();
+        pieChart.clear();
-          that.getPieData();
+        run();
-          run(myChart);
       }, 4000);
-      }, 200)
+    },
+    // 获取实时数据
+    getsckdata(){
+      let that = this;
+      // websocket 
+      const ws = new WebSocket("ws://192.168.66.16/rt");
+      ws.onopen = function() {
+        // console.log("ws connected success!")
+      };
+      ws.onmessage = (e)=> {
+        var jstr = JSON.parse(e.data)
+        // console.log("11111", jstr, e);
+        if(!jstr){
+          return;
+        }
+        const pieData = jstr.realTimeData.data;
+
+        that.proportionData = [];that.groupNameData=[];that.dataP=[];
+        pieData.forEach((item) => {
+          that.proportionData.push(item.proportion);
+          that.groupNameData.push(item.groupName);
+          that.dataP.push({
+            name:item.groupName,
+            value:item.proportion.split('%')[0]
+          })
+        })
+      };
     },
   },
   beforeDestroy(){

src/views/ty/index.vue

@@ -153,7 +153,7 @@ import * as echarts from "echarts";
 
 // 引入api
 import * as homeApi from '@/api/home'
-
+let lineChart1 = null, lineChart2 = null;
 export default {
   components: {
 
@@ -241,7 +241,7 @@ export default {
         this.ty_bar1()//24小时总服务
         this.ty_pieDo()//右上角占比
         this.ty_bar3()//右下角趋势图
-      }, 200);
+      }, 500);
     }) 
 
 
@@ -264,7 +264,9 @@ export default {
 
     ty_bar1() {
       let that = this;
-      // var xData = that.data24hX;
+      lineChart1 = echarts.init(this.$refs.dinschart);
+      
+      function run(){
         var data24h = that.data24h;
         let max=data24h[0];
         for (let i = 0; i < data24h.length; i++) {
@@ -396,59 +398,24 @@ export default {
           },
           ]
         }
-
+        option && lineChart1.setOption(option);
-      function run(myChart){
-        that.getData24h();
-        let data24h = that.data24h;
-        let max=data24h[0];
-        for (let i = 0; i < data24h.length; i++) {
-          if (data24h[i]>max) {
-            max = data24h[i];
-          }
-        }
-        let dataLenArr = [], dataBGArr = [];
-        data24h.map(item=>{
-          dataLenArr.push(0);// 获取和数据一样长度的底部图形数组；
-          dataBGArr.push(max);// 数组最大值做背景柱形
-        })
-        myChart.setOption({
-          animation: true,
-          xAxis: {
-            data: that.data24hX
-          },
-          series: [{
-              type: 'bar',
-              data: data24h,
-            },
-            {
-              type: 'scatter',
-              data: dataLenArr
-            },
-            {
-              name: '背景',
-              type: 'bar',
-              data: dataBGArr
-            },
-          ]
-        });
       }
-      // 加延时器使图像绘制获取元素宽高最新的值2
+      run();
-      setTimeout(()=>{
-        var myChart = echarts.init(this.$refs.dinschart);
-        option && myChart.setOption(option);
       that.timer1 = setInterval(function () {
-          myChart.clear();
+        lineChart1.clear();
-          option && myChart.setOption(option);
+        run();
-          run(myChart);
       }, 3000);
-      }, 200)
     },
 
     ty_bar3() {
       let that = this;
       var chartDom = document.getElementById("pcgchart2");
+      lineChart2 = echarts.init(chartDom);
+      var option;
+
+      function run(){
+        // 获取新数据-处理--改用ws处理数据
         
-      var option
         var xData = that.rsqsXData;
         var color = ['#FF99CC', '#6666FF', '#FF6600', '#7049f0', '#fa704d', '#01babc',]
         var name = that.rsqsDataName
@@ -623,81 +590,16 @@ export default {
           },
           series: series,
         }
-      function run(myChart){
-        // 获取新数据-处理
-        // that.getGcgNumDatas();
-        setTimeout(() => {
-          // var xData = this.rsqsXData;
-          var data = that.rsqsDataAll;
         
-          var series = [];
+        option && lineChart2.setOption(option);
-          for (var i = 0; i < data.length; i++) {
-            series.push({
-              name: name[i],
-              type: "line",
-              symbolSize: 3,//标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
-              symbol: 'circle',//标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
-              smooth: true, //是否平滑曲线显示
-              showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
-              areaStyle: {
-                normal: {
-                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                    offset: 0,
-                    color: color[i]
-                  }, {
-                    offset: 0.8,
-                    color: 'rgba(255,255,255,0)'
-                  }], false),
-                  // shadowColor: 'rgba(255,255,255, 0.1)',
-                  shadowBlur: 10,
-                  opacity: 0.3,
-                }
-              },
-              itemStyle: {
-                normal: {
-                  color: color[i],
-                  lineStyle: {
-                    width: 1,
-                    type: 'solid' //'dotted'虚线 'solid'实线
-                  },
-                  borderColor: color[i], //图形的描边颜色。支持的格式同 color
-                  borderWidth: 8,//描边线宽。为 0 时无描边。[ default: 0 ] 
-                  barBorderRadius: 0,
-                  label: {
-                    show: false,
-                  },
-                  opacity: 0.5,
       }
-              },
-              markPoint: {
-                data: [
-                  {
-                    name: '最大值',
-                    type: 'max'
-                  }
-                ]
 
-              },
+      run();
-              data: data[i],
-
-            })
-          }
-          myChart.setOption({
-            xAxis: [{data: xData}],
-            series: series
-          });
-        }, 200);
       
-      }
-      setTimeout(()=>{
-        var myChart = echarts.init(chartDom);
-        option && myChart.setOption(option);
       that.timer2 = setInterval(function () {
-          myChart.clear();
+        lineChart2.clear();
-          option && myChart.setOption(option);
+        run();
-          run(myChart);
+      }, 3000);
-        }, 2000);
-      }, 600)
     },
     ty_pieDo(){
       let that = this;