<script setup>
|
import { Text } from 'vue'
|
const { VITE_APP_BASE } = import.meta.env
|
import { getDetail } from '@/api/indParkInfo'
|
|
import { getAssetsFile } from 'utils/utils'
|
|
let state = reactive({
|
parkInfo: {}
|
})
|
|
// 企业信息统计数组
|
let parkInfoList = reactive([
|
{
|
id: 1,
|
name: 'plaArea',
|
title: '园区面积',
|
content: '1000',
|
unit: '公顷',
|
img: getAssetsFile('yq-mj.png', '/bgicon')
|
},
|
{
|
id: 2,
|
name: 'recNum',
|
title: '救援人员数量',
|
content: '1000',
|
unit: '人',
|
img: getAssetsFile('yq-jy.png', '/bgicon')
|
|
},
|
{
|
id: 3,
|
name: 'riskFirmNum',
|
title: '风险企业数量',
|
content: '1000',
|
img: getAssetsFile('yq-fx.png', '/bgicon')
|
},
|
{
|
id: 4,
|
name: 'proTarNum',
|
title: '保护目标数量',
|
content: '1000',
|
img: getAssetsFile('yq-bh.png', '/bgicon')
|
},
|
{
|
id: 5,
|
name: 'spaceNum',
|
title: '应急空间数量',
|
content: '1000',
|
img: getAssetsFile('yq-yj.png', '/bgicon')
|
},
|
{
|
id: 6,
|
name: 'firmNum',
|
title: '企业数量',
|
content: '1000',
|
img: getAssetsFile('yq-qy.png', '/bgicon')
|
}
|
]
|
)
|
|
// 初始化
|
onMounted(() => {
|
getData()
|
|
})
|
// 获取详情
|
function getData () {
|
getDetail().then(res => {
|
state.parkInfo = res.data.data
|
parkInfoList.forEach(item => {
|
if (item.name == 'plaArea') {
|
state.parkInfo[item.name] && (item.content = (state.parkInfo[item.name] * 100).toFixed(2))
|
} else {
|
state.parkInfo[item.name] && (item.content = state.parkInfo[item.name])
|
}
|
})
|
}).catch(err => {
|
console.log(err)
|
})
|
}
|
|
|
|
</script>
|
|
<template>
|
<div class="box-content-box">
|
<div class="box-content">
|
<div>
|
<div class="box-content-img">
|
<img :src="state.parkInfo.imageUrls" alt="">
|
{{ state.parkInfo.remark }}
|
</div>
|
</div>
|
</div>
|
|
<div class="container">
|
<div class="box-content-sj" v-for="item in parkInfoList" :key="item.id">
|
<img :src="item.img" alt="">
|
|
<div class="r">
|
<div class="box-content-text-title">
|
{{ item.content }}
|
</div>
|
|
<div class="box-content-text-content">
|
{{ item.title }}
|
<text v-if="item.unit">({{ item.unit }})</text>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.box-content-box {
|
padding: 10px;
|
color: #fff;
|
font-size: 15px;
|
}
|
|
.box-content {
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.box-content-img {
|
height: 360px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
|
.box-content-img img {
|
float: left;
|
margin: 5px;
|
/* 宽度可以根据实际情况调整 */
|
width: 120px;
|
height: 120px;
|
}
|
|
.box-content-title img {
|
width: 80px;
|
height: 80px;
|
}
|
|
.box-content-text {
|
padding-left: 5px;
|
height: 360px;
|
overflow: scroll;
|
// 隐藏滚动条
|
scrollbar-width: none;
|
|
}
|
|
.container {
|
margin-top: 10px;
|
display: flex;
|
justify-content: space-around;
|
flex-wrap: wrap;
|
gap: 5px;
|
}
|
|
.box-content-sj {
|
/* 每个盒子占据大约31%的宽度，留出一些空间用于间距 */
|
min-width: 30%;
|
/* 最小宽度，防止在非常小的屏幕上变得太窄 */
|
box-sizing: border-box;
|
// border: 1px solid #ccc;
|
display: flex;
|
// 设置高度
|
align-items: center;
|
justify-content: space-between;
|
|
img {
|
width: 36px;
|
height: 36px;
|
vertical-align: middle;
|
}
|
|
.r {
|
margin-left: 6px;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
|
.box-content-text-title,
|
.box-content-text-content {
|
margin-top: 5px;
|
font-size: 10px;
|
text-align: center;
|
}
|
|
.box-content-text-title {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
}
|
</style>
|
