|
|
@@ -91,6 +91,8 @@
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
import { mapState } from 'vuex'
|
|
|
import { getstatisticaldata } from '@/api/system/dict/type'
|
|
|
+import { getMarkers } from '@/api/bigScreen'
|
|
|
+
|
|
|
import Oldman from './components/Oldman.vue'
|
|
|
import Organization from './components/Organization.vue'
|
|
|
import Service from './components/Service.vue'
|
|
|
@@ -128,7 +130,12 @@ export default {
|
|
|
sideActive: 0, //左侧栏当前选中值,默认选择机构
|
|
|
showDrawer: false, // 右侧模块显隐
|
|
|
pattern: 0, // 模式选择
|
|
|
- map: null
|
|
|
+
|
|
|
+ // map: null,
|
|
|
+ Icons: {
|
|
|
+ yljg: null,
|
|
|
+ sqyljg: null
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -142,14 +149,84 @@ export default {
|
|
|
this.queryParams.para2 = this.user.dept.locationCode
|
|
|
this.getTotalList()
|
|
|
this.clickScreen()
|
|
|
- this.initAMap()
|
|
|
+ this.getMarkerList()
|
|
|
},
|
|
|
methods: {
|
|
|
- initAMap() {
|
|
|
+ async getTotalList() {
|
|
|
+ const retdata = await getstatisticaldata(this.queryParams)
|
|
|
+ if (retdata.code === 200) {
|
|
|
+ const data = this.$DBRetToObjA(retdata.data)
|
|
|
+ this.totalObj = data[0].vales[0]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getMarkerList() {
|
|
|
+ getMarkers().then(({ code, data }) => {
|
|
|
+ if (code !== 200) return
|
|
|
+ this.initAMap(data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ setIcon() {
|
|
|
+ this.Icons.yljg = new AMap.Icon({
|
|
|
+ size: new AMap.Size(50, 50),
|
|
|
+ imageSize: new AMap.Size(50, 50),
|
|
|
+ image: require('@/assets/images/bigScreen/yljg.png')
|
|
|
+ })
|
|
|
+ this.Icons.sqyljg = new AMap.Icon({
|
|
|
+ size: new AMap.Size(50, 50),
|
|
|
+ imageSize: new AMap.Size(50, 50),
|
|
|
+ image: require('@/assets/images/bigScreen/sqyljg.png')
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ showInfoOver(e) {
|
|
|
+ var content = '<img style="background-color: hsla(234,100%,50%,0.6); height: 55px; width: 55px; border: 1px solid hsl(351,100%,74%); border-radius: 12px; box-shadow: hsl(0, 100%, 50%) 0px 0px 3px;" src="' + e.target.getExtData().style + '"></img>'
|
|
|
+ e.target.setContent(content)
|
|
|
+ },
|
|
|
+ showInfoOut(e) {
|
|
|
+ var content = '<img style="height: 50px; width: 50px;" src="' + e.target.getExtData().style + '"></img>'
|
|
|
+ e.target.setContent(content)
|
|
|
+ },
|
|
|
+
|
|
|
+ setMarker(data) {
|
|
|
+ console.log(data)
|
|
|
+ let markerList = []
|
|
|
+ this.setIcon()
|
|
|
+ data.forEach((item) => {
|
|
|
+ let marker = new AMap.Marker({
|
|
|
+ position: new AMap.LngLat(item.lng, item.lat),
|
|
|
+ icon: item.lb === 'yljg' ? this.Icons.yljg : this.Icons.sqyljg,
|
|
|
+ title: item.mc,
|
|
|
+ label: {
|
|
|
+ content: item.mc,
|
|
|
+ direction: 'bottom'
|
|
|
+
|
|
|
+ },
|
|
|
+ anchor: 'bottom-center'
|
|
|
+ })
|
|
|
+ marker.setExtData({
|
|
|
+ style: item.lb === 'yljg' ? this.Icons.yljg._opts.image : this.Icons.sqyljg._opts.image
|
|
|
+ })
|
|
|
+ marker.on('click', this.markerClick)
|
|
|
+
|
|
|
+ marker.off('mouseover', this.showInfoOver)
|
|
|
+ marker.off('mouseout', this.showInfoOut)
|
|
|
+ marker.on('mouseover', this.showInfoOver)
|
|
|
+ marker.on('mouseout', this.showInfoOut)
|
|
|
+ markerList.push(marker)
|
|
|
+ })
|
|
|
+ return markerList
|
|
|
+ },
|
|
|
+ markerClick(e) {
|
|
|
+ if (e.target.getExtData()) {
|
|
|
+ alert(e.target.getExtData().style)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initAMap(markers) {
|
|
|
AMapLoader.load({
|
|
|
- key: '0445c169f4b9ffcf20cb016aa8e9f165', //设置您的key
|
|
|
+ key: '0445c169f4b9ffcf20cb016aa8e9f165',
|
|
|
version: '2.0',
|
|
|
- plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.MarkerCluster'],
|
|
|
+ plugins: ['AMap.ToolBar', 'AMap.Driving', 'AMap.ElasticMarker', 'AMap.MapType'],
|
|
|
AMapUI: {
|
|
|
version: '1.1',
|
|
|
plugins: []
|
|
|
@@ -158,27 +235,28 @@ export default {
|
|
|
version: '2.0'
|
|
|
}
|
|
|
}).then((AMap) => {
|
|
|
-
|
|
|
- this.map = new AMap.Map('container', {
|
|
|
+ let map = new AMap.Map('container', {
|
|
|
resizeEnable: true, //是否监控地图容器尺寸变化
|
|
|
mapStyle: 'amap://styles/blue',
|
|
|
showIndoorMap: true,
|
|
|
pitch: 60,
|
|
|
viewMode: '3D',
|
|
|
terrain: true,
|
|
|
+ center:[125.320113,43.833376],
|
|
|
zoom: 16,
|
|
|
zooms: [2, 22]
|
|
|
})
|
|
|
- // this.map.setCity(this.mapdq)
|
|
|
+ map.add(this.setMarker(markers))
|
|
|
+ map.setFitView()
|
|
|
+ map.on('zoomend', () => {
|
|
|
+ console.log(map.getZoom())
|
|
|
+ })
|
|
|
+ map.on('moveend', () => {
|
|
|
+ console.log(map.getCenter())
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
- async getTotalList() {
|
|
|
- const retdata = await getstatisticaldata(this.queryParams)
|
|
|
- if (retdata.code === 200) {
|
|
|
- const data = this.$DBRetToObjA(retdata.data)
|
|
|
- this.totalObj = data[0].vales[0]
|
|
|
- }
|
|
|
- },
|
|
|
+
|
|
|
clickScreen() {
|
|
|
this.$store.dispatch('settings/toggleTopNav', !this.hideTopNav)
|
|
|
this.showDrawer = this.hideTopNav
|
|
|
@@ -187,11 +265,9 @@ export default {
|
|
|
handleSideClick(index) {
|
|
|
this.sideActive = index
|
|
|
},
|
|
|
-
|
|
|
patternChange(value) {
|
|
|
console.log(value)
|
|
|
},
|
|
|
-
|
|
|
handleClose() {
|
|
|
this.drawer = false
|
|
|
}
|
