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 | 318 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 232 insertions(+), 86 deletions(-)
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index b0010f1..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>
@@ -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,35 +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(){
@@ -424,28 +451,28 @@
}
.left-text {
- font-size: 20px;
+ font-size: 16px;
color: #fff;
position: absolute;
- top: 63px;
+ top: 79px;
left: 37px;
width: 368px;
text-align: right;
- line-height: 48px;
+ line-height: 23px;
font-weight: 700;
- letter-spacing: -2px;
+ transform: scaleY(2);
}
.right-text {
- font-size: 18px;
+ font-size: 16px;
text-align: right;
color: #fff;
position: absolute;
- top: 63px;
+ top: 79px;
right: 268px;
- line-height: 48px;
+ line-height: 23px;
font-weight: 700;
- letter-spacing: -2px;
+ transform: scaleY(2);
}
}
@@ -472,7 +499,7 @@
width: 95%;
margin: 0 auto;
position: relative;
- height: 6.8rem;
+ height: 526px;
}
.prodline {
@@ -482,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 {
@@ -500,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 {
@@ -549,8 +584,13 @@
width: 101%;
}
- .OP80,
.unit {
+ top: -113px;
+ left: 86px;
+ transform: scale(1.2);
+ }
+
+ .OP80 {
top: -1.95rem;
left: 1.98rem;
}
@@ -563,7 +603,7 @@
}
.main-bottom {
- height: 320px;
+ height: 336px;
display: flex;
justify-content: center;
.border_left1 {
@@ -624,7 +664,6 @@
color: #00f8c6;
text-align: center;
border-bottom: 2px solid #0739a3;
-
}
}
@@ -697,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