| | |
| | | <template> |
| | | <div> |
| | | <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox"> |
| | | <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"> |
| | | <div class="divForms divForms-theme" :class="{ 'scale-dom': scaleDomFlag }"> |
| | | <div class="divForms-wrap"> |
| | | <div class="area"> |
| | | <div class="arrow-lt"></div> |
| | |
| | | <div class="label-wrap"> |
| | | <div class="title"> |
| | | 警情信息 |
| | | <div class="details-btn" @click="popupDetailShow">详情>>></div> |
| | | |
| | | <div class="close" @click="closePopup" title="关闭"></div> |
| | | </div> |
| | | <div class="change-btn"> |
| | | <div class="change-btn" v-show="detailsPopup.showBtn"> |
| | | <div @click="currentBtn = '接警信息'" :class="{ on: currentBtn == '接警信息' }">接警信息</div> |
| | | <div @click="currentBtnChange('出警信息')" :class="{ on: currentBtn == '出警信息' }">出警信息 |
| | | </div> |
| | | <div @click="currentBtnChange('出警信息')" :class="{ on: currentBtn == '出警信息' }">出警信息</div> |
| | | </div> |
| | | |
| | | <div v-show="currentBtn == '接警信息'" class="label-content"> |
| | |
| | | <div>{{ dataPopup.JJYXM }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>接警时间:</div> |
| | | <div>{{ dataPopup.JJSJ }}</div> |
| | | <div>报警时间:</div> |
| | | <div>{{ dataPopup.BJSJ }}</div> |
| | | </div> |
| | | <div class="item"> |
| | | <div>报警人:</div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-show="currentBtn == '出警信息'" class="label-content"> |
| | | <div v-show="currentBtn == '出警信息' && JSON.stringify(CJdata) != '{}'" class="label-content"> |
| | | <div class="item"> |
| | | <div>处警单位:</div> |
| | | <div>{{ CJdata.CJDWMC }}</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> |
| | |
| | | |
| | | export default { |
| | | name: 'mapPopup', |
| | | |
| | | inject: ["getWidth", 'userInfo'], |
| | | |
| | | data () { |
| | | return { |
| | | currentBtn: '接警信息', |
| | | CJdata: {} |
| | | 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', false) |
| | | this.$store.commit('SET_DETAILSPOPUP', { |
| | | showBox: false, |
| | | showBtn: false |
| | | }) |
| | | }, |
| | | |
| | | currentBtnChange (type) { |
| | | this.currentBtn = type |
| | | |
| | | this.CJdata = {} |
| | | getActAsPoliceList(this.dataPopup.JJDBH, '').then(res => { |
| | | this.CJdata = res.data.data.records |
| | | |
| | | 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 () { |
| | | this.$EventBus.$emit('policeSituationSiteClick', this.dataPopup) |
| | | 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) |
| | | } |
| | | } |
| | | } |
| | | } |
| | |
| | | position: fixed; |
| | | left: 0; |
| | | z-index: 1 !important; |
| | | |
| | | .scale-dom { |
| | | transform: scale(3); |
| | | transform-origin: left; |
| | | } |
| | | } |
| | | |
| | | .divForms .arrow { |
| | |
| | | white-space: nowrap; |
| | | } |
| | | } |
| | | |
| | | } |
| | | |
| | | .label-content.no-data { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | min-height: 240px; |
| | | } |
| | | } |
| | | |
| | | .divForms .title { |
| | |
| | | right: 28px; |
| | | height: 100%; |
| | | cursor: pointer; |
| | | |
| | | span { |
| | | font-size: 14px; |
| | | } |
| | | } |
| | | |
| | | .details-btn:hover { |
| | |
| | | } |
| | | |
| | | .divForms-theme .title { |
| | | background-image: linear-gradient(135deg, |
| | | transparent 25px, |
| | | #1c309e9a 25px); |
| | | background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px); |
| | | } |
| | | |
| | | .divForms-theme .arrow, |