From 70bebe9dae89ebddd7e77543aac618e78d730fc9 Mon Sep 17 00:00:00 2001 From: gjj <Ganjj@probim.com.cn> Date: Wed, 26 Feb 2025 16:39:32 +0800 Subject: [PATCH] 样式调整 --- src/views/ProjectView.vue | 110 ++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 68 insertions(+), 42 deletions(-) diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue index cc1d4b8..586d7b3 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', @@ -62,7 +62,7 @@ > <div class="text-white text-[14px]">目标完成日期</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-[16px] 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-[16px] 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-[16px] 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-[16px] text-[#00FFFF]">{{projectParticipatingNumber.designUnit}}</div> <div class="text-[12px] text-[#ddd]">设计单位</div> </div> <img @@ -163,13 +164,15 @@ 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]" + class="chartTable w-full h-[300px] px-[8px] py-[10px] overflow-y-auto" :style="{ backgroundImage: `url(${tableImage})`, backgroundRepeat: 'no-repeat', @@ -191,9 +194,9 @@ :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> + <td class="py-[8px] pl-[12px]">{{ item.UnitTypeText }}</td> + <td class="py-[8px]">{{ item.stage ? item.stage : '--' }}</td> + <td class="py-[8px]">{{ item.UnitName }}</td> </tr> </tbody> </table> @@ -204,7 +207,7 @@ </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 +220,19 @@ 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: { + ProjectName: '', + Description: '', + Thumbnail: '', + endDate: '' + }, + projectParticipatingNumber: { + buildingUnit: 0, + constructionUnit: 0, + supervisionUnit: 0, + designUnit: 0 + }, + tableData: [], }; }, mounted() { @@ -257,20 +251,33 @@ 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 + } } }); }, - 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 + } else { + this.tableData = [] + } + } }); }, @@ -283,8 +290,24 @@ 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) } } } @@ -358,6 +381,9 @@ } .chart-container{ width: 100%; - height: calc(40% - 180px); + height: calc(40% - 170px); + .chartTable{ + height: calc(100% - 10px); + } } </style> -- Gitblit v1.9.3