gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-1563 feat: 调整逻辑、删除demo

Browse Source
This commit is contained in:
chenjinsong
2024-03-04 17:28:05 +08:00
parent 4b910d3cef
commit 0b96157948
15 changed files with 25 additions and 17904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

857
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -13,16 +13,11 @@
"@amcharts/amcharts4": "^4.10.38", "@amcharts/amcharts4": "^4.10.38",
"@amcharts/amcharts4-geodata": "^4.1.20", "@amcharts/amcharts4-geodata": "^4.1.20",
"@antv/g6": "^4.8.17", "@antv/g6": "^4.8.17",
"@deck.gl/mapbox": "^8.9.34",
"@deck.gl/geo-layers": "^8.9.34",
"@turf/meta": "^6.5.0",
"axios": "^0.21.1", "axios": "^0.21.1",
"babel-plugin-lodash": "~3.3.0", "babel-plugin-lodash": "~3.3.0",
"codemirror": "^5.65.1", "codemirror": "^5.65.1",
"core-js": "~3.31.0", "core-js": "~3.31.0",
"d3-array": "^3.2.4",
"dayjs": "^1.10.5", "dayjs": "^1.10.5",
"deck.gl": "^8.9.34",
"dexie": "~3.2.0", "dexie": "~3.2.0",
"echarts": "^5.1.1", "echarts": "^5.1.1",
"element-plus": "~1.0.2-beta.71", "element-plus": "~1.0.2-beta.71",

2
public/config.js
View File

@@ -1,6 +1,6 @@
const BASE_CONFIG = { const BASE_CONFIG = {
baseUrl: 'http://192.168.44.54:8090/', baseUrl: 'http://192.168.44.54:8090/',
version: '23.12', version: '24.03',
apiVersion: 'v1' apiVersion: 'v1'
} }
// 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数 // 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数

167
src/Temp.vue
View File

@@ -1,167 +0,0 @@
<template>
<div class="geo-analysis">
<el-tabs v-model="activeTab">
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
</el-tabs>
<div class="geo-analysis__container">
<div class="analysis-map" id="analysisMap"></div>
<div class="analysis-statistics"></div>
</div>
</div>
</template>
<style lang="scss">
.geo-analysis {
display: flex;
flex-direction: column;
padding: 0 20px 20px;
.el-tabs {
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
height: 0;
}
.el-tabs__active-bar {
height: 3px;
background-color: #046eca;
}
.el-tabs__item {
&.is-active {
color: #046eca;
}
height: 50px;
line-height: 50px;
font-size: 20px;
color: #353636;
}
}
.geo-analysis__container {
height: calc(100% - 50px);
display: flex;
.analysis-map {
flex: 1;
}
.analysis-statistics {
width: 330px;
}
}
}
</style>
<script>
import { ref, shallowRef } from 'vue'
import { getNowTime } from '@/utils/date-util'
import maplibregl from 'maplibre-gl'
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
import 'maplibre-gl/dist/maplibre-gl.css'
import { MapboxOverlay } from '@deck.gl/mapbox'
import { HexagonLayer } from '@deck.gl/aggregation-layers'
import _data from '@/test/nyc_crashes.json'
export default {
name: 'Temp',
data () {
return {
activeTab: 'locationMap', // locationMap/traceTracking
}
},
methods: {
init () {
const _this = this
const map = new maplibregl.Map({
container: 'analysisMap',
style: mapStyle,
center: this.center,
maxZoom: this.maxZoom,
minZoom: this.minZoom,
zoom: 10
})
const data = []
_data.features.forEach(item => {
data.push({
coordinates: item.geometry.coordinates,
value: Math.random() * 100
})
})
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
fetch(`${params.url.split('://')[1]}`)
.then(t => {
if (t.status == 200) {
t.arrayBuffer().then(arr => {
callback(null, arr, null, null)
})
} else {
callback(new Error(`Tile fetch error: ${t.statusText}`))
}
})
.catch(e => {
callback(new Error(e))
})
return { cancel: () => { } }
})
const colorRange = [
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
]
const hexagon = new MapboxOverlay({
layers: [
new HexagonLayer({
id: 'hex',
colorRange,
coverage: 1,
radius: 500,
extruded: false,
data,
wireframe: true,
stroked: true,
getPosition: d => d.coordinates,
pickable: true,
getLineColor: d => [0, 0, 0],
getLineWidth: () => 2,
getFillColor: d => [255, 255, 255]
})
],
getTooltip: ({ object }) => object && {
html: `<h2>${object.index}</h2><div>${object.position}</div>`,
style: {
backgroundColor: '#fff',
fontSize: '1em'
}
}
})
map.addControl(hexagon)
}
},
async mounted () {
this.init()
},
setup () {
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
const tooltip = ref({
showTooltip: false
})
const myChart = shallowRef({})
return {
timeFilter,
tooltip,
myChart,
maxZoom: 13,
minZoom: 1,
center: [-73.94539, 40.841843] // [116.38, 39.9]
}
}
}
</script>

