<template>
  <!-- 管理绩效评价 -->
  <div class="jiZhiJianShe">
    <div class="partTitleHM" style="width: 99.8%">管理绩效评价(截至2024)</div>
    <div class="ListBoxBody">
      <div class="content">
        <div class="table_content">
          <el-table ref="table" :data="tableData" height="170">
            <el-table-column label="机制建设考核" prop="partitionName" show-overflow-tooltip />
            <el-table-column label="目标要求" prop="reformProjectName" show-overflow-tooltip />
            <el-table-column label="现状情况" prop="reformAchievement" show-overflow-tooltip />
            <el-table-column label="达标评估" prop="isCompliance" width="120px">
              <template #default="{ row }">
                <span :class="row.isCompliance === '1' ? 'success' : 'danger'">{{ row.isCompliance === '1' ? '达标' : '未达标' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import bus from '@/bus';

const { proxy } = getCurrentInstance();
const tableData = ref([
  {
    partitionName: '立法及长效机制',
    reformProjectName: '完成立法1项,长效机制2项',
    reformAchievement: '立法1项,6项长效机制',
    isCompliance: '1',
  },
  { partitionName: '规划建设管控制度', reformProjectName: '基本完善', reformAchievement: '基本完善', isCompliance: '1' },
  {
    partitionName: '绩效考核制度',
    reformProjectName: '基本完善',
    reformAchievement: '完善海绵城市绩效考核制度并有效落实',
    isCompliance: '1',
  },
]);

onMounted(() => {});

onBeforeUnmount(() => {});
</script>

<style lang="scss" scoped>
.jiZhiJianShe {
  width: 50%;
  background: url('@/assets/images/Sponge_screen/chengShiTeZheng/box_back.png') no-repeat;
  background-size: 100% 100%;

  .ListBoxBody {
    background: rgba(8, 75, 125, 1);
    padding: 10px;
    margin-top: -3px;
    .content {
      width: 100%;
      height: 100%;

      .img_box {
        width: 100%;
        height: 100%;
      }

      .tabs {
        height: 36px;
        color: #fff;
        margin-bottom: 10px;
      }

      .table_content {
        height: 98%;
      }

      .monitor {
        width: 20px;
        height: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.success {
  color: #00fe00 !important;
}
.danger {
  color: #ff5e66 !important;
}
#tables {
  width: 100%;
  ::v-deep .el-table__header-wrapper .el-table__header thead {
    background: transparent !important;
    border-bottom: 1px solid #579ff6 !important;
  }
  ::v-deep .el-table__header-wrapper .el-table__header thead tr .el-table__cell {
    background: transparent !important;
    border-bottom: 2px solid #2eafbf !important;
  }
}

::v-deep .table_content .el-table__body-wrapper {
  padding-top: 5px;
}
</style>