模块添加双击放大功能

whyczyk

2021-10-18 edba26ba8377814d94b65b4a1a1fe04f0365afc9

 src/components/charts/MonCap.vue

@@ -1,5 +1,5 @@
<template>
   <div class="flex-box" @click="toParentPage">
   <div class="flex-box" @click="toParentPage" @dblclick="dblclick">
      <div class="flex-box-body">
         <circle-chart id="circleChart" ref="circleChart"></circle-chart>
      </div>
@@ -17,9 +17,7 @@

<script>
import CircleChart from "@/components/charts/CircleChart";
import {
   batteryAlarmMonCapacity
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
export default {
   name: "MonCap",
   components: {
@@ -54,10 +52,46 @@
               color: '#F3E501',
            }
            ]
         }
         },
         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.$refs.circleChart.resize();
      },
      toParentPage() {
         window.parent.parent.postMessage({
            cmd: "syncPage",
@@ -80,58 +114,50 @@
               chart.resize();
            } else {
               this.postData()
               setInterval(() => {
                  this.postData()
               }, 3000)
            }

         })
      },
      postData() {
         let userId = localStorage.getItem('userId');
         let params = {
            userId: userId
         }
         batteryAlarmMonCapacity(params).then((res) => {
            if (res.data.code == 1) {
               let optionData = {
                  circle: [{
                     name: '告警数',
                     value: 10,
                     color: '#00DFFC',
                  },
                  {
                     name: '告警总数',
                     value: 10,
                     color: '#ED4882',
                  },
                  {
                     name: '告警机房数',
                     value: 10,
                     color: '#2EEA9D',
                  },
                  ]
               }
               let resData = res.data.data;
               for (let key in resData) {
                  optionData.circle.map(item => {
                     if (item.name == key) {
                        if (typeof resData[key] == 'string') {
                           item.value = Number(resData[key].split('%')[0])
                        } else {
                           item.value = resData[key]
                        }
                     }
                  })
               }
               this.chart = optionData;
               let chart = this.$refs.circleChart;
               chart.setData(optionData.circle);
               chart.resize();
         this.websock = new WebSocketClass(`/screen/batteryAlarm/monCapacity/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               circle: [{
                  name: '单体容量高告警',
                  value: 0,
                  color: '#00DFFC',
               },
               {
                  name: '单体容量低告警',
                  value: 0,
                  color: '#ED4882',
               },
               ]
            }
         }).catch((err) => {
            console.log(err)
         });
            let resData = res.data;
            for (let key in resData) {
               optionData.circle.map(item => {
                  if (item.name == key) {
                     if (typeof resData[key] == 'string') {
                        item.value = Number(resData[key].split('%')[0])
                     } else {
                        item.value = resData[key]
                     }
                  }
               })
            }
            this.chart = optionData;
            let chart = this.$refs.circleChart;
            chart.setData(optionData.circle);
            chart.resize();
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      resize() {
         this.$refs.circleChart.resize();