|
<template>
|
<div class="home">
|
<div class="left">
|
<div class="left_top">
|
<p class="title">
|
设A423生产管理看板
|
<span class="font el-icon-setting set-title"></span>
|
</p>
|
<div class="statelist">
|
<span class="title-item"
|
>订单编号: <span class="color_4efefa">Q-22038</span>
|
</span>
|
<span class="title-item"
|
>当前工序: <span class="color_4efefa">前纺(QF)</span>
|
</span>
|
<span class="title-item"
|
>后道工序: <span class="color_4efefa">Q-22038</span>
|
</span>
|
<span class="title-item"
|
>工作人数: <span class="color_4efefa">6人</span>
|
</span>
|
</div>
|
<div class="content">
|
<div class="content_left">
|
<div class="content-top">
|
<div class="small_title">当前完成</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd style="font-size: 26px; font-weight: 600">0m</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="content-top">
|
<div class="small_title">正品生产</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd style="font-size: 26px; font-weight: 600">400m</dd>
|
</dl>
|
</div>
|
</div>
|
</div>
|
<div class="content_right">
|
<el-descriptions :column="2" :colon="true">
|
<el-descriptions-item label="产品名称"
|
>kooriookami</el-descriptions-item
|
>
|
<el-descriptions-item label="数量:"
|
>18100000000</el-descriptions-item
|
>
|
<el-descriptions-item label="交货日期:"
|
>苏州市</el-descriptions-item
|
>
|
<el-descriptions-item label="工时:"> 学校 </el-descriptions-item>
|
<el-descriptions-item label="起止时间"
|
>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
|
>
|
<el-descriptions-item label="货物描述"
|
>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
|
>
|
<el-descriptions-item label="客户名称"
|
>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
|
>
|
<el-descriptions-item label="参数要求"
|
>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
|
>
|
</el-descriptions>
|
<el-descriptions :column="1" :colon="true">
|
<el-descriptions-item label="完成度" style="width: 100%">
|
<el-progress
|
define-back-color="#007101"
|
color="#00CC66"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="progress"
|
:text-format="format"
|
>完成率50%</el-progress
|
>
|
</el-descriptions-item>
|
<el-descriptions-item label="合格率" style="width: 100%">
|
<el-progress
|
define-back-color="#007101"
|
color="#00CC66"
|
:text-inside="true"
|
:stroke-width="30"
|
:percentage="passrate"
|
></el-progress>
|
</el-descriptions-item>
|
</el-descriptions>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="bottom_list">
|
<div class="bottom-title">输入资源</div>
|
<Card />
|
<Card />
|
<Card />
|
<!-- <span class="call">呼叫物料</span> -->
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">当前工序:前纺(QF)</div>
|
<!-- format:format(percentage) -->
|
<div
|
style="
|
display: flex;
|
margin: auto;
|
width: 160px;
|
margin-top: 12px;
|
"
|
>
|
<el-progress
|
:stroke-width="12"
|
text-color="#4EFEFA"
|
color="#4C6CEC"
|
define-back-color="#4EFEFA"
|
type="circle"
|
:percentage="production"
|
:width="160"
|
style="font-size: 20px"
|
></el-progress>
|
</div>
|
|
<Card />
|
<p style="font-size: 22px; margin-left: 12px; margin-top: 50px">
|
|
</p>
|
<!-- <div class="qfcall">
|
<span
|
style="
|
width: 63%;
|
height: 100%;
|
background: #4efefa;
|
display: inline-block;
|
border-radius: 5px;
|
color: #000;
|
"
|
>打印</span
|
>
|
<span
|
style="
|
width: 33%;
|
height: 100%;
|
background: #ff0000;
|
display: inline-block;
|
border-radius: 5px;
|
margin-left: 2%;
|
"
|
>结束</span
|
>
|
</div> -->
|
</div>
|
<i class="el-icon-arrow-right font-arrow-20"></i>
|
<div class="bottom_list">
|
<div class="bottom-title">输出资源</div>
|
<Card />
|
<Card />
|
<Card />
|
<!-- <span class="call">呼叫运输</span> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_top">
|
<div class="right-top-l">作业状态</div>
|
<div class="time">
|
<dl>
|
<dd><span style="font-size: 32px">17:50</span></dd>
|
<dd>
|
<span style="font-size: 12px; margin-right: 10px"
|
>2023/02/16</span
|
>
|
<span style="font-size: 14px">星期四</span>
|
</dd>
|
</dl>
|
</div>
|
</div>
|
<div class="right-top-m">
|
设备状态:
|
<span style="position: relative"
|
>正常
|
<span class="yuandian"></span>
|
</span>
|
</div>
|
<div class="right-top-m-btn">
|
<el-button type="primary" @click="openorder">
|
控制</el-button
|
>
|
</div>
|
<div class="right_dutyLst">
|
<div class="right-small-title">当前值班</div>
|
<dl class='right-small-person'>
|
<dt>
|
<el-avatar
|
class="img-class"
|
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
|
></el-avatar>
|
</dt>
|
<span style="font-size:20px; font-weight:600;margin-right:10px">张三</span>
|
<span style="color:#666;">1867654329</span>
|
</dl>
|
<div style="width:100%;font-size:18px;font-weight:600;margin-top:50px;text-align:center;line-height:50px;">编号：12233</div>
|
<div class="right-small-btn">
|
<el-button type="primary" @click="openorder">
|
打印</el-button
|
>
|
<el-button type="primary" @click="openorder">
|
完成</el-button
|
>
|
</div>
|
</div>
|
<div class="right_base">
|
|
<Knowledge />
|
<div class="right-base-btn call">
|
<el-button type="primary" @click="openorder">
|
红灯呼叫</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Card from "@/components/Card.vue";
|
import Knowledge from "../components/Knowledge.vue";
|
export default {
|
components: {
|
Card,
|
Knowledge,
|
},
|
data() {
|
return {
|
progress: 70, //进度
|
passrate: 30, //合格率
|
production: 25, //生产中
|
};
|
},
|
created() {
|
setInterval(() => {
|
this.progress = this.getRandomNumber(1, 100);
|
this.passrate = this.getRandomNumber(1, 100);
|
this.production = this.getRandomNumber(1, 100);
|
}, 3000);
|
},
|
|
methods: {
|
getRandomNumber(min, max) {
|
return Math.floor(Math.random() * (max - min + 1) + min);
|
},
|
format(percentage) {
|
return `合格率：${percentage}%`;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss">
|
.font-arrow-20 {
|
font-size: 30px;
|
color: #4efefa;
|
font-weight: 700;
|
}
|
.bottom_list {
|
position: relative;
|
padding:10px;
|
.bottom-title{
|
font-weight: 600;
|
font-size:16px;
|
|
|
}
|
.call {
|
background: #4efefa;
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
color: #000;
|
font-size: 16px;
|
}
|
.qfcall {
|
display: inline-block;
|
width: 94%;
|
height: 10%;
|
text-align: center;
|
line-height: 45px;
|
position: absolute;
|
bottom: 20px;
|
left: 0px;
|
border-radius: 5px;
|
margin-left: 3%;
|
// color: #000;
|
font-size: 16px;
|
}
|
}
|
|
.small_title {
|
font-size: 20px;
|
font-weight: 600;
|
}
|
.home {
|
width: 100%;
|
height: auto;
|
min-height: 100%;
|
color: #fff;
|
background: rgba(2, 10, 38, 1);
|
overflow: hidden;
|
.left {
|
width: calc(78% - 60px);
|
height: auto;
|
min-height: 100%;
|
background: rgba(2, 10, 38, 1);
|
float: left;
|
padding: 30px;
|
padding-top: 20px;
|
.title {
|
font-size: 30px;
|
font-weight: 600;
|
|
text-align: center;
|
}
|
.color_4efefa {
|
color: #4efefa;
|
}
|
|
.statelist {
|
width: 100%;
|
margin: 0 auto;
|
height: 50px;
|
display: flex;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-around;
|
align-items: center;
|
.title-item {
|
width: 20%;
|
padding: 15px 20px;
|
text-align: center;
|
border-radius: 4px;
|
display: inline-block;
|
background: rgba(12, 79, 218, 1);
|
font-size: 16px;
|
font-weight: 600;
|
}
|
}
|
.content {
|
width: 100%;
|
height: 240px;
|
margin: 20px 0px;
|
overflow: hidden;
|
.content_left {
|
width: 22%;
|
height: 100%;
|
float: left;
|
// padding:2%;
|
.content-top {
|
background: hsl(225, 85%, 67%);
|
height: calc(50% - 25px);
|
padding-top: 20px;
|
text-align: center;
|
line-height: 30px;
|
&:nth-of-type(1) {
|
margin-bottom: 10px;
|
}
|
}
|
.content_leftBttom {
|
width: 100%;
|
}
|
dl {
|
margin-top: 5px;
|
}
|
dd {
|
width: 100%;
|
height: 30px;
|
// text-align: left;
|
font-size: 24px;
|
margin: 0;
|
text-align: center;
|
line-height: 36px;
|
}
|
}
|
.content_right {
|
width: calc(75% - 20px);
|
height: 100%;
|
float: right;
|
padding: 0 10px;
|
// background: #233b9e;
|
.el-descriptions__body {
|
background: transparent;
|
}
|
.el-descriptions__table {
|
width: 100%;
|
margin: 10px 0px;
|
// background: #233b9e;
|
color: #fff;
|
.el-descriptions--small {
|
width: 100%;
|
// margin: 50px 50px;
|
}
|
}
|
.el-progress {
|
width: 80%;
|
}
|
}
|
}
|
|
.bottom {
|
width: 100%;
|
height: 500px;
|
display: flex;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-between;
|
align-items: center;
|
margin-top: 6%;
|
// position: relative;
|
|
> div {
|
// background: #333333;
|
width: 30%;
|
height: 100%;
|
background: #111438;
|
|
.card {
|
width: calc(100% - 20px);
|
height: 70px;
|
// border: 1px solid #ccc;
|
background:#ffff;
|
border-radius: 5px;
|
margin-top: 10px;
|
color: #333;
|
.card_top-2{
|
width: 50%;
|
height:45px;
|
border-radius: 5px;
|
background:#fff;
|
font-size: 12px;
|
float:left;
|
.card-top-r-t{
|
width:100%;
|
text-align:center;
|
display:inline-block;
|
height:20px;
|
line-height:20px;
|
margin-top:3px;
|
}
|
.card-top-r-b{
|
width:100%;
|
height:20px;
|
line-height:20px;
|
text-align:center;
|
display:inline-block;
|
|
}
|
}
|
.card_top {
|
width: 50%;
|
height:45px;
|
border-radius: 5px;
|
background:#f2f2f2;
|
font-size: 12px;
|
line-height: 45px;
|
float:left;
|
|
|
> div {
|
margin-left: 12px;
|
position: relative;
|
p {
|
position: absolute;
|
top: -14px;
|
right: 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.card_content {
|
width: 100%;
|
border-radius: 5px;
|
height: 25px;
|
// background: #4765c0;
|
.card_contentLeft {
|
width: calc(100% - 10px);
|
height: 25px;
|
line-height:25px;
|
font-size: 12px;
|
padding:0 5px;
|
border-radius:5px 5px 0 0;
|
background:#ffcc33;
|
}
|
.card_contentRight {
|
width: 100%;
|
height: 38%;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.right {
|
width: calc(20% - 10px);
|
height: auto;
|
min-height: 100%;
|
background: #233b9e;
|
float: left;
|
padding: 1%;
|
.right_top {
|
width: 100%;
|
height: 100px;
|
position: relative;
|
.right-top-l {
|
position: absolute;
|
top: 10px;
|
left: -5%;
|
width: 100px;
|
height: 35px;
|
line-height: 35px;
|
text-align: center;
|
border-radius: 0 6px 6px 0;
|
background: hsl(225, 85%, 67%);
|
display: inline-block;
|
}
|
// background: pink;
|
.time {
|
width: 70%;
|
height: 100px;
|
float: right;
|
position: relative;
|
text-align: right;
|
dl {
|
height: 80%;
|
// padding-top: 10%;
|
}
|
.font {
|
font-size: 36px;
|
position: absolute;
|
top: 20px;
|
right: 0px;
|
}
|
}
|
}
|
.right-top-m {
|
width:100%;
|
background:rgba(28,48,133,1);
|
line-height:50px;
|
font-weight: 700;
|
font-size:18px;
|
padding:0 4%;
|
overflow-x:hidden;
|
margin-left:-4%;
|
.yuandian {
|
width: 25px;
|
height: 25px;
|
line-height:40px;
|
margin-top:12.5px;
|
display:inline-block;
|
background: #15d815;
|
display: block;
|
border-radius: 50%;
|
float:right;
|
|
}
|
}
|
.right-top-m-btn{
|
margin-top:10px;
|
width:100%;
|
.el-button--primary{
|
width:100%;
|
background:#fff;
|
color:#4765c0;
|
font-weight: 700;
|
font-size:18px;
|
}
|
}
|
.right_dutyLst {
|
width: calc(100% - 20px);
|
height: 270px;
|
border-radius: 4px;
|
line-height:30px;
|
overflow: hidden;
|
background:#00CC66;
|
margin-top:10px;
|
padding:5px 10px;
|
.right-small-title{
|
width:auto;
|
padding:5px;
|
font-size:14px;
|
float:right;
|
border-radius:8px;
|
background:#007101;
|
}
|
.right-small-person {
|
width: 100%;
|
height: 60px;
|
line-height:60px;
|
margin-top:50px;
|
border-radius: 10px;
|
background:#fff;
|
color:#333;
|
|
dt {
|
float: left;
|
padding: 5px;
|
margin-right:10px;
|
.img-class{
|
height:50px;
|
padding:0!important;
|
}
|
}
|
span {
|
// background: pink;
|
padding-top: 10px;
|
}
|
}
|
.right-small-btn{
|
margin-top:10px;
|
width:100%;
|
.el-button--primary{
|
width:45%;
|
background:#fff;
|
float:right;
|
border-radius:6px;
|
color:#4765c0;
|
font-weight: 700;
|
font-size:18px;
|
&:nth-of-type(1){
|
float:left;
|
}
|
}
|
}
|
}
|
.right_base {
|
width: 100%;
|
height: 45%;
|
position: relative;
|
.right-base-btn{
|
.el-button--primary{
|
width:100%;
|
background:#ff0000;
|
float:right;
|
border-radius:6px;
|
color:#fff;
|
font-weight: 700;
|
font-size:18px;
|
|
}
|
}
|
// .call {
|
// background: #ff0000;
|
// display: inline-block;
|
// width: 94%;
|
// height: 12%;
|
// text-align: center;
|
// line-height: 45px;
|
// position: absolute;
|
// bottom: 5px;
|
// left: 0px;
|
// border-radius: 5px;
|
// margin-left: 3%;
|
|
// font-size: 16px;
|
// }
|
}
|
}
|
}
|
</style>
|
