sl-sfy-safety/src/views/disaster/overview/components/DisasterCheckingLists.vue

<template>
  <div class="disaster-checking-lists-container">
    <div class="container-sums">
      <div class="prevent-check">
        <div class="container-title">
          <span class="line"></span>
          <span class="title">预防检查</span>
        </div>
        <div class="sum-data">
          <div
            v-for="(item, index) in preventCheckTitles"
            :key="index"
            class="sum-item"
            :class="{
              'warning-item': item.label === '隐患任务',
              'success-item': item.label === '通过任务',
            }"
          >
            <span class="item-count">{{ item.count }}</span>
            <div class="item-title">
              <div class="item-img-container">
                <img class="item-img" :src="item.icon" alt="" />
              </div>
              <span class="item-label">{{ item.label }}</span>
            </div>
          </div>
          <div class="more-info" @click="handleJumpToDetail('preventCheck')"
            >查看详情<el-icon><DArrowRight /></el-icon
          ></div>
        </div>
      </div>
      <div class="disaster-handle">
        <div class="container-title">
          <span class="line"></span>
          <span class="title">灾害处置</span>
        </div>
        <div class="sum-data">
          <div
            v-for="(item, index) in disasterHandleTitles"
            :key="index"
            class="sum-item"
            :class="{
              'loss-item': item.label === '有损失记录',
              'success-item': item.label === '处置完成',
            }"
          >
            <span class="item-count">{{ item.count }}</span>
            <div class="item-title">
              <div class="item-img-container">
                <img class="item-img" :src="item.icon" alt="" />
              </div>
              <span class="item-label">{{ item.label }}</span>
            </div>
          </div>
          <div class="more-info" @click="handleJumpToDetail('disasterHandle')"
            >查看详情<el-icon><DArrowRight /></el-icon
          ></div>
        </div>
      </div>
    </div>
    <!-- <div class="checking-lists">
      <div class="list-tabs">
        <div :class="activeTab === '预防检查' ? 'active-tab' : 'normal-tab'" @click="activeTab = '预防检查'"
          >预防检查</div
        >
        <div :class="activeTab === '灾害处置' ? 'active-tab' : 'normal-tab'" @click="activeTab = '灾害处置'"
          >灾害处置</div
        >
      </div>
      <DisasterCheckList class="list-container" v-if="activeTab === '预防检查'" />
      <DisasterDoneList class="list-container" v-if="activeTab === '灾害处置'" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElIcon } from 'element-plus';
  import { DArrowRight } from '@element-plus/icons-vue';
  import taskIcon from '@/assets/images/disaster-overview/task.png';
  import signTaskIcon from '@/assets/images/disaster-overview/sign-task.png';
  import successTaskIcon from '@/assets/images/disaster-overview/success-task.png';
  import warningTaskIcon from '@/assets/images/disaster-overview/warning-task.png';
  import brokenObject from '@/assets/images/disaster-overview/broken-object.png';
  import {
    QueryCheckingListsParams,
    PreventInspectInfoRes,
    getPreventInspect,
    QueryDisasterHandleOverviewRes,
    getDisasterHandleOverview,
  } from '@/api/disaster-overview';
  // import DisasterCheckList from './disaster-checking-lists/DisasterCheckList.vue';
  // import DisasterDoneList from './disaster-checking-lists/DisasterDoneList.vue';

  // const activeTab = ref('预防检查');

  const router = useRouter();

  const queryCheckingListsParams = ref<QueryCheckingListsParams>({
    pageNumber: 1,
    pageSize: 3,
  });
  const preventInspectData = ref<PreventInspectInfoRes>();
  const preventCheckTitles = computed(() => {
    return [
      {
        icon: taskIcon,
        label: '总任务',
        count: preventInspectData.value?.totalTask,
      },
      {
        icon: warningTaskIcon,
        label: '隐患任务',
        count: preventInspectData.value?.dangerTask,
      },
      {
        icon: taskIcon,
        label: '待签字任务',
        count: preventInspectData.value?.submittedTask,
      },
      {
        icon: successTaskIcon,
        label: '通过任务',
        count: preventInspectData.value?.passTask,
      },
      {
        icon: signTaskIcon,
        label: '已签字任务',
        count: preventInspectData.value?.signedTask,
      },
    ];
  });

  const disasterHandleData = ref<QueryDisasterHandleOverviewRes>();
  const disasterHandleTitles = computed(() => {
    return [
      {
        icon: signTaskIcon,
        label: '应上报部门',
        count: disasterHandleData.value?.dueReportDeptCount,
      },
      {
        icon: brokenObject,
        label: '有损失记录',
        count: disasterHandleData.value?.lossRecordCount,
      },
      {
        icon: signTaskIcon,
        label: '已上报部门',
        count: disasterHandleData.value?.completeReportDeptCount,
      },
      {
        icon: successTaskIcon,
        label: '处置完成',
        count: disasterHandleData.value?.completeHandleCount,
      },
      {
        icon: signTaskIcon,
        label: '存在损失部门',
        count: disasterHandleData.value?.existLossDeptCount,
      },
    ];
  });

  const handleJumpToDetail = (type: string) => {
    if (type === 'preventCheck') {
      router.push({
        path: '/disaster-prevention/disaster-precaution/task-management',
      });
    } else if (type === 'disasterHandle') {
      router.push({
        path: '/disaster-prevention/disaster-control/disposal-management',
      });
    }
  };

  const getData = () => {
    getPreventInspect(queryCheckingListsParams.value).then((res) => {
      preventInspectData.value = res;
    });
    getDisasterHandleOverview(queryCheckingListsParams.value).then((res) => {
      disasterHandleData.value = res;
    });
  };

  onMounted(() => {
    getData();
  });
