<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-03-02 09:39:32
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-13 16:43:57
|
* @FilePath: \srs-police-affairs\src\components\map\components\activityPolicePopup.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
|
-->
|
<template>
|
<div>
|
<div v-if="activityPolicePopup" class="popup-dom" id="ActivityPoliceDomBox">
|
<div style="transform: translate(-50%, 0);">
|
<!-- 样式自己修改 -->
|
<div class="content" :class="{ 'scale-dom': scaleDomFlag }">
|
|
<div class="data-box"
|
v-if="activityPolicePopupData.label != 'none' && activityPolicePopupData.billboard == false">
|
<div class="line">
|
<div class="name">警车编号：</div>
|
<div class="value">{{ activityPolicePopupData.label }}</div>
|
</div>
|
<div class="line">
|
<div class="name">警车型号：</div>
|
<div class="value"> {{ activityPolicePopupData.carType }}</div>
|
</div>
|
<div class="line">
|
<div class="name">车牌号：</div>
|
<div class="value"> {{ activityPolicePopupData.carNo }}</div>
|
</div>
|
<div class="line">
|
<div class="name">单位名称：</div>
|
<div class="value"> {{ activityPolicePopupData.unitName }}</div>
|
</div>
|
<div class="line">
|
<div class="name">单位编号：</div>
|
<div class="value"> {{ activityPolicePopupData.unitCode }}</div>
|
</div>
|
<div class="line">
|
<div class="name">所属辖区：</div>
|
<div class="value"> {{ activityPolicePopupData.deptName }}</div>
|
</div>
|
<div class="line">
|
<div class="value"> {{ activityPolicePopupData.Data.data.remark.trim() == '' ? '暂无描述' :
|
activityPolicePopupData.Data.data.remark }}</div>
|
</div>
|
</div>
|
|
<div class="data-box"
|
v-if="activityPolicePopupData.policeStationName != 'none' && activityPolicePopupData.billboard == false">
|
<div class="line">
|
<div class="name">警员姓名：</div>
|
<div class="value"> {{ activityPolicePopupData.policeData.name }}</div>
|
</div>
|
<div class="line">
|
<div class="name">警员编号：</div>
|
<div class="value"> {{ activityPolicePopupData.policeData.serialNumber }}</div>
|
</div>
|
<div class="line">
|
<div class="name">联系电话：</div>
|
<div class="value"> {{ activityPolicePopupData.policeData.contact }}</div>
|
</div>
|
<div class="line">
|
<div class="name">单位名称：</div>
|
<div class="value">{{ activityPolicePopupData.policeStationName }}</div>
|
</div>
|
<div class="line">
|
<div class="name">单位编号：</div>
|
<div class="value"> {{ activityPolicePopupData.policeData.unitCode }}</div>
|
</div>
|
<div class="line">
|
<div class="name">所属辖区：</div>
|
<div class="value"> {{ activityPolicePopupData.policeData.deptName }}</div>
|
</div>
|
<div class="line">
|
<div class="value"> {{ activityPolicePopupData.Data.data.remark.trim() == '' ? '暂无描述' :
|
activityPolicePopupData.Data.data.remark }}</div>
|
</div>
|
</div>
|
|
<div class="data-box" v-if="activityPolicePopupData.billboard == true">
|
<div class="line">
|
<div class="value"> {{ activityPolicePopupData.Data.item.remark.trim() == '' ? '暂无描述' :
|
activityPolicePopupData.Data.item.remark }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from 'vuex'
|
|
export default {
|
name: 'activityPolicePopup',
|
|
inject: ["getWidth", 'userInfo'],
|
|
data () {
|
return {
|
scaleDomFlag: false
|
}
|
},
|
|
computed: {
|
...mapGetters([
|
'activityPolicePopup',
|
'activityPolicePopupData'
|
])
|
},
|
|
mounted () {
|
|
if (this.getWidth() > 7000) {
|
this.scaleDomFlag = true
|
} else {
|
this.scaleDomFlag = false
|
}
|
|
},
|
|
methods: {
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.popup-dom {
|
position: fixed;
|
top: -16px;
|
left: 0;
|
z-index: 1 !important;
|
|
.scale-dom {
|
transform: scale(3);
|
transform-origin: left;
|
}
|
|
.content {
|
background: $bg-color;
|
border-radius: 4px;
|
color: #fff;
|
|
.data-box {
|
padding: 10px;
|
|
.line {
|
display: flex;
|
justify-self: start;
|
|
.name {
|
text-align: justify;
|
}
|
}
|
}
|
}
|
|
}
|
</style>
|
