Lin_Ye_Fang_Huo/src/views/home/widget/socketdiabox.vue

<template>
    <div class="box">
      <div class="box-name">现场人员</div>
      <div class="close-button" @click="close">
          <i class='el-icon el-icon-close'></i>
      </div>
      <div class="box-container">
          <div class="flex fc-w fz-16 column" style="margin:10px">
            <div>当前在线总人数：{{ listDataInfo.onlineCount }}人</div>
          </div>
          <div class="table-body">
              <div class="item flex jc-sb" v-for="(item,index) in listDataInfo.onOffLineInfo" :key="index">
                  <div>{{item.time}}</div>
                  <div>{{ item.name }}{{ item.typeName }}了</div>
              </div>
          </div>
      </div>
    </div>
  </template>
  
<script>
import { mapState,mapGetters } from "vuex";   
import axios from "axios";
import { postMethodCommon,getMethodCommon } from '@/api/common.js';
export default {
    name: 'monitorbox',
    computed: {
    ...mapGetters([
      
    ]),
    //trtc
    ...mapState({
      websocket:state=>state.Emergency.listenWebSocket,
    }),
  },
    props:['globalmap'],
    data(){
        return{
            listDataInfo:[],
            pointData:[],
            markGraphicLayer: null,
            markGraphicLayerArr:[]
        }
    },
    watch:{
    
    },
    created(){
        this.getOnLineInfo()
        this.initWebSocket()
        setInterval(()=>{
            this.pointData = []
            let arr = ['人员信息','对讲机信息']
            arr.forEach(item =>{
                this.getPointer(item)
            })
        },120000)
    },
    mounted(){
        window.videoCall = this.videoCall
    },
    methods:{
        close(){
            this.markGraphicLayerArr.forEach(item =>{
                this.markGraphicLayer.removeGraphic(item)
            })
            this.$emit('close')
        },
        videoCall(phone){
            this.$emit("videoCall",phone);
        },
        getOnLineInfo(){
            getMethodCommon("/FireManagement/GetOnOffLineInfo").then(res =>{
                this.listDataInfo = res.data
            })
        },
        getPointer(type){
            getMethodCommon("/FireManagement/GetPointByType",{type:type}).then(res =>{
                res.data.forEach(item =>{
                    this.pointData.push(item)
                })
                this.addLayerPoint()
                console.log('this.markGraphicLayerArr',this.markGraphicLayerArr)
            })
        },  
        addLayerPoint(){
            if(this.markGraphicLayer == null){
                this.markGraphicLayer = new mars3d.layer.GraphicLayer();
                this.globalmap.addLayer(this.markGraphicLayer);
            }
            this.markGraphicLayerArr.forEach(item =>{
                this.markGraphicLayer.removeGraphic(item)
            })
            this.markGraphicLayerArr = [] 
            this.pointData.forEach((item,index)=>{
                let graphic = new mars3d.graphic.BillboardEntity({
                    position: [item.lng,item.lat],
                    style: {
                        image: "/img/jiuyuanrenyuan.png",
                        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        clampToGround:true,
                        scale:0.7,
                        label: {
                            text: "",
                            font_size: 14,
                            color: "#ffffff",
                            pixelOffsetY: 10,
                            distanceDisplayCondition: true,
                            distanceDisplayCondition_far: 500000,
                            distanceDisplayCondition_near: 0
                        }
                    },
                    "popup": `<div class="marsTiltPanel marsTiltPanel-theme-green">
                  <div class="marsTiltPanel-wrap">
                      <div class="area">
                          <div class="arrow-lt"></div>
                          <div class="b-t"></div>
                          <div class="b-r"></div>
                          <div class="b-b"></div>
                          <div class="b-l"></div>
                          <div class="arrow-rb"></div>
                          <div class="label-wrap">
                              <div class="title">${item.name}</div>
                              <div class="label-content">
                                  <div class="data-li">
                                      <div class="data-label">电话：</div>
                                      <div class="data-value">${item.phone}</div>
                                  </div>
                                  <div class="data-li">
                                      <div class="data-label"></div>
                                      <div class="data-value">
                                          <span class="label-tag data-value-status-2" title="视频通话" onclick="videoCall('${item.phone}')">视频通话</span></div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="b-t-l"></div>
                      <div class="b-b-r"></div>
                  </div>
                  <div class="arrow" ></div>
              </div>`,
                  "popupOptions":{
                    "offsetY":-30,
                    "template":"{content}",
                    "horizontalOrigin":"Cesium.HorizontalOrigin.LEFT",
                    "verticalOrigin":"Cesium.VerticalOrigin.CENTER"
                  },
                    pointerEvents: true
                })
                this.markGraphicLayerArr.push(graphic)

                this.markGraphicLayer.addGraphic(graphic);

            })
        },
        initWebSocket() {
            let _this = this;
            if ("WebSocket" in window) {
                // 打开一个 web socket
                var ws = new WebSocket("ws://123.132.248.154:9225/ws");
                ws.onopen = function () {
                    //Web Socket 已连接上，使用 send() 方法发送数据
                    console.log('WEBSOCKET-ONLINE')
                };
                ws.onmessage = function (evt) {
                    console.log('evt',evt)
                    let obj = JSON.parse(evt.data)
                    console.log('obj',obj)
                    if(obj.Module){
                        _this.pointData = []
                        if(obj.Module == '人员信息' || obj.Module == '对讲机信息'){
                            _this.getPointer(obj.Module)
                        }
                        if(obj.Module == '上线' || obj.Module == '下线'){
                            _this.getOnLineInfo()
                        }
                        
                    }
                };
                ws.onclose = function () {
                    console.log('WEBSOCKET-CLOSED')
                };
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        },
    }
}
</script>
  
<style scoped>
.box{
    width: 100%;
    height: calc( 100% - 5px);;
    overflow: hidden;
    text-align:left;
    z-index: 99;
}
.box-name{
    height: 47px;
    line-height: 47px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 0 40px;
    }
.box-title{
    width:100%;
    height:40px;
    line-height:50px;
    text-indent:20px;
    color: #00FFF0;
}
.box-container{
    width: calc( 100% - 0px);
    padding:10px 12px;
    height: calc( 100% - 50px);
}
.table-header{
    width: calc( 100% - 10px);
    height:25px;
    color:#fff;
    text-align: center;
}
.table-header div{
    float:left;
    width:25%;
    border-bottom:1px dashed #00FFF0;
    padding-bottom:8px;
}
.table-body{
    width:100%;
    height: calc( 100% - 40px);
    overflow-y: auto;
}

.table-body .item{
    width:100%;
    height:40px;
    background: #00ffee2f;
    font-size:14px;
    text-align: center;
    line-height:40px;
}

.table-body .item:nth-child(2n){
    background:#00ffee50;
}
.close-button{
  position:absolute;
  right:20px;
  top:14px;
  cursor:pointer;
  color:#fff;
  font-weight: bold;
  width:20px;
  height:20px;
  background:#0ABFB5cc;
  line-height:20px;
  text-align:center;
}

.table-body .item div{
    float:left;
    width:33%;
    color:#eee;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}


::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: transparent;
    border-radius: 5px
}

::-webkit-scrollbar-thumb {
    padding-top: 100px;
    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
    background-color: #797979;
    min-height: 28px;
    border-radius: 4px;
    background-clip: padding-box
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
    border: 0
}

::-webkit-scrollbar-thumb:hover {
    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25);
    background-color: rgba(0, 0, 0, .4)
}

::-webkit-scrollbar-thumb:active {
    -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35);
    background-color: rgba(0, 0, 0, .5)
}

</style>