|
|
@@ -0,0 +1,536 @@
|
|
|
+<!-- 应急疏散首页 -->
|
|
|
+<template>
|
|
|
+ <div class="performEvacuationHome" ref="maxBox">
|
|
|
+ <div class="top-title-box">
|
|
|
+ <div class="top-title-img-box">应 急 处 置</div>
|
|
|
+ <div class="top-title-button-box">
|
|
|
+ <i class="el-icon-switch-button"></i>
|
|
|
+ <p @click="goRoute">{{routeType?'退出全屏':'全屏'}}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="content-left-max-big-box">
|
|
|
+ <!--楼层选择/实时人数-->
|
|
|
+ <div class="content-floor-num-box">
|
|
|
+ <!--楼层选择-->
|
|
|
+ <div class="content-floor-box">
|
|
|
+ <el-select v-model="buildingId" placeholder="请选择"
|
|
|
+ :popper-append-to-body="false"
|
|
|
+ @change="buildingChange"
|
|
|
+ class="building-select-box">
|
|
|
+ <el-option
|
|
|
+ v-for="item in buildingOptions"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!--实时人数-->
|
|
|
+ <div class="content-num-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--楼层图/楼层选择-->
|
|
|
+ <div class="content-map-select-box">
|
|
|
+ <!--楼层图-->
|
|
|
+ <div class="content-map-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!--楼层选择-->
|
|
|
+ <div class="content-select-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--智能监测/危险源-->
|
|
|
+ <div class="content-monitor-danger-box">
|
|
|
+ <!--智能监测-->
|
|
|
+ <div class="content-monitor-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!--危险源-->
|
|
|
+ <div class="content-danger-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--摄像头-->
|
|
|
+ <div class="content-right-max-big-box">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView } from "@/api/emergencyManagement/index";
|
|
|
+ export default {
|
|
|
+ name: 'performEvacuationHome',
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ //当前路由状态
|
|
|
+ routeType:false,
|
|
|
+ //楼栋数据
|
|
|
+ buildingId:null,
|
|
|
+ buildingOptions:[],
|
|
|
+ //楼层数据
|
|
|
+ floorId:null,
|
|
|
+ floorOptions:[],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ //根据判定当前全屏状态
|
|
|
+ if(this.$route.path == '/performEvacuationBig'){
|
|
|
+ this.$set(this,'routeType',true);
|
|
|
+ }else{
|
|
|
+ this.$set(this,'routeType',false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.getBuild();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //楼栋数据选择
|
|
|
+ buildingChange(){
|
|
|
+ //获取楼层数据
|
|
|
+ this.getFloor();
|
|
|
+ },
|
|
|
+ //跳转
|
|
|
+ goRoute(){
|
|
|
+ if(this.routeType){
|
|
|
+ this.$router.push({
|
|
|
+ path: "/emergencyManagement/performEvacuation"
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$router.push({
|
|
|
+ path: "/performEvacuationBig"
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //获取楼栋数据
|
|
|
+ getBuild(){
|
|
|
+ laboratoryBigViewGetBuildByBigView({type:2}).then(response => {
|
|
|
+ if(response.data[0]){
|
|
|
+ this.$set(this,'buildingOptions',response.data);
|
|
|
+ this.$set(this,'buildingId',response.data[0].id);
|
|
|
+ //获取楼层数据
|
|
|
+ this.getFloor();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取楼层数据
|
|
|
+ getFloor(){
|
|
|
+ laboratoryBigViewGetBuildByBigView({id:this.buildingId,type:3}).then(response => {
|
|
|
+ this.$set(this,'floorOptions',response.data);
|
|
|
+ this.$set(this,'floorId',response.data[0].id);
|
|
|
+ this.laboratoryBigViewGetFloorByBigView();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取楼层布局数据
|
|
|
+ laboratoryBigViewGetFloorByBigView(){
|
|
|
+ laboratoryBigViewGetFloorByBigView({id:this.floorId}).then(response => {
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+ .performEvacuationHome{
|
|
|
+ flex:1;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width:1920px;
|
|
|
+ height:1080px;
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/img_bg.png") repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .top-title-box{
|
|
|
+ height:92px;
|
|
|
+ position: relative;
|
|
|
+ .top-title-img-box{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ height:92px;
|
|
|
+ left:41px;
|
|
|
+ width: 1837px;
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/sy_db_bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size:40px;
|
|
|
+ line-height:82px;
|
|
|
+ color:#24d1f9;
|
|
|
+ font-weight:900;
|
|
|
+ letter-spacing:10px
|
|
|
+ }
|
|
|
+ .top-title-button-box{
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ right:0;
|
|
|
+ width:110px;
|
|
|
+ cursor: pointer;
|
|
|
+ i{
|
|
|
+ margin:0 10px;
|
|
|
+ line-height:40px;
|
|
|
+ color:#24D1F9;
|
|
|
+ font-size:18px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:40px;
|
|
|
+ color:#24D1F9;
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ .content-left-max-big-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .content-floor-num-box{
|
|
|
+ height:87px;
|
|
|
+ .content-floor-box{
|
|
|
+ ::v-deep .building-select-box{
|
|
|
+ margin:12px 0 0 30px;
|
|
|
+ .el-input__inner{
|
|
|
+ background:rgba(0,0,0,0);
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ box-shadow:0 0 5px 1px #24D1F9 inset;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .el-input__inner:hover{
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ box-shadow:0 0 5px 1px #24D1F9 inset;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-select-dropdown{
|
|
|
+ background:#01294d;
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ .el-select-dropdown__item{
|
|
|
+ background: rgba(0,0,0,0);
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .el-select-dropdown__item:hover{
|
|
|
+ background: #24D1F9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-num-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-map-select-box{
|
|
|
+ flex:1;
|
|
|
+ display: flex;
|
|
|
+ .content-map-box{
|
|
|
+ margin-left:92px;
|
|
|
+ flex:1;
|
|
|
+ height:500px;
|
|
|
+ position: relative;
|
|
|
+ .newEvacuation-map-max-big-box{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ img{
|
|
|
+ -webkit-user-drag: none;
|
|
|
+ }
|
|
|
+ .newEvacuation-map-big-box{
|
|
|
+ position: relative;
|
|
|
+ border:1px dashed #24D1F9;
|
|
|
+ .newEvacuation-map-for-box{
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .newEvacuation-map-for-min-box{
|
|
|
+ height:100%;
|
|
|
+ position: relative;
|
|
|
+ .map-for-name-p{
|
|
|
+ padding:0 10px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ color:#24D1F9;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .map-for-num-p{
|
|
|
+ padding:0 10px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ color:#24D1F9;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .user-num-box{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width:20px;
|
|
|
+ height:15px;
|
|
|
+ margin:10px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:35px;
|
|
|
+ font-size:14px;
|
|
|
+ color:#24D1F9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-num-one{
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ .user-num-two{
|
|
|
+ bottom:0;
|
|
|
+ }
|
|
|
+ .position-box{
|
|
|
+ position: absolute;
|
|
|
+ font-size:14px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .center-move-door-p-t {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;*/
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-b {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;*/
|
|
|
+ background-size: 100% !important;
|
|
|
+ }
|
|
|
+ .center-move-door-p-l {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;*/
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-r {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;*/
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotateZ(270deg);
|
|
|
+ }
|
|
|
+ .lightTopOn {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_sjt.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightTopOff {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightBottomOn {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_xjt.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightBottomOff {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightLeftOn {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_zuo.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightLeftOff {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightRightOn {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_yuo.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightRightOff {
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");*/
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-map-box-one{
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ }
|
|
|
+ .for-map-box{
|
|
|
+ background: rgba(1,16,32,0.5);
|
|
|
+ }
|
|
|
+ .for-map-box-two{
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);*/
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .for-map-box-two-check{
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);*/
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .room-type-one{
|
|
|
+ //选中
|
|
|
+ background: rgba(30,118,142,0.4);
|
|
|
+ }
|
|
|
+ .room-type-two{
|
|
|
+ //报警
|
|
|
+ background: rgba(232,0,0,0.4);
|
|
|
+ box-shadow:0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-three{
|
|
|
+ //选中报警
|
|
|
+ background: rgba(30,118,142,0.4);
|
|
|
+ box-shadow:0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-noe{
|
|
|
+ /*border:1px solid #666;*/
|
|
|
+ /*background: rgba(102,102,102,0.6);*/
|
|
|
+ /*color:#666!important;*/
|
|
|
+ p{
|
|
|
+ /*color:#666!important;*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-map-for-box{
|
|
|
+ font-weight:500;
|
|
|
+ position:absolute;
|
|
|
+ z-index:100;
|
|
|
+ /*background: url("../../../../assets/ZDimages/emergencyManagement/img_bg_yatk.png");*/
|
|
|
+ .plan-top-button-box{
|
|
|
+ display: flex;
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:14px;
|
|
|
+ color:#fff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin:9px 12px 0 0 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-time-box{
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width:24px;
|
|
|
+ height:24px;
|
|
|
+ margin-left:19px;
|
|
|
+ margin-right:8px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:24px;
|
|
|
+ color:#fff;
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-text-box{
|
|
|
+ display: flex;
|
|
|
+ color:#fff;
|
|
|
+ margin-top:15px;
|
|
|
+ overflow: hidden;
|
|
|
+ .plan-title-p{
|
|
|
+ width:60px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ margin:0 10px 0 18px;
|
|
|
+ border-radius:15px;
|
|
|
+ }
|
|
|
+ .plan-text-p{
|
|
|
+ width:170px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .color-type-1{
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ .color-type-2{
|
|
|
+ background: #FF9900;
|
|
|
+ }
|
|
|
+ .color-type-3{
|
|
|
+ background: #FF4800;
|
|
|
+ }
|
|
|
+ .color-type-4{
|
|
|
+ background: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-text-box-two{
|
|
|
+ display: flex;
|
|
|
+ color:#fff;
|
|
|
+ margin-top:22px;
|
|
|
+ overflow: hidden;
|
|
|
+ .plan-title-p{
|
|
|
+ width:60px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ margin:0 10px 0 18px;
|
|
|
+ border-radius:15px;
|
|
|
+ }
|
|
|
+ .plan-text-p{
|
|
|
+ width:170px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .color-type-1{
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ .color-type-2{
|
|
|
+ background: #FF9900;
|
|
|
+ }
|
|
|
+ .color-type-3{
|
|
|
+ background: #FF4800;
|
|
|
+ }
|
|
|
+ .color-type-4{
|
|
|
+ background: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-button-p{
|
|
|
+ margin:15px auto 0;
|
|
|
+ width:100px;
|
|
|
+ line-height:30px;
|
|
|
+ background: #163277;
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius:6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-plan-map-for-box{
|
|
|
+ z-index:1000!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .null-mapList{
|
|
|
+ text-align: center;
|
|
|
+ font-size:16px;
|
|
|
+ color:#fff;
|
|
|
+ line-height:300px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-select-box{
|
|
|
+ width:158px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-monitor-danger-box{
|
|
|
+ height:367px;
|
|
|
+ .content-monitor-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ .content-danger-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right-max-big-box{
|
|
|
+ width:427px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu