<template>
|
<div class="contentBox page-container">
|
<div class="diagram-content">
|
<div class="diagram-stc" ref="static"></div>
|
<div class="diagram-flush" ref="flush"></div>
|
|
<diagram-panel class="inputPanel" :position="inputPanelPos" title="输入频率" ref="inputPanel">
|
<div class="panel-item">
|
<div>
|
<span class="number">{{inputPanelData.guideRail}}</span>
|
<span>HZ</span>
|
</div>
|
</div>
|
<div class="panel-item">
|
<mark-progress :guideRail="inputPanelData.guideRail" :max="inputPanelData.max"></mark-progress>
|
</div>
|
<div class="panel-item"><span class="label">输入电压:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">输入额定电压:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">输入额定功率:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">Hz</span>
|
</div>
|
</diagram-panel>
|
|
<diagram-panel :position="UPSPanelPos" title="UPS参数" ref="UPSPanel">
|
<div class="panel-item"><span class="label">UPS温度:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">℃</span>
|
</div>
|
<div class="panel-item"><span class="label">供电方式:</span>
|
<el-input class="input" readonly="readonly"></el-input>
|
</div>
|
</diagram-panel>
|
|
<diagram-panel :position="batterPanelPos" title="电池参数" ref="batterPanel" class="batterPanel">
|
<div class="panel-item">
|
<div class="batter-bg">
|
<span>剩余容量</span>
|
<span class="number">100</span>
|
<span>%</span>
|
</div>
|
</div>
|
<div class="panel-item"><span class="label">电池电压:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">电池状态:</span>
|
<el-input class="input" readonly="readonly"></el-input>
|
</div>
|
</diagram-panel>
|
|
<diagram-panel class="outputPanel" :position="outputPanelPos" title="输出频率" ref="outputPanel">
|
<div class="panel-item">
|
<!-- 圆环组件 -->
|
<gradients-ring>
|
<div class="ringBox">
|
<div>输出电压</div>
|
<div>
|
<span class="number">7.0</span>
|
<span>%</span>
|
</div>
|
</div>
|
</gradients-ring>
|
</div>
|
<div class="panel-item"><span class="label">输出电压:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">输出额定电压:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">V</span>
|
</div>
|
<div class="panel-item"><span class="label">输出额定频率:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">Hz</span>
|
</div>
|
<div class="panel-item"><span class="label">温度过限点:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">℃</span>
|
</div>
|
<div class="panel-item"><span class="label">负载过限点:</span>
|
<el-input class="input" readonly="readonly"></el-input><span class="unit">%</span>
|
</div>
|
</diagram-panel>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import gridCircuitDiagram from '@/pages/home/UPSdiagram/js/gridCircuitDiagram'
|
import DiagramPanel from '@/components/smallModule/DiagramPanel.vue';
|
import GradientsRing from '@/components/smallModule/gradientsRing.vue';
|
import MarkProgress from '@/components/smallModule/markProgress.vue';
|
let diagram;
|
let handlerResiz;
|
export default {
|
components: {
|
DiagramPanel,
|
GradientsRing,
|
MarkProgress
|
},
|
data() {
|
return {
|
inputPanelPos: [],
|
UPSPanelPos: [],
|
batterPanelPos: [],
|
outputPanelPos: [],
|
inputPanelData: {
|
guideRail: 50,
|
max: 90
|
}
|
}
|
},
|
methods: {
|
setPanelPos() { //设置面板位置
|
//输入频率面板
|
let line1 = diagram.getZoomLineInfo('line1')[0];
|
let img1 = diagram.getZoomImageInfo('img1').height;
|
|
let inputPanelInfo = [this.$refs.inputPanel.$el.clientWidth, this.$refs.inputPanel.
|
$el.clientHeight
|
];
|
this.inputPanelPos = [];
|
this.inputPanelPos.push(line1[0] - inputPanelInfo[0]);
|
this.inputPanelPos.push(line1[1] + img1 / 2 + 8);
|
|
//UPS参数面板
|
let line8 = diagram.getZoomLineInfo('line8')[1];
|
let UPSPanelInfo = [this.$refs.UPSPanel.$el.clientWidth, this.$refs.UPSPanel.
|
$el.clientHeight
|
];
|
this.UPSPanelPos = [];
|
this.UPSPanelPos.push(line8[0] - UPSPanelInfo[0] - 30);
|
this.UPSPanelPos.push(line8[1] - UPSPanelInfo[1] - 18);
|
|
//电池参数面板
|
let line11 = diagram.getZoomLineInfo('line11')[1];
|
let batterPanelInfo = [this.$refs.batterPanel.$el.clientWidth, this.$refs.batterPanel.
|
$el.clientHeight
|
];
|
this.batterPanelPos = [];
|
this.batterPanelPos.push(line11[0] - batterPanelInfo[0] / 2);
|
this.batterPanelPos.push(line11[1]);
|
|
//输出频率面板
|
let img4 = diagram.getZoomImageInfo('img4').right;
|
let outputPanelInfo = [this.$refs.outputPanel.$el.clientWidth, this.$refs.outputPanel.
|
$el.clientHeight
|
];
|
this.outputPanelPos = [];
|
this.outputPanelPos.push(img4[0] + 20);
|
this.outputPanelPos.push(img4[1] - outputPanelInfo[1] * 2 / 3);
|
}
|
},
|
mounted() {
|
diagram = gridCircuitDiagram(this.$refs.static, this.$refs.flush);
|
this.setPanelPos();
|
handlerResiz = () => {
|
this.setPanelPos();
|
}
|
window.addEventListener('resize', handlerResiz);
|
},
|
destroyed () {
|
window.removeEventListener('resize', handlerResiz);
|
diagram.stop();
|
}
|
}
|
</script>
|
<style scoped>
|
|
|
.outputPanel.diagram-panel,
|
.inputPanel.diagram-panel {
|
padding: 18px 10px;
|
}
|
|
.outputPanel.diagram-panel .panel-item .label,
|
.inputPanel.diagram-panel .panel-item .label {
|
width: 110px;
|
text-align: right;
|
display: block;
|
}
|
|
.outputPanel .ringBox {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
}
|
|
.outputPanel .ringBox,
|
.inputPanel {
|
font-size: 14px;
|
}
|
|
.outputPanel .number,
|
.inputPanel .number,
|
.batterPanel .number {
|
font-weight: bold;
|
font-size: 26px;
|
}
|
|
.batterPanel .batter-bg {
|
width: 177px;
|
height: 78px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 14px;
|
}
|
</style>
|
