From 71a7d1da8a740f1579a8d9f658182e6f9d2e116a Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 15 Nov 2022 14:44:53 +0800
Subject: [PATCH] 弹窗样式内容
---
src/store/modules/popupParams.js | 6 +
src/store/getters.js | 3
src/views/home/components/rightContainer.vue | 18 +++++
src/views/home/components/bottomContainer.vue | 1
src/components/map/components/mapPopup.vue | 104 ++++++++++++++++++++++++++++++++--
5 files changed, 121 insertions(+), 11 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index f771936..520a729 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -1,6 +1,43 @@
<template>
<div>
- <div v-if="detailsPopup" id="divFormsDomBox" class="wwwwwwwww">55555555555</div>
+ <div v-if="detailsPopup" id="divFormsDomBox" class="container">
+ <div class="title">
+ 详细信息
+ <div class="close" @click="closePopup"></div>
+ </div>
+ <div class="item">
+ <div>所属派出所:</div>
+ <div>{{dataPopup.policeName}}</div>
+ </div>
+ <div class="item">
+ <div>警情类别:</div>
+ <div>{{dataPopup.type}}</div>
+ </div>
+ <div class="item">
+ <div>警情状态:</div>
+ <div>{{dataPopup.state}}</div>
+ </div>
+ <div class="item">
+ <div>报警电话:</div>
+ <div>{{dataPopup.comingPhone}}</div>
+ </div>
+ <div class="item">
+ <div>接警时间:</div>
+ <div>{{dataPopup.dealTime}}</div>
+ </div>
+ <div class="item">
+ <div>经办民警:</div>
+ <div>{{dataPopup.dealPolice}}</div>
+ </div>
+ <div class="item">
+ <div>报警人:</div>
+ <div>{{dataPopup.callPeople}}</div>
+ </div>
+ <div class="item">
+ <div>报警人联系人:</div>
+ <div>{{dataPopup.callPhone}}</div>
+ </div>
+ </div>
</div>
</template>
@@ -10,19 +47,72 @@
name: 'mapPopup',
computed: {
...mapGetters([
- 'detailsPopup'
+ 'detailsPopup',
+ 'dataPopup'
])
+ },
+ methods: {
+ closePopup () {
+ this.$store.commit('SET_DETAILSPOPUP', false)
+ }
}
}
</script>
-<style>
-.wwwwwwwww {
+<style lang="scss" scoped>
+.container {
position: fixed;
left: 0;
z-index: 1 !important;
- width: 200px;
- height: 300px;
- background: red;
+ width: 280px;
+ height: 360px;
+ background: $bg-color;
+ color: #fff;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-self: flex-start;
+ align-content: flex-start;
+ .title {
+ height: 40px;
+ line-height: 30px;
+ width: 100%;
+ position: relative;
+ .close {
+ position: absolute;
+ right: 5px;
+ top: -5px;
+ }
+ .close::before {
+ font-family: element-icons;
+ content: '\e6db';
+ cursor: pointer;
+ font-size: 16px;
+ }
+ .close:hover::before {
+ color: #3d95f3;
+ }
+ }
+ .item {
+ display: flex;
+ flex-direction: row;
+ width: calc(100% - 20px);
+ height: 36px;
+ line-height: 36px;
+ margin: 0 10px;
+ text-align: left;
+
+ & > div:first-child {
+ width: 100px;
+ text-align: justify;
+ display: inline-block;
+ text-align-last: justify;
+ margin-right: 20px;
+ }
+
+ & > div:nth-of-type(2) {
+ width: calc(100% - 120px);
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/store/getters.js b/src/store/getters.js
index d8a8728..3182418 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,4 +1,5 @@
const getters = {
- detailsPopup: (state) => state.popupParams.detailsPopup
+ detailsPopup: (state) => state.popupParams.detailsPopup,
+ dataPopup: (state) => state.popupParams.dataPopup
}
export default getters
diff --git a/src/store/modules/popupParams.js b/src/store/modules/popupParams.js
index a20c749..773cc5f 100644
--- a/src/store/modules/popupParams.js
+++ b/src/store/modules/popupParams.js
@@ -1,10 +1,14 @@
const popupParams = {
state: {
- detailsPopup: false
+ detailsPopup: false,
+ dataPopup: {}
},
mutations: {
SET_DETAILSPOPUP (state, detailsPopup) {
state.detailsPopup = detailsPopup
+ },
+ SET_DATAPOPUP (state, dataPopup) {
+ state.dataPopup = dataPopup
}
},
actions: {
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 5a5650a..5bdc827 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -179,6 +179,7 @@
siteWd: Number(item.position[1])
})
this.$store.commit('SET_DETAILSPOPUP', true)
+ this.$store.commit('SET_DATAPOPUP', item)
var popup = new global.DC.DivForms(global.viewer, {
domId: 'divFormsDomBox',
position: [
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index fbeef66..511e11c 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -168,7 +168,7 @@
formatter: function (params) {
let tipHtml = ``
if ('carCount' in params.data) {
- tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#949494">监控：${params.data.monitorCount}台</span><br /><span style="color:#fe2929">手台${params.data.phoneCount}台</span><span style="margin-left:10px;color:#69a9ff">手持记录仪：${params.data.recorderCount}台</span>`
+ tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
} else {
tipHtml = `<span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> ${params.data.name}<strong style="margin-left:10px">${params.data.value}台</strong><strong style="margin-left:10px;color:#5c7bd9">${params.percent}%</strong><br /><span style="color:#00fe01">运行：${params.data.working}台</span><span style="margin-left:10px;color:#949494">备用：${params.data.spare}台</span><br /><span style="color:#fe2929">检修：${params.data.overhaul}台</span><span style="margin-left:10px;color:#69a9ff">禁用：${params.data.disable}台</span>`
}
@@ -230,7 +230,20 @@
labelLine: {
show: false
},
- data: dataArr
+ data: dataArr,
+ itemStyle: {
+ normal: {
+ color: function (params) {
+ let colorList = []
+ if ('carCount' in params.data) {
+ colorList = ['#00fe01', '#949494', '#fe2929', '#69a9ff']
+ } else {
+ colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
+ }
+ return colorList[params.dataIndex]
+ }
+ }
+ }
}
],
grid: {
@@ -507,6 +520,7 @@
}
return dataArr
},
+
getEquimentChartStateData (newArr) {
let working = 0
let spare = 0
--
Gitblit v1.9.3