U 断路器修改

he wei

2023-12-20 d216ef279fee1f19e835b44dd5e6c40af5bf17ac

 src/layout/components/Navbar.vue

@@ -7,20 +7,25 @@
      <div class="left">
        <div class="box">
          分闸开关
          <div class="num">12</div>
          <div class="num">{{ onSwitch }}</div>
        </div>
        <div class="box">合闸开关<div class="num">22</div></div>
        <div class="box">
          合闸开关
          <div class="num">{{ offSwitch }}</div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <div class="box">
        <!-- <div class="box">
          开关告警数
          <div class="num">4</div>
        </div>
        <div class="box">
          跳闸开关
          <div class="num">12</div>
        </div>
        </div> -->
        <div class="state">{{ isTimeout ? "离线" : "在线" }}</div>
        <div :class="['i', { danger: isTimeout }]"></div>
      </div>
    </div>
    <div class="right-menu">
@@ -64,20 +69,45 @@
import { mapGetters } from "vuex";
// import Hamburger from '@/components/Hamburger'
import PwdChange from "./PwdChange";

import createWs from "@/assets/js/websocket/plus";
const WSMixin = createWs("switch");

export default {
  mixins: [WSMixin],
  components: {
    // Hamburger,
    PwdChange,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device", "name"]),
    isTimeout() {
      let time = new Date(this.recordTime).getTime();
      let stamp = new Date(this.nowTime).getTime();

      return Math.abs(time - stamp) > 2 * 60 * 1000;
    },
  },
  data() {
    return {
      onSwitch: 0,
      offSwitch: 0,
      recordTime: -200 * 1000,
      nowTime: 0,
      changePwdVisible: false,
    };
  },
  methods: {
    onWSMessage1(res) {
      let {
        data: { onSwitch, offSwitch, recordTime, nowTime },
      } = JSON.parse(res.data);
      // console.log(data, "=====data??", data2);
      this.onSwitch = onSwitch;
      this.offSwitch = offSwitch;
      this.recordTime = recordTime;
      this.nowTime = nowTime;
    },
    changePwd() {
      this.changePwdVisible = true;
    },
@@ -98,7 +128,8 @@
  overflow: hidden;
  position: relative;
  color: #fff;
  background: #011f39 url("images/header-bg.png") 50% 50% / auto 100% no-repeat;
  background: #011f39 url("../../assets/images/header-bg.png") 50% 50% / auto
    100% no-repeat;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  .title {
    font-size: 34px;
@@ -231,5 +262,40 @@
      }
    }
  }
  .i {
    margin-left: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(
      circle farthest-side at 50% 50%,
      rgba(1, 31, 57, 0.5) 50%,
      rgba(74, 253, 136, 0.5) 100%
    );
    text-align: center;
    position: relative;
    &::after {
      content: "";
      display: inline-block;
      position: absolute;
      border-radius: 50%;
      top: 4px;
      right: 4px;
      bottom: 4px;
      left: 4px;
      background: #4afd88;
    }
    &.danger {
      background: radial-gradient(
        circle farthest-side at 50% 50%,
        rgba(1, 31, 57, 0.5) 50%,
        rgba(255, 56, 1, 0.5) 100%
      );
      &::after {
        background: #ff3801;
      }
    }
  }
}
</style>