2021-10-07 代码提交

whyczyk

2021-10-07 f9b7c859194459682130620a2720a5d2bbc46643

2021-10-07 代码提交

 src/assets/images/RoseChartED.jpg

 src/assets/images/RoseChartHea.jpg

 src/assets/js/api.js

@@ -218,4 +218,24 @@
    data: 'json=' + JSON.stringify(data),
    asy: 1
  });
};
};

/* 机房续航
 */
export const endurance = (data) => {
  return axios({
    method: "GET",
    url: "/batteryData/endurance",
    params: data
  })
}

/* 电池单体容量状态
 */
export const capStatus = (data) => {
  return axios({
    method: "GET",
    url: "/batteryData/capStatus",
    params: data
  })
}

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

@@ -3,7 +3,7 @@
    selected: false,
    name: 'bigscreenTitle1',
    img: require("@/assets/images/bigscreenTitle1.png")
}, ];
},];
let modularBg = [];
let modularData = [{
    img: require("@/assets/images/AcInputWarp.jpg"),
@@ -48,35 +48,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'
            },
            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'
        },
        ]
    }
}, {
@@ -90,57 +90,49 @@
        y: 0.35,
        type: 'PictorialBar',
        setData: {
            xData: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
            xData: ['高告警数量', '低告警数量', '告警机房数\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: 2
                },
                {
                    name: "组端电压",
                    data: [{
                            name: '高告警数量',
                            value: 22
                        },
                        {
                            name: '低告警数量',
                            value: 25
                        },
                        {
                            name: '告警机房数',
                            value: 35
                        },
                        {
                            name: '告警总数比例',
                            value: 18
                        },
                        {
                            name: '告警机房总数',
                            value: 55
                        },
                    ],
                    color: '#2EEA9D'
                }
                    name: '低告警数量',
                    value: 15
                },
                {
                    name: '告警机房数',
                    value: 32
                },
                {
                    name: '告警机房总数',
                    value: 39
                },
                ],
                color: '#E85D22'
            },
            {
                name: "组端电压",
                data: [{
                    name: '高告警数量',
                    value: 22
                },
                {
                    name: '低告警数量',
                    value: 25
                },
                {
                    name: '告警机房数',
                    value: 35
                },
                {
                    name: '告警机房总数',
                    value: 55
                },
                ],
                color: '#2EEA9D'
            }
            ]
        }
    }
@@ -155,30 +147,30 @@
        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'
            },
            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'
        },
        ]
    }
}, {
@@ -193,34 +185,34 @@
        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',
                }
                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/assets/js/charts/persons/wangxuan.js

