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

@@ -219,3 +219,23 @@
    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

@@ -90,7 +90,7 @@
        y: 0.35,
        type: 'PictorialBar',
        setData: {
            xData: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警总数\n比例', '告警机房总数'],
            xData: ['高告警数量', '低告警数量', '告警机房数\n比例', '告警机房总数'],
            series: [{
                    name: "在线电压",
                    data: [{
@@ -104,10 +104,6 @@
                        {
                            name: '告警机房数',
                            value: 32
                        },
                        {
                            name: '告警总数比例',
                            value: 23
                        },
                        {
                            name: '告警机房总数',
@@ -129,10 +125,6 @@
                        {
                            name: '告警机房数',
                            value: 35
                        },
                        {
                            name: '告警总数比例',
                            value: 18
                        },
                        {
                            name: '告警机房总数',

 src/assets/js/charts/persons/wangxuan.js

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

@@ -28,14 +28,14 @@
            y: 0.35,
            type: 'latticeBar',
            setData: {
                xData: ['高告\n警数量', '告警\n总数', '告警\n总数比例', '告警机房\n总数', '告警机房数\n比例'],
            xData: ['高告\n警数量', '告警\n总数', '告警机房\n总数'],
                series: [{
                    name: '放电',
                    data: [120, 220, 150, 80, 70],
                data: [120, 220, 80],
                    color: '#90ec7d'
                }, {
                    name: '充电',
                    data: [80, 160, 120, 310, 50],
                data: [80, 160, 310],
                    color: '#ff6b6b'
                }]
            }
@@ -144,6 +144,67 @@
                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'
        },
        ]
    }
    }
];


 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);