Skip to content

G
geography-dataview
Commit 1a3b69c5 authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

调整优化

parent 34172a7d
Hide whitespace changes
Inline Side-by-side
Showing with 192 additions and 185 deletions
src/components/MonitorComponents/MonitorMap/monitor-map.vue
View file @ 1a3b69c5
......@@ -8,18 +8,14 @@ import SMap from './esm/SMap'
export default {
name: 'MonitorMap',
props: {
mapUrl: {
type: String,
default: 'http://www.962121.net/gis_system/smimap/index.html#/',
},
iconUrl: {
type: String,
default: 'http://www.962121.net/hmfmstest/shanghaiwuye/web/dataV/propertyinspector/static/icons/',
},
mapJs: {
mode: {
type: String,
default: 'http://www.962121.net/gis_system/smimap/mapdebug/ShsmiGis.Bridge.js',
},
default: '3D',
}
},
data() {
return {
......@@ -27,59 +23,41 @@ export default {
}
},
mounted() {
// this.inject().then(this.initMap)
this.map = new SMap.Map('map', {
viewMode: '2D',
viewMode: this.mode,
center: [0, 0],
zoom: 5,
pitch: 60,
zooms: [1, 12],
// mapStyle: 'smap://styles/dark'
mapStyle: 'smap://styles/dark'
}).on(SMap.MapEvent.maploaded, () => {
this.$emit('complete', this.map)
this.addEventListener()
})
},
computed: {
sizeRate() {
return Math.floor(screen.height * 1.48 / 100 / 11)
return Number((screen.height / 800).toFixed(1))
},
},
methods: {
inject() {
return new Promise(resolve => {
if (document.getElementById('_mapjs')) {
resolve()
return
}
const mapjs = document.createElement('script')
mapjs.type = 'text/javascript'
mapjs.src = this.mapJs
mapjs.setAttribute('id', '_mapjs')
document.head.appendChild(mapjs)
window.onload = () => resolve()
})
},
initMap() {
const {ShsmiGis} = window
this.map = new ShsmiGis.Bridge({
id: 'map',
url: this.mapUrl,
onReady: () => {
// console.log('地图创建完成')
this.addListener()
this.$emit('complete')
}
addEventListener() {
this.map.on(SMap.MapEvent.click, (view, param) => {
console.log('地图点击----', view, param)
view.hitTest(param).then(async res => {
console.log('地图点击 回调---', res)
})
})
},
addListener() {
this.map.addEventListener(arg => {
switch (arg.action.toLowerCase()) {
case 'selectfeatures':
if (!arg.layername) return
this.$emit('event', arg)
break
default:
break
}
}, this)
// this.map.addEventListener(arg => {
// switch (arg.action.toLowerCase()) {
// case 'selectfeatures':
// if (!arg.layername) return
// this.$emit('event', arg)
// break
// default:
// break
// }
// }, this)
},
/**
......@@ -94,14 +72,17 @@ export default {
*/
addPoint({name, mode = 'add', key, data, labelKey = null, icon = 'test.png', size = 20, color}) {
if (!this.map) return
this.removePoint(name)
const params = this.getMapParams({data, key, labelKey, icon, size, color})
params.name = name
params.mode = mode
this.map.Invoke({
ActionName: 'displayJsonData',
Parameters: JSON.stringify(params),
})
// this.removePoint(name)
// const params = this.getMapParams({data, key, labelKey, icon, size, color})
// params.name = name
// params.mode = mode
// this.map.Invoke({
// ActionName: 'displayJsonData',
// Parameters: JSON.stringify(params),
// })
const markerGroup = new SMap.OverlayGroup(this.getMapParams({data, key, labelKey, icon, size, color}))
this.map.add(markerGroup)
return markerGroup
},
/**
......@@ -110,13 +91,14 @@ export default {
*/
removePoint(name) {
if (!this.map) return
this.map.Invoke({
ActionName: 'displayJsonData',
Parameters: JSON.stringify({
name,
mode: 'delete',
})
})
// this.map.Invoke({
// ActionName: 'displayJsonData',
// Parameters: JSON.stringify({
// name,
// mode: 'delete',
// })
// })
this.map.remove(name)
},
/**
......@@ -129,76 +111,100 @@ export default {
* @param {String} color [可选 - 标签颜色（默认'#47B3FF'）]
*/
getMapParams({data = [], key, labelKey, icon, size, color = '#47B3FF'}) {
const dataArray = []
const uniqueValueInfos = []
const fieldJsonArray = []
for (const e in data[0]) {
fieldJsonArray.push({
name: e,
alias: e,
type: 'string'
if (data.length === 0) return []
return data.map(item => {
return new SMap.Marker({
icon: new SMap.Icon({
size: new SMap.size(size * this.sizeRate, size * this.sizeRate),
// image: this.iconUrl + (item.icon || icon)
image: require(`@/assets/images/${item.icon || icon}`)
}),
attributes: {...item},
label: labelKey ? (new SMap.Label({
text: item[labelKey],
size: size * this.sizeRate,
color,
xoffset: 0.1,
yoffset: 0.1,
// zoffset: 10,
horizontalAlignment: 'left',
verticalAlignment: 'top',
})) : null,
position: [item.X || item.x, item.Y || item.y, 0],
})
}
fieldJsonArray.push({
name: 'name',
alias: '标签',
type: 'string',
})
data.forEach(item => {
const array = {
codX: item.X || item.x,
codY: item.Y || item.y,
codZ: 0,
attrs: {
...item,
},
}
if (labelKey) {
array.attrs.name = item[labelKey]
} else {
array.attrs.name = ''
}
dataArray.push(array)
uniqueValueInfos.push({
value: item[key],
label: (item[labelKey] || item[key]) + '',
symbol: {
type: 'point-3d',
symbolLayers: [
{
type: 'icon',
size: size * this.sizeRate,
resource: {
href: this.iconUrl + (item.icon || icon),
},
},
]
}
})
})
return {
dataArray,
popupEnabled: false, // 是否打开弹出框
legendVisible: false, // 图例是否可见
type: 'point',
fieldJsonArray,
renderer: {
type: 'unique-value',
field: key,
defaultLabel: '无数据',
uniqueValueInfos,
},
labelsymbol: {
symbol: {
type: 'text',
color: color,
// color: '#00f2ff',
haloSize: 0,
haloColor: 'white',
},
labelPlacement: 'center-right',
}
}
// const dataArray = []
// const uniqueValueInfos = []
// const fieldJsonArray = []
// for (const e in data[0]) {
// fieldJsonArray.push({
// name: e,
// alias: e,
// type: 'string'
// })
// }
// fieldJsonArray.push({
// name: 'name',
// alias: '标签',
// type: 'string',
// })
// data.forEach(item => {
// const array = {
// codX: item.X || item.x,
// codY: item.Y || item.y,
// codZ: 0,
// attrs: {
// ...item,
// },
// }
// if (labelKey) {
// array.attrs.name = item[labelKey]
// } else {
// array.attrs.name = ''
// }
// dataArray.push(array)
// uniqueValueInfos.push({
// value: item[key],
// label: (item[labelKey] || item[key]) + '',
// symbol: {
// type: 'point-3d',
// symbolLayers: [
// {
// type: 'icon',
// size: size * this.sizeRate,
// resource: {
// href: this.iconUrl + (item.icon || icon),
// },
// },
// ]
// }
// })
// })
// return {
// dataArray,
// popupEnabled: false, // 是否打开弹出框
// legendVisible: false, // 图例是否可见
// type: 'point',
// fieldJsonArray,
// renderer: {
// type: 'unique-value',
// field: key,
// defaultLabel: '无数据',
// uniqueValueInfos,
// },
// labelsymbol: {
// symbol: {
// type: 'text',
// color: color,
// // color: '#00f2ff',
// haloSize: 0,
// haloColor: 'white',
// },
// labelPlacement: 'center-right',
// }
// }
},
/**
......@@ -258,39 +264,42 @@ export default {
console.error('传入的坐标点不能为空')
return
}
const params = {
codX: x,
codY: y,
zoomlevel: zoom,
}
this.map.Invoke({
ActionName: 'goToPosition',
Parameters: JSON.stringify(params),
})
// const params = {
// codX: x,
// codY: y,
// zoomlevel: zoom,
// }
// this.map.Invoke({
// ActionName: 'goToPosition',
// Parameters: JSON.stringify(params),
// })
this.map.setZoomAndCenter(zoom, this.mode === '3D' ? [x, y, 0] : [x, y])
},
/**
* ------ 放大 -------
*/
zoomIn() {
this.map.Invoke({
ActionName: 'mapzoom',
Parameters: {
'zoommode': 'zoomin',
}
})
// this.map.Invoke({
// ActionName: 'mapzoom',
// Parameters: {
// 'zoommode': 'zoomin',
// }
// })
this.map.setZoom(+this.map.getZoom() + .5)
},
/**
* ------ 缩小 -------
*/
zoomOut() {
this.map.Invoke({
ActionName: 'mapzoom',
Parameters: {
'zoommode': 'zoomout',
}
})
// this.map.Invoke({
// ActionName: 'mapzoom',
// Parameters: {
// 'zoommode': 'zoomout',
// }
// })
this.map.setZoom(+this.map.getZoom() - .5)
},
},
}
......
src/views/community-summary.vue
View file @ 1a3b69c5
......@@ -2,14 +2,14 @@
<div class="community-summary">
<template v-if="list.length > 0">
<div>
<div v-for="item in list.slice(0, 8)" :key="item.name">
<div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.name">
<img src="@/assets/images/location.png"/>
<p>{{item.name}}</p>
<b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
</div>
</div>
<div>
<div v-for="item in list.slice(8)" :key="item.name">
<div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.name">
<img src="@/assets/images/location.png"/>
<p>{{item.name}}</p>
<b><m-count :value="item.value" :decimal="0" style="font-size:1.2rem"/></b>
......@@ -45,7 +45,7 @@ export default {
display flex
align-items center
padding 0 .5rem
line-height 1.7
line-height 1.75
&:nth-child(2n+1)
background $black
p
......
src/views/community-type.vue
View file @ 1a3b69c5
<template>
<div class="community-type">
<div class="community-type" v-if="data.length > 0">
<m-chart :config="config" :data="data"/>
<div class="legend">
<div v-for="(item, i) in data" :key="item.name">
......@@ -19,10 +19,6 @@ export default {
config: {
colors: ['#0091ff', '#583eff', '#f7b500', '#6dd401'],
legend: {hide: true},
// legend: {
// align: 'right',
// orient: 'vertical',
// },
shape: [
{type: 'pie', startAngle: -30, radius: [0, 50 * Number((screen.height / 800).toFixed(1))], center: ['30%', '50%']}
],
......
src/views/disaster.vue
View file @ 1a3b69c5
......@@ -105,6 +105,5 @@ export default {
span
margin-right .5rem
.chart-wrapper
// height 75%
flex 1
</style>
src/views/hotline.vue
View file @ 1a3b69c5
......@@ -20,9 +20,9 @@
<p>{{item.title}}</p>
<div>
<template v-if="Array.isArray(item.count)">
<m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/>
<b><m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/></b>
</template>
<m-count v-else :value="item.count" :decimal="0"/>
<b v-else><m-count :value="item.count" :decimal="0"/></b>
</div>
</div>
</div>
......@@ -83,9 +83,7 @@ export default {
text-align center
*
font-size 1.2rem !important
font-weight bold !important
p
font-size 1rem !important
font-weight normal !important
line-height 2.5rem
</style>
src/views/intelligence.vue
View file @ 1a3b69c5
<template>
<div class="intelligence">
<div>
<div v-for="item in list.slice(0, 5)" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
<template v-if="list.length > 0">
<div>
<div v-for="item in list.slice(0, Math.round(list.length / 2))" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
</div>
</div>
</div>
<div>
<div v-for="item in list.slice(5)" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
<div>
<div v-for="item in list.slice(Math.round(list.length / 2))" :key="item.title">
<p>{{item.title}}</p>
<p>
<b>
<m-count :value="item.count[0]" :decimal="0" style="color:#f7b500;"/> / <m-count :value="item.count[1]" :decimal="0"/>
</b>
</p>
</div>
</div>
</div>
</template>
</div>
</template>
......@@ -29,6 +31,7 @@ export default {
computed: {
list() {
const {smartInfo} = this.$store.state
if (smartInfo.length === 0) return []
return smartInfo.map(item => {
return {
title: item.TYPE_NAME,
......
src/views/thematic-map.vue
View file @ 1a3b69c5
......@@ -50,6 +50,7 @@ export default {
font-weight bold
overflow hidden
>div
margin-bottom .5rem
>p
color $light-blue
margin-bottom .3rem
......@@ -61,6 +62,7 @@ export default {
.button
position relative
width 30%
overflow hidden
p
width 100%
height 100%
......@@ -91,13 +93,13 @@ export default {
transition transform .1s ease
&.bottom,
&.top
height 1px
height .1rem
left 0
right 0
transform scaleX(0)
&.left,
&.right
width 1px
width .1rem
top 0
bottom 0
transform scaleY(0)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment