模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/monomerVoltage.vue

@@ -1,163 +1,270 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="monomerVoltage">
   <div class="echarts-wrapper" @click="toParentPage" @dblclick="dblclick">
      <div class="echarts-content" ref="monomerVoltage">

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

<script>
import * as echarts from 'echarts';

import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
// 单体电压、内阻和温度 页面
export default {
  name: "monomerVoltage",
  chart: "",
  props: {
    id: {
      require: true,
      type: String,
      default: "",
    },
    name: {
      type: String,
      default: ""
    },
    top: {
      type: Number,
      default: 15,
    },
    bottom: {
      type: Number,
      default: 60
    },
    space: {
      type: Number,
      default: 4
    },
  },
  data() {
    return {
    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData() {
        let option = {
                // title: {
                //     text: '世界人口总量',
                //     subtext: '数据来自网络'
                // },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    right:"4%",
                    data: ['单体电压', '单体内阻','单体温度'],
                    itemStyle:{
                        right:"0",
                    },
                    textStyle:{
                      color:"#fff"
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    //分格线
                    splitLine: {
                        show:true,
                        lineStyle: {
                            color: '#254389'
                        }
                    },
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    //坐标轴
                    axisLine: {
                        lineStyle:{
                          color:"#254389"
                        }
                    },
                    //坐标值标注
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',
                        }
                    },
                    
                    
                    data: ['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例']
                },
                series: [
                    {
                        name: '单体电压',
                        type: 'bar',
                        data: [24, 18, 38, 31, 24, 13],
                        itemStyle:{
                            color:'#FED601'
                        }
                    },
                    {
                        name: '单体内阻',
                        type: 'bar',
                        data: [19, 28, 46, 24, 14, 9],
                        itemStyle:{
                            color:'#67E0E3'
                        }
                    },
                    {
                        name: '单体温度',
                        type: 'bar',
                        data: [15, 22, 36, 15, 21, 8],
                        itemStyle:{
                            color:'#EB6F49'
                        }
                    }
                ]
            };
            this.setOption(option);
    },
    resize() {
      let self = this;
      setTimeout(function(){
        self.$options.chart.resize();
        self.setData(null);
      },300)
      
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.monomerVoltage);
   name: "monomerVoltage",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
      name: {
         type: String,
         default: ""
      },
      top: {
         type: Number,
         default: 15,
      },
      bottom: {
         type: Number,
         default: 60
      },
      space: {
         type: Number,
         default: 4
      },
   },
   data() {
      return {
         userId: "",
         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.name == '单体电压高告警' || params.name == '单体电压低告警') {
               name = '单体电压';
            } else if (params.name == '单体内阻高告警' || params.name == '单体内阻低告警') {
               name = '单体内阻';
            } else if (params.name == '单体温度高告警' || params.name == '单体温度低告警') {
               name = '单体温度';
            }
            checkboxs.dcgj.map(item => {
               if (item.label == name) {
                  console.log(name)
                  this.toParentPage(item.value)
               }
            })
         })
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/batteryAlarm/monVRTAnalysis/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         let self = this;
         let yAxisData = [];
         let Data = [{
            name: '告警数',
            type: 'bar',
            data: [],
            itemStyle: {
               normal: {
                  color: (params) => {
                     let colorList = ['#37a9b3', '#f3535f', '#ff8b00', '#757ffb', '#4ba0d9', '#7fc57c']
                     return colorList[params.dataIndex]
                  }
               },
            },
         }];
         if (res.code == 1) {
            let result = res.data;
            for (const key in result) {
               for (const item in result[key]) {
                  yAxisData.push(item);
                  Data[0].data.push(result[key][item])
               }
            }
            self.optionSet(yAxisData, Data);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(dataList) {
         let self = this;
         // 存值
         self.$options.chartData = dataList;
         if (!dataList) {
            self.postData()
         } else {
            self.optionSet(dataList.yAxisData, dataList.data);
         }
      },
      optionSet(yAxisData, data) {
         let option = {
            tooltip: {
               trigger: 'axis',
               axisPointer: {
                  type: 'shadow'
               }
            },
            grid: {
               top: 20,
               right: 40,
               bottom: 20,
               left: '3%',
               containLabel: true
            },
            xAxis: {
               type: 'value',
               //坐标值标注
               axisLabel: {
                  show: true,
                  textStyle: {
                     color: '#fff',
                  }
               },
               //分格线
               splitLine: {
                  show: true,
                  lineStyle: {
                     color: '#254389'
                  }
               },
               boundaryGap: [0, 0.01]
            },
            yAxis: {
               type: 'category',
               //坐标轴
               axisLine: {
                  lineStyle: {
                     color: "#254389"
                  }
               },
               //坐标值标注
               axisLabel: {
                  show: true,
                  textStyle: {
                     color: '#fff',
                  }
               },

    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }

               data: yAxisData,//['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例']
            },
            series: data
            // [
            //     {
            //         name: '单体电压',
            //         type: 'bar',
            //         data: [24, 18, 38, 31, 24, 13],
            //         itemStyle:{
            //             color:'#FED601'
            //         }
            //     },
            //     {
            //         name: '单体内阻',
            //         type: 'bar',
            //         data: [19, 28, 46, 24, 14, 9],
            //         itemStyle:{
            //             color:'#67E0E3'
            //         }
            //     },
            //     {
            //         name: '单体温度',
            //         type: 'bar',
            //         data: [15, 22, 36, 15, 21, 8],
            //         itemStyle:{
            //             color:'#EB6F49'
            //         }
            //     }
            // ]
         };
         this.setOption(option);
      },
      resize() {
         let self = this;
         setTimeout(function () {
            self.$options.chart.resize();
            self.setData(self.$options.chartData);
         }, 300)

      }
   },
   mounted() {
      //   获取userId
      this.userId = localStorage.getItem("userId");
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.monomerVoltage);

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

<style scoped>

</style>