<template>
|
<div class="project-info">
|
<!-- 上部分 - 图片 -->
|
<div
|
class="w-full h-[4vh] mb-[1vh]"
|
:style="{
|
backgroundImage: `url(${titleImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
display: 'flex',
|
alignItems: 'center',
|
}"
|
>
|
<span style="font-family: PangMenZhengDaoBiaoTiTi !important; font-size: 24px; letter-spacing: 2px; white-space: nowrap; margin-left: 30px"
|
>项目概况</span
|
>
|
</div>
|
|
<!-- 下部分 - 内容区域 -->
|
<div
|
class="content flex-1 px-[16px] py-[14px] overflow-y-hidden"
|
:style="{
|
backgroundImage: `url(${backgroundImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: 'cover',
|
}"
|
>
|
<div class="h-[120px] w-full">
|
<!-- 建筑面积 -->
|
<div
|
class="w-full h-[50px] mb-[10px] flex items-center justify-evenly"
|
:style="{
|
backgroundImage: `url(${contentImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<img src="../assets/images/backgrounds/jianzhumianji.png" alt="" class="h-[30px] w-[40px]" />
|
<div class="text-white text-[16px]">一期总建筑面积</div>
|
<div class="flex items-center justify-center">
|
<div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">{{ projectInfo.GrossFloorArea ? projectInfo.GrossFloorArea : "103.18" }}</div>
|
<div class="text-[14px] text-white">万㎡</div>
|
</div>
|
</div>
|
|
<!-- 目标日期 -->
|
<div
|
class="w-full h-[50px] flex items-center justify-evenly"
|
:style="{
|
backgroundImage: `url(${contentImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<img src="../assets/images/backgrounds/mubiaowancheng.png" alt="" class="h-[30px] w-[40px]" />
|
<div class="text-white text-[16px]">目标完成日期</div>
|
<div class="flex items-center justify-center">
|
<div class="text-[24px] text-[#00FFFF] font-bold">{{ projectInfo.endDate ? projectInfo.endDate : "2028-12-01" }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="w-[100%] h-[38%]">
|
<!-- 项目名称 -->
|
<div
|
class="w-full h-[30px] mt-[20px] mb-[10px]"
|
:style="{
|
backgroundImage: `url(${bgImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{ projectInfo.ProjectName }}</div>
|
</div>
|
|
<div class="text-white text-[14px] tracking-[1px] leading-[24px]">
|
{{ projectInfo.Description }}
|
</div>
|
|
<img
|
:src="projectInfo.Thumbnail ? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
|
alt=""
|
class="w-full mt-[20px]"
|
style="height: calc(100% - 150px)"
|
/>
|
</div>
|
<div class="w-[100%] h-[18%]">
|
<!-- 参建单位 -->
|
<div
|
class="w-full h-[30px] mt-[20px] mb-[10px]"
|
:style="{
|
backgroundImage: `url(${bgImage})`,
|
backgroundRepeat: 'no-repeat',
|
backgroundPosition: 'center center',
|
backgroundSize: '100% 100%',
|
}"
|
>
|
<div class="text-white text-[14px] ml-[40px] leading-[35px]">参建单位</div>
|
</div>
|
|
<!-- 参建单位统计 -->
|
<div class="flex justify-between mb-[10px]">
|
<div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
|
<div class="text-white text-[14px] flex flex-col items-center justify-center">
|
<div class="text-[18px] text-[#00FFFF]">{{ projectParticipatingNumber.buildingUnit }}</div>
|
<div class="text-[12px] text-[#ddd]">建设单位</div>
|
</div>
|
<img src="../assets/images/backgrounds/jianshedanwei.png" alt="" class="h-[40px] w-[60px]" />
|
</div>
|
<div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
|
<div class="text-white text-[14px] flex flex-col items-center justify-center">
|
<div class="text-[18px] text-[#00FFFF]">{{ projectParticipatingNumber.constructionUnit }}</div>
|
<div class="text-[12px] text-[#ddd]">施工单位</div>
|
</div>
|
<img src="../assets/images/backgrounds/shigongdanwei.png" alt="" class="h-[40px] w-[60px]" />
|
</div>
|
</div>
|
|
<div class="flex justify-between">
|
<div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mr-[8px] mb-[10px] lineB">
|
<div class="text-white text-[14px] flex flex-col items-center justify-center">
|
<div class="text-[18px] text-[#00FFFF]">{{ projectParticipatingNumber.supervisionUnit }}</div>
|
<div class="text-[12px] text-[#ddd]">监理单位</div>
|
</div>
|
<img src="../assets/images/backgrounds/jianlidanwei.png" alt="" class="h-[40px] w-[60px]" />
|
</div>
|
<div class="w-[48%] h-[50px] px-[12px] flex items-center justify-between mb-[10px] lineB">
|
<div class="text-white text-[14px] flex flex-col items-center justify-center">
|
<div class="text-[18px] text-[#00FFFF]">{{ projectParticipatingNumber.designUnit }}</div>
|
<div class="text-[12px] text-[#ddd]">设计单位</div>
|
</div>
|
<img src="../assets/images/backgrounds/shejidanwei.png" alt="" class="h-[40px] w-[60px]" />
|
</div>
|
</div>
|
</div>
|
<div class="chart-container">
|
<!-- 表格搜索 -->
|
<div class="w-full flex items-center justify-between mb-[10px] mt-[20px]">
|
<el-input
|
v-model="searchText"
|
placeholder="搜索"
|
class="search-item w-full rounded-[2px]"
|
prefix-icon="el-icon-search"
|
clearable
|
@keyup.enter.native="searchList"
|
/>
|
</div>
|
|
<!-- 表格 -->
|
<el-table ref="filterTable" :data="tableData" class="chartTable w-full h-[300px] overflow-y-auto">
|
<el-table-column prop="UnitTypeText" label="类型" width="180" />
|
<el-table-column prop="Bind" label="阶段" width="180" :filters="bindFilters" :filter-method="filterBind" filter-placement="bottom-end">
|
<template slot-scope="scope">
|
<div class="long_title">
|
<span>{{ scope.row.Bind && scope.row.Bind !== "" ? scope.row.Bind : "--" }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="UnitName" label="名称" />
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getProjectId } from "../utils/getToken.js";
|
import { HomeAPI } from "../api/home";
|
export default {
|
name: "ProjectView",
|
data() {
|
return {
|
projectId: "",
|
searchText: "",
|
backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
|
titleImage: new URL("@/assets/images/titles/xiangmu.png", import.meta.url).href,
|
contentImage: new URL("@/assets/images/titles/xiangmu_bg.png", import.meta.url).href,
|
bgImage: new URL("@/assets/images/titles/title_second.png", import.meta.url).href,
|
tableImage: new URL("@/assets/images/backgrounds/table_bg.png", import.meta.url).href,
|
projectInfo: {
|
GrossFloorArea: "",
|
ProjectName: "",
|
Description: "",
|
Thumbnail: "",
|
endDate: "",
|
},
|
projectParticipatingNumber: {
|
buildingUnit: 0,
|
constructionUnit: 0,
|
supervisionUnit: 0,
|
designUnit: 0,
|
},
|
tableData: [],
|
bindFilters: [{ text: "家", value: "家" }], // 示例阶段列表
|
};
|
},
|
mounted() {
|
this.getProject();
|
this.getParticipatingList();
|
this.getParticipatingNumber();
|
},
|
methods: {
|
getProject() {
|
this.projectId = getProjectId();
|
const data = {
|
projectId: this.projectId,
|
};
|
HomeAPI.GetProject(data).then((res) => {
|
console.log(res);
|
if (res.Ret === 1) {
|
const result = res.Data;
|
console.log(result);
|
if (result.SafeProductionEndDate && result.SafeProductionEndDate !== "null") {
|
this.projectInfo.endDate = result.SafeProductionEndDate.substring(0, 10);
|
this.$store.commit("common/setProjectEndDate", this.projectInfo.endDate);
|
this.projectInfo.ProjectName = result.ProjectName;
|
this.projectInfo.Description = result.Description;
|
this.projectInfo.Thumbnail = result.Thumbnail;
|
this.projectInfo.GrossFloorArea = result.GrossFloorArea;
|
}
|
}
|
});
|
},
|
getParticipatingList(val) {
|
const data = {
|
organizeId: this.projectId,
|
name: val ? val : "",
|
};
|
HomeAPI.GetParticipatingList(data).then((res) => {
|
console.log(res);
|
if (res.Ret === 1) {
|
const result = res.Data;
|
console.log(result);
|
if (result.length > 0) {
|
this.tableData = result;
|
const newArray = [];
|
result.forEach((item) => {
|
if (item.Bind && item.Bind !== "null") {
|
newArray.push({ text: item.Bind, value: item.Bind });
|
}
|
});
|
this.bindFilters = this.arrayFilter(newArray, "value");
|
console.log(newArray, this.bindFilters);
|
} else {
|
this.tableData = [];
|
}
|
}
|
});
|
},
|
// 数组去重
|
arrayFilter(arr, key) {
|
const res = new Map();
|
return arr.filter((arr) => !res.has(arr[key]) && res.set(arr[key], 1));
|
},
|
|
getParticipatingNumber() {
|
const data = {
|
organizeId: this.projectId,
|
};
|
HomeAPI.GetParticipatingNumber(data).then((res) => {
|
console.log(res);
|
if (res.Ret === 1) {
|
const result = res.Data;
|
console.log(result);
|
if (result.length > 0) {
|
result.forEach((item) => {
|
if (item.UnitTypeText === "建设单位") {
|
this.projectParticipatingNumber.buildingUnit = item.Number;
|
} else if (item.UnitTypeText === "施工单位") {
|
this.projectParticipatingNumber.constructionUnit = item.Number;
|
} else if (item.UnitTypeText === "监理单位") {
|
this.projectParticipatingNumber.supervisionUnit = item.Number;
|
} else if (item.UnitTypeText === "设计单位") {
|
this.projectParticipatingNumber.designUnit = item.Number;
|
}
|
});
|
}
|
}
|
});
|
},
|
searchList() {
|
this.getParticipatingList(this.searchText);
|
},
|
filterBind(value, row) {
|
return row.Bind === value;
|
},
|
resetDateFilter() {
|
this.$refs.filterTable.clearFilter("date");
|
},
|
clearFilter() {
|
this.$refs.filterTable.clearFilter();
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.project-info {
|
width: 100%;
|
height: calc(100vh - 100px);
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
}
|
|
.header {
|
width: 100%;
|
}
|
|
.content {
|
flex: 1;
|
width: 100%;
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background-color: rgba(255, 255, 255, 0.2);
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background-color: rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.lineB {
|
background: radial-gradient(25% 60% at 50% 50%, rgb(26 56 89 / 50%) 0%, rgb(93 174 255 / 15%) 100%);
|
border-radius: 2px;
|
border: 1px solid;
|
border-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) 1 1;
|
}
|
|
.search-item {
|
::v-deep .el-input__wrapper {
|
background-color: rgba(26, 56, 89, 0.5);
|
box-shadow: none;
|
}
|
|
::v-deep .el-input__icon {
|
line-height: 35px;
|
}
|
|
::v-deep .el-input__inner {
|
color: white;
|
}
|
|
::v-deep .el-input__inner::placeholder {
|
color: rgba(255, 255, 255, 0.5);
|
}
|
|
::v-deep .el-input__prefix-icon {
|
color: rgba(255, 255, 255, 0.5);
|
}
|
}
|
|
.table-header {
|
height: 32px;
|
background: linear-gradient(180deg, #3068a5 0%, #1e4066 100%);
|
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
|
}
|
.chart-container {
|
width: 100%;
|
height: calc(40% - 170px);
|
.chartTable {
|
height: calc(100% - 10px);
|
}
|
::v-deep .el-table {
|
background-image: url("~@/assets/images/backgrounds/table_bg.png");
|
background-repeat: no-repeat;
|
background-position: center center;
|
background-size: 100% 100%;
|
background-color: #0e2b46;
|
padding: 8px 10px;
|
.el-table__header tr,
|
.el-table__header th {
|
background: linear-gradient(180deg, #3068a5 0%, #1e4066 100%);
|
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.2);
|
padding: 0;
|
height: 32px;
|
.cell {
|
text-align: center;
|
}
|
}
|
tbody {
|
overflow: hidden;
|
tr {
|
.el-table__cell {
|
padding: 10px 0;
|
}
|
td {
|
.cell {
|
color: #fff;
|
font-size: 12px;
|
text-align: center;
|
background-color: transparent !important;
|
}
|
}
|
td.el-table__cell {
|
padding: 10px 0;
|
border-bottom: 1px solid #3685f4;
|
}
|
}
|
tr.el-table__row {
|
background-color: transparent !important;
|
}
|
}
|
}
|
}
|
</style>
|
