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

<template>
	<view class="status">
		<view class="circle">
			<image :src="flag?'/static/change/green.png':'/static/change/yellow.png'" v-if="!circle"></image>
		</view>
		<view class="descript carTitle">{{ words }}</view>
		<view class="frame" @click="words=='车牌号'?ShowEditCar(value):''">
			<span :class="[Isblue?'frameText':flag?'':'isflag']">{{value || '—'}}</span>
			<view class="shinning"></view>
			
		</view>
		<view v-if="words=='车牌号'" @click="refresh" class="submit">刷新</view>
		<view v-if="words=='在线车辆'" @click="handleCarShow" class="submit">查看</view>
		<view v-if="words=='车辆识别'" @click="handleStatusShow" class="submit">查看</view>
		<view class="btnBox">
			<view class="submit" v-if="words=='解锁状态'" @click="HandlerDownLock">解锁</view>
			<view class="submit unlock" v-if="words=='解锁状态'" @click="HandleOnLock">上锁</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "PannelTitle",
		data() {
			return {

			};
		},
		props: ['words', 'value', 'flag', 'Isblue', 'circle'],
		methods: {
			//修改车牌号
			ShowEditCar(plate) {
				this.$emit('ShowCarline',plate)
			},
			handleStatusShow() {
				this.$emit('handleStatusShow')
			},
 			//车牌号刷新
			refresh(){
				let that=this
				uni.showModal({
					title:`是否重新检测车辆?`,
					content:'',
					success: function(res) {
						if (res.confirm) {
							that.$http.getRefresh().then(res=>{
								that.$emit('ExchangeMessage',res.code === 0?'success':'error',res.code === 0?'刷新成功!':'刷新失败!')
							})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
				
			},
			//车辆上锁
			HandleOnLock() {
				let that=this
				uni.showModal({
					title:`请确认对车辆上锁?`,
					content:'',
					success: function(res) {
						if (res.confirm) {
							that.$http.Updatelock().then(res=>{
								that.$emit('ExchangeMessage',res.code === 0?'success':'error',res.code === 0?'上锁成功!':'上锁失败!')								  
							})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
			//车辆解锁
			HandlerDownLock() {
				let that=this
				uni.showModal({
					title:`请确认对车辆解锁?`,
					content:'',
					success: function(res) {
						if (res.confirm) {
							that.$http.Updateunlock().then(res=>{
								that.$emit('ExchangeMessage',res.code === 0?'success':'error',res.code === 0?'解锁成功!':'解锁失败!')
							})
						} else if (res.cancel) {
							return false
							//用户点击取消按钮触发
						}
					}
				})
			},
			//在线车辆
			handleCarShow() {
				this.$emit('ShowCarline','line');
			}
		},
	}
</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;
		position: relative;
		.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: 75px !important;
		}
		.frameText {
			color: #C7D2DF;
			text-shadow: 0px 0px 4px #0027D8;
			position: relative;
			left: -4px;
		}
	
		.frame {
			flex: 1;
			position: relative;
			height: 32px;
			text-indent: 8px;
			font-size: 13px;
			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;
				}
			}
		}
	}
	.btnBox{
		display: flex;
		position: absolute;
		right: 0;
		.submit{
			width: 45px;
			height: 26px;
			line-height: 26px;
			margin-left: 0px;
			margin-right: 10px;
		}
		.unlock{
			margin-right: 0px;
		}
	}
</style>