210历史记录页面

pages/210/historyRecords/index.vue

@@ -1,8 +1,74 @@
 <template>
+	<view class="histyRecords">
+		<scroll-view class="tab-bar" scroll-x="true" scroll-with-animation>
+			<view class="tab-container">
+				<view v-for="(tab, index) in tabs" :key="index"
+					:class="['tab-item', activeTab === index ? 'active' : '']" @click="switchTab(tab,index)">
+					{{tab.name}}
+				</view>
+			</view>
+		</scroll-view>
+	</view>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				tabs: [{
+						name: '开机',
+					},
+					{
+						name: '报警',
+					},
+				],
+				activeTab: 0,
+			}
+		},
+		methods: {
+			// tab切换页
+			switchTab(tab, index) {
+				this.activeTab = index
+			},
+		}
+	}
 </script>
 
 <style>
+	.histyRecords {
+		width: 100%;
+		height: 100vh;
+		background: rgba(18, 18, 18, 1);
+		padding: 30rpx;
+	}
+
+	.tab-bar {
+		width: 100%;
+		color: rgb(255, 255, 255);
+		white-space: nowrap;
+		overflow: hidden;
+		position: relative;
+
+	}
+
+	.tab-container {
+		display: flex;
+		cursor: pointer;
+		margin-bottom: 40rpx;
+		justify-content: space-between;
+
+	}
+
+	.tab-item {
+		font-size: 28rpx;
+		padding: 0 30rpx;
+		text-align: center;
+
+	}
+
+	.active {
+		color: rgba(187, 230, 0, 1);
+		border-bottom: 6rpx solid rgba(187, 230, 0, 1);
+		height: 60rpx;
+	}
 </style>

pages/6170/deviceControl/index.vue

@@ -136,19 +136,23 @@
 						<button class="send-btn1" @click="sendPersonnelInfo">发送</button>
 						<view class="form-row">
 							<text class="form-label">单位：</text>
-							<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName" />
+							<input class="form-input" placeholder="请输入单位" v-model="personnelInfo.unitName"
+								:maxlength="15" />
 						</view>
 						<view class="form-row">
 							<text class="form-label">姓名：</text>
-							<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name" />
+							<input class="form-input" placeholder="请输入姓名" v-model="personnelInfo.name"
+								:maxlength="15" />
 						</view>
 						<view class="form-row">
 							<text class="form-label">职位：</text>
-							<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position" />
+							<input class="form-input" placeholder="请输入职位" v-model="personnelInfo.position"
+								:maxlength="15" />
 						</view>
 						<view class="form-row">
 							<text class="form-label">ID：</text>
-							<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code" />
+							<input class="form-input" placeholder="请输入ID号" v-model="personnelInfo.code"
+								:maxlength="15" />
 						</view>
 					</view>
 				</view>
@@ -160,7 +164,8 @@
 					</view>
 
 					<view class="form-row">
-						<input class="form-input1" maxlength="20" placeholder="请输入文字" v-model="messageToSend" />
+						<input class="form-input1" maxlength="20" placeholder="请输入文字" v-model="messageToSend"
+							@input="filterChinese" />
 					</view>
 				</view>
 				<!-- 产品信息 -->
@@ -359,6 +364,15 @@
 			}
 		},
 		methods: {
+			filterChinese(e) {
+				const value = e.detail.value;
+				// 允许中文和常见中文标点
+				this.messageToSend = value.replace(/[^\u4e00-\u9fa5，。？！、；：“”‘’（）【】《》…—]/g, '');
+				// 修复某些平台输入法兼容性问题
+				this.$nextTick(() => {
+					e.target.value = this.messageToSend;
+				});
+			},
 			// 点击弹框外的区域关闭
 			closePopup() {
 				this.lightModeA = false;
@@ -1321,6 +1335,7 @@
 	.form-label {
 		font-size: 32rpx;
 		color: rgba(255, 255, 255, 0.87);
+		white-space: nowrap;
 	}
 
 	.form-input {
@@ -1328,6 +1343,7 @@
 		border: 1rpx solid transparent;
 		font-size: 32rpx;
 		color: rgba(255, 255, 255, 0.87);
+		width: 100%;
 	}
 
 	.form-input1 {