1234 lines
30 KiB
Vue
1234 lines
30 KiB
Vue
<template>
|
||
<section class="AppSpecialPeopleDV">
|
||
<div class="map">
|
||
<!-- <div id="map" ref="rootmap" @click="hidePopup"/> -->
|
||
<ai-map v-bind="mapOptions" :map.sync="map" :lib.sync="mapLib" @click.native.stop="hidePopup"/>
|
||
</div>
|
||
<div class="AppSpecialPeopleDV-mask"></div>
|
||
<div class="summary" v-if="errorList.length">
|
||
<div class="summary-top">
|
||
<div class="title">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
|
||
<h3>人员信息</h3>
|
||
</div>
|
||
<div class="item" v-for="(item, index) in errorList" :key="index">
|
||
<img :src="'https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/warning-status'+item.item+'.png'" alt="">
|
||
<div class="item-right">
|
||
<div class="item-title">
|
||
<span
|
||
class="item-user">{{ item.name }}-<span>{{
|
||
dict.getLabel("warningTypeText", item.item)
|
||
}}</span>{{ item.itemValue }}</span>
|
||
<span class="item-time">{{ item.createTime }}</span>
|
||
</div>
|
||
<p>{{ item.gpsDesc }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="summary-bottom">
|
||
<div class="title">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
|
||
<h3>特殊人群</h3>
|
||
</div>
|
||
<div class="item" v-for="(item, index) in specialList" :key="index">
|
||
<div class="item-title">
|
||
<span class="item-text">{{ item.title }}</span>
|
||
<span class="item-num">{{ item.num }}</span>
|
||
</div>
|
||
<div class="item-bg">
|
||
<div class="item-active" :style="'width:' +item.percentage+'%'"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="user-info" v-if="showUserInfo">
|
||
<div class="content">
|
||
<div class="title">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg.png" alt="">
|
||
<h3>人员信息</h3>
|
||
</div>
|
||
<div class="user-bg">{{ formatName(checkUserInfo.name) }}</div>
|
||
<div class="user-name">{{ checkUserInfo.name }}</div>
|
||
<p class="text">{{ checkUserInfo.gpsDesc }}</p>
|
||
<p class="text">最后更新时间：{{ checkUserInfo.lastUpdateTime }}</p>
|
||
<p class="text mar-b20">
|
||
<span class="green-text">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/sb-icon.png"
|
||
alt=""><span>{{ checkUserInfo.onlineStatus == 1 ? '设备在线' : '设备离线' }}</span>
|
||
</span>
|
||
<span class="white-text">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/dl-icon.png"
|
||
alt="">剩余{{ checkUserInfo.electricQuantity }}%
|
||
</span>
|
||
</p>
|
||
<div class="pad-20">
|
||
<div class="tab">
|
||
<div class="item">
|
||
<div class="flex">
|
||
<div class="item-left">
|
||
<div class="img-bg">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/tw-icon.png" alt="">
|
||
</div>
|
||
体温
|
||
</div>
|
||
<div class="item-right" :style="checkHealthyInfo.abnormalStatustw == 1 ? 'color:#FF483C;' : ''">
|
||
{{ checkHealthyInfo.tw }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="flex">
|
||
<div class="item-left">
|
||
<div class="img-bg">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xl-icon.png" alt="">
|
||
</div>
|
||
心率
|
||
</div>
|
||
<div class="item-right" :style="checkHealthyInfo.abnormalStatusxl == 1 ? 'color:#FF483C;' : ''">
|
||
{{ checkHealthyInfo.xl }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="flex">
|
||
<div class="item-left">
|
||
<div class="img-bg">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xy-icon.png" alt="">
|
||
</div>
|
||
血压
|
||
</div>
|
||
<div class="item-right" :style="checkHealthyInfo.abnormalStatusxy == 1 ? 'color:#FF483C;' : ''">
|
||
{{ checkHealthyInfo.xy }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<div class="flex">
|
||
<div class="item-left">
|
||
<div class="img-bg">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/xyang-icon.png" alt="">
|
||
</div>
|
||
血氧
|
||
</div>
|
||
<div class="item-right" :style="checkHealthyInfo.abnormalStatusxyang == 1 ? 'color:#FF483C;' : ''">
|
||
{{ checkHealthyInfo.xyang }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mini-title">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/title-bg2.png" alt="">
|
||
<span class="btn" :class="'status'+checkUserInfo.abnormalStatus"
|
||
v-if="checkUserInfo.onlineStatus == 1">{{
|
||
dict.getLabel("intelligentGuardianshipAbnormalStatus", checkUserInfo.abnormalStatus)
|
||
}}</span>
|
||
<span class="btn status3" v-else>离线</span>
|
||
</div>
|
||
<div class="p-item">
|
||
<span class="label">姓名</span>
|
||
<span class="value">{{ checkUserInfo.name }}</span>
|
||
</div>
|
||
<div class="p-item">
|
||
<span class="label">性别</span>
|
||
<span class="value">{{ dict.getLabel("sex", checkUserInfo.sex) }}</span>
|
||
</div>
|
||
<div class="p-item">
|
||
<span class="label">年龄</span>
|
||
<span class="value">{{ idCard(checkUserInfo.idNumber) }}</span>
|
||
</div>
|
||
<div class="p-item">
|
||
<span class="label">所属地区</span>
|
||
<span class="value">{{ checkUserInfo.areaName }}</span>
|
||
</div>
|
||
<div class="p-item">
|
||
<span class="label">联系电话</span>
|
||
<span class="value">{{ checkUserInfo.phone }}</span>
|
||
</div>
|
||
<div class="mini-title">
|
||
<img src="https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/jhr-title.png" alt="">
|
||
</div>
|
||
<div class="p-item" v-for="(item, index) in checkUserInfo.guardians" :key="index" v-if="index < 2">
|
||
<span class="label">{{ item.guardianName }}</span>
|
||
<span class="value">{{ item.guardianPhone }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="btn">-->
|
||
<!-- <span class="status0">正常</span>-->
|
||
<!-- <span class="status3">离线</span>-->
|
||
<!-- <span class="status1">异常</span>-->
|
||
<!-- <span class="status2">求助</span>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
<div class="number-content">
|
||
<div class="item">
|
||
<p class="item-title">设备在线</p>
|
||
<div class="num-bg">
|
||
<span class="num">{{ totalInfo.onlineCount }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p class="item-title">监护人数</p>
|
||
<div class="num-bg">
|
||
<span class="num">{{ totalInfo.guardianshipCount }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p class="item-title">异常人数</p>
|
||
<div class="num-bg">
|
||
<span class="num">{{ totalInfo.abnormalCount }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<p class="item-title">SOS求助</p>
|
||
<div class="num-bg">
|
||
<span class="num">{{ totalInfo.sosCount }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "AppSpecialPeopleDV",
|
||
label: "双珠路大屏-特殊人群",
|
||
provide() {
|
||
return {
|
||
root: this
|
||
}
|
||
},
|
||
props: {
|
||
instance: Function,
|
||
dict: Object
|
||
},
|
||
data() {
|
||
return {
|
||
isFormDv: true,
|
||
isShowModel: false,
|
||
mapLib: null,
|
||
map: null,
|
||
checkUserInfo: {},
|
||
checkHealthyInfo: {},
|
||
showUserInfo: false,
|
||
errorList: [],
|
||
specialList: [
|
||
{
|
||
title: '精神病患者',
|
||
num: 87,
|
||
percentage: 20
|
||
},
|
||
{
|
||
title: '重点服务人员',
|
||
num: 324,
|
||
percentage: 40
|
||
},
|
||
{
|
||
title: '吸毒人员',
|
||
num: 95,
|
||
percentage: 30
|
||
},
|
||
{
|
||
title: '留守儿童',
|
||
num: 182,
|
||
percentage: 35
|
||
},
|
||
{
|
||
title: '上访重点户',
|
||
num: 190,
|
||
percentage: 37
|
||
},
|
||
{
|
||
title: '空巢老人',
|
||
num: 167,
|
||
percentage: 36
|
||
},
|
||
{
|
||
title: '特困人员',
|
||
num: 149,
|
||
percentage: 30
|
||
}
|
||
],
|
||
|
||
community: '',
|
||
isShowLayer: false,
|
||
isShowSearch: false,
|
||
isShowArea: false,
|
||
styleFunction: null,
|
||
areaData: {},
|
||
isImageMap: false,
|
||
isShowInfo: false,
|
||
areaId: '',
|
||
areaName: '',
|
||
list: [],
|
||
areaList: [],
|
||
info: {},
|
||
resident: null,
|
||
satellite: null,
|
||
zoom: 17,
|
||
chooseBuildId: '',
|
||
buildList: [],
|
||
searchList: [],
|
||
house: null,
|
||
pitch: 0,
|
||
center: [],
|
||
totalInfo: {},
|
||
statisticsInfo: {},
|
||
|
||
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState(['user']),
|
||
|
||
mapOptions() {
|
||
return {
|
||
areaId: this.user.info.areaId,
|
||
mapStyle: "amap://styles/e51987628aee5206d4c9ca8c6e98b4f7",
|
||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer', 'AMap.DistrictSearch'],
|
||
ops: {
|
||
pitch: this.pitch,
|
||
buildingAnimation: true,
|
||
zoom: this.zoom
|
||
}
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getTotalInfo()
|
||
this.dict.load('intelligentGuardianshipAbnormalStatus', 'sex', 'warningTypeText')
|
||
|
||
this.areaId = this.user.info.areaId
|
||
this.areaName = this.user.info.areaName
|
||
this.getCorpLocation()
|
||
},
|
||
methods: {
|
||
getCorpLocation() {
|
||
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res => {
|
||
if (res?.data) {
|
||
this.initMap(res.data);
|
||
}
|
||
})
|
||
},
|
||
|
||
getTotalInfo() {
|
||
this.instance.post("/app/appintelligentguardianshipalarm/list?size=4").then(res => {
|
||
if (res?.data.records) {
|
||
res.data.records.map((item) => {
|
||
item.createTime = item.createTime.substring(5, 16)
|
||
})
|
||
this.errorList = res.data.records
|
||
}
|
||
})
|
||
|
||
this.instance.post("/app/appintelligentguardianshipdevice/statistics").then(res => {
|
||
if (res?.data) {
|
||
this.totalInfo = res.data
|
||
}
|
||
})
|
||
},
|
||
|
||
changeZoom(isAdd) {
|
||
const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
|
||
this.map.setZoom(zoom, false, 600)
|
||
},
|
||
|
||
getUserInfo(id) {
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryDetailById`, null, {
|
||
params: {
|
||
id: id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
this.checkUserInfo = res.data
|
||
}
|
||
})
|
||
this.instance.post(`/app/appintelligentguardianshipdevice/queryMonitorList?type=1`, null, {
|
||
params: {
|
||
deviceId: id,
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
res.data.records.map((item) => {
|
||
if (item.item == 0) {
|
||
this.checkHealthyInfo.tw = item.itemValue
|
||
this.checkHealthyInfo.abnormalStatustw = item.abnormalStatus
|
||
}
|
||
if (item.item == 1) {
|
||
this.checkHealthyInfo.xl = item.itemValue
|
||
this.checkHealthyInfo.abnormalStatusxl = item.abnormalStatus
|
||
}
|
||
if (item.item == 2) {
|
||
this.checkHealthyInfo.xy = item.itemValue
|
||
this.checkHealthyInfo.abnormalStatusxy = item.abnormalStatus
|
||
}
|
||
if (item.item == 3) {
|
||
this.checkHealthyInfo.xyang = item.itemValue
|
||
this.checkHealthyInfo.abnormalStatusxyang = item.abnormalStatus
|
||
}
|
||
})
|
||
this.showUserInfo = true
|
||
}
|
||
})
|
||
},
|
||
|
||
toCenter() {
|
||
this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
|
||
},
|
||
|
||
renderClusterMarker(context) {
|
||
let el = `<div class="polymeric">
|
||
<div class="polymeric-container">
|
||
<p>${context.count}</p>
|
||
</div>
|
||
</div>`
|
||
|
||
let offset = new this.mapLib.Pixel(-9, -9)
|
||
context.marker.setContent(el)
|
||
context.marker.setOffset(offset)
|
||
context.marker.lnglat = context.clusterData[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 3 : this.map.getZoom(), e.target.lnglat, false, 400)
|
||
})
|
||
},
|
||
|
||
renderMarker(context) {
|
||
const buildId = context.data[0].id
|
||
var el = ''
|
||
if (context.data[0].onlineStatus == 1) { //在线
|
||
el = `<div class="mark online-status${context.data[0].abnormalStatus}" id="buildId-${buildId}">${this.formatName(context.data[0].name)}</div>`
|
||
} else { //离线
|
||
el = `<div class="mark online-status3" id="buildId-${buildId}">${this.formatName(context.data[0].name)}</div>`
|
||
}
|
||
|
||
context.marker.setContent(el);
|
||
context.marker.setAnchor("center")
|
||
context.marker.id = `${buildId}`
|
||
context.marker.lnglat = context.data[0].lnglat
|
||
|
||
context.marker.on('click', e => {
|
||
this.chooseBuildId = e.target.id
|
||
this.getUserInfo(e.target.id)
|
||
context.marker.setContent(el);
|
||
// document.querySelectorAll('.mark').forEach(el => {
|
||
// el.style['background-color'] = 'rgba(0, 39, 100, 0.5)'
|
||
// })
|
||
// document.querySelector(`#buildId-${e.target.id}`).style['background-color'] = '#2266FF'
|
||
// this.map.setZoomAndCenter(this.map.getZoom() < 22 ? this.map.getZoom() + 2 + 0.00001 : this.map.getZoom(), e.target.lnglat, false, 300)
|
||
})
|
||
},
|
||
|
||
addMakert(points) {
|
||
new this.mapLib.MarkerClusterer(this.map, points, {
|
||
gridSize: 60,
|
||
maxZoom: 15,
|
||
clusterByZoomChange: false,
|
||
renderClusterMarker: this.renderClusterMarker,
|
||
renderMarker: this.renderMarker
|
||
})
|
||
},
|
||
|
||
getUserList() {
|
||
this.instance.post('/app/appintelligentguardianshipdevice/list', null, {
|
||
params: {
|
||
current: 1,
|
||
size: 1000000
|
||
}
|
||
}).then(res => {
|
||
if (res.code === 0) {
|
||
console.log(res)
|
||
this.buildList = res.data.records
|
||
const points = res.data.records.map(item => {
|
||
return {
|
||
lnglat: [item.lng, item.lat],
|
||
id: item.id,
|
||
areaName: item.areaName,
|
||
name: item.name,
|
||
abnormalStatus: item.abnormalStatus,
|
||
onlineStatus: item.onlineStatus
|
||
}
|
||
})
|
||
|
||
this.addMakert(points)
|
||
|
||
if (points.length) {
|
||
this.getUserInfo(points[0].id)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
hidePopup() {
|
||
this.showUserInfo = false
|
||
},
|
||
|
||
switchLayer(flag) {
|
||
if (flag) {
|
||
this.map.addLayer(this.satellite)
|
||
} else {
|
||
this.map.removeLayer(this.satellite)
|
||
}
|
||
|
||
this.isImageMap = flag
|
||
},
|
||
|
||
initMap() {
|
||
if (this.map && this.mapLib) {
|
||
this.mapLib.plugin([
|
||
'AMap.ControlBar'
|
||
], () => {
|
||
// this.map.addControl(new this.mapLib.ControlBar({
|
||
// position: {
|
||
// right: '20px',
|
||
// bottom: '20px'
|
||
// },
|
||
// showControlButton: false
|
||
// }))
|
||
})
|
||
this.getUserList()
|
||
}
|
||
},
|
||
formatName(str) {
|
||
if (!str) return ''
|
||
|
||
return str.substr(str.length - 2)
|
||
},
|
||
idCard(UUserCard) {
|
||
//获取年龄
|
||
var myDate = new Date();
|
||
var month = myDate.getMonth() + 1;
|
||
var day = myDate.getDate();
|
||
var age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
|
||
if (UUserCard.substring(10, 12) < month || UUserCard.substring(10, 12) == month && UUserCard.substring(12, 14) <= day) {
|
||
age++;
|
||
}
|
||
return age
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.AppSpecialPeopleDV {
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
.AppSpecialPeopleDV-mask {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%);
|
||
}
|
||
|
||
.summary {
|
||
display: flex;
|
||
position: absolute;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
left: 40px;
|
||
top: 0;
|
||
z-index: 1;
|
||
height: 100%;
|
||
padding: 40px 0;
|
||
width: 440px;
|
||
|
||
.summary-top {
|
||
width: 100%;
|
||
height: 392px;
|
||
background: rgba(7, 11, 35, 0.5);
|
||
border: 1px solid #14345F;
|
||
margin-bottom: 20px;
|
||
// overflow-y: scroll;
|
||
.item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
margin-bottom: 20px;
|
||
|
||
img {
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.item-right {
|
||
width: 328px;
|
||
|
||
.item-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 4px 0 2px 0;
|
||
|
||
.item-user {
|
||
height: 24px;
|
||
font-size: 18px;;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 24px;
|
||
}
|
||
|
||
.item-time {
|
||
height: 19px;
|
||
font-size: 14px;
|
||
color: #82C5FF;
|
||
line-height: 19px;
|
||
}
|
||
|
||
.color-FF483C {
|
||
color: #FF483C;
|
||
}
|
||
}
|
||
|
||
p {
|
||
width: 100%;
|
||
height: 19px;
|
||
font-size: 14px;
|
||
color: #82C5FF;
|
||
line-height: 19px;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.summary-bottom {
|
||
width: 100%;
|
||
height: calc(100% - 412px);
|
||
background: rgba(7, 11, 35, 0.5);
|
||
border: 1px solid #14345F;
|
||
// overflow-y: scroll;
|
||
.item {
|
||
margin-bottom: 12px;
|
||
padding: 0 10px;
|
||
|
||
.item-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 6px;
|
||
|
||
.item-text {
|
||
height: 20px;
|
||
font-size: 15px;
|
||
font-family: MicrosoftYaHeiSemibold;
|
||
color: #82C5FF;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.item-num {
|
||
height: 20px;
|
||
font-size: 20px;
|
||
font-family: D-DIN-Bold, D-DIN;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.item-bg {
|
||
width: 100%;
|
||
height: 8px;
|
||
background-color: #343D59;
|
||
position: relative;
|
||
|
||
.item-active {
|
||
position: absolute;
|
||
height: 8px;
|
||
background: linear-gradient(270deg, #0BBCFF 0%, #1E5DFF 100%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
position: relative;
|
||
margin-bottom: 10px;
|
||
|
||
img {
|
||
width: 178px;
|
||
height: 62px;
|
||
}
|
||
|
||
h3 {
|
||
height: 48px;
|
||
line-height: 48px;
|
||
padding-left: 30px;
|
||
font-size: 20px;
|
||
color: #fff;;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
position: absolute;
|
||
justify-content: space-between;
|
||
flex-direction: column;
|
||
right: 40px;
|
||
top: 0;
|
||
z-index: 1;
|
||
height: 100%;
|
||
padding: 40px 0;
|
||
width: 400px;
|
||
|
||
.content {
|
||
width: 400px;
|
||
height: 800px;
|
||
margin-bottom: 30px;
|
||
background: rgba(7, 11, 35, 0.5);
|
||
border: 1px solid #14345F;
|
||
|
||
.user-bg {
|
||
margin: 20px 0 10px 174px;
|
||
width: 50px;
|
||
height: 50px;
|
||
text-align: center;
|
||
line-height: 50px;
|
||
background: rgba(18, 89, 155, 0.5);
|
||
box-shadow: 0 0 12px 8px #2042FF;
|
||
border: 1px solid #559DFF;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHeiSemibold;
|
||
color: #FFFFFF;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.user-name {
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 21px;
|
||
font-size: 16px;;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 21px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 13px;
|
||
|
||
color: #82C5FF;
|
||
line-height: 17px;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
|
||
span {
|
||
font-size: 12px;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 4px;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.green-text {
|
||
color: #74FF66;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.white-text {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.mar-b20 {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.pad-20 {
|
||
padding: 0 20px;
|
||
|
||
.tab {
|
||
margin-bottom: 6px;
|
||
overflow: hidden;
|
||
|
||
.item {
|
||
width: 174px;
|
||
height: 50px;
|
||
background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
|
||
border-radius: 4px;
|
||
padding: 14px 10px 0;
|
||
box-sizing: border-box;
|
||
float: left;
|
||
margin-bottom: 10px;
|
||
|
||
.flex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.item-left {
|
||
height: 22px;
|
||
font-size: 14px;
|
||
|
||
color: #82C5FF;
|
||
line-height: 22px;
|
||
|
||
.img-bg {
|
||
display: inline-block;
|
||
width: 24px;
|
||
height: 24px;
|
||
border-radius: 50%;
|
||
background: rgba(27, 124, 214, 0.2);
|
||
box-shadow: 0 0 8px 2px #2081FF;
|
||
margin-right: 8px;
|
||
vertical-align: middle;
|
||
|
||
img {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 4px 0 0 4px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item-right {
|
||
height: 22px;
|
||
font-size: 16px;
|
||
font-family: Arial-BoldMT, Arial;
|
||
font-weight: normal;
|
||
color: #FFFFFF;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
.item:nth-of-type(2n-1) {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.mini-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 18px;
|
||
|
||
img {
|
||
width: 169px;
|
||
height: 30px;
|
||
margin-left: -6px;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-block;
|
||
width: 52px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.p-item {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 22px;
|
||
padding: 9px 12px;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
|
||
.label {
|
||
color: #82C5FF;
|
||
}
|
||
|
||
.value {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.p-item:nth-of-type(2n-1) {
|
||
background: linear-gradient(270deg, rgba(119, 169, 255, 0.1) 0%, rgba(66, 112, 255, 0.25) 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
text-align: right;
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 52px;
|
||
height: 24px;
|
||
line-height: 24px;
|
||
border-radius: 12px;
|
||
font-size: 14px;
|
||
|
||
text-align: center;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
|
||
.status0 {
|
||
border: 1px solid #74FF66;
|
||
color: #74FF66;
|
||
}
|
||
|
||
.status3 {
|
||
border: 1px solid #FFCF54;
|
||
color: #FFCF54;
|
||
}
|
||
|
||
.status1 {
|
||
border: 1px solid #FF483C;
|
||
color: #FF483C;
|
||
}
|
||
|
||
.status2 {
|
||
border: 1px solid #FF6DF1;
|
||
color: #FF6DF1;
|
||
}
|
||
}
|
||
|
||
.number-content {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 50%;
|
||
margin-left: -404px;
|
||
top: 10px;
|
||
z-index: 1;
|
||
|
||
.item {
|
||
display: inline-block;
|
||
width: 172px;
|
||
height: 160px;
|
||
margin-right: 40px;
|
||
text-align: center;
|
||
|
||
.item-title {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
line-height: 32px;
|
||
background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.num-bg {
|
||
width: 160px;
|
||
height: 160px;
|
||
margin-left: 16px;
|
||
background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png);
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
margin-top: -76px;
|
||
|
||
.num {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 30px;
|
||
width: 100%;
|
||
text-align: center;
|
||
height: 50px;
|
||
font-size: 40px;
|
||
font-family: D-DIN-Bold, D-DIN;
|
||
font-weight: bold;
|
||
line-height: 54px;
|
||
background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item:nth-last-of-type(1) {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
|
||
::v-deep .ai-list__content--right-wrapper {
|
||
height: 100%;
|
||
margin: 0 !important;
|
||
background-color: transparent !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
|
||
.map {
|
||
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
||
display: none !important;
|
||
}
|
||
|
||
::v-deep .amap-icon {
|
||
width: 40px !important;
|
||
height: 40px !important;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-menu {
|
||
position: absolute;
|
||
bottom: 52px;
|
||
left: 30px;
|
||
z-index: 11;
|
||
|
||
.map-layers__wrapper {
|
||
display: none;
|
||
position: absolute;
|
||
bottom: 28px;
|
||
left: 0;
|
||
padding-bottom: 4px;
|
||
}
|
||
|
||
.map-layers {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 180px;
|
||
height: 66px;
|
||
margin-bottom: 4px;
|
||
padding: 5px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
|
||
.map-layers__item {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 56px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
border: 1px solid transparent;
|
||
|
||
&.map-layers__item-active {
|
||
border: 1px solid #366FFF;
|
||
}
|
||
|
||
.map-layers__item--tag {
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 32px;
|
||
height: 18px;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
border: 1px solid transparent;
|
||
background: transparent;
|
||
|
||
&.map-layers__item--tag-active {
|
||
background: #366FFF;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-menu__item {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-bottom: 10px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
||
border-radius: 2px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&:hover {
|
||
.map-layers__wrapper {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
i {
|
||
font-size: 16px;
|
||
color: #89b;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.map {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
|
||
::v-deep .ol-zoom {
|
||
display: none !important;
|
||
top: inherit !important;
|
||
bottom: 0.5em !important;
|
||
}
|
||
|
||
div {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#map {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
::v-deep .polymeric {
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
&.polymeric-active {
|
||
.polymeric-container {
|
||
background: #F46159;
|
||
}
|
||
|
||
&::after {
|
||
background-color: #F46159;
|
||
}
|
||
}
|
||
|
||
&::after {
|
||
position: absolute;
|
||
z-index: -1;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
-webkit-animation: warn 1s ease-out 0s infinite;
|
||
animation: warn 1s ease-out 0s infinite;
|
||
background: rgba(54, 165, 255, 1);
|
||
transform: translate(-50%, -50%);
|
||
content: " ";
|
||
}
|
||
|
||
.polymeric-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 62px;
|
||
height: 62px;
|
||
border-radius: 50%;
|
||
background: rgba(54, 165, 255, 1);
|
||
|
||
p {
|
||
text-align: center;
|
||
width: 58px;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
p:first-child {
|
||
font-size: 14px;
|
||
}
|
||
|
||
h2 {
|
||
color: #fff;
|
||
font-weight: normal;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .mark {
|
||
width: 56px;
|
||
height: 56px;
|
||
text-align: center;
|
||
line-height: 56px;
|
||
border-radius: 50%;
|
||
font-size: 16px;
|
||
font-family: MicrosoftYaHeiSemibold;
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .online-status0 {
|
||
background: rgba(8, 73, 35, 0.8);
|
||
box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #15BE55;
|
||
border: 1px solid #22FF81;
|
||
}
|
||
|
||
::v-deep .online-status1 {
|
||
background: rgba(79, 14, 7, 0.8);
|
||
box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #C60E0E;
|
||
border: 1px solid #FF6969;
|
||
}
|
||
|
||
::v-deep .online-status2 {
|
||
background: rgba(96, 8, 102, 0.8);
|
||
box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #C312CA;
|
||
border: 1px solid #FF69DD;
|
||
}
|
||
|
||
::v-deep .online-status3 {
|
||
background: rgba(108, 94, 14, 0.8);
|
||
box-shadow: 0 4px 4px 0 #000000, 0 0 8px 4px #D1A818;
|
||
border: 1px solid #FFDF54;
|
||
}
|
||
|
||
@-webkit-keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.7);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
@keyframes warn {
|
||
0% {
|
||
transform: scale(.5);
|
||
opacity: 1
|
||
}
|
||
|
||
30% {
|
||
opacity: .5
|
||
}
|
||
|
||
to {
|
||
transform: scale(1.7);
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|