FE-V2-PC/src/layout/components/AppMain.vue

<template>
  <section class="app-main">
    <div class="app-main-top-text-box" v-if="textType">
      <p>{{text}}</p>
      <p @click="buttonClick">查看</p>
    </div>
    <div class="app-main-top-text-box-two" :class="workType == 1?'work-color-a':(workType == 2?'work-color-b':'')" v-if="!textType&&(workType == 1 || workType == 2)">
      <p>{{textWork}}</p>
      <p @click="goWorkPage">立即完成</p>
      <p class="el-icon-circle-close" @click="workClickOff"></p>
    </div>
    <transition name="fade-transform" mode="out-in">
      <!--<keep-alive :include="cachedViews">-->
        <router-view :key="key" />
      <!--</keep-alive>-->
    </transition>
  </section>
</template>

<script>
  import { selectTriggerInfo} from '@/api/evacuationBigData/index.js'
  import store from '@/store'
  import mqtt from 'mqtt'
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  },
  data() {
    return {
      //MQTT请求参数-传感器
      mtopic:"lab/riskPlan/trigger/notice",
      mtopicTwo:"manage/work"+localStorage.getItem('userId'),
      textType:false,
      closePlan:false,
      text:"",
      textWork:"",
      workType:"",
      userType:"",
      buttonId:"",
      buildingId:"",
      address:"",
      buildId:null,
      floorId:null,
      subId:null,
      groupId:null,
    }
  },
  created() {
  },
  mounted(){
    // this.userType = localStorage.getItem('userType')
    // if(this.userType != 22){
    //   this.selectTriggerInfo();
    //   this.subscriptionMQTT();
    // }
  },
  methods:{
    workClickOff(){
      this.workType = "";
    },
    goWorkPage(){
      let self = this;
      const h = this.$createElement;
      this.$msgbox({
        title: '',
        message: h('p', null, [
          h('p', { style:'font-size:16px;margin:20px 0;' }, self.textWork),
        ]),
        showCancelButton: true,
        confirmButtonText: '完成',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            //执行
            this.$router.push({
              path: "/laboratory/gradeManageWork"
            })
            done();
          } else {
            //取消
            done();
          }
        }
      }).then(action => {
        //成功回掉
      });
    },
    //MQTT订阅
    subscriptionMQTT(){
      let self = this;
      this.client = mqtt.connect(localStorage.getItem('mqttUrl'), {
        username: localStorage.getItem('mqttUser'),
        password: localStorage.getItem('mqttPassword')
      });
      this.client.on("connect", e =>{
        console.log("连接成功");
        this.client.subscribe(this.mtopic, (err) => {
          if (!err) {
            console.log("警报通道订阅成功:" + this.mtopic);
          }
        });
        this.client.subscribe(this.mtopicTwo, (err) => {
          if (!err) {
            console.log("工作通道订阅成功:" + this.mtopicTwo);
          }
        });
      });
      this.client.on("message", (topic, message) => {
        if (message){
          console.log("topic",topic);
          let data = JSON.parse(message)
          console.log("data",data);
          if(topic == this.mtopic){
            //报警
            store.dispatch('settings/setPlanData', data)
            self.selectTriggerInfo();
          }
          if(topic == this.mtopicTwo){
            //工作通知
            console.log("工作通知",data);
            this.textWork = data.msg;
            this.workType = data.type;
          }
        }
      });
    },
    //执行按钮
    buttonClick(){
      let self = this;
      if(this.$route.path == '/emergencyManagement/newPerformEvacuation'){
        return
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '',
        message: h('p', null, [
          h('i', { style: 'color: #ea9518;font-size:100px;' ,class:"el-icon-warning-outline"}),
          h('p', { style:'font-size:16px;margin:20px 0;' }, self.text+'，是否立即查看？ '),
        ]),
        showCancelButton: true,
        confirmButtonText: '查看',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            //执行
            this.$router.push({
              path: "/emergencyManagement/newPerformEvacuation",
              query: {
                buildId: self.buildId,
                floorId:self.floorId,
                subId:self.subId,
              }
            })
            done();
          } else {
            //取消
            done();
          }
        }
      }).then(action => {
        //成功回掉
      });
    },
    //查询当前用户下的预案触发数据
    selectTriggerInfo(){
      let self = this;
      selectTriggerInfo().then(response => {
        //预案发生时候,存储值用于实验室配置传感器状态
        let arr=[];
        if(response.data){
          arr=JSON.stringify(response.data)
        }
        localStorage.setItem('selectTriggerList',arr)
        if(response.data[0]){
          this.$set(this,'text',response.data.length>1?'有多个实验室发生预案':'有实验室发生预案');
          this.$set(this,'buildId',response.data[0].buildId);
          this.$set(this,'floorId',response.data[0].floorId);
          this.$set(this,'subId',response.data[0].subId);
          this.$set(this,'groupId',response.data[0].groupId);
          if(response.data[0].riskAttribute == 1){
            this.$set(this,'closePlan',true);
          }
          this.$set(this,'textType',true);
          //没有火焰预案并且没有查看过
          for(let i=0;i<response.data.length;i++){
            if(response.data[i].riskAttribute != '1'&&response.data[i].ifCheck != '1'){
              console.log('跳转2',self.$route.path);
              //如果就在应急预案页面责终止跳转
              if(self.$route.path == '/emergencyManagement/newPerformEvacuation' || self.$route.path == '/newEvacuationBigData'){
                return
              }
              this.$router.push({
                path: "/emergencyManagement/newPerformEvacuation",
                query: {
                  buildId: response.data[i].buildId,
                  floorId:response.data[i].floorId,
                  subId:response.data[i].subId,
                  groupId:response.data[i].groupId,
                }
              })
              return
            }
          }
        }else{
          this.$set(this,'textType',false);
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  /*min-height: calc(100vh - 50px);*/
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.work-color-a{
  background: rgba(30,144,255,0.2);
  p{
    color:#0045AF;
  }
}
.work-color-b{
  background: rgba(255,0,0,0.2);
  p{
    color:#FF0000;
  }
}
.app-main-top-text-box-two{
  margin:10px 20px 0 10px;
  border-radius:10px;
  padding:0 0 0 20px;
  display: flex;
  p{
    line-height:60px;
    font-size:16px;
    margin:0;
  }
  p:nth-child(1){
    flex:1;
  }
  p:nth-child(2){
    width:100px;
    cursor: pointer;
  }
  p:nth-child(3){
    font-size:22px;
    margin-right:20px;
    cursor: pointer;
  }
}
.app-main-top-text-box{
  background: rgba(255,0,0,0.2);
  margin:10px 20px 0 10px;
  border-radius:10px;
  padding:0 0 0 20px;
  display: flex;
  p{
    line-height:60px;
    font-size:16px;
    margin:0;
  }
  p:nth-child(1){
    flex:1;
    color:#FF0000;
  }
  p:nth-child(2){
    width:100px;
    color:#0045AF;
    cursor: pointer;
    text-align: center;
  }
  p:nth-child(3){
    color:#0045AF;
    text-align: center;
    width:30px;
    font-weight:500;
  }
  p:nth-child(4){
    width:100px;
    color:#0045AF;
    cursor: pointer;
    text-align: center;
  }
}
.app-main-position-max-box{
  position: fixed;
  height:100%;
  width:100%;
  background: rgba(0,0,0,0.2);
  z-index: 100;
  .app-main-position-big-box{
    .app-main-position-box{
      position: absolute;
      top: 50%;
      left: 50%;
      background: #fff;
      width:500px;
      height:300px;
      margin-left:-250px;
      margin-top:-150px;
      border-radius:10px;
      box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
      .app-main-position-box-bottom-button-box{
        display: flex;
      }
    }
  }
}

.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    /*min-height: calc(100vh - 84px);*/
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>