更新电源信息的三个状态

whychdw

2020-12-30 6be98d1cb9f591752fc7a843ff7f6c4a4b4668a7

更新电源信息的三个状态

 src/components/chart/GaugeCircleChart.vue

@@ -7,18 +7,39 @@
</template>

<script>
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
//引入仪表盘
import "echarts/lib/chart/gauge";
import "echarts/lib/chart/pie"
//引入提示框
import "echarts/lib/component/tooltip";
//引入标题
import "echarts/lib/component/title";
//引入图例标志
import "echarts/lib/component/legend";
//区域缩放
import "echarts/lib/component/dataZoom";
import "echarts/lib/component/graphic"

export default {
    name: "GaugeCircleChart",
    props: {
        id: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            fullScreenState: false,
        }
    },
    methods: {
        getOption() {
        getOption(opt) {
            let option = {
                title: {
                    show: true,
                    show: false,
                    text: '任务进度',
                    x: '50%',
                    y: '57%',
@@ -45,7 +66,7 @@
                                    [1, '#fdda9a'],
                                    [1, "#FFFFFF"]
                                ],
                                width: 14
                                width: 8
                            }
                        },
                        axisLabel: {
@@ -92,7 +113,7 @@
                                color: '#fdda9a', //用颜色渐变函数不起作用
                                width: 2,
                            },
                            length: -8
                            length: -6
                        }, //刻度样式
                        splitLine: {
                            show: false,
@@ -116,7 +137,7 @@
                            value: 0,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    color: new ECharts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#fdda9a'
                                    }, {
@@ -124,18 +145,27 @@
                                        color: '#ff7c2c'
                                    }])
                                }

                            },
                            label: {
                                normal: {
                                    formatter: function (params) {
                                        return params.value + '%';
                                    },
                                    formatter: [
                                        "{value|"+opt.value+"}",
                                        "{name|"+opt.name+"}",
                                    ].join("\n"),
                                    color: '#FFFFFF',
                                    fontSize: 54,
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    position: 'center',
                                    show: true
                                    show: true,
                                    rich: {
                                        name: {
                                            color: opt.nameColor,
                                        },
                                        value:  {
                                            fontSize: 40,
                                            color: opt.valueColor,
                                        }
                                    },
                                }
                            },
                            labelLine: {
@@ -145,11 +175,56 @@
                    },
                ]
            };
            return option;
        },
        setOption(opt) {
            let option = this.getOption(opt);
            // 清理画布
            this.$G.chartManage.get(this.id).clear();
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
        },
        resize() {
            this.$G.chartManage.get(this.id).resize();
        },
        fullScreen() {
            this.fullScreenState = this.fullScreenState?false:true;
            this.$nextTick(()=>{
                // 重置大小
                this.$G.chartManage.get(this.id).resize();
            });
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        let chart = ECharts.init(this.$refs[this.id], 'transparent');
        // 将图表添加到图表管理
        this.$G.chartManage.set(this.id, chart);
        // 设置配置项
        this.setOption({
            value: 10,
            name: '纹波峰值',
            valueColor: "#fff",
            nameColor: "#000",
        });
    }
}
</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;
}
</style>

 src/pages/dataMager/components/ChargerStatusTabPane.vue

@@ -67,7 +67,9 @@
        </flex-box>
      </div>
      <div class="h50-percent padding-box padding0088">
        <flex-box title="纹波峰值"></flex-box>
        <flex-box title="纹波峰值">
            <gauge-circle-chart id="peakVal" ref="peakVal"></gauge-circle-chart>
        </flex-box>
      </div>
    </div>
  </flex-layout>
@@ -80,10 +82,12 @@
import paramModule from "@/pages/dataMager/components/paramModule";
import LiquidFillChart from "@/components/chart/LiquidFillChart";
import WaterPolo from "@/components/chart/WaterPolo";
import GaugeCircleChart from "@/components/chart/GaugeCircleChart";

