调整样式，接口对接

gjj

2025-02-25 fe2b697a063ab9898af5ec0b49c30ad20274d56e

 src/views/ProjectView.vue

@@ -22,187 +22,195 @@
        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">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]">项目名称：北京交通大学雄安校区</div>
        </div>

        <div class="text-white text-[14px] tracking-[1px] leading-[24px] h-[60px]">
          北京交通大学雄安校区选址位于河北雄安新区第五组团及启动区。东至规划绿地、城市道路NB6，南至城市道路ED34、城市道路EA2，西至城市道路ND32、城市道路NA11，北至城市道路EA1。
        </div>

        <img 
          src="../assets/images/backgrounds/jianzhumianji.png" 
          src="../assets/images/backgrounds/map.png" 
          alt="" 
          class="h-[30px] w-[40px]"
          class="w-full h-[196px] mt-[20px]"
        >
        <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]">3</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]">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>
      <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"
          >
          </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.type }}</td>
                <td class="py-[8px]">{{ item.stage }}</td>
                <td class="py-[8px]">{{ item.name }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getProjectId, getToken } 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,
@@ -233,6 +241,52 @@
      ]
    };
  },
  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);
        }
        
      });
    },
    getParticipatingList() {
      const data = {
        "organizeId": this.projectId,
        name: ''
      }
      HomeAPI.GetParticipatingList(data).then(res => {
        console.log(res);
        if(res.Ret === 1) {
          const result = res.Data
          console.log(result);
        }
      });
    },
    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);
        }
      });
    }
  }
}
</script>

@@ -302,4 +356,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>