DF22001YiQi.git

			@@ -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>