You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

449 lines
17 KiB

2 months ago
<template>
<div class="container">
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>建筑信息</span>
</div>
<div class="topright">
2 months ago
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="addBuildingTag">
2 months ago
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="新增"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
新增
</el-button>
2 months ago
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;"
@click="handleEdit(selectedBuilding)">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<i class="el-icon-download" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;"></i>
导入
</el-button>
2 months ago
<el-button type="primary" size="medium" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
2 months ago
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="导出"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 栋数楼栋名称 -->
<div class="tagdiv">
1 month ago
<div class="tagitem" v-for="building in buildings" :key="building.id" @click="selectBuilding(building.id)"
:class="getTagItemClass(building)">
<img src="@/assets/images/detailsicon/icon-楼栋@2x.png" alt="">
<span>{{ building.name }}</span>
<img src="@/assets/images/detailsicon/icon-gb@2x.png" alt="" @click.stop="handleDelete(building.id)">
</div>
</div>
<!-- 内容区 -->
<div class="content" v-if="selectedBuilding">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" border>
<el-descriptions-item>
<template slot="label">是否为重要楼栋</template>
{{ getTextForBoolean(selectedBuilding.sfwzyld) }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">层数</template>
{{ selectedBuilding.floor }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">总建筑高度</template>
{{ selectedBuilding.totalBuildingHeight }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">首层高度平方米</template>
{{ selectedBuilding.scgd }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">2至4层层高</template>
{{ selectedBuilding.twoAndFourCg }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">4层以上层高()</template>
{{ selectedBuilding.fourYscg }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">首层地面荷载(/)</template>
{{ selectedBuilding.scdmhz }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">二至三层楼面荷载(/平方米)</template>
{{ selectedBuilding.twoAndThreeLmhz }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">标准层面积(千平方米)</template>
{{ selectedBuilding.bzcmj }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">柱距</template>
{{ selectedBuilding.zj }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">是否有吊装口</template>
1 month ago
{{ getTextForBoolean(selectedBuilding.sfydzk) }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">是否有汽车盘道</template>
{{ getTextForBoolean(selectedBuilding.sfyqcpd) }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">四层及以上楼面荷载(/平方米)</template>
{{ selectedBuilding.fourYslmhz }}
</el-descriptions-item>
</el-descriptions>
2 months ago
</div>
</div>
2 months ago
<!-- 新增楼栋弹窗 -->
<el-dialog title="新增楼栋" :visible.sync="dialogVisible" width="65%">
<el-form :model="buildingForm" label-width="230px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="楼栋名称:">
<el-input v-model="buildingForm.name"></el-input>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否为重要楼栋:">
<el-select v-model="buildingForm.sfwzyld" placeholder="请选择" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)"></el-option>
2 months ago
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="首层高度(米):">
<el-input v-model="buildingForm.scgd"></el-input>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="层数:">
<el-input v-model="buildingForm.floor"></el-input>
2 months ago
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="4层以上层高">
<el-input v-model="buildingForm.fourYscg"></el-input>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="柱距:">
<el-input v-model="buildingForm.zj"></el-input>
2 months ago
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="2至4层层高">
<el-input v-model="buildingForm.twoAndFourCg"></el-input>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总建筑高度(米):">
<el-input v-model="buildingForm.totalBuildingHeight"></el-input>
2 months ago
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="首层地面荷载(吨/平方米):">
<el-input v-model="buildingForm.scdmhz"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="二至三层楼面荷载(吨/平方米):">
<el-input v-model="buildingForm.twoAndThreeLmhz"></el-input>
2 months ago
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="标准层面积(千平方米):">
<el-input v-model="buildingForm.bzcmj"></el-input>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否有汽车盘道:">
<el-select v-model="buildingForm.sfyqcpd" placeholder="请选择" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)"></el-option>
</el-select>
2 months ago
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="是否有吊装口:">
<el-select v-model="buildingForm.sfydzk" placeholder="请选择" style="width: 22.5rem;">
<el-option v-for="dict in dict.type.isno" :key="dict.value" :label="dict.label"
:value="parseInt(dict.value)"></el-option>
</el-select>
2 months ago
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="四层及以上楼面荷载(吨/平方米):">
<el-input v-model="buildingForm.fourYslmhz"></el-input>
2 months ago
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="handleAddBuilding"> </el-button>
</span>
</el-dialog>
2 months ago
</div>
</template>
<script>
export default {
dicts: ['isno'],
props: {
size: {
type: String,
default: ''
},
1 month ago
buildingInfo: {
type: Array,
required: true
}
},
data() {
return {
2 months ago
dialogVisible: false,
buildings: [],
selectedBuilding: null,
2 months ago
buildingForm: {
bzcmj: 0,
createBy: '',
createId: 0,
createTime: '',
floor: 0,
fourYscg: 0,
fourYslmhz: 0,
id: 0,
name: '',
scdmhz: 0,
scgd: 0,
1 month ago
sfwzyld: 0,
sfydzk: 0,
sfyqcpd: 0,
totalBuildingHeight: 0,
twoAndFourCg: 0,
twoAndThreeLmhz: 0,
updateBy: '',
updateId: 0,
updateTime: '',
xmId: 0,
zj: 0
2 months ago
}
};
},
1 month ago
watch: {
buildingInfo: {
handler(newVal) {
this.buildings = newVal;
if (this.buildings.length > 0) {
this.selectedBuilding = this.buildings[0];
} else {
this.selectedBuilding = null;
}
},
immediate: true,
deep: true
}
},
mounted() {
// 打印 buildingInfo确认数据是否传递成功
console.log('buildingInfo in Buildings component:', this.buildingInfo);
},
methods: {
1 month ago
// 翻译1和2
getTextForBoolean(value) {
return value === 1 ? '是' : '否';
},
1 month ago
// 颜色变化方法
getTagItemClass(building) {
return {
'important-building': building.sfwzyld === 1,
};
},
// 添加建筑信息
addBuildingTag() {
2 months ago
this.dialogVisible = true;
this.buildingForm = {
bzcmj: 0,
createBy: '',
createId: 0,
createTime: '',
floor: 0,
fourYscg: 0,
fourYslmhz: 0,
id: 0,
name: '',
scdmhz: 0,
scgd: 0,
1 month ago
sfwzyld: 0,
sfydzk: 0,
sfyqcpd: 0,
totalBuildingHeight: 0,
twoAndFourCg: 0,
twoAndThreeLmhz: 0,
updateBy: '',
updateId: 0,
updateTime: '',
xmId: this.xmId,
zj: 0
2 months ago
};
},
selectBuilding(id) {
console.log('Selected building ID:', id);
1 month ago
this.selectedBuilding = this.buildings.find(building => building.id === id);
},
2 months ago
handleAddBuilding() {
1 month ago
// 模拟成功
this.$message.success(this.buildingForm.id ? '更新成功' : '新增成功');
this.dialogVisible = false;
// 手动更新 buildings 和 selectedBuilding
if (this.buildingForm.id) {
// 更新现有楼栋
const index = this.buildings.findIndex(building => building.id === this.buildingForm.id);
if (index !== -1) {
this.buildings.splice(index, 1, { ...this.buildingForm });
}
} else {
// 新增楼栋
this.buildingForm.id = this.buildings.length + 1; // 模拟生成ID
this.buildings.push({ ...this.buildingForm });
}
this.selectedBuilding = { ...this.buildingForm };
},
handleDelete(id) {
console.log('Deleting building with ID:', id); // 调试信息
2 months ago
this.$confirm('你确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
1 month ago
// 模拟成功
this.$message.success('删除成功');
// 手动删除楼栋
this.buildings = this.buildings.filter(building => building.id !== id);
if (this.selectedBuilding && this.selectedBuilding.id === id) {
this.selectedBuilding = null;
}
}).catch(() => {
this.$message.info('已取消删除');
});
},
handleEdit(building) {
this.dialogVisible = true;
this.buildingForm = { ...building }; // 填充表单数据
}
}
};
2 months ago
</script>
2 months ago
<style scoped>
.container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
2 months ago
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
padding: 1rem;
display: flex;
}
.containertop {
2 months ago
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
2 months ago
}
.topleft {
width: 8rem;
2 months ago
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img {
2 months ago
width: 0.81rem;
height: 0.81rem;
}
.topleft span {
2 months ago
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
}
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.tagdiv {
padding: 1rem 2rem 1rem 2rem;
display: flex;
}
.tagdiv img {
width: 1.4rem;
height: 1.5rem;
}
.tagdiv span {
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 400;
font-size: 0.88rem;
color: #808080;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
}
.tagitem {
width: 6.25rem;
height: 2rem;
background: #FAFAFA;
border-radius: 2.13rem 2.13rem 2.13rem 2.13rem;
display: flex;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
1 month ago
.important-building {
1 month ago
background-color: rgba(43, 98, 241, 0.1);
}
</style>