tall3-pc-keti/src/components/tall/task/SubSubjectProgress.vue

<template>
  <div class="task-progress flex flex-wrap justify-between">
    <div class="wrap overflow-hidden">
      <a-card title="任务目标">
        <div class="flex flex-wrap justify-center">
          <div class="achievements border border-right border-bottom text-center">
            <p class="num">{{ infoOne.thesis }}/{{ infoOne.totalThesis }}</p>
            <p class="name">论文</p>
          </div>
          <div class="achievements border border-bottom text-center">
            <p class="num">{{ infoOne.patent }}/{{ infoOne.totalPatent }}</p>
            <p class="name">专利</p>
          </div>
          <div class="achievements border border-right text-center">
            <p class="num">{{ infoOne.theSoft }}/{{ infoOne.totalTheSoft }}</p>
            <p class="name">软著</p>
          </div>
          <div class="achievements border text-center">
            <p class="num">{{ infoOne.meeting }}/{{ infoOne.totalMeeting }}</p>
            <p class="name">会议</p>
          </div>
        </div>
      </a-card>
    </div>
    <div class="wrap overflow-hidden">
      <a-card title="概览">
        <div class="topic">
          <p>{{ infoOne.name }}</p>
          <a-progress
            :percent="infoOne.masterSchedule"
            :strokeWidth="22"
            :show-info="false"
            :stroke-color="'#1890FF'"
            :trail-color="'rgba(24, 144, 255, 0.2)'"
          />
        </div>

        <div class="sub-topic flex justify-between flex-wrap">
          <div class="topic" v-for="(item, index) in infoSec" :key="index">
            <p>{{ item.name }}</p>
            <a-progress
              :percent="item.masterSchedule"
              :strokeWidth="22"
              :show-info="false"
              :stroke-color="colorList[index % 4].color"
              :trail-color="colorList[index % 4].bgColor"
            />
          </div>
        </div>
      </a-card>
    </div>
    <div class="wrap overflow-hidden" v-for="(item, index) in infoSec" :key="index">
      <a-card :title="item.name">
        <div class="flex flex-wrap justify-center">
          <div class="achievements border border-right border-bottom text-center">
            <p class="num">{{ item.report }}</p>
            <p class="name">实验报告</p>
          </div>
          <div class="achievements border border-bottom text-center">
            <p class="num">{{ item.course }}</p>
            <p class="name">实验过程</p>
          </div>
          <div class="achievements border border-right text-center">
            <p class="num">{{ item.information }}</p>
            <p class="name">实验数据</p>
          </div>
          <div class="achievements border text-center">
            <p class="num">{{ item.result }}</p>
            <p class="name">实验结果</p>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { getProgress } from 'apis';

const store = useStore();
const sessionProject = sessionStorage.getItem('project');
const projectId = computed(() => store.getters['projects/projectId']);
const infoOne = ref({});
const infoSec = ref([]);

if (sessionProject) {
  const project = JSON.parse(sessionProject);
  store.commit('projects/setProject', project);
}

const colorList = ref([
  { color: '#FF9191', bgColor: 'rgba(255, 145, 145, 0.2)' },
  { color: '#FF934B', bgColor: 'rgba(255, 147, 75, 0.2)' },
  { color: '#B991FF', bgColor: 'rgba(185, 145, 255, 0.2)' },
  { color: '#91C1FF', bgColor: 'rgba(145, 193, 255, 0.2)' },
]);

progress();

async function progress() {
  try {
    const params = { param: { projectId: projectId.value } };
    const data = await getProgress(params);
    infoOne.value = data.target;
    infoSec.value = data.subTargetList;
  } catch (error) {
    console.log('error', error);
  }
}
</script>

<style scoped>
.wrap {
  margin-top: 16px;
  width: calc((100% - 16px) / 2);
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #cccccc;
}

.wrap:nth-child(-n + 2) {
  margin-top: 0;
}

:deep(.ant-card-head) {
  padding: 0 16px;
  min-height: 45px;
  max-height: 45px;
  border-color: #cccccc;
  font-size: 14px;
}

:deep(.ant-card-head-title) {
  padding: 0;
  line-height: 45px;
}

.wrap .num {
  font-size: 22px;
  color: #4b8aff;
}

.wrap .name {
  color: #666666;
}

.wrap p {
  margin: 0;
}

.border {
  border-color: #fff;
}

.border-right {
  border-right-color: #cccccc;
}

.border-left {
  border-left-color: #cccccc;
}

.border-top {
  border-top-color: #cccccc;
}

.border-bottom {
  border-bottom-color: #cccccc;
}

.achievements {
  width: 40%;
  padding: 25px 0;
}

.topic p {
  margin-bottom: 8px;
  color: #666666;
}

.sub-topic .topic {
  margin-top: 40px;
  width: calc((100% - 32px) / 2);
}

.ant-card {
  height: 100%;
}

.ant-card :deep(.ant-card-body) {
  height: calc(100% - 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>