152
src/Temp2.vue
View File

@@ -1,152 +0,0 @@
<template>
<div class="geo-analysis">
<el-tabs v-model="activeTab">
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
</el-tabs>
<div class="geo-analysis__container">
<div class="analysis-map" id="analysisMap2"></div>
<div class="analysis-statistics"></div>
</div>
</div>
</template>
<style lang="scss">
.geo-analysis {
display: flex;
flex-direction: column;
padding: 0 20px 20px;
.el-tabs {
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
height: 0;
}
.el-tabs__active-bar {
height: 3px;
background-color: #046eca;
}
.el-tabs__item {
&.is-active {
color: #046eca;
}
height: 50px;
line-height: 50px;
font-size: 20px;
color: #353636;
}
}
.geo-analysis__container {
height: calc(100% - 50px);
display: flex;
.analysis-map {
flex: 1;
}
.analysis-statistics {
width: 330px;
}
}
}
</style>
<script>
import { ref, shallowRef } from 'vue'
import { getNowTime } from '@/utils/date-util'
import maplibregl from 'maplibre-gl'
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
import 'maplibre-gl/dist/maplibre-gl.css'
import { MapboxOverlay } from '@deck.gl/mapbox'
import { H3HexagonLayer } from '@deck.gl/geo-layers'
import _data from '@/test/nyc_crashes.json'
import { h3ToGeo, geoToH3, h3ToGeoBoundary } from 'h3-js'
export default {
name: 'Temp',
data () {
return {
activeTab: 'locationMap', // locationMap/traceTracking
}
},
methods: {
init () {
const _this = this
const map = new maplibregl.Map({
container: 'analysisMap2',
style: mapStyle,
center: this.center,
maxZoom: this.maxZoom,
minZoom: this.minZoom,
zoom: 10
})
const data = []
_data.features.forEach(item => {
data.push({
hex: geoToH3(item.geometry.coordinates[1], item.geometry.coordinates[0], 9),
value: Math.random()
})
})
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
fetch(`${params.url.split('://')[1]}`)
.then(t => {
if (t.status == 200) {
t.arrayBuffer().then(arr => {
callback(null, arr, null, null)
})
} else {
callback(new Error(`Tile fetch error: ${t.statusText}`))
}
})
.catch(e => {
callback(new Error(e))
})
return { cancel: () => { } }
})
const hexagon = new MapboxOverlay({
layers: [
new H3HexagonLayer({
id: 'hex',
data: data,
elevationScale: 20,
extruded: false,
filled: true,
getFillColor: d => [255, (1 - d.value) * 255, 0, 160],
getLineColor: d => [255, (1 - d.value) * 255 * 1.5 > 255 ? 255 : (1 - d.value) * 255 * 1.5, 0],
getLineWidth: 20,
getHexagon: d => d.hex,
wireframe: false,
pickable: true
})
]
})
map.addControl(hexagon)
}
},
async mounted () {
this.init()
},
setup () {
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
const tooltip = ref({
showTooltip: false
})
const myChart = shallowRef({})
return {
timeFilter,
tooltip,
myChart,
maxZoom: 13,
minZoom: 1,
center: [-73.94539, 40.841843] // [116.38, 39.9]
}
}
}
</script>

1053
src/Temp3.vue
View File

File diff suppressed because it is too large Load Diff

197
src/Temp4.vue
View File

