forked from srs-police-affairs
| src/styles/base/index.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.min.css | ●●●●● patch | view | raw | blame | history | |
| src/styles/base/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/index.vue | ●●●●● patch | view | raw | blame | history |
src/styles/base/index.css
@@ -156,3 +156,18 @@ .keyPerson-details-box .el-dialog .el-dialog__body { flex: 1; } .policeSituation-details-box .el-dialog { margin: 0 !important; display: flex; flex-direction: column; width: 1000px; height: 700px; top: 50%; left: 50% !important; transform: translate(-50%, -50%); } .policeSituation-details-box .el-dialog .el-dialog__body { flex: 1; } src/styles/base/index.min.css
@@ -1 +1 @@ *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1} *{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1} src/styles/base/index.scss
@@ -172,3 +172,19 @@ } } } .policeSituation-details-box { .el-dialog { margin: 0 !important; display: flex; flex-direction: column; width: 1000px; height: 700px; top: 50%; left: 50% !important; transform: translate(-50%, -50%); .el-dialog__body { flex: 1; } } } src/views/home/index.vue
@@ -338,12 +338,40 @@ <el-table-column prop="housingEastate" label="所属责任区"></el-table-column> </el-table> </el-dialog> <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box" > <el-table :data="policeSituationDetailArr" style="width: 100%" :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}" :cell-style="{'text-align':'center','borderColor':'#324e75', 'cursor':'pointer'}" > <el-table-column prop="num" label="序号"></el-table-column> <el-table-column prop="type" label="警情类别"></el-table-column> <el-table-column prop="state" label="警情状态"></el-table-column> <el-table-column prop="comingPhone" label="报警电话"></el-table-column> <el-table-column prop="dearTime" label="接警时间"></el-table-column> <el-table-column prop="dearPolice" label="经办民警"></el-table-column> <el-table-column prop="callPeople" label="报警人"></el-table-column> <el-table-column prop="callPhone" label="报警人联系人"></el-table-column> <el-table-column prop="callContent" label="报警内容"></el-table-column> <el-table-column prop="policeName" label="所属派出所"></el-table-column> <el-table-column prop="position" label="坐标"></el-table-column> </el-table> </el-dialog> </div> </template> <script> let cylinderLayer = null let circleDiffLayer = null let circleLayer = null import axios from "axios" import carList from '@/assets/data/car.js' @@ -424,6 +452,7 @@ }] } ] let timer export default { data () { @@ -441,11 +470,13 @@ activityTitle: '', equimentTitle: '', keyPersonTitle: '', policeSituationTitle: '', landTitle: '', panoramaVisible: false, activityVisible: false, equimentVisible: false, keyPersonVisible: false, policeSituationVisible: false, landVisible: false, phoneDetails: {}, phoneTitle: '', @@ -581,6 +612,7 @@ policeSituationType: 0, policeSituationWeekArr: [], policeSituationMouthArr: [], policeSituationDetailArr: [], } }, components: { leftContainer, rightContainer, bottomContainer }, @@ -602,8 +634,8 @@ mounted () { this.$nextTick(() => { this.initPoliceStationLayer() circleDiffLayer = new global.DC.VectorLayer('circleDiffLayer') global.viewer.addLayer(circleDiffLayer) circleLayer = new global.DC.VectorLayer('circleLayer') global.viewer.addLayer(circleLayer) document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom') document.querySelector('.dc-container .dc-location-bar').classList.add('homebottom') @@ -856,9 +888,13 @@ showArr = this.historyArr } showArr.forEach((item, index) => { showNewArr.push({ name: `${index + 1}号活动`, lng: `${Number(item.position[0])}`, lat: `${Number(item.position[1])}`, alt: 100, url: '/img/icon/activity.png' }) item.name = `${index + 1}号活动` item.lng = `${Number(item.position[0])}` item.lat = `${Number(item.position[1])}` item.alt = 100 item.url = '/img/icon/activity.png' }) this.activityList = showNewArr this.activityList = showArr }, policeSituationChange () { @@ -867,11 +903,11 @@ layerName: 'policeSituationLayers', type: 'VectorLayer' }) circleDiffLayer.clear() circleDiffLayer.remove() circleDiffLayer = null circleDiffLayer = new global.DC.VectorLayer('circleDiffLayer') global.viewer.addLayer(circleDiffLayer) circleLayer.clear() circleLayer.remove() circleLayer = null circleLayer = new global.DC.PrimitiveLayer('circleLayer') global.viewer.addLayer(circleLayer) if (this.policeSituationLayerShow == true) { this.policeSituationList.forEach(item => { this.$EventBus.$emit('layerPointAdd', { @@ -880,33 +916,42 @@ params: item, incident: this.policeSituationSiteClick }) let center = global.DC.Position.fromObject({ lng: item.lng, lat: item.lat }) let circle = new global.DC.Circle(center, 1000) let center = new global.DC.Position(item.lng, item.lat) let point = new global.DC.PointPrimitive(center) let num = 0 if (item.state == '紧急') { circle.setStyle({ material: new global.DC.CircleDiffuseMaterialProperty({ color: global.DC.Color.RED.withAlpha(0.2), speed: 8.0 timer = setInterval(() => { num++ if (num >= 15) { num = 0 } point.setStyle({ outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色 outlineWidth: num,//边框大小， color: global.DC.Color.RED.withAlpha(0.5) }) }) }, 100) } else { circle.setStyle({ material: new global.DC.CircleDiffuseMaterialProperty({ color: global.DC.Color.GREEN.withAlpha(0.2), speed: 8.0 timer = setInterval(() => { num++ if (num >= 15) { num = 0 } point.setStyle({ outlineColor: global.DC.Color.GREEN.withAlpha(0.5),//边框颜色 outlineWidth: num,//边框大小， color: global.DC.Color.RED.withAlpha(0.5) }) }) }, 100) } circleDiffLayer.addOverlay(circle) circleLayer.addOverlay(point) }) } else { this.$EventBus.$emit('mapClearLayer', { layerName: 'policeSituationLayers', type: 'VectorLayer' }) circleDiffLayer.clear() // circleDiffLayer.remove() // circleDiffLayer = null circleLayer.clear() } }, @@ -939,12 +984,17 @@ showArr = this.policeSituationMouthArr } showArr.forEach((item, index) => { showNewArr.push({ name: `${index + 1}号警情`, lng: `${Number(item.position[0])}`, lat: `${Number(item.position[1])}`, alt: 100, url: '/img/icon/jq.png', state: item.state }) item.name = `${index + 1}号警情` item.lng = `${Number(item.position[0])}` item.lat = `${Number(item.position[1])}` item.alt = 100 item.url = '/img/icon/jq.png' }) this.policeSituationList = showNewArr this.policeSituationList = showArr }, siteClick (e) { console.log(111222333) this.dialogTitle = e.overlay.attrParams.name this.dialogVisible = true @@ -973,6 +1023,13 @@ this.phoneTitle = e.overlay.attrParams.name this.phoneDetails = e.overlay.attrParams this.phoneVisible = true }, policeSituationSiteClick (e) { console.log(e.overlay.attrParams) this.policeSituationDetailArr = e.overlay.attrParams this.policeSituationVisible = true this.policeSituationTitle = e.overlay.attrParams.name }, phoneBeforeClose () { @@ -1388,6 +1445,8 @@ this.policeSituationType = type }, }, watch: {}, @@ -1434,9 +1493,10 @@ cylinderLayer.clear() cylinderLayer.remove() cylinderLayer = null circleDiffLayer.clear() circleDiffLayer.remove() circleDiffLayer = null circleLayer.clear() circleLayer.remove() circleLayer = null clearInterval(timer) document.querySelector('.dc-container .dc-zoom-controller').classList.remove('homebottom')
