实时数据查询

whyczyk

2021-09-30 a6cf5353e907767fd16d7fd37e033794321eebaf

实时数据查询

 src/assets/js/api.js

@@ -198,3 +198,17 @@
        data: "rtstate.battGroupId=" + params
    })
}

/**
 * 查询历史实时数据
 * @param json:{"dev_id":618500002}
 * @returns {AxiosPromise}
 */
export const JhStateActionSerchByCondition = (params) => {
    // 查询后台
    return axios({
        method: "post",
        url: "JhStateAction_action_serchByCondition",
        data: "json=" + JSON.stringify(params)
    });
}

 src/components/chart/BarChart.vue

@@ -196,7 +196,6 @@
                    show: false,
                };
            }

            // 返回标题
            return opt.title;
        },

 src/components/chart/progress-block-vertical-bar.vue

New file
@@ -0,0 +1,281 @@
<template>
    <div class="e-chart-root">
        <div class="e-chart-container">
            <div class="e-chart" ref="chart"></div>
        </div>
    </div>
</template>

<script>
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
//引入折线图
import "echarts/lib/chart/bar";
import "echarts/lib/chart/pictorialBar";

//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";

//markeline
import "echarts/lib/component/markLine";

// 引入自定义主题
import "./theme/transparent";

export default {
    chart: "",
    props: {
        barWidth: {
            type: Number,
            default: 24,
        },
        barColor: {
            type: String,
            default: "#90ed7d",
        },
        bgColor: {
            type: String,
            default: "#0b388a",
        },
        fontColor: {
            type: String,
            default: "#fff",
        },
        max: {
            type: Number,
            default: 400,
        },
    },
    data() {
        return {};
    },
    methods: {
        setOption(option) {
            let chart = this.$options.chart;
            if (chart) {
                chart.setOption(option);
            }
        },
        setData(data) {
            let option = this.getInitOption(data);
            let name = data.name;
            // 处理value=0时显示Bug,并对数值取绝对值
            let list = data.list.map((item) => item.value);
            let xName = data.list.map((item) => item.name);

            option.xAxis[0].data = xName;

            option.series[0].name = name;
            option.series[0].data = list;
            option.series[1].data = list;
            option.series[2].data = list;
            this.setOption(option);
        },
        getInitOption(opt) {
            let barWidth = this.barWidth;
            let barColor = this.barColor;
            let bgColor = this.bgColor;
            return {
                animation: false,
                title: this.getTitle(opt),
                tooltip: {},
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '2%',
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#b3b3b3',
                            }
                        },
                        axisLabel: {
                            color: '#737474',
                            textStyle: {
                                fontSize: 10
                            },
                        },
                        data: [],
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        gridIndex: 0,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#b3b3b3',
                            }
                        },
                        axisLabel: {
                            color: '#737474',
                            textStyle: {
                                fontSize: 10
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: "",
                        type: "bar",
                        barWidth: barWidth,
                        itemStyle: {
                            normal: {
                                color: barColor,
                            },
                        },
                        data: [],
                        z: 10,
                        zlevel: 0,
                    },
                    {
                        // 背景
                        type: "pictorialBar",
                        animationDuration: 0,
                        symbolRepeat: "fixed",
                        symbolMargin: "20%",
                        symbol: "roundRect",
                        symbolSize: [barWidth, 6],
                        itemStyle: {
                            normal: {
                                color: bgColor,
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [],
                        z: 0,
                    },
                    {
                        // 分隔
                        type: "pictorialBar",
                        itemStyle: {
                            normal: {
                                color: "#0F375F",
                            },
                        },
                        symbolRepeat: "fixed",
                        symbolMargin: 6,
                        symbol: "rect",
                        symbolClip: true,
                        symbolSize: [barWidth, 2],
                        symbolPosition: "start",
                        symbolOffset: [0, -1],
                        // symbolBoundingData: this.total,
                        data: [],
                        width: barWidth,
                        z: 0,
                        zlevel: 1,
                    },
                ],
            };
        },
        getTitle(opt) {     // 配置标题
            // 未配置标题
            if (!opt || !opt.title) {
                return {
                    show: false,
                };
            }
            // 返回标题
            return opt.title;
        },
        resize() {
            let chart = this.$options.chart;
            if (chart) {
                chart.resize();
            }
        },
        /**
         * 销毁echarts实例释放内存
         *
         * @return  {[type]}  [return description]
         */
        dispose() {
            let chart = this.$options.chart;
            if (chart) {
                chart.dispose(); // 销毁实例
                this.$options.chart = "";
            }
        },
    },
    mounted() {
        this.$options.chart = ECharts.init(this.$refs.chart, "transparent");

        let data = {
            name: "测试",
            list: [
                {
                    name: "",
                    value: 0,
                },
            ],
        };
        this.setData(data);
        // 监听windows窗口的缩放,绑定resize事件
        window.addEventListener("resize", this.resize);
    },
    beforeDestroy() {
        // 销毁resize事件
        window.removeEventListener("resize", this.resize);
        this.dispose();
    },
};
</script>

