Merge branch 'lsf-dataproduct-1018'

riku

2024-10-24 3d3e7f45086799fdd7a412e2079710a6cdf8dc2b

 src/components/list-item/ItemSubTask.vue

@@ -1,23 +1,68 @@
<template>
  <div class="wrapper">
    <div>
      <el-text truncated>{{ item.name }}</el-text>
    </div>
    <div>
      <el-space fill>
        <el-text truncated class="w-250px" size="small">{{ item.scenseaddress }}</el-text>
        <el-text truncated class="w-250px" size="small">{{
          $fm.formatYMDH(item.planstarttime)
        }}</el-text>
        <el-text truncated class="w-250px" size="small">{{ item.executorrealtimes }}</el-text>
      </el-space>
    </div>
    <el-row justify="end" style="margin-top: 4px">
      <slot :item="item"></slot>
    <el-row justify="space-between" class="m-t-4">
      <el-col :span="20">
        <div class="text-title">
          <el-tag
            size="small"
            :type="statusType.type"
            effect="plain"
            class="m-r-4 m-b-4"
          >
            <el-space :size="4">
              <el-icon size="16">
                <component :is="statusType.icon"></component>
              </el-icon>
              {{ item.status }}
            </el-space>
          </el-tag>
          {{ item.name }}
        </div>
        <div class="text-info">
          <div class="text-label">
            <el-icon class="m-r-4" size="16"><LocationInformation /></el-icon>
            <span>任务地址：</span>
          </div>
          {{ item.scenseaddress }}
        </div>
        <div class="text-info">
          <div class="text-label">
            <!-- <el-icon><Clock /></el-icon> -->
            <el-icon class="m-r-4" size="16"><AlarmClock /></el-icon>
            <span>任务时间：</span>
          </div>
          {{ $fm.formatYMD(item.planstarttime) }}
        </div>
        <div class="text-info">
          <div class="text-label">
            <el-icon class="m-r-4" size="16"><User /></el-icon>
            任务人员：
          </div>
          {{ item.executorrealtimes }}
        </div>
        <el-space class="m-t-4">
          <el-tag size="small" type="info" effect=""
            >问题：{{ status.proNum }}</el-tag
          >
          <el-tag size="small" type="info" effect=""
            >整改：{{ status.changeNum }}</el-tag
          >
          <el-tag size="small" :type="changePerType" effect=""
            >整改率：{{ status.changePer }}</el-tag
          >
        </el-space>
      </el-col>
      <el-col :span="4">
        <slot :item="item"></slot>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, watch, computed } from 'vue';
import taskApi from '@/api/fysp/taskApi';
import ProCheckProxy from '@/views/fysp/check/ProCheckProxy';

/**
 * 监管对象
 */
@@ -27,12 +72,98 @@
    default: () => {}
  }
});

const loading = ref(false);
const proList = ref([]);
const status = ref({});

const statusType = computed(() => {
  switch (props.item.status) {
    case '未执行':
      return {
        type: 'danger',
        icon: 'WarningFilled'
      };
    case '正在执行':
      return {
        type: 'success',
        icon: 'Timer'
      };
    case '已结束':
      return {
        type: 'info',
        icon: 'SuccessFilled'
      };
    default:
      return {
        type: 'danger',
        icon: 'Warning'
      };
  }
});

const changePerType = computed(() => {
  if (status.value.changeNum == 0) {
    if (status.value.proNum == 0) {
      return 'success';
    } else {
      return 'danger';
    }
  } else if (status.value.proNum == status.value.changeNum) {
    return 'success';
  } else {
    return 'warning';
  }
});

watch(
  () => props.item,
  (nV, oV) => {
    if (nV != oV) {
      fetchProblems(nV);
    }
  },
  { immediate: true }
);

function fetchProblems(subtask) {
  loading.value = true;
  taskApi
    .getProBySubtask(subtask.stguid)
    .then((res) => {
      proList.value = res;
      status.value = ProCheckProxy.calProStatus(res);
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>
<style scoped>
.wrapper {
  /* width: 300px; */
  width: 100%;
  border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
  padding: 4px 8px;
}

.text-title {
  font-weight: var(--el-font-weight-primary);
  color: var(--el-text-color-primary);
  font-size: var(--el-font-size-medium);
}

.text-info {
  display: flex;
  align-items: flex-start;
  color: var(--el-text-color-secondary);
  font-size: var(--el-font-size-small);
}

.text-label {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
</style>