v3-school-widescreen-web/src/views/home.vue

<template>
  <!--<div class="home" :class="pageType == 2 ? 'homeAlarm':''">-->
  <div class="home">
    <div class="home-left-box">
      <div class="scale-box-big">
        <div class="scale-box">
          <p class="time-p">{{timeData}}</p>
          <resourceAndEquipmentStatistics></resourceAndEquipmentStatistics>
          <overviewOfInstrumentCondition></overviewOfInstrumentCondition>
          <reservationUsageRankings></reservationUsageRankings>
        </div>
      </div>
    </div>
    <!--<div class="max-null-p"></div>-->
    <div class="home-center-box">
      <div class="scale-comprehensiveData">
        <div class="scale-box">
          <!--中间屏幕统计组件-->
          <comprehensiveData v-if="pageType == 1 && !deptVideoType"></comprehensiveData>
        </div>
      </div>
      <!--常规展示层-->
      <div class="center-max-box" v-if="pageType == 1 && !deptVideoType">
        <div class="center-left-box">
          <div class="scale-center-box">
            <div class="scale-box">
              <laboratoryData></laboratoryData>
              <secondaryCollegeUnitLaboratoryStatistics></secondaryCollegeUnitLaboratoryStatistics>
              <overdueServiceEquipmentStatistics></overdueServiceEquipmentStatistics>
            </div>
          </div>
        </div>
        <div class="center-center-box">
          <div class="scale-center-box">
            <div class="scale-box">

            </div>
          </div>
        </div>
        <div class="center-right-box">
          <div class="scale-center-box">
            <div class="scale-box">
              <statisticalAnalysisOfHazardSources></statisticalAnalysisOfHazardSources>
              <statisticalAnalysisOfHazardousChemicals></statisticalAnalysisOfHazardousChemicals>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="max-null-p"></div>-->
    <div class="home-right-box">
      <div class="scale-box-big">
        <div class="scale-box">
          <div class="button-box">
            <p class="null-p"></p>
            <div>
              <p></p>
              <p></p>
            </div>
          </div>
          <laboratoryAnimalCenterReservationStatistics></laboratoryAnimalCenterReservationStatistics>
          <resourceReservationStatistics></resourceReservationStatistics>
          <sensorsAndIotDevices></sensorsAndIotDevices>
        </div>
      </div>
    </div>
    <!--报警层-->
    <alarmComponents class="alarm-max-box" :alarmPropsData="alarmPropsData" v-if="pageType == 2"></alarmComponents>
    <!--logo-->
    <img class="logo-img" @click="demo()" src="@/assets/ZDimages/logo@1x.png">
    <!--title-->
    <p class="title-top-center-box" @click="demo2()">实验室安全智慧化管控中心</p>
    <!--背景视频-->
    <video
      ref="videoPlayer"
      class="back_mp4"
      autoplay
      muted
      loop
      playsinline
    >
      <source src="@/assets/video/max_back_4.webm" type="video/webm">
      您的浏览器不支持视频标签.
    </video>
    <!--报警音频-->
    <audio class="waring_mp3" ref="audioPlayer" loop muted autoplay v-if="pageType == 2&&audioType">
      <source src="@/assets/video/waringVoice1.mp3" type="audio/mpeg">
    </audio>
    <!--左侧遮罩-->
    <div class="back-l-img"></div>
    <!--右侧遮罩-->
    <div class="back-r-img"></div>
    <!--地图层南校区-->
    <div class="map-max-big-box">
      <canvasMap ref="canvasMap" class="map-box"></canvasMap>
    </div>
    <!--左侧报警提示-->
    <div class="left-alarm-max-big-box" v-if="pageType == 2">
      <div>
        <p v-for="(item,index) in alarmTitle" :key="index">{{item}}</p>
      </div>
    </div>
    <!--右侧报警提示-->
    <div class="right-alarm-max-big-box" v-if="pageType == 2">
      <div>
        <p v-for="(item,index) in alarmTitle" :key="index">{{item}}</p>
      </div>
    </div>
    <!--视频监控退出-->
    <img class="position-button-0" v-if="deptVideoType" src="@/assets/ZDimages/icon_jksp_fh@1x.png" @click="goPage(1)">
    <!--静音按钮-->
    <img class="position-button-1" v-if="!audioType" src="@/assets/ZDimages/icon_yj_gbsy@1x.png" @click="audioButton">
    <!--未静音按钮-->
    <img class="position-button-2" v-if="audioType" src="@/assets/ZDimages/icon_yj_kqsy@1x.png" @click="audioButton">
    <!--全屏按钮-->
    <img class="position-button-3" v-if="fullType" src="@/assets/ZDimages/icon_yj_sf@1x.png"  @click="fullButton">
    <!--未全屏按钮-->
    <img class="position-button-4" v-if="!fullType" src="@/assets/ZDimages/icon_yj_qp@1x.png"  @click="fullButton">
    <div class="position-button-5" @click="goPage(1)">
      <img src="@/assets/ZDimages/icon_sy_spjk@1x.png">
      <p>实时监控</p>
    </div>
    <div class="position-button-6" @click="goPage(2)">
      <img src="@/assets/ZDimages/icon_sy_zcpt@1x.png">
      <p>三维模型</p>
    </div>
    <!--视频监控-->
    <div class="dept-video-max-box" v-if="pageType == 1 && deptVideoType">
      <div class="dept-video-box">
        <videoSurveillance></videoSurveillance>
      </div>
    </div>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import { getToken,removeToken } from '@/utils/auth'
  import {
    laboratoryBigViewSelectTriggerInfo,
  } from "@/api/index";
  //左侧组件
  import resourceAndEquipmentStatistics from "@/views/leftMaxBox/resourceAndEquipmentStatistics/index.vue";
  import overviewOfInstrumentCondition from "@/views/leftMaxBox/overviewOfInstrumentCondition/index.vue";
  import reservationUsageRankings from "@/views/leftMaxBox/reservationUsageRankings/index.vue";
  //右侧组件
  import laboratoryAnimalCenterReservationStatistics from "@/views/rightMaxBox/laboratoryAnimalCenterReservationStatistics/index.vue";
  import resourceReservationStatistics from "@/views/rightMaxBox/resourceReservationStatistics/index.vue";
  import sensorsAndIotDevices from "@/views/rightMaxBox/sensorsAndIotDevices/index.vue";
  //中间组件
  import comprehensiveData from "@/views/cengterMaxBox/comprehensiveData/index.vue";
  import laboratoryData from "@/views/cengterMaxBox/laboratoryData/index.vue";
  import secondaryCollegeUnitLaboratoryStatistics from "@/views/cengterMaxBox/secondaryCollegeUnitLaboratoryStatistics/index.vue";
  import overdueServiceEquipmentStatistics from "@/views/cengterMaxBox/overdueServiceEquipmentStatistics/index.vue";
  import statisticalAnalysisOfHazardSources from "@/views/cengterMaxBox/statisticalAnalysisOfHazardSources/index.vue";
  import statisticalAnalysisOfHazardousChemicals from "@/views/cengterMaxBox/statisticalAnalysisOfHazardousChemicals/index.vue";
  import alarmComponents from "@/views/cengterMaxBox/alarmComponents/index.vue";
  import videoSurveillance from "@/views/cengterMaxBox/videoSurveillance/index.vue";
  //地图模型组件
  import canvasMap from "@/views/cengterMaxBox/canvasMap/index.vue";
  export default {
    name: 'home',
    components: {
      //左侧组件
      resourceAndEquipmentStatistics,
      overviewOfInstrumentCondition,
      reservationUsageRankings,
      //右侧组件
      laboratoryAnimalCenterReservationStatistics,
      resourceReservationStatistics,
      sensorsAndIotDevices,
      //中间组件
      comprehensiveData,
      laboratoryData,
      secondaryCollegeUnitLaboratoryStatistics,
      overdueServiceEquipmentStatistics,
      statisticalAnalysisOfHazardSources,
      statisticalAnalysisOfHazardousChemicals,
      alarmComponents,
      videoSurveillance,
      //地图模型组件
      canvasMap,
    },
    data () {
      return {
        rectangleLogo:localStorage.getItem('rectangleLogo'),
        // 时间
        timeData:null,
        // 定时器
        timer:null,
        //页面
        pageType:1,
        //全屏状态
        fullType:true,
        //播放报警音状态
        audioType:false,
        //预案MQTT
        planOpic:'lab/risk/plan/change',
        planClient:{},
        //预案数据
        alarmPropsData:{},
        //校区模型关系
        schoolModelList:[
          // {school:'B',	name:'5号楼',	buildId:'101093843117592833',buildIdList:[],},
          {school:'B',	name:'6B教学楼',	buildId:'101093843117592815',buildIdList:[],},
          {school:'B',	name:'中心实验楼',	buildId:'101093843117592829',buildIdList:[],},
          {school:'B',	name:'信息工程学院教学楼',	buildId:'101093843117592812',buildIdList:[],},
          {school:'B',	name:'养虫楼',	buildId:'101093843117592805',buildIdList:[],},
          {school:'B',	name:'农业机械实验室平房',	buildId:'101093843117592807',buildIdList:[],},
          {school:'B',	name:'农药研究所',	buildId:'101093843117592804',buildIdList:[],},
          {school:'B',	name:'动物中心B座',	buildId:'101093843117592785',buildIdList:[],},
          {school:'B',	name:'动物中心实验楼A',	buildId:'101093843117592765',buildIdList:[],},
          {school:'B',	name:'动物中心实验楼B',	buildId:'101093843117592764',buildIdList:[],},
          {school:'B',	name:'动物科技学院楼',	buildId:'101093843117592831',buildIdList:[],},
          {school:'B',	name:'动科楼',	buildId:'101093843117592832',buildIdList:[],},
          {school:'B',	name:'北1号教学楼',	buildId:'101093843117592802',buildIdList:[],},
          {school:'B',	name:'北2号教学楼',	buildId:'101093843117592813',buildIdList:[],},
          {school:'B',	name:'北3号教学楼',	buildId:'101093843117592782',buildIdList:[],},
          {school:'B',	name:'北4号教学楼',	buildId:'101093843117592781',buildIdList:[],},
          {school:'B',	name:'北5号教学楼',	buildId:'101093843117592783',buildIdList:['101093843117592783','101093843117592833'],},
          {school:'B',	name:'北6号教学楼',	buildId:'101093843117592814',buildIdList:[],},
          {school:'B',	name:'北7号教学楼',	buildId:'101093843117592816',buildIdList:[],},
          {school:'B',	name:'危化品服务中心',	buildId:'101093843117592826',buildIdList:[],},
          // {school:'B',	name:'原农一站办公楼',	buildId:'101093843117592811',buildIdList:[],},
          // {school:'B',	name:'工程训练中心楼',	buildId:'101093843117592808',buildIdList:[],},
          // {school:'B',	name:'教学办公楼',	buildId:'101093843117592806',buildIdList:[],},
          // {school:'B',	name:'未知实验室	',buildId:'1855791848753147906',buildIdList:[],},
          // {school:'B',	name:'机械及液压实验室平房',	buildId:'101093843117592810',buildIdList:[],},
          {school:'B',	name:'机电锻铸车间',	buildId:'101093843117592809',buildIdList:['101093843117592809','101093843117592811','101093843117592808','101093843117592806','1855791848753147906','101093843117592810'],},
          // {school:'B',	name:'水利与建筑工程学院',	buildId:'101093843117592788',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院A',	buildId:'101093843117592766',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院B',	buildId:'101093843117592768',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院C',	buildId:'101093843117592769',buildIdList:[],},
          // {school:'B',	name:'水利与建筑工程学院D',	buildId:'101093843117592767',buildIdList:[],},
          {school:'B',	name:'水工厅', buildId:'1871736666456633346',buildIdList:['1871736666456633346','101093843117592788','101093843117592766','101093843117592768','101093843117592769','101093843117592767'],},
          {school:'B',	name:'水工水力学实验大厅', buildId:'1871729400227606529',buildIdList:[],},
          {school:'B',	name:'理科综合实验楼A',	buildId:'101093843117592774',buildIdList:['101093843117592774','101093843117592779','101093843117592775','101093843117592776','101093843117592780'],},
          // {school:'B',	name:'理科综合实验楼B',	buildId:'101093843117592779',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼C',	buildId:'101093843117592775',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼D',	buildId:'101093843117592776',buildIdList:[],},
          // {school:'B',	name:'理科综合实验楼E',	buildId:'101093843117592780',buildIdList:[],},
          {school:'B',	name:'老昆虫博物馆',	buildId:'101093843117592786',buildIdList:[],},
          {school:'B',	name:'食品楼',	buildId:'101093843117592789',buildIdList:['101093843117592789','101093843117592771','101093843117592770','101093843117592772','101093843117592773'],},
          // {school:'B',	name:'食品楼A',	buildId:'101093843117592771',buildIdList:[],},
          // {school:'B',	name:'食品楼B',	buildId:'101093843117592770',buildIdList:[],},
          // {school:'B',	name:'食品楼C',	buildId:'101093843117592772',buildIdList:[],},
          // {school:'B',	name:'食品楼D',	buildId:'101093843117592773',buildIdList:[],},
          {school:'N',	name:'农科楼(农学院)',	buildId:'101084081109864872',buildIdList:['101084081109864872','101084081109864874','101084081109864873','101093843117592803'],},
          // {school:'N',	name:'农科楼(园艺学院)',	buildId:'101084081109864874',buildIdList:[],},
          // {school:'N',	name:'农科楼(植物保护学院)',	buildId:'101084081109864873',buildIdList:[],},
          // {school:'N',	name:'农科楼(资源环境学院)',	buildId:'101093843117592803',buildIdList:[],},
          {school:'N',	name:'农科院子校教学楼（初中）',	buildId:'101093843117592823',buildIdList:[],},
          {school:'N',	name:'南2号教学楼',	buildId:'101093843117592817',buildIdList:[],},
          {school:'N',	name:'南3号教学楼',	buildId:'101093843117592820',buildIdList:[],},
          {school:'N',	name:'南校子校楼',	buildId:'101093843117592800',buildIdList:[],},
          {school:'N',	name:'南校水保楼',	buildId:'101093843117592801',buildIdList:[],},
          {school:'N',	name:'家畜生物学重点实验室楼',	buildId:'101093843117592787',buildIdList:[],},
          {school:'N',	name:'木艺坊',	buildId:'101093843117592819',buildIdList:[],},
          {school:'N',	name:'林学院实验楼',	buildId:'101093843117592818',buildIdList:[],},
          {school:'N',	name:'科研主楼',	buildId:'101093843117592784',buildIdList:[],},
          {school:'N',	name:'科研楼',	buildId:'101093843117592822',buildIdList:[],},
          {school:'N',	name:'经管园林楼（文科楼）A',	buildId:'101093843117592777',buildIdList:[],},
          {school:'N',	name:'经管园林楼（文科楼）C',	buildId:'101093843117592778',buildIdList:[],},
          {school:'N',	name:'草业与草原楼',	buildId:'101093843117592825',buildIdList:[],},
          {school:'N',	name:'进学院实验楼',	buildId:'101093843117592821',buildIdList:[],},
          {school:'旱研院校区',	name:'农一站科研楼',	buildId:'101093843117592827',buildIdList:[],},
          {school:'旱研院校区',	name:'农机一站平房',	buildId:'101093843117592828',buildIdList:[],},
          {school:'校外',	name:'农三站科研办公楼',	buildId:'101093843117592790',buildIdList:[],},
          {school:'校外',	name:'器材楼',	buildId:'101093843117592792',buildIdList:[],},
          {school:'水保所校区',	name:'人工降雨实验大厅',	buildId:'101093843117592793',buildIdList:[],},
          {school:'水保所校区',	name:'南校区农科楼',	buildId:'101093843117592799',buildIdList:[],},
          {school:'水保所校区',	name:'国家重点实验室西楼',	buildId:'101093843117592798',buildIdList:[],},
          {school:'水保所校区',	name:'水保所人工干旱环境气候室工程',	buildId:'101093843117592795',buildIdList:[],},
          {school:'水保所校区',	name:'水保所国家重点实验室楼',	buildId:'101093843117592794',buildIdList:[],},
          {school:'水保所校区',	name:'水保所科研大楼',	buildId:'101093843117592797',buildIdList:[],},
          {school:'水保所校区',	name:'水保所西区科研楼',	buildId:'101093843117592796',buildIdList:[],},
          {school:'老附中校区',	name:'附中实验楼',	buildId:'101093843117592830',buildIdList:[],},
          {school:'老附中校区',	name:'附中教学楼',	buildId:'101093843117592791',buildIdList:[],},
        ],
        //最新报警文字
        alarmTitle:'',
        //视频监控页面状态
        deptVideoType:false,
      }
    },
    created(){
      // if(!getToken()){
      //   this.$router.push({path:'/'});
      // }
    },
    mounted(){
      //时间
      this.timeFunction();
      //判断是否已有预警MQTT链接
      if(!this.planClient.unsubscribe){
        this.offPlanMQTT('on');
      }
      //查询是否有预案发生
      this.laboratoryBigViewSelectTriggerInfo();
      //全屏窗口变化
      window.onresize = () => {
        if(window.innerWidth == 11520 && window.innerHeight == 2160){
          this.$set(this,'fullType',true);
        }else if(window.innerWidth == 1920 && window.innerHeight == 1080){
          this.$set(this,'fullType',true);
        }else{
          this.$set(this,'fullType',false);
        }
      }
    },
    methods:{
      demo(){
        let list = [
          {
            eventId: "1888781767708901377",
            eventName: "温度1预案预警",
            subName: "test样品制备室1",
            riskPlanId: null,
            riskPlanName: "1温度预案",
            riskPlanLevel: 1,
            riskReason: "【实验室安全系统】test样品制备室1-公司温度传感器数值异常，请立即核实处理！",
            ifCheck: false,
            eventStartTime: "2025-02-10T10:47:20",
            riskAttribute: "0",
            triggerUploadData: "[{\"code\":\"wd\",\"deviceId\":1859497698701836289,\"deviceName\":\"公司温度传感器\",\"deviceNo\":\"123\",\"deviceValue\":20.7,\"lastOnlineTime\":\"2025-02-10T10:47:19.903\",\"online\":true,\"unit\":\"℃\"}]",
            deptId: null,
            deptName: "葡酒学院",
            deptShortName: null,
            schoolId: null,
            schoolName: "第零个",
            buildId: "101093843117592825",
            // buildId: "101084081109864872",
            buildName: "S科研主楼",
            floorId: "17263016944919323",
            floorName: "1层",
            roomNum: "1301B",
            subId: "1400700979543928834",
            infoId: "172731652135310",
            eventStartTimestamp: 1739155640,
            classLevelName: "Ⅰ级",
            classLevelColor: "#DE0000",
            classTypeNames: "生物类"
          },
          {
            eventId: "1888781767708901377",
            eventName: "温度2预案预警",
            subName: "test样品制备室1",
            riskPlanId: null,
            riskPlanName: "2温度预案",
            riskPlanLevel: 1,
            riskReason: "【实验室安全系统】test样品制备室1-公司温度传感器数值异常，请立即核实处理！",
            ifCheck: false,
            eventStartTime: "2025-02-10T10:47:20",
            riskAttribute: "0",
            triggerUploadData: "[{\"code\":\"wd\",\"deviceId\":1859497698701836289,\"deviceName\":\"公司温度传感器\",\"deviceNo\":\"123\",\"deviceValue\":20.7,\"lastOnlineTime\":\"2025-02-10T10:47:19.903\",\"online\":true,\"unit\":\"℃\"}]",
            deptId: null,
            deptName: "葡酒学院",
            deptShortName: null,
            schoolId: null,
            schoolName: "第一个",
            buildId: "101093843117592787",
            // buildId: "101093843117592833",
            buildName: "S科研主楼",
            floorId: "17263016944919323",
            floorName: "1层",
            roomNum: "1301B",
            subId: "1400700979543928834",
            infoId: "172731652135310",
            eventStartTimestamp: 1739155640,
            classLevelName: "Ⅰ级",
            classLevelColor: "#DE0000",
            classTypeNames: "生物类"
          },
          {
            eventId: "1888781767708901377",
            eventName: "温度3预案预警",
            subName: "test样品制备室1",
            riskPlanId: null,
            riskPlanName: "3温度预案",
            riskPlanLevel: 1,
            riskReason: "【实验室安全系统】test样品制备室1-公司温度传感器数值异常，请立即核实处理！",
            ifCheck: false,
            eventStartTime: "2025-02-10T10:47:20",
            riskAttribute: "0",
            triggerUploadData: "[{\"code\":\"wd\",\"deviceId\":1859497698701836289,\"deviceName\":\"公司温度传感器\",\"deviceNo\":\"123\",\"deviceValue\":20.7,\"lastOnlineTime\":\"2025-02-10T10:47:19.903\",\"online\":true,\"unit\":\"℃\"}]",
            deptId: null,
            deptName: "葡酒学院",
            deptShortName: null,
            schoolId: null,
            schoolName: "第二个",
            buildId: "101093843117592787",
            // buildId: "101093843117592833",
            buildName: "S科研主楼",
            floorId: "17263016944919323",
            floorName: "1层",
            roomNum: "1301B",
            subId: "1400700979543928834",
            infoId: "172731652135310",
            eventStartTimestamp: 1739155640,
            classLevelName: "Ⅰ级",
            classLevelColor: "#DE0000",
            classTypeNames: "生物类"
          },
          {
            eventId: "1888781767708901377",
            eventName: "温度4预案预警",
            subName: "22222222222222",
            riskPlanId: null,
            riskPlanName: "4温度预案",
            riskPlanLevel: 1,
            riskReason: "【实验室安全系统】test样品制备室1-公司温度传感器数值异常，请立即核实处理！",
            ifCheck: false,
            eventStartTime: "2025-02-10T10:47:20",
            riskAttribute: "0",
            triggerUploadData: "[{\"code\":\"wd\",\"deviceId\":1859497698701836289,\"deviceName\":\"公司温度传感器\",\"deviceNo\":\"123\",\"deviceValue\":20.7,\"lastOnlineTime\":\"2025-02-10T10:47:19.903\",\"online\":true,\"unit\":\"℃\"}]",
            deptId: null,
            deptName: "葡酒学院",
            deptShortName: null,
            schoolId: null,
            schoolName: "第三个",
            buildId: "101093843117592787",
            // buildId: "101093843117592833",
            buildName: "S科研主楼",
            floorId: "17263016944919323",
            floorName: "1层",
            roomNum: "1301B",
            subId: "1400700979543928834",
            infoId: "172731652135310",
            eventStartTimestamp: 1739155640,
            classLevelName: "Ⅰ级",
            classLevelColor: "#DE0000",
            classTypeNames: "生物类"
          },
        ]
        this.$refs['canvasMap'].alarmTrigger(list,list[list.length-1],'N');
      },
      demo2(){
        this.$refs['canvasMap'].alarmOff();
      },
      openBackManageUrl(){
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeToken();
          localStorage.removeItem('schoolToken');
          this.$router.push({path:'/'});
        }).catch(() => {});
      },
      goPage(type){
        //报警期间禁止操作
        if(this.pageType == 2){
          return
        }
        if (type == 1){
          this.$set(this,'deptVideoType',!this.deptVideoType);
        }else if(type == 2){
          window.open('https://zcsjpt-szls.nwafu.edu.cn/')
        }
      },
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              // console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo();
          }
        });
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          if(response.data[0]){
            response.data.forEach((item)=>{
              item.triggerUploadData = JSON.parse(item.triggerUploadData);
              item.alarmText = item.riskPlanName.split('预案');
              item.alarmText = item.alarmText[0].split('预警');
              item.alarmText = item.alarmText[0]+'预警';
              //修正楼栋ID用于匹配本地数据
              self.schoolModelList.forEach((minItem)=>{
                if(minItem.buildIdList[0]){
                  minItem.buildIdList.forEach((minItemMin)=>{
                    if(item.buildId == minItemMin){
                      item.buildId = minItem.buildId;
                    }
                  })
                }
              })
            })
            //报警提示title信息
            this.$set(this,'alarmTitle',response.data[response.data.length-1].alarmText);
            //报警窗口数据
            this.$set(this,'alarmPropsData',response.data[response.data.length-1]);
            //报警窗口开启
            this.$set(this,'pageType',2);
            //判断报警楼栋属于南北校区
            setTimeout(function(){
              self.schoolModelList.forEach((item)=>{
                if(item.buildId == response.data[response.data.length-1].buildId){
                  self.$refs['canvasMap'].alarmTrigger(response.data,response.data[response.data.length-1],item.school);
                }
              })
            },500);
            //报警声音
            if(this.audioType){
              /* 报警音频播放 */
              const audio = this.$refs.audioPlayer;
              // 尝试静音自动播放
              audio.play().catch(() => {
                // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
                setTimeout(() => audio.play(), 2000);
              });
              // 延迟 3 秒后尝试取消静音（需浏览器允许）
              setTimeout(() => {
                audio.muted = false;
              }, 3000);
            }
          }else{
            //报警结束
            this.$set(this,'pageType',1);
            setTimeout(function(){
              self.$refs['canvasMap'].alarmOff();
            },500);
          }
        })
      },
      //时间定时器
      timeFunction(){
        let self = this;
        this.timer = window.setInterval(showTime, 1000);
        function showTime() {
          const date = new Date();
          let dayOfWeekName = '';
          let dayOfWeek = date.getDay();
          if (dayOfWeek === 0) {
            dayOfWeekName = "星期日"
          } else if (dayOfWeek === 1) {
            dayOfWeekName = "星期一";
          } else if (dayOfWeek === 2) {
            dayOfWeekName = "星期二";
          } else if (dayOfWeek === 3) {
            dayOfWeekName = "星期三";
          } else if (dayOfWeek === 4) {
            dayOfWeekName = "星期四";
          } else if (dayOfWeek === 5) {
            dayOfWeekName = "星期五";
          } else if (dayOfWeek === 6) {
            dayOfWeekName = "星期六";
          }
          const y = date.getFullYear().toString();
          const m = (date.getMonth() + 1).toString().padStart(2, '0');
          const d = date.getDate().toString().padStart(2, '0');
          const hours = date.getHours().toString().padStart(2, '0');
          const minutes = date.getMinutes().toString().padStart(2, '0');
          const seconds = date.getSeconds().toString().padStart(2, '0');
          self.$set(self,'timeData',y+'-'+m+'-'+d+' '+dayOfWeekName+' '+hours+':'+minutes+':'+seconds);
        }
      },
      //音频播放相关
      audioButton(){
        this.$set(this,'audioType',!this.audioType);
        if(this.pageType==2 && this.audioType){
          /* 报警音频播放 */
          const audio = this.$refs.audioPlayer;
          // 尝试静音自动播放
          audio.play().catch(() => {
            // 如果失败，延迟 2 秒再次尝试（趁浏览器未完全冻结）
            setTimeout(() => audio.play(), 2000);
          });
          // 延迟 3 秒后尝试取消静音（需浏览器允许）
          setTimeout(() => {
            audio.muted = false;
          }, 3000);
        }
      },
      //全屏按钮
      fullButton(){
        if (this.fullType){
          this.exitFullscreen();
        } else {
          this.fullScreen();
        }
      },
      //全屏
      fullScreen() {
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      },
      //退出全屏
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      },
    },
    beforeDestroy() {
      let self = this;
      //清除定时器
      window.clearInterval(self.timer);
      //清除全屏窗口变化
      window.onresize = null
      // MQTT预警
      self.offPlanMQTT();
    },
    destroyed() {
      //清除定时器
      window.clearInterval(this.timer);
      //清除全屏窗口变化
      window.onresize = null
    }
  }
