From 19606d5b3551d26bee379fa0dc57eea627e37b98 Mon Sep 17 00:00:00 2001
From: gjj <Ganjj@probim.com.cn>
Date: Tue, 25 Feb 2025 17:55:28 +0800
Subject: [PATCH] 全景图切换
---
src/views/ProjectView.vue | 450 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 265 insertions(+), 185 deletions(-)
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index f0d31c4..f896813 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -22,217 +22,293 @@
backgroundSize: 'cover'
}"
>
- <!-- 建筑面积 -->
- <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%'
- }"
- >
+ <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-[14px]">一期总建筑面积</div>
+ <div class="flex items-center justify-center">
+ <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">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-[14px]">目标完成日期</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.OrganizeName}}</div>
+ </div>
+
+ <div class="text-white text-[14px] tracking-[1px] leading-[24px]">
+ {{ projectInfo.Description }}
+ </div>
+
<img
- src="../assets/images/backgrounds/jianzhumianji.png"
+ :src="projectInfo.Thumbnail? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
alt=""
- class="h-[30px] w-[40px]"
+ class="w-full mt-[20px]"
+ style="height: calc(100% - 120px);"
>
- <div class="text-white text-[14px]">一期总建筑面积</div>
- <div class="flex items-center justify-center">
- <div class="text-[24px] text-[#FFD500] font-bold mr-[8px]">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="w-[100%] h-[15%]">
+ <!-- 参建单位 -->
+ <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]">目标完成日期</div>
- <div class="flex items-center justify-center">
- <div class="text-[24px] text-[#00FFFF] font-bold">2028-12-01</div>
+ <div class="text-white text-[14px] ml-[40px] leading-[35px]">参建单位</div>
</div>
- </div>
- <!-- 项目名称 -->
- <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="text-white text-[14px] tracking-[1px] leading-[24px]">
- 北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
- </div>
-
- <img
- src="../assets/images/backgrounds/map.png"
- alt=""
- class="w-full h-[196px] mt-[20px]"
- >
-
- <!-- 参建单位 -->
- <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-[16px] text-[#00FFFF]">3</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-[16px] text-[#00FFFF]">5</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-[16px] text-[#00FFFF]">1</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-[16px] text-[#00FFFF]">1</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 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"
- >
- </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%'
- }"
- >
- <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)]"
+ <!-- 参建单位统计 -->
+ <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]">{{projectParticipatingNumber.buildingUnit}}</div>
+ <div class="text-[12px] text-[#ddd]">建设单位</div>
+ </div>
+ <img
+ src="../assets/images/backgrounds/jianshedanwei.png"
+ alt=""
+ class="h-[40px] w-[60px]"
>
- <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>
+ <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]">{{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-[16px] 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-[16px] 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"
+ >
+ </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%'
+ }"
+ >
+ <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.UnitTypeText }}</td>
+ <td class="py-[8px]">{{ item.stage ? item.stage : '--' }}</td>
+ <td class="py-[8px]">{{ item.UnitName }}</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</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,
- tableData: [
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- {
- name: '建设单位名称单位',
- stage: '一标',
- type: '建设单位'
- },
- ]
+ projectInfo: {
+ OrganizeName: '',
+ Description: '',
+ Thumbnail: '',
+ endDate: ''
+ },
+ projectParticipatingNumber: {
+ buildingUnit: 0,
+ constructionUnit: 0,
+ supervisionUnit: 0,
+ designUnit: 0
+ },
+ tableData: [],
};
},
+ 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.projectInfo.OrganizeName = result.OrganizeName
+ this.projectInfo.Description = result.Description
+ this.projectInfo.Thumbnail = result.Thumbnail
+ }
+ }
+
+ });
+ },
+ 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
+ } else {
+ this.tableData = []
+ }
+
+ }
+ });
+ },
+ 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)
+ }
+ }
}
</script>
@@ -302,4 +378,8 @@
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% - 180px);
+}
</style>
--
Gitblit v1.9.3