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

100
components/AiDvRender.vue
View File

@@ -7,7 +7,8 @@
:title="data.title" :title="data.title"
:theme="theme" :theme="theme"
:border="data.border || ''"> :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"/> :data="values"/>
<AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/> <AiSwiper v-else-if="data.type === 'swiper'" :heigth="'100%'" :data="values"/>
<dv-scroll-board <dv-scroll-board
@@ -48,12 +49,21 @@
:subType="data.subType" :subType="data.subType"
:data="values"> :data="values">
</AiRanking> </AiRanking>
<AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap> <AiDvMap v-else-if="data.type === 'AiDvMap'" style="width: 100%; height: 100%" :ref="'chart' + index"
<ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1" :is3dAround="data.is3dAround === '1'" :key="`AiDvMap${index}`" :theme="theme"></AiDvMap>
:map-style="`amap://styles/${data.mapStyle}`" :pulseLines="data.pulseLines==1" :map.sync="map" :lib.sync="lib" <ai-map v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId" :is3d="data.is3d==1"
:onlyShowArea="data.limitArea==1" :satellite="data.layers=='satellite'"/> :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"/> <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"/> <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-sprite v-else-if="/building/.test(data.type)" v-bind="data" is3D @init="mods[data.type]"/> -->
</ai-dv-panel> </ai-dv-panel>
@@ -93,7 +103,8 @@ export default {
map: null, map: null,
lib: null, lib: null,
timer: null, timer: null,
dvTableConfig: [] dvTableConfig: [],
mapDialog: false
} }
}, },
computed: { computed: {
@@ -168,9 +179,13 @@ export default {
let {lib: AMap, map} = this let {lib: AMap, map} = this
this.timer && clearInterval(this.timer) this.timer && clearInterval(this.timer)
if (AMap && map) { if (AMap && map) {
const infoWin = new AMap.InfoWindow({isCustom: true, content: ""})
map.clearMap() 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) => { this.values.filter(e => e.lng).map((e) => {
const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e const {icon = "https://cdn.cunwuyun.cn/dvcp/h5/Location2.png"} = e
return new AMap.Marker({ return new AMap.Marker({
@@ -181,16 +196,15 @@ export default {
</div>`, </div>`,
position: [e.lng, e.lat] position: [e.lng, e.lat]
}).on('click', () => { }).on('click', () => {
if (!!e.openWin || e.infoWindowHtml) { this.mapDialog = true
map.clearInfoWindow() this.$nextTick(() => {
infoWin.setContent(e.infoWindowHtml ? `<div class="mapInfoWin">${e.infoWindowHtml}</div>` : this.$refs.mapInfoWin.innerHTML = e.infoWindowHtml || [`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('')
[`<div class="infoWin">`, `<b>${e.label}</b>`, '</div>'].join('') map.setZoomAndCenter(18, [e.lng, e.lat])
) map.setPitch(60)
infoWin.open(map, [e.lng, e.lat]) })
}
}) })
}) })
this.data.is3d && map.setPitch(65) this.data.is3d > 0 && map.setPitch(65)
if (this.data.is3dAround == 1) { if (this.data.is3dAround == 1) {
this.timer = setInterval(() => map?.setRotation(360, false, 16000)) this.timer = setInterval(() => map?.setRotation(360, false, 16000))
} }
@@ -210,7 +224,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.AiDvRender { .AiDvRender {
:deep( .dvScrollBoard1 ) { :deep(.dvScrollBoard1 ) {
.header { .header {
background: rgba(0, 0, 0, 0.1) !important; background: rgba(0, 0, 0, 0.1) !important;
@@ -252,7 +266,7 @@ export default {
} }
:deep( .marker ) { :deep(.marker) {
position: relative; position: relative;
& > img { & > img {
@@ -277,14 +291,54 @@ export default {
} }
:deep(.mapInfoWin) { :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; padding: 16px 8px;
max-width: 800px; max-width: 800px;
background-color: rgba(255, 255, 255, 0.25); background-color: rgba(#0A1B3E, 0.8);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, 0.18); border: 1px solid $borderColor;
box-shadow: rgba(142, 142, 142, 0.19) 0px 6px 15px 0px; box-shadow: 10px 10px 10px inset rgba($borderColor, .8), -10px -10px 10px inset rgba($borderColor, .8);
border-radius: 4px; 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> </style>

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

@@ -2,6 +2,7 @@
<section class="AiMap" :class="{mask}"> <section class="AiMap" :class="{mask}">
<div ref="amap" class="map"/> <div ref="amap" class="map"/>
<div v-if="mask" class="mask"/> <div v-if="mask" class="mask"/>
<slot/>
</section> </section>
</template> </template>
@@ -25,11 +26,6 @@ export default {
onlyShowArea: Boolean, onlyShowArea: Boolean,
satellite: Boolean satellite: Boolean
}, },
computed: {
viewMode() {
return this.is3d ? '3D' : '2D'
}
},
data() { data() {
return { return {
amap: null, amap: null,
@@ -46,7 +42,7 @@ export default {
}, },
methods: { methods: {
initMap(c = 0) { initMap(c = 0) {
let {plugins, viewMode, mapStyle} = this let {plugins, mapStyle} = this
AMapLoader.load({ AMapLoader.load({
key: '54a02a43d9828a8f9cd4f26fe281e74e', key: '54a02a43d9828a8f9cd4f26fe281e74e',
version: '2.0', version: '2.0',
@@ -58,7 +54,7 @@ export default {
if (this.$refs.amap) { if (this.$refs.amap) {
this.amap = new AMap.Map(this.$refs.amap, { this.amap = new AMap.Map(this.$refs.amap, {
mapStyle, mapStyle,
viewMode, viewMode: "3D",
terrain: true, terrain: true,
resizeEnable: true, resizeEnable: true,
skyColor: "#082243", skyColor: "#082243",