地图插槽
This commit is contained in:
parent
cfd88d6acb
commit
861eb13404
@ -5,7 +5,18 @@
|
||||
<custom-echart-maps height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" @click="mapClick" />
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="isShow" :title="currentMap.name + dialogTitle" width="360" :before-close="handleClose" custom-class="map-info-dialog">
|
||||
<el-dialog
|
||||
v-model="isShow"
|
||||
:title="currentMap.name + dialogTitle"
|
||||
width="360"
|
||||
:show-close="false"
|
||||
:before-close="handleClose"
|
||||
custom-class="map-info-dialog"
|
||||
>
|
||||
<template #header="{ close, titleId, titleClass }">
|
||||
<slot name="header"></slot>
|
||||
</template>
|
||||
<slot name="dialogContent"></slot>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -163,7 +174,7 @@ let currentMap = reactive({});
|
||||
const mapClick = (data) => {
|
||||
isShow.value = true;
|
||||
currentMap = data;
|
||||
console.info('mapClick', data);
|
||||
emit('mapclick', currentMap);
|
||||
};
|
||||
const handleClose = () => {
|
||||
isShow.value = false;
|
||||
@ -171,6 +182,8 @@ const handleClose = () => {
|
||||
onMounted(() => {
|
||||
console.info('iconUrl', iconUrl);
|
||||
});
|
||||
|
||||
const emit = defineEmits(['mapclick']);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
div {
|
||||
@ -184,6 +197,7 @@ div {
|
||||
overflow-y: auto;
|
||||
background-size: 100% 100%;
|
||||
padding: 16px;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.el-dialog__header {
|
||||
margin-top: 10px;
|
||||
@ -197,6 +211,14 @@ div {
|
||||
top: 8px !important;
|
||||
}
|
||||
}
|
||||
.map-dialog-my-header {
|
||||
margin-top: 4px;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
h4 {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.map-center-warp {
|
||||
width: 100%;
|
||||
|
||||
102
src/views/inputs/components/inputsMap.vue
Normal file
102
src/views/inputs/components/inputsMap.vue
Normal file
@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">{{ currentRegion && currentRegion.name ? currentRegion.name : '投入品' }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ n.unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
|
||||
const unit = ref('家');
|
||||
const list = reactive([
|
||||
{ title: '监管机构', value: '1', color: '#01FEFD', unit: '家' },
|
||||
{ title: '监管人员', value: '2', color: '#FEF906', unit: '人' },
|
||||
{ title: '村级监管员', value: '5', color: '#02FD94', unit: '人' },
|
||||
{ title: '农资经营单位', value: '42', color: '#FE7F03', unit: '家' },
|
||||
{ title: '生产主体', value: '2', color: '#41BDFC', unit: '家' },
|
||||
{ title: '投入品规模', value: '3000', color: '#FC0003', unit: '万元' },
|
||||
]);
|
||||
|
||||
let currentRegion = reactive(null);
|
||||
const doMapclick = (data) => {
|
||||
currentRegion = data;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 2);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-custom-main;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,7 +24,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
<inputsMap></inputsMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -59,6 +59,7 @@ import monthlyuseCharts from './components/monthlyuseCharts.vue';
|
||||
import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
|
||||
import casesAlerts from './components/casesAlerts.vue';
|
||||
import inputsType from './components/inputsType.vue';
|
||||
import inputsMap from './components/inputsMap.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
|
||||
101
src/views/land/components/landMap.vue
Normal file
101
src/views/land/components/landMap.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<centerMap :dialog-title="'土地类型'">
|
||||
<template #header>
|
||||
<div class="land-map-pop-header">
|
||||
<div class="title">土地类型</div>
|
||||
<div class="value">总：88.5{{ unit }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #dialogContent>
|
||||
<div class="land-map-pop-content">
|
||||
<div v-for="(n, index) in list" :key="index" class="list-item">
|
||||
<div class="title">
|
||||
<div class="before">
|
||||
<div class="b-content" :style="{ background: n.color }"></div>
|
||||
</div>
|
||||
<span class="title-val"> {{ n.title }}</span>
|
||||
</div>
|
||||
<div class="value">{{ n.value }}{{ unit }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</centerMap>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
|
||||
const unit = ref('万亩');
|
||||
const list = reactive([
|
||||
{ title: '望天田', value: '60.8', color: '#01FEFD' },
|
||||
{ title: '菜地', value: '60.8', color: '#FEF906' },
|
||||
{ title: '水浇地', value: '60.8', color: '#02FD94' },
|
||||
{ title: '果园', value: '60.8', color: '#FE7F03' },
|
||||
{ title: '灌溉水田', value: '60.8', color: '#41BDFC' },
|
||||
{ title: '旱地', value: '60.8', color: '#FC0003' },
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.land-map-pop-header {
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
.title,
|
||||
.value {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: $color-white;
|
||||
}
|
||||
.title {
|
||||
font-size: 18px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.land-map-pop-content {
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.list-item {
|
||||
width: calc((100% - 10px) / 2);
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 0;
|
||||
.title {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
.before {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.b-content {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.before,
|
||||
.title-val {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px 0 2px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
color: $color-white;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap :dialog-title="'土地资源'"></centerMap>
|
||||
<landMap></landMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
@ -81,6 +81,7 @@ import landPlan from './components/landPlan.vue';
|
||||
import landPatrol from './components/landPatrol.vue';
|
||||
import LandAera from './components/LandAera.vue';
|
||||
import cake from './components/cake.vue';
|
||||
import landMap from './components/landMap.vue';
|
||||
import { nextTick, ref } from 'vue';
|
||||
|
||||
const landPatrolRef = ref(null);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user