新模块添加

whyczyk

2021-03-23 104e60913624bad05979d1827334b3b1694353cb

新模块添加

 src/assets/images/AcInputWarp.jpg

 src/assets/images/CustomPie.jpg

 src/assets/images/MonCap.jpg

 src/assets/images/PictorialBar.jpg

 src/assets/images/RoseChart.jpg

 src/assets/js/api.js

@@ -71,3 +71,53 @@
    params: data
  })
}

/* 在线电压和组端电压
 */
export const onlinegroupVolAnalysis = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/onlinegroupVolAnalysis",
    params: data
  })
}

/* 交流输入
 */
export const powerAlarmAcInput = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/acInput",
    params: data
  })
}

/* 故障
 */
export const powerAlarmError = (data) => {
  return axios({
    method: "GET",
    url: "/powerAlarm/error",
    params: data
  })
}

/* BTS设备状态
 */
export const batteryAlarmBtsStatus = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/btsStatus",
    params: data
  })
}

/* 单体容量
 */
export const batteryAlarmMonCapacity = (data) => {
  return axios({
    method: "GET",
    url: "/batteryAlarm/monCapacity",
    params: data
  })
}

 src/assets/js/charts/index.js

@@ -4,7 +4,7 @@

let modularTitle = [...zengyvkai.modularTitle,...huodongwei.modularTitle];
let modularBg = [...zengyvkai.modularBg];
let modularData = [...zengyvkai.modularData,...wangxuan.modularData];
let modularData = [...zengyvkai.modularData, ...wangxuan.modularData, ...huodongwei.modularData];

export default {
    modularTitle,

 src/assets/js/charts/persons/huodongwei.js

@@ -1,13 +1,226 @@
let modularTitle = [
    {
let modularTitle = [{
        title: '蓝色头部-1',
        selected: false,
        name: 'bigscreenTitle1',
        img: require("@/assets/images/bigscreenTitle1.png")
    },
];
}, ];
let modularBg = [];
let modularData = [];
let modularData = [{
    img: require("@/assets/images/AcInputWarp.jpg"),
    chartData: {
        name: '交流输入',
        id: 21,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'AcInputWarp',
        setData: [{
            title: '熔丝告警',
            data: 56,
            acColor: '#813a74',
            resColor: '#ff649d',
        }, {
            title: '跳闸',
            data: 12,
            acColor: '#287878',
            resColor: '#5adfaa',
        }, {
            title: '频率异常',
            data: 21,
            acColor: '#2388a6',
            resColor: '#43f9fd',
        }, {
            title: '三相不平衡',
            data: 8,
            acColor: '#7f3a29',
            resColor: '#fc5f02',
        }]
    }
}, {
    img: require("@/assets/images/CustomPie.jpg"),
    chartData: {
        name: '故障',
        id: 22,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'CustomPie',
        setData: [{
                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'
            },
        ]
    }
}, {
    img: require("@/assets/images/PictorialBar.jpg"),
    chartData: {
        name: '在线电压和组端电压',
        id: 23,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'PictorialBar',
        setData: {
            xData: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
            series: [{
                    name: "在线电压",
                    data: [{
                            name: '高告警数量',
                            value: 2
                        },
                        {
                            name: '低告警数量',
                            value: 15
                        },
                        {
                            name: '告警机房数',
                            value: 32
                        },
                        {
                            name: '告警总数比例',
                            value: 23
                        },
                        {
                            name: '告警机房总数',
                            value: 39
                        },
                    ],
                    color: '#E85D22'
                },
                {
                    name: "组端电压",
                    data: [{
                            name: '高告警数量',
                            value: 22
                        },
                        {
                            name: '低告警数量',
                            value: 25
                        },
                        {
                            name: '告警机房数',
                            value: 35
                        },
                        {
                            name: '告警总数比例',
                            value: 18
                        },
                        {
                            name: '告警机房总数',
                            value: 55
                        },
                    ],
                    color: '#2EEA9D'
                }
            ]
        }
    }
}, {
    img: require("@/assets/images/RoseChart.jpg"),
    chartData: {
        name: 'BTS设备状态',
        id: 24,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'RoseChart',
        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'
            },
        ]
    }
}, {
    img: require("@/assets/images/MonCap.jpg"),
    chartData: {
        name: '单体容量',
        id: 25,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'MonCap',
        setData: {
            circle: [{
                    name: '告警数',
                    value: 380,
                    color: '#00DFFC',
                },
                {
                    name: '告警占比',
                    value: 180,
                    color: '#FF8B34',
                },
                {
                    name: '告警总数',
                    value: 180,
                    color: '#ED4882',
                },
                {
                    name: '告警机房数',
                    value: 280,
                    color: '#2EEA9D',
                },
                {
                    name: '告警机房占比',
                    value: 70,
                    color: '#F3E501',
                }
            ]
        }
    }
}, ];

