From c325995e87ad75ba061cbb76e99562d686b37cc1 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Wed, 28 May 2025 16:07:14 +0800
Subject: [PATCH] feat: 增加默认值
---
src/views/ProjectView.vue | 225 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 154 insertions(+), 71 deletions(-)
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index cc1d4b8..4b0c819 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -14,7 +14,7 @@
<!-- 下部分 - 内容区域 -->
<div
- class="content flex-1 px-[16px] py-[14px] overflow-y-auto"
+ class="content flex-1 px-[16px] py-[14px] overflow-y-hidden"
:style="{
backgroundImage: `url(${backgroundImage})`,
backgroundRepeat: 'no-repeat',
@@ -38,9 +38,9 @@
alt=""
class="h-[30px] w-[40px]"
>
- <div class="text-white text-[14px]">一期总建筑面积</div>
+ <div class="text-white text-[16px]">一期总建筑面积</div>
<div class="flex items-center justify-center">
- <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">103.18</div>
+ <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>
@@ -60,9 +60,9 @@
alt=""
class="h-[30px] w-[40px]"
>
- <div class="text-white text-[14px]">目标完成日期</div>
+ <div class="text-white text-[16px]">目标完成日期</div>
<div class="flex items-center justify-center">
- <div class="text-[24px] text-[#00FFFF] font-bold">2028-12-01</div>
+ <div class="text-[24px] text-[#00FFFF] font-bold">{{projectInfo.endDate? projectInfo.endDate : '2028-12-01'}}</div>
</div>
</div>
</div>
@@ -77,20 +77,21 @@
backgroundSize: '100% 100%'
}"
>
- <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：北京交通大学雄安校区</div>
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.ProjectName}}</div>
</div>
- <div class="text-white text-[14px] tracking-[1px] leading-[24px] h-[60px]">
- 北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
+ <div class="text-white text-[14px] tracking-[1px] leading-[24px]">
+ {{ projectInfo.Description }}
</div>
<img
- src="../assets/images/backgrounds/map.png"
+ :src="projectInfo.Thumbnail? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
alt=""
- class="w-full h-[196px] mt-[20px]"
+ class="w-full mt-[20px]"
+ style="height: calc(100% - 150px);"
>
</div>
- <div class="w-[100%] h-[15%]">
+ <div class="w-[100%] h-[18%]">
<!-- 参建单位 -->
<div
class="w-full h-[30px] mt-[20px] mb-[10px]"
@@ -108,7 +109,7 @@
<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-[16px] text-[#00FFFF]">3</div>
+ <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.buildingUnit}}</div>
<div class="text-[12px] text-[#ddd]">建设单位</div>
</div>
<img
@@ -119,7 +120,7 @@
</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-[16px] text-[#00FFFF]">5</div>
+ <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.constructionUnit}}</div>
<div class="text-[12px] text-[#ddd]">施工单位</div>
</div>
<img
@@ -133,7 +134,7 @@
<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-[16px] text-[#00FFFF]">1</div>
+ <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.supervisionUnit}}</div>
<div class="text-[12px] text-[#ddd]">监理单位</div>
</div>
<img
@@ -144,7 +145,7 @@
</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-[16px] text-[#00FFFF]">1</div>
+ <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.designUnit}}</div>
<div class="text-[12px] text-[#ddd]">设计单位</div>
</div>
<img
@@ -163,48 +164,38 @@
placeholder="搜索"
class="search-item w-full rounded-[2px]"
prefix-icon="el-icon-search"
+ clearable
+ @keyup.enter.native="searchList"
>
</el-input>
</div>
<!-- 表格 -->
- <div
- class="w-full min-h-[20vh] px-[8px] py-[10px]"
- :style="{
- backgroundImage: `url(${tableImage})`,
- backgroundRepeat: 'no-repeat',
- backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
- }"
+ <el-table
+ ref="filterTable"
+ :data="tableData"
+ class="chartTable w-full h-[300px] overflow-y-auto"
>
- <table class="w-full text-white text-[14px] overflow-y-auto">
- <thead>
- <tr class="table-header">
- <th class="py-[8px] text-left pl-[12px]">类型</th>
- <th class="py-[8px] text-left">阶段</th>
- <th class="py-[8px] text-left">名称</th>
- </tr>
- </thead>
- <tbody>
- <tr
- v-for="item in tableData"
- :key="item.id"
- class="border-b border-[rgba(255,255,255,0.1)]"
- >
- <td class="py-[8px] pl-[12px]">{{ item.type }}</td>
- <td class="py-[8px]">{{ item.stage }}</td>
- <td class="py-[8px]">{{ item.name }}</td>
- </tr>
- </tbody>
- </table>
- </div>
+ <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, getToken } from "../utils/getToken.js";
+import { getProjectId } from "../utils/getToken.js";
import { HomeAPI } from "../api/home";
export default {
name: 'ProjectView',
@@ -217,28 +208,21 @@
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,
- tableData: [
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- ]
+ projectInfo: {
+ GrossFloorArea: '',
+ ProjectName: '',
+ Description: '',
+ Thumbnail: '',
+ endDate: ''
+ },
+ projectParticipatingNumber: {
+ buildingUnit: 0,
+ constructionUnit: 0,
+ supervisionUnit: 0,
+ designUnit: 0
+ },
+ tableData: [],
+ bindFilters: [{ text: '家', value: '家' }], // 示例阶段列表
};
},
mounted() {
@@ -257,23 +241,52 @@
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() {
+ getParticipatingList(val) {
const data = {
"organizeId": this.projectId,
- name: ''
+ 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
@@ -283,9 +296,34 @@
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>
@@ -358,6 +396,51 @@
}
.chart-container{
width: 100%;
- height: calc(40% - 180px);
+ 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>
--
Gitblit v1.9.3