<template> <div class="factory-layout"> <FactoryDataHeader :than="than" :companyName="companyName" :companyId="companyId" :period="period" @update:than="updateThan" @update:period="updatePeriod" /> <div class="factory-section"> <section class="top flex"> <db-container title="生产监控" icon="prod" @update:than="updateThan" :than="than"> <prod-monitor :companyId="companyId" :factoryData="factoryData" :than="than" :period="period" :data="data" :prodOutPut="prodOutPut" :prodFto="prodFto" :showBipv="show" /> </db-container> <left-container title="工单监控" icon="order"> <order @update:type="updateType" :type="type" :prodOrder="prodOrder" /> </left-container> <!-- <db-container title="" icon="store"> --> <!-- <store :stock="stock" /> --> <!-- </db-container> --> </section> <!-- <section class="bottom flex"> --> <!-- <db-container title="" icon="energy"> --> <!-- <energy :legend="energyLegend" :energyCockpits="energyCockpits" /> --> <!-- </db-container> --> <!-- </section> --> </div> <div class="factory-footer">© 中建材智能自动化研究院有限公司</div> </div> </template> <script> import FactoryDataHeader from "./../components/FactoryDataHeader.vue"; import Container from "./components/rightContainer.vue"; import leftContainer from "./components/leftContainer.vue"; import ProdMonitor from "./components/ProdMonitor.vue"; import { deepClone } from "@/utils"; // import Store from "./components/Store.vue"; // import Energy from "./components/Energy.vue"; import Order from "./components/Order.vue"; import { cockpitDataMonitor } from "@/api/produceData"; export default { name: "factoryData", components: { FactoryDataHeader, DbContainer: Container, LeftContainer: leftContainer, ProdMonitor, // Store, // Energy, Order, }, data() { return { type: '目标产量', companyId: 1, companyName: "邯郸中建材光电材料有限公司", period: 1, show: false, than: '同比', data: {}, // 接口获取的数据 prodOutPut: [], //生产 prodFto: [], //生产 stock: {}, //仓库 factoryData: { preDataDetail: [], currentDataDetail: {}, targetDataDetail: [], }, energyCockpits: [], //能源 prodOrder: [], //订单 energyLegend: [ { label: "电", color: "#FFD160" }, { label: "水", color: "#2760FF" }, { label: "气", color: "#12FFF5" }, ], }; }, mounted() { this.getMes(); }, methods: { updateType(val) { console.log(val) this.type = val }, updateCompany(obj) { this.companyId = obj.companyId; this.companyName = obj.companyName; this.getMes(); }, updateThan(val) { console.log(val); this.than = val; // this.getMes(); }, updatePeriod(val) { this.period = val; this.getMes(); }, getMes() { cockpitDataMonitor({ factorys: [this.companyId], date: this.period, mode: this.than === '同比' ? 0 : 1 }).then((res) => { console.log(res); this.prodOutPut = res.data.prodOutputMonitorShDO || []; this.prodFto = res.data.prodOutputFtoDO || []; this.prodOrder = res.data.prodWorkOrderDO || []; let prodOutputFtoListRes = res.data.prodOutputFtoDO || []; let preFtoData = res.data.previousProdOutputFtoDO || []; let preData = res.data.previousProdOutputMonitorShDO || []; let factoryListResponse = res.data.prodOutputMonitorShDO || []; let targetListResponse = res.data.prodTargetMonitorDO || []; let preDataDetail = [] let currentDataDetail = [] let targetDataDetail = [] if (prodOutputFtoListRes) { for (const factory of prodOutputFtoListRes) { console.log(factory); currentDataDetail[0] = factory.chipInput } } if (preFtoData) { for (const factory of preFtoData) { console.log(factory); // const fId = this.getPreFactoryId(factory); // const preFId = getPreFactoryId(factory); // if (fId) { preDataDetail[0] = factory.previousYearChipInput // } // if (preFId) { // ftoInvest.previous[fId] = factory.previousYearChipInput; // } } } if (preData && preData[0] != null) { for (const factory of preData) { if (factory.previousGlassType === 0) { preDataDetail[1] = factory.previousOutputNumber } else if (factory.previousGlassType === 1) { preDataDetail[2] = factory.previousOutputNumber } else if (factory.previousGlassType === 2) { preDataDetail[3] = factory.previousOutputNumber } } } if (targetListResponse && targetListResponse[0] != null) { for (const factory of targetListResponse) { targetDataDetail[0] = factory.ftoInput // if (factory.previousGlassType === 0) { targetDataDetail[1] = factory.chipYield // } else if (factory.previousGlassType === 1) { targetDataDetail[2] = factory.componentYield targetDataDetail[3] = factory.bipvProductoutput // } } } // console.log('ftoInvest',ftoInvest) if (factoryListResponse && factoryListResponse[0] != null) { for (const factory of factoryListResponse) { // targetDataDetail[0] = factory.ftoInput if (factory.glassType === 0) { currentDataDetail[1] = factory.outputNumber } else if (factory.glassType === 1) { currentDataDetail[2] = factory.outputNumber } else if (factory.glassType === 2) { currentDataDetail[3] = factory.outputNumber } } } this.factoryData.preDataDetail = preDataDetail this.factoryData.currentDataDetail = currentDataDetail this.factoryData.targetDataDetail = targetDataDetail }); }, }, }; </script> <style lang="scss" scoped> .factory-layout { padding: 16px; background: url(../../../assets/images/copilot-bg.png) 0 0 / 100% 100% no-repeat; position: absolute; height: calc(100% + 38px); left: -16px; top: -8px; width: calc(100% + 30px); z-index: 1001; color: #fff; display: flex; flex-direction: column; gap: 8px; .factory-section { flex: 1; display: flex; flex-direction: column; gap: 16px; .flex { display: flex; gap: 16px; flex: 1; } .top>div, .bottom>div { height: 100%; } } .factory-footer { /** position: absolute; bottom: 10px; **/ height: 10px; width: 100%; color: rgb(80, 80, 80); user-select: none; font-size: 14px; letter-spacing: 1px; display: grid; place-content: center; } } </style>