<template>
|
<div class="component-container">
|
<Row>
|
<i-col :xl="14" :xxl="17" span="10">
|
<h-card style="margin-left: 16px;margin-right: 16px;">
|
<line-graph class="h300 bg-white"
|
ref="processLine1"
|
unit=""
|
min="-10"
|
max="10"
|
theme="dark-color"
|
title="测试折线1"></line-graph>
|
<line-graph class="h300 bg-white"
|
ref="processLine2"
|
unit=""
|
min="0"
|
max="100"
|
theme="dark-color"
|
title="测试折线2"></line-graph>
|
</h-card>
|
</i-col>
|
<i-col :xl="10" :xxl="7" span="14">
|
<divider-card title="输入状态" style="margin-right:16px;">
|
<div class="card-content">
|
<div class="content-item">
|
<span class="mrr16">IN1</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">IN2</span>
|
<span class="mrr8">交流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">IN3</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">IN4</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
</div>
|
</divider-card>
|
<divider-card title="输出状态" style="margin-right:16px;margin-top:30px;">
|
<div class="card-content">
|
<div class="content-item">
|
<span class="mrr16">OUT1</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">OUT2</span>
|
<span class="mrr8">交流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">OUT3</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">OUT4</span>
|
<span class="mrr8">直流输入</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
</div>
|
</divider-card>
|
<divider-card title="采集状态" style="margin-right:16px;margin-top:30px;">
|
<div class="card-content">
|
<div class="content-item">
|
<span class="mrr16">sens1</span>
|
<span class="mrr8">电压量</span>
|
<span class="hidden">占</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">sens2</span>
|
<span class="mrr8">开关量</span>
|
<span class="hidden">占</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">sens3</span>
|
<span class="mrr8">信号波形</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
<div class="content-item mrt8">
|
<span class="mrr16">sens4</span>
|
<span class="mrr8">通信</span>
|
<span class="hidden">占位</span>
|
<radius-input></radius-input> V
|
<radius-input></radius-input> A
|
</div>
|
</div>
|
</divider-card>
|
</i-col>
|
</Row>
|
</div>
|
</template>
|
<script>
|
import LineGraph from '../../components/LineGraph';
|
import HCard from '../../components/HCard';
|
import DividerCard from '../../components/DividerCard';
|
import RadiusInput from '../../components/RadiusInput';
|
export default {
|
components:{
|
LineGraph,
|
DividerCard,
|
HCard,
|
RadiusInput
|
},
|
methods:{
|
setProcessLine: function() {
|
var processLine1Opt = {
|
xAxis: {
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
|
},
|
series: {
|
data: [0,2,0,-2,0,2,0,-2,0,2,0]
|
}
|
};
|
|
this.$refs['processLine1'].setOption(processLine1Opt);
|
},
|
resize: function() {
|
this.$refs['processLine1'].resize();
|
this.$refs['processLine2'].resize();
|
}
|
},
|
mounted: function() {
|
var _self = this;
|
this.setProcessLine();
|
window.onresize = function() {
|
_self.resize();
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.card-content .content-item{
|
font-size: 16px;
|
text-align: center;
|
}
|
</style>
|