@@ -11,14 +11,14 @@
        x: 0.35,
        y: 0.35,
        type: 'histogramAlternating',
        setData:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量'],
            gjjfzs:"10",
            gjjfsbl:"10%"
        setData: {
            dataList: [32, 43, 17, 27],
            dataName: ['过压数量', '欠压数量', '缺项数量', '过流数量'],
            gjjfzs: "10",
            gjjfsbl: "10%"
        },
    }
},{
}, {
    img: require("@/assets/images/monomerVoltage.png"),
    chartData: {
        name: '单体电压、内阻温度',
@@ -28,36 +28,36 @@
        x: 0.35,
        y: 0.35,
        type: 'monomerVoltage',
        setData:{
              legendData : ['单体电压', '单体内阻','单体温度'],
              yAxisData : ['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例'],
              data : [{
                        name: '单体电压',
                        type: 'bar',
                        data: [24, 18, 38, 31, 24, 13],
                        itemStyle:{
                            color:'#FED601'
                        }
                    },
                    {
                        name: '单体内阻',
                        type: 'bar',
                        data: [19, 28, 46, 24, 14, 9],
                        itemStyle:{
                            color:'#67E0E3'
                        }
                    },
                    {
                        name: '单体温度',
                        type: 'bar',
                        data: [15, 22, 36, 15, 21, 8],
                        itemStyle:{
                            color:'#EB6F49'
                        }
                    }]
        setData: {
            legendData: ['单体电压', '单体内阻', '单体温度'],
            yAxisData: ['高告警数量', '低告警数量', '告警总数', '告警总数比例', '告警机房总数', '告警机房总数比例'],
            data: [{
                name: '单体电压',
                type: 'bar',
                data: [24, 18, 38, 31, 24, 13],
                itemStyle: {
                    color: '#FED601'
                }
            },
            {
                name: '单体内阻',
                type: 'bar',
                data: [19, 28, 46, 24, 14, 9],
                itemStyle: {
                    color: '#67E0E3'
                }
            },
            {
                name: '单体温度',
                type: 'bar',
                data: [15, 22, 36, 15, 21, 8],
                itemStyle: {
                    color: '#EB6F49'
                }
            }]
        }
    }
},{
}, {
    img: require("@/assets/images/dischargeCircuit.png"),
    chartData: {
        name: '放电电流',
@@ -67,11 +67,11 @@
        x: 0.35,
        y: 0.35,
        type: 'dischargeCircuit',
        setData:{
            xAxisData:['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
            maxYAxis:[50,50,50,50,50],
            xData:[30,19,"37%",44,"25%"],
            data:[30,19,37,44,25]
        setData: {
            xAxisData: ['低告警数量', '告警机房总数', '告警机房数比例', '告警总数', '告警总数比例'],
            maxYAxis: [50, 50, 50, 50, 50],
            xData: [30, 19, "37%", 44, "25%"],
            data: [30, 19, 37, 44, 25]
        }
    }
},
@@ -85,7 +85,7 @@
        x: 0.35,
        y: 0.35,
        type: 'chinaMap',
        setData:{}
        setData: {}
    }
},
]

 src/assets/js/charts/persons/zengyvkai.js

@@ -5,146 +5,207 @@
    img: require("@/assets/images/bigscreenTitle2.png"),
}];
let modularBg = [{
        title: '大屏背景-1',
        selected: false,
        name: 'bigscreenbg1',
        img: require("@/assets/images/bigscreenbg1.jpg")
    },
    {
        title: '大屏背景-2',
        selected: false,
        name: 'bigscreenbg2',
        img: require("@/assets/images/bigscreenbg2.jpg")
    }
    title: '大屏背景-1',
    selected: false,
    name: 'bigscreenbg1',
    img: require("@/assets/images/bigscreenbg1.jpg")
},
{
    title: '大屏背景-2',
    selected: false,
    name: 'bigscreenbg2',
    img: require("@/assets/images/bigscreenbg2.jpg")
}
];
let modularData = [{
        img: require("@/assets/images/modular-latticeBar.png"),
        chartData: {
            name: '放电和充电电流',
            id: 1,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'latticeBar',
            setData: {
                xData: ['高告\n警数量', '告警\n总数', '告警\n总数比例', '告警机房\n总数', '告警机房数\n比例'],
                series: [{
                    name: '放电',
                    data: [120, 220, 150, 80, 70],
                    color: '#90ec7d'
                }, {
                    name: '充电',
                    data: [80, 160, 120, 310, 50],
                    color: '#ff6b6b'
                }]
            }
        }
    },
    {
        img: require("@/assets/images/modular-ImgPieChart.png"),
        chartData: {
            name: '整流器',
            id: 2,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'imgPieChart',
            setData: {
                data: [{
                        value: 30,
                        name: '整流器交流异常'
                    },
                    {
                        value: 22,
                        name: '整流器过流'
                    },
                    {
                        value: 120,
                        name: '总故障'
                    },
                    {
                        value: 50,
                        name: '整流器欠压'
                    },
                ]
            }
        }
    },
    {
        img: require("@/assets/images/modular-TriangleBarChart.png"),
        chartData: {
            name: '电池组',
            id: 3,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'triangleBarChart',
            setData: {
                xData: ['熔断', '电压低', '下电', '充电过流'],
                data: [35, 72, 55, 45]
            }
        }
    },
    {
        img: require("@/assets/images/modular-AbeamProChart.png"),
        chartData: {
            name: '电池状态',
            id: 4,
            w: 0.235,
            h: 0.25,
            x: 0.35,
            y: 0.35,
            type: 'abeamProChart',
            setData: {
                yData: ['浮充数量', '放电数量', '充电数量'],
                color: ['#f58881', '#b4d465', '#ffcb29'],
                bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
                data: [32, 15, 20]
            }
        }
    },
    {
        img: require("@/assets/images/powerChart.jpg"),
        chartData: {
            name: '电源状态',
            id: 5,
            w: 0.235,
            h: 0.5,
            x: 0.35,
            y: 0.35,
            type: 'powerChart',
            setData: [{
                title: '交流停电数量',
                data: 56,
                color: '#37a9b3',
    img: require("@/assets/images/modular-latticeBar.png"),
    chartData: {
        name: '放电和充电电流',
        id: 1,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'latticeBar',
        setData: {
            xData: ['高告\n警数量', '告警\n总数', '告警机房\n总数'],
            series: [{
                name: '放电',
                data: [120, 220, 80],
                color: '#90ec7d'
            }, {
                title: '机房告警数',
                data: 12,
                color: '#f3535f'
            }, {
                title: '直流电压超限数',
                data: 21,
                unit: '%',
                color: '#ff8b00'
            }, {
                title: '负载熔断数量',
                data: 8,
                color: '#757ffb'
            }, {
                title: '直流过流数量',
                data: 5,
                color: '#4ba0d9'
            }, {
                title: '告警机房比例数',
                data: 13,
                unit: '%',
                color: '#7fc57c'
            }, ]
                name: '充电',
                data: [80, 160, 310],
                color: '#ff6b6b'
            }]
        }
    }
},
{
    img: require("@/assets/images/modular-ImgPieChart.png"),
    chartData: {
        name: '整流器',
        id: 2,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'imgPieChart',
        setData: {
            data: [{
                value: 30,
                name: '整流器交流异常'
            },
            {
                value: 22,
                name: '整流器过流'
            },
            {
                value: 120,
                name: '总故障'
            },
            {
                value: 50,
                name: '整流器欠压'
            },
            ]
        }
    }
},
{
    img: require("@/assets/images/modular-TriangleBarChart.png"),
    chartData: {
        name: '电池组',
        id: 3,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'triangleBarChart',
        setData: {
            xData: ['熔断', '电压低', '下电', '充电过流'],
            data: [35, 72, 55, 45]
        }
    }
},
{
    img: require("@/assets/images/modular-AbeamProChart.png"),
    chartData: {
        name: '电池状态',
        id: 4,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'abeamProChart',
        setData: {
            yData: ['浮充数量', '放电数量', '充电数量'],
            color: ['#f58881', '#b4d465', '#ffcb29'],
            bgColor: ['rgba(245,136,129,0.35)', 'rgba(255,255,255,0.35)', 'rgba(255,203,41,0.35)'],
            data: [32, 15, 20]
        }
    }
},
{
    img: require("@/assets/images/powerChart.jpg"),
    chartData: {
        name: '电源状态',
        id: 5,
        w: 0.235,
        h: 0.5,
        x: 0.35,
        y: 0.35,
        type: 'powerChart',
        setData: [{
            title: '交流停电数量',
            data: 56,
            color: '#37a9b3',
        }, {
            title: '机房告警数',
            data: 12,
            color: '#f3535f'
        }, {
            title: '直流电压超限数',
            data: 21,
            unit: '%',
            color: '#ff8b00'
        }, {
            title: '负载熔断数量',
            data: 8,
            color: '#757ffb'
        }, {
            title: '直流过流数量',
            data: 5,
            color: '#4ba0d9'
        }, {
            title: '告警机房比例数',
            data: 13,
            unit: '%',
            color: '#7fc57c'
        },]
    }
},
{
    img: require("@/assets/images/RoseChartED.jpg"),
    chartData: {
        name: '机房续航能力',
        id: 6,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'RoseChartED',
        setData: [{
            value: 1,
            name: '续航1小时内',
            color: '#E85D22'
        },
        {
            value: 1,
            name: '续航1小时到2小时',
            color: '#76CFDD'
        },
        {
            value: 1,
            name: '续航2小时到3小时',
            color: '#FEDB5B'
        },
        {
            value: 3,
            name: '续航3小时以上',
            color: '#8278E9'
        },
        ]
    }
},
{
    img: require("@/assets/images/RoseChartHea.jpg"),
    chartData: {
        name: '单体容量健康率',
        id: 7,
        w: 0.235,
        h: 0.25,
        x: 0.35,
        y: 0.35,
        type: 'RoseChartHea',
        setData: [{
            value: 30,
            name: '单体容量告警',
            color: '#E85D22'
        },
        {
            value: 60,
            name: '单体容量更换',
            color: '#76CFDD'
        },
        {
            value: 40,
            name: '单体容量健康',
            color: '#FEDB5B'
        },
        ]
    }
}
];

export default {

 src/components/charts/PictorialBar.vue

@@ -48,7 +48,7 @@
                    bottom: 30
                },
                tooltip: {
                    trigger: 'axis',
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    },

 src/components/charts/RoseChartED.vue

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

<script>
import * as echarts from 'echarts';
import {
    endurance
} from '@/assets/js/api'
export default {
    name: "RoseChartED",
    chart: "",
    chartData: [],
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['0', '50%'],
                    itemStyle: {
                        color(params) {
                            return data[params.dataIndex].color;
                        },
                    },
                    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
            }
            endurance(params).then((res) => {
                if (res.data.code == 1) {
                    let optionData = [{
                        value: 0,
                        name: '续航1小时内',
                        color: '#E85D22'
                    },
                    {
                        value: 0,
                        name: '续航1小时到2小时',
                        color: '#76CFDD'
                    },
                    {
                        value: 0,
                        name: '续航2小时到3小时',
                        color: '#FEDB5B'
                    },
                    {
                        value: 0,
                        name: '续航3小时以上',
                        color: '#8278E9'
                    },
                    ]
                    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);

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

<style scoped>
</style>

 src/components/charts/RoseChartHea.vue

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

<script>
import * as echarts from 'echarts';
import {
    capStatus
} from '@/assets/js/api'
export default {
    name: "RoseChartHea",
    chart: "",
    chartData: [],
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {}
    },
    methods: {
        toParentPage() {
            window.parent.parent.postMessage({
                cmd: "syncPage",
                params: {
                    pageInfo: {
                        label: "电池实时告警",
                        name: "batteryrTimequery",
                        src: "#/batteryrTimequery",
                        closable: true
                    },
                }
            }, "*");
        },
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        organizeData(data) {
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    center: ['50%', '50%'],
                    radius: ['0', '50%'],
                    itemStyle: {
                        color(params) {
                            return data[params.dataIndex].color;
                        },
                    },
                    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
            }
            capStatus(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'
                    },
                    ]
                    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);

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

<style scoped>
</style>

 src/components/charts/chinaMap.vue

@@ -393,7 +393,6 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -447,7 +446,6 @@
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: function (value, params) {
                            let asd = value
                            return 'image://' + params.data.img
                        },
                        symbolSize: [26, 26],
@@ -518,6 +516,7 @@
                return;
            }
            this.isShowInfoPanel = false;
            clearInterval(timers)
            timers = setTimeout(() => {
                this.isShowInfoPanel = true;
                let poit = this.convertMain(chartLng, chartLat);