内容修改

longyvfengyun

2023-07-06 a3c6e3a5177b15021dad5788688294b1d863717a

内容修改

 src/assets/js/tools/socket.js

New file
@@ -0,0 +1,68 @@
import {ref} from "vue";

/**
 * websocket公用方法
 */
const socket = ()=>{
  let timer = null;
  let ws = null;
  let isConnect = ref(false);
  let count = 0;

  // WebSocket连接
  const connectWebsocket = (url) => {
    if (count > 5) {
      connectError()
      return
    }
    try { // æ­£åœ¨å»ºç«‹è¿žæŽ¥
      ws = new WebSocket(URL)
      initWebSocket() // åˆå§‹åŒ–WebSocket连接
    } catch { // å»ºç«‹è¿žæŽ¥å‡ºé”™ï¼Œé‡æ–°è¿žæŽ¥
      connect()
    }
  }

  // é‡æ–°è¿žæŽ¥WebSocket
  const connect = ()=>{
    if(isConnect.value) return
    console.info('尝试重新连接WebSocket');
    if(timer) clearTimeout(timer)
    timer = setTimeout(()=>{
      count++;
      connectWebsocket()
    }, 5000);
  }

  // åˆå§‹åŒ–WebSocket连接
  const initWebSocket = ()=>{
    ws.onopen = function () { // WebSocket连接成功
      isConnect.value = true;
      console.success('WebSocket连接成功')
    }
    ws.onerror = function () { // WebSocket连接发生错误
      isConnect = false;
      connect()
      console.error('WebSocket连接发生错误,正在尝试重新连接')
    }
    ws.onclose = function (e) { // å·²å…³é—­WebSocket连接
      isConnect.value = false
      console.warn('已关闭WebSocket连接')
    }
    ws.onmessage = function (data) { // æŽ¥æ”¶åˆ°æœåŠ¡ç«¯å‘送的数据
      receive(data)
    }
  }

  const connectError = () => {
    console.log('WebSocket连接失败')
    clearTimeout(timer)
  }


  return {
    ws,
    connectWebsocket,
  };
};
export default socket;

 src/assets/style/basic.css

@@ -50,3 +50,32 @@
  justify-content: center;
  align-items: center;
}

.el-overlay.high-level-dialog {
  z-index: 9990 !important;
}
.el-dialog.center-dialog {
  background-color: transparent;
}
.el-dialog.center-dialog .el-dialog__header {
  padding-top: 8px;
  padding-bottom: 8px;
  background-color: #0b388a;
  margin-right: 0;
}
.el-dialog.center-dialog .el-dialog__header .el-dialog__title {
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
}

.el-dialog.center-dialog .el-dialog__body {
  padding: 0;
}

.el-dialog.center-dialog .el-dialog__header .el-dialog__headerbtn {
  top: 12px;
  right: 8px;
  width: auto;
  height: auto;
}

 src/components/MapPin.vue

