From 1932115cd2a69a76ae20ddf56ebfa96df49dbfc8 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 07 Jan 2023 11:17:22 +0800
Subject: [PATCH] 首页内容显示，弹窗内容显示及相关逻辑
---
src/styles/base/index.scss | 8
src/styles/media/index.scss | 108 +++++-----
src/views/home/index.vue | 341 ++++++++--------------------------
src/components/map/index.vue | 42 ++--
src/views/home/components/bottomContainer.vue | 44 ++-
src/components/map/components/mapPopup.vue | 14
6 files changed, 195 insertions(+), 362 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index 393e76f..e026f1a 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -45,12 +45,12 @@
<div>{{ dataPopup.LXDH }}</div>
</div>
<div class="item">
- <div>联系电话:</div>
- <div>{{ dataPopup.BJNR }}</div>
+ <div>报警内容:</div>
+ <div :title="dataPopup.BJNR">{{ dataPopup.BJNR }}</div>
</div>
<div class="item">
<div>事发地址:</div>
- <div>{{ dataPopup.SFDZ }}</div>
+ <div :title="dataPopup.SFDZ">{{ dataPopup.SFDZ }}</div>
</div>
<div class="item">
<div>报警类型:</div>
@@ -163,10 +163,10 @@
.divForms .arrow {
position: absolute;
bottom: 50%;
- left: -8px;
+ left: 0;
width: 45px;
height: 2px;
- transform: rotate(-45deg);
+ transform: rotate(-45deg) translate(5px, -15px);
background-color: #28bbf0;
}
@@ -308,6 +308,10 @@
&>div:nth-of-type(2) {
width: calc(100% - 120px);
+ max-width: 190px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
diff --git a/src/components/map/index.vue b/src/components/map/index.vue
index f20a2f5..821cdca 100644
--- a/src/components/map/index.vue
+++ b/src/components/map/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 17:00:30
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-01-06 16:59:43
+ * @LastEditTime: 2023-01-07 11:09:38
* @FilePath: \srs-police-affairs\src\components\map\index.vue
* @Description: 公用地图组件
*
@@ -171,29 +171,29 @@
// global.viewer.addTerrain(terrain)
// 天地图 影像
- // global.viewer.imageryLayers.addImageryProvider(
- // new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
- // url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
- // subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
- // format: 'image/jpeg',
- // show: true,
- // maximumLevel: 18
- // })
- // )
+ global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
+ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e45274b0235bb913eceb393aabbf9c9c',
+ subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+ format: 'image/jpeg',
+ show: true,
+ maximumLevel: 18
+ })
+ )
// 上饶部署，内网使用的
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
- layer: "wmts_4326_361100",
- style: "default",
- format: "image/png",
- tileMatrixSetID: "c",
- tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
- })
- )
+ // global.viewer.imageryLayers.addImageryProvider(
+ // new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ // url: "http://10.141.11.11:8090/MapTileService/wmts?STORETYPE=merged-dat&PROJECTION=4326",
+ // layer: "wmts_4326_361100",
+ // style: "default",
+ // format: "image/png",
+ // tileMatrixSetID: "c",
+ // tileMatrixLabels: new Array(18).fill(0).map((v, i) => i + 1),
+ // tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ // })
+ // )
// 设置地图初始位置，角度等
global.viewer.camera.setView({
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index c245a3f..e546a3f 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -354,9 +354,9 @@
.el-dialog__body {
padding-top: 0;
- flex: 1;
display: flex;
flex-direction: column;
+ height: calc(100% - 56px);
.btn-change {
display: flex;
@@ -382,6 +382,7 @@
flex-wrap: wrap;
justify-self: flex-start;
align-content: flex-start;
+ overflow-y: auto;
.item {
display: flex;
@@ -402,13 +403,16 @@
&>div:nth-of-type(2) {
width: calc(100% - 140px);
+
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
.dialog-content {
width: 100%;
display: flex;
- height: 36px;
line-height: 36px;
flex-direction: row;
text-align: left;
diff --git a/src/styles/media/index.scss b/src/styles/media/index.scss
index c3b469f..d0904ed 100644
--- a/src/styles/media/index.scss
+++ b/src/styles/media/index.scss
@@ -321,14 +321,15 @@
.equiment-detail {
height: countSizeVh(540);
+
.right {
.monitor {
height: countSizeVh(540);
}
-
+
.others {
height: countSizeVh(495);
-
+
.pages {
padding-bottom: countSizeVh(3);
padding-top: countSizeVh(10);
@@ -1801,22 +1802,27 @@
line-height: countSizeVh(30);
font-size: countSizeVh(16);
}
+
.el-dialog__header span {
font-size: countSizeVh(18);
}
+
.el-dialog__header button {
font-size: countSizeVh(18);
right: countSizeVw(10, 1920);
}
+
.el-dialog {
width: countSizeVw(720, 1920);
height: countSizeVh(480);
}
- .el-dialog .el-dialog__body {
+
+ .el-dialog .el-dialog__body {
height: countSizeVh(450);
padding: countSizeVh(6);
}
}
+
.police-affairs-details-box {
.el-dialog {
width: countSizeVw(540, 1920);
@@ -2042,71 +2048,68 @@
}
.policeSituation-details-box {
- .el-dialog__header span {
- font-size: countSizeVh(18);
- }
-
- .el-dialog .el-dialog__body {
- font-size: countSizeVh(16);
- }
-
- .el-dialog__header button {
- font-size: countSizeVh(18);
- right: countSizeVw(10, 1920);
- }
-
.el-dialog {
width: countSizeVw(800, 1920);
height: countSizeVh(500);
- }
- .el-dialog .el-dialog__header {
- height: countSizeVh(56);
- line-height: countSizeVh(56);
- }
+ .el-dialog__header {
+ height: countSizeVh(56);
+ line-height: countSizeVh(56);
- .el-dialog .el-dialog__body {
+ span {
+ font-size: countSizeVh(18);
+ }
- .btn-change {
- height: countSizeVh(36);
- line-height: countSizeVh(36);
- border-bottom: countSizeVh(2) solid #3d5ad5;
-
- &>div {
- padding: 0 countSizeVw(12, 1920);
+ button {
+ font-size: countSizeVh(18);
+ right: countSizeVw(10, 1920);
}
}
- .box {
+ .el-dialog__body {
+ height: calc(100% - countSizeVh(56));
+ font-size: countSizeVh(16);
- .item {
- width: calc(50% - countSizeVw(20, 1920));
+ .btn-change {
height: countSizeVh(36);
line-height: countSizeVh(36);
- margin: 0 countSizeVw(10, 1920);
+ border-bottom: countSizeVh(2) solid #3d5ad5;
- &>div:first-child {
- width: countSizeVw(120, 1920);
- margin-right: countSizeVw(20, 1920);
- }
-
- &>div:nth-of-type(2) {
- width: calc(100% - countSizeVw(140, 1920));
+ &>div {
+ padding: 0 countSizeVw(12, 1920);
}
}
- .dialog-content {
- height: countSizeVh(36);
- line-height: countSizeVh(36);
- margin-left: countSizeVw(10, 1920);
+ .box {
- &>div:first-child {
- width: countSizeVw(120, 1920);
- margin-right: countSizeVw(20, 1920);
+ .item {
+ width: calc(50% - countSizeVw(20, 1920));
+ height: countSizeVh(36);
+ line-height: countSizeVh(36);
+ margin: 0 countSizeVw(10, 1920);
+
+ &>div:first-child {
+ width: countSizeVw(120, 1920);
+ margin-right: countSizeVw(20, 1920);
+ }
+
+ &>div:nth-of-type(2) {
+ width: calc(100% - countSizeVw(140, 1920));
+ }
}
- &>div:nth-of-type(2) {
- width: calc(100% - countSizeVw(140, 1920));
+ .dialog-content {
+ line-height: countSizeVh(36);
+ margin-left: countSizeVw(10, 1920);
+
+ &>div:first-child {
+ width: countSizeVw(120, 1920);
+ margin-right: countSizeVw(20, 1920);
+ }
+
+ &>div:nth-of-type(2) {
+ width: calc(100% - countSizeVw(140, 1920));
+ }
}
}
}
@@ -2386,13 +2389,6 @@
#divFormsDomBox {
.divForms {
- .arrow {
- left: countSizeVw(-8, 1920);
- width: countSizeVw(45, 1920);
- height: countSizeVh(2);
- transform: rotate(-45deg);
- }
-
.area {
min-width: countSizeVw(360, 1920);
}
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 9034000..01c8d0e 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -26,7 +26,6 @@
<span class="beforetime" :class="{ choosed: historytype == 1 }"
@click="historyTabClick(1)">历史</span>
</div>
-
</div>
<div class="body" ref="tableBox" @click="handleSelectClick($event)">
@@ -53,11 +52,12 @@
<span class="num" v-text="index + 1"></span>
<span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
<span class="receiving-alarm-people" v-text="item.JJYXM"></span>
- <span class="receiving-alarm-time" v-text="item.JJSJ"></span>
+ <span class="receiving-alarm-time" :title="item.JJSJ"
+ v-text="item.JJSJ.substring(0, 10)"></span>
<span class="call-people" v-text="item.BJRXM"></span>
<span class="call-phone" v-text="item.LXDH"></span>
<span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
- <span class="incident-site" v-text="item.SFDZ"></span>
+ <span class="incident-site" :title="item.SFDZ" v-text="item.SFDZ"></span>
<span class="call-police-type" v-text="item.BJLX"></span>
<span class="alarm-bz" v-text="item.MEMO"></span>
</li>
@@ -195,7 +195,9 @@
// 获取实时接警记录
getAnswerPolices () {
// getAnswerPolices().then(res => {
- // this.policeSituationRealtimeArr = res.data.result
+ // this.policeSituationRealtimeArr = res.data.result.map((item, index) => {
+ // return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
+ // })
// })
this.policeSituationRealtimeArr = [{
@@ -261,8 +263,8 @@
JJSJ: '2022-12-12 12:12:12',
BJRXM: '西门庆祝',
LXDH: 17335843642,
- BJNR: '今日在某小区查获私人赌博场所',
- SFDZ: '上饶市信州区万达华府小区',
+ BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
+ SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
BJLX: '聚众赌博',
MEMO: '人群聚集赌博'
},
@@ -277,12 +279,18 @@
BJLX: '聚众赌博',
MEMO: '人群聚集赌博'
}]
+
+ this.policeSituationRealtimeArr = this.policeSituationRealtimeArr.map((item, index) => {
+ return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
+ })
},
// 获取历史接警记录
getAlarmList (type, time) {
getAlarmList(type, time).then(res => {
- this.policeSituationHistoryArr = res.data.data.records
+ this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
+ return { ...item, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
+ })
})
},
@@ -298,7 +306,6 @@
this.getAlarmList(type, this.dateFormat(this.currentMonthTime))
}
- this.$emit('changePoliceSituationTimeType', type)
this.$emit('policeSituationChange')
},
@@ -306,23 +313,25 @@
historyTabClick (type) {
this.historytype = type
+ this.timetype = 0
+
this.currentWeekTime = new Date()
if (type == 0) {
this.getAnswerPolices()
} else {
- this.getAlarmList(type, this.dateFormat(this.currentWeekTime))
+ this.getAlarmList(this.timetype, this.dateFormat(this.currentWeekTime))
}
this.$emit('changePoliceSituationHistoryType', type)
this.$emit('policeSituationChange')
},
- chooseWeekTimeDate () {
- return this.policeSituationHistoryArr
+ chooseRealData () {
+ return this.policeSituationRealtimeArr
},
- chooseMouthTimeDate () {
+ chooseTimeDate () {
return this.policeSituationHistoryArr
},
@@ -507,6 +516,7 @@
cursor: pointer;
span {
+ padding: 0 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -517,23 +527,23 @@
}
.receiving-alarm-unit {
- width: 12%;
+ width: 12.6%;
}
.receiving-alarm-people {
- width: 8%;
+ width: 7.6%;
}
.receiving-alarm-time {
- width: 10%;
+ width: 9.6%;
}
.call-people {
- width: 8%;
+ width: 7.6%;
}
.call-phone {
- width: 8%;
+ width: 10%;
}
.call-police-content {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7a52ae2..6c6f64f 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-01-06 15:44:39
+ * @LastEditTime: 2023-01-07 11:13:02
* @FilePath: \srs-police-affairs\src\views\home\index.vue
* @Description: 小区-栋-层-房屋
*
@@ -11,31 +11,17 @@
<template>
<div class="home-page container">
- <left-container
- class="left-container"
- @showpeopledetail="showpeopledetail"
- @showlanddetail="showlanddetail"
- @showkeypersondetail="showkeypersondetail"
- ref="leftContainer"
- ></left-container>
+ <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
+ @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
- <right-container
- class="right-container"
- @showequimentdetail="showequimentdetail"
- @selectPoliceChangeEventData="selectPoliceChangeEventData"
- @changeActivityType="changeActivityType"
- @activityChange="activityChange"
- ref="rightContainer"
- ></right-container>
+ <right-container class="right-container" @showequimentdetail="showequimentdetail"
+ @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
+ @activityChange="activityChange" ref="rightContainer"></right-container>
- <bottom-container
- class="bottom-container"
- ref="bottomContainer"
+ <bottom-container class="bottom-container" ref="bottomContainer"
@changePoliceSituationHistoryType="changePoliceSituationHistoryType"
- @changePoliceSituationTimeType="changePoliceSituationTimeType"
@policeSituationChange="policeSituationChange"
- @policeSituationSiteClick="policeSituationSiteClick"
- ></bottom-container>
+ @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
<div class="center-container">
<div class="layers-control-btn house">
@@ -62,69 +48,30 @@
</div>
<div ref="RegionSelect" style="left: 0;" class="region-select">
- <map-select
- class="map-select"
- @selectCheck="policeStationSelect"
- :checkValue="policeStationCheckValue"
- :options="policeStationOptions"
- :optionsName="'policeStationName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
+ :options="policeStationOptions" :optionsName="'policeStationName'"></map-select>
- <map-select
- class="map-select"
- @selectCheck="areaSelect"
- :checkValue="areaCheckValue"
- :options="areaOptions"
- :optionsName="'areaCheckName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
+ :optionsName="'areaCheckName'"></map-select>
- <map-select
- class="map-select"
- @selectCheck="housingSelect"
- :checkValue="housingCheckValue"
- :options="housingOptions"
- :optionsName="'housingsName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
+ :options="housingOptions" :optionsName="'housingsName'"></map-select>
</div>
- <el-dialog
- :title="dialogTitle"
- :modal="true"
- :visible.sync="dialogVisible"
- :before-close="dialogBeforeClose"
- :close-on-click-modal="true"
- >
- <video
- src="/video/sp.mp4"
- autoplay
- controls
- width="100%"
- height="100%"
- ref="videoElement"
- style="object-fit: fill"
- ></video>
+ <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
+ :close-on-click-modal="true">
+ <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
+ style="object-fit: fill"></video>
</el-dialog>
- <el-dialog
- :title="panoramaTitle"
- :modal="true"
- :visible.sync="panoramaVisible"
- :before-close="panoramaBeforeClose"
- :close-on-click-modal="true"
- class="panorama-details-box"
- >
+ <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
+ :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
<!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
<iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
</el-dialog>
- <el-dialog
- :title="activityTitle"
- :modal="true"
- :visible.sync="activityVisible"
- :before-close="activityBeforeClose"
- :close-on-click-modal="true"
- class="activity-details-box"
- >
+ <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible"
+ :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box">
<div class="item">
<div>活动名称:</div>
<div>{{ activityDetailArr.activityName }}</div>
@@ -159,14 +106,8 @@
</div>
</el-dialog>
- <el-dialog
- :title="phoneTitle"
- :modal="true"
- :visible.sync="phoneVisible"
- :before-close="phoneBeforeClose"
- :close-on-click-modal="true"
- class="phone-details-box"
- >
+ <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
+ :close-on-click-modal="true" class="phone-details-box">
<div class="item">
<div>责任人：</div>
<div>{{ phoneDetails.person }}</div>
@@ -185,14 +126,8 @@
</div>
</el-dialog>
- <el-dialog
- :title="peopleTitle"
- :modal="true"
- :visible.sync="peopleVisible"
- :before-close="peopleBeforeClose"
- :close-on-click-modal="true"
- class="area-details-box"
- >
+ <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
+ :close-on-click-modal="true" class="area-details-box">
<div class="item">
<div>责任区负责人：</div>
<div>王某某</div>
@@ -211,58 +146,30 @@
</div>
</el-dialog>
- <el-dialog
- :title="equimentTitle"
- :modal="true"
- :visible.sync="equimentVisible"
- :before-close="equimentBeforeClose"
- :close-on-click-modal="true"
- class="equiment-details-box"
- >
+ <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
+ :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
<div class="equiment-detail">
<div class="left">
- <el-tree
- :data="jurisdictionData"
- :props="defaultProps"
- @node-click="jurisdictionNodeClick"
- ref="tree"
- node-key="id"
- ></el-tree>
+ <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
+ ref="tree" node-key="id"></el-tree>
</div>
<div class="right">
<div class="monitor" v-if="monitorContent">
- <video
- src="/video/sp.mp4"
- autoplay
- controls
- width="100%"
- height="100%"
- ref="videoElement"
- style="object-fit: fill"
- ></video>
+ <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
+ style="object-fit: fill"></video>
</div>
<div class="others" v-if="othersContent">
- <el-table
- :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
+ <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- :row-class-name="tableRowClassName"
- >
+ :row-class-name="tableRowClassName">
<el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
<el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
<el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
<el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
- <el-table-column
- prop="recorderID"
- label="执法记录仪号"
- v-if="recorderArrShow"
- ></el-table-column>
- <el-table-column
- prop="recorderType"
- label="记录仪机型"
- v-if="recorderArrShow"
- ></el-table-column>
+ <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
+ <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
<el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
<el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
<el-table-column prop="policeStation" label="所属派出所"></el-table-column>
@@ -270,35 +177,20 @@
<el-table-column prop="state" label="状态"></el-table-column>
</el-table>
<div class="pages">
- <el-pagination
- background
- layout="prev, pager, next"
- :total="showArr.length"
- :page-size="pagesize"
- pager-count="3"
- :current-page="currentPage"
- @current-change="handleCurrentChange"
- ></el-pagination>
+ <el-pagination background layout="prev, pager, next" :total="showArr.length"
+ :page-size="pagesize" pager-count="3" :current-page="currentPage"
+ @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</div>
</div>
</el-dialog>
- <el-dialog
- :title="landTitle"
- :modal="true"
- :visible.sync="landVisible"
- :before-close="landBeforeClose"
- :close-on-click-modal="true"
- class="land-details-box"
- >
- <el-table
- :data="landDetailArr"
- style="width: 100%"
+ <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
+ :close-on-click-modal="true" class="land-details-box">
+ <el-table :data="landDetailArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
- :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
- >
+ :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
<el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
<el-table-column prop="location" label="位置" width="140"></el-table-column>
<el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -307,20 +199,11 @@
</el-table>
</el-dialog>
- <el-dialog
- :title="keyPersonTitle"
- :modal="true"
- :visible.sync="keyPersonVisible"
- :before-close="keyPersonBeforeClose"
- :close-on-click-modal="true"
- class="keyPerson-details-box"
- >
- <el-table
- :data="keyPersonDetailArr"
- style="width: 100%"
+ <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
+ :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
+ <el-table :data="keyPersonDetailArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
- :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
- >
+ :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
<el-table-column prop="type" label="重点人员类型"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
@@ -331,31 +214,11 @@
</el-table>
</el-dialog>
- <el-dialog
- title="警情信息"
- :modal="true"
- :visible.sync="policeSituationVisible"
- :before-close="policeSituationBeforeClose"
- :close-on-click-modal="true"
- class="policeSituation-details-box"
- >
+ <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible"
+ :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
<div class="btn-change">
- <div
- :class="{ on: policeInformationType == '接警信息' }"
- @click="policeInformationType = '接警信息'"
- >接警信息</div>
- <div
- :class="{ on: policeInformationType == '出警信息' }"
- @click="policeInformationType = '出警信息'"
- >出警信息</div>
- <div
- :class="{ on: policeInformationType == '接警信息' }"
- @click="alarmOrActAsPolice('接警信息')"
- >接警信息</div>
- <div
- :class="{ on: policeInformationType == '出警信息' }"
- @click="alarmOrActAsPolice('出警信息')"
- >出警信息</div>
+ <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
+ <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
</div>
<div v-show="policeInformationType == '接警信息'" class="box">
@@ -392,21 +255,25 @@
<div>{{ policeSituationDetailArr.BJRXM }}</div>
</div>
<div class="item">
- <div>事发地址:</div>
- <div>{{ policeSituationDetailArr.SFDZ }}</div>
- </div>
- <div class="item">
<div>报警类别:</div>
<div>{{ policeSituationDetailArr.BJLB }}</div>
</div>
+
<div class="item">
<div>报警类型:</div>
<div>{{ policeSituationDetailArr.BJLX }}</div>
</div>
+
+ <div class="dialog-content">
+ <div>事发地址:</div>
+ <div>{{ policeSituationDetailArr.SFDZ }}</div>
+ </div>
+
<div class="dialog-content">
<div>报警内容:</div>
<div>{{ policeSituationDetailArr.BJNR }}</div>
</div>
+
<div class="dialog-content">
<div>备注:</div>
<div>{{ policeSituationDetailArr.MEMO }}</div>
@@ -587,8 +454,6 @@
import bottomContainer from './components/bottomContainer'
import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
-import realtimeArr from '@/assets/data/policeSituationArr/realtimeArr.js'
-import policeSituationHistoryArr from '@/assets/data/policeSituationArr/historyArr.js'
import { getPoliceStationList } from "@/api/dept"
import { convertStringToList } from "@/utils/geometryStringTool"
@@ -723,9 +588,6 @@
underwayArr: [],
activityType: 0,
policeSituationHistoryType: 0,
- policeSituationTimeType: 0,
- policeSituationRealtimeArr: [],
- policeSituationHistoryArr: [],
policeSituationDetailArr: {},
CJdata: {},
activityDetailArr: {},
@@ -748,8 +610,6 @@
this.getPoliceStationList()
this.historyArr = historyArr
this.underwayArr = underwayArr
- this.policeSituationRealtimeArr = realtimeArr
- this.policeSituationHistoryArr = policeSituationHistoryArr
this.getPanoramaList()
this.getResidentialQuartersList('361102')
@@ -1086,32 +946,21 @@
this.policeSituationList.forEach((item, index) => {
let center = new global.DC.Position(item.lng, item.lat)
let point = new global.DC.PointPrimitive(center)
+
let num = 0
- if (item.state == '处理中') {
- timer[index] = setInterval(() => {
- num++
- if (num >= 10) {
- num = 0
- }
- point.setStyle({
- outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
- outlineWidth: num,//边框大小，
- color: global.DC.Color.RED
- })
- }, 100)
- } else {
- timer[index] = setInterval(() => {
- num++
- if (num >= 10) {
- num = 0
- }
- point.setStyle({
- outlineColor: global.DC.Color.GREEN.withAlpha(0.5),//边框颜色
- outlineWidth: num,//边框大小，
- color: global.DC.Color.GREEN
- })
- }, 100)
- }
+
+ timer[index] = setInterval(() => {
+ num++
+ if (num >= 10) {
+ num = 0
+ }
+ point.setStyle({
+ outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
+ outlineWidth: num,//边框大小，
+ color: global.DC.Color.RED
+ })
+ }, 100)
+
point.attrParams = item
point.on(global.DC.MouseEventType.CLICK, this.policeSituationSiteClick)
circleLayer.addOverlay(point)
@@ -1123,43 +972,19 @@
policeSituationSelectChange () {
let showArr = []
- if (this.policeStaionChecked && this.policeStaionChecked.policeStationName != '全部') {
- let arr1 = []
- let arr2 = []
- realtimeArr.some(item => {
- if (item.policeName == this.policeStaionChecked.policeStationName) {
- arr1.push(item)
- }
- })
- this.policeSituationRealtimeArr = arr1
- policeSituationHistoryArr.some(item => {
- if (item.policeName == this.policeStaionChecked.policeStationName) {
- arr2.push(item)
- }
- })
- this.policeSituationHistoryArr = arr2
- } else {
- this.policeSituationRealtimeArr = realtimeArr
- this.policeSituationHistoryArr = policeSituationHistoryArr
- }
if (this.policeSituationHistoryType == 0) {
- showArr = this.policeSituationRealtimeArr
+ showArr = this.$refs.bottomContainer.chooseRealData()
} else {
- let showSaveArr = this.policeSituationHistoryArr
- if (this.policeSituationTimeType == 0) {
- showArr = this.$refs.bottomContainer.chooseWeekTimeDate(showSaveArr)
- } else {
- showArr = this.$refs.bottomContainer.chooseMouthTimeDate(showSaveArr)
- }
+ showArr = this.$refs.bottomContainer.chooseTimeDate()
}
+
showArr.forEach((item, index) => {
- item.name = `${index + 1}号警情`
- item.lng = `${Number(item.position[0])}`
- item.lat = `${Number(item.position[1])}`
- item.alt = 100
+ item.lng = Number(item.lng)
+ item.lat = Number(item.lat)
item.url = '/img/icon/jq.png'
})
+
this.policeSituationList = showArr
},
@@ -1622,10 +1447,6 @@
this.policeSituationHistoryType = type
},
- changePoliceSituationTimeType (type) {
- this.policeSituationTimeType = type
- },
-
/**
* 获取所有全景数据
*/
@@ -1939,9 +1760,7 @@
background-color: #66b1ff87;
}
- :deep(.el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content) {
+ :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background: #454545;
}
--
Gitblit v1.9.3