app-station-control-frontend_v1/pages/equipment-monitoring/components/automatic.vue

<template>
	<view class="main_automatic">
		<view class="main_automatic_left">
			<view class="main_automatic_left_one">
				<SubTitle title="信号状态" titleEng="Signal status"></SubTitle>
				<view>
					<view class="plc_box">
						<image class="plc_img_wifi" src="../../../static/equipment/info1.png" mode=""></image>
						<image class="plc_img_code"
							:src="robotInfoVo.walkServo|| 1? '/static/equipment/signal1.png': '/static/equipment/signal2.png'">
						</image>
						<view class=" plc_title">
							PLC通信
						</view>
					</view>
				</view>
			</view>
			<view class="main_automatic_left_two">
				<SubTitle title="机器人模式" titleEng="Robot Mode"></SubTitle>
				<view class="robot_mode">
					<view class="robot_mode_box" :class="robotInfoVo.exchangeMode == 2?'isactive':''">
						<image class="robot_mode_box_img" :src="robotInfoVo.exchangeMode == 2?'/static/equipment/greenpie.png':'/static/equipment/gray.png'" mode=""></image>
						自动
					</view>
					<view class="robot_mode_box" :class="robotInfoVo.exchangeMode == 1?'isactive':''">
						<image class="robot_mode_box_img" :src="robotInfoVo.exchangeMode == 1?'/static/equipment/greenpie.png':'/static/equipment/gray.png'" mode=""></image>
						手动
					</view>
					<view class="robot_mode_box" :class="robotInfoVo.exchangeMode == 3?'isactive':''">
						<image class="robot_mode_box_img" :src="robotInfoVo.exchangeMode == 3?'/static/equipment/greenpie.png':'/static/equipment/gray.png'" mode=""></image>
						单步
					</view>
					<view class="robot_mode_box" :class="robotInfoVo.exchangeMode == 0?'isactive':''">
						<image class="robot_mode_box_img" :src="robotInfoVo.exchangeMode == 0?'/static/equipment/greenpie.png':'/static/equipment/gray.png'" mode=""></image>
						无效
					</view>
				</view>
			</view>
			<view class="main_automatic_left_three">
				<SubTitle title="机器人状态" titleEng="Robot information"></SubTitle>
				<view class="robot_code">
					<view class="robot_code_box">
						<image class="robot_code_box_img" :src= "robotInfoVo.robotState === 1?'/static/equipment/status2-active.png':'/static/equipment/status2.png'" mode=""></image>
						<view class="robot_code_title">
							<image class="robot_code_title_img":src= "robotInfoVo.robotState === 1?'/static/equipment/green.png':'/static/equipment/default.png'" mode="">
							</image>
							就绪
						</view>
					</view>
					<view class="robot_code_box">
						<image class="robot_code_box_img":src= "robotInfoVo.robotState === 2?'/static/equipment/status1-active.png':'/static/equipment/status1.png'" mode="">
						</image>
						<view class="robot_code_title">
							<image class="robot_code_title_img" :src= "robotInfoVo.robotState === 2?'/static/equipment/blue.png':'/static/equipment/default.png'" mode="">
							</image>
							运行
						</view>
					</view>
					<view class="robot_code_box">
						<image class="robot_code_box_img" :src= "robotInfoVo.robotState === 3?'/static/equipment/status3-active.png':'/static/equipment/status3.png'" mode="">
						</image>
						<view class="robot_code_title">
							<image class="robot_code_title_img"  :src= "robotInfoVo.robotState === 3?'/static/equipment/blue.png':'/static/equipment/default.png'" mode="">
							</image>
							完成
						</view>
					</view>
					<view class="robot_code_box">
						<image class="robot_code_box_img" :src= "robotInfoVo.robotState === 4?'/static/equipment/status4-active.png':'/static/equipment/status4.png'" mode="">
						</image>
						<view class="robot_code_title content-class-title">
							<image class="robot_code_title_img" :src= "robotInfoVo.robotState === 4?'/static/equipment/red.png':'/static/equipment/default.png'" mode=""></image>
							故障
						</view>
					</view>
					<view class="robot_code_box">
						<image class="robot_code_box_img":src= "robotInfoVo.robotState === 5?'/static/equipment/status5-active.png':'/static/equipment/status5.png'" mode="">
						</image>
						<view class="robot_code_title content-class-title">
							<image class="robot_code_title_img" :src= "robotInfoVo.robotState === 5?'/static/equipment/red.png':'/static/equipment/default.png'" mode=""></image>
							中止
						</view>
					</view>
				</view>
				<PannelItem show="true" words="急停状态" :status="robotInfoVo.emergencyMode ? '急停' : '未急停'"
					:flag="!robotInfoVo.emergencyMode" style="margin-bottom: 20px;" class="jerk"/>
				<PannelItem show="true" words="暂停状态" :status="robotInfoVo.pause ? '暂停' : '未暂停'" handle="true"
					@ExchangeMessage='ExchangeMessage' :flag="!robotInfoVo.pause" class="jerk"/>
			</view>
		</view>
		<view class="main_automatic_right">
			<view class="main_automatic_right_one">
				<SubTitle title="运行参数" titleEng="Operating parameters"></SubTitle>
				<view class="main_automatic_right_speed">
					<view class="speed_box">
						<span class="speed_title">速度</span>
						<view class="speed">
							<view class="p">
								行走：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.xAxis,5)  || '0'}}</text><text>mm/s</text>
							</view>
							<view class="p">
								伸缩：<text class="text">{{this.$checks.KeepDecimals(robotInfoVo.yAxis,5)  || '0'}}</text><text>mm/s</text>
							</view>
							<view class="p">
								举升：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.zAxis,5)  || '0'}}</text><text>mm/s</text>
							</view>
							<view class="p">
								旋转：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.rAxis,5) || '0'}}</text><text>mm/s</text>
							</view>
						</view>
					</view>

					<view class="speed_box">
						<span class="speed_title">位置</span>
						<view class="speed">
							<view class="p">
								行走：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.xDpmt,5) || '0'}}</text><text>mm</text>
							</view>
							<view class="p">
								伸缩：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.yDpmt,5) || '0'}}</text><text>mm</text>
							</view>
							<view class="p">
								举升：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.zDpmt,5)  || '0'}}</text><text>mm</text>
							</view>
							<view class="p">
								旋转：<text class="text">{{ this.$checks.KeepDecimals(robotInfoVo.rDpmt,5)  || '0'}}</text><text>mm</text>
							</view>
						</view>
					</view>
				</view>

			</view>
			<view class="main_automatic_right_two">
				<SubTitle title="" titleEng=""></SubTitle>
				<image class="nodata" src="../../../static/equipment/nodata.png" mode=""></image>
			</view>
		</view>
		<!-- 顶部公共提示信息 -->
		<uni-popup ref="Exchangepopup" type="message">
			<uni-popup-message :type="popupType" :message="popupMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 顶部提示信息结束-->
	</view>
