整流器模块反馈问题修复

whyczyk

2021-10-12 672c9c35b818c03090dbdb13425b04308855a963

 src/components/charts/histogramAlternating.vue

@@ -1,351 +1,366 @@
<template>
  <div class="echarts-wrapper echartsAlternating" ref="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">{{ gjjfzs }}</span></span><br>
        <span><i></i><span class="textTitle">告警机房数比例:</span><span class="textValue">{{ gjjfsbl }}</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: "",
  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 {
        gjjfzs:0,
        gjjfsbl:0
    }
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        let self = this;
        if(data){
           self.$options.chartData = data;
           self.gjjfzs = data.gjjfzs;
           self.gjjfsbl = data.gjjfsbl;
           self.optionSet(self.$options.chartData);
        }else{
            self.$axios({
                method:"get",
                url:"/powerAlarm/acABC",
                params:{
                    userId:"1001"
                }
            }).then(res=>{
                if(res.data.code == 1){
                    let result = res.data.data[0];
                    let zsObj = res.data.data[1];
                    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.$options.chartData.gjjfzs = zsObj.告警机房总数;
                        self.$options.chartData.gjjfsbl = zsObj.告警机房数比例 + "%";
                        self.optionSet(self.$options.chartData);
                    console.log(res)
                }
            })
        }
    },
    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)
   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)


        let option = {
                // backgroundColor: "rgba(72, 84, 96,1.0)",
                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) => {
                            console.log(14777, api.style().aaa)
                            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
                    }
         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
            }

                ]
            }
            this.setOption(option);
    },
    resize() {
        let self = this;
      setTimeout(() => {
          this.$options.chart.resize();
          this.setData(self.$options.chartData);
        }, 300)
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.alternating);
            ]
         }
         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);
  }
      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;
        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);
    }
.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>