修改弹窗完毕
This commit is contained in:
aixianling
@@ -7,7 +7,8 @@
|
||||
:title="data.title"
|
||||
:theme="theme"
|
||||
:border="data.border || ''">
|
||||
<AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle" :key="`summary${index}`" :type="data.display"
|
||||
<AiDvSummary v-if="data.type === 'summary'" :theme="theme" :summaryTitle="data.summaryTitle"
|
||||
:key="`summary${index}`" :type="data.display"
|
||||
:data="values"/>
|
||||
<AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
|
||||
<dv-scroll-board
|
||||
@@ -48,12 +49,21 @@
|
||||
:subType="data.subType"
|
||||
:data="values">
|
||||
</AiRanking>
|
||||
<AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
|
||||
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'"
|
||||
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib"
|
||||
:onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'"/>
|
||||
<AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
|
||||
:key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
|
||||
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
|
||||
:is3dAround="data.is3dAround === '1'"
|
||||
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map"
|
||||
:lib.sync="lib"
|
||||
:onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'">
|
||||
<div class="mapInfoWin" v-show="mapDialog">
|
||||
<div class="corn" v-for="i in 4" :key="i"/>
|
||||
<div ref="mapInfoWin"/>
|
||||
</div>
|
||||
</ai-map>
|
||||
<ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"/>
|
||||
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"/>
|
||||
<video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay
|
||||
v-else-if="data.type === 'video'"/>
|
||||
<AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="data.type === 'partyOrg'" :instance="instance"/>
|
||||
<!-- <ai-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/> -->
|
||||
</ai-dv-panel>
|
||||
@@ -93,7 +103,8 @@ export default {
|
||||
map: null,
|
||||
lib: null,
|
||||
timer: null,
|
||||
dvTableConfig: []
|
||||
dvTableConfig: [],
|
||||
mapDialog: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -168,9 +179,13 @@ export default {
|
||||
let {lib: AMap, map} = this
|
||||
this.timer && clearInterval(this.timer)
|
||||
if (AMap && map) {
|
||||
const infoWin = new AMap.InfoWindow({isCustom: true, content: ""})
|
||||
map.clearMap()
|
||||
map.on('click', () => infoWin.close())
|
||||
const center = map.getCenter()
|
||||
map.on('click', () => {
|
||||
map.setZoomAndCenter(11, center)
|
||||
map.setPitch(0)
|
||||
this.mapDialog = false
|
||||
})
|
||||
this.values.filter(e => e.lng).map((e) => {
|
||||
const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
|
||||
return new AMap.Marker({
|
||||
@@ -181,16 +196,15 @@ export default {
|
||||
</div>`,
|
||||
position: [e.lng, e.lat]
|
||||
}).on('click', () => {
|
||||
if (!!e.openWin || e.infoWindowHtml) {
|
||||
map.clearInfoWindow()
|
||||
infoWin.setContent(e.infoWindowHtml ? `<div class="mapInfoWin">${e.infoWindowHtml}</div>` :
|
||||
[`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
|
||||
)
|
||||
infoWin.open(map, [e.lng, e.lat])
|
||||
}
|
||||
this.mapDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.mapInfoWin.innerHTML = e.infoWindowHtml || [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
|
||||
map.setZoomAndCenter(18, [e.lng, e.lat])
|
||||
map.setPitch(60)
|
||||
})
|
||||
})
|
||||
this.data.is3d && map.setPitch(65)
|
||||
})
|
||||
this.data.is3d > 0 && map.setPitch(65)
|
||||
if (this.data.is3dAround == 1) {
|
||||
this.timer = setInterval(() => map?.setRotation(360, false, 16000))
|
||||
}
|
||||
@@ -210,7 +224,7 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AiDvRender {
|
||||
:deep( .dvScrollBoard1 ) {
|
||||
:deep(.dvScrollBoard1 ) {
|
||||
|
||||
.header {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
@@ -252,7 +266,7 @@ export default {
|
||||
}
|
||||
|
||||
|
||||
:deep( .marker ) {
|
||||
:deep(.marker) {
|
||||
position: relative;
|
||||
|
||||
& > img {
|
||||
@@ -277,14 +291,54 @@ export default {
|
||||
}
|
||||
|
||||
:deep(.mapInfoWin) {
|
||||
$borderColor: #245D8E;
|
||||
$borderCorn: url("https://cdn.cunwuyun.cn/dvcp/dv/mapDialogCorn.png");
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 16px 8px;
|
||||
max-width: 800px;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
background-color: rgba(#0A1B3E, 0.8);
|
||||
backdrop-filter: blur(6px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px;
|
||||
border: 1px solid $borderColor;
|
||||
box-shadow: 10px 10px 10px inset rgba($borderColor, .8), -10px -10px 10px inset rgba($borderColor, .8);
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
color: white;
|
||||
|
||||
.corn {
|
||||
$offset: -2px;
|
||||
background-image: $borderCorn;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&:nth-of-type(1) {
|
||||
left: $offset;
|
||||
top: $offset;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(2) {
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&:nth-of-type(3) {
|
||||
right: $offset;
|
||||
bottom: $offset;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
&:nth-of-type(4) {
|
||||
left: $offset;
|
||||
bottom: $offset;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<section class="AiMap" :class="{mask}">
|
||||
<div ref="amap" class="map"/>
|
||||
<div v-if="mask" class="mask"/>
|
||||
<slot/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -25,11 +26,6 @@ export default {
|
||||
onlyShowArea: Boolean,
|
||||
satellite: Boolean
|
||||
},
|
||||
computed: {
|
||||
viewMode() {
|
||||
return this.is3d ? '3D' : '2D'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
amap: null,
|
||||
@@ -46,7 +42,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initMap(c = 0) {
|
||||
let {plugins, viewMode, mapStyle} = this
|
||||
let {plugins, mapStyle} = this
|
||||
AMapLoader.load({
|
||||
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||||
version: '2.0',
|
||||
@@ -58,7 +54,7 @@ export default {
|
||||
if (this.$refs.amap) {
|
||||
this.amap = new AMap.Map(this.$refs.amap, {
|
||||
mapStyle,
|
||||
viewMode,
|
||||
viewMode: "3D",
|
||||
terrain: true,
|
||||
resizeEnable: true,
|
||||
skyColor: "#082243",
|
||||
|
||||
Reference in New Issue
Block a user