|
|
@@ -0,0 +1,432 @@
|
|
|
+<template>
|
|
|
+ <div class="powerdist">
|
|
|
+ <div class="powerdist-header">
|
|
|
+ <div>室内环境</div>
|
|
|
+ <div class="powerdist-env">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/temperature.svg" alt="">
|
|
|
+ <span>温度：62.5°C</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/humidity.svg" alt="">
|
|
|
+ <span>湿度：77.88RH</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/smoke.svg" alt="">
|
|
|
+ <span>烟感：正常</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/water.svg" alt="">
|
|
|
+ <span>水侵：正常</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="powerdist-body">
|
|
|
+ <Panel title="变压器">
|
|
|
+ <div class="transformer">
|
|
|
+ <el-select v-model="transformer" size="mini">
|
|
|
+ <el-option label="变压器1" :value="1"></el-option>
|
|
|
+ <el-option label="变压器2" :value="2"></el-option>
|
|
|
+ <el-option label="变压器3" :value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="transformer-info">
|
|
|
+ <div class="info-header">
|
|
|
+ <span>A相</span>
|
|
|
+ <span>B相</span>
|
|
|
+ <span>C相</span>
|
|
|
+ </div>
|
|
|
+ <div class="arrowImg">
|
|
|
+ <span>10kV</span>
|
|
|
+ <img src="@/assets/images/mgr/arrow.svg" alt="">
|
|
|
+ </div>
|
|
|
+ <img class="transformerImg" src="@/assets/images/mgr/transformer.svg" alt="">
|
|
|
+ <div class="info-right">
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/temperature.svg" alt="">
|
|
|
+ <span>温度：62.5°C</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <img src="@/assets/images/mgr/overhold.svg" alt="">
|
|
|
+ <span>负载率：72.5%</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-descriptions title="设备参数" :column="2" size="mini" border>
|
|
|
+ <el-descriptions-item label="产品型号">S11-M-400/10</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="额定容量">400kVA</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="额定电压">10±5%/0.4kV</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="额定频率">50HZ</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="相数">3</el-descriptions-item>
|
|
|
+ <el-descriptions-item label="生产厂家">XX电器</el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <alarm :alarmData="transformerAlarmData" />
|
|
|
+ </div>
|
|
|
+ </Panel>
|
|
|
+ <Panel title="配电柜">
|
|
|
+ <div class="power">
|
|
|
+ <el-select v-model="power" size="mini">
|
|
|
+ <el-option label="配电柜1" :value="1"></el-option>
|
|
|
+ <el-option label="配电柜2" :value="2"></el-option>
|
|
|
+ <el-option label="配电柜3" :value="3"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="power-info">
|
|
|
+ <div>
|
|
|
+ <span>205.2A</span>
|
|
|
+ <span>A相</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>205.2A</span>
|
|
|
+ <span>B相</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>205.2A</span>
|
|
|
+ <span>C相</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="power-data">
|
|
|
+ <div class="power-data-title">实时数据</div>
|
|
|
+ <div class="power-data-body">
|
|
|
+ <div>
|
|
|
+ <div class="data-num">0.76</div>
|
|
|
+ <div class="data-name">功率因素</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="power-data-row">
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="power-data-row">
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="data-num">233.2V</span>
|
|
|
+ <span class="data-name">A相电压</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <alarm :alarmData="powerAlarmData" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </Panel>
|
|
|
+ <Panel title="空开">
|
|
|
+ <div class="switch">
|
|
|
+ <el-table :data="switchData" style="width: 100%">
|
|
|
+ <el-table-column prop="name" align="center" label="支路">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="regularElec" align="center" label="额定电流">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="realElec" align="center" label="实时电流">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch v-model="scope.row.status" size="mini">
|
|
|
+ </el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </Panel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'Powerdist',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ transformer: 1,
|
|
|
+ transformerAlarmData: [
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '变压器油温值：90.3℃',
|
|
|
+ type: '过温预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ powerAlarmData: [
|
|
|
+ {
|
|
|
+ name: '配电柜A相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜A相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜A相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜A相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜A相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜B相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '配电柜B相电流：579.4A',
|
|
|
+ type: '过流预警',
|
|
|
+ createTime: '08-25 17:51:35'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ power: 1,
|
|
|
+ switchData: [
|
|
|
+ {
|
|
|
+ name:'总开',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'综合楼空调',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'综合楼照明',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'加油站照明',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'综合楼照明',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'加油站照明',
|
|
|
+ regularElec:'63A',
|
|
|
+ realElec:'63A',
|
|
|
+ status:false,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ Panel: () => import('./components/panel'),
|
|
|
+ alarm: () => import('./components/alarm.vue')
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.powerdist {
|
|
|
+ background: #f6f7f9;
|
|
|
+ padding: 10px;
|
|
|
+ min-height: inherit;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .powerdist-header {
|
|
|
+ background: #fff;
|
|
|
+ padding: 20px;
|
|
|
+ .powerdist-env {
|
|
|
+ display: flex;
|
|
|
+ color: #515a6e;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-left: 80px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 70px;
|
|
|
+ img {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .powerdist-body {
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ > div {
|
|
|
+ flex: 1;
|
|
|
+ &:not(:first-child) {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .transformer {
|
|
|
+ padding: 10px;
|
|
|
+ .transformer-info {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 50px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .transformerImg {
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .arrowImg {
|
|
|
+ position: absolute;
|
|
|
+ left: 5%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ img {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-header {
|
|
|
+ position: absolute;
|
|
|
+ top: -20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 14px;
|
|
|
+ span {
|
|
|
+ margin-left: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 14px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-descriptions__header {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ .power {
|
|
|
+ padding: 10px;
|
|
|
+ .power-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 30px;
|
|
|
+ padding: 0 10px;
|
|
|
+ > div {
|
|
|
+ color: #333333;
|
|
|
+ border: 2px solid #d7d7d7;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ height: 100px;
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ &:not(:first-of-type) {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ span:last-of-type {
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #7f7f7f;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .power-data {
|
|
|
+ margin-top: 20px;
|
|
|
+ .power-data-title {
|
|
|
+ background: #f2f2f2;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .power-data-body {
|
|
|
+ border: 1px solid #f0f1f2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px 20px;
|
|
|
+ text-align: center;
|
|
|
+ > div:last-of-type {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+ .power-data-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 20px;
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-name {
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #5a5a5a;
|
|
|
+ }
|
|
|
+ .data-num {
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .switch {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
