station-test-ui/src/App.vue

<template>
  <div id="app">
    <!-- <router-view /> -->
    <router-view v-if="isRouterAlive"></router-view>
    <div v-if="showAlarmBox" class="alarm_box">
      <i class="el-icon-close" @click="closeAlarmBox"></i>
      <el-carousel :interval="3000" :autoplay="true" indicator-position="outside">
        <el-carousel-item v-for="(item,keys) in alarmData" :key="keys">
          <!-- {{keys}} -->
          <div :class=" 'student_'+keys" >
				      <div class="student_box">
                <div class="student_info">
                    <span class="student_info_title"><b>设备信息:</b></span>
                    <span class="student_name">
                        <font class="student_name_label">设 备 名 称 :</font> 
                        <font class="student_name_value">{{item.realname}}</font>
                    </span>
                    <span class="student_urgent">
                        <font class="student_name_label">设 备 编 号  :</font> 
                        <font class="student_name_value">{{item.device_number}}</font>
                    </span>
                    <span class="student_urgent">
                        <font class="student_name_label">告 警 类 型 :</font> 
                        <font class="student_name_value">异常离线</font>
                    </span>
                    <!-- <span  class="student_urgent">
                      <font class="student_name_label">家 长 电 话 :</font> 
                      <font  class="student_urgent_value" >
                          <el-tooltip class="item" effect="dark" :content="item.parent_phone" placement="top">
                            <span class="scroll_title" v-text="item.parent_phone"></span>
                          </el-tooltip>
                      </font>
                    </span> -->
                    <!-- <span class="student_urgent" >
                        <font class="student_name_label" > 紧急联系人:</font>
                        <font  class="student_urgent_value" >
                          <el-tooltip class="item" effect="dark" :content="item.urgent_text" placement="top">
                            <span class="scroll_title" v-text="item.urgent_text"></span>
                          </el-tooltip>
                          </font>
                    </span> -->
                </div>
                <div class="student_image">
                      <img v-if="item.avatar" :src="item.avatar" class="avatar_image">
                      <img v-else src="/images/device1.jpg" class="avatar_image">
                </div>
              </div>
              <div class="location_info">
                  <span class="student_info_title"><b>位置信息:</b></span>
                    定位地址：<span class="location_address">{{item.address}}</span><br>
                    告警时间：<span class="location_time">{{item.alarm_time}}</span><br>
              </div>
          </div>
          <div class="handle_box">
            <el-button type="danger"  size="medium" @click="handleAlarm(item.device_number)">前往处理</el-button>
            <!-- <el-button type="danger"  size="medium" @click="showRfidRoute(item.device_number)">RFID轨迹</el-button> -->
            <!-- <el-button type="danger" size="medium" @click="showGpsRoute(item.device_number)">查看轨迹</el-button> -->
            <el-button type="danger" size="medium" @click="showGpsLocation(item.device_number)">查看位置</el-button>
            <!-- <el-button type="danger" v-if="item.station_type == 3"  size="medium" @click="showRoomAddress(item.station_mac,item.device_number)">室内定位</el-button> -->
          </div>
        </el-carousel-item>
      </el-carousel>
      <rfid-dialog
        v-if="formVisible"

        :displayVisible="formVisible"
        @formCancel="closeDialog"
        :activeRfid="currentActiveRfid"
      />
      <gps-dialog
        v-if="gpsFormVisible"
        :displayVisible="gpsFormVisible"
        @formCancel="closeGpsDialog"
        :activeRfid="currentActiveRfid"
      />

      <!-- 楼层平面图 -->
        <!-- <el-dialog :title="currentBuildingInfo.name" fullscreen :visible.sync="visibleFloorMap">
            <floor-map ref="floor_map" :buildingId="currentBuildingInfo.id" :studentId="currentStudentInfo.id" />
        </el-dialog> -->
    </div>
  </div>
</template>