<style scoped>
.e-chart-root,
.e-chart-container,
.e-chart {
    height: 100%;
    box-sizing: border-box;
}

.e-chart-root.full-screen .e-chart-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 100%;
    z-index: 9999;
}

.e-chart-tools {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 9;
}

.e-chart-tools .iconfont {
    margin-left: 8px;
    font-size: 24px;
    cursor: pointer;
    color: #00fefe;
}

.e-chart-tools .iconfont:hover {
    color: #04b1b1;
}

.e-chart-tools .iconfont:active {
    color: #ff0000;
}
</style>

 src/pages/real-monitoring.vue

@@ -99,6 +99,40 @@
                </div>
            </div>

            <div class="card">
                <div class="commonTitle cardTitle">均衡供电</div>
                <div class="listCon">
                    <div class="item">
                        {{otherTable[0].value}}
                        <div class="title">
                            版本号
                        </div>
                    </div>
                    <div class="item">
                        {{otherTable[1].value}}℃
                        <div class="title">
                            温度(℃)
                        </div>
                    </div>
                    <div class="item">
                        {{eleTable[0].value}}A
                        <div class="title">
                            总电流(A)
                        </div>
                    </div>
                    <div class="item">
                        {{totolTable[0].value}}V
                        <div class="title">
                            总电压(V)
                        </div>
                    </div>
                </div>
                <div class="chartWarp">
                    <progress-block-vertical-bar ref="outputVolList"></progress-block-vertical-bar>
                </div>

            </div>

        </div>
        <van-popup v-model="showPopup" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择站点电池组" :options="options" active-color="#4b88f9" @change="onChange" @close="showPopup = false" @finish="onFinish" />