export default {
  name: "ChargerStatusTabPane",
  components: {
      GaugeCircleChart,
    WaterPolo,
    FlexBox,
    CalendarTime,
@@ -158,6 +162,7 @@
        this.$refs.chargerVol.resize();
        this.$refs.chargerCurr.resize();
        this.$refs.peakCoe.resize();
        this.$refs.peakVal.resize();
      });
    },
  },

 src/pages/dataMager/realTimeData.vue

@@ -1,8 +1,9 @@
<template>
  <flex-layout class="flex-page-wrapper-border">
    <div slot="header">{{ powerInfo }}</div>
    <content-box :title="fullStationName" class="mgl8">
        <flex-layout>
    <div class="flex-page-content">
      <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs" @tab-click="tabsChange">
                <el-tabs type="border-card" class="flex-layout noborder top-border" v-model="acTabs"
                         @tab-click="tabsChange">
        <el-tab-pane label="模拟量" name="analog">
          <analog-tab-pane ref="analog" :name="acTabs" :info="info"></analog-tab-pane>
        </el-tab-pane>
@@ -21,6 +22,7 @@
      </el-tabs>
    </div>
  </flex-layout>
    </content-box>
</template>
<script>
import AnalogTabPane from "@/pages/dataMager/components/AnalogTabPane";
@@ -30,9 +32,11 @@
import ChargerStatusTabPane from "@/pages/dataMager/components/ChargerStatusTabPane";
import {getPowerInfo} from "@/pages/dataMager/js";
import {getWsUrl} from "@/assets/js/tools";
import ContentBox from "@/components/ContentBox";

