| | |
| | | <div class="p-contain"> |
| | | <panel class="panel side" title="通信电源柜线路选择"> |
| | | <div class="content"> |
| | | <div class="list-item AC active" > |
| | | <div |
| | | :class="['list-item', 'AC', { active: currIdx == 0 }]" |
| | | @click="changeTab(0)" |
| | | > |
| | | <div class="i"></div> |
| | | <div class="name">交流进线1</div> |
| | | </div> |
| | | <div class="list-item AC"> |
| | | <div |
| | | :class="['list-item', 'AC', { active: currIdx == 1 }]" |
| | | @click="changeTab(1)" |
| | | > |
| | | <div class="i"></div> |
| | | <div class="name">交流进线2</div> |
| | | </div> |
| | | <div class="list-item DC"> |
| | | <div |
| | | :class="['list-item', 'DC', { active: currIdx == 2 }]" |
| | | @click="changeTab(2)" |
| | | > |
| | | <div class="i"></div> |
| | | <div class="name">直流进线1</div> |
| | | </div> |
| | | <div class="list-item DC"> |
| | | <div |
| | | :class="['list-item', 'DC', { active: currIdx == 3 }]" |
| | | @click="changeTab(3)" |
| | | > |
| | | <div class="i"></div> |
| | | <div class="name">直流进线2</div> |
| | | </div> |
| | |
| | | label="操作" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button type="primary" size="mini">合闸</el-button> |
| | | <el-button disabled="" type="primary" size="mini" |
| | | <el-button type="primary" :disabled="!hasPermission" size="mini" |
| | | >合闸</el-button |
| | | > |
| | | <el-button |
| | | :disabled="!hasPermission" |
| | | type="primary" |
| | | size="mini" |
| | | >分闸</el-button |
| | | > |
| | | </template> |
| | |
| | | </el-table> |
| | | </div> |
| | | </panel> |
| | | <panel class="panel row row1" title="断路器电参量实时参数"> |
| | | <panel class="panel row row1" :title="actName + '电参量实时参数'"> |
| | | <div class="content"> |
| | | <div class="yc-panel"> |
| | | <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1"> |
| | | <div class="yc-title">三相相电压(V)</div> |
| | | <div class="yc-content"> |
| | | <div class="bar-contain"> |
| | | <bar1 ref="bar1"></bar1> |
| | | <bar1 ref="bar1" unit="V"></bar1> |
| | | </div> |
| | | <div class="info"> |
| | | <!-- <div class="info"> |
| | | <div class="label">平均值:</div> |
| | | <div class="value">123V</div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | <div class="border"> |
| | | <list-card :datas="props1" :cols="1" :rows="4"></list-card> |
| | | <list-card |
| | | :datas="$data[`props${currIdx + 1}`]" |
| | | :cols="1" |
| | | :rows="4" |
| | | ></list-card> |
| | | </div> |
| | | <div class="yc-panel"> |
| | | <div class="yc-title">三相相电压(V)</div> |
| | | <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1"> |
| | | <div class="yc-title">三相相电流(A)</div> |
| | | <div class="yc-content"> |
| | | <div class="bar-contain"> |
| | | <bar2 ref="bar2"></bar2> |
| | | <bar2 ref="bar2" unit="A"></bar2> |
| | | </div> |
| | | <div class="info"> |
| | | <!-- <div class="info"> |
| | | <div class="label">平均值:</div> |
| | | <div class="value">123V</div> |
| | | </div> |
| | | <div class="value">123A</div> |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | <div class="border"> |
| | | <!-- <div class="border"> |
| | | <list-card :datas="props2" :cols="1" :rows="4"></list-card> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </panel> |
| | | </div> |
| | |
| | | data() { |
| | | const props1 = [ |
| | | { |
| | | label: "AB相线电压(V)", |
| | | label: "1路总有功功率(W)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "BC相线电压(V)", |
| | | label: "1路交流输入频率(Hz)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "CA相线电压(V)", |
| | | label: "1路总功率因数", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "线电压平均值(V)", |
| | | label: "1路交流断路器总数量", |
| | | key: "", |
| | | }, |
| | | ]; |
| | | const props2 = [ |
| | | { |
| | | label: "电流不平衡度(%)", |
| | | label: "2路总有功功率(W)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "零序电流(A)", |
| | | label: "2路交流输入频率(Hz)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "总有功功率", |
| | | label: "2路总功率因数", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "总功率因数", |
| | | label: "2路交流断路器总数量", |
| | | key: "", |
| | | }, |
| | | ]; |
| | | const props3 = [ |
| | | { |
| | | label: "1路直流电压(V)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "1路直流电流(A)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "1路直流断路器总数量", |
| | | key: "", |
| | | }, |
| | | ]; |
| | | const props4 = [ |
| | | { |
| | | label: "2路直流电压(V)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "2路直流电流(A)", |
| | | key: "", |
| | | }, |
| | | { |
| | | label: "2路直流断路器总数量", |
| | | key: "", |
| | | }, |
| | | ]; |
| | | // const props2 = [ |
| | | // { |
| | | // label: "电流不平衡度(%)", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "零序电流(A)", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "总有功功率", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "总功率因数", |
| | | // key: "", |
| | | // }, |
| | | // ]; |
| | | return { |
| | | currIdx: 0, |
| | | props1, |
| | | props2, |
| | | props3, |
| | | props4, |
| | | table: { |
| | | headers: [ |
| | | { |
| | |
| | | c: 3, |
| | | d: 4, |
| | | }, |
| | | { |
| | | a: 1, |
| | | b: 2, |
| | | c: 3, |
| | | d: 4, |
| | | }, |
| | | { |
| | | a: 1, |
| | | b: 2, |
| | | c: 3, |
| | | d: 4, |
| | | }, |
| | | { |
| | | a: 1, |
| | | b: 2, |
| | | c: 3, |
| | | d: 4, |
| | | }, |
| | | ], |
| | | }, |
| | | }; |
| | |
| | | bar1, |
| | | bar2, |
| | | }, |
| | | methods: {}, |
| | | computed: { |
| | | hasPermission() { |
| | | return this.$store.state.user.downloadFlag == 1; |
| | | }, |
| | | actName() { |
| | | return ["交流进线1", "交流进线2", "直流进线1", "直流进线2"][this.currIdx]; |
| | | }, |
| | | }, |
| | | methods: { |
| | | changeTab(idx) { |
| | | this.currIdx = idx; |
| | | }, |
| | | }, |
| | | |
| | | mounted() {}, |
| | | }; |
| | |
| | | border-radius: 6px; |
| | | color: #fff; |
| | | font-size: 20px; |
| | | cursor: pointer; |
| | | |
| | | .i { |
| | | width: 40px; |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | .value { |
| | | background: #0C4D77;; |
| | | background: #0c4d77; |
| | | width: 60px; |
| | | border-radius: 4px; |
| | | padding: 2px 4px; |
| | | color: #78eef8; |
| | | border: 1px #78EEF8 solid; |
| | | border: 1px #78eef8 solid; |
| | | } |
| | | } |
| | | } |
| | |
| | | background: #011f39; |
| | | padding: 46px 8px; |
| | | margin-left: 10px; |
| | | &:only-child { |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | | flex: 0 0 600px; |
| | | } |
| | | } |
| | | } |
| | | </style> |