sd-new-vue/src/views/group/data-board/daily-board/index.vue

<template>
  <div class="box-card">
    <el-card>
      <el-form :model="timeList" :inline="true" @submit.native.prevent>
        <el-form-item label="日期:">
          <el-date-picker
            v-model="timeList"
            type="daterange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            value-format="YYYY-MM-DD"
            @change="changeTime" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-row :gutter="10" style="padding-top: 10px">
      <el-col :span="6">
        <el-card v-loading="topLeft">
          <div class="cardTitle">MES今日生产出库数据</div>
          <div class="firstRowBoard">
            <span style="font-size: 16px !important">BOM出库总数（个）</span>
            <span style="font-weight: 700; font-size: 20px !important">{{ TLData.count || 0 }}</span>
          </div>
          <el-table
            :data="TLData.list"
            :cell-style="{ padding: '0' }"
            :row-style="{ height: '50px' }"
            header-row-class-name="tableHeader"
            height="30vh"
            style="margin-top: 20px">
            <el-table-column label="序号" align="center" type="index" width="60" />
            <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
            <el-table-column label="数量" align="center" width="80">
              <template #default="{ row }">
                <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card v-loading="topCenter">
          <div class="cardTitle">MES&万里牛今日订单和BOM差异（不含自建订单）</div>
          <div class="firstRowBoard">
            <span style="font-size: 16px !important">差异订单总数（单）</span>
            <span style="font-weight: 700; font-size: 20px !important">{{ TCData.count || 0 }}</span>
          </div>
          <el-table
            :data="TCData.list"
            :cell-style="{ padding: '0' }"
            :row-style="{ height: '50px' }"
            header-row-class-name="tableHeader"
            height="30vh"
            style="margin-top: 20px">
            <el-table-column label="BOM编号" prop="bomSpecCode" width="120" />
            <el-table-column label="MES" align="center" width="80">
              <template #default="{ row }">
                <span v-if="row.mesQuantity">{{ Number(row.mesQuantity) }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="万里牛" align="center" width="80">
              <template #default="{ row }">
                <span v-if="row.wlnQuantity">{{ Number(row.wlnQuantity) }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
            <el-table-column label="差异订单号" prop="orderWlnCodes" min-width="140" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="9">
        <el-card v-loading="topRight" style="height: 100%">
          <div class="cardTitle">MES今日自建订单数据</div>
          <div class="firstRowBoard">
            <div style="width: 50%; padding: 0 8px; display: flex">
              <span style="font-size: 16px !important">自建订单总数（单）</span>
              <span style="font-weight: 700; font-size: 20px !important; padding-left: 16px">{{ TRData.sumOrderCount || 0 }}</span>
            </div>
            <div style="width: 50%; padding: 0 8px">
              <span style="font-size: 16px !important">自建订单BOM总数（个）</span>
              <span style="font-weight: 700; font-size: 20px !important; padding-left: 16px">{{ TRData.sumBomCount || 0 }}</span>
            </div>
          </div>
          <el-table
            :data="TRData.outStorageBomList"
            :cell-style="{ padding: '0' }"
            :row-style="{ height: '50px' }"
            header-row-class-name="tableHeader"
            height="30vh"
            style="margin-top: 20px">
            <el-table-column label="序号" align="center" type="index" width="60" />
            <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
            <el-table-column label="数量" align="center" width="80">
              <template #default="{ row }">
                <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                <span v-else>0</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="padding-top: 10px">
      <el-col :span="12">
        <el-card v-loading="centerLeft">
          <div class="cardTitle">万里牛今日销售出库数据</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>销售出库订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.sumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>BOM销售出库总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.sumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CLData.outStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>佰卓销售出库订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.bzSumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>佰卓出库BOM总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.bzSumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CLData.bzOutStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>宝恒盛销售出库订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.sySumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>宝恒盛出库BOM总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CLData.sySumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CLData.syOutStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card v-loading="centerRight">
          <div class="cardTitle">MES今日生产订单数据（不含自建订单）</div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>生产订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.sumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>BOM生产总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.sumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CRData.outStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>佰卓生产订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.bzSumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>佰卓生产BOM总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.bzSumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CRData.bzOutStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="8">
              <div class="secondRowBoardTop">
                <div>宝恒盛生产订单总数（单）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.sySumOrderCount || 0 }}
                </div>
              </div>
              <div class="secondRowBoardBottom">
                <div>宝恒盛生产BOM总数（个）</div>
                <div style="font-weight: 700; margin-top: 10px; font-size: 20px !important">
                  {{ CRData.sySumBomCount || 0 }}
                </div>
              </div>
              <el-table
                :data="CRData.syOutStorageBomList"
                :cell-style="{ padding: '0' }"
                :row-style="{ height: '50px' }"
                header-row-class-name="tableHeader"
                height="30vh"
                style="margin-top: 20px">
                <el-table-column label="序号" align="center" type="index" width="60" />
                <el-table-column label="BOM编号" prop="bomSpecCode" min-width="140" />
                <el-table-column label="数量" align="center" width="80">
                  <template #default="{ row }">
                    <span v-if="row.quantity">{{ Number(row.quantity) }}</span>
                    <span v-else>0</span>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- <div style="padding-top: 10px">
      <el-card v-loading="bottomCenter">
        <div class="cardTitle">MES今日自建订单数据</div>
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="firstRowBoard">
              <span style="font-size: 16px !important">自建订单总数（单）</span>
              <span style="font-weight: 700; font-size: 20px !important">{{ BCData.sumOrderCount }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="firstRowBoard">
              <span style="font-size: 16px !important">自建订单BOM总数（个）</span>
              <span style="font-weight: 700; font-size: 20px !important">{{ BCData.sumBomCount }}</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="BCData.outStorageBomList && BCData.outStorageBomList.length > 0">
          <el-col :span="8" style="margin-top: 20px" v-for="(item, index) in BCData.outStorageBomList" :key="index">
            <el-row :gutter="2">
              <el-col :span="8">
                <div style="background-color: #eeeeee; padding: 20px">BOM编号</div>
              </el-col>
              <el-col :span="16">
                <div style="background-color: #eeeeee; padding: 20px">{{ item.bomSpecCode }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="2" style="margin-top: 2px">
              <el-col :span="8">
                <div style="background-color: #eeeeee; padding: 20px">数量</div>
              </el-col>
              <el-col :span="16">
                <div style="background-color: #eeeeee; padding: 20px">{{ item.quantity }}</div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </div> -->
  </div>
</template>

<script setup>
import moment from "moment";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const timeList = ref([moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")]);
const topLeft = ref(false);
const topCenter = ref(false);
const topRight = ref(false);
const centerLeft = ref(false);
const centerRight = ref(false);
const TLData = ref({
  count: 0,
  list: [],
});
const TCData = ref({
  count: 0,
  list: [],
});
const TRData = ref({
  sumOrderCount: 0,
  sumBomCount: 0,
  outStorageBomList: [],
});
const CLData = ref({
  sumOrderCount: 0,
  sumBomCount: 0,
  outStorageBomList: [],
  bzSumOrderCount: 0,
  bzSumBomCount: 0,
  bzOutStorageBomList: [],
  sySumOrderCount: 0,
  sySumBomCount: 0,
  syOutStorageBomList: [],
});
const CRData = ref({
  sumOrderCount: 0,
  sumBomCount: 0,
  outStorageBomList: [],
  bzSumOrderCount: 0,
  bzSumBomCount: 0,
  bzOutStorageBomList: [],
  sySumOrderCount: 0,
  sySumBomCount: 0,
  syOutStorageBomList: [],
});
const changeTime = () => {
  if (timeList.value && timeList.value.length == 2) {
    getList();
  } else {
    ElMessage("请选择日期");
  }
};
const getList = () => {
  TLData.value = {
    count: 0,
  };
  topLeft.value = true;
  proxy.post("/dailyBoard/getProductionOutStorageList", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
    (res) => {
      if (res && res.length > 0) {
        res.map(function (item) {
          TLData.value.count += item.quantity || 0;
        });
        TLData.value.list = res;
      } else {
        TLData.value = {
          count: 0,
          list: [],
        };
      }
      topLeft.value = false;
    },
    (err) => {
      console.log(err);
      topLeft.value = false;
    }
  );
  TCData.value = {
    count: 0,
  };
  topCenter.value = true;
  proxy.post("/dailyBoard/getOrderBomDifferenceList", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
    (res) => {
      if (res && res.length > 0) {
        res.map(function (item) {
          TCData.value.count += item.orderWlnCodes.length || 0;
        });
        TCData.value.list = res;
      } else {
        TCData.value = {
          count: 0,
          list: [],
        };
      }
      topCenter.value = false;
    },
    (err) => {
      console.log(err);
      topCenter.value = false;
    }
  );
  CLData.value = {};
  centerLeft.value = true;
  proxy.post("/dailyBoard/getWlnSalesOutStorageInfo", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
    (res) => {
      CLData.value = res;
      centerLeft.value = false;
    },
    (err) => {
      console.log(err);
      centerLeft.value = false;
    }
  );
  CRData.value = {};
  centerRight.value = true;
  proxy.post("/dailyBoard/getMesProductionOutStorageInfo", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
    (res) => {
      CRData.value = res;
      centerRight.value = false;
    },
    (err) => {
      console.log(err);
      centerRight.value = false;
    }
  );
  TRData.value = {};
  topRight.value = true;
  proxy.post("/dailyBoard/getSelfOrderOutStorageInfo", { beginDate: timeList.value[0] + " 00:00:00", endDate: timeList.value[1] + " 23:59:59" }).then(
    (res) => {
      TRData.value = res;
      topRight.value = false;
    },
    (err) => {
      console.log(err);
      topRight.value = false;
    }
  );
};
getList();
</script>

<style lang="scss" scoped>
.box-card {
  height: calc(100vh - 120px);
  overflow-y: auto;
}
::v-deep(.tableHeader th) {
  background-color: #eeeeee;
  height: 56px;
  padding: 0;
}
::v-deep(.el-card__body) {
  padding: 20px !important;
}
.cardTitle {
  border-left: 2px solid #487cff;
  padding-left: 10px;
  font-size: 16px !important;
}
.firstRowBoard {
  padding: 20px;
  margin-top: 20px;
  background-color: #eff6ff;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
}
.secondRowBoardTop {
  padding: 20px;
  margin-top: 20px;
  background-color: #eff6ff;
  border-radius: 10px;
  div {
    font-size: 16px !important;
  }
}
.secondRowBoardBottom {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff8ef;
  border-radius: 10px;
  div {
    font-size: 16px !important;
  }
}
</style>