export default {
  components: {
        ContentBox,
    ChargerStatusTabPane,
    IsolatingDeviceTabPane,
    StateTabPane,
@@ -45,19 +49,52 @@
      info: getPowerInfo(),
      socket: "",
      isOpen: false,
      powerInfo: "",
            powerInfo: {
                powerDeviceId: 0,
                stationId: 0,
                stationName: "",
                stationName1: "",
                stationName2: "",
                stationName3: "",
                stationName4: " ",
                stationName5: "",
            },
    }
  },
  watch: {
    "$route.params.StationId"(StationId) {
        "$route.params.powerDeviceId"(powerDeviceId) {
      this.$nextTick(() => {
        this.getPowerInfo(StationId);
                this.getPowerInfo(powerDeviceId);
      });
    },
  },
  methods: {
    getPowerInfo(StationId) {
      this.powerInfo = StationId;
        getPowerInfo(powerDeviceId) {
            this.powerInfo = powerDeviceId;
            this.$apis.dataMager.powerMager.getInfoById({
                powerDeviceId: powerDeviceId
            }).then(res => {
                let rs = JSON.parse(res.data.result);
                if (rs.code == 1) {
                    this.powerInfo = rs.data;
                } else {
                    this.powerInfo = {
                        powerDeviceId: 0,
                        stationId: 0,
                        stationName: "",
                        stationName1: "",
                        stationName2: "",
                        stationName3: "",
                        stationName4: " ",
                        stationName5: "",
                    };
                }
                // 初始化WebSocket
                this.close();
                this.initSocket();
            }).catch(error => {
                console.log(error);
            });
    },
    tabsChange() {
      // 重置图表的大小
@@ -94,6 +131,7 @@
    },
    onMessage(res) {
      let rs = JSON.parse(res.data);
            console.log(rs);
      if (rs.code == 1 && rs.data.length != 0) {
        this.info = rs.data[0];
      }else {
@@ -104,7 +142,7 @@
      // 标识正在运行
      this.isOpen = true;
      // 向后台发送请求数据
      this.socket.send(110100001);
            this.socket.send(this.powerInfo.powerDeviceId);
    },
    onError() {

@@ -112,18 +150,31 @@
    close() {
      // 关闭websocket
      if (this.isOpen) {
                // 打印关闭信息
                console.log("关闭电源实时监控WebSocket");
        this.isOpen = false;
        this.socket.close();
      }
    },
  },
  mounted() {
    let StationId = this.$route.params.StationId;
    if (StationId) {
      this.getPowerInfo(StationId);
    computed: {
        fullStationName() {
            let powerInfo = this.powerInfo;
            if (powerInfo.powerDeviceId) {
                return powerInfo.stationName1 + "-" + powerInfo.stationName2
                    + "-" + powerInfo.stationName5 + "-" + powerInfo.stationName3 + "-电源信息";
                return "未知站点名称";
            } else {
                return "未知站点名称";
    }
    // 初始化WebSocket
    this.initSocket();
        }
    },
    mounted() {
        // 获取电源信息
        let powerDeviceId = this.$route.params.powerDeviceId;
        if (powerDeviceId) {
            this.getPowerInfo(powerDeviceId);
        }
    // 改变大小
    this.resize();
    // 窗口大小改变重置内容大小
@@ -139,13 +190,15 @@
}
</script>
<style scoped>
.mgl8 {
    margin-left: 8px;
}
.flex-page-wrapper-border {
  box-sizing: border-box;
  margin-left: 8px;
}

.flex-page-content {
  padding: 4px 8px 0;
    padding: 4px 4px 0 4px;
  box-sizing: border-box;
}
</style>

 src/pages/dataTest/movingRingSystem/HomeList.vue

@@ -190,14 +190,40 @@
        },
        nodeClick(data, node) {
            if(data.children && data.children[0] && data.children[0].label == "数据加载中...") {
                this.searchBattInfo(data, node);
                this.searchPowerInfo(data, node);
            }else if(!node){
                let batt = data.children[0];
                this.currentKey = batt.BattGroupId;
                this.leafClick(batt);
            }
        },
        searchBattInfo(data, node) {
        // 查询电源信息
        searchPowerInfo(data, node) {
            this.$apis.dataMager.powerMager.getPowerDevices({
                stationId: data.data.StationId,
            }).then(res=>{
                let rs = JSON.parse(res.data.result);
                let params = data.data;
                let powerInfo = [];
                if(rs.code == 1) {
                    powerInfo = rs.data.map(item=>{
                        params.powerDeviceId = item.powerDeviceId;
                        return {
                            id: params.StationName+"-"+9527,
                            label: "电源信息",
                            type: "powerInfo",
                            params: params,
                            leaf: true,
                        };
                    });
                }
                // 查询电池信息
                this.searchBattInfo(data, node, powerInfo);
            }).catch(error=>{
                console.log(error);
            });
        },
        searchBattInfo(data, node, powerInfo) {
            // 加载等待
            if(node) {
                node.loading=true;
@@ -226,23 +252,11 @@
                }
                let params = data.data;
                // 9527电源信息
                result.unshift({
                    id: params.StationName+"-"+9527,
                    label: "电源信息",
                    type: "powerInfo",
                    params: params,
                    leaf: true,
                powerInfo.map(item=>{
                    result.unshift(item);
                });

                // // 9528电源信息
                // result.push({
                //     id: params.StationName+"-"+9528,
                //     label: "模块信息",
                //     type: "moudleInfo",
                //     params: params,
                //     leaf: true,
                // });

                // 添加节点
                data.children = result;
                // 根据node的值判断不是通过点击触发的
                if(!node) {

 src/pages/dataTest/movingRingSystem/index.vue

@@ -18,7 +18,6 @@
    },
    methods: {
        leafClick(data) {
            console.log(data);
            switch (data.type) {
                case "battGroup":
                    this.$router.push({
@@ -27,7 +26,7 @@
                    break;
                case "powerInfo":
                    this.$router.push({
                        path: '/moving-ring-system/ele-info/'+data.params.StationId,
                        path: '/moving-ring-system/ele-info/'+data.params.powerDeviceId,
                    });
                    break;
            }

 src/router/routes.js

@@ -40,7 +40,7 @@
                component: (resolve) => require(['../pages/dataTest/realTime.vue'], resolve)
            },
            {
                path: 'ele-info/:StationId',
                path: 'ele-info/:powerDeviceId',
                name: 'movingRingSystemEleInfo',
                meta: {},
                component: (resolve) => require(['../pages/dataMager/realTimeData.vue'], resolve)