From 2b05362eba2f989b7857349cc9a3a1c12f8181b6 Mon Sep 17 00:00:00 2001
From: schangxiang@126.com <schangxiang@126.com>
Date: 周五, 26 9月 2025 11:35:50 +0800
Subject: [PATCH] 222
---
yiqi_screen/src/components/Content.vue | 373 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 261 insertions(+), 112 deletions(-)
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index fbcdc88..9c43bf8 100644
--- a/yiqi_screen/src/components/Content.vue
+++ b/yiqi_screen/src/components/Content.vue
@@ -20,30 +20,59 @@
<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 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
- 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="
@@ -54,14 +83,16 @@
:class="`euip ${item.workingProcedure}`"
/>
- <img alt="t2" src="~@/assets/images/OP35.png" class="prodline_op35" />
<img
- alt="t3"
+ src="~@/assets/images/OP35.png"
+ class="prodline_op325"
+ />
+
+ <img
: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"
/>
@@ -70,15 +101,21 @@
<!-- <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 class="echarts-title">
+ <span class="title1"> 璐ㄩ噺鏁版嵁瓒嬪娍鍥� </span>
+ </div>
<div class="box11">
{{ qualityData.qualityType }}
</div>
@@ -88,7 +125,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
</div>
@@ -98,7 +135,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
<div
@@ -111,7 +148,18 @@
</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">
@@ -140,7 +188,9 @@
</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"
/>
@@ -270,11 +320,15 @@
(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);
}
@@ -290,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() {
@@ -335,37 +390,7 @@
},
},
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(){
@@ -403,10 +428,10 @@
margin-bottom: 0.25rem;
.title {
+ font-family: Source Han Sans CN;
display: flex;
vertical-align: middle;
align-items: center;
- color: #41c7de;
font-size: 40px;
font-weight: 700;
position: absolute;
@@ -414,6 +439,11 @@
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;
@@ -421,26 +451,28 @@
}
.left-text {
- font-size: 18px;
- color: #fff;
- position: absolute;
- top: 57px;
- left: 38px;
- width: 372px;
- text-align: right;
- line-height: 48px;
- font-weight: 700;
+ 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: 18px;
- text-align: right;
- color: #fff;
- position: absolute;
- top: 57px;
- right: 268px;
- line-height: 48px;
- font-weight: 700;
+ font-size: 16px;
+ text-align: right;
+ color: #fff;
+ position: absolute;
+ top: 79px;
+ right: 268px;
+ line-height: 23px;
+ font-weight: 700;
+ transform: scaleY(2);
}
}
@@ -467,7 +499,7 @@
width: 95%;
margin: 0 auto;
position: relative;
- height: 6.8rem;
+ height: 526px;
}
.prodline {
@@ -477,14 +509,22 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ height: 225px;
}
.prodline_op35 {
- display: none;
- // position: absolute;
- // top: 2.72rem;
- // left: 4.3rem;
- // width:1.8%;
+ position: absolute;
+ top: 246px;
+ left: 106px;
+ width: 40px;
+ z-index: 0;
+ }
+ .prodline_op325 {
+ position: absolute;
+ top: 254px;
+ left: 108px;
+ width: 38px;
+ height: 63px;
}
.euip {
@@ -495,41 +535,41 @@
}
.OP05 {
- top: -76px;
- left: -220px;
+ top: -122px;
+ left: -223px;
}
.OP10,
.OP40 {
- top: -90px;
- left: -236px;
- width: 112%;
- height: 902px;
+ top: -133px;
+ left: -145px;
+ height: 904px;
}
.OP20 {
top: -95px;
- left: 31px;
+ left: -77px;
width: 86%;
- transform: scale(1.5, 1.2);
}
.OP30 {
- top: -183px;
- left: -247px;
+ top: -152px;
+ left: -226px;
width: 2061px;
height: 923px;
}
.OP35 {
- top: -104px;
+ top: -151px;
left: -182px;
+ width: 100%;
+ z-index: 999;
}
.OP50 {
- top: -168px;
- left: -75px;
- width: 100%;
+ top: -108px;
+ left: 11px;
+ width: 90%;
}
.OP60 {
@@ -544,8 +584,13 @@
width: 101%;
}
- .OP80,
.unit {
+ top: -113px;
+ left: 86px;
+ transform: scale(1.2);
+ }
+
+ .OP80 {
top: -1.95rem;
left: 1.98rem;
}
@@ -558,12 +603,9 @@
}
.main-bottom {
- // height: auto;
- height: 320px;
- // border: 1px solid red;
+ height: 336px;
display: flex;
- // background-color: skyblue;
-
+ justify-content: center;
.border_left1 {
width: 284px;
margin-right: 20px;
@@ -583,7 +625,7 @@
}
.border_middle {
- width: 720px;
+ width: 720px;
margin-right: 20px;
border: 0 !important;
// background-image: url("~@/assets/images/border_middle.png");
@@ -621,7 +663,7 @@
font-weight: 700;
color: #00f8c6;
text-align: center;
- border-bottom: 2px solid #04279d;
+ border-bottom: 2px solid #0739a3;
}
}
@@ -631,22 +673,22 @@
.pie-label-left {
position: absolute;
bottom: 10px;
- left: 0.1rem;
- color: #d9dbe6;
- font-size: 18px;
+ left: 0;
+ color: white;
+ font-size: 16px;
font-weight: 300;
- width: 44%;
+ width: 54%;
text-align: center;
}
.pie-label-right {
position: absolute;
bottom: 10px;
- right: 0.3rem;
+ right: 0;
color: #fff;
- color: #d9dbe6;
- font-size: 18px;
- width: 44%;
+ color: white;
+ font-size: 16px;
+ width: 54%;
text-align: center;
}
}
@@ -694,4 +736,111 @@
.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