~whychw/ckt-web.git

<template>
  <div class="p-contain">
    <panel class="panel side" title="通信电源柜线路选择">
      <div class="content">
        <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', { active: currIdx == 1 }]"
          @click="changeTab(1)"
        >
          <div class="i"></div>
          <div class="name">交流进线2</div>
        </div>
        <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', { active: currIdx == 3 }]"
          @click="changeTab(3)"
        >
          <div class="i"></div>
          <div class="name">直流进线2</div>
        </div>
      </div>
    </panel>
    <div class="main">
      <panel class="panel row" title="交直流断路器控制">
        <div class="content">
          <el-table
            id="batteryrTimequeryTable"
            stripe
            size="small"
            :data="table.datas"
            height="100%"
            class="tableCent"
            tooltip-effect="light"
          >
            <el-table-column
              v-for="header in table.headers"
              :key="header.prop"
              :prop="header.prop"
              :label="header.label"
              :width="header.width"
              :min-width="header.minWidth"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
            <el-table-column
              prop="cztime"
              fixed="right"
              width="180px"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  :disabled="!hasPermission || scope.row.stateFlag"
                  size="mini"
                  @click="updateBreaker(1, scope.row)"
                  >合闸</el-button
                >
                <el-button
                  :disabled="!hasPermission || !scope.row.stateFlag"
                  type="primary"
                  size="mini"
                  @click="updateBreaker(0, scope.row)"
                  >分闸</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </panel>
      <panel class="panel row row1" :title="actName + '电参量实时参数'">
        <div class="content">
          <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" unit="V"></bar1>
              </div>
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123V</div>
              </div> -->
            </div>
          </div>
          <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">
            <div class="yc-title">三相相电流(A)</div>
            <div class="yc-content">
              <div class="bar-contain">
                <bar2 ref="bar2" unit="A"></bar2>
              </div>
              <!-- <div class="info">
                <div class="label">平均值:</div>
                <div class="value">123A</div>
              </div> -->
            </div>
          </div>
          <!-- <div class="border">
            <list-card :datas="props2" :cols="1" :rows="4"></list-card>
          </div> -->
        </div>
      </panel>
    </div>
  </div>
</template>
 
<script>
import Panel from "@/components/panel.vue";
import ListCard from "@/components/listCard.vue";
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 = [
      {
        label: "1路总有功功率(W)",
        key: "",
      },
      {
        label: "1路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "1路总功率因数",
        key: "",
      },
      {
        label: "1路交流断路器总数量",
        key: "",
      },
    ];
    const props2 = [
      {
        label: "2路总有功功率(W)",
        key: "",
      },
      {
        label: "2路交流输入频率(Hz)",
        key: "",
      },
      {
        label: "2路总功率因数",
        key: "",
      },
      {
        label: "2路交流断路器总数量",
        key: "",
      },
    ];
    const props3 = [
      {
        label: "1路直流电压(V)",
        // label: "1段直流母线输出电压",
        key0: "dcOut1VolReal",
        key1: "dcOut1VolFake",
        flag: "dcOut1VolSt",
      },
      {
        label: "1路直流电流(A)",
        // label: "1段直流母线输出电流",
        key0: "dcOut1CurrReal",
        key1: "dcOut1CurrFake",
        flag: "dcOut1CurrSt",
      },
      // {
      //   label: "1路直流断路器总数量",
      //   key: "",
      // },
    ];
    const props4 = [
      {
        label: "2路直流电压(V)",
        // label: "2段直流母线输出电压",
        key0: "dcOut2VolReal",
        key1: "dcOut2VolFake",
        flag: "dcOut2VolSt",
      },
      {
        label: "2路直流电流(A)",
        // label: "2段直流母线输出电流",
        key0: "dcOut2CurrReal",
        key1: "dcOut2CurrFake",
        flag: "dcOut2CurrSt",
      },
      // {
      //   label: "2路直流断路器总数量",
      //   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,
      props3,
      props4,
      table: {
        headers: [
          {
            prop: "breakerType",
            label: "断路器类型",
            minWidth: 320,
          },
          {
            prop: "breakerName",
            label: "断路器名称",
            width: 120,
          },
          {
            prop: "breakerAddr",
            label: "所在位置",
            width: 162,
          },
          {
            prop: "breakerLevelStr",
            label: "级数",
            width: 80,
          },
          {
            prop: "state",
            label: "开关状态",
            width: 160,
          },
          // {
          //   prop: "almState",
          //   label: "告警状态",
          //   width: 120,
          // },
        ],
        datas: [],
      },
    };
  },
  components: {
    Panel,
    ListCard,
    gauge3,
    bar1,
    bar2,
  },
  computed: {
    hasPermission() {
      return this.$store.state.user.downloadFlag == 1;
    },
    actName() {
      return ["交流进线1", "交流进线2", "直流进线1", "直流进线2"][this.currIdx];
    },
  },
  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] ? "合闸" : "分闸";
          v.stateFlag = this.switchStates[v.nodeName][v.nodeBit];
          return v;
        });
        this.table.datas = list;
      }
    },
  },
 
  mounted() {
    // this.getBreakerInfByAddr();
  },
};
</script>
 
<style scoped lang="less">
.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;
        display: flex;
        background: #0c4d77;
        border: 1px #78eef8 solid;
        align-items: center;
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
 
        .i {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-left: 20px;
          margin-right: 30px;
        }
 
        &.AC .i {
          background: #78eef8 url("./images/ac1.png") 50% 50% / 60% auto
            no-repeat;
        }
 
        &.DC .i {
          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
            no-repeat;
        }
 
        &.active.DC .i {
          background: #011f39 url("./images/dc.png") 50% 50% / 60% auto
            no-repeat;
        }
      }
    }
  }
 
  .main {
    flex: 2.476;
    margin-left: 10px;
    display: flex;
    flex-direction: column;
 
    .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;
      }
    }
  }
 
  .yc-panel {
    color: #fff;
    flex: 1.48;
    border: 1px solid #4da2b1;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
 
    &:first-child {
      margin-left: 0;
    }
 
    .yc-title {
      text-align: center;
      font-size: 18px;
      height: 36px;
      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-radius: 4px;
        padding: 2px 4px;
        color: #78eef8;
        border: 1px #78eef8 solid;
      }
    }
  }
 
  .border {
    flex: 1;
    border-radius: 6px;
    border: 1px #4da2b1 solid;
    background: #011f39;
    padding: 46px 8px;
    margin-left: 10px;
 
    &:only-child {
      margin-left: auto;
      margin-right: auto;
      flex: 0 0 600px;
    }
  }
}
</style>