he wei
2023-12-23 fc842d9e22aef1946df050257be41b4bfbd838a9
src/views/home/index.vue
@@ -7,6 +7,7 @@
import TextBox from "./components/textBox";
import SvgLine from "./components/svgLine";
import getBinaryDigits from "@/assets/js/getBinaryDigits";
import FileProcess from "./fileProcess";
import getWebUrl from "@/assets/js/getWebUrl";
import Panel from "@/components/panel.vue";
@@ -15,6 +16,8 @@
import hrImg from "./images/hr.png";
import ListCard from "@/components/listCard.vue";
// import { mixin as clickaway } from "vue-clickaway";
import { getBreakerNamesInGroup } from "@/views/devManager/js/apis";
import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("ckRtAndSignalAndHr");
@@ -35,6 +38,8 @@
  data() {
    const baseURL = getWebUrl();
    return {
      breakerList: [],
      curSwitch: {},
      PDG,
      KGG,
      HR,
@@ -47,18 +52,33 @@
        top: 0,
        left: 0,
      },
      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: [],
      },
    };
  },
  methods: {
    ...mapMutations('globalData', ['UPDATE_HOMEDATA']),
    showState(el) {
      console.log("hhhh", el);
    ...mapMutations("globalData", ["UPDATE_HOMEDATA"]),
    showState(el, name) {
      // console.log("hhhh", el);
      let { x, y, width, height, left, right, top, bottom } =
        el.getBoundingClientRect();
      console.log(x, "pos");
      this.popPosition.left = right + "px";
      this.popPosition.top = bottom + "px";
      this.getSwitchInfo(name);
      this.popVisible = true;
    },
    getSwitchInfo(name) {
      this.curSwitch =
        this.breakerList.filter((v) => v.breakerName == name)[0] || {};
    },
    onWSMessage1(res) {
      let { data, data2, data3 } = JSON.parse(res.data);
@@ -69,18 +89,76 @@
        ...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,
      };
      // this.UPDATE_HOMEDATA(this.rtData);
    },
    redirect(tabIdx) {
      this.$router.push({ name: "realtime", params: { tabIdx } });
    },
    getBreakerNamesInGroup() {
      getBreakerNamesInGroup()
        .then((res) => {
          let list = [];
          let { code, data, data2 } = res.data;
          if (code && data) {
            // console.log(data);
            Object.keys(data2)
              .sort()
              .forEach((v) => {
                list.push(...data2[v]);
              });
          }
          this.breakerList = list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  computed: {
    ...mapState({
      cachedViews: (state) => state.tagsView.cachedViews,
    }),
    switchState() {
      let v = this.curSwitch;
      if (!v['nodeName']) {
        return '未知';
      }
      return this.switchStates[v.nodeName][v.nodeBit] ? "合闸" : "分闸";
  },
  mounted() {},
  },
  mounted() {
    this.getBreakerNamesInGroup();
  },
};
</script>
@@ -182,51 +260,43 @@
                  <svg width="100%" height="100%" viewBox="0 0 500 340">
                    <text-box :offset="[220, 10]"></text-box>
                    <protector-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK12')"
                      :offset="[36, 10]"
                      sw-name="JK-12"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK13')"
                      :type="3"
                      :offset="[36, 134]"
                      sw-name="JK-13"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK14')"
                      :type="3"
                      :offset="[220, 134]"
                      sw-name="JK-14"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK15')"
                      :type="3"
                      :offset="[390, 134]"
                      sw-name="JK-15"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK16')"
                      :type="1"
                      :offset="[36, 252]"
                      sw-name="JK-16"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK17')"
                      :type="1"
                      :offset="[150, 252]"
                      sw-name="JK-17"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK18')"
                      :type="1"
                      :offset="[274, 252]"
                      sw-name="JK-18"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK19')"
                      :type="1"
                      :offset="[390, 252]"
                      sw-name="JK-19"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -293,7 +363,8 @@
              </div>
              <div class="yc-panel-footer">
                <div class="state">防雷保护器空开跳闸</div>
                <!-- TODO 告警 滚动 -->
                <div class="state"></div>
              </div>
            </div>
          </div>
@@ -305,51 +376,43 @@
                  <svg width="100%" height="100%" viewBox="0 0 500 340">
                    <text-box :offset="[220, 10]"></text-box>
                    <protector-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK22')"
                      :offset="[390, 10]"
                      sw-name="JK-22"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK23')"
                      :type="3"
                      :offset="[36, 134]"
                      sw-name="JK-23"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK24')"
                      :type="3"
                      :offset="[220, 134]"
                      sw-name="JK-24"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK25')"
                      :type="3"
                      :offset="[390, 134]"
                      sw-name="JK-25"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK26')"
                      :type="1"
                      :offset="[36, 252]"
                      sw-name="JK-26"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK27')"
                      :type="1"
                      :offset="[150, 252]"
                      sw-name="JK-27"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK28')"
                      :type="1"
                      :offset="[274, 252]"
                      sw-name="JK-28"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'JK29')"
                      :type="1"
                      :offset="[390, 252]"
                      sw-name="JK-29"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -428,59 +491,50 @@
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 622 240">
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK11')"
                      :type="2"
                      :offset="[269, 14]"
                      sw-name="DK-11"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK12')"
                      small
                      :offset="[20, 160]"
                      sw-name="DK-12"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK13')"
                      small
                      :offset="[94, 160]"
                      sw-name="DK-13"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK14')"
                      small
                      :offset="[168, 160]"
                      sw-name="DK-14"
                    ></switch-box>
                    <!-- alarm -->
                    <switch-box
                      @click="showState"
                      alarm
                      @click="(el) => showState(el, 'DK15')"
                      small
                      :offset="[242, 160]"
                      sw-name="DK-15"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK16')"
                      small
                      :offset="[316, 160]"
                      sw-name="DK-16"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK17')"
                      small
                      :offset="[390, 160]"
                      sw-name="DK-17"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK18')"
                      small
                      :offset="[464, 160]"
                      sw-name="DK-18"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK19')"
                      small
                      :offset="[538, 160]"
                      sw-name="DK-19"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -548,58 +602,49 @@
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 622 240">
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK21')"
                      :type="2"
                      :offset="[269, 14]"
                      sw-name="DK-21"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK22')"
                      small
                      :offset="[20, 160]"
                      sw-name="DK-22"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK23')"
                      small
                      :offset="[94, 160]"
                      sw-name="DK-23"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK24')"
                      small
                      :offset="[168, 160]"
                      sw-name="DK-24"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK25')"
                      small
                      :offset="[242, 160]"
                      sw-name="DK-25"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK26')"
                      small
                      :offset="[316, 160]"
                      sw-name="DK-26"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK27')"
                      small
                      :offset="[390, 160]"
                      sw-name="DK-27"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK28')"
                      small
                      :offset="[464, 160]"
                      sw-name="DK-28"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      @click="(el) => showState(el, 'DK29')"
                      small
                      :offset="[538, 160]"
                      sw-name="DK-29"
                    ></switch-box>
                    <svg-line
                      :points="[
@@ -667,15 +712,15 @@
    <div class="pop-info" v-show="popVisible" :style="popPosition">
      <div class="item">
        <div class="label">开关名称</div>
        <div class="value">直流微断开关DK16</div>
        <div class="value">{{ curSwitch['breakerType'] + curSwitch['breakerName'] }}</div>
      </div>
      <div class="item">
        <div class="label">开关规格</div>
        <div class="value">1P/16A</div>
        <div class="value">{{ curSwitch['breakerLevel'] + 'P' }}</div>
      </div>
      <div class="item">
        <div class="label">开关状态</div>
        <div class="value">分闸</div>
        <div class="value">{{ switchState }}</div>
      </div>
    </div>
    <div