105 lines
2.6 KiB
Vue
105 lines
2.6 KiB
Vue
<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 setup>
|
|
import { ref, reactive } from '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 = ref(null);
|
|
const doMapclick = (data) => {
|
|
currentRegion.value = data;
|
|
list.forEach((v) => {
|
|
v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
|
|
});
|
|
};
|
|
</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>
|