he wei
2023-12-20 d216ef279fee1f19e835b44dd5e6c40af5bf17ac
src/views/switchControl/index.vue
@@ -62,13 +62,18 @@
              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>
@@ -90,11 +95,12 @@
              </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">
@@ -124,9 +130,15 @@
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 = [
      {
@@ -167,50 +179,55 @@
    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,
@@ -219,62 +236,37 @@
      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: [],
      },
    };
  },
@@ -294,12 +286,178 @@
    },
  },
  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>
@@ -307,12 +465,15 @@
.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;
@@ -332,31 +493,37 @@
          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;
@@ -366,42 +533,52 @@
    .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;
      }
@@ -417,9 +594,11 @@
    display: flex;
    flex-direction: column;
    margin-left: 10px;
    &:first-child {
      margin-left: 0;
    }
    .yc-title {
      text-align: center;
      font-size: 18px;
@@ -427,20 +606,24 @@
      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;
@@ -451,6 +634,7 @@
      }
    }
  }
  .border {
    flex: 1;
    border-radius: 6px;
@@ -458,6 +642,7 @@
    background: #011f39;
    padding: 46px 8px;
    margin-left: 10px;
    &:only-child {
      margin-left: auto;
      margin-right: auto;
@@ -465,4 +650,4 @@
    }
  }
}
</style>
</style>