整流器模块反馈问题修复

whyczyk

2021-10-12 672c9c35b818c03090dbdb13425b04308855a963

 src/components/charts/histogramAlternating.vue

@@ -1,252 +1,366 @@
<template>
  <div class="echarts-wrapper echartsAlternating">
    <div class="echarts-content" ref="alternating">
   <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating" @click="toParentPage">
      <div class="echarts-content" ref="alternating">

    </div>
    <div class="titleShow">
        <span><i></i><span class="textTitle">告警机房总数:</span><span class="textValue">150</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">50</span></span>
    </div>
  </div>
      </div>
   </div>
</template>

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

import { WebSocketClass } from '@/assets/js/socket'
// 交流ABC 页面
export default {
  name: "histogramAlternating",
  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 {
   name: "histogramAlternating",
   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: {
      toParentPage() {
         window.parent.parent.postMessage({
            cmd: "syncPage",
            params: {
               pageInfo: {
                  label: "电源实时告警",
                  name: "powerRealtimeInfo",
                  src: "#/powerRealtimeInfo",
                  closable: true
               },
            }
         }, "*");
      },
      setOption(opt) {
         this.$options.chart.setOption(opt);
      },
      postData() {
         let userId = localStorage.getItem('userId');
         this.websock = new WebSocketClass(`/screen/powerAlarm/acABC/${userId}`, this.wsMessage)
      },
      wsMessage(res) {
         let self = this;
         if (res.code == 1) {
            let result = res.data[0];
            let dataList = [];
            let dataName = [];
            for (const key in result) {
               dataName.push(key);
               dataList.push(result[key]);
            }
            self.$options.chartData.dataList = dataList;
            self.$options.chartData.dataName = dataName;
            self.optionSet(self.$options.chartData);
         }
      },
      outClear() {
         this.websock.closeMyself()
         this.websock = null
         window.removeEventListener('resize', this.resize);
      },
      setData(data) {
         let self = this;
         if (data) {
            self.$options.chartData = data;
            self.optionSet(self.$options.chartData);
         } else {
            self.postData()
         }
      },
      optionSet(data) {
         const CubeLeft = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const xAxisPoint = shape.xAxisPoint
               const c0 = [shape.x - 10, shape.y]
               const c1 = [shape.x + 10, shape.y]
               const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]]
               const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]]
               ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
               ctx.stroke();
            }
         })
         const CubeRight = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const xAxisPoint = shape.xAxisPoint
               const c1 = [shape.x + 11, shape.y]
               const c2 = [xAxisPoint[0] + 11, xAxisPoint[1]]
               const c3 = [xAxisPoint[0] + 8 + 8, xAxisPoint[1] - 10]
               const c4 = [shape.x + 8 + 8, shape.y - 10]
               ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
               ctx.stroke();
            }
         })
         const CubeTop = echarts.graphic.extendShape({
            shape: {
               x: 0,
               y: 0
            },
            buildPath: function (ctx, shape) {
               const c1 = [shape.x - 10, shape.y - 1]
               const c2 = [shape.x + 10, shape.y - 1]
               const c3 = [shape.x + 15, shape.y - 9]
               const c4 = [shape.x - 5, shape.y - 9]
               ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
               ctx.stroke();
            }
         })
         echarts.graphic.registerShape('CubeLeft', CubeLeft)
         echarts.graphic.registerShape('CubeRight', CubeRight)
         echarts.graphic.registerShape('CubeTop', CubeTop)

    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        /*
        // 统计数据
        data:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
        }
        */ 
        
    const sideData = data.dataList.map(item => item + 2.5);//右边的面稍高一点

    let option = {
            // backgroundColor: "#ffffff",
            tooltip: {
                trigger: 'axis',
                formatter: "{b} : {c}",
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '10%',
                right: '5%',
                bottom: '10%',
                top: '17%',
                z: 22
            },
            xAxis: {
                data: data.nameList,
                //坐标轴
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                }
            },
            yAxis: {
                //坐标轴
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                //坐标值标注
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                    }
                },
                //分格线
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#000'
                    }
                }
            },
            series: [{
                name: '交流ABC',
                tooltip: {
                    show: true,
                    position: 'top'
                },
                type: 'bar',
                barWidth: 24.5,
                markPoint: {
                        itemStyle:{
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#0077EA" // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: "#451DD3" // 100% 处的颜色
                            }], false),
                            borderColor:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                            }, {
                                offset: 1,
                                color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                            }], false),
                        },
                        data: [
                            { value: 32, xAxis: 0, yAxis: 34},
                            { value: 43, xAxis: 1, yAxis: 45},
                            { value: 17, xAxis: 2, yAxis: 19},
                            { value: 27, xAxis: 3, yAxis: 29},
                        ]
                    },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#451DD3" // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "#0077EA" // 100% 处的颜色
                        }], false)
                    }
                },
                data: data.dataList,
                barGap: 0
            }, {
                type: 'bar',
                barWidth: 6.5,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: "#2663DA" // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: "#69CCF6" // 100% 处的颜色
                        }], false)
                    }
                },
                barGap: 0,
                data: sideData
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: '#00B6EE',
                    color: '#00B6EE'
                },
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-12'],
                //symbolRotate: -5,
                symbolPosition: 'end',
                data: data.dataList,
                z: 3
            }]
        };
        this.setOption(option);
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.alternating);
         let option = {
            // backgroundColor: "rgba(72, 84, 96,1.0)",
            grid: {
               top: 40,
               right: 20,
               left: 50,
               bottom: 30
            },
            xAxis: {
               type: 'category',
               data: data.dataName,
               show: true,
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: '#fff'
                  }
               },
               offset: 0,
               axisTick: {
                  show: false,
               },
               axisLabel: {
                  fontSize: 12
               }
            },
            yAxis: {
               type: 'value',
               show: true,
               axisLine: {
                  show: true,
                  lineStyle: {
                     color: 'white'
                  }
               },
               splitLine: {
                  show: false
               },
               axisTick: {
                  show: false
               },
               axisLabel: {
                  fontSize: 12
               },
            },
            series: [{
               type: 'custom',
               renderItem: (params, api) => {
                  const location = api.coord([api.value(0), api.value(1)])
                  return {
                     type: 'group',
                     children: [{
                        type: 'CubeLeft',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                              offset: 0,
                              color: "#0077EA"//api.style().fill
                           },
                           {
                              offset: 1,
                              color: "#451DD3"//'rgba(210, 218, 226,1.0)'
                           }
                           ])
                        }
                     },
                     {
                        type: 'CubeRight',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                              offset: 0,
                              color: "#2663DA"//api.style().fill
                           },
                           {
                              offset: 1,
                              color: "#69CCF6"//'rgba(210, 218, 226,1.0)'
                           }
                           ])
                        }
                     },
                     {
                        type: 'CubeTop',
                        shape: {
                           api,
                           xValue: api.value(0),
                           yValue: api.value(1),
                           x: location[0],
                           y: location[1],
                           xAxisPoint: api.coord([api.value(0), 0])
                        },
                        style: {
                           fill: "#00b6ee",
                        }
                     }
                     ]
                  }
               },
               data: data.dataList
            },
            {
               type: 'bar',
               name: '交流ABC',
               tooltip: {
                  show: true,
                  position: 'top'
               },
               barWidth: 24.5,
               markPoint: {
                  itemStyle: {
                     color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#0077EA" // 0% 处的颜色
                     }, {
                        offset: 1,
                        color: "#451DD3" // 100% 处的颜色
                     }], false),
                     borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "rgba(190,215,253,0.4)", // 0% 处的颜色 BED7FD
                     }, {
                        offset: 1,
                        color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                     }], false),
                  },
                  data: function () {
                     let thisArr = data.dataList.map((item, index) => {
                        let opt = {
                           value: item,
                           xAxis: index,
                           yAxis: item// !=0?item + 2 : item//椭圆的坐标
                        }
                        return opt;
                     })
                     return thisArr;
                  }()
               },
               barGap: 0,
               itemStyle: {
                  color: 'transparent'
               },
               data: data.dataList
            }

    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
            ]
         }
         this.setOption(option);
      },
      resize() {
         let self = this;
         setTimeout(() => {
            this.$options.chart.resize();
            this.setData(self.$options.chartData);
         }, 300)
      }
   },
   mounted() {
      //   获取userId
      this.userId = localStorage.getItem("userId");
      // 基于准备好的dom，初始化echarts实例
      this.$options.chart = echarts.init(this.$refs.alternating);

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

<style scoped>
    .echartsAlternating{
        position:relative;
    }
    .titleShow{
        position: absolute;
        top: 0;
        right: 0;
        text-align: right;
        overflow: hidden;

    }
    .titleShow i{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgb(246,127,33);
        margin-right: 5px;
        margin-bottom: 3px;
    }
    .titleShow .textTitle{
        display: inline-block;
        width: 92px;
        text-align: right;
        font-size: 12px;
        color: rgb(0,178,224);
    }
    .titleShow .textValue{
        display: inline-block;
        width: 40px;
        /* text-align: left; */
        text-align: left;
        font-size: 12px;
        color: rgb(246,127,33);
    }
.echartsAlternating {
   position: relative;
}
.titleShow {
   position: absolute;
   top: 0;
   right: 0;
   text-align: right;
   padding-right: 5%;
   overflow: hidden;
}
.titleShow i {
   display: inline-block;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: rgb(246, 127, 33);
   margin-right: 5px;
   margin-bottom: 3px;
}
.titleShow .textTitle {
   display: inline-block;
   /* width: 9rem; */
   text-align: right;
   font-size: 12px;
   color: rgb(0, 178, 224);
}
.titleShow .textValue {
   display: inline-block;
   width: 40px;
   /* text-align: left; */
   text-align: left;
   font-size: 12px;
   color: rgb(246, 127, 33);
}
</style>