提交代码

.bin/main/history.js

@@ -2,22 +2,102 @@
 	var History = /*@__PURE__*/ (function(Component) {
 		function History(props) {
 			Component.call(this, props);
-			this.data = {};
+			this.data = {
+				listData: [
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"},
+					{name: "1"}
+				]
+			};
 		}
 
 		if (Component) History.__proto__ = Component;
 		History.prototype = Object.create(Component && Component.prototype);
 		History.prototype.constructor = History;
 		History.prototype.apiready = function() {};
+		History.prototype.handleBackIndex = function() {
+			api.navigateBack({
+				delta: 2
+			});
+		};
+		History.prototype.handleRefresh = function() {
+			console.log("顶部触发");
+		};
+		History.prototype.handleLoadMore = function() {
+			console.log("加载更多");
+		};
 		History.prototype.render = function() {
+			var this$1 = this;
 			return apivm.h(
 				"view",
 				{class: "history_wrap"},
+				apivm.h(
+					"text",
+					{class: "history_back_text", onClick: this.handleBackIndex},
+					"返回"
+				),
 				apivm.h("text", {class: "history_title"}, "历史操作记录"),
 				apivm.h(
-					"scroll-view",
+					"view",
-					{class: "history_list", "scroll-x": "false", "scroll-y": true},
+					{class: "table_wrap"},
-					apivm.h("view", {class: ""})
+					apivm.h(
+						"view",
+						{class: "table_title"},
+						apivm.h("text", {class: "table_title_item_one"}, "动作"),
+						apivm.h("text", {class: "table_title_item_two"}, "实时参数"),
+						apivm.h("text", {class: "table_title_item_one"}, "时间")
+					),
+					apivm.h(
+						"scroll-view",
+						{
+							class: "history_list",
+							"scroll-x": "false",
+							"scroll-y": true,
+							onscrolltoupper: function(event) {
+								if (this$1.handleRefresh) {
+									this$1.handleRefresh(event);
+								} else {
+									handleRefresh(event);
+								}
+							},
+							onscrolltolower: function(event) {
+								if (this$1.handleLoadMore) {
+									this$1.handleLoadMore(event);
+								} else {
+									handleLoadMore(event);
+								}
+							}
+						},
+						(Array.isArray(this.data.listData)
+							? this.data.listData
+							: Object.values(this.data.listData)
+						).map(function(item$1) {
+							return apivm.h(
+								"view",
+								{class: "history_list_inline"},
+								apivm.h("text", {class: "history_list_inline_item_one"}, item$1.name),
+								apivm.h("text", {class: "history_list_inline_item_two"}, "111"),
+								apivm.h("text", {class: "history_list_inline_item_one"}, "111")
+							);
+						})
+					)
 				)
 			);
 		};
@@ -29,20 +109,69 @@
 			width: "100%",
 			height: "100vh",
 			boxSizing: "border-box",
-			padding: "20px"
+			padding: "20px",
+			backgroundImage: 'url("../../image/login.png")',
+			backgroundSize: "120%",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center",
+			position: "absolute"
+		},
+		".history_back_text": {
+			fontSize: "40px",
+			color: "#ffffff",
+			fontWeight: "bold",
+			position: "absolute",
+			top: "20px",
+			left: "20px"
 		},
 		".history_title": {
 			width: "100%",
 			textAlign: "center",
 			fontSize: "40px",
 			fontWeight: "bold",
-			color: "#000000"
+			color: "#ffffff"
 		},
-		".history_list": {
+		".table_wrap": {width: "100%", marginTop: "20px"},
-			marginTop: "30px",
+		".table_title": {display: "flex", flexDirection: "row", alignItems: "center"},
-			border: "1px solid silver",
+		".table_title_item_one": {
-			width: "100%",
+			fontSize: "36px",
-			height: "80vh"
+			color: "#ffffff",
+			border: "1px solid #ffffff",
+			width: "20%",
+			boxSizing: "border-box",
+			padding: "10px",
+			textAlign: "center"
+		},
+		".table_title_item_two": {
+			fontSize: "36px",
+			color: "#ffffff",
+			border: "1px solid #ffffff",
+			width: "60%",
+			boxSizing: "border-box",
+			padding: "10px",
+			textAlign: "center"
+		},
+		".history_list": {border: "1px solid silver", width: "100%", height: "70vh"},
+		".history_list_inline": {
+			display: "flex",
+			flexDirection: "row",
+			alignItems: "center"
+		},
+		".history_list_inline_item_one": {
+			fontSize: "32px",
+			color: "#ffffff",
+			border: "1px solid #ffffff",
+			width: "20%",
+			boxSizing: "border-box",
+			padding: "10px"
+		},
+		".history_list_inline_item_two": {
+			fontSize: "32px",
+			color: "#ffffff",
+			border: "1px solid #ffffff",
+			width: "60%",
+			boxSizing: "border-box",
+			padding: "10px"
 		}
 	};
 	apivm.define("history", History);

.bin/main/set.js

@@ -1,65 +1,42 @@
 (function() {
+	global.UIMultiSelector = api.require("UIMultiSelector");
 	var Set = /*@__PURE__*/ (function(Component) {
 		function Set(props) {
 			Component.call(this, props);
 			this.data = {
 				setList: [
-					{
+					{isSet: false, setVal: "", selectVal: "请选择", name: "高压风冷"},
-						isSet: false,
+					{isSet: true, setVal: "", selectVal: "请选择", name: "中压风冷"},
-						setVal: "",
+					{isSet: false, setVal: "", selectVal: "请选择", name: "低压风冷"},
-						selectVal: "请选择",
+					{isSet: true, setVal: "", selectVal: "请选择", name: "闭锁调压"}
-						selectIndex: 0,
-						name: "高压风冷"
-					},
-					{
-						isSet: true,
-						setVal: "",
-						selectVal: "请选择",
-						selectIndex: 0,
-						name: "中压风冷"
-					},
-					{
-						isSet: false,
-						setVal: "",
-						selectVal: "请选择",
-						selectIndex: 0,
-						name: "低压风冷"
-					},
-					{
-						isSet: true,
-						setVal: "",
-						selectVal: "请选择",
-						selectIndex: 0,
-						name: "闭锁调压"
-					}
 				],
 
 				//电流通道列表
-				currentList: ["1路", "2路", "3路", "4路"]
+				currentList: [
+					{
+						text: "1路",
+						status: "normal"
+					},
+					{
+						text: "2路",
+						status: "normal"
+					},
+					{
+						text: "3路",
+						status: "normal"
+					},
+					{
+						text: "4路",
+						status: "normal"
+					}
+				]
 			};
 		}
 
 		if (Component) Set.__proto__ = Component;
 		Set.prototype = Object.create(Component && Component.prototype);
 		Set.prototype.constructor = Set;
-		Set.prototype.apiready = function() {
+		Set.prototype.apiready = function() {};
-			var selector0 = document.getElementById("selector0");
-			var selector1 = document.getElementById("selector1");
-			var selector2 = document.getElementById("selector2");
-			var selector3 = document.getElementById("selector3");
-			selector0.setData({
-				data: this.data.currentList
-			});
-			selector1.setData({
-				data: this.data.currentList
-			});
-			selector2.setData({
-				data: this.data.currentList
-			});
-			selector3.setData({
-				data: this.data.currentList
-			});
-		};
 		Set.prototype.handleBackIndex = function() {
 			api.navigateBack({
 				delta: 2
@@ -73,16 +50,80 @@
 				}
 			});
 		};
-		Set.prototype.handleSelectChange = function(e) {
+		Set.prototype.handleSelectChange = function(selectNum) {
-			var this$1 = this;
+			var _setList = this.data.setList;
-
+			//设置下拉选项
-			var _index = e.target.attributes.index;
+			UIMultiSelector.open(
-			this.data.setList.forEach(function(item, index) {
+				{
-				if (index === _index) {
+					rect: {
-					item.selectIndex = e.detail.value;
+						h: 400
-					item.selectVal = this$1.data.currentList[e.detail.value];
+					},
+					text: {
+						title: "电流通道",
+						leftBtn: "取消",
+						rightBtn: "确认"
+					},
+					styles: {
+						mask: "rgba(0,0,0,0)",
+						title: {
+							bg: "#ffffff",
+							color: "#000000",
+							size: 36,
+							h: 80
+						},
+						leftButton: {
+							w: 160,
+							h: 80,
+							marginT: 5,
+							marginL: 8,
+							color: "#ffffff",
+							size: 36,
+							bg: "#5199FF"
+						},
+						rightButton: {
+							w: 160,
+							h: 80,
+							marginT: 5,
+							marginR: 8,
+							color: "#ffffff",
+							size: 36,
+							bg: "#5199FF"
+						},
+						item: {
+							h: 80,
+							bg: "#ffffff",
+							bgActive: "#5199FF",
+							bgHighlight: "#5199FF",
+							color: "#000000",
+							active: "#ffffff",
+							highlight: "#ffffff",
+							size: 36,
+							activeSize: 36,
+							lineColor: "#d8d8d8",
+							textAlign: "center"
+						}
+					},
+					max: 1,
+					singleSelection: true,
+					animation: true,
+					items: this.data.currentList
+				},
+				function(ret) {
+					if (ret.eventType === "clickLeft") {
+						UIMultiSelector.close();
+					} else if (
+						ret.eventType === "clickRight" ||
+						ret.eventType === "clickItem"
+					) {
+						UIMultiSelector.close();
+						_setList[selectNum].selectVal =
+							ret.items.length > 0 ? ret.items[0].text : _setList[selectNum].selectVal;
+					}
 				}
-			});
+			);
+		};
+		Set.prototype.handleSubmitSet = function() {
+			console.log("保存参数");
 		};
 		Set.prototype.render = function() {
 			var this$1 = this;
@@ -137,21 +178,24 @@
 									"view",
 									{class: "item_content"},
 									apivm.h(
-										"picker",
+										"text",
 										{
-											class: "picker",
+											class: "item_label",
-											id: "selector" + index$1,
+											onClick: function() {
-											index: index$1,
+												return this$1.handleSelectChange(index$1);
-											mode: "selector",
+											}
-											value: item$1.selectIndex,
-											onChange: this$1.handleSelectChange
 										},
-										apivm.h("text", {class: "item_label"}, item$1.selectVal)
+										item$1.selectVal
 									)
 								)
 							)
 						);
 					})
+				),
+				apivm.h(
+					"text",
+					{class: "set_btn", onClick: this.handleSubmitSet},
+					"保存参数"
 				)
 			);
 		};
