<template> <div class="right"> <el-tooltip effect="dark" content="安防事件评分由安防事件影响(占比50%)、访客事件影响(占比30%)、各楼栋设备维修次数(占比10%)、各楼栋消防设备有效期(占比10%)" placement="bottom"> <div class="block" style="justify-content: center;height: 20%;padding-top: 30px"> <div class="item"> <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num">{{list["0"]}}<span class="unit">分</span></div> <div style="color: #B3F3F6;">一期主楼</div> </div> </div> <div class="item"> <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num">{{list["1"]}}<span class="unit">分</span></div> <div style="color: #B3F3F6;">二期主楼</div> </div> </div> <div class="item"> <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num">{{list["2"]}}<span class="unit">分</span></div> <div style="color: #B3F3F6;">录制楼</div> </div> </div> <div class="item"> <el-image :src="require('@/assets/popup/safe.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num">{{list["3"]}}<span class="unit">分</span></div> <div style="color: #B3F3F6;">1600演播厅</div> </div> </div> </div> </el-tooltip> <div class="block" style="flex-direction: column;height: 40%;"> <div class="item" style="margin-bottom: 10px;margin-top: -10px;margin-left: 25%"> <el-image :src="require('@/assets/popup/baoan.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num"><span style="color: #08f102;text-shadow: 0 0 5px #08f102;">{{baoan.on}}</span> / {{baoan.all}}<span class="unit"> 位</span></div> <div style="color: #B3F3F6;">安保人员总数</div> </div> </div> <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin-bottom: 10px">安保人员列表</div> <person-table style="flex:1;height: calc(100% - 120px)"/> </div> <div class="block" style="justify-content: center;height: 40%;align-content: flex-start;"> <div class="item"> <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num"> {{visitor.in}}<span class="unit"> 位</span></div> <div style="color: #B3F3F6;">今日访客进入</div> </div> </div> <div class="item"> <el-image :src="require('@/assets/popup/visitor.png')" class="base-map-image" mode="fill" /> <div class="item-text"> <div class="num">{{visitor.out}}<span class="unit"> 位</span></div> <div style="color: #B3F3F6;">今日访客离开</div> </div> </div> <div :style="{backgroundImage:'url('+titleImg+')'}" class="title" style="width: 100%;margin: 10px 0">今日访客访问列表</div> <visitor-table style="flex:1;"/> </div> </div> </template> <script> import { securityScore, categoryStatistics, baoanStatistics, visitorStatistics } from '@/api/pop' import * as echarts from 'echarts' import PersonTable from '@/views/popup/components/personTable' import VisitorTable from '@/views/popup/components/visitorTable' export default { name: 'Right', components: { PersonTable, VisitorTable }, data() { return { timer: null, titleImg: require('@/assets/popup/title.png'), // 背景图片 titleAll: require('@/assets/popup/title-all.png'), // 背景图片 line: require('@/assets/popup/line.png'), // 背景图片 ball: require('@/assets/popup/ball.png'), // 背景图片 bottom: require('@/assets/popup/bottom.png'), // 背景图片 list: { '1': '*', '2': '*', '3': '*' }, baoan: { on: 0, all: 0 }, visitor: { in: 0, out: 0 }, safeData: [], num: '*' } }, mounted() { clearInterval(this.timer) this.initData() }, beforeDestroy() { clearInterval(this.timer) this.timer = null }, methods: { initData() { this.timer = setInterval(() => { securityScore().then(response => { if (response.code === 200) { this.list['0'] = response.data['一期主楼'].toFixed(2) this.list['1'] = response.data['二期主楼'].toFixed(2) this.list['2'] = response.data['录制楼'].toFixed(2) this.list['3'] = response.data['1600演播厅'].toFixed(2) } }) baoanStatistics().then(response => { if (response.code === 200) { this.baoan = response.data } }) visitorStatistics().then(response => { if (response.code === 200) { this.visitor = response.data } }) }, 5000) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .el-tooltip__popper{ margin-top: 0px !important; } .star { width: 100%; height: calc(100% - 40px); } .right{ width: 100%; height: 100%; overflow: hidden; .block{ background: linear-gradient(to top left, rgba(5, 30, 61, 0.62), #0D3F7E9D); border-radius: 5px; box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); height: 33%; width: 500px; display: flex; flex-wrap: wrap; margin: 10px; padding-top: 20px; } .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{ width: 50%; height: 50px; display: flex; justify-content: left; align-items: center; padding: 0 8%; } .item-text{ text-shadow: 0 0 2px #d1ffff; flex: 1; font-weight: bold; text-align: center; font-size: 18px; } .num{ text-shadow: 0 0 5px #ffb441; color: #ffb441; font-size: 20px; padding-top: 2px; } .unit{ color: #B3F3F6; font-size: 14px; margin-left: 1px; } .case-bg{ width: 100%; height: 100%; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; display: unset; .ball-bg{ position: relative; left: 20%; width: 60%; height: 100%; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .bottom-bg{ position: relative; left: 2%; top: 50%; width: 100%; height: 30%; background-repeat: no-repeat; -webkit-background-size: 100% 100%; background-size: 100% 100%; } .case-text{ font-weight: bold; position: relative; text-align: center; left: 0%; top: 45%; width: 100%; height: 30px; } } } </style>