162 lines
3.6 KiB
Vue
162 lines
3.6 KiB
Vue
<template>
|
||
<view class="jbzz-box">
|
||
<!-- 行政区划 -->
|
||
<view class="region-section">
|
||
<text class="region-label">行政区划：</text>
|
||
<text class="region-value">湖北省咸宁市赤壁市官塘镇</text>
|
||
</view>
|
||
|
||
<view class="project-des">
|
||
<view v-for="(item, index) in infoList" :key="index" class="info-item">
|
||
<view class="info-content">
|
||
<view class="circle-dot"></view>
|
||
<view class="label-name">
|
||
<text class="label-text">{{ item.label }}</text>
|
||
<text class="value-text">{{ item.value }}{{ item.unit }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const gmObj = {
|
||
"1": "大 (1)型",
|
||
"2": "大 (2)型",
|
||
"3": "中型",
|
||
"4": "小 (1)型",
|
||
"5": "小 (2)型",
|
||
"9": "其他",
|
||
}
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 字段配置：标签、字段名、单位
|
||
fieldConfig: [
|
||
{ label: '坝顶高程', field: 'bdgc', unit: 'm' },
|
||
{ label: '工程规模', field: 'engScal', unit: '' },
|
||
{ label: '校核洪水位', field: 'jyhsw', unit: 'm' },
|
||
{ label: '总库容', field: 'zkr', unit: '万m³' },
|
||
{ label: '设计洪水位', field: 'sjhsw', unit: 'm' },
|
||
{ label: '防洪库容', field: 'fhkr', unit: '万m³' },
|
||
{ label: '防洪高水位', field: 'fhgsw', unit: 'm' },
|
||
{ label: '兴利库容', field: 'xlkr', unit: '万m³' },
|
||
{ label: '正常蓄水位', field: 'zcxsw', unit: 'm' },
|
||
{ label: '调洪库容', field: 'thkr', unit: '万m³' },
|
||
{ label: '汛限水位', field: 'xxsw', unit: 'm' },
|
||
{ label: '集雨面积', field: 'jymj', unit: 'km²' },
|
||
{ label: '控制运行水位', field: 'kzyxsw', unit: 'm' },
|
||
{ label: '死水位', field: 'ssw', unit: 'm' },
|
||
{ label: '死库容', field: 'skr', unit: '万m³' }
|
||
],
|
||
// 后端返回的数据
|
||
apiData: {
|
||
bdgc: '80',
|
||
engScal: "2",
|
||
jyhsw: '78.44',
|
||
zkr: '1531',
|
||
sjhsw: '77.45',
|
||
fhkr: '359',
|
||
fhgsw: '76',
|
||
xlkr: null,
|
||
zcxsw: '76',
|
||
thkr: null,
|
||
xxsw: '75.3',
|
||
jymj: '2.1',
|
||
kzyxsw: '',
|
||
ssw: '',
|
||
skr: ''
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
// 处理后的列表数据
|
||
infoList() {
|
||
return this.fieldConfig.map(config => {
|
||
|
||
const value = config.field != 'engScal' ? this.apiData[config.field] : gmObj[this.apiData[config.field]];
|
||
return {
|
||
label: config.label,
|
||
value: value || '--',
|
||
unit: value ? config.unit : ''
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.jbzz-box {
|
||
padding: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.region-section {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.region-label {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.region-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.project-des {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
border: 1px solid #f2f2f2;
|
||
background-color: #ffffff;
|
||
padding: 0 10px;
|
||
max-height: calc(100vh - 210px);
|
||
overflow: auto;
|
||
}
|
||
|
||
.info-item {
|
||
width: 50%;
|
||
}
|
||
|
||
.info-content {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.circle-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
background-color: #409eff;
|
||
margin-left: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.label-name {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.label-text {
|
||
opacity: 0.5;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.value-text {
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|