| | |
| | | <div> |
| | | <div class="kb_dashboard"> |
| | | |
| | | <!-- 星空背景--> |
| | | <div ref="starsRef" class="stars"> |
| | | <div v-for="(item, index) in starsCount" :key="index" class="star" /> |
| | | </div> |
| | | <!-- 星空背景--> |
| | | <div ref="starsRef" class="stars"> |
| | | <div v-for="(item, index) in starsCount" :key="index" class="star" /> |
| | | </div> |
| | | |
| | | <div class="kb_header"> |
| | | <div class="flex_c_c kb_header_text"> |
| | | <div id="topBarLeft" style="width:600px;height:100%" /> |
| | | 仓库管理数字化看板 |
| | | 仓库管理看板 |
| | | <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" /> |
| | | </div> |
| | | |
| | | <div class="kb_headTime" style="left: 85px"> |
| | | <span>浙江新凯迪数字科技股份有限公司</span> |
| | | </div> |
| | | |
| | | <div class="kb_headTime"> |
| | | <span>{{ headTime }}</span> |
| | | </div> |
| | |
| | | <el-table-column |
| | | prop="voucherdate" |
| | | label="单据日期" |
| | | width="131" |
| | | width="151" |
| | | > |
| | | <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="209" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.wo }}</div> |
| | |
| | | <el-table-column |
| | | prop="wkshp_name" |
| | | label="生产车间" |
| | | width="105" |
| | | width="125" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.wkshp_name }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="saleOrderCode" |
| | | label="销售订单号" |
| | | width="200" |
| | | > |
| | | <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="saleOrderCode"--> |
| | | <!-- label="销售订单号"--> |
| | | <!-- width="200"--> |
| | | <!-- >--> |
| | | <!-- <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" |
| | | width="156" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.materiel_code }}</div> |
| | |
| | | <el-table-column |
| | | prop="materiel_name" |
| | | label="产品名称" |
| | | width="180" |
| | | width="220" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div class="ellipsis">{{ row.materiel_name }}</div> |
| | |
| | | <el-table-column |
| | | prop="stck_name" |
| | | label="预入仓库" |
| | | width="100" |
| | | width="120" |
| | | > |
| | | <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="83" |
| | | /> |
| | | <el-table-column |
| | | prop="totalStockInQuantity" |
| | | label="已入库数量" |
| | | width="100" |
| | | width="120" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div> |
| | |
| | | <el-table-column |
| | | prop="preFinishDate" |
| | | label="预计入库" |
| | | width="140" |
| | | width="160" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div> |
| | |
| | | |
| | | data() { |
| | | return { |
| | | onLine: navigator.onLine, // 监听网络是否在线 |
| | | |
| | | headTime: '', |
| | | tableDataTop: [], |
| | |
| | | // 两小时看板刷新一次 |
| | | setInterval(() => { |
| | | window.location.reload() |
| | | }, 1000 * 60 * 60 * 10) |
| | | }, 1000 * 60 * 120) |
| | | }, |
| | | mounted() { |
| | | // 监听网络是否在线 |
| | | window.addEventListener('online', this.updateOnlineStatus) |
| | | window.addEventListener('offline', this.updateOnlineStatus) |
| | | this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true }) |
| | | |
| | | this.getTopBar() |
| | | |
| | | this.getWareHouseTopLeftData() |
| | |
| | | this.getEcharts() |
| | | this.setStarsRef() |
| | | }, |
| | | beforeDestroy() { |
| | | window.removeEventListener('online', this.updateOnlineStatus) |
| | | window.removeEventListener('offline', this.updateOnlineStatus) |
| | | }, |
| | | |
| | | methods: { |
| | | // 更新网络状态 |
| | | updateOnlineStatus(e) { |
| | | if (e.isFirst) { |
| | | // console.log('x') |
| | | } else { |
| | | const loading = this.$loading({ |
| | | lock: true, |
| | | text: '断网了,正在拼命联网中,请检查网络是否正常...', |
| | | spinner: 'el-icon-loading', |
| | | customClass: 'osloading', |
| | | background: 'rgba(0, 0, 0, 0.7)' |
| | | }) |
| | | const { type } = e |
| | | this.onLine = type === 'online' |
| | | if (this.onLine) { |
| | | loading.close() |
| | | this.$message.success('网络连接成功!') |
| | | } else { |
| | | this.$message.error('网络掉线,请关注网络状态!') |
| | | } |
| | | } |
| | | }, |
| | | setStarsRef() { |
| | | const starNodes = Array.from(this.$refs.starsRef.children) |
| | | starNodes.forEach(item => { |
| | |
| | | WareHouseTopLeftData().then(res => { |
| | | this.tableDataTop = res.data |
| | | // this.number1 = this.tableDataTop.length |
| | | if (this.tableDataTop.length > 9) { |
| | | if (this.tableDataTop.length > 10) { |
| | | clearInterval(this.tableTopTask) |
| | | this.getWareHouseTopLeftData() |
| | | } |
| | | }) |
| | | } |
| | | }, this.tableDataTop.length <= 9 ? 1000 * 3 : 100) |
| | | }, this.tableDataTop.length <= 10 ? 1000 * 15 : 100) |
| | | }) |
| | | }, |
| | | // 获取左下table数据 |
| | |
| | | } |
| | | }) |
| | | } |
| | | }, this.tableDataBottom.length <= 10 ? 1000 * 3 : 100) |
| | | }, this.tableDataBottom.length <= 10 ? 1000 * 15 : 100) |
| | | }) |
| | | }, |
| | | |