整流器模块反馈问题修复

whyczyk

2021-10-12 672c9c35b818c03090dbdb13425b04308855a963

 src/components/charts/imgPieChart.vue

@@ -1,185 +1,254 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart">
   <div class="echarts-wrapper" @click="toParentPage">
      <div class="echarts-content" ref="chart">

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

<script>
  import * as echarts from 'echarts';
  //引入chart字体自适应
  import {
    chartFontsize
  } from '@/assets/js/chartFontsize'
  const pieImg = require('../../assets/images/rectifier-img.png');
  export default {
    name: "imgPieChart",
    chart: "",
    chartData: {},
    props: {
      id: {
        require: true,
        type: String,
        default: "",
      },
    },
    data() {
      return {
import * as echarts from 'echarts';
//引入chart字体自适应
import {
   chartFontsize
} from '@/assets/js/chartFontsize'
import { WebSocketClass } from '@/assets/js/socket'
const pieImg = require('../../assets/images/rectifier-img.png');
export default {
   name: "imgPieChart",
   chart: "",
   chartData: {},
   props: {
      id: {
         require: true,
         type: String,
         default: "",
      },
   },
   data() {
      return {
         websock: null
      }
   },
   methods: {
      toParentPage() {
         window.parent.parent.postMessage({
            cmd: "syncPage",
            params: {
               pageInfo: {
                  label: "电源实时告警",
                  name: "powerRealtimeInfo",
                  src: "#/powerRealtimeInfo",
                  closable: true
               },
            }
         }, "*");
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      organizeData(data) {
         let imgWidth = this.$refs.chart.clientWidth * 0.14;
         let imgheight = imgWidth / 0.82;
         let centerx = this.$refs.chart.clientWidth / 2;
         let centery = this.$refs.chart.clientHeight / 2;
         let option = {
            color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
            graphic: [{
               zlevel: 5,
               type: 'image',
               left: centerx - imgWidth / 2,
               top: centery - imgheight / 2,
               bounding: 'raw',
               style: {
                  image: pieImg,
                  width: imgWidth,
                  height: imgheight,
               }
            }],

      }
    },
    methods: {
      setOption(opt) {
        this.$options.chart.setOption(opt);
      },
      setData(sendData) {
        this.$options.chartData = sendData;
        let imgWidth = this.$refs.chart.clientWidth * 0.14;
        let imgheight = imgWidth / 0.82;
        let centerx = this.$refs.chart.clientWidth / 2;
        let centery = this.$refs.chart.clientHeight / 2;
        let option = {
          color: ['#f3535f', '#7fc57c', '#ffcb29', '#f67f21'],
          graphic: [{
            zlevel: 5,
            type: 'image',
            left: centerx - imgWidth / 2,
            top: centery - imgheight / 2,
            bounding: 'raw',
            style: {
              image: pieImg,
              width: imgWidth,
              height: imgheight,
            }
          }],
            series: [{
               name: '业务警种',
               type: 'pie',
               radius: ['35%', '65%'],
               itemStyle: {
                  borderColor: '#021651',
                  borderWidth: 6,
               },
               labelLine: {
                  length: 20,
                  length2: 0,
                  lineStyle: {
                     color: '#007ed3'
                  }
               },
               label: {
                  formatter: function (params) {
                     return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                  },
                  distanceToLabelLine: 0,
                  rich: {
                     yellow: {
                        color: "#f67f21",
                        fontSize: chartFontsize(20),
                        fontWeight: '600',
                        padding: [chartFontsize(4), 0, 0, 0],
                        align: 'center'
                     },
                     white: {
                        color: "#ffffff",
                        align: 'center',
                        fontSize: chartFontsize(16),
                        padding: chartFontsize(4)
                     },
                     hr: {
                        borderColor: '#007ed3',
                        width: '100%',
                        borderWidth: 1,
                        height: 0,
                     }
                  }
               },
               data: data.data,
               zlevel: 1
            },
            {
               name: '',
               type: 'pie',
               radius: '50%',
               emphasis: {
                  scale: false
               },
               data: [{
                  value: 20,
                  name: ''
               }],
               label: {
                  show: false
               },
               itemStyle: {
                  color: 'rgba(7,56,128,0.2)'
               },
               zlevel: 2
            },
            {
               name: '',
               type: 'pie',
               radius: '46%',
               emphasis: {
                  scale: false
               },
               data: [{
                  value: 20,
                  name: ''
               }],
               label: {
                  show: false
               },
               itemStyle: {
                  color: '#00b2e0'
               },
               zlevel: 3
            },
            {
               name: '',
               type: 'pie',
               radius: '35%',
               emphasis: {
                  scale: false
               },
               data: [{
                  value: 20,
                  name: ''
               }],
               label: {
                  show: false
               },
               itemStyle: {
                  color: '#ffffff'
               },
               zlevel: 4
            },
            ]
         };
         // 设置配置项
         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/powerAlarm/rectifier/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         if (res.code == 1) {
            let optionData = {
               data: [{
                  value: 0,
                  name: '整流器交流异常'
               },
               {
                  value: 0,
                  name: '整流器过流'
               },
               {
                  value: 0,
                  name: '整流器总故障'
               },
               {
                  value: 0,
                  name: '整流器欠压'
               },
               {
                  value: 0,
                  name: '整流器过压'
               },
               ]
            }
            let resData = res.data;
            for (let key in resData) {
               optionData.data.map(item => {
                  if (item.name == key) {
                     item.value = resData[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);
      }
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.chart);

          series: [{
              name: '业务警种',
              type: 'pie',
              radius: ['35%', '65%'],
              itemStyle: {
                borderColor: '#021651',
                borderWidth: 6,
              },
              labelLine: {
                length: 20,
                length2: 0,
                lineStyle: {
                  color: '#007ed3'
                }
              },
              label: {
                formatter: function (params) {
                  return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '}';
                },
                distanceToLabelLine: 0,
                rich: {
                  yellow: {
                    color: "#f67f21",
                    fontSize: chartFontsize(16),
                    fontWeight: '600',
                    padding: [chartFontsize(4), 0, 0, 0],
                    align: 'center'
                  },
                  white: {
                    color: "#ffffff",
                    align: 'center',
                    fontSize: chartFontsize(12),
                    padding: chartFontsize(4)
                  },
                  hr: {
                    borderColor: '#007ed3',
                    width: '100%',
                    borderWidth: 1,
                    height: 0,
                  }
                }
              },
              data: sendData.data,
              zlevel: 1
            },
            {
              name: '',
              type: 'pie',
              radius: '50%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: 'rgba(7,56,128,0.2)'
              },
              zlevel: 2
            },
            {
              name: '',
              type: 'pie',
              radius: '46%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: '#00b2e0'
              },
              zlevel: 3
            },
            {
              name: '',
              type: 'pie',
              radius: '35%',
              emphasis: {
                scale: false
              },
              data: [{
                value: 20,
                name: ''
              }],
              label: {
                show: false
              },
              itemStyle: {
                color: '#ffffff'
              },
              zlevel: 4
            },
          ]
        };
        // 设置配置项
        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);
   },
   destroyed() {
      this.websock.closeMyself()
      window.removeEventListener('resize', this.resize);
   }
}
</script>

<style scoped>

</style>