@@ -1,197 +0,0 @@
<template>
<div class="geo-analysis">
<el-tabs v-model="activeTab">
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
</el-tabs>
<div class="geo-analysis__container">
<div class="analysis-map" id="analysisMap4"></div>
<div class="analysis-statistics"></div>
</div>
</div>
</template>
<style lang="scss">
.geo-analysis {
display: flex;
flex-direction: column;
padding: 0 20px 20px;
.el-tabs {
.el-tabs__header {
margin-bottom: 0;
}
.el-tabs__nav-wrap::after {
height: 0;
}
.el-tabs__active-bar {
height: 3px;
background-color: #046eca;
}
.el-tabs__item {
&.is-active {
color: #046eca;
}
height: 50px;
line-height: 50px;
font-size: 20px;
color: #353636;
}
}
.geo-analysis__container {
height: calc(100% - 50px);
display: flex;
.analysis-map {
flex: 1;
}
.analysis-statistics {
width: 330px;
}
}
.geo-analysis__hexagon-tooltip {
position: fixed;
background-color: rgba(255,255,255,0.80);
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
border-radius: 2px;
&.geo-analysis__hexagon-tooltip--hexagon {
width: 185px;
}
.hexagon-tooltip__header {
position: relative;
display: flex;
flex-direction: column;
padding: 10px 0 10px 63px;
color: white;
.header__icon {
position: absolute;
left: 14px;
top: 16px;
}
.header__title {
font-size: 16px;
}
.header__content {
font-size: 14px;
}
}
.hexagon-tooltip__body {
padding: 8px 18px;
.body__item {
display: flex;
.item__label {
width: 60px;
font-size: 12px;
color: #353636;
}
.item__value {
font-size: 12px;
color: #233447;
}
}
}
}
}
</style>
<script>
import { ref, shallowRef } from 'vue'
import { getNowTime } from '@/utils/date-util'
import maplibregl from 'maplibre-gl'
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
import 'maplibre-gl/dist/maplibre-gl.css'
import _data4 from '@/test/nyc_crashes3.json'
import _data2 from '@/test/humanAndStation.json'
import _data3 from '@/test/testHex.json'
import hexbinDataConverter from '@/utils/hexbinDataConverter'
export default {
name: 'Temp',
data () {
return {
activeTab: 'locationMap', // locationMap/traceTracking
// colorRamp: ['#9CAE1D', '#3F85BA', '#253780']
colorRamp: ['156,174,29', '63,133,186', '37,55,128'],
tooltipType: {
hexagon: 'hexagon',
baseStation: 'base-station',
human: 'human'
}
}
},
methods: {
init () {
const _this = this
const map = new maplibregl.Map({
container: 'analysisMap4',
style: mapStyle,
center: this.center,
maxZoom: this.maxZoom,
minZoom: this.minZoom,
zoom: 10
})
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
fetch(`${params.url.split('://')[1]}`)
.then(t => {
if (t.status == 200) {
t.arrayBuffer().then(arr => {
callback(null, arr, null, null)
})
} else {
callback(new Error(`Tile fetch error: ${t.statusText}`))
}
})
.catch(e => {
callback(new Error(e))
})
return { cancel: () => { } }
})
map.on('load', function () {
map.addSource('hexGrid', {
type: 'geojson',
data: _data4
})
map.addLayer({
id: 'crashesHexGrid',
type: 'fill',
source: 'hexGrid',
layout: {},
paint: {
'fill-color': '#088',
'fill-opacity': 0.8
}
})
})
}
},
async mounted () {
this.init()
},
setup () {
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
const timeFilter = ref({ dateRangeValue })
const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = startTime
timeFilter.value.endTime = endTime
const tooltip = ref({
showTooltip: false,
type: ''
})
const myChart = shallowRef({})
const currentPoint = ref({})
return {
timeFilter,
tooltip,
myChart,
currentPoint,
maxZoom: 13,
minZoom: 1,
center: [-73.94539, 40.841843] // [116.38, 39.9]
}
}
}
</script>

19
src/permission.js
View File

@@ -36,24 +36,7 @@ router.beforeEach(async (to, from, next) => {
path: '/', path: '/',
name: 'home', name: 'home',
component: () => import('@/components/layout/Home'), component: () => import('@/components/layout/Home'),
children: [ children: []
{
path: '/temp',
component: () => import('@/Temp')
},
{
path: '/temp2',
component: () => import('@/Temp2')
},
{
path: '/temp3',
component: () => import('@/Temp3')
},
{
path: '/temp4',
component: () => import('@/Temp4')
}
]
} }
handleRoutes(menuList, homeRoute.children) handleRoutes(menuList, homeRoute.children)
router.addRoute(homeRoute) router.addRoute(homeRoute)

