WIP: STATION OPERATION页左侧列表完成,地图绘制完成,标记物进行中
46
package.json
|
@ -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
|
||||
}
|
||||
|
|
BIN
src/assets/images/station-operation/car.png
Normal file
After Width: | Height: | Size: 2.9 KiB |
BIN
src/assets/images/station-operation/date-item-bg.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/station-operation/filter.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/station-operation/groud-monitoring-station.png
Normal file
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/images/station-operation/ims-rn-station.png
Normal file
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/station-operation/nuclear-facility.png
Normal file
After Width: | Height: | Size: 3.3 KiB |
BIN
src/assets/images/station-operation/search.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/station-operation/ship.png
Normal file
After Width: | Height: | Size: 4.1 KiB |
BIN
src/assets/images/station-operation/toggle.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
45
src/components/ScrollContainer/index.vue
Normal 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>
|
|
@ -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;
|
||||
|
|
170
src/views/stationOperation/components/Map.vue
Normal 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>
|
850
src/views/stationOperation/components/data.json
Normal 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
|
||||
}
|
13
src/views/stationOperation/components/markerImage.js
Normal 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
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|