export default {
    modularTitle,

 src/components/charts/AcInput.vue

@@ -4,7 +4,7 @@
        <div class="echarts-text-wrapper">
            <div class="color-strip" :style="{'backgroundColor':resColor}"></div>
            <div class="echarts-text">
                熔丝告警
                {{title}}
            </div>
        </div>
    </div>
@@ -17,29 +17,25 @@
    name: "AcInput",
    chart: "",
    chartData: "",
    props: {
        acColor: {
            type:String,
            default: "#813a74"
        },
        resColor: {
            type:String,
            default: "#ff649d"
        },
    },
    data() {
        return {}
            return {
                acColor: '#813a74',
                resColor: '#ff649d',
                title: ''
            }
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(value) {
            let acColor = this.acColor;
            let resColor = this.resColor;
            setData(sendData) {
                this.$options.chartData = sendData;
                this.acColor = sendData.acColor;
                this.resColor = sendData.resColor;
                this.title = sendData.title;
            let option = {
                title: {
                    text: value+'%',
                        text: sendData.data + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
@@ -47,8 +43,7 @@
                        fontSize: 40,
                    }
                },
                series: [
                    {
                    series: [{
                        name: "",
                        type: 'gauge',
                        radius: '90%',
@@ -68,10 +63,10 @@
                                width: 40,
                                color: [
                                    [
                                        value / 100, acColor
                                        sendData.data / 100, this.acColor
                                    ],
                                    [
                                        1, resColor
                                        1, this.resColor
                                    ]
                                ]
                            }
@@ -94,26 +89,27 @@
                            }
                        },
                        data: [{
                            value: value,
                            value: sendData,
                            name: '年售电量情况'
                        }]
                    }
                ]
                    }]
            };

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

        window.addEventListener('resize', this.resize);
    },
@@ -131,16 +127,18 @@
    width: 55%;
    text-align: center;
}

.color-strip {
    height: 4px;
}

.echarts-text {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 32px;
        padding: 8px 20px;
    background-color: #083880;
    border: 1px solid #01b1e0;
    border-radius: 16px;

        font-size: 12px;
}
</style>

 src/components/charts/AcInputWarp.vue

New file
@@ -0,0 +1,120 @@
<template>
  <div class="chartCon">
    <div class="chartItem">
      <ac-input id="AcInput0" ref="AcInput0"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput1" ref="AcInput1"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput2" ref="AcInput2"></ac-input>
    </div>
    <div class="chartItem">
      <ac-input id="AcInput3" ref="AcInput3"></ac-input>
    </div>
  </div>
</template>

<script>
  import {
    powerAlarmAcInput
  } from '@/assets/js/api'
  import AcInput from './AcInput.vue'
  export default {
    components: {
      AcInput
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
            data.map((item, i) => {
              let chart = this.$refs[`AcInput${i}`];
              chart.setData(item);
              chart.resize();
            })
          } else {
            this.postData()
            setInterval(() => {
              this.postData()
            }, 3000)
          }

        })
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        powerAlarmAcInput(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = [{
              title: '熔丝告警',
              data: 56,
              acColor: '#813a74',
              resColor: '#ff649d',
            }, {
              title: '跳闸',
              data: 12,
              acColor: '#287878',
              resColor: '#5adfaa',
            }, {
              title: '频率异常',
              data: 21,
              acColor: '#2388a6',
              resColor: '#43f9fd',
            }, {
              title: '三相不平衡',
              data: 8,
              acColor: '#7f3a29',
              resColor: '#fc5f02',
            }]
            let resData = res.data.data;
            for (let key in resData) {
              optionData.map(item => {
                if (item.title == key) {
                  item.data = resData[key]
                }
              })
            }
            optionData.map((item, i) => {
              let chart = this.$refs[`AcInput${i}`];
              chart.setData(item);
              chart.resize();
            })
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        this.$refs.AcInput0.resize();
        this.$refs.AcInput1.resize();
        this.$refs.AcInput2.resize();
        this.$refs.AcInput3.resize();
      }
    }
  }