330
src/test/humanAndStation.json
View File

@@ -1,330 +0,0 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.789536,
40.666008
]
},
"properties": {
"data": {
"cartodb_id": 14703,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-01T00:00:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.964806,
40.759983
]
},
"properties": {
"data": {
"cartodb_id": 11711,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:56:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.87038,
40.673008
]
},
"properties": {
"data": {
"cartodb_id": 11712,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:45:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.96667,
40.617275
]
},
"properties": {
"data": {
"cartodb_id": 11716,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:10:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.80331,
40.66764
]
},
"properties": {
"data": {
"cartodb_id": 11717,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:00:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.987206,
40.61179
]
},
"properties": {
"data": {
"cartodb_id": 11718,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:00:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "human"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.00929,
40.64266
]
},
"properties": {
"data": {
"cartodb_id": 11719,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T22:00:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.87207,
40.827282
]
},
"properties": {
"data": {
"cartodb_id": 11720,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:55:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.85261,
40.70509
]
},
"properties": {
"data": {
"cartodb_id": 11721,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:48:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-74.00578,
40.71482
]
},
"properties": {
"data": {
"cartodb_id": 11723,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:30:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.84598,
40.739693
]
},
"properties": {
"data": {
"cartodb_id": 11727,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:15:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.84565,
40.740017
]
},
"properties": {
"data": {
"cartodb_id": 11728,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:07:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-73.95311,
40.798523
]
},
"properties": {
"data": {
"cartodb_id": 11729,
"number_of_pedestrian_killed": 0,
"number_of_pedestrian_injured": 0,
"number_of_motorist_killed": 0,
"number_of_motorist_injured": 0,
"number_of_cyclist_killed": 0,
"number_of_cyclist_injured": 0,
"date_val": "2017-03-06T21:04:00Z",
"total_injuries": 0,
"total_fatalities": 0,
"crash_type": "base-station"
}
}
}
]
}

12305
src/test/nyc_crashes.json
View File

File diff suppressed because it is too large Load Diff

1
src/test/nyc_crashes2.json
View File

File diff suppressed because one or more lines are too long

87
src/test/nyc_crashes3.json
View File

@@ -1,87 +0,0 @@
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-74,
40
],
[
-73.5,
40
],
[
-73.25,
40.433
],
[
-73.5,
40.866
],
[
-74,
40.866
],
[
-74.25,
40.433
],
[
-74,
40
]
]
]
},
"properties": {
"data": "[{\"cartodb_id\":11786,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T18:14:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"},{\"cartodb_id\":11803,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T17:45:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"}]"
}
},
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
-74,
10
],
[
-73.5,
10
],
[
-73.25,
10.433
],
[
-73.5,
10.866
],
[
-74,
10.866
],
[
-74.25,
10.433
],
[
-74,
10
]
]
]
},
"properties": {
"data": "[{\"cartodb_id\":11786,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T18:14:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"},{\"cartodb_id\":11803,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T17:45:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"}]"
}
}
]
}

2657
src/test/testHex.json
View File

File diff suppressed because it is too large Load Diff

51
src/utils/hexbinDataConverter.js
View File

