Gyyq-Upstairs/src/views/components/analysis/projectList.vue

<template>
  <div class="projectList">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="项目名称" width="170">
        <template slot-scope="scope">
          <span style="color: #2B62F1;">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ssgnq" label="所在区域">
      </el-table-column>
      <el-table-column prop="ztze" label='总投资额(万元)' width="88">
      </el-table-column>
      <el-table-column prop="zydmj" label='建筑面积(万平方米)' width="88">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="70">
        <template slot-scope="scope">
          <span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { xmlist } from '@/api/ManageApi'

export default {
  data() {
    return {
      tableData: [],
      ssgnqMap:{
        1:'高贸区',
        2:'科创区',
        3:'度假区',
        4:'商务区',
        5:'苏相合作区'
      }
    }
  },
  created() {
    this.getxmList();
  },
  methods: {
    async getxmList() {
      const response = await xmlist();
      if (response && response.code === 200 && response.data.records) {
        this.tableData = this.processData(response.data.records);
      }
    },
    processData(data) {
      return data.map(item => ({
        name: item.name,
        ssgnq: this.getRegion(item.ssgnq), 
        ztze: item.ztze, 
        zydmj: item.zydmj || 0,
        status: this.getStatus(item.xzfl)
      }));
    },
    getStatus(xzfl) {
      switch (xzfl) {
        case 1:
          return '已建';
        case 2:
          return '在建';
        case 3:
          return '拟建';
        default:
          return '未知';
      }
    },
    getRegion(ssgnq) {
      return this.ssgnqMap[ssgnq] || '未知区域';
    },
    getStatusColor(status) {
      switch (status) {
        case '在建':
          return 'color: #2DD29F;';
        case '拟建':
          return 'color: #F08445;';
        case '已建':
          return 'color: #2B62F1;';
        default:
          return 'color: #000000;';
      }
    }
  }
}
</script>

<style scoped>
.projectList {
  padding: 0 .5rem 0rem 0;
  height: 15rem;
  overflow-y: auto;
}
</style>