From b27a8931ebfb2264c45858c60ded692bbedec944 Mon Sep 17 00:00:00 2001
From: linwe <872216996@qq.com>
Date: Fri, 20 Dec 2024 18:03:49 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/map/components/mapPopup.vue | 687 ++++++++++++++++++++++++++++----------------------------
1 files changed, 347 insertions(+), 340 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 1464b90..b565571 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,117 +1,119 @@
<template>
- <div>
- <div v-if="detailsPopup.showBox" class="divForms-dom" id="divFormsDomBox">
- <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
- <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
- <div class="divForms-wrap">
- <div class="area">
- <div class="arrow-lt"></div>
- <div class="b-t"></div>
- <div class="b-r"></div>
- <div class="b-b"></div>
- <div class="b-l"></div>
- <div class="arrow-rb"></div>
- <div class="label-wrap">
- <div class="title">
- 警情信息
-
- <div class="close" @click="closePopup" title="关闭"></div>
- </div>
- <div class="change-btn" v-show="detailsPopup.showBtn">
- <div @click="currentBtn = '接警信息'" :class="{ on: currentBtn == '接警信息' }">接警信息</div>
- <div @click="currentBtnChange('出警信息')" :class="{ on: currentBtn == '出警信息' }">出警信息</div>
- </div>
-
- <div v-show="currentBtn == '接警信息'" class="label-content">
- <div class="item">
- <div>接警单位:</div>
- <div>{{ dataPopup.JJDWMC }}</div>
- </div>
- <div class="item">
- <div>接警员:</div>
- <div>{{ dataPopup.JJYXM }}</div>
- </div>
- <div class="item">
- <div>报警时间:</div>
- <div>{{ dataPopup.BJSJ }}</div>
- </div>
- <div class="item">
- <div>报警人:</div>
- <div>{{ dataPopup.BJRXM }}</div>
- </div>
- <div class="item">
- <div>联系电话:</div>
- <div>{{ dataPopup.LXDH }}</div>
- </div>
- <div class="item">
- <div>报警内容:</div>
- <div :title="dataPopup.BJNR">{{ dataPopup.BJNR }}</div>
- </div>
- <div class="item">
- <div>事发地址:</div>
- <div :title="dataPopup.SFDZ">{{ dataPopup.SFDZ }}</div>
- </div>
- <div class="item">
- <div>报警类型:</div>
- <div>{{ dataPopup.BJLX }}</div>
- </div>
- <div class="item">
- <div>备注:</div>
- <div>{{ dataPopup.MEMO }}</div>
- </div>
- </div>
-
- <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) != '{}'" class="label-content">
- <div class="item">
- <div>处警单位:</div>
- <div>{{ CJdata.CJDWMC }}</div>
- </div>
- <div class="item">
- <div>处警员:</div>
- <div>{{ CJdata.CJYXM }}</div>
- </div>
- <div class="item">
- <div>接警时间:</div>
- <div>{{ CJdata.JJSJ }}</div>
- </div>
- <div class="item">
- <div>出动人员:</div>
- <div>{{ CJdata.CDRY }}</div>
- </div>
- <div class="item">
- <div>出动车辆:</div>
- <div>{{ CJdata.CDCL }}</div>
- </div>
- <div class="item">
- <div>到达现场时间:</div>
- <div>{{ CJdata.DDXCSJ }}</div>
- </div>
- <div class="item">
- <div>处理完毕时间:</div>
- <div>{{ CJdata.CLWBSJ }}</div>
- </div>
- <div class="item">
- <div>处警类型:</div>
- <div>{{ CJdata.CJLX }}</div>
- </div>
- <div class="item">
- <div>备注:</div>
- <div>{{ CJdata.MEMO }}</div>
- </div>
- </div>
-
- <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) == '{}'"
- class="label-content no-data">暂无数据</div>
- </div>
- </div>
- <div class="b-t-l"></div>
- <div class="b-b-r"></div>
- </div>
- <div class="arrow"></div>
+ <div>
+ <div v-if="detailsPopup.showBox" class="divForms-dom" id="divFormsDomBox">
+ <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
+ <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }">
+ <div class="divForms-wrap">
+ <div class="area">
+ <div class="arrow-lt"></div>
+ <div class="b-t"></div>
+ <div class="b-r"></div>
+ <div class="b-b"></div>
+ <div class="b-l"></div>
+ <div class="arrow-rb"></div>
+ <div class="label-wrap">
+ <div class="title">
+ 警情信息
+ <div class="details-btn" @click="siteClick" title="详情"></div>
+ <div class="close" @click="closePopup" title="关闭"></div>
</div>
+ <div class="change-btn" v-show="detailsPopup.showBtn">
+ <div @click="currentBtn = '接警信息'" :class="{ on: currentBtn == '接警信息' }">接警信息</div>
+ <div @click="currentBtnChange('出警信息')" :class="{ on: currentBtn == '出警信息' }">出警信息</div>
+ </div>
+
+ <div v-show="currentBtn == '接警信息'" class="label-content">
+ <div class="item">
+ <div>接警单位:</div>
+ <div>{{ dataPopup.JJDWMC }}</div>
+ </div>
+ <div class="item">
+ <div>接警员:</div>
+ <div>{{ dataPopup.JJYXM }}</div>
+ </div>
+ <div class="item">
+ <div>报警时间:</div>
+ <div>{{ dataPopup.BJSJ }}</div>
+ </div>
+ <div class="item">
+ <div>报警人:</div>
+ <div>{{ dataPopup.BJRXM }}</div>
+ </div>
+ <div class="item">
+ <div>联系电话:</div>
+ <div>{{ dataPopup.LXDH }}</div>
+ </div>
+ <div class="item">
+ <div>报警内容:</div>
+ <div :title="dataPopup.BJNR">{{ dataPopup.BJNR }}</div>
+ </div>
+ <div class="item">
+ <div>事发地址:</div>
+ <div :title="dataPopup.SFDZ">{{ dataPopup.SFDZ }}</div>
+ </div>
+ <div class="item">
+ <div>报警类型:</div>
+ <div>{{ dataPopup.BJLX }}</div>
+ </div>
+ <div class="item">
+ <div>备注:</div>
+ <div>{{ dataPopup.MEMO }}</div>
+ </div>
+ </div>
+
+ <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) != '{}'" class="label-content">
+ <div class="item">
+ <div>处警单位:</div>
+ <div>{{ CJdata.CJDWMC }}</div>
+ </div>
+ <div class="item">
+ <div>处警员:</div>
+ <div>{{ CJdata.CJYXM }}</div>
+ </div>
+ <div class="item">
+ <div>接警时间:</div>
+ <div>{{ CJdata.JJSJ }}</div>
+ </div>
+ <div class="item">
+ <div>出动人员:</div>
+ <div>{{ CJdata.CDRY }}</div>
+ </div>
+ <div class="item">
+ <div>出动车辆:</div>
+ <div>{{ CJdata.CDCL }}</div>
+ </div>
+ <div class="item">
+ <div>到达现场时间:</div>
+ <div>{{ CJdata.DDXCSJ }}</div>
+ </div>
+ <div class="item">
+ <div>处理完毕时间:</div>
+ <div>{{ CJdata.CLWBSJ }}</div>
+ </div>
+ <div class="item">
+ <div>处警类型:</div>
+ <div>{{ CJdata.CJLX }}</div>
+ </div>
+ <div class="item">
+ <div>备注:</div>
+ <div>{{ CJdata.MEMO }}</div>
+ </div>
+ </div>
+
+ <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) == '{}'" class="label-content no-data">暂无数据
+ </div>
+ </div>
</div>
+ <div class="b-t-l"></div>
+ <div class="b-b-r"></div>
+ </div>
+ <div class="arrow"></div>
</div>
+ </div>
</div>
+
+ <police-infor-dialog ref="policeInforDialog"></police-infor-dialog>
+ </div>
</template>
<script>
@@ -120,123 +122,127 @@
import { getActAsPoliceList } from "@/api/home/index.js"
export default {
- name: 'mapPopup',
+ name: 'mapPopup',
- inject: ["getWidth", 'userInfo'],
+ inject: ["getWidth", 'userInfo'],
- data () {
- return {
- currentBtn: '接警信息',
- CJdata: {},
- scaleDomFlag: false
- }
- },
-
- computed: {
- ...mapGetters([
- 'detailsPopup',
- 'dataPopup'
- ])
- },
-
- watch: {
- detailsPopup: {
- handler (newData, oldData) {
- if (newData.showBox == false) {
- this.currentBtn = '接警信息'
- }
- }
- }
- },
-
- mounted () {
-
- if (this.getWidth() > 7000) {
- this.scaleDomFlag = true
- } else {
- this.scaleDomFlag = false
- }
-
- },
-
- methods: {
- closePopup () {
- this.currentBtn = '接警信息'
- this.$store.commit('SET_DETAILSPOPUP', {
- showBox: false,
- showBtn: false
- })
- },
-
- currentBtnChange (type) {
- this.currentBtn = type
-
- this.CJdata = {}
-
- getActAsPoliceList(this.dataPopup.JJDBH, this.userInfo.dept_id).then(res => {
- if (res.data.data.records.length > 0) {
- this.CJdata = res.data.data.records[0]
- }
- })
- },
-
- popupDetailShow () {
- if (this.detailsPopup.openMenu != '' && this.detailsPopup.openMenu == 'policeInfor') {
- this.$EventBus.$emit('PoliceInforSiteClick', this.dataPopup)
- } else {
- this.detailsPopup.showBtn == true ?
- this.$EventBus.$emit('policeSituationSiteClick', this.dataPopup) :
- this.$EventBus.$emit('housingPoliceSiteClick', this.dataPopup)
- }
- }
+ data () {
+ return {
+ currentBtn: '接警信息',
+ CJdata: {},
+ scaleDomFlag: false
}
+ },
+
+ computed: {
+ ...mapGetters([
+ 'detailsPopup',
+ 'dataPopup'
+ ])
+ },
+
+ watch: {
+ detailsPopup: {
+ handler (newData, oldData) {
+ if (newData.showBox == false) {
+ this.currentBtn = '接警信息'
+ }
+ }
+ }
+ },
+
+ mounted () {
+
+ if (this.getWidth() > 7000) {
+ this.scaleDomFlag = true
+ } else {
+ this.scaleDomFlag = false
+ }
+
+ },
+
+ methods: {
+ closePopup () {
+ this.currentBtn = '接警信息'
+ this.$store.commit('SET_DETAILSPOPUP', {
+ showBox: false,
+ showBtn: false
+ })
+ },
+
+ currentBtnChange (type) {
+ this.currentBtn = type
+
+ this.CJdata = {}
+
+ getActAsPoliceList(this.dataPopup.JJDBH, this.userInfo.dept_id).then(res => {
+ if (res.data.data.records.length > 0) {
+ this.CJdata = res.data.data.records[0]
+ }
+ })
+ },
+
+ popupDetailShow () {
+ if (this.detailsPopup.openMenu != '' && this.detailsPopup.openMenu == 'policeInfor') {
+ this.$EventBus.$emit('PoliceInforSiteClick', this.dataPopup)
+ } else {
+ this.detailsPopup.showBtn == true ?
+ this.$EventBus.$emit('policeSituationSiteClick', this.dataPopup) :
+ this.$EventBus.$emit('housingPoliceSiteClick', this.dataPopup)
+ }
+ },
+
+ siteClick () {
+ this.$refs.policeInforDialog.initOpen(this.dataPopup)
+ },
+ }
}
</script>
<style lang="scss" scoped>
.divForms-dom {
- position: fixed;
- left: 0;
- z-index: 1 !important;
+ position: fixed;
+ left: 0;
+ z-index: 1 !important;
- .scale-dom {
- transform: scale(3);
- transform-origin: left;
- }
+ .scale-dom {
+ transform: scale(3);
+ transform-origin: left;
+ }
}
.divForms .arrow {
- position: absolute;
- bottom: 50%;
- left: 0;
- width: 45px;
- height: 2px;
- transform: rotate(-45deg) translate(5px, -15px);
- background-color: #28bbf0;
+ position: absolute;
+ bottom: 50%;
+ left: 0;
+ width: 45px;
+ height: 2px;
+ transform: rotate(-45deg) translate(5px, -15px);
+ background-color: #28bbf0;
}
.divForms-theme .area {
- background-image: linear-gradient(135deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 50%,
- transparent 50%),
- linear-gradient(-45deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 50.1%,
- transparent 50%);
+ background-image: linear-gradient(135deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50%,
+ transparent 50%),
+ linear-gradient(-45deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50.1%,
+ transparent 50%);
}
.divForms .area {
- position: relative;
- min-width: 360px;
+ position: relative;
+ min-width: 360px;
}
.divForms-wrap {
- position: relative;
- overflow: hidden;
- padding: 30px;
+ position: relative;
+ overflow: hidden;
+ padding: 30px;
}
.divForms-theme .b-b,
@@ -245,187 +251,188 @@
.divForms-theme .b-r,
.divForms-theme .b-t,
.divForms-theme .b-t-l {
- background-color: #1831a7;
- box-shadow: 0 0 10px 2px #1831a7;
+ background-color: #1831a7;
+ box-shadow: 0 0 10px 2px #1831a7;
}
.divForms .b-t {
- position: absolute;
- top: 0;
- left: 44px;
- right: 0;
- height: 1px;
- z-index: 10;
+ position: absolute;
+ top: 0;
+ left: 44px;
+ right: 0;
+ height: 1px;
+ z-index: 10;
}
.divForms .b-r {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 44px;
- width: 1px;
- z-index: 10;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 44px;
+ width: 1px;
+ z-index: 10;
}
.divForms .b-l {
- position: absolute;
- top: 44px;
- left: 0;
- bottom: 0;
- width: 1px;
- z-index: 10;
+ position: absolute;
+ top: 44px;
+ left: 0;
+ bottom: 0;
+ width: 1px;
+ z-index: 10;
}
.divForms .b-b {
- position: absolute;
- left: 0;
- right: 44px;
- bottom: 0;
- height: 1px;
- z-index: 10;
+ position: absolute;
+ left: 0;
+ right: 44px;
+ bottom: 0;
+ height: 1px;
+ z-index: 10;
}
.divForms .b-b-r {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 1px;
- height: 62px;
- transform: rotate(45deg) translate(-52px, 22px);
- z-index: 10;
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(-52px, 22px);
+ z-index: 10;
}
.divForms .b-t-l {
- position: absolute;
- top: 0;
- left: 0;
- width: 1px;
- height: 62px;
- transform: rotate(45deg) translate(52px, -22px);
- z-index: 10;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(52px, -22px);
+ z-index: 10;
}
.divForms .label-wrap {
- padding: 0 12px;
- color: #fff;
- font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
+ padding: 0 12px;
+ color: #fff;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
- .change-btn {
- margin-top: 6px;
- display: flex;
- align-items: center;
- justify-content: space-around;
+ .change-btn {
+ margin-top: 6px;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
- &>div {
- width: 36%;
- height: 36px;
- line-height: 36px;
- cursor: pointer;
- }
-
- &>div.on {
- color: #3d95f3;
- border-bottom: 2px solid #3d95f3;
- }
+ &>div {
+ width: 36%;
+ height: 36px;
+ line-height: 36px;
+ cursor: pointer;
}
- .label-content {
- padding: 10px 0;
-
- .item {
- display: flex;
- flex-direction: row;
- width: calc(100% - 20px);
- height: 30px;
- line-height: 30px;
- margin: 0 10px;
- text-align: left;
-
- &>div:first-child {
- width: 112px;
- text-align: justify;
- display: inline-block;
- text-align-last: justify;
- margin-right: 20px;
- }
-
- &>div:nth-of-type(2) {
- width: calc(100% - 120px);
- max-width: 190px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- }
+ &>div.on {
+ color: #3d95f3;
+ border-bottom: 2px solid #3d95f3;
}
+ }
- .label-content.no-data {
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 240px;
+ .label-content {
+ padding: 10px 0;
+
+ .item {
+ display: flex;
+ flex-direction: row;
+ width: calc(100% - 20px);
+ height: 30px;
+ line-height: 30px;
+ margin: 0 10px;
+ text-align: left;
+
+ &>div:first-child {
+ width: 112px;
+ text-align: justify;
+ display: inline-block;
+ text-align-last: justify;
+ margin-right: 20px;
+ }
+
+ &>div:nth-of-type(2) {
+ width: calc(100% - 120px);
+ max-width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
+ }
+
+ .label-content.no-data {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 240px;
+ }
}
.divForms .title {
- position: relative;
- margin-top: 20px;
- padding: 0 12px 0 30px;
- height: 36px;
- line-height: 36px;
+ position: relative;
+ margin-top: 20px;
+ padding: 0 12px 0 30px;
+ height: 36px;
+ line-height: 36px;
- .details-btn {
- position: absolute;
- top: 0;
- right: 28px;
- height: 100%;
- cursor: pointer;
+ .details-btn {
+ position: absolute;
+ top: 0;
+ right: 28px;
+ }
- span {
- font-size: 14px;
- }
- }
+ .details-btn::before {
+ font-family: element-icons;
+ content: '\e785';
+ cursor: pointer;
+ font-size: 16px;
+ }
- .details-btn:hover {
- color: #3d95f3;
- }
+ .details-btn:hover {
+ color: #3d95f3;
+ }
- .close {
- position: absolute;
- right: 5px;
- top: 0;
- }
+ .close {
+ position: absolute;
+ right: 5px;
+ top: 0;
+ }
- .close::before {
- font-family: element-icons;
- content: '\e6db';
- cursor: pointer;
- font-size: 16px;
- }
+ .close::before {
+ font-family: element-icons;
+ content: '\e6db';
+ cursor: pointer;
+ font-size: 16px;
+ }
- .close:hover::before {
- color: #3d95f3;
- }
+ .close:hover::before {
+ color: #3d95f3;
+ }
}
.divForms-theme .title {
- background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
+ background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
}
.divForms-theme .arrow,
.divForms-theme .title::before {
- background-color: #1c309e;
+ background-color: #1c309e;
}
.divForms .title::before {
- content: '';
- position: absolute;
- bottom: -4px;
- left: 0;
- right: 0;
- z-index: 10;
- height: 2px;
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ height: 2px;
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3