@@ -163,10 +207,22 @@
 			width: "100%",
 			height: "100vh",
 			boxSizing: "border-box",
-			padding: "20px"
+			padding: "20px",
+			backgroundImage: 'url("../../image/login.png")',
+			backgroundSize: "120%",
+			backgroundRepeat: "no-repeat",
+			backgroundPosition: "center",
+			position: "relative"
 		},
-		".set_back_text": {fontSize: "40px", color: "#000000", fontWeight: "bold"},
+		".set_back_text": {
-		".set_list": {marginTop: "50px", display: "flex", alignItems: "center"},
+			fontSize: "40px",
+			color: "#ffffff",
+			fontWeight: "bold",
+			position: "absolute",
+			top: "20px",
+			left: "20px"
+		},
+		".set_list": {marginTop: "80px", display: "flex", alignItems: "center"},
 		".list_inline": {
 			display: "flex",
 			flexDirection: "row",
@@ -179,7 +235,7 @@
 			flexDirection: "row",
 			alignItems: "center"
 		},
-		".item_label": {fontSize: "40px", fontWeight: "bold", color: "#000000"},
+		".item_label": {fontSize: "40px", fontWeight: "bold", color: "#ffffff"},
 		".item_content": {
 			display: "flex",
 			flexDirection: "row",
@@ -202,6 +258,18 @@
 			width: "200px",
 			marginLeft: "20px",
 			borderRadius: "10px"
+		},
+		".set_btn": {
+			fontSize: "40px",
+			color: "#5199FF",
+			backgroundColor: "#ffffff",
+			boxSizing: "border-box",
+			padding: "10px 20px",
+			borderRadius: "10px",
+			textAlign: "center",
+			width: "300px",
+			margin: "50px auto 0",
+			fontWeight: "bold"
 		}
 	};
 	apivm.define("set", Set);

