模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/PictorialBar.vue

@@ -1,188 +1,253 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
   <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
      <div class="echarts-content" ref="chart"></div>
   </div>
</template>

<script>
  import * as echarts from "echarts";
  import {
    onlinegroupVolAnalysis
  } from '@/assets/js/api'
  export default {
    name: "PictorialBar",
    chart: "",
    chartData: {},
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    data() {
      return {}
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      organizeData(data) {
        let option = {
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
          legend: {
            data: ['在线电压', '组端电压'],
            top: '4%',
            right: '8%',
            icon: 'rect',
            textStyle: {
              color: '#fff',
            }
          },
          xAxis: {
            type: 'category',
            axisLabel: {
              color: '#fff',
              interval: 0,
            },
            axisLine: {
              lineStyle: {
                color: "#007DD140",
              }
            },
            data: data.xData,
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                color: '#007DD140',
                type: 'dashed',
              }
            }
          },
          series: []
        };
import * as echarts from "echarts";
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "PictorialBar",
   chart: "",
   chartData: {},
   props: {
      id: {
         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) => {
            console.log(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 = {
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 20
            },
            tooltip: {
               trigger: 'item',
               axisPointer: {
                  type: 'shadow'
               },
            },
            legend: {
               data: ['在线电压', '组端电压'],
               top: '4%',
               right: '8%',
               icon: 'rect',
               textStyle: {
                  color: '#fff',
               }
            },
            xAxis: {
               type: 'category',
               axisLabel: {
                  color: '#fff',
                  interval: 0,
               },
               axisLine: {
                  lineStyle: {
                     color: "#007DD140",
                  }
               },
               data: data.xData,
            },
            yAxis: {
               axisLabel: {
                  color: '#fff',
               },
               splitLine: {
                  lineStyle: {
                     color: '#007DD140',
                     type: 'dashed',
                  }
               }
            },
            series: []
         };

        data.series.map((item) => {
          option.series.push({
            name: item.name,
            type: "pictorialBar",
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              color: item.color
            },
            data: item.data
          })
        })
         data.series.map((item) => {
            option.series.push({
               name: item.name,
               type: "pictorialBar",
               symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
               itemStyle: {
                  color: item.color
               },
               data: item.data
            })
         })

        option.series[1]['barGap'] = '-1%'
         option.series[1]['barGap'] = '-1%'

        // 设置配置项
        this.setOption(option);
      },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        onlinegroupVolAnalysis(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              series: [{
                  name: "在线电压",
                  data: [],
                  color: '#E85D22'
                },
                {
                  name: "组端电压",
                  data: [],
                  color: '#2EEA9D'
                }
              ]
            }
            let resData = res.data.data;
            for (let key in resData) {
              let seriesData = resData[key]
              if (key == '在线电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[0].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[0].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              } else if (key == '组端电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[1].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[1].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              }
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        setTimeout(() => {
          this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
            this.setData(this.$options.chartData);
          }
        }, 300)
      }
    },
    mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);
         // 设置配置项
         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/onlinegroupVolAnalysis/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               xData: [],
               series: [{
                  name: "在线电压",
                  data: [],
                  color: '#E85D22'
               },
               {
                  name: "组端电压",
                  data: [],
                  color: '#2EEA9D'
               }
               ]
            }
            let resData = res.data;
            for (let key in resData) {
               let seriesData = resData[key]
               if (key == '在线电压') {
                  for (let jey in seriesData) {
                     if (typeof seriesData[jey] == 'string') {
                        optionData.series[0].data.push({
                           name: jey,
                           value: Number(seriesData[jey].split('%')[0])
                        })
                     } else {
                        optionData.series[0].data.push({
                           name: jey,
                           value: seriesData[jey]
                        })
                     }
                  }
               } else if (key == '组端电压') {
                  for (let jey in seriesData) {
                     if (typeof seriesData[jey] == 'string') {
                        optionData.series[1].data.push({
                           name: jey,
                           value: Number(seriesData[jey].split('%')[0])
                        })
                     } else {
                        optionData.series[1].data.push({
                           name: jey,
                           value: seriesData[jey]
                        })
                     }
                  }
               }
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
               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);
   },
   destroyed() {
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>

</style>