|
|
@@ -0,0 +1,463 @@
|
|
|
+<template>
|
|
|
+ <div class="box-card">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="7">
|
|
|
+ <el-card>
|
|
|
+ <div class="cardTitle">MES今日生产出库数据</div>
|
|
|
+ <div class="firstRowBoard">
|
|
|
+ <span style="font-size: 16px">BOM出库总数（个）</span>
|
|
|
+ <span style="font-weight: 700; font-size: 16px">212</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableOne"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-card>
|
|
|
+ <div class="cardTitle">MES&万里牛今日订单和BOM差异（不含自建订单）</div>
|
|
|
+ <div class="firstRowBoard">
|
|
|
+ <span style="font-size: 16px">差异订单总数（单）</span>
|
|
|
+ <span style="font-weight: 700; font-size: 16px">212</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableTwo"
|
|
|
+ :cell-style="{ padding: '0' }"
|
|
|
+ :row-style="{ height: '50px' }"
|
|
|
+ header-row-class-name="tableHeader"
|
|
|
+ height="30vh"
|
|
|
+ style="margin-top: 20px"
|
|
|
+ >
|
|
|
+ <el-table-column label="BOM编号" width="120" />
|
|
|
+ <el-table-column label="MES" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="万里牛" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="差异订单号" min-width="140" />
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="7">
|
|
|
+ <el-card>
|
|
|
+ <div class="cardTitle">MES今日生产&出库差异</div>
|
|
|
+ <div class="firstRowBoard">
|
|
|
+ <span style="font-size: 16px">差异总数（个）</span>
|
|
|
+ <span style="font-weight: 700; font-size: 16px">212</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableThree"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="今日生产" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="出库" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</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>
|
|
|
+ <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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>BOM销售出库总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableFour"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>佰卓出库BOM总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableFive"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>宝恒盛出库BOM总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableSix"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-card>
|
|
|
+ <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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>BOM生产总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableFour"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>佰卓生产BOM总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableFive"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</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">212</div>
|
|
|
+ </div>
|
|
|
+ <div class="secondRowBoardBottom">
|
|
|
+ <div>宝恒盛生产BOM总数（个）</div>
|
|
|
+ <div style="font-weight: 700; margin-top: 10px">212</div>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableSix"
|
|
|
+ :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="50" />
|
|
|
+ <el-table-column label="BOM编号" min-width="140" />
|
|
|
+ <el-table-column label="数量" align="center" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.num">{{ Number(scope.row.num) }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div style="padding-top: 10px">
|
|
|
+ <el-card>
|
|
|
+ <div class="cardTitle">MES今日自建订单数据</div>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="firstRowBoard">
|
|
|
+ <span style="font-size: 16px">自建订单总数（单）</span>
|
|
|
+ <span style="font-weight: 700; font-size: 16px">1</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <div class="firstRowBoard">
|
|
|
+ <span style="font-size: 16px">自建订单BOM总数（个）</span>
|
|
|
+ <span style="font-weight: 700; font-size: 16px">3</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" style="margin-top: 20px">
|
|
|
+ <el-col :span="8">
|
|
|
+ <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">204010400078</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">50</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <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">204010400078</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">50</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <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">204010400078</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">50</div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import * as API from '@/api/shengde/group/spectaculars/purchaseSaleStock'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+// import $ from 'jquery'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'dailyBoard',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableOne: [{}],
|
|
|
+ tableTwo: [{}],
|
|
|
+ tableThree: [{}],
|
|
|
+ tableFour: [{}],
|
|
|
+ tableFive: [{}],
|
|
|
+ tableSix: [{}],
|
|
|
+ tableSeven: [{}],
|
|
|
+ tableEight: [{}],
|
|
|
+ tableNine: [{}],
|
|
|
+ // queryParams: {
|
|
|
+ // pageNum: 1,
|
|
|
+ // pageSize: 10,
|
|
|
+ // strTime: '',
|
|
|
+ // endTime: '',
|
|
|
+ // projectType: '',
|
|
|
+ // type: null,
|
|
|
+ // },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ mounted() {},
|
|
|
+ computed: mapGetters(['dictData']),
|
|
|
+ methods: {
|
|
|
+ // getList() {
|
|
|
+ // if (!this.queryParams.type && this.queryParams.type !== 0) {
|
|
|
+ // this.queryParams.type = null
|
|
|
+ // }
|
|
|
+ // this.loadingDanger = true
|
|
|
+ // API.hazardStockStatement(this.queryParams).then(
|
|
|
+ // (res) => {
|
|
|
+ // this.hazardStockStatement = res.data.data.hazardStockStatement
|
|
|
+ // this.loadingDanger = false
|
|
|
+ // },
|
|
|
+ // (err) => {
|
|
|
+ // console.log('hazardStockStatement: ' + err)
|
|
|
+ // this.loadingDanger = false
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ // this.loadingMaterial = true
|
|
|
+ // API.passageStatement(this.queryParams).then(
|
|
|
+ // (res) => {
|
|
|
+ // this.passageStatement = res.data.data.passageStatement
|
|
|
+ // this.loadingMaterial = false
|
|
|
+ // },
|
|
|
+ // (err) => {
|
|
|
+ // console.log('passageStatement: ' + err)
|
|
|
+ // this.loadingMaterial = false
|
|
|
+ // }
|
|
|
+ // )
|
|
|
+ // },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+* {
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.box-card {
|
|
|
+ height: calc(100vh - 110px);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+::v-deep {
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+ .el-button--small {
|
|
|
+ border-radius: 1px;
|
|
|
+ }
|
|
|
+ .tableHeader th {
|
|
|
+ background-color: #eeeeee;
|
|
|
+ height: 56px;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
+ .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>
|