<script>
import rfidDialog from "./views/map/rfidRouteDialog";
import gpsDialog from "./views/map/gpsRouteDialog";
// import FloorMap from './views/building/floor/map';
const ReconnectingWebSocket = require('@/components/webSocket/reconnecting-websocket.js')
export default {
  name: "App",
  components:{rfidDialog,gpsDialog},
  provide (){
     return {
       reload:this.reload,
       closeAlarmNotice:this.closeAlarmNotice,
       startWebSocket:this.startWebSocket
     }
  },
  data(){
    return{
      isRouterAlive:true,
      showAlarmBox:false,
      alarmData:{
        '1':{
          'realname':'测试',
          'device_number':'0000001',
          'urgent_text':'15706857065',
          'address':'滨江区华城何瑞科技广场S2',
          'alarm_time':'2022-03-04 11:30:35',
        }
      },
      currentActiveRfid:'',
      formVisible:false,
      gpsFormVisible:false,
      currentBuildingInfo: {}, // 当前建筑信息
      currentStudentInfo:{},
      visibleFloorMap: false, // 显示楼层平面图
    }
  },
  created() {
    // console.log(">>>>> app.vue created");
    // if (!this.$socket.connected && this.$store.getters.token) {
    //   //console.log('token:',this.$store.getters.token)
    //   console.log(">>>>> app.vue socket open");
    //   this.$socket.io.opts.query = {
    //     loginToken: this.$store.getters.token,
    //     userId: this.$store.getters.user_id
    //   };
    //   this.$socket.open(); // 开始连接socket
    // }
    let number=0
    var that = this;
    let s=Math.round(Math.random()*300)
    // this.timer = setInterval(() => {
    //    number++
    //    if(number==s){
    //      number=0
    //       s=Math.round(Math.random()*300)
    //       that.showAlarmBox=true
    //    }
    // }, 1000)

 
     
  },
  methods:{
     fn() {
        
        let s=Math.round(Math.random()*10) *1000
        if(this.set1){
          clearInterval(set1);
        }
        
        // if (t > 0) {
            set1 = setInterval(fn, s);
        // }
    },

    reload(){
        this.isRouterAlive=false;
        this.$nextTick(() => {
          this.isRouterAlive=true;
        })
    },
    startWebSocket(){
      //  console.log(this.$store.getters)

        // let ws = new WebSocket('ws://116.62.220.88:60002')
        let ws = new ReconnectingWebSocket(this.$appConfig.websocketUrl)
        ws.onopen = () => {
        // Web Socket 已连接上，使用 send() 方法发送数据
          var _this=this
          this.timer=setInterval(function(){
            var timestamp = new Date().getTime();
            var msg = {
              'type': 1,
              'message':{'userid':_this.$store.getters.user_id},
              'time': timestamp
            };
            console.log(JSON.stringify(msg));
             ws.send(JSON.stringify(msg))
          }, 20000);
        }
        ws.onmessage = evt => {
		        var resp = JSON.parse(evt.data);
            console.log(resp.message);
            this.showAlarmBox=true
            let key=resp.message.device_number
            this.alarmData[key]=resp.message
           // console.log( "Received Message: " + evt.data);
            
        }
        ws.onclose = function () {
          // 关闭 websocket
          console.log('连接已关闭...')
        }
    },
    closeAlarmNotice(){
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }
      this.alarmData={}
       this.showAlarmBox=false
    },
    closeAlarmBox(){
       this.showAlarmBox=false
    },
    handleAlarm(device_number){
      // const query = {device_number:device_number}
      // this.$http.post('AlarmRecords', query).then(response => {
          // if(response.message=='success'){
            // this.alarmData={}
            let newAlarmData={}
            Object.keys(this.alarmData).forEach((k) => {
              if(k!=device_number){
                  newAlarmData[k]=this.alarmData[k]
              }
            })
            this.alarmData=newAlarmData
            // delete this.alarmData[device_number]
            let alarmKeys = Object.keys(this.alarmData);
            if(alarmKeys.length<1){
              this.showAlarmBox=false
            }
          // }
          // this.$router.push({ path:'/alarm/AlarmRecords' })
          this.$router.push({ path:'/alarm/alarmDevice' })
      // })
    },
    showRfidRoute(val){
      this.currentActiveRfid=val
      this.formVisible=true
    },
    showGpsRoute(val){
      this.currentActiveRfid=val
      this.gpsFormVisible=true
    },
    closeDialog() {
	    this.formVisible = false  // 控制dialog弹框的不显示
    },
    closeGpsDialog(){
      this.gpsFormVisible=false

    },
    showRoomAddress(station_mac,device_number){
      const query={station_mac:station_mac,device_number:device_number}
       this.$http.get('map/queryBuildingInfo', {params: query}).then(resp => {
         
            this.currentBuildingInfo = resp.data.build_info
            this.currentStudentInfo= resp.data.student_info
            this.visibleFloorMap = true;    
      })
    },
    showGpsLocation(device_number){
      // const query = {device_number:device_number}
      // this.$http.post('AlarmRecords', query).then(response => {
          this.$router.push({ path:'/map/routemap',query:{device_number}})
      // })
    },
    
  },
};
</script>
<style lang="scss">
 // 谷歌浏览器
  /* 这是针对缺省样式 (必须的) */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  /* 滑块颜色 */
  ::-webkit-scrollbar-thumb {
    background-color: #354059;
  }
  // firefox浏览器
  #app {
    scrollbar-color:rgba(0, 0, 0, 0.2);
    scrollbar-width:thin;
  }
  
.el-tooltip__popper {
  z-index:3000 !important;
   max-width:600px !important;
 }
 .el-date-range-picker{
    z-index: 3999 !important;
  }
  
  .el-notification__content  {
      max-height: 50vh;
      overflow: auto;
  }
</style>
<style lang="scss" scoped>
  .alarm_box{
    padding: 16px;
    z-index:3000;
    position:fixed;
    right:0;
    bottom:0;
    width:450px;
    height:300px;
    background-color:#00bcd4;
    border-radius: 5px;
    color:#FFF;
  }
  .student_box{
    text-align:left;
    font-size:18px;
    height: 110px;
  }
  .student_info{
    width: 70%;
    float: left;
  }
  .student_info_title{
    font-size:18px;
    margin-bottom: 10px;
    display:block;
  }
  .student_name{
    width:100%;
    display:block;
  }
  .student_name_label{
    display:inline-block;
    width:35%;
  }
  .student_name_value{
    display:inline-block;
    width:65%;
  }
  .student_urgent{
    display:block;
    width:100%;
  }
  .student_urgent_value{
    display:inline-block;
    width:65%;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
  }
  .scroll_title{
    // display:inline-block;
    width:100%;
    height:100%;
    display:flex;align-items:flex-end;
  }

  .student_image{
    width: 120px;
    float: right;
    height: 120px;
    overflow: hidden;
  }
  .avatar_image{
    width: 100%;
    right: 100px;
  }
  .location_info{
    text-align:left;
    font-size:18px;
    height: 105px;
    margin-top: 10px;
    padding-top:10px;
    padding-right:20px;
  }
  .handle_box{
    text-align:center;
    font-size:20px;

  }
  ::v-deep .el-carousel__item{
    background-color: #00bcd4 !important;
  }
  .el-icon-close{

    float: right;
    color: #FFF;
    margin-top:-16px;
    margin-right:-10px;
    right:0px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #d3dce6;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .app-container {
    height: calc(100vh - 102px);
    
    // ::v-deep .el-dialog__body {
    .el-dialog__body {
        padding: 0;
    }

  }
  
</style>