</script>

<style lang="scss" scoped>
  .disaster-checking-lists-container {
    .container-title {
      height: 24px;
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: #000000;

      .line {
        width: 3px;
        height: 16px;
        background: #1777ff;
        margin-right: 10px;
      }

      .title {
        margin-right: 12px;
      }
    }

    .container-sums {
      height: 100%;
      display: flex;
      align-items: center;

      .prevent-check,
      .disaster-handle {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 4px;
        padding-top: 10px;
      }

      .prevent-check {
        margin-right: 5px;
      }

      .disaster-handle {
        margin-left: 5px;
      }

      .sum-data {
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(2, 50%);
        grid-row-gap: 5px;
        grid-column-gap: 5px;
        padding: 10px;
        overflow-x: hidden;
        overflow-y: auto;

        .sum-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-evenly;
          background: linear-gradient(180deg, rgba(227, 239, 255, 0.4) 0%, rgba(185, 209, 255, 0.38) 100%);
          border-radius: 6px;
          /* border-left: 5px solid rgba(23, 119, 255, 0.5); */

          .item-title {
            display: flex;
            align-items: center;
          }

          .item-img-container {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 50%;
            margin-right: 6px;
          }

          .item-img {
            width: 12px;
          }

          .item-label {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }

          .item-count {
            font-weight: 600;
            font-size: 20px;
            color: #303133;
          }
        }

        .success-item {
          background: linear-gradient(180deg, rgba(82, 196, 26, 0.15) 0%, rgba(82, 196, 26, 0.3) 100%);
          /* border-left: 5px solid rgba(82, 196, 26, 0.5); */
        }

        .warning-item {
          background: linear-gradient(180deg, rgba(250, 173, 20, 0.15) 0%, rgba(250, 173, 20, 0.3) 100%);
          /* border-left: 5px solid rgba(250, 173, 20, 0.5); */
        }

        .loss-item {
          background: linear-gradient(180deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.3) 100%);
          /* border-left: 5px solid rgba(255, 77, 79, 0.5); */
        }

        .more-info {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: 400;
          color: #1777ff;
          cursor: pointer;
        }
      }
    }
  }

  .checking-lists {
    height: calc(100% - 24px);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    overflow: auto;

    .list-tabs {
      font-size: 14px;
      cursor: pointer;
      display: flex;
      gap: 60px;
      margin-bottom: 15px;

      .normal-tab {
        color: rgba(0, 0, 0, 0.65);
      }

      .normal-tab:hover {
        color: #1777ff;
      }

      .active-tab {
        color: #1777ff;
        font-weight: 600;
        position: relative;
      }

      .active-tab::after {
        content: '';
        display: block;
        width: 16px;
        height: 2px;
        background-color: #1777ff;
        border-radius: 2px;
        margin-top: 2px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    .list-container {
      flex: 1;
    }
  }
</style>