增加标段筛选和接口字段，调整样式，增加全局放大

gjj

2025-03-17 239933482fd30e099ab9d038bc1a2e0164a65cb4

 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,7 +60,7 @@
            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">{{projectInfo.endDate? projectInfo.endDate : '2028-12-01'}}</div>
          </div>
@@ -77,7 +77,7 @@
            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]">
@@ -88,10 +88,10 @@
          :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]" 
@@ -109,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]">{{projectParticipatingNumber.buildingUnit}}</div>
              <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.buildingUnit}}</div>
              <div class="text-[12px] text-[#ddd]">建设单位</div>
            </div>
            <img 
@@ -120,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]">{{projectParticipatingNumber.constructionUnit}}</div>
              <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.constructionUnit}}</div>
              <div class="text-[12px] text-[#ddd]">施工单位</div>
            </div>
            <img 
@@ -134,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]">{{projectParticipatingNumber.supervisionUnit}}</div>
              <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.supervisionUnit}}</div>
              <div class="text-[12px] text-[#ddd]">监理单位</div>
            </div>
            <img 
@@ -145,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]">{{projectParticipatingNumber.designUnit}}</div>
              <div class="text-[18px] text-[#00FFFF]">{{projectParticipatingNumber.designUnit}}</div>
              <div class="text-[12px] text-[#ddd]">设计单位</div>
            </div>
            <img 
@@ -171,36 +171,24 @@
        </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.UnitTypeText }}</td>
                <td class="py-[8px]">{{ item.stage ? item.stage : '--' }}</td>
                <td class="py-[8px]">{{ item.UnitName }}</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>
@@ -221,7 +209,7 @@
      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: '',
        ProjectName: '',
        Description: '',
        Thumbnail: '',
        endDate: ''
@@ -233,6 +221,7 @@
        designUnit: 0
      },
      tableData: [],
      bindFilters: [{ text: '家', value: '家' }], // 示例阶段列表
    };
  },
  mounted() {
@@ -253,7 +242,8 @@
          console.log(result);
          if(result.SafeProductionEndDate && result.SafeProductionEndDate !== 'null') {
            this.projectInfo.endDate = result.SafeProductionEndDate.substring(0, 10)
            this.projectInfo.OrganizeName = result.OrganizeName
            this.$store.commit('common/setProjectEndDate', this.projectInfo.endDate)
            this.projectInfo.ProjectName = result.ProjectName
            this.projectInfo.Description = result.Description
            this.projectInfo.Thumbnail = result.Thumbnail
          } 
@@ -273,6 +263,13 @@
          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 = newArray
          } else {
            this.tableData = []
          }
@@ -307,7 +304,16 @@
    },
    searchList() {
      this.getParticipatingList(this.searchText)
    }
    },
    filterBind(value, row) {
      return row.Bind === value;
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
  }
}
</script>
@@ -380,6 +386,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>