</script>
<style scoped lang="scss">
  .home{
    width: 11520px;
    height: 2160px;
    flex:1;
    display: flex;
    background-color: #01060C;
    position: relative;
    /*transform:scale(0.7714285);*/
    /*transform:scaleX(1.10769);*/
    /*transform-origin: 0 0;*/
    .home-left-box{
      z-index:20;
      /*width:2496px;*/
      .time-p{
        height:132px;
        line-height:132px;
        margin:0 0 46px 200px;
        color:#fff;
        font-size:34px;
        font-family: SOURCEHANSANSCN;
      }
    }
    .home-center-box{
      z-index:20;
      /*width:5408px;*/
      /*flex:1;*/
      position: relative;
      //地图层
      .map-box{
        position: absolute;
        top:0;
        left:0;
        z-index: 0;
        width:5408px;
      }
      //常规展示层
      .center-max-box{
        position: absolute;
        top:0;
        left:0;
        z-index: 1;
        /*width:5408px;*/
        width:5760px;
        display: flex;
        .center-left-box{
          width:1255px;
          margin-left:140px;
        }
        .center-center-box{
          flex:1;
          /*width: 2898px;*/
        }
        .center-right-box{
          /*width:1255px;*/
          width:1100px;
        }
      }
    }
    .home-right-box{
      z-index:20;
      /*width:2496px;*/
      .button-box{
        margin:0 200px 46px 0;
        display: flex;
        .null-p{
          flex:1;
        }
        div{
          display: flex;
          cursor: pointer;
          p{
            height:132px;
            line-height:132px;
            color:#fff;
            font-size:34px;
          }
          p:nth-child(1){
            margin-right:14px;
          }
          p:nth-child(2){
            font-family: SOURCEHANSANSCN;
          }
        }
      }
    }
    //报警层
    .alarm-max-box{
      position: absolute;
      top:0;
      left:0;
      z-index: 50;
    }
    .home-left-box{
      /*width: 2880px;*/
      width: 2760px;
      height:2160px;
      overflow: hidden;
      .scale-box-big{
        transform:scale(0.7714285);
        transform-origin: 0 0;
        .scale-box{
          transform:scaleX(1.4);
          transform-origin: 0 0;
          padding-left:210px;
        }
      }
    }
    .home-center-box{
      /*width:5760px;*/
      width:5927px;
      flex:1;
      height:2160px;
      display: flex;
      .scale-comprehensiveData{
        position: absolute;
        top:0;
        left:0;
        width:5760px;
        height:2160px;
        display: flex;
        transform:scale(0.7714285);
        transform-origin: 50% 0;
        .scale-box{
          flex:1;
          display: flex;
          transform:scaleX(1.4);
          transform-origin: 50% 0;
        }
      }
      .scale-center-box{
        height:2160px;
        flex:1;
        display: flex;
        transform:scale(0.7714285);
        transform-origin: 50% 0;
        .scale-box{
          flex:1;
          display: flex;
          flex-direction: column;
          transform:scaleX(1.4);
          transform-origin: 50% 0;
        }
      }
    }
    .home-right-box{
      /*width: 2880px;*/
      width: 2788px;
      height:2160px;
      .scale-box-big{
        transform:scale(0.7714285);
        transform-origin: 100% 0;
        .scale-box{
          transform:scaleX(1.4);
          transform-origin: 100% 0;
          padding-left:140px;
        }
      }
    }
    .back_mp4{
      z-index:40;
      position: absolute;
      top: 0;
      left: 0;
      /*width: 10400px;*/
      /*height: 2808px;*/
      width: 11520px;
      height: 2160px;
      /*background-color: transparent;*/
      /*transform:scaleX(1.10769);*/
    }
    .waring_mp3{
      z-index: -1000;
      width:1px;
      height:1px;
      overflow: hidden;
    }
  }
  //logo
  .logo-img{
    position:absolute;
    top:45px;
    left:4560px;
    z-index:50;
    width:559px;
    height:111px;
    display: inline-block;
    transform:scaleX(1.4);
    transform-origin: 50% 0;
  }
  //标题
  .title-top-center-box{
    transform:scaleX(1.4);
    transform-origin: 50% 0;
    position:absolute;
    top:40px;
    left:5590px;
    z-index:50;
    font-size:104px;
    line-height:104px;
    font-weight: 700;
    background: -webkit-linear-gradient(0deg, #41A4FF, #E8F5FF); /* Chrome, Safari */
    background: linear-gradient(0deg, #41A4FF, #E8F5FF); /* 标准语法 */
    -webkit-background-clip: text; /* Chrome, Safari */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Chrome, Safari */
    color: transparent; /* 其他浏览器 */
  }
  //中央区域左侧按钮
  .center-left-button-box{

  }
  //中央区域右侧按钮
  .center-right-button-box{

  }
  //左侧遮罩
  .back-l-img{
    z-index: 15;
    position: absolute;
    top:0;
    left:0;
    width: 4875px;
    height: 2160px;
    background: url("../assets/ZDimages/demo_l.png");
    background-size: 100% 100%;
  }
  //右侧遮罩
  .back-r-img{
    z-index: 15;
    position: absolute;
    top:0;
    right:0;
    width: 4875px;
    height: 2160px;
    background: url("../assets/ZDimages/demo_r.png");
    background-size: 100% 100%;
  }
  .map-max-big-box{
    z-index: 10;
    position: absolute;
    width:5927px;
    height: 2160px;
    top:300px;
    left:2760px;
    overflow: hidden;
    .map-box{
      transform:scaleX(1.4);
      transform-origin: 50% 0;
    }
  }
  .dept-video-max-box{
    z-index: 1000;
    position: absolute;
    width:5527px;
    height: 1700px;
    top:270px;
    left:2960px;
    overflow: hidden;
    .dept-video-box{
      transform:scaleX(1.4);
      transform-origin: 0 0;
    }
  }
  //报警提示边框
  .alarm-max-box{
    animation: slide 1s ease-in-out 1s infinite alternate;
  }
  @keyframes slide {
    0% {
      box-shadow: inset 0 0 210px rgba(234, 1, 1, 1);
    }
    50% {
      box-shadow: inset 0 0 210px rgba(234, 1, 1, 0.5);
    }
    100% {
      box-shadow: inset 0 0 210px rgba(234, 1, 1, 0);
    }
  }
  .left-alarm-max-big-box{
    z-index:100;
    position: absolute;
    top:50%;
    left:650px;
    margin-top:-395px;
    width:1458px;
    height:679px;
    background: url("../assets/ZDimages/icon_yujing@1x.png");
    background-size: 100% 100%;
    animation: alarmSlide 1s ease-in-out 1s infinite alternate;
    div{
      margin:220px 0 0 425px;
      width:810px;     padding: 0; /* 移除内边距以确保文字充分利用空间 */
      display: flex;
      p{
        flex:1;
        text-align: center;
        font-size:90px;
        height: 90px;
        line-height:90px;
        font-weight:700;
        font-family: SOURCEHANSANSCN;
        color:#FBFF00;
        text-shadow: 0 0 50px rgba(251,255,0,0.8);
      }
    }
  }
  .right-alarm-max-big-box{
    z-index:100;
    position: absolute;
    top:50%;
    right:665px;
    margin-top:-395px;
    width:1458px;
    height:679px;
    background: url("../assets/ZDimages/icon_yujing@1x.png");
    background-size: 100% 100%;
    animation: alarmSlide 1s ease-in-out 1s infinite alternate;
    div{
      margin:220px 0 0 425px;
      width:810px;     padding: 0; /* 移除内边距以确保文字充分利用空间 */
      display: flex;
      p{
        flex:1;
        text-align: center;
        font-size:90px;
        height: 90px;
        line-height:90px;
        font-weight:700;
        font-family: SOURCEHANSANSCN;
        color:#FBFF00;
        text-shadow: 0 0 50px rgba(251,255,0,0.8);
      }
    }
  }
  @keyframes alarmSlide {
    0% {
      opacity:1;
    }
    25% {
      opacity:1;
    }
    70% {
      opacity:1;
    }
    85% {
      opacity:0.5;
    }
    100% {
      opacity:0;
    }
  }
  .position-button-0{
    cursor: pointer;
    width:60px;
    height:60px;
    position:absolute;
    top:45px;
    right:820px;
    display: inline-block;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 50% 0;
  }
  .position-button-1{
    cursor: pointer;
    width:60px;
    height:60px;
    position:absolute;
    top:45px;
    right:700px;
    display: inline-block;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 50% 0;
  }
  .position-button-2{
    cursor: pointer;
    width:60px;
    height:60px;
    position:absolute;
    top:45px;
    right:700px;
    display: inline-block;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 50% 0;
  }
  .position-button-3{
    cursor: pointer;
    width:60px;
    height:60px;
    position:absolute;
    top:45px;
    right:580px;
    display: inline-block;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 0 0;
  }
  .position-button-4{
    cursor: pointer;
    width:60px;
    height:60px;
    position:absolute;
    top:45px;
    right:580px;
    display: inline-block;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 0 0;
  }
  .position-button-5{
    cursor: pointer;
    height:80px;
    width:500px;
    position:absolute;
    bottom:25px;
    left:5000px;
    display: flex;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 0 0;
    img{
      width:80px;
      height:80px;
      margin-right:10px;
      display: inline-block;
    }
    p{
      height:80px;
      line-height:80px;
      font-size:40px;
      font-family: SOURCEHANSANSCN;
      font-weight: 700;
      background: -webkit-linear-gradient(0deg, #0591F3, #F9F9F9); /* Chrome, Safari */
      background: linear-gradient(0deg, #0591F3, #F9F9F9); /* 标准语法 */
      -webkit-background-clip: text; /* Chrome, Safari */
      background-clip: text;
      -webkit-text-fill-color: transparent; /* Chrome, Safari */
      color: transparent; /* 其他浏览器 */
    }
  }
  .position-button-6{
    cursor: pointer;
    height:80px;
    width:500px;
    position:absolute;
    bottom:25px;
    left:6100px;
    display: flex;
    z-index:100;
    transform:scaleX(1.4);
    transform-origin: 0 0;
    img{
      width:80px;
      height:80px;
      margin-right:20px;
      display: inline-block;
    }
    p{
      height:80px;
      line-height:80px;
      font-size:40px;
      font-family: SOURCEHANSANSCN;
      font-weight: 700;
      background: -webkit-linear-gradient(0deg, #0591F3, #F9F9F9); /* Chrome, Safari */
      background: linear-gradient(0deg, #0591F3, #F9F9F9); /* 标准语法 */
      -webkit-background-clip: text; /* Chrome, Safari */
      background-clip: text;
      -webkit-text-fill-color: transparent; /* Chrome, Safari */
      color: transparent; /* 其他浏览器 */
    }
  }
</style>