fix: 引入第三方字体

Gary Gu

2025-06-30 84201c1e88b65f16b6da2c85ab8eee23f37a3da1

 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-auto" 
    <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]"
          >
          <div class="text-white text-[14px]">一期总建筑面积</div>
          <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]">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]"
          >
          <div class="text-white text-[14px]">目标完成日期</div>
          <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.OrganizeName}}</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% - 120px);"
        >
          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]" 
        <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-[16px] 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-[16px] 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-[16px] 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-[16px] 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,220 +147,269 @@
            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>
        <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: {
        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
          } 
        }
        
      });
  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
          } 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;
            }
          }
        });
      },
      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
              }
            })
      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)
    }
  }
}
  };
</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);
  .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;
        }
      }
    }
  }
}

.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% - 180px);
}
</style>