<template>
|
<div class="container">
|
<img alt="guang" src="~@/assets/images/guang.png" class="guang" />
|
|
<div class="header">
|
<div class="title">
|
<img :src="require(`@/assets/images/1.png`)" class="imgTitle" />
|
4GC三代发动机连杆线
|
</div>
|
<div class="left-text">
|
<div>{{ nowTime }}</div>
|
<div>安全生产:{{ produceStatisData.currentSafeProductionDay }}天</div>
|
</div>
|
|
<div class="right-text">
|
<div>当前班次:{{ produceStatisData.currentTeamName }}</div>
|
<div>班长:{{ produceStatisData.currentTeamLeader }}</div>
|
</div>
|
</div>
|
<div class="main">
|
<div class="main-top">
|
<div class="main-top_ly">
|
<!-- 产线布局图 -->
|
<img
|
src="~@/assets/images/prodline_all.png"
|
class="prodline"
|
alt="line"
|
/>
|
|
<!-- <img src="~@/assets/images/9.png" class="line100" alt="line100" />
|
<p style="color: white;"> {{equipmentStatusData}} </p> -->
|
|
|
<!-- 顶部 -->
|
<div v-for="item in equipmentStatusData">
|
<!-- <p style="color: white;font-size: 32px"> {{ item.equipmentCurrentState }} </p> -->
|
|
<img
|
:alt="item.workingProcedure"
|
:src="
|
require(`@/assets/images/${
|
imageColor[item.workingProcedure]
|
}/zhuozi.png`)
|
"
|
class="prodline_op325"
|
/>
|
|
<img
|
:alt="item.workingProcedure"
|
v-if="
|
item.equipmentCurrentState == 1 &&
|
item.workingProcedure == 'OP30'
|
"
|
src="~@/assets/images/6.gif"
|
class="box100"
|
/>
|
<img
|
v-if="
|
item.equipmentCurrentState == 1 &&
|
item.workingProcedure == 'OP20'
|
"
|
src="~@/assets/images/8.gif"
|
class="box200"
|
/>
|
<img
|
v-if="
|
item.equipmentCurrentState == 1 &&
|
item.workingProcedure == 'OP50'
|
"
|
src="~@/assets/images/8.gif"
|
class="box300"
|
/>
|
</div>
|
|
<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_op325"
|
/>
|
|
<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>
|
</div>
|
<!-- <button @click="flag=true">data改变</button> -->
|
<div class="main-bottom">
|
<div class="echarts-box border_left1">
|
<div class="echarts-title">
|
<span class="title1"> 设备运行状态统计图 </span>
|
</div>
|
<EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
|
</div>
|
<div class="echarts-box border_left2">
|
<div class="echarts-title">
|
<span class="title1"> 产线健康能力图 </span>
|
</div>
|
<ProdlineHealthy />
|
</div>
|
<div class="echarts-box border_middle">
|
<div class="echarts-title">
|
<span class="title1"> 质量数据趋势图 </span>
|
</div>
|
<div class="box11">
|
{{ qualityData.qualityType }}
|
</div>
|
<div>
|
<div class="box12"></div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #e6e705;
|
"
|
></div>
|
</div>
|
<QualityDataTrendse :qualityData="qualityData.list" />
|
<div>
|
<div
|
style="
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #e6e705;
|
"
|
></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">
|
<span class="title1"> 本班/本月产量统计 </span>
|
</div>
|
|
<!--
|
<div class="ring-container quan1">
|
<div class="outer-ring"></div>
|
<div class="inner-ring"></div>
|
</div> -->
|
|
<div class="quan1"></div>
|
<div class="quan2"></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">
|
<span class="title1"> 生产完成趋势 </span>
|
</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 anime from "animejs/lib/anime.es.js";
|
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) {
|
// item.equipmentCurrentState =5; 测试
|
equipmentData.push(item);
|
}
|
});
|
this.equipmentStatusData = equipmentData;
|
console.log(88888888);
|
console.log(JSON.stringify(this.equipmentStatusData) );
|
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(5555555555);
|
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);
|
}
|
},
|
},
|
mounted() {
|
|
},
|
|
// beforeDestroy(){
|
// clearInterval(this.dataTimer)
|
// clearInterval(this.dateTimer)
|
// }
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
$allHeight: 13.5rem;
|
$titleHeight: 2rem;
|
|
.container {
|
width: 100%;
|
height: auto;
|
position: relative;
|
.guang {
|
position: absolute;
|
width: 100%;
|
top: 30%;
|
left: 0;
|
z-index: 0;
|
height: 69%;
|
}
|
|
.header {
|
position: relative;
|
z-index: 9;
|
width: 100%;
|
height: 2rem;
|
background-image: url("~@/assets/images/title.png");
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
margin-bottom: 0.25rem;
|
|
.title {
|
font-family: Source Han Sans CN;
|
display: flex;
|
vertical-align: middle;
|
align-items: center;
|
font-size: 40px;
|
font-weight: 700;
|
position: absolute;
|
top: 12px;
|
left: 50%;
|
transform: translate(-50%);
|
letter-spacing: 8px;
|
|
background: linear-gradient(0deg, #a7ffff, #83d0dc);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
|
.imgTitle {
|
width: 117px;
|
margin-right: 69px;
|
}
|
}
|
|
.left-text {
|
font-size: 16px;
|
color: #fff;
|
position: absolute;
|
top: 79px;
|
left: 37px;
|
width: 368px;
|
text-align: right;
|
line-height: 23px;
|
font-weight: 700;
|
transform: scaleY(2);
|
}
|
|
.right-text {
|
font-size: 16px;
|
text-align: right;
|
color: #fff;
|
position: absolute;
|
top: 79px;
|
right: 268px;
|
line-height: 23px;
|
font-weight: 700;
|
transform: scaleY(2);
|
}
|
}
|
|
.main {
|
position: relative;
|
width: 100%;
|
height: auto;
|
// display: flex;
|
// flex-direction: column;
|
// justify-content: space-between;
|
padding: 0 0.28rem 0.19rem;
|
z-index: 99;
|
|
.main-top {
|
width: 100%;
|
|
// background-color: #fff;
|
margin-bottom: 0.29rem;
|
background-image: url("~@/assets/images/border_prodline.png");
|
background-size: 100% 100%;
|
position: relative;
|
|
.main-top_ly {
|
width: 95%;
|
margin: 0 auto;
|
position: relative;
|
height: 526px;
|
}
|
|
.prodline {
|
width: 95%;
|
display: block;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
height: 225px;
|
}
|
|
.prodline_op35 {
|
position: absolute;
|
top: 246px;
|
left: 106px;
|
width: 40px;
|
z-index: 0;
|
}
|
.prodline_op325 {
|
position: absolute;
|
top: 254px;
|
left: 108px;
|
width: 38px;
|
height: 63px;
|
}
|
|
.euip {
|
width: 95%;
|
position: absolute;
|
top: -1.59rem;
|
left: 1.28rem;
|
}
|
|
.OP05 {
|
top: -122px;
|
left: -223px;
|
}
|
|
.OP10,
|
.OP40 {
|
top: -133px;
|
left: -145px;
|
height: 904px;
|
}
|
|
.OP20 {
|
top: -95px;
|
left: -77px;
|
width: 86%;
|
}
|
|
.OP30 {
|
top: -152px;
|
left: -226px;
|
width: 2061px;
|
height: 923px;
|
}
|
|
.OP35 {
|
top: -151px;
|
left: -182px;
|
width: 100%;
|
z-index: 999;
|
}
|
|
.OP50 {
|
top: -108px;
|
left: 11px;
|
width: 90%;
|
}
|
|
.OP60 {
|
top: -178px;
|
left: -31px;
|
width: 100%;
|
}
|
|
.OP70 {
|
top: -175px;
|
left: 23px;
|
width: 101%;
|
}
|
|
.unit {
|
top: -113px;
|
left: 86px;
|
transform: scale(1.2);
|
}
|
|
.OP80 {
|
top: -1.95rem;
|
left: 1.98rem;
|
}
|
|
// img:nth-child(2) {
|
// width:100%;
|
// top: -2.05rem;
|
// left: 1.07rem;
|
// }
|
}
|
|
.main-bottom {
|
height: 336px;
|
display: flex;
|
justify-content: center;
|
.border_left1 {
|
width: 284px;
|
margin-right: 20px;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.border_left2 {
|
width: 244px;
|
margin-right: 20px;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.border_middle {
|
width: 720px;
|
margin-right: 20px;
|
border: 0 !important;
|
// background-image: url("~@/assets/images/border_middle.png");
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.border_right1 {
|
width: 244px;
|
margin-right: 20px;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.border_right2 {
|
width: 284px;
|
border: 0 !important;
|
background-image: url("~@/assets/images/border_left1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
|
.echarts-box {
|
height: auto;
|
border: 2px solid #3a45de;
|
|
.echarts-title {
|
font-size: 20px;
|
height: 69px;
|
padding-top: 20px;
|
margin: 0 0 0 0;
|
font-weight: 700;
|
color: #00f8c6;
|
text-align: center;
|
border-bottom: 2px solid #0739a3;
|
}
|
}
|
|
.echarts-box:nth-child(4) {
|
position: relative;
|
|
.pie-label-left {
|
position: absolute;
|
bottom: 10px;
|
left: 0;
|
color: white;
|
font-size: 16px;
|
font-weight: 300;
|
width: 54%;
|
text-align: center;
|
}
|
|
.pie-label-right {
|
position: absolute;
|
bottom: 10px;
|
right: 0;
|
color: #fff;
|
color: white;
|
font-size: 16px;
|
width: 54%;
|
text-align: center;
|
}
|
}
|
|
.box-container {
|
width: 100%;
|
// height: 2.6rem;
|
height: 236px;
|
// background-color: rgb(196, 231, 178);
|
}
|
|
.bgi {
|
background-image: url("~@/assets/bg1.png");
|
background-size: contain;
|
background-repeat: no-repeat;
|
background-position: center center;
|
}
|
}
|
}
|
}
|
|
.box11 {
|
color: #fff;
|
margin: 10px 0;
|
text-align: center;
|
font-size: 15px;
|
}
|
.box12 {
|
margin: 0 0.13rem;
|
height: 0.13rem;
|
background-color: #f14158;
|
}
|
|
.OP88,
|
.OP89,
|
.OP90 {
|
position: absolute;
|
width: 20px;
|
}
|
#animatedImage {
|
position: absolute;
|
top: 70.5%;
|
left: 75px;
|
}
|
.hidden {
|
display: none; /* 隐藏元素 */
|
}
|
|
// .ring-container {
|
// position: relative;
|
// width: 85px;
|
// height: 85px;
|
// display: flex;
|
// justify-content: center;
|
// align-items: center;
|
// }
|
|
// .outer-ring {
|
// position: absolute;
|
// width: 100%;
|
// height: 100%;
|
// border-radius: 50%;
|
// background: transparent;
|
// border: 1px solid #3498db; /* 外环颜色 */
|
// }
|
|
// .inner-ring {
|
// position: absolute;
|
// width: 80%;
|
// height: 80%;
|
// border-radius: 50%;
|
// background: transparent;
|
// box-shadow: inset 0 0 30px #084b71;
|
// border: 1px solid #3c5da9;
|
// }
|
|
// .quan1{
|
// position: absolute;
|
// top: 142px;
|
// left: 19px;
|
// }
|
|
.quan1 {
|
position: absolute;
|
background-size: 100% 100%;
|
content: "";
|
width: 125px;
|
height: 118px;
|
z-index: -1;
|
top: 117px;
|
left: 3px;
|
transform: scaleY(2);
|
border-radius: 100%;
|
background-image: url("@/assets/images/quan.png"); /* 替换为您的背景图路径 */
|
background-size: cover; /* 或使用 contain，根据需要选择 */
|
background-repeat: no-repeat;
|
background-size: 95%;
|
}
|
|
.quan2 {
|
position: absolute;
|
background-size: 100% 100%;
|
content: "";
|
width: 125px;
|
height: 118px;
|
z-index: -1;
|
top: 117px;
|
left: 120px;
|
transform: scaleY(2);
|
border-radius: 100%;
|
background-image: url("@/assets/images/quan.png"); /* 替换为您的背景图路径 */
|
background-size: cover; /* 或使用 contain，根据需要选择 */
|
background-repeat: no-repeat;
|
background-size: 95%;
|
}
|
.box100 {
|
position: absolute;
|
left: 25%;
|
top: 35%;
|
width: 67px;
|
z-index: 9999;
|
}
|
|
.box200 {
|
position: absolute;
|
left: 4%;
|
top: 48%;
|
width: 77px;
|
z-index: 9999;
|
}
|
.box300 {
|
position: absolute;
|
left: 44%;
|
top: 49%;
|
width: 75px;
|
z-index: 9999;
|
}
|
.title1 {
|
transform: scaleY(2);
|
font-size: 12px;
|
display: block;
|
margin-top: 7px;
|
}
|
.zuozi {
|
position: absolute;
|
top: 10px;
|
left: 10px;
|
}
|
.line100 {
|
position: absolute;
|
left: 5px;
|
top: 64%;
|
height: 18px;
|
}
|
</style>
|
