<script>
|
import FlexBox from "@/components/FlexBox.vue";
|
import HorizontalBar from "@/components/myCharts/horizontalBar.vue";
|
import UpsDataList from "@/components/upsDataList.vue";
|
|
export default {
|
name: "analogData",
|
components: {UpsDataList, HorizontalBar, FlexBox},
|
props: {
|
list: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
list1: {
|
type: Array,
|
default() {
|
return []
|
}
|
},
|
},
|
data() {
|
return {}
|
},
|
methods: {
|
resize() {
|
this.$nextTick(()=> {
|
this.$refs.bar1.resize();
|
this.$refs.bar2.resize();
|
this.$refs.bar3.resize();
|
});
|
},
|
setBarOption(phaseVol, currents, lineVol) {
|
this.$refs.bar1.setData(phaseVol);
|
this.$refs.bar2.setData(currents);
|
this.$refs.bar3.setData(lineVol);
|
}
|
},
|
mounted() {
|
this.resize();
|
}
|
}
|
</script>
|
|
<template>
|
<div class="page-flex-layout">
|
<div class="page-division h50-percent">
|
<el-row :gutter="8" class="full-height">
|
<el-col :span="8" class="full-height">
|
<flex-box title="输入/输出电压" size="mini" no-header>
|
<horizontal-bar ref="bar1"></horizontal-bar>
|
</flex-box>
|
</el-col>
|
<el-col :span="8" class="full-height">
|
<flex-box title="输入/输出电流" size="mini" no-header>
|
<horizontal-bar ref="bar2"></horizontal-bar>
|
</flex-box>
|
</el-col>
|
<el-col :span="8" class="full-height">
|
<flex-box title="输入/输出电压" size="mini" no-header>
|
<horizontal-bar ref="bar3"></horizontal-bar>
|
</flex-box>
|
</el-col>
|
</el-row>
|
</div>
|
<div class="page-division h50-percent">
|
<el-row :gutter="8" class="full-height">
|
<el-col :span="12" class="full-height">
|
<ups-data-list :cols="3" :list="list"></ups-data-list>
|
</el-col>
|
<el-col :span="12" class="full-height">
|
<ups-data-list :cols="3" :list="list1"></ups-data-list>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.page-flex-layout {
|
height: 100%;
|
}
|
.page-division {
|
box-sizing: border-box;
|
padding-bottom: 8px;
|
}
|
.container-test {
|
background-color: #ee9900;
|
height: 100%;
|
}
|
</style>
|