@@ -1,51 +0,0 @@
import turf from 'turf'
import { propEach, featureReduce } from '@turf/meta'
import simpleStats from 'simple-statistics'
import { extent } from 'd3-array'
// cellSize: 六角网格每一边的大小（公里）
export default function hexbinDataConverter (data, cellSize = 0.5) {
// 纽约的粗略地理边界框
const bbox = [-74.24939, 40.50394, -73.701195, 40.90995]
// const bbox = [74, 18, 136, 42]
// const bbox = [74, 18, 136, 54]
// 为给定的 bbox 和cellSize创建 hexbin（六边形） 几何形状
const hexGrid = turf.hexGrid(bbox, cellSize)
// 对我们的六边形几何体和数据点执行“空间连接”
const collected = turf.collect(hexGrid, data, 'data', 'data')
// 为每个六边形设置一个唯一id
collected.features.forEach((feature, i) => {
feature.id = i
})
// 过滤掉没有连接数据的多边形
collected.features = collected.features.filter(d => d.properties.data.length)
// 计算每个六边形里点的总数 count
propEach(collected, props => {
props.count = props.data.reduce((acc, cur) => acc += 1, 0)
})
// 将 count 拎出来
const reduced = featureReduce(collected, (acc, cur) => {
acc.push(cur.properties.count)
return acc
}, [])
// 用 ckmeans 算法将值按大小分成3（设计图中的颜色数量）层
const levels = simpleStats.ckmeans(reduced, 3)
// 将六边形层级和该层的范围添加到数据中
propEach(collected, props => {
levels.forEach((level, index) => {
if (level.indexOf(props.count) > -1) {
props.level = index
props.levelRange = extent(level)
}
})
})
return collected
}

