| | |
| | | <div class="kb_backgroundCustom" /> |
| | | <div class="kb_header"> |
| | | <div class="kb_headTime" style="top: 35px;left: 20px"> |
| | | <span>永康市北鸣工贸有限公司</span> |
| | | <span>永康市季铭工贸有限公司</span> |
| | | </div> |
| | | |
| | | <div class="kb_headTime kb_header_text" style="top: 35px;left: 800px"> |
| | |
| | | <div style="height: 470px;"> |
| | | <div class="smallTitle"> |
| | | <svg-icon icon-class="cpdrk" class="svg_class" /> |
| | | 生产待入库 |
| | | 采购待入库 |
| | | </div> |
| | | <div class="lineContent horn" style="height: 410px"> |
| | | <el-table |
| | |
| | | <el-table-column |
| | | prop="voucherdate" |
| | | label="单据日期" |
| | | width="131" |
| | | width="161" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div> |
| | |
| | | <el-table-column |
| | | prop="wo" |
| | | label="单据编号" |
| | | width="189" |
| | | width="199" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.wo }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="wkshp_name" |
| | | label="生产车间" |
| | | width="105" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.wkshp_name }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="wkshp_name"--> |
| | | <!-- label="生产车间"--> |
| | | <!-- width="105"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div class="ellipsis">{{ row.wkshp_name }}</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | prop="saleOrderCode" |
| | | label="销售订单号" |
| | | width="200" |
| | | width="210" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="materiel_code"--> |
| | | <!-- label="产品编号"--> |
| | | <!-- width="136"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div class="ellipsis">{{ row.materiel_code }}</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | |
| | | <el-table-column |
| | | prop="materiel_name" |
| | | label="产品名称" |
| | | width="180" |
| | | width="270" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.materiel_name }}</div> |
| | |
| | | <el-table-column |
| | | prop="specification" |
| | | label="规格型号" |
| | | width="136" |
| | | width="126" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div> |
| | |
| | | <el-table-column |
| | | prop="stck_name" |
| | | label="预入仓库" |
| | | width="100" |
| | | width="125" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div> |
| | |
| | | <el-table-column |
| | | prop="quantity" |
| | | label="数量" |
| | | width="63" |
| | | width="93" |
| | | /> |
| | | <el-table-column |
| | | prop="totalStockInQuantity" |
| | | label="已入库数量" |
| | | width="100" |
| | | width="140" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div> |
| | | <div v-else>0</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="uomname"--> |
| | | <!-- label="单位"--> |
| | | <!-- width="50"--> |
| | | <!-- />--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="preStartDate"--> |
| | | <!-- label="预计开工"--> |
| | | <!-- width="100"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>--> |
| | | <!-- <div v-else />--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | prop="preFinishDate" |
| | | label="预计入库" |
| | | width="140" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div> |
| | | <div v-else /> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div style="height: 470px;margin-top: 30px;"> |
| | | <div class="smallTitle"> |
| | | <svg-icon icon-class="cpdfh" class="svg_class" /> |
| | | 产品待发货 |
| | | 销售待发货 |
| | | </div> |
| | | <div class="lineContent horn" style="height: 410px"> |
| | | <el-table |
| | |
| | | <div class="ellipsis">{{ row.wo }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="customename"--> |
| | | <!-- label="客户"--> |
| | | <!-- width="288"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>--> |
| | | <!-- <div v-else>/</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="username"--> |
| | | <!-- label="业务员"--> |
| | | <!-- width="65"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.username" class="ellipsis">{{ row.username }}</div>--> |
| | | <!-- <div v-else>/</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="SourceVoucherCode"--> |
| | | <!-- label="来源单号"--> |
| | | <!-- width="185"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>--> |
| | | <!-- <div v-else>/</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="materiel_code"--> |
| | | <!-- label="产品编号"--> |
| | | <!-- width="96"--> |
| | | <!-- />--> |
| | | |
| | | <el-table-column |
| | | prop="materiel_name" |
| | | label="产品名称" |
| | | width="288" |
| | | width="258" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div> |
| | |
| | | <el-table-column |
| | | prop="specification" |
| | | label="规格型号" |
| | | width="300" |
| | | width="200" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div> |
| | |
| | | <div v-else>0</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="priuserdefnvc1"--> |
| | | <!-- label="检验方式"--> |
| | | <!-- width="110"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>--> |
| | | <!-- <div v-else>/</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="priuserdefnvc2"--> |
| | | <!-- label="检验人员"--> |
| | | <!-- width="110"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>--> |
| | | <!-- <div v-else>/</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | |
| | | <el-table-column |
| | | prop="deliveryDate" |
| | | label="预计交货日期" |
| | | label="预计交付日期" |
| | | width="200" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column |
| | | prop="warning" |
| | | label="延期天数" |
| | | width="130" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.warning">{{ row.warning }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | <div style="height: 470px;"> |
| | | <div class="smallTitle"> |
| | | <svg-icon icon-class="ph" class="svg_class" /> |
| | | 近一周生产待入库产品排行Top5 |
| | | 近一周采购待入库物料排行Top5 |
| | | </div> |
| | | <div class="lineContent horn" style="height: 410px"> |
| | | <div id="bar03" style="width: 100%;height:100%; " /> |
| | |
| | | <script> |
| | | import './kbCommon.css' |
| | | import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts' |
| | | // import { |
| | | // WareHouseRightBottomData, |
| | | // WareHouseRightTopData, |
| | | // WareHouseTopBottomData, |
| | | // WareHouseTopLeftData |
| | | // } from '@/api/kanbanManager' |
| | | import { |
| | | ProcureOutsourcLeftTop, |
| | | ProductConsignmentLeftBottom, |
| | | ProcureOutsourcRightTop, |
| | | ProductionStockedInRightBottom |
| | | } from '@/api/kanbanManager' |
| | | |
| | | export default { |
| | | name: 'Index2', |
| | |
| | | window.addEventListener('online', this.updateOnlineStatus) |
| | | window.addEventListener('offline', this.updateOnlineStatus) |
| | | this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true }) |
| | | // |
| | | // this.getWareHouseTopLeftData() |
| | | // this.getWareHouseTopBottomData() |
| | | // this.getEcharts() |
| | | |
| | | this.getProcureOutsourcLeftTop() |
| | | this.getProductConsignmentLeftBottom() |
| | | this.getEcharts() |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('online', this.updateOnlineStatus) |
| | |
| | | } |
| | | } |
| | | }, |
| | | |
| | | // 获取左上table数据 |
| | | getWareHouseTopLeftData() { |
| | | WareHouseTopLeftData().then(res => { |
| | | getProcureOutsourcLeftTop() { |
| | | ProcureOutsourcLeftTop().then(res => { |
| | | this.tableDataTop = res.data |
| | | // this.number1 = this.tableDataTop.length |
| | | const divData = this.$refs.tableDataTopRef.bodyWrapper |
| | |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | WareHouseTopLeftData().then(res => { |
| | | ProcureOutsourcLeftTop().then(res => { |
| | | this.tableDataTop = res.data |
| | | // this.number1 = this.tableDataTop.length |
| | | if (this.tableDataTop.length > 10) { |
| | | clearInterval(this.tableTopTask) |
| | | this.getWareHouseTopLeftData() |
| | | this.getProcureOutsourcLeftTop() |
| | | } |
| | | }) |
| | | } |
| | |
| | | }) |
| | | }, |
| | | // 获取左下table数据 |
| | | getWareHouseTopBottomData() { |
| | | WareHouseTopBottomData().then(res => { |
| | | getProductConsignmentLeftBottom() { |
| | | ProductConsignmentLeftBottom().then(res => { |
| | | this.tableDataBottom = res.data |
| | | this.number2 = this.tableDataBottom.length |
| | | const divData = this.$refs.tableDataBottomRef.bodyWrapper |
| | |
| | | if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) { |
| | | // 重置table距离顶部距离 |
| | | divData.scrollTop = 0 |
| | | WareHouseTopBottomData().then(res => { |
| | | ProductConsignmentLeftBottom().then(res => { |
| | | this.tableDataBottom = res.data |
| | | this.number2 = this.tableDataBottom.length |
| | | if (this.tableDataBottom.length > 10) { |
| | | clearInterval(this.tableBottomTask) |
| | | this.getWareHouseTopBottomData() |
| | | this.getProductConsignmentLeftBottom() |
| | | } |
| | | }) |
| | | } |
| | |
| | | |
| | | // 获取echarts |
| | | getEcharts() { |
| | | WareHouseRightTopData().then(res => { |
| | | loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name))) |
| | | ProcureOutsourcRightTop().then(res => { |
| | | loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name))) |
| | | }) |
| | | |
| | | WareHouseRightBottomData().then(res => { |
| | | loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name))) |
| | | ProductionStockedInRightBottom().then(res => { |
| | | loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name))) |
| | | }) |
| | | |
| | | this.echartsRightTop = setInterval(() => { |
| | | WareHouseRightTopData().then(res => { |
| | | loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name))) |
| | | ProcureOutsourcRightTop().then(res => { |
| | | loadEcharts('bar03', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name))) |
| | | }) |
| | | }, 1000 * 15) |
| | | |
| | | this.echartsRightBottom = setInterval(() => { |
| | | WareHouseRightBottomData().then(res => { |
| | | loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name))) |
| | | ProductionStockedInRightBottom().then(res => { |
| | | loadEcharts('bar04', bar02(res.data.filter(i => i.qty > 0).map(i => i.qty), res.data.filter(i => i.qty > 0).map(i => i.materiel_name))) |
| | | }) |
| | | }, 1000 * 15) |
| | | }, |