laws_weilai/jero-web/src/views/projectManagement/projectStatusBoard/components/projectStatusAndProgress.vue

<template>
  <div class="doc-detail">
    <div class="Virtual-detail-header" style="position: fixed;top: 0">
      <div class="Virtual-detail-title">
        <span>
             {{this.$t('projectStatusAndProgress')}}
        </span>
      </div>
    </div>
    <div style="padding: 77px 0 0 0;background: #ffffff;height:100%">
      <div class="detail-content" style="height: 100%">
        <a-table
          ref="table"
          size="middle"
          :loading="loading"
          :pagination="false"
          :scroll="{x: '100%',y:'calc(100vh - 180px)'}"
          :data-source="dataSource"
          :columns="columns"
        >
          <span slot="projectStatusTitle">
               <span>{{this.$t('CurrentStatusOfTheProject')}}</span><br/>
               <span>{{'('+$t('red')+'/'+$t('yellow')+'/'+$t('green')+'/'+$t('blue')+')'}}</span>
          </span>
          <span slot="CertificationProgressTitle">
               <span>{{this.$t('CertificationProgress')}}</span><br/>
               <span>{{'('+$t('notInvolved')+'/'+$t('toBeStarted')+'/'+$t('inProgress')+'/'+$t('experimentFailed')+'/'+$t('experimentPassed')+')'}}</span>
          </span>
          <span slot="listConfirmationStatusTitle">
               <span>{{this.$t('listConfirmation')}}</span><br/>
               <span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
          </span>
          <span slot="taskAffirmStatusTitle">
              <span>{{this.$t('taskAffirm')}}</span><br/>
              <span>{{'('+$t('notLaunch')+'/'+$t('toBeConfirmed')+'/'+$t('accept')+'/'+$t('refuse')+')'}}</span>
          </span>
          <span slot="designComplianceReviewTitle">
               <span>{{this.$t('designComplianceReview')}}</span><br/>
              <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
          </span>
          <span slot="preHomeConfirmationTitle">
             <span>{{this.$t('preHomeConfirmation')}}</span><br/>
             <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
          </span>
          <span slot="verificationComplianceReviewTitle">
             <span>{{this.$t('verificationComplianceReview')}}</span><br/>
             <span>{{'('+$t('toBeConfirmed')+'/'+$t('accord')+'/'+$t('nonConformity')+'/'+$t('Tracked')+'/'+$t('notInvolved')+'/'+$t('taskTermination')+')'}}</span>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getAction, postAction, deleteAction } from '@/api/manage'

  export default {
    name: 'projectStatusAndProgress',
    data() {
      return {
        url: {
          list: '/project/ProjectStatusBoardController/scheduleInfoList'
        },
        loading: false,
        dataSource: [],
        columns: [
          {
            title: this.$t('entryName'),
            align: 'center',
            dataIndex: 'projectName',
            width: 180,
            ellipsis: true
          },
          {
            title: this.$t('targetMarket'),
            align: 'center',
            dataIndex: 'targetMarket',
            width: 180,
            ellipsis: true
          },
          {
            align: 'center',
            dataIndex: 'projectStatus',
            scopedSlots: { title: 'projectStatusTitle' },
            width: 240,
            ellipsis: true
          },
          {
            align: 'center',
            dataIndex: 'certificationProgress',
            width: 380,
            ellipsis: true,
            scopedSlots: { title: 'CertificationProgressTitle' }
          },
          {
            align: 'center',
            dataIndex: 'inventory',
            width: 340,
            ellipsis: true,
            scopedSlots: { title: 'listConfirmationStatusTitle' }
          },
          {
            align: 'center',
            dataIndex: 'task',
            width: 340,
            ellipsis: true,
            scopedSlots: { title: 'taskAffirmStatusTitle' }
          },
          {
            align: 'center',
            dataIndex: 'design',
            width: 440,
            scopedSlots: { title: 'designComplianceReviewTitle' }
          },
          {
            dataIndex: 'pre',
            align: 'center',
            width: 440,
            scopedSlots: { title: 'preHomeConfirmationTitle' }
          },
          {
            dataIndex: 'verify',
            align: 'center',
            width: 440,
            scopedSlots: { title: 'verificationComplianceReviewTitle' }
          }
        ]
      }
    },
    created() {
      document.title = this.$t('projectStatusAndProgress')
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.loading = true
        getAction(this.url.list, this.queryParam).then((res) => {
          if (res.success) {
            this.loading = false
            this.dataSource = res.result || []
          } else {
            this.loading = false
            this.dataSource = []
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';

  .doc-detail {
    background: #fff;
    height: 100%;

    .Virtual-detail-header {
      width: 100%;
      height: 68px;
      line-height: 68px;
      padding: 0 32px 0 32px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      border-bottom: 2px #eff1f3 solid;
      background: #fff;

      .Virtual-detail-title {
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 20px;
        font-weight: 400;
        color: #040B29;
        line-height: 68px;
      }

      .doc-detail-right {
        width: 800px;
        line-height: 68px;
        display: flex;
      }
    }

    .Virtual-detail-left {
      width: 240px;
      padding: 16px 24px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 3;
      float: left;

      .Virtual-detail-left-text {
        padding: 2px 12px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .Virtual-detail-right {
      border-left: 2px #eff1f3 solid;
      width: calc(100% - 240px);
      height: 100%;
      float: left;
      overflow: auto;
    }
  }

  .Virtual-detail-left-text-color {
    background: #eff1f3;
    border-radius: 4px;
  }

  .Virtual-detail-text-right {

  }
  ::v-deep .ant-table-row:first-child {
    background: #fff!important;
  }

  ::v-deep .ant-table-body {
    background: transparent!important;
  }
</style>