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