app-station-control-frontend_v1/components/PannelItem/PannelItem.vue

<template>
	<view class="status">
		<view class="circle">
			<image :src="flag?'/static/change/green.png':'/static/change/yellow.png'"></image>
		</view>
		<view class="descript">{{ words }}</view>
		<view class="frame">
			<span :class="[flag?'':'isflag']">{{status || '—'}}</span>
			<view class="shinning"></view>
		</view>
		<view class="submit" v-if="words=='暂停状态'" @click="HandleSwapplc(4)">暂停</view>
		<view class="submit" v-if="words=='暂停状态'" @click="HandleSwapplc(5)">恢复</view>
		
	</view>
</template>

<script>
	export default {
		name: "PannelItem",
		props: ['flag', 'words', 'status'],
		data() {
			return {

			};
		},
		methods: {
			//暂停，恢复
			HandleSwapplc(id) {
				let title=id===4?'暂停机器人':'恢复机器人'
				let that=this
				uni.showModal({
					title:`请确认${title}?`,
					content:'',
					success: function(res) {
						if (res.confirm) {
							that.$http.EditSwapplc(id+'').then(res=>{
								if(res.code === 0){
									that.$emit('ExchangeMessage','success',id===4?'暂停指令下发成功!':'恢复指令下发成功!')
								}else{
									that.$emit('ExchangeMessage','error',id===4?'暂停指令下发失败!':'恢复指令下发失败!')
								}
								
							})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.submit{
		width: 60px;
		height: 32px;
		text-align: center;
		background: #91FDB9;
		border-radius: 2px;
		line-height: 32px;
		margin-left: 16px;
		font-size: 14px;
		font-weight: 400;
		color: #000000;
	}
	.status {
		display: flex;
		width: 100%;
		align-items: center;
		.circle {
			width: 24px;
			height: 24px;
			margin-right: 4px;
			image {
				width: 24px;
				height: 24px;
			}
		}
	
		.descript {
			font-size: 14px;
			font-weight: 500;
			width: 78px;
			color: rgba(153,174,197,0.65);
			text-shadow: 0px 0px 4px rgba(39,69,201,0.5);
		}
		.carTitle{
			width: 68px !important;
		}
		.frameText {
			color: #C7D2DF;
			text-shadow: 0px 0px 4px #0027D8;
		}
	
		.frame {
			flex: 1;
			position: relative;
			height: 32px;
			text-indent: 15px;
			font-size: 14px;
			font-weight: 500;
			color: #91FDB9;
			line-height: 32px;
			text-shadow: 0px 0px 4px #0027D8;
			border: 1px solid #334568;
			box-sizing: border-box;
	
			.shinning {
				position: absolute;
				border: 1px solid #c9f8ff;
				border-radius: 1px;
				left: -1px;
				top: -1px;
			}
	
			.editCar {
				cursor: pointer;
				position: absolute;
				right: 20px;
				top: 3px;
				width: 18px;
				height: 18px;
	
				img {
					width: 18px;
					height: 18px;
				}
			}
	
			.isflag {
				color: #ED7735;
				text-shadow: 0px 0px 4px rgba(39, 69, 201, 0.5);
			}
	
			.isblue {
				color: #148CFA;
			}
	
			.btn {
				display: flex;
				position: absolute;
				right: 15px;
				top: 5px;
	
				button {
					width: 48px;
					height: 28px;
					background: #91FDB9;
					border-radius: 2px 2px 2px 2px;
					font-size: 16px;
					font-weight: 400;
					line-height: 28px;
					text-align: center;
					border: none;
					padding: 0;
					color: black;
				}
	
				button:hover {
					background: #69b889;
				}
			}
		}
	}
</style>