| | |
| | | label="操作" |
| | | > |
| | | <template slot-scope="scope"> |
| | | <el-button type="primary" :disabled="!hasPermission" size="mini" |
| | | <el-button |
| | | type="primary" |
| | | :disabled="!hasPermission" |
| | | size="mini" |
| | | @click="updateBreaker(1, scope.row)" |
| | | >合闸</el-button |
| | | > |
| | | <el-button |
| | | :disabled="!hasPermission" |
| | | type="primary" |
| | | size="mini" |
| | | @click="updateBreaker(0, scope.row)" |
| | | >分闸</el-button |
| | | > |
| | | </template> |
| | |
| | | </div> --> |
| | | </div> |
| | | </div> |
| | | <div class="border"> |
| | | <div class="border" v-if="currIdx == 2 || currIdx == 3"> |
| | | <list-card |
| | | :datas="$data[`props${currIdx + 1}`]" |
| | | :cols="1" |
| | | :rows="4" |
| | | :valueObj="rtData" |
| | | ></list-card> |
| | | </div> |
| | | <div class="yc-panel" v-if="currIdx == 0 || currIdx == 1"> |
| | |
| | | import gauge3 from "@/components/gauge3"; |
| | | import bar1 from "@/components/bar1"; |
| | | import bar2 from "@/components/bar2"; |
| | | import { updateBreaker } from "./js/apis"; |
| | | import getBinaryDigits from "@/assets/js/getBinaryDigits"; |
| | | |
| | | import createWs from "@/assets/js/websocket/plus"; |
| | | const WSMixin = createWs("ckRtAndSignalAndHr", "breakerInfAndAlm"); |
| | | |
| | | export default { |
| | | name: "", |
| | | |
| | | mixins: [WSMixin], |
| | | data() { |
| | | const props1 = [ |
| | | { |
| | |
| | | const props3 = [ |
| | | { |
| | | label: "1路直流电压(V)", |
| | | key: "", |
| | | // label: "1段直流母线输出电压", |
| | | key0: "dcOut1VolReal", |
| | | key1: "dcOut1VolFake", |
| | | flag: "dcOut1VolSt", |
| | | }, |
| | | { |
| | | label: "1路直流电流(A)", |
| | | key: "", |
| | | // label: "1段直流母线输出电流", |
| | | key0: "dcOut1CurrReal", |
| | | key1: "dcOut1CurrFake", |
| | | flag: "dcOut1CurrSt", |
| | | }, |
| | | { |
| | | label: "1路直流断路器总数量", |
| | | key: "", |
| | | }, |
| | | // { |
| | | // label: "1路直流断路器总数量", |
| | | // key: "", |
| | | // }, |
| | | ]; |
| | | const props4 = [ |
| | | { |
| | | label: "2路直流电压(V)", |
| | | key: "", |
| | | // label: "2段直流母线输出电压", |
| | | key0: "dcOut2VolReal", |
| | | key1: "dcOut2VolFake", |
| | | flag: "dcOut2VolSt", |
| | | }, |
| | | { |
| | | label: "2路直流电流(A)", |
| | | key: "", |
| | | // label: "2段直流母线输出电流", |
| | | key0: "dcOut2CurrReal", |
| | | key1: "dcOut2CurrFake", |
| | | flag: "dcOut2CurrSt", |
| | | }, |
| | | { |
| | | label: "2路直流断路器总数量", |
| | | key: "", |
| | | }, |
| | | // { |
| | | // label: "2路直流断路器总数量", |
| | | // key: "", |
| | | // }, |
| | | ]; |
| | | // const props2 = [ |
| | | // { |
| | | // label: "电流不平衡度(%)", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "零序电流(A)", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "总有功功率", |
| | | // key: "", |
| | | // }, |
| | | // { |
| | | // label: "总功率因数", |
| | | // key: "", |
| | | // }, |
| | | // ]; |
| | | return { |
| | | switchStates: { |
| | | acin1_switch_trip: [], |
| | | acin2_switch_trip: [], |
| | | ac1_outswitch1_trip: [], |
| | | ac2_outswitch1_trip: [], |
| | | dcin1_switch_trip: [], |
| | | dcin2_switch_trip: [], |
| | | dc1_switch1_trip: [], |
| | | dc2_switch1_trip: [], |
| | | }, |
| | | rtData: {}, |
| | | currIdx: 0, |
| | | props1, |
| | | props2, |
| | |
| | | table: { |
| | | headers: [ |
| | | { |
| | | prop: "a", |
| | | prop: "breakerType", |
| | | label: "断路器类型", |
| | | minWidth: 320, |
| | | }, |
| | | { |
| | | prop: "b", |
| | | prop: "breakerName", |
| | | label: "断路器名称", |
| | | width: 120, |
| | | }, |
| | | { |
| | | prop: "c", |
| | | prop: "breakerAddr", |
| | | label: "所在位置", |
| | | width: 162, |
| | | }, |
| | | { |
| | | prop: "d", |
| | | prop: "breakerLevelStr", |
| | | label: "级数", |
| | | width: 80, |
| | | }, |
| | | { |
| | | prop: "e", |
| | | prop: "state", |
| | | label: "开关状态", |
| | | width: 160, |
| | | }, |
| | | { |
| | | prop: "f", |
| | | label: "告警状态", |
| | | width: 120, |
| | | }, |
| | | // { |
| | | // prop: "almState", |
| | | // label: "告警状态", |
| | | // width: 120, |
| | | // }, |
| | | ], |
| | | datas: [ |
| | | { |
| | | a: 1, |
| | | b: 2, |
| | | 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, |
| | | }, |
| | | ], |
| | | datas: [], |
| | | }, |
| | | }; |
| | | }, |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | updateBreaker(state, record) { |
| | | this.$confirm("确认" + (state ? "合闸" : "分闸") + "?", "提示", { |
| | | type: "warning", |
| | | }) |
| | | .then(() => { |
| | | let loading = this.$layer.loading(); |
| | | let { breakerId, breakerName, breakerAddr } = record; |
| | | let param = { |
| | | breakerId, |
| | | switchState: state, |
| | | switchNumber: breakerName, |
| | | switchScope: breakerAddr, |
| | | }; |
| | | updateBreaker(param) |
| | | .then((res) => { |
| | | let { code, data, msg } = res.data; |
| | | this.$layer.close(loading); |
| | | if (code && data) { |
| | | this.$message.success(msg); |
| | | } else { |
| | | this.$message.error(msg); |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | this.$layer.close(loading); |
| | | }); |
| | | }) |
| | | .catch((err) => { |
| | | console.log(err); |
| | | }); |
| | | }, |
| | | onWSMessage1(res) { |
| | | let { data, data2, data3 } = JSON.parse(res.data); |
| | | // console.log(data, "=====data", data2); |
| | | // this.paramsAlram(data); |
| | | this.rtData = { |
| | | ...data, |
| | | ...data2, |
| | | ...data3, |
| | | }; |
| | | |
| | | let { |
| | | acIn1SwitchTripReal, |
| | | acIn2SwitchTripReal, |
| | | ac1OutSwitch1TripReal, |
| | | ac2OutSwitch1TripReal, |
| | | dcIn1SwitchTripReal, |
| | | dcIn2SwitchTripReal, |
| | | dc1Switch1TripReal, |
| | | dc2Switch1TripReal, |
| | | } = data2; |
| | | |
| | | let ac1_outswitch1_trip = getBinaryDigits(ac1OutSwitch1TripReal); |
| | | let ac2_outswitch1_trip = getBinaryDigits(ac2OutSwitch1TripReal); |
| | | let dc1_switch1_trip = getBinaryDigits(dc1Switch1TripReal); |
| | | let dc2_switch1_trip = getBinaryDigits(dc2Switch1TripReal); |
| | | let acin1_switch_trip = [acIn1SwitchTripReal]; |
| | | let acin2_switch_trip = [acIn2SwitchTripReal]; |
| | | let dcin1_switch_trip = [dcIn1SwitchTripReal]; |
| | | let dcin2_switch_trip = [dcIn2SwitchTripReal]; |
| | | |
| | | this.switchStates = { |
| | | acin1_switch_trip, |
| | | acin2_switch_trip, |
| | | ac1_outswitch1_trip, |
| | | ac2_outswitch1_trip, |
| | | dcin1_switch_trip, |
| | | dcin2_switch_trip, |
| | | dc1_switch1_trip, |
| | | dc2_switch1_trip, |
| | | }; |
| | | |
| | | if (this.currIdx == 0 || this.currIdx == 1) { |
| | | this.updateChart(); |
| | | } |
| | | }, |
| | | onWSMessage2(res) { |
| | | let { data, data2 } = JSON.parse(res.data); |
| | | // console.log(data2, "=====data"); |
| | | this.getList(data2); |
| | | }, |
| | | onWSOpen2() { |
| | | this.$nextTick(() => { |
| | | this.sendMessage2(); |
| | | }); |
| | | }, |
| | | sendMessage2() { |
| | | if (!this.isWSOpen2) { |
| | | return false; |
| | | } |
| | | // console.log(this.actName, '.....'); |
| | | this.SOCKET2.send(this.actName); |
| | | }, |
| | | updateChart() { |
| | | let rtData = this.rtData; |
| | | let data1 = this.getVolData(rtData); |
| | | let data2 = this.getCurrData(rtData); |
| | | this.$refs.bar1.setData({ |
| | | xLabel: ["A相", "B相", "C相"], |
| | | sData: data1, |
| | | }); |
| | | this.$refs.bar2.setData({ |
| | | xLabel: ["A相", "B相", "C相"], |
| | | sData: data2, |
| | | }); |
| | | }, |
| | | getVolData(data) { |
| | | let idx = (this.currIdx % 2) + 1; |
| | | let name = ""; |
| | | switch (idx) { |
| | | case 1: |
| | | name = "acIn1Vol"; |
| | | break; |
| | | |
| | | case 2: |
| | | name = "acIn2Vol"; |
| | | break; |
| | | // TODU |
| | | default: |
| | | name = "acIn1Vol"; |
| | | break; |
| | | } |
| | | return ["A", "B", "C"].map((v) => { |
| | | return data[name + v + "St"] |
| | | ? data[name + v + "Fake"] |
| | | : data[name + v + "Real"]; |
| | | }); |
| | | }, |
| | | getCurrData(data) { |
| | | let idx = (this.currIdx % 2) + 1; |
| | | let name = ""; |
| | | switch (idx) { |
| | | case 1: |
| | | name = "acIn1Curr"; |
| | | break; |
| | | |
| | | case 2: |
| | | name = "acIn2Curr"; |
| | | break; |
| | | // TODU |
| | | default: |
| | | name = "acIn1Curr"; |
| | | break; |
| | | } |
| | | return ["A", "B", "C"].map((v) => { |
| | | return data[name + v + "St"] |
| | | ? data[name + v + "Fake"] |
| | | : data[name + v + "Real"]; |
| | | }); |
| | | }, |
| | | changeTab(idx) { |
| | | this.currIdx = idx; |
| | | this.sendMessage2(); |
| | | // this.getBreakerInfByAddr(); |
| | | }, |
| | | getList(res) { |
| | | if (res) { |
| | | let list = res.map((v) => { |
| | | v.breakerLevelStr = v.breakerLevel ? v.breakerLevel + "P" : ""; |
| | | v.almState = v.breakerAlmConifgList.length ? "告警" : "正常"; |
| | | v.state = this.switchStates[v.nodeName][v.nodeBit] ? "合闸" : "分闸"; |
| | | return v; |
| | | }); |
| | | this.table.datas = list; |
| | | } |
| | | }, |
| | | }, |
| | | |
| | | mounted() {}, |
| | | mounted() { |
| | | // this.getBreakerInfByAddr(); |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | .p-contain { |
| | | height: 100%; |
| | | display: flex; |
| | | |
| | | .side { |
| | | flex: 1; |
| | | |
| | | .content { |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 0 40px; |
| | | |
| | | .list-item { |
| | | margin-top: 30px; |
| | | height: 50px; |
| | |
| | | margin-left: 20px; |
| | | margin-right: 30px; |
| | | } |
| | | |
| | | &.AC .i { |
| | | background: #78eef8 url("../images/ac1.png") 50% 50% / 60% auto |
| | | background: #78eef8 url("./images/ac1.png") 50% 50% / 60% auto |
| | | no-repeat; |
| | | } |
| | | |
| | | &.DC .i { |
| | | background: #78eef8 url("../images/dc1.png") 50% 50% / 60% auto |
| | | background: #78eef8 url("./images/dc1.png") 50% 50% / 60% auto |
| | | no-repeat; |
| | | } |
| | | |
| | | &.active { |
| | | background: #f69f40; |
| | | border-color: #f69f40; |
| | | color: #011f39; |
| | | font-weight: 700; |
| | | } |
| | | |
| | | &.active.AC .i { |
| | | background: #011f39 url("../images/ac.png") 50% 50% / 60% auto |
| | | background: #011f39 url("./images/ac.png") 50% 50% / 60% auto |
| | | no-repeat; |
| | | } |
| | | |
| | | &.active.DC .i { |
| | | background: #011f39 url("../images/dc.png") 50% 50% / 60% auto |
| | | background: #011f39 url("./images/dc.png") 50% 50% / 60% auto |
| | | no-repeat; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main { |
| | | flex: 2.476; |
| | | margin-left: 10px; |
| | |
| | | .panel .content { |
| | | height: 100%; |
| | | padding: 10px; |
| | | |
| | | .tableCent { |
| | | background: #00253f; |
| | | color: #fff; |
| | | |
| | | &::before { |
| | | height: 0; |
| | | } |
| | | |
| | | /deep/ th.el-table__cell { |
| | | background: #0c4d77; |
| | | font-size: 18px; |
| | | color: #fff; |
| | | } |
| | | |
| | | /deep/ th.el-table__cell.is-leaf, |
| | | /deep/ td.el-table__cell { |
| | | border: 0 none; |
| | | } |
| | | |
| | | /deep/ tr { |
| | | background: #153953; |
| | | } |
| | | |
| | | /deep/ |
| | | .el-table__body |
| | | tr.hover-row.hover-row.hover-row |
| | | > td.el-table__cell { |
| | | background: #4871e3; |
| | | } |
| | | |
| | | /deep/ .el-table__body tr.el-table__row--striped td.el-table__cell { |
| | | background: #0d314b; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .row { |
| | | flex: 1.378; |
| | | } |
| | | |
| | | .row1 { |
| | | color: #fff; |
| | | flex: 1; |
| | | margin-top: 10px; |
| | | |
| | | .content { |
| | | display: flex; |
| | | } |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin-left: 10px; |
| | | |
| | | &:first-child { |
| | | margin-left: 0; |
| | | } |
| | | |
| | | .yc-title { |
| | | text-align: center; |
| | | font-size: 18px; |
| | |
| | | line-height: 36px; |
| | | background: #0c4d77; |
| | | } |
| | | |
| | | .yc-content { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | background: #011f39; |
| | | } |
| | | |
| | | .bar-contain { |
| | | flex: 1; |
| | | } |
| | | |
| | | .info { |
| | | // line-height: 1.4; |
| | | padding: 0 18px 20px 12px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | |
| | | .value { |
| | | background: #0c4d77; |
| | | width: 60px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .border { |
| | | flex: 1; |
| | | border-radius: 6px; |
| | |
| | | background: #011f39; |
| | | padding: 46px 8px; |
| | | margin-left: 10px; |
| | | |
| | | &:only-child { |
| | | margin-left: auto; |
| | | margin-right: auto; |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |