内容提交

longyvfengyun

2023-08-21 66bae94879a1ef44abe28833627564086d74ee13

内容提交

 .env.development

New file
@@ -0,0 +1 @@
VITE_APP_ENV="dev"

 .env.production

New file
@@ -0,0 +1 @@
VITE_APP_ENV="prod"

 src/assets/js/tools/websocket/createWs.js

New file
@@ -0,0 +1,121 @@
import getWsUrl from "./getWsUrl";
import {computed, onMounted, onUnmounted, ref} from "vue";

const createWs = (url)=>{
  const wsUri = getWsUrl(url);
  // 重连时间间隔 默认10秒
  const reConnectDelay = 10 * 1000;
  let timer = null;
  let SOCKET = ref(null);

  // 打开链接
  const openSocket = ()=>{
    // 初始化WebSocket 如果已经初始化 则什么都不做
    if (SOCKET.value) {
      return false;
    }
    WSClose();
    WSInit();
  }

  const WSInit = ()=>{
    console.log(isWSOpen);
    // 未被初始化初始化
    if (!isWSOpen.value) {
      console.log('=====WSinit, url:', wsUri);
      SOCKET.value = new WebSocket(wsUri);
      SOCKET.value.onmessage = onWSMessage;
      SOCKET.value.onopen = onWSOpen;
      SOCKET.value.onerror = onWSError;
      SOCKET.value.onclose = WSClose;
    }
  }

  const onWSOpen = ()=>{
  }

  const onWSMessage = ()=>{
  }

  const onWSError = (Event)=>{
    console.log('链接失败', wsUri);
    WSClose(Event);
  }

  const WSClose = (Event)=>{
    if (SOCKET.value) {
      switch (SOCKET.value.readyState) {
        case 0:
          SOCKET.value.onopen = () => {
            SOCKET.value.close();
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            SOCKET.value = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              reConnect();
            }
          }
          break;
        case 1:
          SOCKET.value.close();
          console.log('链接关闭', wsUri, 'close事件对象:', Event);
          SOCKET.value = null;
          // 没有event对象 则为手动关闭
          if (Event) {
            reConnect();
          }
          break;
        case 2:
          SOCKET.value.onclose = () => {
            console.log('链接关闭', wsUri, 'close事件对象:', Event);
            SOCKET.value = null;
            // 没有event对象 则为手动关闭
            if (Event) {
              reConnect();
            }
          }
          break;
        case 3:
          console.log('链接关闭', wsUri, 'close事件对象:', Event);
          SOCKET.value = null;
          // 没有event对象 则为手动关闭
          if (Event) {
            reConnect();
          }
          break;
      }
    }
  }

  // 重连
  const reConnect = ()=>{
    // 重连计时开始 就不另重连
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      timer = null;
      WSInit();
    }, reConnectDelay);
  }

  const isWSOpen= computed(()=>{
    return SOCKET.value && 1 === SOCKET.value.readyState;
  });

  onMounted(()=>{
    openSocket();
  })

  onUnmounted(()=>{
    WSClose();
  })

  return {
    SOCKET,
    onWSOpen,
    onWSMessage
  };
}

export default createWs;

 src/assets/js/tools/websocket/getWsUrl.js

New file
@@ -0,0 +1,25 @@

/**
 * 获取Websocket的连接
 * @param action
 * @returns {string}
 */
function getWsUrl(action, port) {
  let env = import.meta.env.VITE_APP_ENV;
  let _port = port ? port : 8101;
  let hostname = window.location.hostname;
  let wsProtocol = "ws://";
  if(window.location.protocol == "https:") {
    wsProtocol = "wss://";
  }
  if (env == 'dev') {
    hostname = "localhost";
  }else {
    _port = window.location.port;
  }
  // 处理端口为80
  _port = _port == 80?"":":"+_port;
  return wsProtocol + hostname + _port + '/envir/' + action;
}

export default getWsUrl;

 src/main.js

@@ -17,6 +17,13 @@

const pinia = createPinia()

// 对toFixed数字保留位数二次封装（ps：toFixed返回的是字符串）
Number.prototype.toHold = function (value) {
  let hold = this.toFixed(value);
  hold = Number(hold);
  return hold;
};

app.use(ElementPlus);
app.use(router);
app.use(pinia);

 src/views/home/components/homeDetail.vue

@@ -1,5 +1,5 @@
<script setup>
import image5 from "@/views/home/images/质控室.jpg";
import MapPin from "@/components/MapPin.vue";

const props = defineProps({
    info: {
@@ -12,7 +12,19 @@
                    src: "",
                    width: 100,
                    height: 100
                }
                },
                info: {}
            }
        }
    },
    vals: {
        type: Object,
        default() {
            return {
                diff: 0,
                hum: 48.71,
                num: 3,
                tmp: 26.56
            }
        }
    }
@@ -21,6 +33,12 @@

<template>
    <div class="home-detail">
        <div class="vals-wrapper">
            <div class="vals-name">{{info.name}}</div>
            <div class="vals-item">温度: {{vals.tmp}}℃</div>
            <div class="vals-item">湿度: {{vals.hum}}%RH</div>
            <div class="vals-item">压差: {{vals.diff}}Pa</div>
        </div>
        <div class="home-detail-img">
            <img :src="info.img.src" alt=""/>
        </div>
@@ -29,9 +47,22 @@

<style lang="less" scoped>
.home-detail {
    position: relative;
    width: 600px;
    text-align: center;
    background-color: #ffffff;
    .vals-wrapper {
        position: absolute;
        top: 8px;
        left: 8px;
        text-align: left;
        padding: 8px;
        background-color: #303133;
        color: #FFFFFF;
        .vals-name {
            text-align: center;
        }
    }
}
.home-detail-img {
    display: inline-block;

 src/views/home/index.vue

@@ -1,5 +1,5 @@
<script setup>
import {onMounted, onUnmounted, ref, watch} from "vue";
import {onMounted, onUnmounted, ref, watch, nextTick} from "vue";
import MapPin from "@/components/MapPin.vue";
import slideMenu from "@/views/mainLayout/js/slideMenu";
import homeContentModule from "@/views/home/js/homeContentModule";
@@ -25,10 +25,12 @@
const {getHomeDetailInfo} = homeDetailModule();
const homeItemDialog = ref(false);
const homeDetailInfo = ref({});
const homeVals = ref({});
const handleClick = (info)=>{
    let rs = getHomeDetailInfo(info.num);
    if(rs.code === 1) {
        homeDetailInfo.value = rs.data;
        homeVals.value = info;
        homeItemDialog.value = true;
    }else {
        ElMessage(rs.msg);
@@ -75,7 +77,7 @@
            class="center-dialog"
            modal-class="high-level-dialog"
            align-center>
            <home-detail :info="homeDetailInfo"></home-detail>
            <home-detail :info="homeDetailInfo" :vals="homeVals"></home-detail>
        </el-dialog>
    </div>


 src/views/home/js/homeInfoModule.js

@@ -1,6 +1,31 @@
import {reactive} from "vue";
import {onMounted, reactive} from "vue";
import createWs from "@/assets/js/tools/websocket/createWs";

const homeInfoModule = ()=>{
  const {
    SOCKET
  } = createWs("homePageSocket");

  const handleOpen = ()=>{};

  const handleMessage = (res=>{
    const rs = JSON.parse(res.data);
    if(rs.code === 1 && rs.data) {
      const data = rs.data2;
      for(let i=0; i<data.length;i++) {
        let iData = data[i];
        for(let j=0; j<homeInfo.length; j++) {
          let jData = homeInfo[j];
          if(iData.roomName === jData.name && iData.devId === 220000001) {
            jData.info.tmp = iData.envirState.devTemp.toHold(2);
            jData.info.hum = iData.envirState.devHumid.toHold(2);
            jData.info.diff = iData.envirState.devPresss.toHold(2);
          }
        }
      }
    }
  });

  const homeInfo = reactive([
    {
      name: "数据机房",
@@ -14,7 +39,7 @@
      },
      info: {
        num: 99,
        tmp: 10,
        tmp: 0,
        hum: 0,
        diff: 0
      }
@@ -137,8 +162,82 @@
        hum: 0,
        diff: 0
      }
    },
    {
      name: "库房",
      temp: 0,
      hum: 0,
      diffPre: 0,
      pos: {
        visible: true,
        x: 550,
        y: 380
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
      }
    },
    {
      name: "灭菌室",
      temp: 0,
      hum: 0,
      diffPre: 0,
      pos: {
        visible: true,
        x: 750,
        y: 360
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
      }
    },
    {
      name: "理化间",
      temp: 0,
      hum: 0,
      diffPre: 0,
      pos: {
        visible: true,
        x: 420,
        y: 700
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
      }
    },
    {
      name: "空调机房",
      temp: 0,
      hum: 0,
      diffPre: 0,
      pos: {
        visible: true,
        x: 420,
        y: 1100
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
      }
    }
  ]);

  onMounted(()=>{
    SOCKET.value.addEventListener("open", handleOpen, false);
    SOCKET.value.addEventListener("message", handleMessage, false);
  });

  return {homeInfo};
};
export default homeInfoModule;

 src/views/video/components/hkVideo.vue

@@ -6,7 +6,7 @@
        type: Object,
        default() {
            return {
                ip: "192.168.10.5",
                ip: "192.168.10.10",
                port: 80,
                username: "admin",
                password: "a123456789"
@@ -21,10 +21,9 @@
    videoInitPlugin, clickLogin
} = hkModule();


onMounted(()=>{
    videoInitPlugin(()=>{
        //clickLogin(props.companyVideoData);
        clickLogin(props.companyVideoData);
    });
});