kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改弹窗完毕

Browse Source
This commit is contained in:
aixianling
2023-09-20 15:06:57 +08:00
parent 068f041b1b
commit c0199b7b27
2 changed files with 80 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
components/AiDvRender.vue
View File

@@ -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))
}
@@ -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>

10
ui/packages/tools/AiMap.vue
View File

@@ -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",