From 0630126012170da25291d55f0a1bd3130e64f434 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 28 4月 2025 15:45:28 +0800
Subject: [PATCH] 一汽大屏 未提交的代码
---
yiqi_screen/src/components/Content.vue | 586 +++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 436 insertions(+), 150 deletions(-)
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index f355ee9..9c43bf8 100644
--- a/yiqi_screen/src/components/Content.vue
+++ b/yiqi_screen/src/components/Content.vue
@@ -1,76 +1,131 @@
<template>
<div class="container">
+ <img alt="guang" src="~@/assets/images/guang.png" class="guang" />
+
<div class="header">
- <div class="title">4GC涓変唬鍙戝姩鏈鸿繛鏉嗙嚎</div>
+ <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>{{ nowTime }}</div>
+ <div>瀹夊叏鐢熶骇:{{ produceStatisData.currentSafeProductionDay }}澶�</div>
</div>
<div class="right-text">
- <div style="line-height: 30px">
- 褰撳墠鐝:{{ produceStatisData.currentTeamName }}
- </div>
- <!-- style="padding-left:25px" -->
+ <div>褰撳墠鐝:{{ 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" />
+ <div class="main-top_ly">
+ <!-- 浜х嚎甯冨眬鍥� -->
+ <img
+ src="~@/assets/images/prodline_all.png"
+ class="prodline"
+ alt="line"
+ />
- <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/9.png" class="line100" alt="line100" />
+ <p style="color: white;"> {{equipmentStatusData}} </p> -->
- <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 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">璁惧杩愯鐘舵�佺粺璁″浘</div>
+ <div class="echarts-title">
+ <span class="title1"> 璁惧杩愯鐘舵�佺粺璁″浘 </span>
+ </div>
<EquipmentRunStatus :equipmentStatusData="equipmentStatusData" />
</div>
<div class="echarts-box border_left2">
- <div class="echarts-title">浜х嚎鍋ュ悍鑳藉姏鍥�</div>
+ <div class="echarts-title">
+ <span class="title1"> 浜х嚎鍋ュ悍鑳藉姏鍥� </span>
+ </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;
- "
- >
+ <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: #f14158;
- "
- ></div>
- <div
- style="
- margin: 0 0.13rem;
- height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
</div>
@@ -80,7 +135,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
<div
@@ -93,25 +148,49 @@
</div>
</div>
<div class="echarts-box border_right1">
- <div class="echarts-title">鏈彮/鏈湀浜ч噺缁熻</div>
+ <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
- }}
+ <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
- }}
+ <span
+ v-if="
+ produceStatisData.currentMonthPlanNum ||
+ produceStatisData.currentMonthPlanNum == 0
+ "
+ >/</span
+ >
+ {{ produceStatisData.currentMonthPlanNum }}
</div>
</div>
<div class="echarts-box border_right2">
- <div class="echarts-title">鐢熶骇瀹屾垚瓒嬪娍</div>
+ <div class="echarts-title">
+ <span class="title1"> 鐢熶骇瀹屾垚瓒嬪娍 </span>
+ </div>
<ProductionCompletionTrend
:produceCompletionData="produceCompletionData"
/>
@@ -131,7 +210,7 @@
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,
@@ -235,15 +314,21 @@
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)
+ 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);
}
@@ -259,7 +344,8 @@
this.imageColor[item.workingProcedure] = result[0].color;
}
});
- // console.log(this.imageColor, "getImageColor");
+ console.log(5555555555);
+ console.log(this.imageColor, "getImageColor");
},
// 鑾峰彇璐ㄩ噺鏁版嵁
async getQualityData() {
@@ -303,6 +389,10 @@
}
},
},
+ mounted() {
+
+ },
+
// beforeDestroy(){
// clearInterval(this.dataTimer)
// clearInterval(this.dateTimer)
@@ -310,197 +400,254 @@
};
</script>
-<style lang="scss" scoped>
+<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;
- position: relative;
.title {
- color: #41c7de;
- font-size: 0.38rem;
+ font-family: Source Han Sans CN;
+ display: flex;
+ vertical-align: middle;
+ align-items: center;
+ font-size: 40px;
font-weight: 700;
position: absolute;
- top: .31rem;
+ 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: 0.19rem;
+ font-size: 16px;
color: #fff;
position: absolute;
- top: 1.15rem;
- left: 5rem;
+ top: 79px;
+ left: 37px;
+ width: 368px;
+ text-align: right;
+ line-height: 23px;
+ font-weight: 700;
+ transform: scaleY(2);
}
.right-text {
- font-size: 0.19rem;
+ font-size: 16px;
text-align: right;
color: #fff;
position: absolute;
- top: 1.15rem;
- right: 5.3rem;
+ 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%;
- 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;
+ background-size: 100% 100%;
position: relative;
+
+ .main-top_ly {
+ width: 95%;
+ margin: 0 auto;
+ position: relative;
+ height: 526px;
+ }
+
.prodline {
- width:95%;
+ width: 95%;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ height: 225px;
}
.prodline_op35 {
position: absolute;
- top: 2.72rem;
- left: 4.3rem;
- width:1.8%;
+ top: 246px;
+ left: 106px;
+ width: 40px;
+ z-index: 0;
+ }
+ .prodline_op325 {
+ position: absolute;
+ top: 254px;
+ left: 108px;
+ width: 38px;
+ height: 63px;
}
.euip {
- width:95%;
+ width: 95%;
position: absolute;
top: -1.59rem;
left: 1.28rem;
-
}
- .OP05{
- top: -1.58rem;
- left: 0.12rem;
+ .OP05 {
+ top: -122px;
+ left: -223px;
}
- .OP10,.OP40{
- top: -1.48rem;
- left: 0.5rem;
+ .OP10,
+ .OP40 {
+ top: -133px;
+ left: -145px;
+ height: 904px;
}
- .OP20{
- top: -1.8rem;
- left: 0.6rem;
+ .OP20 {
+ top: -95px;
+ left: -77px;
+ width: 86%;
}
- .OP30{
- top: -2.05rem;
- left: 0.3rem;
+ .OP30 {
+ top: -152px;
+ left: -226px;
+ width: 2061px;
+ height: 923px;
}
- .OP35{
- top: -1.8rem;
- left: 0.2rem;
+ .OP35 {
+ top: -151px;
+ left: -182px;
+ width: 100%;
+ z-index: 999;
}
- .OP50{
- top: -1.69rem;
- left: 1.05rem;
+ .OP50 {
+ top: -108px;
+ left: 11px;
+ width: 90%;
}
- .OP60{
- top: -1.65rem;
- left: 1.5rem;
+ .OP60 {
+ top: -178px;
+ left: -31px;
+ width: 100%;
}
- .OP70{
- top: -1.52rem;
- left: 2.15rem;
+ .OP70 {
+ top: -175px;
+ left: 23px;
+ width: 101%;
}
- .OP80,.unit{
+ .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;
+ // left: 1.07rem;
// }
}
.main-bottom {
- height: auto;
+ height: 336px;
display: flex;
- // background-color: skyblue;
-
+ justify-content: center;
.border_left1 {
- width:3.84rem;
- margin-right: .14rem;
+ width: 284px;
+ margin-right: 20px;
border: 0 !important;
background-image: url("~@/assets/images/border_left1.png");
- background-size: 107.5% 104%;
- background-position: -0.14rem -0.13rem;
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_left2 {
- width:3.02rem;
- margin-right: .16rem;
+ width: 244px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_left2.png");
- background-size: 109.3% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_middle {
- width:6.09rem;
- margin-right: .16rem;
+ width: 720px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_middle.png");
- background-size: 102.7% 104%;
- background-position: -0.14rem -0.13rem;
+ // 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:3.75rem;
- margin-right: .15rem;
+ width: 244px;
+ margin-right: 20px;
border: 0 !important;
- background-image: url("~@/assets/images/border_right1.png");
- background-size: 107.5% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
.border_right2 {
- width:6.09rem;
+ width: 284px;
border: 0 !important;
- background-image: url("~@/assets/images/border_right2.png");
- background-size: 104.4% 104%;
- background-position: -0.14rem -0.13rem;
+ background-image: url("~@/assets/images/border_left1.png");
+ background-size: 100% 100%;
background-repeat: no-repeat;
}
@@ -509,14 +656,14 @@
border: 2px solid #3a45de;
.echarts-title {
- font-size: 0.18rem;
- height: 0.75rem;
- padding: 0.31rem 0 0.26rem;
- margin: 0 0.23rem;
+ font-size: 20px;
+ height: 69px;
+ padding-top: 20px;
+ margin: 0 0 0 0;
font-weight: 700;
- color: #00afb9;
+ color: #00f8c6;
text-align: center;
- border-bottom: 2px solid #3c37bf;
+ border-bottom: 2px solid #0739a3;
}
}
@@ -525,26 +672,31 @@
.pie-label-left {
position: absolute;
- bottom: 0.1rem;
- left: 0.7rem;
- color: #fff;
- font-size: 0.2rem;
+ bottom: 10px;
+ left: 0;
+ color: white;
+ font-size: 16px;
font-weight: 300;
+ width: 54%;
+ text-align: center;
}
.pie-label-right {
position: absolute;
- bottom: 0.1rem;
- right: 0.7rem;
+ bottom: 10px;
+ right: 0;
color: #fff;
- font-size: 0.2rem;
- font-weight: 300;
+ color: white;
+ font-size: 16px;
+ width: 54%;
+ text-align: center;
}
}
.box-container {
width: 100%;
- height: 2.6rem;
+ // height: 2.6rem;
+ height: 236px;
// background-color: rgb(196, 231, 178);
}
@@ -557,4 +709,138 @@
}
}
}
-</style>
\ No newline at end of file
+
+.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>
--
Gitblit v1.9.3