WIP: STATION OPERATION页左侧列表完成,地图绘制完成,标记物进行中

This commit is contained in:
Xu Zhimeng 2023-06-08 19:31:07 +08:00
parent 0afd4fdc12
commit fb4673024f
18 changed files with 1551 additions and 27 deletions

View File

@ -10,42 +10,43 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@jeecg/antd-online-mini": "3.4.3-beta2",
"ant-design-vue": "^1.7.2",
"@antv/data-set": "^0.11.4",
"viser-vue": "^2.4.8",
"@jeecg/antd-online-mini": "3.4.3-beta2",
"@tinymce/tinymce-vue": "2.1.0",
"@toast-ui/editor": "^2.1.2",
"ant-design-vue": "^1.7.2",
"axios": "^0.18.0",
"china-area-data": "^5.0.1",
"clipboard": "^2.0.4",
"codemirror": "^5.46.0",
"cron-parser": "^2.10.0",
"dayjs": "^1.8.0",
"dom-align": "1.12.0",
"enquire.js": "^2.1.6",
"js-cookie": "^2.2.0",
"lodash.get": "^4.4.2",
"lodash.pick": "^4.4.0",
"md5": "^2.2.1",
"nprogress": "^0.2.0",
"ol": "^7.4.0",
"qiankun": "^2.5.1",
"tinymce": "5.4.1",
"viser-vue": "^2.4.8",
"vue": "^2.6.10",
"vue-area-linkage": "^5.1.0",
"vue-cropper": "^0.5.4",
"vue-i18n": "^8.7.0",
"vue-loader": "^15.7.0",
"vue-ls": "^3.2.0",
"vue-router": "^3.0.1",
"vuex": "^3.1.0",
"vue-print-nb-jeecg": "^1.0.12",
"clipboard": "^2.0.4",
"vue-photo-preview": "^1.1.3",
"vue-print-nb-jeecg": "^1.0.12",
"vue-router": "^3.0.1",
"vue-splitpane": "^1.0.4",
"vuedraggable": "^2.20.0",
"codemirror": "^5.46.0",
"@tinymce/tinymce-vue": "2.1.0",
"tinymce": "5.4.1",
"@toast-ui/editor": "^2.1.2",
"vue-area-linkage": "^5.1.0",
"china-area-data": "^5.0.1",
"dom-align": "1.12.0",
"xe-utils": "2.4.8",
"vuex": "^3.1.0",
"vxe-table": "2.9.13",
"vxe-table-plugin-antd": "1.8.10",
"cron-parser": "^2.10.0",
"qiankun": "^2.5.1",
"xe-utils": "2.4.8",
"xss": "^1.0.13"
},
"devDependencies": {
@ -55,13 +56,13 @@
"@vue/cli-service": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"babel-eslint": "7.2.3",
"compression-webpack-plugin": "^3.1.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.1.0",
"html-webpack-plugin": "^4.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.6.10",
"html-webpack-plugin": "^4.2.0",
"compression-webpack-plugin": "^3.1.0"
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
@ -99,7 +100,10 @@
"vue/html-closing-bracket-newline": 0,
"vue/no-parsing-error": 0,
"no-tabs": 0,
"indent": ["off", 2],
"indent": [
"off",
2
],
"no-console": 0,
"space-before-function-paren": 0
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -0,0 +1,45 @@
<template>
<div ref="containerRef" class="scroll-container" :class="{ 'scroll-end': scrollEnd }" @scroll="onScroll">
<slot></slot>
</div>
</template>
<script>
export default {
props: {
direction: {
type: String,
default: 'horizontal', // horizontal | vertical
},
},
data() {
return {
scrollEnd: false,
}
},
mounted() {
this.onScroll()
window.addEventListener('resize', this.onScroll)
},
destroyed() {
window.removeEventListener('resize', this.onScroll)
},
methods: {
onScroll() {
const ele = this.$refs.containerRef
if (this.direction == 'horizontal') {
this.scrollEnd = ele.scrollLeft + ele.offsetWidth == ele.scrollWidth
} else {
this.scrollEnd = ele.scrollTop + ele.offsetHeight == ele.scrollHeight
}
this.$emit('scrollEnd', this.scrollEnd)
},
},
}
</script>
<style lang="less" scoped>
.scoll-container {
width: 100%;
height: 100%;
overflow: auto;
}
</style>

View File

@ -838,6 +838,25 @@ body {
}
}
// collapse
@collapse-panel-border-radius: 0;
@collapse-header-padding: 0;
@collapse-header-bg: transparent;
@collapse-header-padding-extra: 20px;
@collapse-content-padding: 0;
@collapse-content-bg: transparent;
.ant-collapse {
border: none;
> .ant-collapse-item {
border-bottom: none;
}
&-content {
border-top: none;
}
}
#userLayout {
.container {
background-color: @modalBg !important;

View File

@ -0,0 +1,170 @@
<template>
<div ref="mapContainerRef" class="map-container">
<slot></slot>
</div>
</template>
<script>
import { Vector as VectorLayer } from 'ol/layer'
import TileLayer from 'ol/layer/Tile'
import Map from 'ol/Map'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import View from 'ol/View'
import Feature from 'ol/Feature'
import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
import { Point } from 'ol/geom'
import Overlay from 'ol/Overlay'
import Data from './data.json'
import * as MarkerImg from './markerImage'
console.log('%c [ MarkerImg ]-19', 'font-size:13px; background:pink; color:#bf2c9f;', MarkerImg)
const token = 'AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm'
export default {
data() {
return {
stationList: []
}
},
mounted() {
this.initMap()
this.initMapClick()
this.initMapPopup()
this.getStationList()
},
methods: {
//
getStationList() {
this.stationList = Data.result
console.log('%c [ this.stationList ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', this.stationList)
this.initMarkers()
},
//
initMap() {
const layers = [
new TileLayer({
source: new XYZ({
url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${token}`
})
})
]
const view = new View({
projection: 'EPSG:4326', // 使
center: [116.2, 39.56],
zoom: 4,
maxZoom: 16,
minZoom: 1
})
this.map = new Map({
target: this.$refs.mapContainerRef,
layers,
view,
controls: []
})
},
// marker
initMarkers() {
const markerFeatures = []
this.stationList.forEach((eventItem, index) => {
markerFeatures.push(this.getMarker(eventItem))
markerFeatures.push(this.getCircle(eventItem))
})
const markerLayer = new VectorLayer({
source: new VectorSource({
features: markerFeatures
}),
properties: { name: 'eventMarker' }
})
this.map.addLayer(markerLayer)
},
//
initMapClick() {
this.map.on('click', async evt => {
const feature = this.map.forEachFeatureAtPixel(evt.pixel, feature => {
return feature
})
this.currentCoords = feature.getGeometry().getCoordinates()
const stationInfo = feature && feature.values_ && feature.values_.stationInfo
if (stationInfo) {
await this.showMapPopup(stationInfo)
} else {
this.closeMapPopup()
}
})
},
//
initMapPopup() {
this.popupOverlay = new Overlay({
element: this.$refs.mapPopupRef,
autoPan: true,
autoPanAnimation: {
duration: 250
}
})
this.map.addOverlay(this.popupOverlay)
},
//
async showMapPopup(stationInfo) {
this.popupOverlay.setPosition([stationInfo.lon, stationInfo.lat])
this.currMapClickEventItem = stationInfo //
if (!stationInfo.appEventDetailList) {
this.isGettingPopupDetail = true
const eventDetail = await this.getDetail(stationInfo.orid)
stationInfo.appEventDetailList = eventDetail.appEventDetailList
this.isGettingPopupDetail = false
}
},
//
closeMapPopup() {
this.popupOverlay.setPosition(null)
this.removeOtherLayers()
},
// marker
getMarker(stationInfo) {
const { lon, lat } = stationInfo
const markerFeature = new Feature({
geometry: new Point([lon, lat]),
stationInfo
})
markerFeature.setStyle(this.getMarkerStyle(stationInfo))
return markerFeature
},
// circle
getCircle(stationInfo) {
const { lon, lat } = stationInfo
const markerFeature = new Feature({
geometry: new Point([lon, lat]),
stationInfo
})
markerFeature.setStyle(this.getMarkerStyle(stationInfo))
return markerFeature
},
// marker
getMarkerStyle() {
const src = MarkerImg.Car
return new Style({
image: new Icon({
src,
scale: 0.8
})
})
}
}
}
</script>
<style lang="less" scoped>
.map-container {
height: 100%;
}
</style>

View File

@ -0,0 +1,850 @@
{
"success": true,
"message": "",
"code": 200,
"result": [
{
"evid": 11827659,
"orid": 11827659,
"magnitude": 3.38,
"magType": "ml",
"time": "2023-06-08 16:52:23",
"region": "NORTH KOREA",
"lat": 38.98,
"lon": 128.44,
"ms": -999.0,
"ml": 3.38,
"mb": 4.01,
"depth": 0.0,
"arsTable": 0,
"arsType": 0,
"arsTypeValue": "已告警",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 17:16:01",
"sourceAudit": 0,
"discardList": []
},
{
"evid": 11827486,
"orid": 11827486,
"magnitude": 3.29,
"magType": "ml",
"time": "2023-06-08 15:43:29",
"region": "NORTH KOREA",
"lat": 38.55,
"lon": 126.69,
"ms": -999.0,
"ml": 3.29,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 15:52:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11827486, "reason": "Invalid detections", "auth": "wangxl", "lddate": "2023-06-08 15:58:25" }
]
},
{
"evid": 11827386,
"orid": 11827449,
"magnitude": 3.1,
"magType": "ml",
"time": "2023-06-08 14:00:07",
"region": "NORTHEASTERN CHINA",
"lat": 45.96,
"lon": 128.39,
"ms": -999.0,
"ml": 3.1,
"mb": -999.0,
"depth": 0.0,
"arsTable": 1,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 15:34:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11827339,
"orid": 11827432,
"magnitude": 1.4,
"magType": "ml",
"time": "2023-06-08 13:38:07",
"region": "CENTRAL CALIFORNIA",
"lat": 35.47,
"lon": -118.04,
"ms": -999.0,
"ml": 1.4,
"mb": -999.0,
"depth": 0.0,
"arsTable": 1,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 15:30:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11826874,
"orid": 11826874,
"magnitude": 4.52,
"magType": "ml",
"time": "2023-06-08 10:55:39",
"region": "NORTH KOREA",
"lat": 42.19,
"lon": 129.39,
"ms": -999.0,
"ml": 4.52,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 11:06:01",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11826521,
"orid": 11826521,
"magnitude": 3.34,
"magType": "ml",
"time": "2023-06-08 07:39:14",
"region": "NORTH KOREA",
"lat": 41.39,
"lon": 126.65,
"ms": -999.0,
"ml": 3.34,
"mb": -999.0,
"depth": 0.0,
"arsTable": 0,
"arsType": 0,
"arsTypeValue": "已告警",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 07:50:00",
"sourceAudit": 0,
"discardList": []
},
{
"evid": 11826346,
"orid": 11826655,
"magnitude": 2.42,
"magType": "ml",
"time": "2023-06-08 05:22:52",
"region": "NEVADA",
"lat": 40.01,
"lon": -115.65,
"ms": -999.0,
"ml": 2.42,
"mb": -999.0,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:06:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11826165,
"orid": 11826169,
"magnitude": 1.76,
"magType": "ml",
"time": "2023-06-08 05:05:17",
"region": "NEVADA",
"lat": 39.97,
"lon": -114.45,
"ms": -999.0,
"ml": 1.76,
"mb": 5.8,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 05:26:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11826165, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11826052,
"orid": 11826056,
"magnitude": 2.99,
"magType": "ml",
"time": "2023-06-08 04:32:29",
"region": "NORTH KOREA",
"lat": 41.3,
"lon": 129.24,
"ms": -999.0,
"ml": 2.99,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 04:42:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11825774,
"orid": 11825774,
"magnitude": 4.88,
"magType": "ml",
"time": "2023-06-08 02:06:57",
"region": "NORTH KOREA",
"lat": 40.82,
"lon": 129.76,
"ms": -999.0,
"ml": 4.88,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 02:22:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11825774, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:39:41" }
]
},
{
"evid": 11825682,
"orid": 11825682,
"magnitude": 3.3,
"magType": "mb",
"time": "2023-06-08 01:27:48",
"region": "NORTH KOREA",
"lat": 39.69,
"lon": 125.5,
"ms": -999.0,
"ml": -999.0,
"mb": 3.3,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 01:52:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11825682, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:39:25" }
]
},
{
"evid": 11825658,
"orid": 11825658,
"magnitude": 3.61,
"magType": "ml",
"time": "2023-06-08 01:07:34",
"region": "NORTHERN XINJIANG, CHINA",
"lat": 42.51,
"lon": 87.99,
"ms": -999.0,
"ml": 3.61,
"mb": 4.64,
"depth": 178.82,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 01:38:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11826485,
"orid": 11826644,
"magnitude": 5.32,
"magType": "ms",
"time": "2023-06-08 01:04:53",
"region": "JAWA, INDONESIA",
"lat": -8.85,
"lon": 110.56,
"ms": 5.32,
"ml": -999.0,
"mb": 5.48,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:30:01",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11825495,
"orid": 11825495,
"magnitude": 3.19,
"magType": "ml",
"time": "2023-06-08 00:20:34",
"region": "NORTH KOREA",
"lat": 38.62,
"lon": 127.85,
"ms": -999.0,
"ml": 3.19,
"mb": 3.75,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 00:36:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11825495, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:34:30" }
]
},
{
"evid": 11826286,
"orid": 11826641,
"magnitude": 0.2,
"magType": "ml",
"time": "2023-06-07 23:54:40",
"region": "CALIFORNIA-NEVADA BORDER REGION",
"lat": 37.47,
"lon": -118.06,
"ms": -999.0,
"ml": 0.2,
"mb": -999.0,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:30:01",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11825404,
"orid": 11826640,
"magnitude": 2.96,
"magType": "ml",
"time": "2023-06-07 23:31:23",
"region": "NEVADA",
"lat": 39.52,
"lon": -116.0,
"ms": -999.0,
"ml": 2.96,
"mb": -999.0,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:30:01",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11825371,
"orid": 11825371,
"magnitude": 3.62,
"magType": "ml",
"time": "2023-06-07 23:17:51",
"region": "NORTH KOREA",
"lat": 40.09,
"lon": 129.94,
"ms": -999.0,
"ml": 3.62,
"mb": 3.71,
"depth": 0.0,
"arsTable": 0,
"arsType": 0,
"arsTypeValue": "已告警",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 23:40:00",
"sourceAudit": 0,
"discardList": []
},
{
"evid": 11825298,
"orid": 11825298,
"magnitude": 3.73,
"magType": "mb",
"time": "2023-06-07 22:50:31",
"region": "TURKMENISTAN-IRAN BORDER REGION",
"lat": 36.98,
"lon": 59.79,
"ms": -999.0,
"ml": -999.0,
"mb": 3.73,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 23:06:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11825298, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-08 08:30:03" }
]
},
{
"evid": 11825252,
"orid": 11825252,
"magnitude": 2.71,
"magType": "ml",
"time": "2023-06-07 22:29:15",
"region": "NORTH KOREA",
"lat": 40.04,
"lon": 129.51,
"ms": -999.0,
"ml": 2.71,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 22:42:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11825252, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11824346,
"orid": 11825010,
"magnitude": 2.94,
"magType": "ml",
"time": "2023-06-07 14:30:03",
"region": "NORTH KOREA",
"lat": 40.81,
"lon": 128.67,
"ms": -999.0,
"ml": 2.94,
"mb": -999.0,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:30:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11824285,
"orid": 11824285,
"magnitude": 3.29,
"magType": "ml",
"time": "2023-06-07 13:45:20",
"region": "NORTH KOREA",
"lat": 40.81,
"lon": 127.57,
"ms": -999.0,
"ml": 3.29,
"mb": 3.08,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 14:00:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11824285, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 20:37:07" }
]
},
{
"evid": 11823915,
"orid": 11823915,
"magnitude": 2.96,
"magType": "ml",
"time": "2023-06-07 10:24:54",
"region": "NORTH KOREA",
"lat": 41.4,
"lon": 126.29,
"ms": -999.0,
"ml": 2.96,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 10:42:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11823915, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11823902,
"orid": 11824979,
"magnitude": 2.86,
"magType": "ml",
"time": "2023-06-07 10:13:03",
"region": "CALIFORNIA-NEVADA BORDER REGION",
"lat": 37.22,
"lon": -117.69,
"ms": -999.0,
"ml": 2.86,
"mb": -999.0,
"depth": 0.0,
"arsTable": 2,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-08 09:30:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11823741,
"orid": 11823741,
"magnitude": 1.73,
"magType": "ml",
"time": "2023-06-07 08:40:39",
"region": "UTAH",
"lat": 38.84,
"lon": -112.01,
"ms": -999.0,
"ml": 1.73,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 08:50:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11823741, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 09:05:18" }
]
},
{
"evid": 11823738,
"orid": 11823738,
"magnitude": 4.83,
"magType": "ml",
"time": "2023-06-07 08:27:30",
"region": "NORTH KOREA",
"lat": 39.17,
"lon": 128.3,
"ms": -999.0,
"ml": 4.83,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 08:46:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11823738, "reason": "Invalid detections", "auth": "tangwei", "lddate": "2023-06-07 09:05:01" }
]
},
{
"evid": 11823458,
"orid": 11823458,
"magnitude": 3.38,
"magType": "ml",
"time": "2023-06-07 06:10:48",
"region": "SOUTHERN INDIA",
"lat": 23.81,
"lon": 79.03,
"ms": -999.0,
"ml": 3.38,
"mb": 4.13,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 06:26:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11823458, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11823228,
"orid": 11823228,
"magnitude": 2.41,
"magType": "ml",
"time": "2023-06-07 04:17:32",
"region": "NORTH KOREA",
"lat": 40.16,
"lon": 128.32,
"ms": -999.0,
"ml": 2.41,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 04:26:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11823228, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:16:54" }
]
},
{
"evid": 11823233,
"orid": 11823233,
"magnitude": 4.3,
"magType": "mb",
"time": "2023-06-07 04:07:35",
"region": "SOUTHERN NEVADA",
"lat": 37.59,
"lon": -115.95,
"ms": -999.0,
"ml": -999.0,
"mb": 4.3,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 04:30:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11823233, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:16:41" }
]
},
{
"evid": 11823169,
"orid": 11823169,
"magnitude": 3.45,
"magType": "ml",
"time": "2023-06-07 03:30:34",
"region": "NORTH KOREA",
"lat": 39.65,
"lon": 127.38,
"ms": -999.0,
"ml": 3.45,
"mb": 3.78,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 03:50:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11823169, "reason": "Invalid association", "auth": "liuzh", "lddate": "2023-06-07 08:16:25" }
]
},
{
"evid": 11823157,
"orid": 11823157,
"magnitude": 3.68,
"magType": "ml",
"time": "2023-06-07 03:28:49",
"region": "NORTH KOREA",
"lat": 41.96,
"lon": 127.28,
"ms": -999.0,
"ml": 3.68,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 03:40:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11823157, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11823074,
"orid": 11823074,
"magnitude": 1.68,
"magType": "ml",
"time": "2023-06-07 02:38:21",
"region": "CALIFORNIA-NEVADA BORDER REGION",
"lat": 37.57,
"lon": -117.61,
"ms": -999.0,
"ml": 1.68,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 02:46:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11823074, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11822776,
"orid": 11822776,
"magnitude": 3.51,
"magType": "ml",
"time": "2023-06-07 00:14:18",
"region": "NORTH KOREA",
"lat": 39.91,
"lon": 126.42,
"ms": -999.0,
"ml": 3.51,
"mb": 3.14,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 00:42:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11822776, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:15:50" }
]
},
{
"evid": 11822801,
"orid": 11822801,
"magnitude": 3.73,
"magType": "ml",
"time": "2023-06-06 23:55:13",
"region": "INDIA-BANGLADESH BORDER REGION",
"lat": 23.11,
"lon": 92.02,
"ms": -999.0,
"ml": 3.73,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-07 00:52:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11822801, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-07 08:15:38" }
]
},
{
"evid": 11822450,
"orid": 11822459,
"magnitude": 3.18,
"magType": "ml",
"time": "2023-06-06 21:24:45",
"region": "WESTERN IRAN",
"lat": 33.67,
"lon": 48.63,
"ms": -999.0,
"ml": 3.18,
"mb": 4.33,
"depth": 0.0,
"arsTable": 1,
"arsType": 1,
"arsTypeValue": "真事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-06 21:58:00",
"sourceAudit": 1,
"discardList": []
},
{
"evid": 11822445,
"orid": 11822446,
"magnitude": 3.25,
"magType": "ml",
"time": "2023-06-06 21:24:25",
"region": "IRAN-IRAQ BORDER REGION",
"lat": 30.61,
"lon": 48.2,
"ms": -999.0,
"ml": 3.25,
"mb": 4.57,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-06 21:46:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11822445, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
},
{
"evid": 11822343,
"orid": 11822343,
"magnitude": 2.93,
"magType": "ml",
"time": "2023-06-06 20:12:42",
"region": "NORTH KOREA",
"lat": 40.29,
"lon": 129.07,
"ms": -999.0,
"ml": 2.93,
"mb": -999.0,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-06 20:26:00",
"sourceAudit": 1,
"discardList": [
{ "evid": 11822343, "reason": "Invalid detections", "auth": "liuzh", "lddate": "2023-06-06 21:33:23" }
]
},
{
"evid": 11822272,
"orid": 11822274,
"magnitude": 1.81,
"magType": "ml",
"time": "2023-06-06 19:14:05",
"region": "CALIFORNIA-NEVADA BORDER REGION",
"lat": 38.99,
"lon": -118.19,
"ms": -999.0,
"ml": 1.81,
"mb": 7.27,
"depth": 0.0,
"arsTable": 3,
"arsType": 2,
"arsTypeValue": "假事件",
"sourceType": "F",
"sourceTypeValue": "NDC快速产品",
"createTime": "2023-06-06 19:36:00",
"sourceAudit": 1,
"discardList": [{ "evid": 11822272, "reason": "系统自动拒绝", "auth": null, "lddate": null }]
}
],
"timestamp": 1686217634834
}

View File

@ -0,0 +1,13 @@
import Car from '@/assets/images/station-operation/car.png'
import GroudMonitoringStation from '@/assets/images/station-operation/groud-monitoring-station.png'
import ImsRnStation from '@/assets/images/station-operation/ims-rn-station.png'
import NuclearFacility from '@/assets/images/station-operation/nuclear-facility.png'
import Ship from '@/assets/images/station-operation/ship.png'
export {
Car,
GroudMonitoringStation,
ImsRnStation,
NuclearFacility,
Ship
}

View File

@ -1,3 +1,421 @@
<template>
<div>台站运行管理页面</div>
</template>
<div class="station-operation">
<!-- 左侧列表 -->
<div class="date-container">
<a-collapse v-model="activeKey" expandIconPosition="right" accordion>
<template slot="expandIcon">
<img src="@/assets/images/station-operation/toggle.png" alt="" />
</template>
<!-- All Date -->
<a-collapse-panel key="1">
<template slot="header">
<div class="title">
<div class="title-text">All Date</div>
<div class="title-rect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="title-operator">
<a-popover v-model="searchVisible" trigger="click" placement="bottom">
<div @click.stop="searchVisible = !searchVisible">
<img src="@/assets/images/station-operation/search.png" alt="" />
</div>
<template slot="content">
<a-input-search placeholder="input search text" @search="onSearch">
<img slot="enterButton" src="@/assets/images/station-operation/search.png" alt="" />
</a-input-search>
</template>
</a-popover>
<a-popover trigger="click" placement="bottom">
<div @click.stop>
<img src="@/assets/images/station-operation/filter.png" alt="" />
</div>
<template slot="content">
<div>筛选</div>
</template>
</a-popover>
</div>
</div>
</template>
<ScrollContainer direction="verticle" class="date-list">
<div class="date-list-content">
<div class="date-list-item" v-for="item of dateList" :key="item.id">
<h4 class="date-list-item-title">
{{ item.stationName }}
</h4>
<div class="date-list-item-container">
<div class="date-list-item-content">
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Station Type:</label>
<span>{{ item.stationType }}</span>
</div>
<div class="date-list-item-child" style="word-break: break-all">
<label>Altitude:</label>
<span>{{ item.altitude }}</span>
</div>
</div>
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Lon And Lat:</label>
<span>{{ item.lon }} {{ item.lat }}</span>
</div>
</div>
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Status:</label>
<span class="green">{{ item.status }}</span>
</div>
<div class="date-list-item-child">
<label>Signal:</label>
<span class="green">{{ item.signal }}</span>
</div>
</div>
</div>
</div>
</div>
<custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
</div>
<div class="shadow"></div>
</ScrollContainer>
</a-collapse-panel>
<!-- All Date End -->
<!-- Focus Date -->
<a-collapse-panel key="2">
<template slot="header">
<div class="title">
<div class="title-text" style="width: 180px">Focus Date</div>
<div class="title-rect">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</template>
<ScrollContainer direction="verticle" class="date-list">
<div class="date-list-content">
<div class="date-list-item" v-for="item of dateList" :key="item.id">
<h4 class="date-list-item-title">
{{ item.stationName }}
</h4>
<div class="date-list-item-container">
<div class="date-list-item-content">
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Station Type:</label>
<span>{{ item.stationType }}</span>
</div>
<div class="date-list-item-child" style="word-break: break-all">
<label>Altitude:</label>
<span>{{ item.altitude }}</span>
</div>
</div>
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Lon And Lat:</label>
<span>{{ item.lon }} {{ item.lat }}</span>
</div>
</div>
<div class="date-list-item-children">
<div class="date-list-item-child">
<label>Status:</label>
<span class="green">{{ item.status }}</span>
</div>
<div class="date-list-item-child">
<label>Signal:</label>
<span class="green">{{ item.signal }}</span>
</div>
</div>
</div>
</div>
</div>
<custom-empty v-if="!dateList || !dateList.length" style="margin-top: 40px"></custom-empty>
</div>
<div class="shadow"></div>
</ScrollContainer>
</a-collapse-panel>
<!-- Focus Date End -->
</a-collapse>
</div>
<!-- 右侧地图 -->
<div class="station-operation-map">
<Map />
</div>
</div>
</template>
<script>
import Map from './components/Map.vue'
import ScrollContainer from '@/components/ScrollContainer/index.vue'
const dateList = new Array(5).fill(0).map(() => ({
id: 1,
stationName: 'ARP01',
stationType: 'IMS Station',
altitude: '596m',
lon: 139.079722,
lat: 36.299972,
status: 'Operation',
signal: 'Normally'
}))
dateList.forEach((item, index) => (item.id = index))
export default {
components: {
Map,
ScrollContainer
},
data() {
return {
activeKey: '1',
isGettingDateList: false,
dateList: dateList,
searchVisible: false
}
},
methods: {
// All Date
onSearch() {
this.searchVisible = false
},
// All Date
onFilter() {}
}
}
</script>
<style lang="less" scoped>
.station-operation {
position: relative;
height: 100%;
.date-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 348px;
height: 100%;
background-color: rgba(2, 26, 29, 0.9);
padding-left: 5px;
z-index: 1;
::v-deep {
.ant-collapse {
height: 100%;
padding-bottom: 11px;
@titleHeight: 45px;
&-item {
max-height: calc(100% - @titleHeight);
display: flex;
flex-direction: column;
}
&-header {
min-height: @titleHeight;
border-top: 1px solid rgba(12, 235, 201, 0.3);
border-bottom: 4px solid rgba(12, 235, 201, 0.2);
height: auto;
.ant-collapse-arrow {
right: 9px;
transition: transform 0.24s;
transform-origin: 5px 11px;
}
}
&-content {
display: flex;
&-box {
display: flex;
width: 100%;
position: relative;
}
&.ant-motion-collapse-legacy {
.date-list {
overflow: hidden;
}
}
}
}
}
//
.title {
line-height: 40px;
position: relative;
display: flex;
justify-content: space-between;
font-family: MicrogrammaD-MediExte;
font-size: 18px;
font-weight: bold;
color: #0cebc9;
background-color: rgba(1, 18, 20, 0.6);
&-text {
padding-left: 20px;
width: 134px;
background-color: rgba(12, 235, 201, 0.05);
user-select: none;
}
&-rect {
display: flex;
align-items: center;
span {
background-color: rgba(12, 235, 201, 0.2);
vertical-align: middle;
&:first-child {
width: 4px;
height: 4px;
}
&:nth-child(2) {
width: 6px;
height: 6px;
margin-right: 6px;
}
&:nth-child(3) {
width: 4px;
height: 4px;
margin-right: 9px;
}
&:nth-child(4) {
width: 1px;
height: 16px;
margin-right: 23px;
}
&:nth-child(5) {
width: 2px;
height: 2px;
margin-right: 24px;
}
&:nth-child(6) {
width: 4px;
height: 4px;
}
}
}
&-operator {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 6px;
user-select: none;
div {
width: 24px;
height: 24px;
line-height: 18px;
text-align: center;
border: 1px solid #166464;
background-color: #053842;
cursor: pointer;
}
}
}
//
.date-list {
width: 100%;
margin-right: 2px;
padding: 2px 0 10px 7px;
overflow: auto;
&-item {
width: 322px;
&-title {
height: 25px;
line-height: 25px;
font-family: Arial;
font-size: 14px;
color: #fff;
font-weight: bold;
position: relative;
padding-left: 8px;
margin-bottom: 0;
}
&-container {
display: flex;
}
&-content {
width: 100%;
min-height: 80px;
padding: 10px 10px 10px 14px;
flex: 1;
color: #6ebad0;
background: url(~@/assets/images/station-operation/date-item-bg.png) center no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.date-list-item-children {
display: flex;
justify-content: space-between;
.date-list-item-child {
color: #fff;
&:nth-child(2n + 1) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&:nth-child(2n) {
width: 110px;
flex-shrink: 0;
margin-left: 5px;
}
label {
color: #6ebad0;
font-family: Arial;
}
span {
margin-left: 10px;
&.green {
color: #0cff00;
}
}
}
}
}
}
.shadow {
position: absolute;
bottom: 0;
width: calc(100% - 15px);
height: 50px;
background: linear-gradient(to top, #021c21 0, transparent 100%);
transition: opacity 0.24s linear;
}
&.scroll-end {
.shadow {
opacity: 0;
}
}
}
}
//
&-map {
width: 100%;
height: 100%;
}
}
</style>

View File

@ -683,7 +683,7 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
font-family: Aria;
font-family: Arial;
font-size: 14px;
color: #fff;
font-weight: bold;

View File

@ -213,10 +213,12 @@ export default {
.ant-form-item-children {
width: 444px;
height: 60px;
display: flex;
align-items: center;
.ant-input {
padding-left: 70px;
padding-right: 15px;
height: 100%;
margin-left: 70px;
margin-right: 15px;
height: 80%;
font-size: 26px;
background-color: transparent !important;
border: none;
@ -253,6 +255,9 @@ export default {
width: 294px;
background: url(~@/assets/images/login/validate-bg.png) center no-repeat;
background-size: contain;
margin-left: 0;
padding-left: 70px;
height: 100%;
}
.validate-image {