@@ -114,8 +148,10 @@
    realTimeAlarm,
    realTimeSearch,
    realTimeGroup,
    JhStateActionSerchByCondition,
} from "@/assets/js/api"
import BarChart from "@/components/chart/BarChart";
import progressBlockVerticalBar from "@/components/chart/progress-block-vertical-bar";
import getMarkLineData from "@/components/chart/js/getMarkLineData";
let vol, resChart, temp, conduct, currChart, leakVol;
let tblData = [];
@@ -140,10 +176,99 @@
            },
            batt: {},
            timer: new this.$units.Timeout('movingRingSystemRealTime'),
            totolTable: [
                {
                    key: "input_vol_total",
                    name: "总输入电压",
                    value: 0,
                },
                {
                    key: "output_vol_total",
                    name: "总输出电压",
                    value: 0,
                },
            ],
            volTable: [
                {
                    key: "output_vol_one",
                    name: "输出电压1",
                    value: 0,
                },
                {
                    key: "output_vol_two",
                    name: "输出电压2",
                    value: 0,
                },
                {
                    key: "output_vol_three",
                    name: "输出电压3",
                    value: 0,
                },
                {
                    key: "output_vol_four",
                    name: "输出电压4",
                    value: 0,
                },
                {
                    key: "output_vol_five",
                    name: "输出电压5",
                    value: 0,
                },
                {
                    key: "output_vol_six",
                    name: "输出电压6",
                    value: 0,
                },
                {
                    key: "output_vol_seven",
                    name: "输出电压7",
                    value: 0,
                },
                {
                    key: "output_vol_eight",
                    name: "输出电压8",
                    value: 0,
                },
                {
                    key: "output_vol_nine",
                    name: "输出电压9",
                    value: 0,
                },
                {
                    key: "output_vol_ten",
                    name: "输出电压10",
                    value: 0,
                },
            ],
            eleTable: [
                {
                    key: "input_curr_total",
                    name: "总输入电流",
                    value: 0,
                },
                {
                    key: "output_curr_total",
                    name: "总输出电流",
                    value: 0,
                },
            ],
            otherTable: [
                {
                    key: "dev_version",
                    name: "版本号",
                    value: "???",
                },
                {
                    key: "dev_temp",
                    name: "温度",
                    value: "???",
                },
            ],
        }
    },
    components: {
        BarChart,
        progressBlockVerticalBar,
    },
    computed: {
        backInputs() {
@@ -191,6 +316,73 @@
        },
    },
    methods: {
        //定时器
        startTimer() {
            this.timer.start(() => {
                this.$axios
                    .all([
                        this.realTimeSearch(),
                        this.realTimeGroupss(),
                        this.search(),
                    ])
                    .then(() => {
                        this.timer.open();
                    })
                    .catch(() => {
                        this.timer.open();
                    });
            }, 3000);
        },
        search() {
            JhStateActionSerchByCondition({
                dev_id: this.batt.FBSDeviceId,
            })
                .then((res) => {
                    let resData = JSON.parse(res.data.result);
                    if (resData.code == 1) {
                        let dataObj = resData.data[0];
                        for (let key in dataObj) {
                            this.totolTable.map((item) => {
                                if (item.key == key) {
                                    item.value = dataObj[key];
                                }
                            });
                            this.volTable.map((item) => {
                                if (item.key == key) {
                                    item.value = dataObj[key];
                                }
                            });
                            this.eleTable.map((item) => {
                                if (item.key == key) {
                                    item.value = dataObj[key];
                                }
                            });
                            this.otherTable.map((item) => {
                                if (item.key == key) {
                                    item.value = dataObj[key];
                                }
                            });
                        }
                    }
                    // 设置输出电压柱状图
                    this.$refs.outputVolList.setData({
                        title: {
                            show: true,
                            text: "输出电压",
                            x: "center",
                            textStyle: {
                                fontSize: "14",
                                color: '#323233'
                            }
                        },
                        name: "输出电压",
                        list: this.volTable,
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //查询电池组信息
        getBattGroupInfo(BattGroupId) {
            getBattGroupInfo(BattGroupId).then(res => {
@@ -269,21 +461,6 @@
                    break;
                }
            }
        },
        startTimer() {
            this.timer.start(() => {
                this.$axios
                    .all([
                        this.realTimeSearch(),
                        this.realTimeGroupss(),
                    ])
                    .then(() => {
                        this.timer.open();
                    })
                    .catch(() => {
                        this.timer.open();
                    });
            }, 3000);
        },
        /* echars图表 */
        realTimeSearch() {
@@ -699,4 +876,33 @@
    width: 100%;
    height: 500px;
}

.listCon {
    width: 100%;
    height: 178px;
    border-bottom: 2px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-bottom: 22px;
}

.listCon .item {
    font-size: 36px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #4b88f9;
    line-height: 56px;
    text-align: center;
}

.listCon .item .title {
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40px;
    margin-top: 8px;
}
</style>