46
src/views/location/Index.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="geo-analysis"> <div class="geo-analysis">
<el-tabs v-model="activeTab"> <el-tabs v-model="activeTab">
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane> <el-tab-pane :label="$t('location.locationMap')" name="locationMap"></el-tab-pane>
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane> <el-tab-pane :label="$t('location.traceTracking')" name="traceTracking"></el-tab-pane>
</el-tabs> </el-tabs>
<!-- 右上角工具栏 --> <!-- 右上角工具栏 -->
<div class="geo-tools"> <div class="geo-tools">
@@ -73,7 +73,7 @@
<div class="analysis-statistics" v-show="activeTab === 'locationMap'"> <div class="analysis-statistics" v-show="activeTab === 'locationMap'">
<div class="analysis-statistics__chart"> <div class="analysis-statistics__chart">
<simple-loading size="small" placement="top-end" :loading="loading.pieLoading"></simple-loading> <simple-loading size="small" placement="top-end" :loading="loading.pieLoading"></simple-loading>
<div class="chart__header">{{$t('locationIntelligence.populationDensity')}}</div> <div class="chart__header">{{$t('location.populationDensity')}}</div>
<div class="chart__body"> <div class="chart__body">
<div class="chart__drawing" id="populationDensityChart"></div> <div class="chart__drawing" id="populationDensityChart"></div>
<div class="chart__legend"> <div class="chart__legend">
@@ -87,7 +87,7 @@
</div> </div>
<div class="analysis-statistics__chart"> <div class="analysis-statistics__chart">
<simple-loading size="small" placement="top-end" :loading="loading.lineLoading"></simple-loading> <simple-loading size="small" placement="top-end" :loading="loading.lineLoading"></simple-loading>
<div class="chart__header">{{$t('locationIntelligence.activeSubscribers')}}</div> <div class="chart__header">{{$t('location.activeSubscribers')}}</div>
<div class="chart__statistics"> <div class="chart__statistics">
<div class="statistics-number">{{activeCount}}</div> <div class="statistics-number">{{activeCount}}</div>
<div class="statistics-trend">{{activeCountChain === '-' ? '-' : (activeCountChain < 0 ? '-'+valueToRangeValue(Math.abs(activeCountChain), unitTypes.percent).join(' '): valueToRangeValue(activeCountChain, unitTypes.percent).join(' '))}}</div> <div class="statistics-trend">{{activeCountChain === '-' ? '-' : (activeCountChain < 0 ? '-'+valueToRangeValue(Math.abs(activeCountChain), unitTypes.percent).join(' '): valueToRangeValue(activeCountChain, unitTypes.percent).join(' '))}}</div>
@@ -272,7 +272,7 @@
<div class="item__label">{{$t('overall.location')}}</div> <div class="item__label">{{$t('overall.location')}}</div>
<div class="item__value">China, Shanghai</div> <div class="item__value">China, Shanghai</div>
</div> </div>
<div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('geo.traceTracking')}}</div> <div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('location.traceTracking')}}</div>
</template> </template>
<template v-else-if="tooltip.type === tooltipType.baseStation"> <template v-else-if="tooltip.type === tooltipType.baseStation">
<div class="body__item"> <div class="body__item">
@@ -283,18 +283,10 @@
<div class="item__label">Mobile Network Code</div> <div class="item__label">Mobile Network Code</div>
<div class="item__value">1</div> <div class="item__value">1</div>
</div> </div>
<div class="body__item">
<div class="item__label">Signal Strength</div>
<div class="item__value">4</div>
</div>
<div class="body__item"> <div class="body__item">
<div class="item__label">Communication Type</div> <div class="item__label">Communication Type</div>
<div class="item__value">4G</div> <div class="item__value">4G</div>
</div> </div>
<div class="body__item">
<div class="item__label">Number of Online</div>
<div class="item__value">1442</div>
</div>
<div class="body__item"> <div class="body__item">
<div class="item__label">{{$t('overall.location')}}</div> <div class="item__label">{{$t('overall.location')}}</div>
<div class="item__value">China, Shanghai</div> <div class="item__value">China, Shanghai</div>
@@ -599,14 +591,6 @@ export default {
} }
try { try {
const response = await axios.get(api.location.tracking, { params }) const response = await axios.get(api.location.tracking, { params })
/*response.data.data.result.forEach(r => {
const find = this.trackingSubscribers.find(item => item.subscriberId === r.subscriberId)
if (find) {
find.trackRecords = r.trackRecords
} else {
find.trackRecords = []
}
})*/
if (response.data.data.result) { if (response.data.data.result) {
this.trackingSubscribers.forEach(s => { this.trackingSubscribers.forEach(s => {
const find = response.data.data.result.find(item => item.subscriberId === s.subscriberId) const find = response.data.data.result.find(item => item.subscriberId === s.subscriberId)
@@ -644,6 +628,8 @@ export default {
} finally { } finally {
this.loading.trackingMapLoading = false this.loading.trackingMapLoading = false
} }
} else {
this.loading.trackingMapLoading = false
} }
}, },
renderTrackingHexagon () { renderTrackingHexagon () {
@@ -1002,7 +988,9 @@ export default {
} }
}, },
changeCurrentShowSubscriber (subscriber) { changeCurrentShowSubscriber (subscriber) {
this.currentShowSubscriber = subscriber if (subscriber.subscriberId !== this.currentShowSubscriber.subscriberId) {
this.currentShowSubscriber = subscriber
}
}, },
// 地图上人图标鼠标悬浮框中点击追踪事件 // 地图上人图标鼠标悬浮框中点击追踪事件
trackSubscriber (subscriber) { trackSubscriber (subscriber) {
@@ -1182,6 +1170,12 @@ export default {
this.initTraceTrackingTab() this.initTraceTrackingTab()
} }
}, },
trackingSubscribers: {
deep: true,
handler (n) {
sessionStorage.setItem(storageKey.trackingSubscriberIds, JSON.stringify(n.map(item => item.subscriberId)))
}
},
// 控制map loading // 控制map loading
'loading.hexagonLoading': { 'loading.hexagonLoading': {
handler (n) { handler (n) {
@@ -1243,11 +1237,11 @@ export default {
// 优先级：url > config.js > 默认值。 // 优先级：url > config.js > 默认值。
const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60) const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)
const timeFilter = ref({ dateRangeValue }) const timeFilter = ref({ dateRangeValue })
if (!startTimeParam || !endTimeParam) { if (!startTimeParam || !endTimeParam || dateRangeValue > -1) {
const { startTime, endTime } = getNowTime(dateRangeValue) const { startTime, endTime } = getNowTime(dateRangeValue)
timeFilter.value.startTime = getSecond(startTime) timeFilter.value.startTime = getSecond(startTime)
timeFilter.value.endTime = getSecond(endTime) timeFilter.value.endTime = getSecond(endTime)
// 如果没有时间参数，就将参数写入url // 将参数写入url
const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue }) const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
overwriteUrl(newUrl) overwriteUrl(newUrl)
} else { } else {
@@ -1280,8 +1274,8 @@ export default {
// 从localStorage中获取数据 // 从localStorage中获取数据
const trackingSubscribers = ref([]) const trackingSubscribers = ref([])
/*localStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(localStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id }))) sessionStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(sessionStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id, show: false, showLine: false })))
const test = ['gary6411', 'test6431', 'test6430', 'test6422'] /*const test = ['gary6411', 'test6431', 'test6430', 'test6422']
test.forEach(id => { test.forEach(id => {
trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false }) trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false })
})*/ })*/