79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
<script>
|
|
import AiDvMap from "./AiDvMap.vue";
|
|
import AiDvSummary from "./layout/AiDvSummary/AiDvSummary.vue";
|
|
import {DvCompData} from "./index";
|
|
|
|
export default {
|
|
name: "AiLinkageMap",
|
|
components: {AiDvSummary, AiDvMap},
|
|
props: {
|
|
instance: Function,
|
|
config: {default: () => ({})},
|
|
},
|
|
data() {
|
|
return {
|
|
mapData: [],
|
|
areaId: "530300000000"
|
|
}
|
|
},
|
|
computed: {
|
|
sta: v => v.config.summaryConfigs || []
|
|
},
|
|
methods: {
|
|
getData() {
|
|
new DvCompData(this.config, this.instance).getData({type: this.areaId}).then(res => {
|
|
const json = JSON.parse(res.param)
|
|
this.mapData = json.map
|
|
this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || []
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="AiLinkageMap">
|
|
<ai-dv-map :geo-json="config.geoJson" :data="mapData" :area.sync="areaId"/>
|
|
<ai-dv-summary class="abs" v-for="(item,i) in sta" :key="i"
|
|
:class="item.pos" :type="item.display" :data="item.data"/>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.AiLinkageMap {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.abs {
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
|
|
&.lt {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
&.rt {
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
&.lb {
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
&.rb {
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|