dosb-vue/src/views/billet/storageAndTransportation/components/car.vue

<template>
  <div class="car-center-container">
    <a-divider orientation="left" class="car-center-title">
      <a-tag color="#f50" v-if="selectedIdItem.title">{{ selectedIdItem?.title.join(' / ') }}</a-tag> 装运明细
    </a-divider>
    <a-row :gutter="20">
      <a-col :span="10">
        <a-card :bordered="false" :body-style="{ padding: '12px 24px' }">
          <template #title>
            <div class="title"
              >班组 <span>{{ getTeamShift(baseInfo?.shift, baseInfo?.shiftGroup) }}</span></div
            >
          </template>
          <a-descriptions :column="2">
            <a-descriptions-item label="发车时间">{{ baseInfo?.outTime }}</a-descriptions-item>
            <a-descriptions-item label="到站时间">{{ baseInfo?.arrivalTime }}</a-descriptions-item>
            <a-descriptions-item label="车次序号">{{ baseInfo?.carAllNum }}</a-descriptions-item>
            <a-descriptions-item label="本车次序号">{{ baseInfo?.carNum }}</a-descriptions-item>
            <a-descriptions-item label="组坯号" :column="2" :style="{ marginTop: 12 }">
              <div class="flex flex-wrap zupiNum">
                <a-tag :bordered="false" style="background-color: transparent; font-size: 16px" v-for="item in baseInfo?.assemblyNumber.split(',')">{{
                  item
                }}</a-tag>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>
      <a-col :span="14">
        <a-card :body-style="{ padding: '18px 24px' }" :bordered="false">
          <div class="heat-s-top flex">
            <div class="heat-s-top-item"><span>支数:</span> {{ baseInfo?.amountTotal }}</div>
            <div class="heat-s-top-item"><span>重量:</span> {{ baseInfo?.totalWeight || 0 }}t</div>
            <div class="heat-s-top-item"><span>钢种:</span> {{ baseInfo?.steel || '-' }}</div>
            <div class="heat-s-top-item"><span>规格:</span> {{ baseInfo?.spec || '-' }}</div>
          </div>
          <a-table class="heat-s-table" size="small" :pagination="false" :columns="columnHeat" :data-source="baseInfo?.heatNoInfos" />
        </a-card>
      </a-col>
    </a-row>
    <a-row class="heat-s-row" :gutter="[20, 20]">
      <a-col :span="8" v-for="item in baseInfo.heatNoDetails" v-if="baseInfo.heatNoDetails && baseInfo.heatNoDetails.length">
        <a-card :body-style="{ padding: '18px 24px' }" :bordered="false">
          <div class="flex heat-row-statistic">
            <a-statistic class="flex flex-col flex-1" title="炉号" :value="item.heatNo" groupSeparator="" />
            <a-statistic class="flex flex-col flex-1" title="支数" :value="item.sizeAmount" />
            <a-statistic class="flex flex-col flex-1" title="重量/t" :value="item.sizeWeight" />
          </div>
          <a-table class="heat-s-table" size="small" :columns="columnHeatDtl" :pagination="false" :data-source="item.assemblyNumberDetails" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup name="CarCenter">
  import { ref } from 'vue';
  import AStatistic from 'ant-design-vue/lib/statistic/Statistic';
  import { getStorageCenterCarInfo, getStorageCenterCarById } from '../storageAndTransportation.api';
  import { getTeamShift } from '../../Dashboard/dashboard.api';

  defineProps({
    currentDate: {
      type: String,
      default: '',
    },
    selectedIdItem: {
      type: Object,
      default: () => {},
    },
  });
  const emits = defineEmits(['changeTotal', 'changeLoading']);

  const columnHeat = [
    { title: '炉号', dataIndex: 'heatNo' },
    { title: '定尺', dataIndex: 'size' },
    { title: '支数', dataIndex: 'sizeAmount' },
    { title: '重量/t', dataIndex: 'sizeWeight' },
  ];

  const columnHeatDtl = [
    { title: '组坯号', dataIndex: 'assemblyNumber' },
    { title: '坯号', dataIndex: 'billetNo' },
    { title: '定尺', dataIndex: 'size' },
    { title: '支数', dataIndex: 'sizeAmount', width: 50, align: 'center' },
    { title: '重量/t', dataIndex: 'sizeWeight' },
  ];

  const baseInfo = ref<any>({
    assemblyNumber: '',
    heatNoInfos: [],
    heatNoDetails: [],
  });

  const getInfo = (day) => {
    getStorageCenterCarInfo({ currentDate: day }).then((res) => {
      emits('changeTotal', res);
    });
  };

  const getInfoById = (storageBillId) => {
    emits('changeLoading', true);
    getStorageCenterCarById({ storageBillId })
      .then((res) => {
        console.log('res', res);
        baseInfo.value = res;
      })
      .finally(() => {
        emits('changeLoading', false);
      });
  };

  defineExpose({
    getInfo,
    getInfoById,
  });
</script>
<style lang="less" scoped>
  .car-center-container {
    margin-top: 20px;

    .ant-divider {
      :deep(.ant-divider-inner-text) {
        // margin-left: -50px;
      }
    }

    .ant-tag {
      font-size: 18px;
      padding: 4px 10px;
    }

    .ant-card {
      height: 100%;
    }

    .heat-s-top {
      font-weight: 400;
      font-size: 16px;
      color: #4d4d4d;
      line-height: 22px;
      padding: 0 10px;

      span {
        color: #000;
        padding-right: 6px;
      }

      .heat-s-top-item {
        margin-right: 44px;
      }
    }

    .heat-s-table {
      margin-top: 16px;
    }

    .heat-s-row {
      margin-top: 20px;
    }

    .zupiNum {
      gap: 10px 0;
    }

    .heat-row-statistic {
      .ant-statistic {
        flex-direction: column-reverse;
      }
    }

    .title {
      span {
        color: var(--vxe-primary-color);
      }
    }
  }
</style>