<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
|
alt="t10"
|
:src="require(`@/assets/images/10.png`)"
|
class="OP88"
|
id="animatedImage"
|
/>
|
<img
|
alt="t10"
|
:src="require(`@/assets/images/10.png`)"
|
class="OP89"
|
/>
|
<img
|
alt="t10"
|
:src="require(`@/assets/images/10.png`)"
|
class="OP90"
|
/> -->
|
<img
|
alt="t1"
|
v-for="item in equipmentStatusData"
|
:key="item.id"
|
:src="
|
require(`@/assets/images/${imageColor[item.workingProcedure]}/${
|
item.workingProcedure
|
}.png`)
|
"
|
:class="`euip ${item.workingProcedure}`"
|
/>
|
|
<img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
|
<img
|
alt="t3"
|
:src="require(`@/assets/images/${imageColor['OP10']}/OP40.png`)"
|
class="euip OP40"
|
/>
|
<img
|
alt="t4"
|
: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">设备运行状态统计图</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 class="box11">
|
{{ qualityData.qualityType }}
|
</div>
|
<div>
|
<div class="box12"></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 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) {
|
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);
|
}
|
},
|
},
|
mounted() {
|
// var timeline = anime.timeline({
|
// easing: "easeOutExpo", // 运动效果
|
// loop: true, // 设置无限循环
|
// });
|
|
// // 第一个动画：横向移动
|
// timeline
|
// .add({
|
// targets: "#animatedImage",
|
// translateX: 280, // 向右移动280px
|
// duration: 2000, // 动画持续时间
|
// })
|
// // 第二个动画：向下移动
|
// .add({
|
// targets: "#animatedImage",
|
// translateY: 50, // 向下移动50px
|
// duration: 2000, // 动画持续时间
|
// })
|
// // 间隔时间回到初始位置
|
// .add({
|
// targets: "#animatedImage",
|
// translateX: 0, // 回到初始位置
|
// translateY: 0, // 回到初始位置
|
// duration: 0, // 不需要动画
|
// delay: 1000, // 隔断时间1秒
|
// });
|
|
// setTimeout(() => {
|
// timeline.pause(); // 暂停动画
|
// document.getElementById('animatedImage').classList.add('hidden');
|
// }, 8000);
|
},
|
|
// 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 {
|
display: flex;
|
vertical-align: middle;
|
align-items: center;
|
color: #41c7de;
|
font-size: 40px;
|
font-weight: 700;
|
position: absolute;
|
top: 12px;
|
left: 50%;
|
transform: translate(-50%);
|
letter-spacing: 8px;
|
.imgTitle {
|
width: 117px;
|
margin-right: 69px;
|
}
|
}
|
|
.left-text {
|
font-size: 18px;
|
color: #fff;
|
position: absolute;
|
top: 57px;
|
left: 38px;
|
width: 372px;
|
text-align: right;
|
line-height: 48px;
|
font-weight: 700;
|
}
|
|
.right-text {
|
font-size: 18px;
|
text-align: right;
|
color: #fff;
|
position: absolute;
|
top: 57px;
|
right: 268px;
|
line-height: 48px;
|
font-weight: 700;
|
}
|
}
|
|
.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: 6.8rem;
|
}
|
|
.prodline {
|
width: 95%;
|
display: block;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
|
.prodline_op35 {
|
display: none;
|
// position: absolute;
|
// top: 2.72rem;
|
// left: 4.3rem;
|
// width:1.8%;
|
}
|
|
.euip {
|
width: 95%;
|
position: absolute;
|
top: -1.59rem;
|
left: 1.28rem;
|
}
|
|
.OP05 {
|
top: -76px;
|
left: -220px;
|
}
|
|
.OP10,
|
.OP40 {
|
top: -90px;
|
left: -236px;
|
width: 112%;
|
height: 902px;
|
}
|
|
.OP20 {
|
top: -95px;
|
left: 31px;
|
width: 86%;
|
transform: scale(1.5, 1.2);
|
}
|
|
.OP30 {
|
top: -183px;
|
left: -247px;
|
width: 2061px;
|
height: 923px;
|
}
|
|
.OP35 {
|
top: -104px;
|
left: -182px;
|
}
|
|
.OP50 {
|
top: -168px;
|
left: -75px;
|
width: 100%;
|
}
|
|
.OP60 {
|
top: -178px;
|
left: -31px;
|
width: 100%;
|
}
|
|
.OP70 {
|
top: -175px;
|
left: 23px;
|
width: 101%;
|
}
|
|
.OP80,
|
.unit {
|
top: -1.95rem;
|
left: 1.98rem;
|
}
|
|
// img:nth-child(2) {
|
// width:100%;
|
// top: -2.05rem;
|
// left: 1.07rem;
|
// }
|
}
|
|
.main-bottom {
|
// height: auto;
|
height: 320px;
|
// border: 1px solid red;
|
display: flex;
|
// background-color: skyblue;
|
|
.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 #04279d;
|
}
|
}
|
|
.echarts-box:nth-child(4) {
|
position: relative;
|
|
.pie-label-left {
|
position: absolute;
|
bottom: 10px;
|
left: 0.1rem;
|
color: #d9dbe6;
|
font-size: 18px;
|
font-weight: 300;
|
width: 44%;
|
text-align: center;
|
}
|
|
.pie-label-right {
|
position: absolute;
|
bottom: 10px;
|
right: 0.3rem;
|
color: #fff;
|
color: #d9dbe6;
|
font-size: 18px;
|
width: 44%;
|
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; /* 隐藏元素 */
|
}
|
</style>
|
