UA 通信电源柜对接协议和控制接口

he wei

2023-12-06 74362878b01587845f6dadd9bdfda331848fed3e

 src/views/home/index.vue

@@ -1,5 +1,5 @@
<script>
import { mapState } from "vuex";
import { mapMutations, mapState } from "vuex";
import { updateDfu, readFileList, getDevFileName, stopDfu } from "./api";
import propConfig from "./js/props";
import SwitchBox from "./components/switchBox";
@@ -14,14 +14,15 @@
import kggImg from "./images/kgg.png";
import hrImg from "./images/hr.png";
import ListCard from "@/components/listCard.vue";
// import { mixin as clickaway } from "vue-clickaway";

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("dev", "dfu");
const WSMixin = createWs("ckRtAndSignalAndHr");

const { PDG, KGG, HR } = propConfig;
export default {
  name: "home",
  // mixins: [WSMixin],
  mixins: [WSMixin],
  components: {
    FileProcess,
    Panel,
@@ -40,12 +41,39 @@
      pdgImg,
      kggImg,
      hrImg,
      rtData: {},
      popVisible: false,
      popPosition: {
        top: 0,
        left: 0,
      },
    };
  },
  methods: {
    hover() {
      console.log('hhhh');
    }
    ...mapMutations('globalData', ['UPDATE_HOMEDATA']),
    showState(el) {
      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.popVisible = true;
    },
    onWSMessage1(res) {
      let { data, data2, data3 } = JSON.parse(res.data);
      // console.log(data, "=====data", data2);
      // this.paramsAlram(data);
      this.rtData = {
        ...data,
        ...data2,
        ...data3,
      };
      // this.UPDATE_HOMEDATA(this.rtData);
    },
    redirect(tabIdx) {
      this.$router.push({ name: "realtime", params: { tabIdx } });
    },
  },
  computed: {
    ...mapState({
@@ -63,7 +91,7 @@
        <div class="info info1">
          <div class="side">
            <div class="info-title">交直流配电柜</div>
            <div class="img">
            <div class="img" @click="redirect(0)">
              <el-image :src="pdgImg" fit="fill"></el-image>
            </div>
            <div class="state">
@@ -78,13 +106,18 @@
            </div>
          </div>
          <div class="main">
            <list-card :datas="PDG" :rows="9" :cols="2"></list-card>
            <list-card
              :datas="PDG"
              :valueObj="rtData"
              :rows="9"
              :cols="2"
            ></list-card>
          </div>
        </div>
        <div class="info info2">
          <div class="side">
            <div class="info-title">高频开关柜</div>
            <div class="img">
            <div class="img" @click="redirect(1)">
              <el-image :src="kggImg" fit="fill"></el-image>
            </div>
            <div class="state">
@@ -99,14 +132,19 @@
            </div>
          </div>
          <div class="main">
            <list-card :datas="KGG" :rows="6" :cols="2"></list-card>
            <list-card
              :datas="KGG"
              :valueObj="rtData"
              :rows="5"
              :cols="2"
            ></list-card>
          </div>
        </div>

        <div class="info info3">
          <div class="side">
            <div class="info-title">核容装置</div>
            <div class="img img3">
            <div class="img img3" @click="redirect(2)">
              <el-image :src="hrImg" fit="fill"></el-image>
            </div>
            <div class="state">
@@ -121,7 +159,13 @@
            </div>
          </div>
          <div class="main">
            <list-card :datas="HR" :emptyIdxs="[3]" :rows="4" :cols="2"></list-card>
            <list-card
              :datas="HR"
              :valueObj="rtData"
              :emptyIdxs="[3]"
              :rows="4"
              :cols="2"
            ></list-card>
          </div>
        </div>
      </div>
@@ -137,14 +181,45 @@
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 500 340">
                    <text-box :offset="[220, 10]"></text-box>
                    <protector-box :offset="[36, 10]"></protector-box>
                    <switch-box :type="3" :offset="[36, 134]"></switch-box>
                    <switch-box :type="3" :offset="[220, 134]"></switch-box>
                    <switch-box :type="3" :offset="[390, 134]"></switch-box>
                    <switch-box :type="1" :offset="[36, 252]"></switch-box>
                    <switch-box :type="1" :offset="[150, 252]"></switch-box>
                    <switch-box :type="1" :offset="[274, 252]"></switch-box>
                    <switch-box :type="1" :offset="[390, 252]"></switch-box>
                    <protector-box
                      @click="showState"
                      :offset="[36, 10]"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[36, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[220, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[390, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[36, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[150, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[274, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[390, 252]"
                    ></switch-box>
                    <svg-line
                      :points="[
                        [262, 40],
@@ -221,14 +296,45 @@
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 500 340">
                    <text-box :offset="[220, 10]"></text-box>
                    <protector-box :offset="[390, 10]"></protector-box>
                    <switch-box :type="3" :offset="[36, 134]"></switch-box>
                    <switch-box :type="3" :offset="[220, 134]"></switch-box>
                    <switch-box :type="3" :offset="[390, 134]"></switch-box>
                    <switch-box :type="1" :offset="[36, 252]"></switch-box>
                    <switch-box :type="1" :offset="[150, 252]"></switch-box>
                    <switch-box :type="1" :offset="[274, 252]"></switch-box>
                    <switch-box :type="1" :offset="[390, 252]"></switch-box>
                    <protector-box
                      @click="showState"
                      :offset="[390, 10]"
                    ></protector-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[36, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[220, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="3"
                      :offset="[390, 134]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[36, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[150, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[274, 252]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      :type="1"
                      :offset="[390, 252]"
                    ></switch-box>
                    <svg-line
                      :points="[
                        [262, 40],
@@ -305,15 +411,52 @@
              <div class="svg-contain">
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 622 240">
                    <switch-box @click.native="hover" :type="2" :offset="[269, 14]"></switch-box>
                    <switch-box @click.native="hover" small :offset="[20, 160]"></switch-box>
                    <switch-box small :offset="[94, 160]"></switch-box>
                    <switch-box small :offset="[168, 160]"></switch-box>
                    <switch-box alarm small :offset="[242, 160]"></switch-box>
                    <switch-box small :offset="[316, 160]"></switch-box>
                    <switch-box small :offset="[390, 160]"></switch-box>
                    <switch-box small :offset="[464, 160]"></switch-box>
                    <switch-box small :offset="[538, 160]"></switch-box>
                    <switch-box
                      @click="showState"
                      :type="2"
                      :offset="[269, 14]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[20, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[94, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[168, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      alarm
                      small
                      :offset="[242, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[316, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[390, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[464, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[538, 160]"
                    ></switch-box>
                    <svg-line
                      :points="[
                        [311, 82],
@@ -379,15 +522,51 @@
              <div class="svg-contain">
                <div class="pos-full">
                  <svg width="100%" height="100%" viewBox="0 0 622 240">
                    <switch-box :type="2" :offset="[269, 14]"></switch-box>
                    <switch-box small :offset="[20, 160]"></switch-box>
                    <switch-box small :offset="[94, 160]"></switch-box>
                    <switch-box small :offset="[168, 160]"></switch-box>
                    <switch-box small :offset="[242, 160]"></switch-box>
                    <switch-box small :offset="[316, 160]"></switch-box>
                    <switch-box small :offset="[390, 160]"></switch-box>
                    <switch-box small :offset="[464, 160]"></switch-box>
                    <switch-box small :offset="[538, 160]"></switch-box>
                    <switch-box
                      @click="showState"
                      :type="2"
                      :offset="[269, 14]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[20, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[94, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[168, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[242, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[316, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[390, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[464, 160]"
                    ></switch-box>
                    <switch-box
                      @click="showState"
                      small
                      :offset="[538, 160]"
                    ></switch-box>
                    <svg-line
                      :points="[
                        [311, 82],
@@ -450,6 +629,26 @@
        </div>
      </div>
    </panel>
    <!-- 开关状态 -->
    <div class="pop-info" v-show="popVisible" :style="popPosition">
      <div class="item">
        <div class="label">开关名称</div>
        <div class="value">直流微断开关DK16</div>
      </div>
      <div class="item">
        <div class="label">开关规格</div>
        <div class="value">1P/16A</div>
      </div>
      <div class="item">
        <div class="label">开关状态</div>
        <div class="value">分闸</div>
      </div>
    </div>
    <div
      class="trans-mask"
      v-show="popVisible"
      @click="popVisible = false"
    ></div>
  </div>
</template>

@@ -506,6 +705,7 @@
      .img {
        width: 80px;
        height: 120px;
        cursor: pointer;
      }
      .img3 {
        width: 120px;
@@ -646,4 +846,33 @@
    }
  }
}
.pop-info {
  position: absolute;
  background: #4871e3;
  transform: translate(-100%, -100%);
  padding: 16px;
  border-radius: 6px;
  z-index: 99;
  .item {
    display: flex;
    white-space: nowrap;
    .label {
      margin-right: 0.4em;
      &::after {
        content: ":";
      }
    }
  }
}
.trans-mask {
  z-index: 98;
  // background: transparent;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  // pointer-events: none;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
</style>