样式优化

whyczyk

2021-11-23 df282d846add2ca3cab2972464e7b3e928d3ec3d

 src/components/charts/RoseChartED.vue

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

<script>
import * as echarts from 'echarts';
import {
   endurance
} from '@/assets/js/api'
import { WebSocketClass } from '@/assets/js/socket'
import { checkboxs } from '@/assets/js/powerInfoData'
export default {
   name: "RoseChartED",
   chart: "",
@@ -20,24 +19,72 @@
      }
   },
   data() {
      return {}
      return {
         websock: null
      }
   },
   methods: {
      toParentPage() {
         window.parent.parent.postMessage({
            cmd: "syncPage",
            params: {
               pageInfo: {
                  label: "电池实时告警",
                  name: "batteryrTimequery",
                  src: "#/batteryrTimequery",
                  closable: true
               },
            }
         }, "*");
      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: "produceTotal",
                     src: "#/dataMager/produceTotal/?xuHang=" + value,
                     closable: true
                  },
               }
            }, "*");
         }
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
         this.$options.chart.on('click', (params) => {
            console.log(params)
            let name = params.name;
            checkboxs.jfxh.map(item => {
               if (item.label == name) {
                  this.toParentPage(item.value)
               }
            })
         })
      },
      organizeData(data) {
         let option = {
@@ -53,6 +100,9 @@
                     return data[params.dataIndex].color;
                  },
               },
               label: {
                  color: '#ffffff'
               },
               data: data
            }]
         };
@@ -66,53 +116,61 @@
            this.organizeData(sendData)
         } else {
            this.postData()
            setInterval(() => {
               this.postData()
            }, 3000)
         }
      },
      postData() {
         let userId = localStorage.getItem('userId');
         let params = {
            userId: userId
         }
         endurance(params).then((res) => {
            if (res.data.code == 1) {
               let optionData = [{
                  value: 0,
                  name: '续航1小时内',
                  color: '#E85D22'
               },
               {
                  value: 0,
                  name: '续航1小时到2小时',
                  color: '#76CFDD'
               },
               {
                  value: 0,
                  name: '续航2小时到3小时',
                  color: '#FEDB5B'
               },
               {
                  value: 0,
                  name: '续航3小时以上',
                  color: '#8278E9'
               },
               ]
               let resData = res.data.data;
               for (let key in resData) {
                  optionData.map(item => {
                     if (item.name == key) {
                        item.value = resData[key]
                     }
                  })
               }
               this.$options.chartData = optionData;
               this.organizeData(optionData)
         this.websock = new WebSocketClass(`/screen/batteryData/endurance/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = [{
               value: 0,
               name: '续航1小时内',
               color: '#E85D22'
            },
            {
               value: 0,
               name: '续航1小时到2小时',
               color: '#76CFDD'
            },
            {
               value: 0,
               name: '续航2小时到3小时',
               color: '#FEDB5B'
            },
            {
               value: 0,
               name: '续航3小时到5小时',
               color: '#8278E9'
            },
            {
               value: 0,
               name: '续航5小时到8小时',
               color: '#4ba0d9'
            },
            {
               value: 0,
               name: '续航8小时以上',
               color: '#7fc57c'
            },
            ]
            let resData = res.data;
            for (let key in resData) {
               optionData.map(item => {
                  if (item.name == key) {
                     item.value = resData[key]
                  }
               })
            }
         }).catch((err) => {
            console.log(err)
         });
            this.$options.chartData = optionData;
            this.organizeData(optionData)
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      resize() {
         setTimeout(() => {