.

chayin · Jul 10, 2018 · ed7c4c1 · ed7c4c1
1 parent 6fed281
commit ed7c4c1
Show file tree

Hide file tree

Showing 40 changed files with 3,618 additions and 0 deletions.
diff --git a/Public/css/style.css b/Public/css/style.css
diff --git a/Public/icons/2oom.png b/Public/icons/2oom.png
diff --git a/Public/icons/down_b.png b/Public/icons/down_b.png
diff --git a/Public/icons/icon_add.png b/Public/icons/icon_add.png
diff --git a/Public/icons/icon_author.png b/Public/icons/icon_author.png
diff --git a/Public/icons/icon_brightness.png b/Public/icons/icon_brightness.png
diff --git a/Public/icons/icon_chatHead.png b/Public/icons/icon_chatHead.png
diff --git a/Public/icons/icon_close.png b/Public/icons/icon_close.png
diff --git a/Public/icons/icon_curtain_close.png b/Public/icons/icon_curtain_close.png
diff --git a/Public/icons/icon_curtain_open.png b/Public/icons/icon_curtain_open.png
diff --git a/Public/icons/icon_dark.png b/Public/icons/icon_dark.png
diff --git a/Public/icons/icon_door.png b/Public/icons/icon_door.png
diff --git a/Public/icons/icon_down.png b/Public/icons/icon_down.png
diff --git a/Public/icons/icon_error.png b/Public/icons/icon_error.png
diff --git a/Public/icons/icon_flame.png b/Public/icons/icon_flame.png
diff --git a/Public/icons/icon_humidify_max.png b/Public/icons/icon_humidify_max.png
diff --git a/Public/icons/icon_humidify_min.png b/Public/icons/icon_humidify_min.png
diff --git a/Public/icons/icon_humidity.png b/Public/icons/icon_humidity.png
diff --git a/Public/icons/icon_light.png b/Public/icons/icon_light.png
diff --git a/Public/icons/icon_menu.png b/Public/icons/icon_menu.png
diff --git a/Public/icons/icon_power_off.png b/Public/icons/icon_power_off.png
diff --git a/Public/icons/icon_power_on.png b/Public/icons/icon_power_on.png
diff --git a/Public/icons/icon_room.png b/Public/icons/icon_room.png
diff --git a/Public/icons/icon_room_add.png b/Public/icons/icon_room_add.png
diff --git a/Public/icons/icon_room_del.png b/Public/icons/icon_room_del.png
diff --git a/Public/icons/icon_set.png b/Public/icons/icon_set.png
diff --git a/Public/icons/icon_temperature.png b/Public/icons/icon_temperature.png
diff --git a/Public/icons/icon_toxicGas.png b/Public/icons/icon_toxicGas.png
diff --git a/Public/icons/icon_up.png b/Public/icons/icon_up.png
diff --git a/Public/icons/icon_user_login.png b/Public/icons/icon_user_login.png
diff --git a/Public/icons/icon_wifi.png b/Public/icons/icon_wifi.png
diff --git a/Public/icons/on.png b/Public/icons/on.png
diff --git a/Public/index.html b/Public/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+	<title>HeTaiBei</title>
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+</head>
+<body >
+	<div class="header hide">
+		<div class="navmenu">
+			<i id="room_menuBtn"></i>
+			<i id="add_deviceBtn"></i>
+			<h2 id="room_name"> </h2>
+			<span id="room_id" style="display: none"></span>
+		</div>
+	</div>
+	<div id="device_add_page" class="device_add hide">
+		<!-- <p id="add_device">添加设备</p> -->
+		<i id="close" class="icon_close"></i>
+		<p class="no_device">当前没有任何可添加设备</p>
+		<!-- <li>lamp1</li> -->
+	</div>
+
+	<div id="mask" class="mask show"></div>
+	<div id="room_page" class="room_page hide">
+		<div class="login_box">
+			<div id="login" class="login_img">
+				<img src="./icons/icon_chatHead.png" style="padding: -1px 3px 0 3px; ">
+			</div>
+			<p id="user_name">Chayin</p>
+		</div>
+		<div id="room_box" class="room_box">
+			<!-- <p>无房间</p> -->
+			<ul>
+				<li class="room" style="display: block;">
+					<i id="room" class="icon_room show"></i>
+					<i class="icon_room_del hide"></i>
+					<input id="20180226181230" class="room_name" type="text" name="" value="主卧" readonly="readonly">
+				</li>
+				<li id="room_add" class="room_set" style="display: none;">
+					<i class="icon_room_add"></i>
+					<p id="add">添加房间</p>
+				</li>
+				<li id="room_set" class="room_set">
+					<i class="icon_set"></i>
+					<p>房间管理</p>
+				</li>
+				<li id="room_wifi" class="room_wifi">
+					<i class="icon_wifi"></i>
+					<p>wifi设置</p>
+				</li>
+			</ul>
+
+			<div id="room_wifi_set" class="room_wifi_set hide">
+				<input type="text" name="" placeholder="wifi账号">
+				<input type="text" name="" placeholder="wifi密码">
+				<button id="again">重输</button>
+				<button id="comfir">确认</button>
+	        </div>
+		</div>
+	</div>
+	<img id="authorize" src="icons/icon_author.png" style="width: 326px; height: 297px; position: absolute; z-index: 2;">
+	<div class="body hide">
+		<!-- <div class="search_box">
+			<i class="search_icon"></i>
+			<input class="search" type="text" name="">
+		</div> -->
+		<div class="device_box">
+			<p class="no_device">还没有设备，去添加设备吧</p>
+			<!-- <input id="write_device_status" type="text" name="">
+			<button id="submit">提交</button> -->
+			<ul id="device_box" >
+				<!-- 添加错误预警 -->
+				<!-- 添加设备 -->
+			</ul>
+		</div>
+	</div>
+
+	<div class="footer"></div>
+
+
+	<!-- <div class="orientLayer">
+		<p>为了更好的体验，请使用竖屏浏览</p>
+	</div>
+
+	<div class="no_device">
+		<h3>无法连接设备</h3>
+		<p>请检查门磁感应器是否有点以及网络是否正常</p>
+	</div> -->
+
+    <script type="text/javascript" src="./js/zepto.js"></script>
+    <script type="text/javascript" src="js/process-bar.js"></script>
+    <script type="text/javascript" src="js/lamp.js"></script>
+    <script type="text/javascript" src="js/script.js"></script>
+
+</body>
+</html>
diff --git a/Public/js/lamp.js b/Public/js/lamp.js
@@ -0,0 +1,168 @@
+// 还有页面设备排序、删除设备、设备损坏警告没写。
+/**
+ * 设备页面
+ */
+var ProcessBar = Bar;
+
+function addDevice(data) {
+	var deviceBox = $("#device_box"),
+	    type = data.devices.device_type,
+	    id = data.devices.device_id,
+	    lookup = {
+			"lamp" : type1,
+			"curtain" : type1,
+			"temperature" : type2,
+			"brightness" : type2,
+			"humidity" : type2,
+			"door" : type3,
+			"toxicGas" : type3,
+			"flame" : type3
+		},
+	    def = err;
+
+	return lookup[type] ? lookup[type]() : def();
+
+	function type1() {
+		var item = '<li class=\"box\"><ul id=\"' + id + '\"><li class=\"menu\"><div><i id=\"' + id +'_powerBtn\" class=\"icon powerBtn off\"></i><p>'+ id +'</p><span class=\"device_val\">'+ data.devices.device_status.alpha +'&#37;</span><i id=\"' + id +'_downBtn\" class=\"icon down downBtn\"></i></div></li><li class=\"submenu\"><div class=\"slider_box\"><i class=\"icon dark\"></i><div id=\"' + id +'Bar\" class=\"slider_box_bar\"><div class=\"slider_box_slider\"><p class=\"device_val\"></p><i class=\"slider_box_slider_touch\"></i></div><div class=\"slider_box_line\"><span class=\"slider_box_line_fill\"></span></div></div><i class=\"icon light\"></i></div></li></ul></li>';
+		deviceBox.append(item);
+		initBar(data);
+		initPowerBtn(data);
+	}
+	function type2() {
+		var item = '<li class=\"menu\"><div id=\"'+ id +'\" class=\"'+ type +'\"><i class=\"icon icon_'+ type +'\"></i><p>'+ id +'</p><span class=\"device_val\">'+ data.devices.device_status.alpha +'</span></div></li>';
+		deviceBox.append(item);
+		setType2Val(data);
+	}
+	function type3() {
+		var item = '<li class=\"menu\"><div id=\"'+ id +'\" class=\"'+ type +'\"><i class=\"icon icon_'+ type +'\"></i><p>'+ id +'</p><span class=\"device_val\"></span></div></li>';
+		deviceBox.append(item);
+		setType3Val(data);
+	}
+	function err() {
+		alert("设备添加失败，无效设备");
+	}
+}
+
+// 设置修改设置的温度、湿度和亮度
+function setType2Val(data) {
+	var obj = $("#" + data.devices.device_id + " .device_val");
+	// console.log($("#" + data.devices.device_id + " .device_val"));
+	if(data.devices.device_type === "temperature") {
+		obj.html(data.devices.device_status.alpha + "&deg;C");
+	}else {
+		obj.html(data.devices.device_status.alpha + "&#37;");
+	}
+}
+
+// 初始化门未关、火焰预警和有毒气体预警
+function setType3Val(data){
+	// console.log(data);
+	var id = data.devices.device_id,
+	    type = data.devices.device_type,
+	    obj = $("#" + id + " span"),
+	    status = parseInt(data.devices.device_status.status);
+
+	console.log(status === 0);
+	if(status === 0) {
+		return type === "door" ? removeWarn("门关了") : removeWarn("正常");
+	}else if(status === 1){
+		return type === "door" ? addWarn("门未关") : addWarn("异常警告");
+	}
+
+	function removeWarn(str) {
+		obj.html(str);
+		obj.css("color","#000");
+		$("." + id).remove();
+	}
+	function addWarn(str) {
+		var item = '<p class= \"error_warning ' + id + '\"><i class=\"icon icon_error\"></i>' + $("#room_name").html() + '的' + id + str + '</p>';
+		$("#device_box .warning_box").prepend(item);
+		obj.html(str);
+		obj.css("color","red");
+	}	
+}
+
+// 初始化所有进度条
+function initBar(data) {
+		var barId = data.devices.device_id + "Bar",
+		    status;
+
+		barId = new ProcessBar({
+			$id: barId,
+			min: 0,
+			stepCount: 100,
+			step: 1,
+			touchEnd: function (val) {
+			    // console.log("亮度值为："+ val);
+			    // console.log($("#" + data.devices.device_id + '_powerBtn').hasClass("on"));
+			    data.devices.device_status.alpha = val;
+			    status = $("#" + data.devices.device_id + '_powerBtn').hasClass("on") ? "1" : "0";
+			    data.devices.device_status.status = status;
+			    socket.emit("setstatus",data);
+			}
+		});
+		// console.log(data.devices.device_status.alpha)
+		barId.setVal(data.devices.device_status.alpha);		
+
+}
+
+// 初始化开关
+function initPowerBtn(data){
+ 	var obj = $("#" + data.devices.device_id + '_powerBtn'),
+ 	    status = parseInt(data.devices.device_status.status);
+
+ 	if(status === 0) {
+ 		console.log("0");
+ 		obj.addClass("off").removeClass("on");
+ 	}else if(status === 1) {
+ 		console.log("1");
+ 		obj.removeClass("off").addClass("on");
+ 	} 
+}
+
+// 下拉按钮/开关按钮点击
+function btnClick(contid, e) {
+	e = e || window.event;
+	var id = $(e.path[3]).attr("id"),
+	    targetObj = $(e.target);
+	if(targetObj.hasClass("powerBtn")) {
+		togglePowerBtn(contid, id, targetObj);
+	} 
+	else if(targetObj.hasClass("downBtn")){
+		toggleDownBtn(targetObj);
+	}
+}	
+function togglePowerBtn(contid, id, obj) {
+	var data = {
+			control_id : contid,
+			devices : {
+				device_id : id,
+				device_status : {
+					status : "",
+					alpha : ""
+				}
+			}
+		},
+	    alpha = obj.siblings("span").html().slice(0, -1);
+	console.log(data);
+
+	obj.toggleClass("on").toggleClass("off");
+	data.devices.device_status.alpha = alpha;
+	data.devices.device_status.status = obj.hasClass("on") ? "1" : "0";
+	socket.emit("setstatus",data);
+}
+function toggleDownBtn(obj) {
+	var objList = obj.parent().parent().next(),
+	    downBtns = $.grep($(".downBtn"), function(item) {
+			return item !== obj[0];
+		});
+	// console.log(downBtns)
+	$(downBtns).removeClass("up").addClass("down");
+	obj.toggleClass("down").toggleClass("up");
+	$(".downBtn").parent().parent().next().hide();
+	if (obj.hasClass("up")) {
+		objList.toggle();
+	}
+}
+
+
diff --git a/Public/js/process-bar.js b/Public/js/process-bar.js
@@ -0,0 +1,83 @@
+/**
+ * 进度条组件
+ */
+function Bar(opt) {
+    var defaults = {
+        $id: "", // 进度条dom节点id
+        min: 1, // 刻度最小值
+        stepCount: 5, // 刻度步数
+        step: 1, // 刻度步长
+        touchEnd: function () {} // 拖动完成回调
+    };
+    this.option = $.extend(defaults, opt);
+    this.barNode = $("#"+this.option.$id);
+    this.parentNode = this.barNode.parents(".slider_box");
+    this.sliderNode = this.barNode.find(".slider_box_slider");
+    this.fillNode = this.barNode.find(".slider_box_line_fill");
+    // this.valNode = this.barNode.find(".device_val");
+    this.relateValNode = this.barNode.parents(".box").find(".device_val")
+    this.val = this.option.min;
+    // this.valNode.text(this.val);
+    this.relateValNode.text(this.val + "%");
+
+    this._init();
+
+    return this;
+}
+
+Bar.prototype = {
+    /**
+     * 根据比例值来重新渲染进度条的位置
+     * @param ratio 取值：0~1
+     */
+    refreshPos: function (ratio) {
+        if(ratio >= 1 || ratio < 0){ // 等于1时，js的%取值有问题，故排除
+            return;
+        }
+        // 根据触点位置更新进度条
+        var percentage = ratio*100;
+        this.sliderNode.css("left", percentage+"%");
+        this.fillNode.css("width", percentage+"%");
+
+        var unit = 1 / this.option.stepCount,
+            halfUnit = unit / 2,
+            a = Math.floor(ratio / unit),
+            b = ratio % unit,
+            index = a + (b<halfUnit ? 0 : 1);
+        this.val = this.option.min + index*this.option.step;
+        this.relateValNode.text(this.val + "%");
+    },
+    /**
+     * 设置指定的进度值
+     */
+    setVal: function (val) {
+        var ratio = (val-this.option.min) / (this.option.step * this.option.stepCount);
+        this.refreshPos(ratio);
+    },
+    _init: function () {
+        var bar = this;
+        if(!(bar.barNode.width() > 0)){
+            setTimeout(function () {
+                bar._init();
+            }, 100); // 直到vm渲染完成之后才能取得正确的dom高宽
+            return;
+        }
+        bar.leftDis = bar.barNode.offset().left;
+        bar.sliderWidth = bar.barNode.width();
+
+        bar.barNode.on("touchmove", function (e) {
+            e.preventDefault();
+            var touch = e.changedTouches ? e.changedTouches[0] : e;
+            var ratio = (touch.pageX - bar.leftDis) / bar.sliderWidth;
+            bar.refreshPos(ratio);
+        });
+
+        bar.barNode.on("touchend", function (e) {  //事件代理
+            e.preventDefault();
+            var touch = e.changedTouches ? e.changedTouches[0] : e;
+            var ratio = (touch.pageX - bar.leftDis) / bar.sliderWidth;
+            bar.refreshPos(ratio);
+            bar.option.touchEnd(bar.val);
+        });
+    }
+};