Web/digital-agriculture-screen
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

经营主体地图

Browse Source
This commit is contained in:
13713575202 2025-04-30 14:30:07 +08:00
parent 4319058cd5
commit ce7aa3e7b3
1 changed files with 128 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
src/views/business/components/businessMap.vue
View File

@ -7,17 +7,81 @@
@mapclick="doMapclick"
>
<template #header>
<div class="land-map-pop-header">
<div class="buiness-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 class="buiness-map-pop-content">
<div class="addr">
<el-icon :size="'18px'" :color="'#fff'">
<LocationFilled />
</el-icon>
{{ testInfo.addr || ' --' }}
</div>
<div class="tips-warp">
<div class="label">负责人：</div>
<div class="val">{{ testInfo.user || '--' }}</div>
</div>
<div class="tips-warp">
<div class="label">联系方式：</div>
<div class="val">{{ testInfo.tel || '--' }}</div>
</div>
<div class="tips-warp">
<div class="label">注册资本：</div>
<div class="val">{{ testInfo.capital || '--' }}</div>
</div>
<div class="tips-warp">
<div class="label">成立时间：</div>
<div class="val">{{ testInfo.time || '--' }}</div>
</div>
<div class="tips-warp">
<div class="label">信用等级：</div>
<div class="val">{{ testInfo.credit || '--' }}</div>
</div>
<div class="img-list">
<div class="img-item">
<el-image
style="width: 80px; height: 60px; cursor: pointer"
:preview-src-list="
testInfo.imglist.map((m) => {
return getAssetsFile(m);
})
"
:src="getAssetsFile(testInfo.imglist[0])"
fit="cover"
lazy
/>
<div class="img-name">营业执照</div>
</div>
<div class="img-item">
<el-image
style="width: 80px; height: 60px; cursor: pointer"
:preview-src-list="
testInfo.imglist.map((m) => {
return getAssetsFile(m);
})
"
:src="getAssetsFile(testInfo.imglist[1])"
fit="cover"
lazy
/>
<div class="img-name">经营许可证</div>
</div>
<div class="img-item">
<el-image
style="width: 80px; height: 60px; cursor: pointer"
:preview-src-list="
testInfo.imglist.map((m) => {
return getAssetsFile(m);
})
"
:src="getAssetsFile(testInfo.imglist[2])"
fit="cover"
lazy
/>
<div class="img-name">其他整数</div>
</div>
<div class="value">{{ n.value }}{{ n.unit }}</div>
</div>
</div>
</template>
@ -32,17 +96,39 @@ const list = reactive([
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
]);
let testInfo = reactive({});
let currentRegion = ref(null);
const doMapclick = (data) => {
currentRegion.value = data;
if (data.name == '永星食品加工厂') {
testInfo = {
addr: '云南省临沧市耿马傣族佤族自治县孟定镇101号',
user: '张强',
tel: '15331683325',
capital: '500万',
time: '2018年12月1日',
credit: 'AA',
imglist: ['images/vsualized/home1.png', 'images/vsualized/home1.png', 'images/vsualized/home1.png'],
};
}
if (data.name == '欣欣种源企业') {
testInfo = {
addr: '云南省临沧市耿马傣族佤族自治耿马镇102号',
user: '李欣',
tel: '13713575206',
capital: '600万',
time: '2020年10月1日',
credit: 'AA',
imglist: ['images/vsualized/home1.png', 'images/vsualized/home1.png', 'images/vsualized/home1.png'],
};
}
};
let markerData = reactive([
// 示例数据点，实际应用中应替换为真实的数据
{
name: '永星食品加工厂',
value: [99.081993, 23.554045, 150], // 经度, 纬度, 数值
value: [99.081993, 23.524045, 150], // 经度, 纬度, 数值
symbol: 'image://' + getAssetsFile('images/vsualized/marker.png'),
itemStyle: {
color: '#4bffb4', //
@ -60,7 +146,7 @@ let markerData = reactive([
</script>
<style lang="scss" scoped>
.land-map-pop-header {
.buiness-map-pop-header {
display: inline-flex;
justify-content: space-between;
width: 100%;
@ -78,45 +164,43 @@ let markerData = reactive([
font-size: 14px;
}
}
.land-map-pop-content {
.buiness-map-pop-content {
width: 100%;
gap: 10px;
display: inline-flex;
justify-content: flex-start;
flex-wrap: wrap;
.list-item {
width: calc((100% - 10px) / 1);
.addr {
width: 100%;
display: inline-flex;
color: #fff;
text-align: left;
}
.tips-warp {
width: 100%;
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;
}
text-align: left;
margin: 6px 0;
.label {
color: #fef906;
}
.value {
display: inline-block;
text-align: right;
color: $color-white;
font-size: 12px;
.val {
color: #fff;
}
}
.img-list {
width: 100%;
display: inline-flex;
justify-content: space-between;
gap: 10;
flex-wrap: wrap;
.img-item {
width: calc((100% - 10px) / 2);
margin-bottom: 8px;
.el-image {
background: transparent !important;
}
.img-name {
color: #fff;
padding: 6px 0;
}
}
}
}