模块socket优化请求数据

whyczyk

2021-10-09 9fc3a1d5a70a5af805b37476d47331dad0b21d65

 src/components/charts/histogramAlternating.vue

@@ -12,6 +12,7 @@

<script>
import * as echarts from 'echarts';
import { WebSocketClass } from '@/assets/js/socket'
// 交流ABC 页面
export default {
   name: "histogramAlternating",
@@ -44,7 +45,8 @@
      return {
         gjjfzs: 0,
         gjjfsbl: 0,
         userId: ""
         userId: "",
         websock: null
      }
   },
   methods: {
@@ -64,6 +66,33 @@
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage, 4000)
      },
      wsMessage(res) {
         let self = this;
         if (res.code == 1) {
            let result = res.data[0];
            let zsObj = res.data[1];
            let dataList = [];
            let dataName = [];
            for (const key in result) {
               dataName.push(key);
               dataList.push(result[key]);
            }
            self.$options.chartData.dataList = dataList;
            self.$options.chartData.dataName = dataName;
            self.$options.chartData.gjjfzs = zsObj.告警机房总数;
            self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
            self.optionSet(self.$options.chartData);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(data) {
         let self = this;
         if (data) {
@@ -72,30 +101,7 @@
            self.gjjfsbl = data.gjjfsbl;
            self.optionSet(self.$options.chartData);
         } else {
            self.$axios({
               method: "get",
               url: "/powerAlarm/acABC",
               params: {
                  userId: self.userId
               }
            }).then(res => {
               if (res.data.code == 1) {
                  let result = res.data.data[0];
                  let zsObj = res.data.data[1];
                  let dataList = [];
                  let dataName = [];
                  for (const key in result) {
                     dataName.push(key);
                     dataList.push(result[key]);
                  }
                  self.$options.chartData.dataList = dataList;
                  self.$options.chartData.dataName = dataName;
                  self.$options.chartData.gjjfzs = zsObj.告警机房总数;
                  self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                  self.optionSet(self.$options.chartData);
                  console.log(res)
               }
            })
            self.postData()
         }
      },
      optionSet(data) {
@@ -150,6 +156,12 @@

         let option = {
            // backgroundColor: "rgba(72, 84, 96,1.0)",
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: {
               type: 'category',
               data: data.dataName,
@@ -190,7 +202,6 @@
            series: [{
               type: 'custom',
               renderItem: (params, api) => {
                  console.log(14777, api.style().aaa)
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                     type: 'group',