<template>
|
<div class="container">
|
<div class="header">
|
<div class="title">
|
|
<img
|
:src="
|
require(`@/assets/images/1.png`)
|
"
|
class="imgTitle"
|
/>
|
4GC三代发动机连杆线</div>
|
<div class="left-text">
|
<div style="line-height: 30px">{{ nowTime }}</div>
|
<div style="padding-left: 25px">
|
安全生产:{{ produceStatisData.currentSafeProductionDay }}天
|
</div>
|
</div>
|
|
<div class="right-text">
|
<div style="line-height: 30px">
|
当前班次:{{ produceStatisData.currentTeamName }}
|
</div>
|
<div>班长:{{ produceStatisData.currentTeamLeader }}</div>
|
</div>
|
</div>
|
<div class="main">
|
<div class="main-top">
|
<img src="~@/assets/images/prodline_all.png" class="prodline" />
|
|
<img
|
v-for="item in equipmentStatusData"
|
:key="item.id"
|
:src="
|
require(`@/assets/images/${imageColor[item.workingProcedure]}/${
|
item.workingProcedure
|
}.png`)
|
"
|
:class="`euip ${item.workingProcedure}`"
|
/>
|
|
<img src="~@/assets/images/OP35.png" class="prodline_op35" />
|
<img :src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)" class="euip OP40" />
|
<img :src="require(`@/assets/images/${imageColor['unit']}/unit.png`)" class="euip unit" />
|
</div>
|
<!-- <button @click="flag=true">data改变</button> -->
|
<div class="main-bottom">
|
<div class="echarts-box border_left1">
|
<div class="echarts-title">设备运行状态统计图</div>
|
<EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
|
</div>
|
<div class="echarts-box border_left2">
|
<div class="echarts-title">产线健康能力图</div>
|
<ProdlineHealthy />
|
</div>
|
<div class="echarts-box border_middle">
|
<div class="echarts-title">质量数据趋势图</div>
|
<div
|
style="
|
color: #fff;
|
margin: 0 0.13rem;
|
text-align: center;
|
font-size: 0.17rem;
|
"
|
>
|
{{ qualityData.qualityType }}
|
</div>
|
<div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #f14158;
|
"
|
></div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #a7cf29;
|
"
|
></div>
|
</div>
|
<QualityDataTrendse :qualityData="qualityData.list" />
|
<div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #a7cf29;
|
"
|
></div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #f14158;
|
"
|
></div>
|
</div>
|
</div>
|
<div class="echarts-box border_right1">
|
<div class="echarts-title">本班/本月产量统计</div>
|
|
|
<ProductionStatistics :produceStatisData="produceStatisData" />
|
<div class="pie-label-left">
|
<!-- 当前班组实际生产数量 -->
|
{{ produceStatisData.currentShiftProduceNum }}
|
<span v-if="produceStatisData.currentShiftPlanNum||produceStatisData.currentShiftPlanNum==0">/</span>
|
<!-- 当前班组计划生产数量 -->
|
{{
|
produceStatisData.currentShiftPlanNum
|
}}
|
</div>
|
<div class="pie-label-right">
|
{{ produceStatisData.currentMonthProduceNum }}
|
<span v-if="produceStatisData.currentMonthPlanNum||produceStatisData.currentMonthPlanNum==0">/</span>
|
{{
|
produceStatisData.currentMonthPlanNum
|
}}
|
</div>
|
</div>
|
<div class="echarts-box border_right2">
|
<div class="echarts-title">生产完成趋势</div>
|
<ProductionCompletionTrend
|
:produceCompletionData="produceCompletionData"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
// import OperationalAvailability from "./OperationalAvailability.vue";
|
// import EquipmentStatus from "./EquipmentStatus.vue";
|
// import ProductionCapacity from "./ProductionCapacity.vue";
|
import EquipmentRunStatus from "./EquipmentRunStatus.vue";
|
import ProdlineHealthy from "./ProdlineHealthy.vue";
|
import ProductionCompletionTrend from "./ProductionCompletionTrend.vue";
|
import ProductionStatistics from "./ProductionStatistics.vue";
|
import QualityDataTrendse from "./QualityDataTrends.vue";
|
import moment from "moment";
|
|
import {
|
GetEquipmentCurrentState,
|
getQualityData,
|
getLargeScreenFrequency,
|
getProduceCompletionStatus,
|
getCurrentProduceInfo,
|
} from "@/api/common";
|
|
export default {
|
name: "MainContent",
|
components: {
|
EquipmentRunStatus,
|
ProductionStatistics,
|
ProductionCompletionTrend,
|
QualityDataTrendse,
|
ProdlineHealthy,
|
},
|
data() {
|
return {
|
dataTimer: null,
|
dateTimer: null,
|
time: 5000,
|
nowTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
|
// flag: false,
|
option: {},
|
myChart: {},
|
EquipmentEnums: [
|
{
|
code: 1,
|
color: "green",
|
},
|
{
|
code: 2,
|
color: "white",
|
},
|
{
|
code: 3,
|
color: "blue",
|
},
|
{
|
code: 4,
|
color: "yellow",
|
},
|
{
|
code: 5,
|
color: "red",
|
},
|
],
|
imageColor: {
|
OP05: "blue",
|
OP10: "blue",
|
OP20: "blue",
|
OP30: "blue",
|
OP35: "blue",
|
OP40: "blue",
|
OP50: "blue",
|
OP60: "blue",
|
OP70: "blue",
|
OP80: "blue",
|
unit: "blue",
|
},
|
equipmentStatusData: [
|
{ workingProcedure: "OP05" },
|
{ workingProcedure: "OP10" },
|
{ workingProcedure: "OP20" },
|
{ workingProcedure: "OP30" },
|
{ workingProcedure: "OP35" },
|
{ workingProcedure: "OP40" },
|
{ workingProcedure: "OP50" },
|
{ workingProcedure: "OP60" },
|
{ workingProcedure: "OP70" },
|
{ workingProcedure: "OP80" },
|
{ workingProcedure: "unit" },
|
],
|
qualityData: [],
|
produceCompletionData: [],
|
produceStatisData: {},
|
};
|
},
|
watch: {},
|
created() {
|
this.getLargeScreenFrequency();
|
this.getEquipmentCurrentState();
|
this.getQualityData();
|
this.getProduceCompletionStatus();
|
this.getCurrentProduceInfo();
|
this.dataTimer = setInterval(this.timerHandler, this.time);
|
this.dateTimer = setInterval(() => {
|
this.nowTime = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
}, 1000);
|
},
|
methods: {
|
// 定时器函数
|
timerHandler() {
|
this.getEquipmentCurrentState();
|
this.getQualityData();
|
this.getProduceCompletionStatus();
|
this.getCurrentProduceInfo();
|
},
|
// 获取设备状态
|
async getEquipmentCurrentState() {
|
try {
|
let { data } = await GetEquipmentCurrentState();
|
let equipmentData=[]
|
data.forEach(item=>{
|
const res=this.equipmentStatusData.filter(obj=>obj.workingProcedure==item.workingProcedure)
|
if(res.length>0){
|
equipmentData.push(item)
|
}
|
})
|
this.equipmentStatusData = equipmentData;
|
this.getImageColor(data);
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
// 根据设备状态设置设备颜色
|
getImageColor(data) {
|
data.forEach((item) => {
|
let result = this.EquipmentEnums.filter(
|
(obj) => obj.code == item.equipmentCurrentState
|
);
|
// console.log(item.equipmentCurrentState);
|
if (result.length > 0) {
|
this.imageColor[item.workingProcedure] = result[0].color;
|
}
|
});
|
// console.log(this.imageColor, "getImageColor");
|
},
|
// 获取质量数据
|
async getQualityData() {
|
let { qualityData } = this;
|
try {
|
let { data } = await getQualityData({
|
qualityType: qualityData.qualityType,
|
});
|
this.qualityData = data;
|
// console.log(this.qualityData);
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
// 获取生产完成趋势数据
|
async getProduceCompletionStatus() {
|
try {
|
let { data } = await getProduceCompletionStatus();
|
this.produceCompletionData = data;
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
// 获取产量统计数据
|
async getCurrentProduceInfo() {
|
try {
|
let { data } = await getCurrentProduceInfo();
|
this.produceStatisData = data;
|
// console.log(data);
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
// 获取定时器时间
|
async getLargeScreenFrequency() {
|
try {
|
let { data } = await getLargeScreenFrequency();
|
this.time = data;
|
} catch (error) {
|
console.log(error);
|
}
|
},
|
},
|
// beforeDestroy(){
|
// clearInterval(this.dataTimer)
|
// clearInterval(this.dateTimer)
|
// }
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
$allHeight: 13.5rem;
|
$titleHeight: 2rem;
|
|
.container {
|
width: 100%;
|
height: auto;
|
|
.header {
|
width: 100%;
|
height: 2rem;
|
background-image: url("~@/assets/images/title.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
margin-bottom: 0.25rem;
|
position: relative;
|
|
.title {
|
color: #41c7de;
|
font-size: 0.38rem;
|
font-weight: 700;
|
position: absolute;
|
top: .31rem;
|
left: 50%;
|
transform: translate(-50%);
|
letter-spacing: 8px;
|
.imgTitle{
|
width: 0.5rem;
|
height: 0.5rem;
|
position: absolute;
|
top: -0.01rem;
|
left: -0.8rem;
|
}
|
}
|
|
.left-text {
|
font-size: 0.19rem;
|
color: #fff;
|
position: absolute;
|
top: 1.15rem;
|
left: 5rem;
|
}
|
|
.right-text {
|
font-size: 0.19rem;
|
text-align: right;
|
color: #fff;
|
position: absolute;
|
top: 1.15rem;
|
right: 5.3rem;
|
}
|
}
|
|
.main {
|
width: 100%;
|
height: auto;
|
// display: flex;
|
// flex-direction: column;
|
// justify-content: space-between;
|
padding: 0 0.28rem 0.19rem;
|
|
.main-top {
|
width: 100%;
|
height: 7.42rem;
|
// background-color: #fff;
|
margin-bottom: 0.29rem;
|
background-image: url("~@/assets/images/border_prodline.png");
|
background-size: 101.1% 101.8%;
|
background-position: -0.13rem -0.13rem;
|
position: relative;
|
.prodline {
|
width:95%;
|
display: block;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.prodline_op35 {
|
position: absolute;
|
top: 2.72rem;
|
left: 4.3rem;
|
width:1.8%;
|
}
|
|
.euip {
|
width:95%;
|
position: absolute;
|
top: -1.59rem;
|
left: 1.28rem;
|
|
}
|
|
.OP05{
|
top: -1.58rem;
|
left: 0.12rem;
|
}
|
|
.OP10,.OP40{
|
top: -1.48rem;
|
left: 0.5rem;
|
}
|
|
.OP20{
|
top: -1.8rem;
|
left: 0.6rem;
|
}
|
|
.OP30{
|
top: -2.05rem;
|
left: 0.3rem;
|
}
|
|
.OP35{
|
top: -1.8rem;
|
left: 0.2rem;
|
}
|
|
.OP50{
|
top: -1.69rem;
|
left: 1.05rem;
|
}
|
|
.OP60{
|
top: -1.65rem;
|
left: 1.5rem;
|
}
|
|
.OP70{
|
top: -1.52rem;
|
left: 2.15rem;
|
}
|
|
.OP80,.unit{
|
top: -1.95rem;
|
left: 1.98rem;
|
}
|
|
|
// img:nth-child(2) {
|
// width:100%;
|
// top: -2.05rem;
|
// left: 1.07rem;
|
// }
|
}
|
|
.main-bottom {
|
height: auto;
|
display: flex;
|
// background-color: skyblue;
|
|
.border_left1 {
|
width:3.84rem;
|
margin-right: .14rem;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 107.5% 104%;
|
background-position: -0.14rem -0.13rem;
|
background-repeat: no-repeat;
|
}
|
|
.border_left2 {
|
width:3.02rem;
|
margin-right: .16rem;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left2.png");
|
background-size: 109.3% 104%;
|
background-position: -0.14rem -0.13rem;
|
background-repeat: no-repeat;
|
}
|
|
.border_middle {
|
width:6.09rem;
|
margin-right: .16rem;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_middle.png");
|
background-size: 102.7% 104%;
|
background-position: -0.14rem -0.13rem;
|
background-repeat: no-repeat;
|
}
|
|
.border_right1 {
|
width:3.75rem;
|
margin-right: .15rem;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_right1.png");
|
background-size: 107.5% 104%;
|
background-position: -0.14rem -0.13rem;
|
background-repeat: no-repeat;
|
}
|
|
.border_right2 {
|
width:6.09rem;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_right2.png");
|
background-size: 104.4% 104%;
|
background-position: -0.14rem -0.13rem;
|
background-repeat: no-repeat;
|
}
|
|
.echarts-box {
|
height: auto;
|
border: 2px solid #3a45de;
|
|
.echarts-title {
|
font-size: 0.18rem;
|
height: 0.75rem;
|
padding: 0.31rem 0 0.26rem;
|
margin: 0 0.23rem;
|
font-weight: 700;
|
color: #00afb9;
|
text-align: center;
|
border-bottom: 2px solid #3c37bf;
|
}
|
}
|
|
.echarts-box:nth-child(4) {
|
position: relative;
|
|
.pie-label-left {
|
position: absolute;
|
bottom: 0.1rem;
|
left: 0.7rem;
|
color: #fff;
|
font-size: 0.2rem;
|
font-weight: 300;
|
}
|
|
.pie-label-right {
|
position: absolute;
|
bottom: 0.1rem;
|
right: 0.7rem;
|
color: #fff;
|
font-size: 0.2rem;
|
font-weight: 300;
|
}
|
}
|
|
.box-container {
|
width: 100%;
|
height: 2.6rem;
|
// background-color: rgb(196, 231, 178);
|
}
|
|
.bgi {
|
background-image: url("~@/assets/bg1.png");
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center center;
|
}
|
}
|
}
|
}
|
</style>
|