.yonstudio/.project

@@ -1 +1 @@
-{"appid":"A1785216780697862147","appname":"test","apptype":"app","synctime":1691110138}
+{"appid":"A1785216780697862147","appname":"test","apptype":"app","synctime":1691117705}

pages/main/history.stml

@@ -1,9 +1,30 @@
 <template>
 	<view class="history_wrap">
+		<text class="history_back_text" @click="handleBackIndex">返回</text>
 		<text class="history_title">历史操作记录</text>
-		<scroll-view class="history_list" scroll-x ="false" scroll-y>
+		<view class="table_wrap">
-			<view class=""></view>
+			<view class="table_title">
-		</scroll-view>
+				<text class="table_title_item_one">动作</text>
+				<text class="table_title_item_two">实时参数</text>
+				<text class="table_title_item_one">时间</text>
+			</view>
+			<scroll-view 
+				class="history_list" 
+				scroll-x ="false" 
+				scroll-y
+				onscrolltoupper="handleRefresh"
+				onscrolltolower="handleLoadMore"
+			>
+				<view 
+					class="history_list_inline"
+					v-for="item in listData"
+				>
+					<text class="history_list_inline_item_one">{{item.name}}</text>
+					<text class="history_list_inline_item_two">111</text>
+					<text class="history_list_inline_item_one">111</text>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 <script>
@@ -11,14 +32,48 @@ export default {
 	name: 'history',
 	data() {
 		return{
-
+			listData:[
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'},
+				{name:'1'}
+			]
 		}
 	},
 	apiready(){
 
 	},
 	methods: {
-
+		//返回首页
+		handleBackIndex(){
+			api.navigateBack({
+				delta: 2,
+			});
+		},
+		//下拉刷新
+		handleRefresh(){
+			console.log("顶部触发");
+		},
+		//加载更多
+		handleLoadMore(){
+			console.log("加载更多");
+		},
 	}
 }
 </script>
