Gyyq-Upstairs/src/views/components/ProjectDetails/Buildings.vue

470 lines
18 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>
1 month ago
2 months ago
<script>
1 month ago
import { getjzxxinformationByxmId, getjzxxById, addjzxx, updatejzxx, deletejzxx } from '@/api/ManageApi/index';
export default {
dicts: ['isno'],
props: {
size: {
type: String,
default: ''
},
1 month ago
xmId: {
type: [Number, String],
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: 2,
sfydzk: 2,
sfyqcpd: 2,
totalBuildingHeight: 0,
twoAndFourCg: 0,
twoAndThreeLmhz: 0,
updateBy: '',
updateId: 0,
updateTime: '',
xmId: 0,
zj: 0
2 months ago
}
};
},
1 month ago
created() {
this.fetchBuildings();
},
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: 2,
sfydzk: 2,
sfyqcpd: 2,
totalBuildingHeight: 0,
twoAndFourCg: 0,
twoAndThreeLmhz: 0,
updateBy: '',
updateId: 0,
updateTime: '',
xmId: this.xmId,
zj: 0
2 months ago
};
},
1 month ago
fetchBuildings() {
console.log('Fetching data for xmId:', this.xmId);
getjzxxinformationByxmId({ xmId: this.xmId })
.then(response => {
console.log('API response:', response);
if (response.code === 200 && response.data) {
this.buildings = Object.values(response.data); // 将对象转换为数组
console.log('Buildings data after assignment:', this.buildings);
} else {
console.error('数据格式不正确:', response);
}
})
.catch(error => {
console.error('数据获取失败:', error);
});
},
selectBuilding(id) {
console.log('Selected building ID:', id);
1 month ago
getjzxxById(id)
.then(response => {
console.log('Building details response:', response);
if (response.code === 200 && response.data) {
this.selectedBuilding = response.data; // 将详细信息赋值给 selectedBuilding
console.log('Selected building data:', this.selectedBuilding);
} else {
console.error('数据格式不正确:', response);
}
})
.catch(error => {
console.error('数据获取失败:', error);
});
},
2 months ago
handleAddBuilding() {
1 month ago
const api = this.buildingForm.id ? updatejzxx : addjzxx; // 根据是否有ID判断是新增还是更新
const form = {
...this.buildingForm
};
api(form)
.then(response => {
if (response.code === 200) {
this.$message.success(form.id ? '更新成功' : '新增成功');
this.dialogVisible = false;
this.fetchBuildings(); // 刷新楼栋列表
} else {
this.$message.error(form.id ? '更新失败' : '新增失败');
}
})
.catch(error => {
console.error(form.id ? '更新失败:' : '新增失败:', error);
this.$message.error(form.id ? '更新失败' : '新增失败');
});
},
handleDelete(id) {
console.log('Deleting building with ID:', id); // 调试信息
2 months ago
this.$confirm('你确认删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
1 month ago
deletejzxx([id]) // 传递一个包含ID的数组
.then(response => {
if (response.code === 200) {
this.$message.success('删除成功');
this.fetchBuildings(); // 刷新楼栋列表
} else {
this.$message.error('删除失败');
}
})
.catch(error => {
console.error('删除失败:', error);
this.$message.error('删除失败');
});
}).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;
}
.important-building {
1 month ago
background-color: rgba(43,98,241,0.1);
}
</style>