监听传值开启关闭socket

whyczyk

2022-02-24 4f7c5be81febfa5f61013f021182e2725ff63511

 src/components/charts/latticeBar.vue

@@ -1,190 +1,310 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
   <div class="echarts-wrapper" @dblclick="dblclick">
      <div class="echarts-content" ref="chart">

    </div>
  </div>
      </div>
   </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  export default {
    name: "latticeBar",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
import {
   chartFontsize
} from '@/assets/js/chartFontsize'
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "latticeBar",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
   },
   data() {
      return {
         websock: null
      }
   },
   methods: {
      findParents(node, select) {
         var parent = node.parentNode;
         if (parent === null || parent.className.indexOf(select) != -1) {
            return parent;
         } else {
            return this.findParents(parent, select);
         }
      },
      dblclick(e) {
         this.isAllScreen = !this.isAllScreen
         let parents = this.findParents(e.currentTarget, 'vdr')
         if (this.isAllScreen) {
            this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
            parents.style.transform = 'none';
            parents.style.width = '100%';
            parents.style.height = '100%';
            parents.style.position = 'fixed';
            parents.style.left = 0;
            parents.style.right = 0;
            parents.style.bottom = 0;
            parents.style.top = 0;
            parents.style.zIndex = 99999;
         } else {
            parents.style.transform = this.parentsStyle.transform;
            parents.style.width = this.parentsStyle.width;
            parents.style.height = this.parentsStyle.height;
            parents.style.position = this.parentsStyle.position;
            parents.style.left = 'initial';
            parents.style.right = 'initial';
            parents.style.bottom = 'initial';
            parents.style.top = 'initial';
            parents.style.zIndex = 'auto';
         }
         this.$options.chart.resize();
      },
      toParentPage(value) {
         if (typeof (value) == 'string') {
            window.parent.parent.postMessage({
               cmd: "syncPage",
               params: {
                  pageInfo: {
                     label: "电池实时告警",
                     name: "batteryrTimequery",
                     src: "#/batteryrTimequery/?alarmType=" + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            let name;
            if (params.seriesName == '放电') {
               name = '放电电流';
            } else if (params.seriesName == '充电') {
               name = '充电电流';
            }
            checkboxs.dcgj.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      organizeData(data) {
         let option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               },
               formatter: function (item) {
                  let str = item[0].axisValueLabel + '<br />';
                  item.map(jtem => {
                     if (jtem.seriesName !== 'bg') {
                        str += jtem.seriesName + ': ' + jtem.data + '<br />'
                     }
                  });
                  return str
               }
            },
            legend: {
               top: '2%',
               itemWidth: chartFontsize(18),
               itemHeight: chartFontsize(12),
               textStyle: {
                  color: '#ffffff',
                  fontSize: chartFontsize(14),
               },
               data: ['访问量', '订单量']
            },
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: [{
               type: 'category',
               data: [],
               axisLine: {
                  lineStyle: {
                     color: '#007ed3'
                  }
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  color: '#FFFFFF',
                  fontSize: chartFontsize(14),
                  interval: 0
               }
            }],
            yAxis: [{
               max: 200,
               splitLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: '#007ed3'
                  }
               },
               axisLabel: {
                  color: '#FFFFFF',
                  fontSize: chartFontsize(14),
               },
            }],
            series: []
         };
         let max;
         data.series.map(item => {
            max = item.data[0];
            item.data.map(jtem => {
               if (jtem > max) {
                  max = jtem;
               }
            })
         });
         option.yAxis[0].max = max;
         option.xAxis[0].data = data.xData;
         let legendData = [];
         data.series.map(item => {
            legendData.push(item.name);
         })
         option.legend.data = legendData;
         for (let i = 0; i < data.series.length; i++) {
            let maxArr = [];
            data.series[i].data.map(() => {
               maxArr.push(max)
            })
            let plusMinus = (i % 2);
            let offset;
            if (plusMinus == 0) {
               offset = '-65%'
            } else if (plusMinus == 1) {
               offset = '65%'
            }
            option.series.push({
               name: data.series[i].name,
               type: 'pictorialBar',
               symbol: 'roundRect',
               itemStyle: {
                  color: data.series[i].color
               },
               symbolRepeat: true,
               symbolSize: ["16%", "4%"],
               symbolMargin: 2,
               symbolPosition: 'start',
               symbolOffset: [offset, 0],
               z: -20,
               data: data.series[i].data,
            });
            option.series.push({
               name: 'bg',
               type: 'pictorialBar',
               symbol: 'roundRect',
               itemStyle: {
                  color: '#052b6c'
               },
               symbolRepeat: true,
               symbolSize: ["16%", "4%"],
               symbolMargin: 2,
               symbolPosition: 'start',
               symbolOffset: [offset, 0],
               z: -30,
               data: maxArr
            });
         }
         // 设置配置项
         this.setOption(option);
      },
      setData(sendData) {
         if (sendData) {
            this.$options.chartData = sendData;
            this.organizeData(sendData)
         } else {
            this.postData()
         }
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/batteryAlarm/chargeAnalysis/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               xData: [],
               series: [{
                  name: '放电',
                  data: [],
                  color: '#90ec7d'
               }, {
                  name: '充电',
                  data: [],
                  color: '#ff6b6b'
               }]
            }
            let resData = res.data;
            for (let key in resData.reCharge) {
               if (typeof resData.reCharge[key] == 'string') {
                  optionData.series[0].data.push(Number(resData.reCharge[key].split('%')[0]))
               } else {
                  optionData.series[0].data.push(resData.reCharge[key])
               }
            }
            for (let key in resData.disCharge) {
               optionData.xData.push(key)
               if (typeof resData.disCharge[key] == 'string') {
                  optionData.series[1].data.push(Number(resData.disCharge[key].split('%')[0]))
               } else {
                  optionData.series[1].data.push(resData.disCharge[key])
               }
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
         }
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
               this.setData(this.$options.chartData);
            }
         }, 300)
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      stop() {
         this.websock.status = "close"
         this.websock.stop()
      },
      open() {
         this.websock.status = "start"
         this.websock.start()
      }
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (item) {
              let str = item[0].axisValueLabel + '<br />';
              item.map(jtem => {
                if (jtem.seriesName !== 'bg') {
                  str += jtem.seriesName + ': ' + jtem.data + '<br />'
                }
              });
              return str
            }
          },
          legend: {
            top: '2%',
            itemWidth: chartFontsize(18),
            itemHeight: chartFontsize(12),
            textStyle: {
              color: '#ffffff',
              fontSize: chartFontsize(12),
            },
            data: ['访问量', '订单量']
          },
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          xAxis: [{
            type: 'category',
            data: [],
            axisLine: {
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
              interval: 0
            }
          }],
          yAxis: [{
            max: 200,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#007ed3'
              }
            },
            axisLabel: {
              color: '#FFFFFF',
              fontSize: chartFontsize(12),
            },
          }],
          series: []
        };

        let max;
        sendData.series.map(item => {
          max = item.data[0];
          item.data.map(jtem => {
            if (jtem > max) {
              max = jtem;
            }
          })
        });
        option.yAxis[0].max = max;
        option.xAxis[0].data = sendData.xData;
        let legendData = [];
        sendData.series.map(item => {
          legendData.push(item.name);
        })
        option.legend.data = legendData;
        for (let i = 0; i < sendData.series.length; i++) {
          let maxArr = [];
          sendData.series[i].data.map(() => {
            maxArr.push(max)
          })
          let plusMinus = (i % 2);
          let offset;
          if (plusMinus == 0) {
            offset = '-65%'
          } else if (plusMinus == 1) {
            offset = '65%'
          }
          option.series.push({
            name: sendData.series[i].name,
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: sendData.series[i].color
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -20,
            data: sendData.series[i].data,
          });
          option.series.push({
            name: 'bg',
            type: 'pictorialBar',
            symbol: 'roundRect',
            itemStyle: {
              color: '#052b6c'
            },
            symbolRepeat: true,
            symbolSize: ["16%", "4%"],
            symbolMargin: 2,
            symbolPosition: 'start',
            symbolOffset: [offset, 0],
            z: -30,
            data: maxArr
          });
        }
        // 设置配置项
        this.setOption(option);
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          this.setData(this.$options.chartData);
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

      window.addEventListener('resize', this.resize);
    },
    destroyed() {
      window.removeEventListener('resize', this.resize);
    }
  }
      window.addEventListener('resize', this.resize);
   },
}
</script>

<style scoped>

</style>