提交内容

whychdw

2021-03-23 9993be09d9fff8f69b0b9cc88c90eecc6b1e772c

提交内容

 package-lock.json

Diff too large

 package.json

@@ -26,8 +26,8 @@
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11",
    "qs": "^6.6.0"
    "qs": "^6.6.0",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
@@ -50,4 +50,4 @@
    "last 2 versions",
    "not dead"
  ]
}
}

 src/components/charts/AcInput.vue

New file
@@ -0,0 +1,146 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                熔丝告警
            </div>
        </div>
    </div>
</template>

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

export default {
    name: "AcInput",
    chart: "",
    chartData: "",
    props: {
        acColor: {
            type:String,
            default: "#813a74"
        },
        resColor: {
            type:String,
            default: "#ff649d"
        },
    },
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(value) {
            let acColor = this.acColor;
            let resColor = this.resColor;
            let option = {
                title: {
                    text: value+'%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: "#fff",
                        fontSize: 40,
                    }
                },
                series: [
                    {
                        name: "",
                        type: 'gauge',
                        radius: '90%',
                        startAngle: 180.5,
                        endAngle: -0.5,
                        min: 0,
                        max: 100,
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                width: 40,
                                color: [
                                    [
                                        value / 100, acColor
                                    ],
                                    [
                                        1, resColor
                                    ]
                                ]
                            }
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false,
                        },
                        itemStyle: {
                            normal: {
                                color: '#FF0000',
                            }
                        },
                        data: [{
                            value: value,
                            name: '年售电量情况'
                        }]
                    }
                ]
            };

            // 设置配置项
            this.setOption(option);
        },
        resize() {
            this.setData(this.$options.chartData);
            this.$options.chart.resize();
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let value = 10;
        this.setData(value);

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

<style scoped>
.echarts-text-wrapper {
    position: absolute;
    top: 56%;
    left: 22.5%;
    width: 55%;
    text-align: center;
}
.color-strip {
    height: 4px;
}
.echarts-text {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 32px;
    background-color: #083880;
    border: 1px solid #01b1e0;
    border-radius: 16px;

}
</style>

 src/components/charts/CustomPie.vue

New file
@@ -0,0 +1,310 @@
<template>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import sigh from './images/sigh.png';
import {chartFontsize} from '@/assets/js/chartFontsize';

export default {
    name: "CustomPie",
    chart: "",
    chartData: "",
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
            this.$options.chartData = data;
            let angle = 0;
            let color = "#007CD0";
            let radius = 0.55;
            let lineWidth = 4;
            let width = this.$refs.chart.offsetWidth;
            let height = this.$refs.chart.offsetHeight;
            let realWidth = width > height ? height : width;
            let option = {
                legend: [
                    {
                        show: true,
                        type: "scroll",
                        orient: 'vertical',
                        align: 'left',
                        left: "10%",
                        bottom: 0,
                        data: ['监控器故障', '通讯故障'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        show: true,
                        type: "scroll",
                        orient: 'vertical',
                        align: 'left',
                        left: "40%",
                        bottom: 0,
                        data: ['交流总故障', '防雷器故障'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        show: true,
                        type: "scroll",
                        orient: 'vertical',
                        align: 'left',
                        left: "70%",
                        bottom: 0,
                        data: ['开关柜故障', '直流总故障'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                ],
                graphic: [
                    {
                        z: 4,
                        type: 'image',
                        id: 'logo',
                        left: (width - realWidth / 5) / (2 * width) * 100 + '%',
                        top: (height - realWidth / 5) / (2 * height) * 100 + '%',
                        bounding: 'raw',
                        rotation: 0,//旋转
                        scale: [1.0, 1.0],//缩放
                        style: {
                            image: sigh,
                            width: realWidth / 5,
                            height: realWidth / 5,
                            opacity: 1,
                        }
                    }
                ],
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            color(params) {
                                return data[params.dataIndex].color;
                            },
                        },
                        label: {
                            height: 34,
                            overflow: 'none',
                            distanceToLabelLine: 0,
                            formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
                            rich: {
                                a: {
                                    fontSize: chartFontsize(16),
                                    color: '#fff',
                                },
                                hr: {
                                    width: '100%',
                                    height: 1,
                                    backgroundColor: '#0073C5'
                                },
                                value: {
                                    fontSize: chartFontsize(18),
                                    color: '#CE6D28',
                                    fontWeight: 'bold',
                                    padding: [5, 0, 0, 0]
                                }
                            },
                        },
                        labelLine: {
                            length: 30,
                            length2: 10,
                            lineStyle: {
                                color: '#0073C5',
                                width: 1,
                            }
                        },
                        data: data,
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                    startAngle: (292.5 + angle) * Math.PI / 180,
                                    endAngle: (337.5 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: color,
                                    fill: "transparent",
                                    lineWidth: lineWidth
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                    startAngle: (22.5 + angle) * Math.PI / 180,
                                    endAngle: (67.5 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: color,
                                    fill: "transparent",
                                    lineWidth: lineWidth
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                    startAngle: (112.5 + angle) * Math.PI / 180,
                                    endAngle: (157.5 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: color,
                                    fill: "transparent",
                                    lineWidth: lineWidth
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                    startAngle: (200.5 + angle) * Math.PI / 180,
                                    endAngle: (245.5 + angle) * Math.PI / 180
                                },
                                style: {
                                    stroke: color,
                                    fill: "transparent",
                                    lineWidth: lineWidth
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: "ring5",
                        type: 'custom',
                        coordinateSystem: "none",
                        renderItem: function (params, api) {
                            return {
                                type: 'arc',
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * radius,
                                    startAngle: 0 * Math.PI / 180,
                                    endAngle: 360 * Math.PI / 180
                                },
                                style: {
                                    stroke: color,
                                    fill: "transparent",
                                    lineWidth: 1
                                },
                                silent: true
                            };
                        },
                        data: [0]
                    },
                    {
                        name: '',
                        type: 'pie',
                        radius: [0, '35%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [0],
                        itemStyle: {
                            color: '#007ED3'
                        }
                    }
                ]
            };
            // 设置配置项
            this.setOption(option);
        },
        resize() {
            this.setData(this.$options.chartData);
            this.$options.chart.resize();
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let data = [
            {value: 400, name: '通讯故障', color: '#5062DE'},
            {value: 735, name: '直流总故障', color: '#FD5E02'},
            {value: 580, name: '防雷器故障', color: '#8C6BFA'},
            {value: 484, name: '开关柜故障', color: '#F58881'},
            {value: 300, name: '监控器故障', color: '#EDE611'},
            {value: 200, name: '交流总故障', color: '#43F9FD'},
        ];
        this.setData(data);

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

<style scoped>

</style>

 src/components/charts/PictorialBar.vue

New file
@@ -0,0 +1,145 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
</template>

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

export default {
  name: "PictorialBar",
  chart: "",
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData() {
      let option = {
        legend: {
          data: ['在线电压', '组端电压'],
          top: '4%',
          right: '8%',
          icon: 'rect',
          textStyle: {
            color: '#fff',
          }
        },
        xAxis: {
          type: 'category',
          data: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
          axisLabel: {
            color: '#fff',
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#007DD140",
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#007DD140',
              type: 'dashed',
            }
          }
        },
        series: [
          {
            name: "在线电压",
            type: "pictorialBar",
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            data: [
              {
                name: '高告警数量',
                value: 2
              },
              {
                name: '低告警数量',
                value: 15
              },
              {
                name: '告警机房数',
                value: 32
              },
              {
                name: '告警总数比例',
                value: 23
              },
              {
                name: '告警机房总数',
                value: 39
              },
            ],
            itemStyle: {
              color: "#E85D22"
            }
          },
          {
            name: "组端电压",
            type: "pictorialBar",
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            barGap: '-1%',
            data: [
              {
                name: '高告警数量',
                value: 22
              },
              {
                name: '低告警数量',
                value: 25
              },
              {
                name: '告警机房数',
                value: 35
              },
              {
                name: '告警总数比例',
                value: 18
              },
              {
                name: '告警机房总数',
                value: 55
              },
            ],
            itemStyle: {
              color: "#2EEA9D"
            }
          },
        ]
      };

      // 设置配置项
      this.setOption(option);
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);

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

<style scoped>

</style>

 src/components/charts/RoseChart.vue

New file
@@ -0,0 +1,136 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
  </div>
</template>

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

export default {
  name: "RoseChart",
  chart: "",
  props: {
    id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
      let option = {
        legend: [
          {
            type: "scroll",
            orient: 'vertical',
            align: 'left',
            left: "5%",
            bottom: '1%',
            data: ['核容数量', '内阻测试数量'],
            textStyle: {
              color: '#fff'
            }
          },
          {
            type: "scroll",
            orient: 'vertical',
            left: "40%",
            bottom: '1%',
            align: 'left',
            data: ['在线浮充数量', '故障数量'],
            textStyle: {
              color: '#fff'
            }
          },
          {
            orient: 'vertical',
            left: "75%",
            bottom: '8%',
            data: ['充电数量', '无用'],
            textStyle: {
              color: '#fff'
            }
          },
        ],
        series: [
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0', '50%'],
            roseType: 'radius',
            itemStyle: {
              color(params){
                return data[params.dataIndex].color;
              },
            },
            label: {
              height: 34,
              overflow: 'none',
              distanceToLabelLine: 0,
              formatter: '{a|{b}}\n{hr|}\n{value|{d}%}',
              rich: {
                a: {
                  fontSize: 16,
                  color:'#fff',
                },
                hr: {
                  width: '100%',
                  height: 1,
                  backgroundColor: '#0073C5'
                },
                value: {
                  fontSize: 18,
                  color:'#CE6D28',
                  fontWeight: 'bold',
                  padding:[5, 0, 0, 0]
                }
              },
            },
            labelLine: {
              length: 20,
              length2: 10,
              lineStyle: {
                color: '#0073C5',
                width: 1,
              }
            },
            data: data
          }
        ]
      };

      // 设置图表配置项
      this.setOption(option);
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);

    this.setData([
      {value: 6, name: '在线浮充数量', color: '#E85D22'},
      {value: 7, name: '充电数量', color: '#76CFDD'},
      {value: 10, name: '内阻测试数量', color: '#FEDB5B'},
      {value: 8, name: '故障数量', color: '#8278E9'},
      {value: 4, name: '核容数量', color: '#9EE6B8'},
    ]);
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>

</style>