From 62ec1f19c3444695e21f1fe97472261ce3082075 Mon Sep 17 00:00:00 2001
From: liuying <1427574514@qq.com>
Date: 周一, 11 11月 2024 13:39:59 +0800
Subject: [PATCH] 大屏
---
yiqi_screen/src/components/Content.vue | 446 +++++++++++++++++++++++++++++++++++--------------------
1 files changed, 282 insertions(+), 164 deletions(-)
diff --git a/yiqi_screen/src/components/Content.vue b/yiqi_screen/src/components/Content.vue
index e657937..b0010f1 100644
--- a/yiqi_screen/src/components/Content.vue
+++ b/yiqi_screen/src/components/Content.vue
@@ -1,47 +1,71 @@
<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>
+ <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>
+ <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
+ 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 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" />
+ <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">
@@ -55,29 +79,16 @@
</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="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>
@@ -87,7 +98,7 @@
style="
margin: 0 0.13rem;
height: 0.13rem;
- background-color: #a7cf29;
+ background-color: #e6e705;
"
></div>
<div
@@ -102,23 +113,30 @@
<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>
+ <span
+ v-if="
+ produceStatisData.currentShiftPlanNum ||
+ produceStatisData.currentShiftPlanNum == 0
+ "
+ >/</span
+ >
<!-- 褰撳墠鐝粍璁″垝鐢熶骇鏁伴噺 -->
- {{
- produceStatisData.currentShiftPlanNum
- }}
+ {{ 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">
@@ -142,7 +160,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,
@@ -246,13 +264,15 @@
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) {
+ equipmentData.push(item);
}
- })
+ });
this.equipmentStatusData = equipmentData;
this.getImageColor(data);
} catch (error) {
@@ -314,6 +334,38 @@
}
},
},
+ 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)
@@ -321,78 +373,110 @@
};
</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 {
+ font-family: Source Han Sans CN;
display: flex;
- vertical-align: middle;
- align-items: center;
- color: #41c7de;
- font-size: 0.38rem;
+ 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;
- .imgTitle{
- width: 0.7rem;
- margin-right: .2rem;
+
+ 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: 20px;
color: #fff;
position: absolute;
- top: 1.15rem;
- left: 5rem;
+ top: 63px;
+ left: 37px;
+ width: 368px;
+ text-align: right;
+ line-height: 48px;
+ font-weight: 700;
+ letter-spacing: -2px;
}
.right-text {
- font-size: 0.19rem;
+ font-size: 18px;
text-align: right;
color: #fff;
position: absolute;
- top: 1.15rem;
- right: 5.3rem;
+ top: 63px;
+ right: 268px;
+ line-height: 48px;
+ font-weight: 700;
+ letter-spacing: -2px;
}
}
.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: 6.8rem;
+ }
+
.prodline {
- width:95%;
+ width: 95%;
display: block;
position: absolute;
top: 50%;
@@ -401,124 +485,129 @@
}
.prodline_op35 {
- position: absolute;
- top: 2.72rem;
- left: 4.3rem;
- width:1.8%;
+ display: none;
+ // position: absolute;
+ // top: 2.72rem;
+ // left: 4.3rem;
+ // width:1.8%;
}
.euip {
- width:95%;
+ width: 95%;
position: absolute;
top: -1.59rem;
left: 1.28rem;
-
}
- .OP05{
- top: -1.58rem;
- left: 0.12rem;
+ .OP05 {
+ top: -76px;
+ left: -220px;
}
- .OP10,.OP40{
- top: -1.48rem;
- left: 0.5rem;
+ .OP10,
+ .OP40 {
+ top: -90px;
+ left: -236px;
+ width: 112%;
+ height: 902px;
}
- .OP20{
- top: -1.8rem;
- left: 0.6rem;
+ .OP20 {
+ top: -95px;
+ left: 31px;
+ width: 86%;
+ transform: scale(1.5, 1.2);
}
- .OP30{
- top: -2.05rem;
- left: 0.3rem;
+ .OP30 {
+ top: -183px;
+ left: -247px;
+ width: 2061px;
+ height: 923px;
}
- .OP35{
- top: -1.8rem;
- left: 0.2rem;
+ .OP35 {
+ top: -104px;
+ left: -182px;
}
- .OP50{
- top: -1.69rem;
- left: 1.05rem;
+ .OP50 {
+ top: -168px;
+ left: -75px;
+ width: 100%;
}
- .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{
+ .OP80,
+ .unit {
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: 320px;
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;
}
@@ -527,14 +616,15 @@
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;
+
}
}
@@ -543,30 +633,31 @@
.pie-label-left {
position: absolute;
- bottom: 0.1rem;
- left: 0.1rem;
- color: #fff;
- font-size: 0.2rem;
- font-weight: 300;
- width: 44%;
- text-align: center;
+ 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.3rem;
- color: #fff;
- font-size: 0.2rem;
- font-weight: 300;
- width: 44%;
- text-align: center;
+ bottom: 10px;
+ right: 0;
+ color: #fff;
+ 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);
}
@@ -579,4 +670,31 @@
}
}
}
-</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; /* 闅愯棌鍏冪礌 */
+}
+</style>
--
Gitblit v1.9.3