|
|
<template>
|
|
|
<div class="bg">
|
|
|
|
|
|
<div :class="`menu`" style="left: 2%">
|
|
|
<el-dropdown trigger="click" @command="dropdownLink">
|
|
|
<span class="el-dropdown-link">
|
|
|
{{ type }} <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<div class="topNavScroll"
|
|
|
style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
|
|
|
<el-dropdown-item command="成型">
|
|
|
<span style="color: #f8fefd">
|
|
|
成型
|
|
|
</span>
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item command="收坯">
|
|
|
<span style="color: #f8fefd">
|
|
|
收坯
|
|
|
</span>
|
|
|
</el-dropdown-item>
|
|
|
</div>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div :class="`menu`" style="left: 9%">
|
|
|
<el-dropdown trigger="click" @command="dropdownLink1">
|
|
|
<span class="el-dropdown-link">
|
|
|
{{ bz }} <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
</span>
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
<div class="topNavScroll"
|
|
|
style="max-height: 300px;overflow: auto;background-color: #053563;padding: 0;border: none;">
|
|
|
|
|
|
<el-dropdown-item command="白班">
|
|
|
<span style="color: #f8fefd">
|
|
|
白班
|
|
|
</span>
|
|
|
</el-dropdown-item>
|
|
|
<el-dropdown-item command="夜班">
|
|
|
<span style="color: #f8fefd">
|
|
|
夜班
|
|
|
</span>
|
|
|
</el-dropdown-item>
|
|
|
</div>
|
|
|
</el-dropdown-menu>
|
|
|
</el-dropdown>
|
|
|
</div>
|
|
|
<div class="title">{{ type }}工序生产信息</div>
|
|
|
<div class="subTitle" style="top: 15.2%; left: 2.7%;">{{ type }}计划与实际</div>
|
|
|
<div class="subTitle" style="top: 15.2%; left: 51.4%;">{{ type }}机信息</div>
|
|
|
<Chart ref="chart1" class="chart1"></Chart>
|
|
|
<div class="table1">
|
|
|
|
|
|
<!-- <div class="item">-->
|
|
|
<!-- <div class="itemTitle">{{ type }}{{ type }}</div>-->
|
|
|
<!-- <div class="info1">运行状态：</div>-->
|
|
|
<!-- <div class="info1-1" style="color:#77d75b">-->
|
|
|
<!-- <!– {{ i.completed_count > 0 ? '运行中' : '调试中' }}–>-->
|
|
|
<!-- <span>{{ type }}</span>-->
|
|
|
<!-- </div>-->
|
|
|
<!-- <div class="info2">订单号：<span style="width: 100%;display: inline-block"></span></div>-->
|
|
|
<!-- <div class="info2-1">{{ type }}</div>-->
|
|
|
<!-- <div class="info3">产品名称：</div>-->
|
|
|
<!-- <div class="info3-1">{{ type }}</div>-->
|
|
|
<!-- <div class="info4">完成数量：</div>-->
|
|
|
<!-- <div class="info4-1">{{ type }}</div>-->
|
|
|
<!-- </div>-->
|
|
|
<div v-for="(ii,kk) in lists">
|
|
|
<div v-for="(i,k) in ii" class="item">
|
|
|
<div class="itemTitle">{{ type }}{{ i.equipmentCode }}</div>
|
|
|
<div class="info1">运行状态：</div>
|
|
|
<div class="info1-1" style="color:#77d75b">
|
|
|
<!-- {{ i.completed_count > 0 ? '运行中' : '调试中' }}-->
|
|
|
<span v-if="equipmentCode === 'S' && ((kk * 3 + k) === 7)">调试中</span>
|
|
|
<span v-else>运行中</span>
|
|
|
</div>
|
|
|
<div class="info2">订单号：<span style="width: 100%;display: inline-block"></span></div>
|
|
|
<div class="info2-1">{{ i.workorder_code }}</div>
|
|
|
<div class="info3">产品名称：</div>
|
|
|
<div class="info3-1">{{ i.product_name }}</div>
|
|
|
<div class="info4">完成数量：</div>
|
|
|
<div class="info4-1">{{ i.completed_count }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
|
|
|
import Chart from "@/components/Charts/Chart";
|
|
|
import * as echarts from 'echarts'
|
|
|
import {getWhiteBoardProdDetails} from "../../api/board/cs4";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
Chart,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
list: [],
|
|
|
lists: [],
|
|
|
type: '成型',
|
|
|
bz: '白班',
|
|
|
equipmentCode: 'C',
|
|
|
shiftId: '5'
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.getData()
|
|
|
setInterval(() => {
|
|
|
this.getData()
|
|
|
}, 1000 * 60)
|
|
|
},
|
|
|
methods: {
|
|
|
getColor(e) {
|
|
|
if (e === 1) {
|
|
|
return '#77d75b'
|
|
|
}
|
|
|
if (e === 0) {
|
|
|
return '#ff0000'
|
|
|
}
|
|
|
},
|
|
|
getData() {
|
|
|
getWhiteBoardProdDetails({
|
|
|
shiftId: this.shiftId,
|
|
|
equipmentCode: this.equipmentCode
|
|
|
}).then((e) => {
|
|
|
let aa = [
|
|
|
{
|
|
|
"equipmentCode": "C1",
|
|
|
"workorder_code": "DD2024123000011-1",
|
|
|
"completed_count": 61,
|
|
|
"product_name": "Φ130mm微烟免拆白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C2",
|
|
|
"workorder_code": "DD2024123000012-1",
|
|
|
"completed_count": 83,
|
|
|
"product_name": "Φ130mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C3",
|
|
|
"workorder_code": "DD2024123000012-1",
|
|
|
"completed_count": 78,
|
|
|
"product_name": "Φ130mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C4",
|
|
|
"workorder_code": "DD2024123000012-2",
|
|
|
"completed_count": 81,
|
|
|
"product_name": "Φ130mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C5",
|
|
|
"workorder_code": "DD2024123000013-1",
|
|
|
"completed_count": 71,
|
|
|
"product_name": "Φ125mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C6",
|
|
|
"workorder_code": "DD2024123000013-1",
|
|
|
"completed_count": 72,
|
|
|
"product_name": "Φ125mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C7",
|
|
|
"workorder_code": "DD2024123000013-2",
|
|
|
"completed_count": 82,
|
|
|
"product_name": "Φ125mm微烟白坯"
|
|
|
},
|
|
|
{
|
|
|
"equipmentCode": "C8",
|
|
|
"workorder_code": "DD2024123000012-3",
|
|
|
"completed_count": 22,
|
|
|
"product_name": "Φ130mm微烟白坯"
|
|
|
}
|
|
|
]
|
|
|
// this.list = aa.slice(0, 8).map(v => {
|
|
|
this.list = e.data.rightlist.slice(0, 8).map(v => {
|
|
|
return {
|
|
|
...v,
|
|
|
equipmentCode: v.equipmentCode.split('').at(-1)
|
|
|
}
|
|
|
})
|
|
|
this.lists = this.groupByCount(this.list)
|
|
|
this.$refs.chart1.setData({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
// 坐标轴指示器，坐标轴触发有效
|
|
|
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: "2%",
|
|
|
right: "4%",
|
|
|
bottom: "5%",
|
|
|
top: "10%",
|
|
|
containLabel: true,
|
|
|
},
|
|
|
legend: {
|
|
|
top: '2%',
|
|
|
x: 'center',
|
|
|
textStyle: {
|
|
|
color: "#fff",
|
|
|
},
|
|
|
itemWidth: 12,
|
|
|
itemHeight: 10,
|
|
|
// itemGap: 35
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: e.data.leftList.map(v => v.workorder_code),
|
|
|
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#999",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: "#9996",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
// interval: 0,
|
|
|
// rotate: 40,
|
|
|
textStyle: {
|
|
|
fontFamily: "Microsoft YaHei",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#999",
|
|
|
},
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
color: "#9996",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "计划数量",
|
|
|
type: "bar",
|
|
|
showBackground: true,
|
|
|
backgroundStyle: {
|
|
|
color: '#fff1'
|
|
|
},
|
|
|
barGap: "0%",
|
|
|
barWidth: "30%",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#01a5fe",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#0057ff",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: e.data.leftList.map(v => v.plan_number),
|
|
|
},
|
|
|
{
|
|
|
name: "完成数量",
|
|
|
type: "bar",
|
|
|
barGap: "30%",
|
|
|
showBackground: true,
|
|
|
backgroundStyle: {
|
|
|
color: '#fff1'
|
|
|
},
|
|
|
barWidth: "30%",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#19fdb4",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#0abb62",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: e.data.leftList.map(v => v.completed_count),
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
})
|
|
|
},
|
|
|
groupByCount(array) {
|
|
|
let result = [];
|
|
|
for (let i = 0; i < array.length; i += 3) {
|
|
|
result.push(array.slice(i, i + 3));
|
|
|
}
|
|
|
return result;
|
|
|
},
|
|
|
|
|
|
dropdownLink(e) {
|
|
|
this.type = e
|
|
|
if (e === '成型') {
|
|
|
this.equipmentCode = 'C'
|
|
|
}
|
|
|
if (e === '收坯') {
|
|
|
this.equipmentCode = 'S'
|
|
|
}
|
|
|
this.getData()
|
|
|
},
|
|
|
dropdownLink1(e) {
|
|
|
this.bz = e
|
|
|
if (e === '白班') {
|
|
|
this.shiftId = '5'
|
|
|
}
|
|
|
if (e === '夜班') {
|
|
|
this.shiftId = '2'
|
|
|
}
|
|
|
this.getData()
|
|
|
},
|
|
|
},
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
|
|
|
.el-dropdown-menu {
|
|
|
padding: 0 !important;
|
|
|
border: none !important;
|
|
|
}
|
|
|
|
|
|
.menu {
|
|
|
background-image: url("~@/assets/board/cs3/subheadClick1.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
width: 8vw;
|
|
|
height: 1.66vw;
|
|
|
top: 8.5%;
|
|
|
line-height: 1.66vw;
|
|
|
font-size: 0.8vw;
|
|
|
color: #d4d4d4;
|
|
|
text-align: center;
|
|
|
|
|
|
/deep/ .el-dropdown {
|
|
|
color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.bg {
|
|
|
background-image: url("~@/assets/board/cs3/bg2.jpg");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
position: absolute;
|
|
|
top: 3%;
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
font-size: 2vw;
|
|
|
color: #fff;
|
|
|
letter-spacing: 2px;
|
|
|
transform: translateY(-50%);
|
|
|
}
|
|
|
|
|
|
.subTitle {
|
|
|
position: absolute;
|
|
|
color: #fff;
|
|
|
transform: translateY(-50%);
|
|
|
font-size: 1vw;
|
|
|
}
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
top: 18%;
|
|
|
left: 2.2%;
|
|
|
width: 46.9%;
|
|
|
height: 78%;
|
|
|
}
|
|
|
|
|
|
.table1 {
|
|
|
position: absolute;
|
|
|
top: 18%;
|
|
|
left: 50.9%;
|
|
|
width: 46.9%;
|
|
|
height: 78%;
|
|
|
overflow: auto;
|
|
|
}
|
|
|
|
|
|
.table1::-webkit-scrollbar {
|
|
|
display: inline-block;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
width: 30%;
|
|
|
margin: 1.5%;
|
|
|
height: 13.1vw;
|
|
|
display: inline-block;
|
|
|
background-image: url("~@/assets/board/cs3/bg3.png");
|
|
|
background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.itemTitle {
|
|
|
position: absolute;
|
|
|
top: 13.5%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
font-size: 1vw;
|
|
|
color: #f8f7f4;
|
|
|
}
|
|
|
|
|
|
.info1 {
|
|
|
position: absolute;
|
|
|
top: 33.7%;
|
|
|
left: 7%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
color: #028cf1;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.info1-1 {
|
|
|
position: absolute;
|
|
|
top: 33.7%;
|
|
|
left: 39%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.info2 {
|
|
|
position: absolute;
|
|
|
top: 54.5%;
|
|
|
left: 7%;
|
|
|
width: 30%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
color: #028cf1;
|
|
|
letter-spacing: 1px;
|
|
|
text-align: justify;
|
|
|
}
|
|
|
|
|
|
.info2-1 {
|
|
|
position: absolute;
|
|
|
top: 50.5%;
|
|
|
left: 37%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
letter-spacing: 1px;
|
|
|
color: #dbdde9;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.info3 {
|
|
|
position: absolute;
|
|
|
top: 66.7%;
|
|
|
left: 7%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
color: #028cf1;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.info3-1 {
|
|
|
position: absolute;
|
|
|
top: 66.7%;
|
|
|
left: 37%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
letter-spacing: 1px;
|
|
|
color: #dbdde9;
|
|
|
}
|
|
|
|
|
|
.info4 {
|
|
|
position: absolute;
|
|
|
top: 83.7%;
|
|
|
left: 7%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
color: #028cf1;
|
|
|
letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
.info4-1 {
|
|
|
position: absolute;
|
|
|
top: 83.7%;
|
|
|
left: 37%;
|
|
|
font-size: 0.8vw;
|
|
|
transform: translateY(-50%);
|
|
|
letter-spacing: 1px;
|
|
|
color: #dbdde9;
|
|
|
}
|
|
|
</style>
|