<template> <div class="floor"> <svg-icon icon-class="pop-cross" class="close" @click="changePage"/> <div class="block" style="height: 30%"> <div :style="{backgroundImage:'url('+titleAll+')'}" class="title" style="padding-left: 50px;">{{building}}{{floor}}</div> <div style="margin-left:25%;width: 50%;display: flex;padding: 0px 10%;"> <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" /> <div class="item"> <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{score}}</div> <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">安防评分</div> </div> </div> <div style="width: 50%;display: flex;padding: 0px 10%"> <el-image :src="require('@/assets/popup/camera.png')" class="base-map-image" mode="fill" /> <div class="item"> <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{camera}}</div> <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">摄像机</div> </div> </div> <div style="width: 50%;display: flex;padding: 0px 10%;"> <el-image :src="require('@/assets/popup/door.png')" class="base-map-image" mode="fill" /> <div class="item"> <div style="color: #ffb441;text-shadow: 0 0 5px #ffb441;font-size: 20px">{{door}}</div> <div style="color: #B3F3F6;text-shadow: 0 0 2px #d1ffff;">闸机</div> </div> </div> </div> <div class="block" style="flex-direction: column;"> <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">设备在线状态统计</div> <floor-pie ref="floorPieDiv" style="flex:1;"/> </div> <div class="block"> <div :style="{backgroundImage:'url('+titleImg+')'}" class="title">区域引导示意图</div> <el-image :src="area" class="area-map-image" mode="fill" @click="isbig=true"/> </div> <el-image class="floor-big-pic" :src="area" v-if="isbig" @click="isbig=false"/> </div> </template> <script> import FloorPie from '@/views/popup/components/floorPie'; import { repostSocket } from '@/api/common' import { getAreaScore } from '@/api/pop' export default { name: 'Floor', components: { FloorPie }, data() { return { isbig: false, titleImg: require('@/assets/popup/title.png'), // 背景图片 titleAll: require('@/assets/popup/title-all.png'), // 背景图片 building: '一期主楼', // 楼名称 floor: '10F', // 楼层 camera: 0, // 摄像机 score: '*', // 分数 door: 0, // 闸机 area: '' } }, watch: { $route(val) { this.initData() } }, mounted() { this.initData() }, methods: { initData() { if (this.$route.query && this.$route.query.message) { const arr = this.$route.query.message.split('=') this.building = arr[1] this.floor = this.$route.query.floor this.camera = this.$route.query.camera this.door = this.$route.query.door this.area = require('@/assets/popup/exit/' + this.building + '-' + this.floor + '.png') let position switch (this.building) { case '一期主楼': position = 1 break case '二期主楼': position = 2 break case '录制楼': position = 3 break case '1600演播厅': position = 4 break } const params = { position: position, area: this.floor.replace('F', '') } getAreaScore(params).then(response => { if (response.code === 200) { this.score = response.data['安防评分'] } }) this.$refs.floorPieDiv.initData(params) } }, changePage() { const params = { type: 'menu', message: 'show' } repostSocket(params).then(response => { if (response.code === 200) { } }) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .floor{ background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D); border-radius: 5px; width: 500px; height: 100%; margin-left: 10px; box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); .block{ height: 35%; width: 100%; display: flex; flex-wrap: wrap; } .title{ text-shadow: 0 0 5px #d1ffff; width: 500px; height: 35px; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; color: white; font-weight: bold; padding-top: 8px; padding-left: 30px; font-family: 黑体; letter-spacing: 1px; } .base-map-image{ width: 60px; height: 60px; } .area-map-image{ margin-right: 10px; margin-left: 5px; width: 100%; height: 80%; } .item{ flex: 1; font-weight: bold; text-align: center; font-size: 18px; } .close{ position: absolute;right: 20px;top:5px;color:white;background: #fc2323cc;width: 25px;height:25px;border-radius: 5px; padding: 3px; } .floor-big-pic{ position: fixed; bottom: calc( 50% - 200px); left: calc( 50% - 300px); height: 400px; height: 600px; z-index: 999999999; } } </style>