From 84201c1e88b65f16b6da2c85ab8eee23f37a3da1 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Mon, 30 Jun 2025 16:02:54 +0800
Subject: [PATCH] fix: 引入第三方字体
---
src/views/ProjectView.vue | 509 ++++++++++++++++++++++++++------------------------------
1 files changed, 239 insertions(+), 270 deletions(-)
diff --git a/src/views/ProjectView.vue b/src/views/ProjectView.vue
index 4b0c819..63acba0 100644
--- a/src/views/ProjectView.vue
+++ b/src/views/ProjectView.vue
@@ -1,105 +1,102 @@
<template>
<div class="project-info">
<!-- 上部分 - 图片 -->
- <div
- class="w-full h-[4vh] mb-[1vh]"
+ <div
+ class="w-full h-[4vh] mb-[1vh]"
:style="{
backgroundImage: `url(${titleImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
+ 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"
+ <div
+ class="content flex-1 px-[16px] py-[14px] overflow-y-hidden"
:style="{
backgroundImage: `url(${backgroundImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: 'cover'
+ backgroundSize: 'cover',
}"
>
<div class="h-[120px] w-full">
<!-- 建筑面积 -->
- <div
- class="w-full h-[50px] mb-[10px] flex items-center justify-evenly"
+ <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%'
+ backgroundSize: '100% 100%',
}"
>
- <img
- src="../assets/images/backgrounds/jianzhumianji.png"
- alt=""
- class="h-[30px] w-[40px]"
- >
+ <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-[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"
+ <div
+ class="w-full h-[50px] flex items-center justify-evenly"
:style="{
backgroundImage: `url(${contentImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
+ backgroundSize: '100% 100%',
}"
>
- <img
- src="../assets/images/backgrounds/mubiaowancheng.png"
- alt=""
- class="h-[30px] w-[40px]"
- >
+ <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 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]"
+ <div
+ class="w-full h-[30px] mt-[20px] mb-[10px]"
:style="{
backgroundImage: `url(${bgImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
+ backgroundSize: '100% 100%',
}"
>
- <div class="text-white text-[14px] ml-[40px] leading-[35px]">项目名称：{{projectInfo.ProjectName}}</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]">
{{ projectInfo.Description }}
</div>
- <img
- :src="projectInfo.Thumbnail? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
- alt=""
+ <img
+ :src="projectInfo.Thumbnail ? projectInfo.Thumbnail : '../assets/images/backgrounds/cover_bg.png'"
+ alt=""
class="w-full mt-[20px]"
- style="height: calc(100% - 150px);"
- >
+ style="height: calc(100% - 150px)"
+ />
</div>
<div class="w-[100%] h-[18%]">
<!-- 参建单位 -->
- <div
- class="w-full h-[30px] mt-[20px] mb-[10px]"
+ <div
+ class="w-full h-[30px] mt-[20px] mb-[10px]"
:style="{
backgroundImage: `url(${bgImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
+ backgroundSize: '100% 100%',
}"
>
<div class="text-white text-[14px] ml-[40px] leading-[35px]">参建单位</div>
@@ -109,50 +106,34 @@
<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-[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]"
- >
+ <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-[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]"
- >
+ <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-[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]"
- >
+ <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-[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]"
- >
+ <img src="../assets/images/backgrounds/shejidanwei.png" alt="" class="h-[40px] w-[60px]" />
</div>
</div>
</div>
@@ -166,24 +147,16 @@
prefix-icon="el-icon-search"
clearable
@keyup.enter.native="searchList"
- >
- </el-input>
+ />
</div>
<!-- 表格 -->
- <el-table
- ref="filterTable"
- :data="tableData"
- class="chartTable w-full h-[300px] overflow-y-auto"
- >
+ <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">
+ <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>
+ <span>{{ scope.row.Bind && scope.row.Bind !== "" ? scope.row.Bind : "--" }}</span>
</div>
</template>
</el-table-column>
@@ -195,233 +168,229 @@
</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
- }
- }
-
- });
+ 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: "家" }], // 示例阶段列表
+ };
},
- 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 = []
+ 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;
+ }
}
-
- }
- });
- },
- // 数组去重
- 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
- }
- })
+ });
+ },
+ 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();
+ },
},
- 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;
+ .project-info {
+ width: 100%;
+ height: calc(100vh - 100px);
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
- &::-webkit-scrollbar-thumb {
- background-color: rgba(255, 255, 255, 0.2);
- border-radius: 3px;
+ .header {
+ width: 100%;
}
- &::-webkit-scrollbar-track {
- background-color: rgba(0, 0, 0, 0.1);
- }
-}
+ .content {
+ flex: 1;
+ width: 100%;
-.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;
-}
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
-.search-item {
- ::v-deep .el-input__wrapper {
- background-color: rgba(26, 56, 89, 0.5);
- box-shadow: none;
+ &::-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);
+ }
}
- ::v-deep .el-input__icon {
- line-height: 35px;
+ .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;
}
- ::v-deep .el-input__inner {
- color: white;
+ .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);
+ }
}
- ::v-deep .el-input__inner::placeholder {
- 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);
}
-
- ::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{
+ .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;
+ 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);
+ 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{
+ .cell {
text-align: center;
}
}
- tbody{
+ tbody {
overflow: hidden;
tr {
- .el-table__cell{
+ .el-table__cell {
padding: 10px 0;
}
td {
@@ -432,15 +401,15 @@
background-color: transparent !important;
}
}
- td.el-table__cell{
+ td.el-table__cell {
padding: 10px 0;
- border-bottom: 1px solid #3685F4;
+ border-bottom: 1px solid #3685f4;
}
}
- tr.el-table__row{
+ tr.el-table__row {
background-color: transparent !important;
}
}
}
-}
+ }
</style>
--
Gitblit v1.9.3