@@ -28,18 +83,78 @@ export default {
 	height: 100vh;
 	box-sizing: border-box;
 	padding: 20px;
+	background-image: url("../../image/login.png");
+	background-size: 120%;
+	background-repeat: no-repeat;
+	background-position: center;
+	position: absolute;
+}
+.history_back_text{
+	font-size: 40px;
+	color: #ffffff;
+	font-weight: bold;
+	position: absolute;
+	top: 20px;
+	left: 20px;
 }
 .history_title{
 	width: 100%;
 	text-align: center;
 	font-size: 40px;
 	font-weight: bold;
-	color: #000000;
+	color: #ffffff;
+}
+.table_wrap{
+	width: 100%;
+	margin-top: 20px;
+}
+.table_title{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.table_title_item_one{
+	font-size: 36px;
+	color: #ffffff;
+	border: 1px solid #ffffff;
+	width: 20%;
+	box-sizing: border-box;
+	padding: 10px;
+	text-align: center;
+}
+.table_title_item_two{
+	font-size: 36px;
+	color: #ffffff;
+	border: 1px solid #ffffff;
+	width: 60%;
+	box-sizing: border-box;
+	padding: 10px;
+	text-align: center;
 }
 .history_list{
-	margin-top: 30px;
 	border: 1px solid silver;
 	width: 100%;
-	height: 80vh;
+	height: 70vh;
+}
+.history_list_inline{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.history_list_inline_item_one{
+	font-size: 32px;
+	color: #ffffff;
+	border: 1px solid #ffffff;
+	width: 20%;
+	box-sizing: border-box;
+	padding: 10px;
+}
+.history_list_inline_item_two{
+	font-size: 32px;
+	color: #ffffff;
+	border: 1px solid #ffffff;
+	width: 60%;
+	box-sizing: border-box;
+	padding: 10px;
 }
 </style>

pages/main/set.stml

@@ -16,48 +16,49 @@
 				<view class="inline_item">
 					<text class="item_label">电流通道：</text>
 					<view class="item_content">
-						<picker class="picker" :id="'selector'+index" index={index} mode="selector" value={{item.selectIndex}} @change="handleSelectChange">
+						<text class="item_label" @click="handleSelectChange(index)">{{item.selectVal}}</text>
-							<text class="item_label">{{item.selectVal}}</text>
-						</picker>
 					</view>
 				</view>
 			</view>
 		</view>
+		<text class="set_btn" @click="handleSubmitSet">保存参数</text>
 	</view>
 </template>
 <script>
+let UIMultiSelector = api.require("UIMultiSelector"); 
 export default {
 	name: 'set',
-	
 	data() {
 		return{
 			setList:[
-				{isSet:false,setVal:'',selectVal:'请选择',selectIndex:0,name:'高压风冷'},
+				{isSet:false,setVal:'',selectVal:'请选择',name:'高压风冷'},
-				{isSet:true,setVal:'',selectVal:'请选择',selectIndex:0,name:'中压风冷'},
+				{isSet:true,setVal:'',selectVal:'请选择',name:'中压风冷'},
-				{isSet:false,setVal:'',selectVal:'请选择',selectIndex:0,name:'低压风冷'},
+				{isSet:false,setVal:'',selectVal:'请选择',name:'低压风冷'},
-				{isSet:true,setVal:'',selectVal:'请选择',selectIndex:0,name:'闭锁调压'},
+				{isSet:true,setVal:'',selectVal:'请选择',name:'闭锁调压'},
 			],
 			//电流通道列表
-			currentList: ['1路','2路','3路','4路'],
+			currentList: [
+				{
+					text:'1路',
+					status:'normal'
+				},
+				{
+					text:'2路',
+					status:'normal'
+				},
+				{
+					text:'3路',
+					status:'normal'
+				},
+				{
+					text:'4路',
+					status:'normal'
+				},
+			],
 		}
 	},
 	apiready(){
-		let selector0 = document.getElementById('selector0');
+
-		let selector1 = document.getElementById('selector1');
-		let selector2 = document.getElementById('selector2');
-		let selector3 = document.getElementById('selector3');
-		selector0.setData({
-			data: this.data.currentList
-		});
-		selector1.setData({
-			data: this.data.currentList
-		});
-		selector2.setData({
-			data: this.data.currentList
-		});
-		selector3.setData({
-			data: this.data.currentList
-		});
 	},
 	methods: {
 		//返回首页
@@ -76,15 +77,75 @@ export default {
 			})
 		},
 		//下拉选择
-		handleSelectChange(e) {
+		handleSelectChange(selectNum) {
-			let _index = e.target.attributes.index;
+			let _setList = this.data.setList;
-			this.setList.forEach((item,index) => {
+			//设置下拉选项
-				if(index === _index){
+			UIMultiSelector.open({
-					item.selectIndex = e.detail.value;
+				rect: {
-					item.selectVal = this.data.currentList[e.detail.value];
+					h: 400
+				},
+				text: {
+					title: '电流通道',
+					leftBtn: '取消',
+					rightBtn: '确认',
+				},
+				styles: {
+					mask: 'rgba(0,0,0,0)',
+					title: {
+						bg: '#ffffff',
+						color: '#000000',
+						size: 36,
+						h: 80
+					},
+					leftButton: {
+						w: 160,
+						h: 80,
+						marginT: 5,
+						marginL: 8,
+						color: '#ffffff',
+						size: 36,
+						bg:'#5199FF'
+					},
+					rightButton: {
+						w: 160,
+						h: 80,
+						marginT: 5,
+						marginR: 8,
+						color: '#ffffff',
+						size: 36,
+						bg:'#5199FF'
+					},
+					item: {
+						h: 80,
+						bg: '#ffffff',
+						bgActive: '#5199FF',
+						bgHighlight: '#5199FF',
+						color: '#000000',
+						active: '#ffffff',
+						highlight: '#ffffff',
+						size: 36,
+						activeSize:36,
+						lineColor: '#d8d8d8',
+						textAlign: 'center'
+					},
+				},
+				max: 1,
+				singleSelection: true,
+				animation: true,
+				items:this.data.currentList
+			}, function(ret){
+				if(ret.eventType === 'clickLeft'){
+					UIMultiSelector.close();
+				}else if(ret.eventType === 'clickRight' || ret.eventType === 'clickItem'){
+					UIMultiSelector.close();
+					_setList[selectNum].selectVal = ret.items.length > 0?ret.items[0].text:_setList[selectNum].selectVal;
 				}
-			})
+			});
 		},
+		//保存参数
+		handleSubmitSet(){
+			console.log("保存参数");
+		}
 	}
 }
 </script>
@@ -94,14 +155,22 @@ export default {
 		height: 100vh;
 		box-sizing: border-box;
 		padding: 20px;
+		background-image: url("../../image/login.png");
+		background-size: 120%;
+		background-repeat: no-repeat;
+		background-position: center;
+		position: relative;
 	}
 	.set_back_text{
 		font-size: 40px;
-		color: #000000;
+		color: #ffffff;
 		font-weight: bold;
+		position: absolute;
+		top: 20px;
+		left: 20px;
 	}
 	.set_list{
-		margin-top: 50px;
+		margin-top: 80px;
 		display: flex;
 		align-items: center;
 	}
@@ -120,7 +189,7 @@ export default {
 	.item_label{
 		font-size: 40px;
 		font-weight: bold;
-		color: #000000;
+		color: #ffffff;
 	}
 	.item_content{
 		display: flex;
@@ -147,4 +216,16 @@ export default {
 		margin-left: 20px;
 		border-radius: 10px;
 	}
+	.set_btn{
+		font-size: 40px;
+		color: #5199FF;
+		background-color: #ffffff;
+		box-sizing: border-box;
+		padding: 10px 20px;
+		border-radius: 10px;
+		text-align: center;
+		width: 300px;
+		margin: 50px auto 0;
+		font-weight: bold;
+	}
 </style>