</script>

<style scoped>
  .chartCon {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }

  .chartCon .chartItem {
    width: 50%;
    height: 50%;
    float: left;
    position: relative;
  }
</style>

 src/components/charts/CircleChart.vue

@@ -10,6 +10,7 @@
export default {
    name: "CircleChart",
    chart: "",
        chartData: null,
    props: {
        id: {
            require: true,
@@ -43,6 +44,7 @@
            this.$options.chart.setOption(opt);
        },
        setData(data) {
                this.$options.chartData = data;
            let name = this.name;
            let top = this.top;
            let bottom = this.bottom;
@@ -179,7 +181,10 @@
        },
        resize() {
            this.changeWrapper();
                setTimeout(() => {
            this.$options.chart.resize();
                    this.setData(this.$options.chartData);
                }, 300)
        },
        changeWrapper() {
            let wrapper = this.$refs.wrapper;

 src/components/charts/CustomPie.vue

@@ -7,12 +7,16 @@
<script>
import * as echarts from 'echarts';
import sigh from './images/sigh.png';
import {chartFontsize} from '@/assets/js/chartFontsize';

    import {
        chartFontsize
    } from '@/assets/js/chartFontsize';
    import {
        powerAlarmError
    } from '@/assets/js/api'
export default {
    name: "CustomPie",
    chart: "",
    chartData: "",
        chartData: {},
    data() {
        return {}
    },
@@ -20,8 +24,7 @@
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
            this.$options.chartData = data;
            organizeData(data) {
            let angle = 0;
            let color = "#007CD0";
            let radius = 0.55;
@@ -30,8 +33,7 @@
            let height = this.$refs.chart.offsetHeight;
            let realWidth = width > height ? height : width;
            let option = {
                legend: [
                    {
                    legend: [{
                        show: true,
                        type: "scroll",
                        orient: 'vertical',
@@ -68,8 +70,7 @@
                        }
                    },
                ],
                graphic: [
                    {
                    graphic: [{
                        z: 4,
                        type: 'image',
                        id: 'logo',
@@ -84,10 +85,8 @@
                            height: realWidth / 5,
                            opacity: 1,
                        }
                    }
                ],
                series: [
                    {
                    }],
                    series: [{
                        name: '',
                        type: 'pie',
                        radius: ['40%', '50%'],
@@ -279,23 +278,82 @@
            // 设置配置项
            this.setOption(option);
        },
            setData(sendData) {
                if (sendData) {
                    this.$options.chartData = sendData;
                    this.organizeData(sendData)
                } else {
                    this.postData()
                    setInterval(() => {
                        this.postData()
                    }, 3000)
                }
            },
            postData() {
                let userId = localStorage.getItem('userId');
                let params = {
                    userId: userId
                }
                powerAlarmError(params).then((res) => {
                    if (res.data.code == 1) {
                        let optionData = [{
                                value: 0,
                                name: '通讯故障',
                                color: '#5062DE'
                            },
                            {
                                value: 0,
                                name: '直流总故障',
                                color: '#FD5E02'
                            },
                            {
                                value: 0,
                                name: '防雷器故障',
                                color: '#8C6BFA'
                            },
                            {
                                value: 0,
                                name: '开关柜故障',
                                color: '#F58881'
                            },
                            {
                                value: 0,
                                name: '监控器故障',
                                color: '#EDE611'
                            },
                            {
                                value: 0,
                                name: '交流总故障',
                                color: '#43F9FD'
                            },
                        ]
                        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)
                    }
                }).catch((err) => {
                    console.log(err)
                });
            },
        resize() {
            this.setData(this.$options.chartData);
                setTimeout(() => {
            this.$options.chart.resize();
                    if (JSON.stringify(this.$options.chartData) != '{}') {
                        this.setData(this.$options.chartData);
                    }
                }, 300)
        }
    },
    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);
    },

 src/components/charts/MonCap.vue

@@ -1,5 +1,4 @@
<template>
  <layout-box title="单体容量">
    <div class="flex-box">
      <div class="flex-box-body">
        <circle-chart id="circleChart" ref="circleChart"></circle-chart>
@@ -14,71 +13,150 @@
        </ul>
      </div>
    </div>
  </layout-box>
</template>

<script>
import LayoutBox from "@/components/LayoutBox";
import CircleChart from "@/components/charts/CircleChart";
  import {
    batteryAlarmMonCapacity
  } from '@/assets/js/api'
export default {
  name: "MonCap",
  components: {CircleChart, LayoutBox},
    components: {
      CircleChart
    },
  data() {
    return {
      chart: {
        circle: [
          {
          circle: [{
            name: '低告警数量',
            value: 380,
              value: 0,
            color: '#00DFFC',
          },
          {
            name: '告警总数比例',
            value: 180,
              value: 0,
            color: '#FF8B34',
          },
          {
            name: '告警总数',
            value: 180,
              value: 0,
            color: '#ED4882',
          },
          {
            name: '告警机房总数',
            value: 280,
              value: 0,
            color: '#2EEA9D',
          },
          {
            name: '告警机房数比例',
            value: 70,
              value: 0,
            color: '#F3E501',
          }
        ]
      }
    }
  },
  mounted() {
    this.$refs.circleChart.setData(this.chart.circle);
    methods: {
      setData(data) {
        this.$nextTick(() => {
          if (data) {
            this.chart = data;
            let chart = this.$refs.circleChart;
            chart.setData(data.circle);
            chart.resize();
          } else {
            this.postData()
            setInterval(() => {
              this.postData()
            }, 3000)
          }

        })
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryAlarmMonCapacity(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              circle: [{
                  name: '告警数',
                  value: 10,
                  color: '#00DFFC',
                },
                {
                  name: '告警占比',
                  value: 10,
                  color: '#FF8B34',
                },
                {
                  name: '告警总数',
                  value: 10,
                  color: '#ED4882',
                },
                {
                  name: '告警机房数',
                  value: 10,
                  color: '#2EEA9D',
                },
                {
                  name: '告警机房占比',
                  value: 10,
                  color: '#F3E501',
                }
              ]
            }
            let resData = res.data.data;
            for (let key in resData) {
              optionData.circle.map(item => {
                if (item.name == key) {
                  if (typeof resData[key] == 'string') {
                    item.value = Number(resData[key].split('%')[0])
                  } else {
                    item.value = resData[key]
                  }
                }
              })
            }
            this.chart = optionData;
            let chart = this.$refs.circleChart;
            chart.setData(optionData.circle);
            chart.resize();
          }
        }).catch((err) => {
          console.log(err)
        });
      },
      resize() {
        this.$refs.circleChart.resize();
      }
  }
}
</script>

<style scoped>

.flex-box {
  display: flex;
  height: 100%;
  align-items: center;
}

.flex-box-body {
  flex:1;
  height: 100%;
}

.flex-box-footer {
  padding:0 8px;
}

.list-view li {
  list-style: none;
}

.list-view-item {
  white-space: nowrap;
  padding: 8px 0;

 src/components/charts/PictorialBar.vue

@@ -6,10 +6,13 @@

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

  import {
    onlinegroupVolAnalysis
  } from '@/assets/js/api'
export default {
  name: "PictorialBar",
  chart: "",
    chartData: {},
  props: {
    id: {
      type: String,
@@ -23,8 +26,20 @@
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData() {
      organizeData(data) {
      let option = {
          grid: {
            top: 40,
            right: 20,
            left: 50,
            bottom: 30
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
          },
        legend: {
          data: ['在线电压', '组端电压'],
          top: '4%',
@@ -36,7 +51,6 @@
        },
        xAxis: {
          type: 'category',
          data: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
          axisLabel: {
            color: '#fff',
            interval: 0,
@@ -45,7 +59,8 @@
            lineStyle: {
              color: "#007DD140",
            }
          }
            },
            data: data.xData,
        },
        yAxis: {
          splitLine: {
@@ -55,83 +70,111 @@
            }
          }
        },
        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"
            }
          },
        ]
          series: []
      };

        data.series.map((item) => {
          option.series.push({
            name: item.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',
            itemStyle: {
              color: item.color
            },
            data: item.data
          })
        })

        option.series[1]['barGap'] = '-1%'

      // 设置配置项
      this.setOption(option);
    },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        onlinegroupVolAnalysis(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = {
              xData: [],
              series: [{
                  name: "在线电压",
                  data: [],
                  color: '#E85D22'
                },
                {
                  name: "组端电压",
                  data: [],
                  color: '#2EEA9D'
                }
              ]
            }
            let resData = res.data.data;
            for (let key in resData) {
              let seriesData = resData[key]
              if (key == '在线电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[0].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[0].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              } else if (key == '组端电压') {
                for (let jey in seriesData) {
                  if (typeof seriesData[jey] == 'string') {
                    optionData.series[1].data.push({
                      name: jey,
                      value: Number(seriesData[jey].split('%')[0])
                    })
                  } else {
                    optionData.series[1].data.push({
                      name: jey,
                      value: seriesData[jey]
                    })
                  }
                }
              }
            }
            this.$options.chartData = optionData;
            this.organizeData(optionData)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
    resize() {
        setTimeout(() => {
      this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
            this.setData(this.$options.chartData);
          }
        }, 300)
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);

    this.setData();
    window.addEventListener('resize', this.resize);
  },
  destroyed() {

 src/components/charts/RoseChart.vue

@@ -6,10 +6,13 @@

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

  import {
    batteryAlarmBtsStatus
  } from '@/assets/js/api'
export default {
  name: "RoseChart",
  chart: "",
    chartData: [],
  props: {
    id: {
      type: String,
@@ -23,10 +26,9 @@
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
      organizeData(data) {
      let option = {
        legend: [
          {
          legend: [{
            type: "scroll",
            orient: 'vertical',
            align: 'left',
@@ -43,7 +45,7 @@
            left: "40%",
            bottom: '1%',
            align: 'left',
            data: ['在线浮充数量', '故障数量'],
              data: ['在线浮充', '故障数量'],
            textStyle: {
              color: '#fff'
            }
@@ -58,8 +60,7 @@
            }
          },
        ],
        series: [
          {
          series: [{
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['0', '50%'],
@@ -101,28 +102,84 @@
              }
            },
            data: data
          }
        ]
          }]
      };

      // 设置图表配置项
      this.setOption(option);
    },
      setData(sendData) {
        if (sendData) {
          this.$options.chartData = sendData;
          this.organizeData(sendData)
        } else {
          this.postData()
          setInterval(() => {
            this.postData()
          }, 3000)
        }
      },
      postData() {
        let userId = localStorage.getItem('userId');
        let params = {
          userId: userId
        }
        batteryAlarmBtsStatus(params).then((res) => {
          if (res.data.code == 1) {
            let optionData = [{
                value: 0,
                name: '在线浮充',
                color: '#E85D22'
              },
              {
                value: 0,
                name: '充电数量',
                color: '#76CFDD'
              },
              {
                value: 0,
                name: '内阻测试数量',
                color: '#FEDB5B'
              },
              {
                value: 0,
                name: '故障数量',
                color: '#8278E9'
              },
              {
                value: 0,
                name: '核容数量',
                color: '#9EE6B8'
              },
            ]
            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)
          }
        }).catch((err) => {
          console.log(err)
        });
      },
    resize() {
        setTimeout(() => {
      this.$options.chart.resize();
          if (JSON.stringify(this.$options.chartData) != '{}') {
            this.setData(this.$options.chartData);
          }
        }, 300)
    }
  },
  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() {