@@ -1,5 +1,5 @@
<script setup>
import {computed, onMounted} from "vue";
import {computed} from "vue";

    const props = defineProps({
        visible: {
@@ -38,6 +38,7 @@
            type: Object,
            default() {
                return {
                num: 99,
                    tmp: 0,
                    hum: 0,
                    diff: 0
@@ -46,16 +47,24 @@
        }
    });

const emits = defineEmits(["click"]);

const handleClick = ()=>{
    emits('click', props.info);
}

    const posStyle = computed(()=>{
        return {
            left: props.x*props.cWidth/props.dWidth+'px',
            top: props.y*props.cHeight/props.dHeight+'px'
        }
    });

</script>

<template>
    <div class="map-pin" :style="posStyle">
        <div class="map-pin-wrapper">
        <el-tooltip placement="top" :visible="visible">
            <template #content>
                <div class="home-info name">{{name}}</div>
@@ -63,20 +72,24 @@
                <div class="home-info">湿度：{{ info.hum }} %RH</div>
                <div class="home-info">压差：{{ info.diff }} Pa</div>
            </template>
            <div class="map-pin-content">
                <div class="map-pin-content" @click="handleClick">
                    <div class="pin"></div>
                    <div class="pulse"></div>
            </div>
        </el-tooltip>
    </div>
    </div>
</template>

<style lang="less" scoped>
@size: 24px;
.map-pin-wrapper {
    position: relative;
    z-index: 0;
}
.map-pin {
    position: absolute;
    cursor: pointer;
    z-index: 1;
    .map-pin-content {
        position: relative;
        top: -@size - @size*0.1;

 src/views/home/components/homeDetail.vue

New file
@@ -0,0 +1,44 @@
<script setup>
import image5 from "@/views/home/images/质控室.jpg";

const props = defineProps({
    info: {
        type: Object,
        default() {
            return {
                num: 99,
                name: "",
                img: {
                    src: "",
                    width: 100,
                    height: 100
                }
            }
        }
    }
});
</script>

<template>
    <div class="home-detail">
        <div class="home-detail-img">
            <img :src="info.img.src" alt=""/>
        </div>
    </div>
</template>

<style lang="less" scoped>
.home-detail {
    width: 600px;
    text-align: center;
    background-color: #ffffff;
}
.home-detail-img {
    display: inline-block;
    width: 500px;
    img {
        height: auto;
        width: 100%;
    }
}
</style>

 src/views/home/images/ÎÄ¿âÀ©ÔöÊÒ.jpg

 src/views/home/images/ÑùÆ·ÖƱ¸ÊÒ.jpg

 src/views/home/images/²âÐòÊÒ.jpg

 src/views/home/images/ÊÔ¼ÁÊÒ.jpg

 src/views/home/images/ÖÊ¿ØÊÒ.jpg

 src/views/home/index.vue

@@ -4,6 +4,9 @@
import slideMenu from "@/views/mainLayout/js/slideMenu";
import homeContentModule from "@/views/home/js/homeContentModule";
import homeInfoModule from "@/views/home/js/homeInfoModule";
import homeDetailModule from "@/views/home/js/homeDetailModule";
import HomeDetail from "@/views/home/components/homeDetail.vue";
import {ElMessage} from "element-plus";

const isShowMapPin = ref(true);

@@ -19,6 +22,19 @@
} = homeContentModule();

const {homeInfo} = homeInfoModule();
const {getHomeDetailInfo} = homeDetailModule();
const homeItemDialog = ref(false);
const homeDetailInfo = ref({});
const handleClick = (info)=>{
    let rs = getHomeDetailInfo(info.num);
    if(rs.code === 1) {
        homeDetailInfo.value = rs.data;
        homeItemDialog.value = true;
    }else {
        ElMessage(rs.msg);
    }

}

watch(isCollapse, ()=>{
    isShowMapPin.value = false;
@@ -51,11 +67,18 @@
            :c-width="cWidth" :c-height="cHeight"
            :d-width="dWidth" :d-height="dHeight"
            :x="item.pos.x" :y="item.pos.y"
            :info="item.info"></map-pin>
        <div class="card-box-list">
            :info="item.info" @click="handleClick"></map-pin>
        <el-dialog
            v-model="homeItemDialog"
            title="机房详情"
            width="auto"
            class="center-dialog"
            modal-class="high-level-dialog"
            align-center>
            <home-detail :info="homeDetailInfo"></home-detail>
        </el-dialog>
    </div>

        </div>
    </div>
</template>

<style scoped>

 src/views/home/js/homeDetailModule.js

New file
@@ -0,0 +1,80 @@
import image1 from "../images/文库扩增室.jpg";
import image2 from "../images/样品制备室.jpg";
import image3 from "../images/测序室.jpg";
import image4 from "../images/试剂室.jpg";
import image5 from "../images/质控室.jpg";
import {reactive} from "vue";
const homeDetailModule = ()=>{
  const homeInfos = [
    {
      num: 1,
      name: "文库扩增室",
      img: {
        src: image1,
        width: 799,
        height: 1356
      }
    },
    {
      num: 2,
      name: "样品制备室",
      img: {
        src: image2,
        width: 1656,
        height: 1280
      }
    },
    {
      num: 3,
      name: "测序室",
      img: {
        src: image3,
        width: 1446,
        height: 1280
      }
    },
    {
      num: 4,
      name: "试剂室",
      img: {
        src: image4,
        width: 1406,
        height: 1280
      }
    },
    {
      num: 5,
      name: "质控室",
      img: {
        src: image5,
        width: 799,
        height: 1356
      }
    },
  ];

  const getHomeDetailInfo = (num)=>{
    let rs = {
      code: 0,
      data: {},
      msg: "未找到对应机房信息"
    };

    for(let i=0; i<homeInfos.length; i++) {
      let item = homeInfos[i];
      if(item.num === num) {
        rs.code = 1;
        rs.data = item;
        rs.msg = "存在信息";
        break;
      }
    }
    return rs;
  }

  return {
    getHomeDetailInfo
  };
}

export default homeDetailModule;

 src/views/home/js/homeInfoModule.js

@@ -13,6 +13,7 @@
        y: 690
      },
      info: {
        num: 99,
        tmp: 10,
        hum: 0,
        diff: 0
@@ -29,6 +30,7 @@
        y: 690
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -45,6 +47,7 @@
        y: 690
      },
      info: {
        num: 3,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -61,6 +64,7 @@
        y: 690
      },
      info: {
        num: 5,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -77,6 +81,7 @@
        y: 650
      },
      info: {
        num: 1,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -93,6 +98,7 @@
        y: 337
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -109,6 +115,7 @@
        y: 355
      },
      info: {
        num: 4,
        tmp: 0,
        hum: 0,
        diff: 0
@@ -125,6 +132,7 @@
        y: 378
      },
      info: {
        num: 99,
        tmp: 0,
        hum: 0,
        diff: 0

 src/views/video/components/hkVideo.vue

@@ -6,7 +6,7 @@
        type: Object,
        default() {
            return {
                ip: "192.168.10.6",
                ip: "192.168.10.5",
                port: 80,
                username: "admin",
                password: "a123456789"
@@ -24,7 +24,7 @@

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