</template>

<script>
	export default {
		name:'automatic',
		props: ["robotInfoVo",'robotcode'],
		data() {
			return {
				isSlecte: true,
				popupType:'',
				popupMessage:'',
			}
		},
		mounted() {
		},
		methods: {
			//顶部公共消息提示
			ExchangeMessage(type, message) {
				this.popupType = type
				this.popupMessage = message?message:'后端接口404错误!'
				this.$refs.Exchangepopup.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main_automatic {
		display: flex;

		.main_automatic_left {
			margin-right: 16px;

			.main_automatic_left_one {
				width: 512px;
				height: 157px;
				background: #111827;

				.plc_box {
					position: relative;
					width: 100px;
					height: 129px;
					text-align: center;
					margin-top: 20.5px;

					.plc_img_wifi {
						width: 68px;
						height: 58px;
					}

					.plc_img_code {
						position: absolute;
						width: 14px;
						height: 14px;
						top: 46px;
						left: 70px;
					}

					.plc_title {
						font-size: 14px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #636C97;
						margin-top: 5px;
					}
				}
			}

			.main_automatic_left_two {
				width: 512px;
				height: 106px;
				background: #111827;
				margin-top: 16px;
				margin-bottom: 16px;

				.robot_mode {
					display: flex;
					width: 512px;
					height: 82px;
					align-items: center;
					padding-left: 20px;

					.robot_mode_box {
						width: 106px;
						height: 40px;
						border: 1px solid #334568;
						position: relative;
						font-size: 14px;
						color: #636C97;
						line-height: 40px;
						margin-right: 13px;

						&::before {
							content: '';
							width: 2px;
							height: 2px;
							position: absolute;
							background: #FFFFFF;
							left: -2px;
							top: -2px;
						}

						.robot_mode_box_img {
							width: 24px;
							height: 24px;
							vertical-align: middle;
							margin-right: 4px;
							margin-left: 15px;
						}
					}

					.isactive {
						color: #91FDB9;
					}
				}
			}

			.main_automatic_left_three {
				width: 512px;
				height: 367px;
				background: #111827;

				.robot_code {
					height: 90px;
					display: flex;
					justify-content: space-between;
					margin: 20px 0px;

					// border: 1px solid;
					.robot_code_box {
						width: 100px;
						text-align: center;

						.robot_code_box_img {
							width: 54px;
							height: 54px;
						}

						.robot_code_title {
							font-size: 14px;
							margin-top: 10px;

							.robot_code_title_img {
								width: 15px;
								height: 15px;
								vertical-align: middle;
								margin-right: 6px;
							}
						}

						.content-class-title {
							color: #636C97;
						}
					}
				}
			}
		}

		.main_automatic_right {
			.main_automatic_right_one {
				width: 512px;
				height: 220px;
				background: #111827;
				margin-bottom: 16px;

				.main_automatic_right_speed {
					display: flex;
					padding: 20px;
					justify-content: space-between;
					.speed_box {
						height: 150px;
						width: 250px;
						.speed_title {
							font-size: 16px;
							color: #A8ACC4;
							margin-bottom: 15px;
							display: inline-block;
							position: relative;
							top: -5px;
						}

						.speed {

							.p {
								font-size: 14px;
								font-weight: 500;
								color: #636C97;
								margin-bottom: 10px;

								.text {
									color: #fff;
									display: inline-block;
								}
							}
						}
					}
				}
			}

			.main_automatic_right_two {
				width: 512px;
				height: 426px;
				background: #111827;
				text-align: center;

				.nodata {
					width: 274px;
					margin-top: 80px;
				}
			}
		}
		.jerk{
			padding-left: 20px;
			padding-right: 20px;
			width: auto;
		}
	}
	::v-deep .uni-popup-message__box{
		    height: 20px;
		    line-height: 11px;
	}
</style>