|
@@ -0,0 +1,293 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
+ <meta name="viewport" content="width=750, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
|
+ <meta name="keywords" content="" />
|
|
|
+ <meta name="description" content="" />
|
|
|
+ <title>设备管理</title>
|
|
|
+ <!-- FAVICON AND APPLE TOUCH -->
|
|
|
+ <link href="favicon.ico" rel="shortcut icon" />
|
|
|
+ <link rel="apple-touch-icon-precomposed" sizes="180x180" />
|
|
|
+ <meta name="msapplication-TileImage" content="mstile.png" />
|
|
|
+ <link rel="stylesheet" href="css/common.css" />
|
|
|
+ <meta name="viewport" content="width=375, user-scalable=no" />
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="page-wrapper">
|
|
|
+
|
|
|
+ <div class="filterSection">
|
|
|
+ <input type="text" placeholder="请选择传输方式">
|
|
|
+ <span class="search">查询</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="device-list parent">
|
|
|
+ <div class="noResult">
|
|
|
+ <p>暂无查询结果...</p>
|
|
|
+ </div>
|
|
|
+ <p class="refreshText"></p>
|
|
|
+ <ul id="content-box">
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox onlineColor">在线</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt="" w></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox offlineColor">离线</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ <li class="device-item">
|
|
|
+ <div class="iconBox"><img src="image/device-icon.png" alt=""></div>
|
|
|
+ <div class="desBox">
|
|
|
+ <p class="device-tit">测试用传装置</p>
|
|
|
+ <p>三楼茶水间</p>
|
|
|
+ <p>2020-01-08 15:15:08</p>
|
|
|
+ </div>
|
|
|
+ <div class="statusBox hitchColor">故障</div>
|
|
|
+ <div class="arrowRight"><img src="image/right-icon.png" alt=""></div>
|
|
|
+ <div class="operate-box">
|
|
|
+ <ul>
|
|
|
+ <li class="opera-edit" οnclick="javascrtpt:window.location.href='add.html'">修改设备 </li>
|
|
|
+ <li class="opera-delete">删除设备</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ <a href="add.html"><img class="plus" src="image/plus-icon.png" alt=""></a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="js/layout.js"></script>
|
|
|
+ <script src="js/jquery-2.2.2.min.js"></script>
|
|
|
+ <script>
|
|
|
+ // 手机长按事件
|
|
|
+ var timeOutEvent = 0;
|
|
|
+ var _this;
|
|
|
+ $(function() {
|
|
|
+ $(".desBox").on({
|
|
|
+ touchstart: function(e) {
|
|
|
+ _this = $(this)
|
|
|
+ timeOutEvent = setTimeout("longPress()", 500);
|
|
|
+ //e.preventDefault();
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ touchmove: function() {
|
|
|
+ clearTimeout(timeOutEvent);
|
|
|
+ timeOutEvent = 0;
|
|
|
+ //document.removeEventListener('touchstart', this.preventDefault, false);
|
|
|
+ },
|
|
|
+ touchend: function() {
|
|
|
+ clearTimeout(timeOutEvent);
|
|
|
+ if (timeOutEvent != 0) {
|
|
|
+ // alert("你这是点击,不是长按");
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ function longPress() {
|
|
|
+ timeOutEvent = 0;
|
|
|
+ // alert("长按事件触发发");
|
|
|
+ _this.parent().find('.operate-box').show().parent().siblings().find('.operate-box').hide();
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ //点击修改页面跳转
|
|
|
+ $(".device-item").on("touchend", ".opera-edit", function() {
|
|
|
+ // alert("子元素点击");
|
|
|
+ window.location.href = "add.html";
|
|
|
+ })
|
|
|
+ $(".device-item").on("touchend", ".opera-delete", function() {
|
|
|
+ // alert("子元素点击");
|
|
|
+ $(this).parent().parent().parent().remove();
|
|
|
+ })
|
|
|
+
|
|
|
+ // 点击除按钮和弹框之外任意地方隐藏表情
|
|
|
+ $("body").click(function(e) {
|
|
|
+ if ($('.operate-box').is(':visible')) {
|
|
|
+ if (!$(e.target).closest(".operate-box").length) {
|
|
|
+ // alert(1);
|
|
|
+ $(".operate-box").hide();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|