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>
      <p v-if="closePlan">丨</p>
      <p v-if="closePlan" @click="offButton">结束预案</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 { getListStatus,closeRiskPlan } from '@/api/bigData/index.js'
  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/bigview",
      mtopicTwo:"manage/work"+localStorage.getItem('userId'),
      textType:false,
      closePlan:false,
      text:"",
      textWork:"",
      workType:"",
      userType:"",
      buttonId:"",
      buildingId:"",
      address:"",
    }
  },
  created() {
    this.getListStatus();
  },
  mounted(){
    this.userType = localStorage.getItem('userType')
    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(process.env.VUE_APP_BASE_MQTT_API, {
        username: process.env.VUE_APP_BASE_MQTT_USERNAME,
        password: process.env.VUE_APP_BASE_MQTT_PASSWORD
      });
      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){
            //报警
            this.getListStatus();
          }
          if(topic == this.mtopicTwo){
            //工作通知
            console.log("工作通知",data);
            this.textWork = data.msg;
            this.workType = data.type;
          }
        }
      });
    },
    //结束预案
    closeRiskPlan(){
      closeRiskPlan({id:this.closeId}).then(response => {
        this.msgSuccess("操作成功");
        this.getListStatus();
      });
    },
    //查询报警信息
    async getListStatus(){
      let self = this;
      const { data } = await getListStatus();
      console.log("getListStatusgetListStatusgetListStatusgetListStatus",data);
      if(data.code==200){
        if(data.data[0].floorId != 7){
          self.text = data.data[0].buildName + data.data[0].floorName + data.data[0].roomName + data.data[0].subjectName + '发生应急预案';
          self.textName = data.data[0].subjectName;
          self.subjectId = data.data[0].subjectId;
          self.textType = self.userType != '22';
          self.closePlan =data.data[0].closePlan;
          self.closeId = data.data[0].id;
          self.buttonId = data.data[0].floorId;
          self.buildingId = data.data[0].buildId;
          self.address = data.data[0].deptName +'-'+data.data[0].buildName+''+data.data[0].floorName;
        }
      }
    },
    //结束预案
    offButton(){
      let self = this;
      this.$confirm('确定要结束预案吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        self.closeRiskPlan();
      }).then(() => {
      }).catch(() => {});
    },
    //执行按钮
    buttonClick(){
      let self = this;
      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: "/emergencyEvacuationBig",
              query: {
                subId: self.subjectId,
                text:self.textName,
                buttonId:self.buttonId,
                buildingId:self.buildingId,
                address:self.address,
                type:"1",
              }
            })
            done();
          } else {
            this.$router.push({
              path: "/emergencyEvacuationBig",
              query: {
                subId: self.subjectId,
                text:self.textName,
                buttonId:self.buttonId,
                buildingId:self.buildingId,
                address:self.address,
                type:"2",
              }
            })
            //取消
            done();
          }
        }
      }).then(action => {
        //成功回掉
      });
    },
    //跳转分级管控工作
  }
}
</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>