electricControl/.bin/main/set.js

(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: true, setVal: "", selectVal: "请选择", name: "中压风冷"},
					{isSet: false, setVal: "", selectVal: "请选择", name: "低压风冷"},
					{isSet: true, setVal: "", selectVal: "请选择", name: "闭锁调压"}
				],

				//电流通道列表
				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.handleBackIndex = function() {
			api.navigateBack({
				delta: 2
			});
		};
		Set.prototype.handleSwitchChange = function(e) {
			var _index = e.target.attributes.index;
			this.data.setList.forEach(function(item, index) {
				if (index === _index) {
					item.isSet = e.detail.value;
				}
			});
		};
		Set.prototype.handleSelectChange = function(selectNum) {
			var _setList = this.data.setList;
			//设置下拉选项
			UIMultiSelector.open(
				{
					rect: {
						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;
					}
				}
			);
		};
		Set.prototype.handleSubmitSet = function() {
			console.log("保存参数");
		};
		Set.prototype.render = function() {
			var this$1 = this;
			return apivm.h(
				"view",
				{class: "set_wrap"},
				apivm.h(
					"text",
					{class: "set_back_text", onClick: this.handleBackIndex},
					"返回"
				),
				apivm.h(
					"view",
					{class: "set_list"},
					(Array.isArray(this.data.setList)
						? this.data.setList
						: Object.values(this.data.setList)
					).map(function(item$1, index$1) {
						return apivm.h(
							"view",
							{class: "list_inline"},
							apivm.h(
								"view",
								{class: "inline_item"},
								apivm.h("text", {class: "item_label"}, item$1.name, "："),
								apivm.h(
									"view",
									{class: "item_content"},
									apivm.h(
										"view",
										{class: "switch_box"},
										apivm.h("switch", {
											class: "switch",
											index: index$1,
											checked: item$1.isSet,
											onChange: this$1.handleSwitchChange
										})
									),
									apivm.h("input", {
										class: "input",
										type: "text",
										disabled: !item$1.isSet,
										placeholder: "请输入电流值"
									})
								)
							),
							apivm.h(
								"view",
								{class: "inline_item"},
								apivm.h("text", {class: "item_label"}, "电流通道："),
								apivm.h(
									"view",
									{class: "item_content"},
									apivm.h(
										"text",
										{
											class: "item_label",
											onClick: function() {
												return this$1.handleSelectChange(index$1);
											}
										},
										item$1.selectVal
									)
								)
							)
						);
					})
				),
				apivm.h(
					"text",
					{class: "set_btn", onClick: this.handleSubmitSet},
					"保存参数"
				)
			);
		};

		return Set;
	})(Component);
	Set.css = {
		".set_wrap": {
			width: "100%",
			height: "100vh",
			boxSizing: "border-box",
			padding: "20px",
			backgroundImage: 'url("../../image/login.png")',
			backgroundSize: "120%",
			backgroundRepeat: "no-repeat",
			backgroundPosition: "center",
			position: "relative"
		},
		".set_back_text": {
			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",
			alignItems: "center",
			margin: "10px 0"
		},
		".inline_item": {
			margin: "0 40px",
			display: "flex",
			flexDirection: "row",
			alignItems: "center"
		},
		".item_label": {fontSize: "40px", fontWeight: "bold", color: "#ffffff"},
		".item_content": {
			display: "flex",
			flexDirection: "row",
			alignItems: "center"
		},
		".switch_box": {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			width: "76px",
			height: "46px"
		},
		".switch": {transform: "scale(1.5, 1.5)"},
		".input": {
			boxSizing: "border-box",
			padding: "5px",
			border: "1px solid silver",
			fontSize: "32px",
			height: "60px",
			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);
	apivm.render(apivm.h("set", null), "body");
})();