<template>
<div class="bottom" :style="{ left: `${windowPostion.x}px`, top: `${windowPostion.y}px`, height:heightDict[gdInfo.typename] }">
<i class="el-icon-close close-pop" @click="$emit('close')" />
<div class="list-down" style="width: 100%;margin: 0 auto;">
<div class="list-item">
<div style="height: 100%;width:100%;">
<!-- <i class="el-icon-location item-title" :title="gdInfo.eventname"><span style="margin-left: 10px">{{gdInfo.eventname}}</span></i> -->
<div style="width: 100%" v-if="gdInfo.typename === '门禁'">
<i class="el-icon-menu item-line one-line" style="width: 100%;"><span style="margin-left: 5px">{{ `${gdInfo.name}门禁点` }}</span></i>
<i class="el-icon-time item-line" style="width: 100%;"><span style="margin-left: 5px">时间： 2024-11-27</span></i>
<i class="el-icon-s-order item-line" style="width: 100%;"><span style="margin-left: 5px">进/出人口数: <span
style="color: #12C803;">200</span>/<span style="color: #F29505;">196</span></span></i>
<i class="el-icon-location item-line" style="width: 100%;" ><span style="margin-left: 5px">位置:
</span></i>
</div>
<div style="width: 100%" v-if="gdInfo.typename === '园区'">
<i class="el-icon-menu item-line one-line" style="width: 100%;"><span style="margin-left: 5px">{{ `${gdInfo.name}园区` }}</span></i>
<i class="el-icon-location item-line" style="width: 100%;" ><span style="margin-left: 5px">位置:
</span></i>
</div>
<div style="width: 100%" v-if="gdInfo.typename === '食堂'">
<i class="el-icon-menu item-line one-line" style="width: 100%;"><span style="margin-left: 5px">{{ `${gdInfo.name}食堂` }}</span></i>
<i class="el-icon-time item-line" style="width: 100%;"><span style="margin-left: 5px">采购时间： 2024-11-27</span></i>
<i class="el-icon-s-order item-line" style="width: 100%;"><span style="margin-left: 5px">采购金额: </span></i>
<i class="el-icon-location item-line" style="width: 100%;" ><span style="margin-left: 5px">位置:
</span></i>
</div>
<div style="width: 100%" v-if="gdInfo.typename === '场馆'">
<i class="el-icon-menu item-line one-line" style="width: 100%;"><span style="margin-left: 5px">{{ `${gdInfo.name}场馆` }}</span></i>
<i class="el-icon-menu item-line one-line" style="width: 100%;" ><span style="margin-left: 5px">场馆类型: 足球场
</span></i>
<i class="el-icon-s-order item-line" style="width: 100%;"><span style="margin-left: 5px">可用量/总用量: 2/5</span></i>
<i class="el-icon-s-order item-line" style="width: 100%;"><span style="margin-left: 5px">今日收入: </span></i>
<i class="el-icon-s-order item-line" style="width: 100%;"><span style="margin-left: 5px">累计收入: </span></i>
<i class="el-icon-location item-line" style="width: 100%;" ><span style="margin-left: 5px">位置:
</span></i>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { showPositin } from '@/utils/freedo/index'
export default {
name: 'videoPop',
data() {
return {
titleImg: require('@/assets/images/popup/title.png'), // 背景图片
titleAll: require('@/assets/images/popup/title-all.png'),// 背景图片
list: ['', '', '', ''],
gdInfo: {},
windowPostion: { x: window.innerWidth - 165, y: window.innerHeight }, // 弹窗的位置
defaultPhoto: require('@/assets/images/global_images/photo_error.png'),
statusColor: {
1: '#a1a1a1',
2: '#f8e31a',
3: '#5ab1fc',
4: '#f89835',
5: '#3def83',
},
urgencyColor: {
'C': '#2f8d00',
'B': '#c4ad00',
'A': '#8d0000'
},
heightDict: {
'门禁': '115px',
'场馆': '165px',
'食堂': '120px',
'园区': '75px',
}
}
},
methods: {
initData(item) {
console.log(item, '123')
if (!item.lng || !item.lat) { return }
showPositin(item.lng, item.lat)
// 弹窗位置
if (window.localStorage.getItem('mousePosition')) {
this.windowPostion = {
x: window.innerWidth / 2 - 165,
y: window.innerHeight / 2
}
}
else {
this.windowPostion = {
x: window.innerWidth / 2 - 165,
y: window.innerHeight / 2
}
}
this.gdInfo = item
// window.addEventListener('mousemove', (event) => {
// this.windowPostion = {
// x: event.clientX - 165,
// y: event.clientY - 250
// }
// })
}
},
// mounted(){
// }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.children-item {
width: 96% !important;
margin: 10px auto !important;
color: #fff !important;
// border: 1px solid #fff;
border-radius: 6px;
padding: 10px;
box-sizing: border-box;
}
.bottom {
z-index: 111111111111;
width: 100%;
height: 160px;
width: 26rem;
position: absolute;
bottom: 10px;
left: 0px;
display: flex;
overflow: hidden;
padding: 10px;
padding-right: 20px;
background: url("../../../assets/images/popup/case/事件看板背景.png") !important;
background-size: 100% 100% !important;
overflow: hidden;
.block {
flex: 1;
height: 100%;
display: flex;
flex-wrap: wrap;
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);
margin: 0px 5px;
flex-direction: column;
}
.block1 {
width: 500px;
height: 100%;
display: flex;
flex-wrap: wrap;
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);
margin: 0px 10px;
flex-direction: column;
}
.title {
text-shadow: 0 0 5px #d1ffff;
height: 35px;
float: left;
text-align: left;
background-repeat: no-repeat;
-webkit-background-size: 100% 100%;
background-size: 100% 100% !important;
color: white;
font-weight: bold;
padding-top: 4px;
padding-left: 30px;
font-family: 黑体;
letter-spacing: 1px;
}
.item-text {
text-shadow: 0 0 2px #d1ffff;
flex: 1;
font-weight: bold;
text-align: center;
font-size: 18px;
}
.base-map-image {
width: 60px;
height: 60px;
}
.num {
text-shadow: 0 0 5px #ffb441;
color: #ffb441;
font-size: 20px;
padding-top: 2px;
}
.unit {
color: #B3F3F6;
font-size: 14px;
margin-left: 1px;
}
.item {
width: 25%;
height: 32%;
display: flex;
justify-content: left;
align-items: center;
}
}
.list-down {
// margin-top: 10px;
// overflow-y: scroll;
width: 100%;
// height: calc(100% - 6rem);
padding: 0px 10px;
}
.list-item {
width: calc(100% - 35px);
// height: 12rem;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
font-size: 1.4rem;
padding: 0.8rem 10px;
margin: 0.2rem 0rem;
letter-spacing: 2px;
cursor: pointer;
background-size: 100% 100% !important;
color: white;
border-top: 2px solid #0494f3;
border-radius: 10px;
}
.list-item:hover {
background-size: cover !important;
background: url('../../../assets/images/right/选中.png') !important;
background-size: 100% 100% !important;
}
.item-title {
width: 90%;
text-align: left;
margin-bottom: 5px;
white-space: nowrap;
/* 防止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 文本显示为省略号 */
}
.item-line {
display: flex;
font-size: 1.2rem;
color: #aed2f3;
padding-left: 20px;
line-height: 1.8rem;
width: 95%;
word-break: break-all;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
/* 设置最大行数 */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.colorbox-text {
background-color: #0a88fc;
border-radius: 10px;
color: white;
font-size: 1rem;
padding: 0rem 0.4rem;
margin-left: 5px;
text-align: center;
width: 5rem;
margin-bottom: 4px;
cursor: pointer;
}
.one-line {
display: block !important;
white-space: nowrap;
/* 防止换行 */
overflow: hidden;
/* 溢出隐藏 */
text-overflow: ellipsis;
/* 文本显示为省略号 */
}
</style>
