/
|
<template>
|
<div class="home">
|
<div class="left">
|
<div class="left_top">
|
<p class="title">设A423生产管理看板</p>
|
<div class="statelist">
|
<span
|
>状态:<span style="position: relative"
|
>正常
|
<span
|
style="
|
width: 12px;
|
height: 12px;
|
background: #15d815;
|
display: block;
|
border-radius: 50%;
|
position: absolute;
|
right: -18px;
|
top: 4px;
|
"
|
></span
|
></span>
|
</span>
|
<span>当前工序: <span class="status">前纺(QF)</span> </span>
|
|
<span>工作人数: <span class="status">6人</span> </span>
|
</div>
|
<div class="content">
|
<div class="content_left">
|
<div class="small_title">订单编号Q-22038</div>
|
<div class="content_leftBttom">
|
<dl>
|
<dd style="font-size: 32px; color: #4cfdf5">100m</dd>
|
<dd style="font-size: 14px">生产中</dd>
|
</dl>
|
<dl>
|
<dd style="font-size: 32px">400m</dd>
|
<dd style="font-size: 14px">当前完成</dd>
|
</dl>
|
</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>
|
<el-progress
|
define-back-color="#131D26"
|
color="#4EFEFA"
|
:text-inside="true"
|
:stroke-width="22"
|
:percentage="progress"
|
:text-format="format"
|
>完成率50%</el-progress
|
>
|
|
<el-progress
|
define-back-color="#131D26"
|
color="#4EFEFA"
|
:text-inside="true"
|
:stroke-width="22"
|
:percentage="passrate"
|
></el-progress>
|
</div>
|
</div>
|
<div class="bottom">
|
<div class="bottom_list">
|
<div class="small_title">输入资源</div>
|
<Card />
|
<Card />
|
<Card />
|
<span class="call">呼叫物料</span>
|
</div>
|
<div class="bottom_list">
|
<div class="small_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">编号:K23455</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>
|
<div class="bottom_list">
|
<div class="small_title">输出资源</div>
|
<Card />
|
<Card />
|
<Card />
|
<span class="call">呼叫运输</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="right">
|
<div class="right_top">
|
<div class="time">
|
<dl>
|
<dd><span style="font-size: 36px">17:50</span></dd>
|
<dd><span>2023/02/16</span></dd>
|
</dl>
|
<span style="right: 50px" class="font el-icon-date"></span>
|
<span class="font el-icon-setting"></span>
|
<!-- <span>17:50</span> -->
|
</div>
|
</div>
|
<div class="right_dutyLst">
|
<p class="small_title">当前值班</p>
|
<dl>
|
<dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>
|
<dd>张三</dd>
|
<dd>1867654329</dd>
|
</dl>
|
<dl>
|
<dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>
|
<dd>张三</dd>
|
<dd>1867654329</dd>
|
</dl>
|
<dl>
|
<dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>
|
<dd>张三</dd>
|
<dd>1867654329</dd>
|
</dl>
|
<dl>
|
<dt><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar></dt>
|
<dd>张三</dd>
|
<dd>1867654329</dd>
|
</dl>
|
</div>
|
<div class="right_base">
|
知识库
|
<Knowledge />
|
<span class="call">红灯呼叫</span>
|
</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">
|
.bottom_list {
|
position: relative;
|
.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;
|
margin-left: 14px;
|
margin-top: 14px;
|
}
|
.home {
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
|
.left {
|
width: calc(78% - 60px);
|
height: calc(100% - 60px);
|
background: #0a2164;
|
float: left;
|
padding: 30px;
|
padding-top: 20px;
|
.title {
|
font-size: 30px;
|
font-weight: 600;
|
|
text-align: center;
|
}
|
.status {
|
color: #4efefa;
|
}
|
|
.statelist {
|
width: 50%;
|
margin: 0 auto;
|
height: 20px;
|
display: flex;
|
flex-wrap: nowrap;
|
align-content: center;
|
justify-content: space-around;
|
align-items: center;
|
span {
|
// background: blue;
|
width: 30%;
|
height: 100%;
|
font-size: 16px;
|
font-weight: 600;
|
text-align: center;
|
line-height: 50px;
|
}
|
}
|
.content {
|
width: 100%;
|
height: 200px;
|
margin: 60px 0px;
|
.content_left {
|
width: 20%;
|
height: 100%;
|
float: left;
|
padding: 2%;
|
background: #233b9e;
|
.content_leftBttom {
|
width: 100%;
|
height: 70%;
|
}
|
dl {
|
float: left;
|
width: 50%;
|
height: 100%;
|
margin-top: calc(50% - 70px);
|
}
|
dd {
|
width: 100%;
|
height: 30px;
|
// text-align: left;
|
font-size: 24px;
|
margin: 0;
|
text-align: center;
|
line-height: 36px;
|
}
|
}
|
.content_right {
|
width: 70%;
|
height: 100%;
|
float: right;
|
padding: 2%;
|
margin-left: 2%;
|
background: #233b9e;
|
.el-descriptions__table {
|
width: 100%;
|
margin: 10px 0px;
|
background: #233b9e;
|
color: #fff;
|
.el-descriptions--small {
|
width: 100%;
|
// margin: 50px 50px;
|
}
|
}
|
.el-progress {
|
margin: 10px 0px;
|
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: #233b9e;
|
|
.card {
|
width: 90%;
|
height: 70px;
|
// border: 1px solid #ccc;
|
border-radius: 5px;
|
margin-left: 1%;
|
margin-top: 20px;
|
padding: 2%;
|
.card_top {
|
width: 100%;
|
height: 30%;
|
border-radius: 5px;
|
padding: 2%;
|
color: #fff;
|
font-size: 12px;
|
line-height: 24px;
|
> div {
|
margin-left: 12px;
|
position: relative;
|
p {
|
position: absolute;
|
top: -14px;
|
right: 15px;
|
font-size: 14px;
|
}
|
}
|
}
|
.card_content {
|
padding: 2%;
|
width: 100%;
|
border-radius: 5px;
|
height: 70%;
|
background: #4765c0;
|
.card_contentLeft {
|
width: 100%;
|
height: 58%;
|
font-size: 18px;
|
}
|
.card_contentRight {
|
width: 100%;
|
height: 38%;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
}
|
}
|
.right {
|
width: calc(20% - 10px);
|
height: calc(100% - 48px);
|
background: #233b9e;
|
float: left;
|
padding: 1%;
|
.right_top {
|
width: 100%;
|
height: 15%;
|
// background: pink;
|
.time {
|
width: 100%;
|
height: 50%;
|
|
position: relative;
|
dl {
|
height: 80%;
|
// padding-top: 10%;
|
}
|
.font {
|
font-size: 36px;
|
position: absolute;
|
top: 20px;
|
right: 0px;
|
}
|
}
|
}
|
.right_dutyLst {
|
width: 100%;
|
height: 35%;
|
overflow: hidden;
|
dl {
|
width: 100%;
|
height: 22%;
|
border-radius: 10px;
|
background: #0a2164;
|
dt {
|
float: left;
|
padding: 16px;
|
}
|
dd {
|
// background: pink;
|
padding-top: 10px;
|
}
|
}
|
}
|
.right_base {
|
width: 100%;
|
height: 45%;
|
position: relative;
|
.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>
|
