├── js ├── up.js ├── test.js ├── manage.js ├── flow.js ├── bootstrap.min.js └── jquery-1.4.2.min.js ├── img ├── bg.gif ├── photo ├── end.png ├── line.png ├── start.png ├── task.png ├── branch.png └── select.gif ├── manage ├── config.php ├── class │ ├── xyobject.class.php │ ├── user.class.php │ ├── xymysql.class.php │ └── data.class.php └── index.php ├── up.html ├── index.html └── css ├── style.css └── bootstrap-responsive.min.css /js/up.js: -------------------------------------------------------------------------------- 1 | // $('input').val('C:\\fakepath\\第二次报告-徐扬.doc') -------------------------------------------------------------------------------- /img/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/bg.gif -------------------------------------------------------------------------------- /img/photo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/photo -------------------------------------------------------------------------------- /img/end.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/end.png -------------------------------------------------------------------------------- /img/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/line.png -------------------------------------------------------------------------------- /img/start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/start.png -------------------------------------------------------------------------------- /img/task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/task.png -------------------------------------------------------------------------------- /img/branch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/branch.png -------------------------------------------------------------------------------- /img/select.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jocelynthink/myflow/master/img/select.gif -------------------------------------------------------------------------------- /manage/config.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /up.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flow 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /manage/class/xyobject.class.php: -------------------------------------------------------------------------------- 1 | errmsg = "_XY_OK_"; 13 | static $inited = false; 14 | //只初始化一次 15 | if ($inited) 16 | return; 17 | self::$db = get_class($this) == "XYMysql" ? $this : new XYMysql(); 18 | $inited = true; 19 | } 20 | 21 | //获得错误代码 22 | public function errno() { 23 | return $this->errno; 24 | } 25 | 26 | //获得错误信息 27 | public function errmsg() { 28 | return $this->errmsg; 29 | } 30 | 31 | public function setAuth($accesskey, $secretkey) { 32 | 33 | } 34 | 35 | } 36 | 37 | ?> -------------------------------------------------------------------------------- /js/test.js: -------------------------------------------------------------------------------- 1 | //(function($){ 2 | var p = Raphael(30,30,700,700); 3 | dashed = {fill: Raphael.getColor(), stroke: "#666", cursor: "move"}; 4 | var re = [p.rect(10,10,40,40,5).attr(dashed),p.rect(150,150,40,40,5).attr(dashed)]; 5 | 6 | // re[1].drag(function(dx,dy){ 7 | // // console.log(event); 8 | // this.attr({ x: this.ox + dx, y: this.oy + dy}); 9 | 10 | // },function(){ 11 | // console.log(this); 12 | // this.ox = this.attr('x'); 13 | // this.oy = this.attr('y'); 14 | 15 | // },function(){ 16 | // console.log(this); 17 | // }) 18 | 19 | var start = function() { 20 | this.ox = this.attr("x"); 21 | this.oy = this.attr("y"); 22 | this.animate(); 23 | }, 24 | move = function(dx, dy) { 25 | var x = this.ox + dx, 26 | y = this.oy + dy; 27 | console.log(x+','+y); 28 | this.attr({ 29 | x: x, 30 | y: y 31 | }); 32 | x += this.getBBox().width/2; 33 | $(l[0]).attr({'d':'M50 50L'+x+' 50 '+x+' '+y}); 34 | }, 35 | up = function() { 36 | this.animate(); 37 | }; 38 | 39 | var l = p.path('M50ioio 50L170 50 170 150').attr({'arrow-end': 'clissic', 'stroke-width': '3px'}); 40 | 41 | re[1].drag(move,start,up); 42 | //})(jQuery); -------------------------------------------------------------------------------- /manage/index.php: -------------------------------------------------------------------------------- 1 | checkUser(); 14 | break; 15 | // 登陆 16 | case 'l': 17 | $m = new User(); 18 | $m->login(); 19 | break; 20 | // 登出 21 | case 'lo': 22 | $m = new User(); 23 | $m->logout(); 24 | break; 25 | //注册 26 | case 'rg': 27 | $m = new User(); 28 | $m->register(); 29 | break; 30 | // 保存 31 | case 'sv': 32 | $m = new Data(); 33 | $m->save(); 34 | break; 35 | // 验证流程图是否存在 36 | case 'cn': 37 | $m = new Data(); 38 | $m->checkName(); 39 | break; 40 | // 获取文件列表 41 | case 'fl': 42 | $m = new Data(); 43 | $m->getFileList(); 44 | break; 45 | // 获取单个文件内容 46 | case 'gf': 47 | $m = new Data(); 48 | $m->getFile(); 49 | break; 50 | // 重命名 51 | case 'rn': 52 | $m = new Data(); 53 | $m->renameFile(); 54 | break; 55 | //删除文件 56 | case 'dl': 57 | $m = new Data(); 58 | $m->deleteFile(); 59 | break; 60 | // 下载文件 61 | case 'df': 62 | $m = new Data(); 63 | $m->downloadFile(); 64 | break; 65 | // 上传文件 66 | case 'uf': 67 | $m = new Data(); 68 | $m->uploadFile(); 69 | break; 70 | default: 71 | break; 72 | } 73 | ?> -------------------------------------------------------------------------------- /manage/class/user.class.php: -------------------------------------------------------------------------------- 1 | mysql = new XYMysql(); 12 | } 13 | 14 | public function checkUser(){ 15 | if(isset($_SESSION['nickname'])){ 16 | $dd['nickname'] = $_SESSION['nickname']; 17 | $dd['head'] = $_SESSION['head']; 18 | $dd = json_encode($dd); 19 | echo $_REQUEST['c']."(".$dd.")"; 20 | }else{ 21 | echo $_REQUEST['c']."('no loged!')"; 22 | } 23 | 24 | } 25 | public function login(){ 26 | $sql = "select * from ".PRE."user where username='".$_REQUEST['username']."'"; 27 | // echo $sql; 28 | $data = $this->mysql->getLine($sql); 29 | // var_dump($data); 30 | if($data && $data['password'] == $_REQUEST['password']){ 31 | $_SESSION['username'] = $data['username']; 32 | $_SESSION['nickname'] = $data['nickname']; 33 | $_SESSION['email'] = $data['email']; 34 | $_SESSION['head'] = $data['head']; 35 | 36 | // $dd['username'] = $data['username']; 37 | $dd = json_encode($data); 38 | echo $_REQUEST['c']."(".$dd.")"; 39 | } 40 | 41 | } 42 | public function logout(){ 43 | $_SESSION['username'] = null; 44 | $_SESSION['nickname'] = null; 45 | $_SESSION['email'] = null; 46 | $_SESSION['head'] = null; 47 | if(isset($_SESSION['username'])){ 48 | echo $_REQUEST['c']."('Logout false!')"; 49 | }else{ 50 | echo $_REQUEST['c']."('Logout success!')"; 51 | } 52 | } 53 | public function register(){ 54 | $sql = "select * from ".PRE."user where username='".$_REQUEST['username']."'"; 55 | // echo $sql.'\n'; 56 | $data = $this->mysql->getLine($sql); 57 | if($data){ 58 | echo $_REQUEST['c']."('Username exit!')"; 59 | }else{ 60 | $sql = "SELECT count(id) as num from ".PRE."user"; 61 | $n = $this->mysql->getLine($sql); 62 | 63 | $sql = "insert into ".PRE."user ( id , username , password , email , nickname , head ) values ('".($n['num']+1)."' , '".$_REQUEST['username']."' , '".$_REQUEST['password']."' , '".$_REQUEST['email']."' , '".$_REQUEST['nickname']."' , '".$_REQUEST['head']."')"; 64 | // echo $sql; 65 | $this->mysql->runSql($sql); 66 | if($this->mysql->errno() != 0){ 67 | die("Error:".$this->mysql->errmsg()); 68 | } 69 | $_SESSION['username'] = $_REQUEST['username']; 70 | $_SESSION['nickname'] = $_REQUEST['nickname']; 71 | $_SESSION['email'] = $_REQUEST['email']; 72 | $_SESSION['head'] = $_REQUEST['head']; 73 | $dd['username'] = $_REQUEST['username']; 74 | $dd['nickname'] = $_REQUEST['nickname']; 75 | $dd['email'] = $_REQUEST['email']; 76 | $dd['head'] = $_REQUEST['head']; 77 | $dd = json_encode($dd); 78 | echo $_REQUEST['c']."(".$dd.")"; 79 | } 80 | } 81 | } 82 | 83 | 84 | 85 | ?> -------------------------------------------------------------------------------- /manage/class/xymysql.class.php: -------------------------------------------------------------------------------- 1 | connect(); 11 | parent::__construct(); 12 | } 13 | 14 | //连接数据库 15 | protected function connect() { 16 | 17 | /*从环境变量里取出数据库连接需要的参数*/ 18 | 19 | self::$link = mysql_connect(SERVER, USERNAME, PASSWD) or die('_XY_CONNECT_DB_ERR_'); 20 | mysql_select_db(DBNAME, self::$link); 21 | 22 | mysql_query("set names 'utf8'"); 23 | mysql_select_db(DBNAME, self::$link) ; 24 | //} 25 | } 26 | 27 | //返回影响条数 28 | public function affectedRows() { 29 | return mysql_affected_rows(self::$link); 30 | } 31 | 32 | //关闭数据库 33 | public function closeDb() { 34 | mysql_close(self::$link); 35 | } 36 | 37 | //escape 38 | public function escape($str) { 39 | return mysql_real_escape_string($str, self::$link); 40 | } 41 | 42 | //获得数据,返回数组 43 | public function getData($sql) { 44 | $this->last_sql = $sql; 45 | $result = mysql_query($sql, self::$link); 46 | if(!$result){ 47 | return false; 48 | } 49 | $this->save_error(); 50 | $data = array(); 51 | while ($arr = mysql_fetch_array($result,MYSQL_ASSOC)) { 52 | $data[] = $arr; 53 | } 54 | mysql_free_result($result); 55 | return $data; 56 | } 57 | 58 | //返回第一条数据 59 | public function getLine($sql) { 60 | $data = $this->getData($sql); 61 | if ($data) { 62 | return @reset($data); 63 | } else { 64 | return false; 65 | } 66 | } 67 | 68 | //返回第一条记录的第一个字段值 69 | public function getVar($sql) { 70 | $data = $this->getLine($sql); 71 | if ($data) { 72 | return $data[@reset(@array_keys($data))]; 73 | } else { 74 | return false; 75 | } 76 | } 77 | 78 | //返回最后一个id 79 | public function lastId() { 80 | return mysql_insert_id(self::$link); 81 | } 82 | 83 | //运行sql语句 84 | public function runSql($sql) { 85 | $ret = mysql_query($sql); 86 | $this->save_error(); 87 | return $ret; 88 | } 89 | 90 | //设置项目名 91 | public function setAppname($appname) { 92 | 93 | } 94 | 95 | //设置字符集 96 | public function setCharset($charset) { 97 | self::$charset = $charset; 98 | mysql_query("set names " . self::$charset, self::$link); 99 | } 100 | 101 | //设置端口 102 | public function setPort($port) { 103 | 104 | } 105 | 106 | protected function save_error() { 107 | $this->errmsg = mysql_error(self::$link); 108 | $this->errno = mysql_errno(self::$link); 109 | } 110 | 111 | } 112 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flow 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |

Web流程设计器

14 |
15 |
16 |

状态:选择元素

17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 | 27 |
28 |
29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 |
38 |
39 | 52 |
53 | 54 |
55 |
56 |
57 |
58 | 选择 59 |
60 |
61 | 连线 62 |
63 |
64 |
65 | 66 | 开始 67 |
68 |
69 | 70 | 状态 71 |
72 |
73 | 74 | 分支 75 |
76 |
77 | 78 | 任务 79 |
80 |
81 | 82 | 结束 83 |
84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .top{ 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | height: 60px; 10 | min-width: 1366px; 11 | width: 100%; 12 | background-color: #F7F7F7; 13 | box-shadow: 0 -15px 30px #808080 inset; 14 | } 15 | .top div{ 16 | float: left; 17 | padding: 5px; 18 | } 19 | .top .name{ 20 | float: left; 21 | margin-top: -5px; 22 | margin-left: 25px; 23 | } 24 | .top .handle{ 25 | float: left; 26 | margin-left: 100px; 27 | padding-top: 10px; 28 | color: #F07D31; 29 | } 30 | .top .user{ 31 | float: right; 32 | } 33 | .top .user .function{ 34 | 35 | } 36 | .top .user .function div{ 37 | margin: 0 10px; 38 | } 39 | 40 | .top .user .info{ 41 | margin: -5px 30px 0 20px; 42 | cursor: pointer; 43 | } 44 | /*.top .user .info:hover>.dropdown .dropdown-menu{ 45 | display: block; 46 | }*/ 47 | .top .user .info .dropdown .dropdown-menu{ 48 | min-width: 100px; 49 | } 50 | .top .user .info .dropdown .dropdown-menu:before { 51 | position: absolute; 52 | top: -7px; 53 | left: 9px; 54 | display: inline-block; 55 | border-right: 7px solid transparent; 56 | border-bottom: 7px solid #ccc; 57 | border-left: 7px solid transparent; 58 | border-bottom-color: rgba(0,0,0,0.2); 59 | content: ''; 60 | right: 12px; 61 | left: auto; 62 | } 63 | .top .user .info .dropdown .dropdown-menu:after { 64 | position: absolute; 65 | top: -6px; 66 | left: 10px; 67 | display: inline-block; 68 | border-right: 6px solid transparent; 69 | border-bottom: 6px solid #fff; 70 | border-left: 6px solid transparent; 71 | content: ''; 72 | right: 13px; 73 | left: auto; 74 | } 75 | .dashboard{ 76 | background: #F7F7F7; 77 | box-shadow: 0 -10px 50px #808080 inset; 78 | margin: 0 10px 10px 0; 79 | padding: 20px; 80 | /*border: 2px solid #000;*/ 81 | width: 150px; 82 | height: 400px; 83 | position: absolute; 84 | top: 60px; 85 | z-index: 1000; 86 | } 87 | .dashboard div{ 88 | display: block; 89 | margin: 4px; 90 | /*padding: 4px;*/ 91 | border: 1px solid #333; 92 | text-align: center; 93 | cursor: move; 94 | /*position: absolute;*/ 95 | } 96 | .dashboard .choose, .dashboard .line{ 97 | padding: 4px; 98 | height: 30px; 99 | width: 120px; 100 | margin-left: 10px; 101 | line-height: 27px; 102 | cursor: pointer; 103 | 104 | border: 2px solid #D5D5D5; 105 | } 106 | .dashboard .drag{ 107 | margin-top: 20px; 108 | height: auto; 109 | /*min-height: 250px;*/ 110 | padding: 20px auto; 111 | border: 2px solid #D5D5D5; 112 | } 113 | .dashboard .drag div:hover{ 114 | background: #fff; 115 | } 116 | .dashboard .drag div{ 117 | padding: 4px; 118 | height: 30px; 119 | width: 120px; 120 | line-height: 27px; 121 | background: #ddd; 122 | border-radius: 0; 123 | box-shadow: 0 0 40px #fff inset; 124 | border: 2px solid #D5D5D5; 125 | 126 | } 127 | .flow{ 128 | position: absolute; 129 | left: 0; 130 | top: 60px; 131 | min-width: 1366px; 132 | min-height: 613px; 133 | background: url(../img/bg.gif); 134 | /*width: 700px; 135 | height: 600px;*/ 136 | } 137 | .content{ 138 | position: absolute; 139 | background-color: #fff; 140 | border: 2px solid #666; 141 | right: 50px; 142 | top:100px; 143 | padding: 0 15px 15px 15px; 144 | } 145 | .content .form{ 146 | 147 | } 148 | .content .form label{ 149 | display: inline; 150 | margin: 0 6px 5px 2px; 151 | } 152 | .content .form input, .content .form textarea{ 153 | margin: 10px; 154 | } 155 | .content .form .add{ 156 | font-size: 22px; 157 | margin-left: 75px; 158 | } 159 | .content .form .del{ 160 | font-size: 22px; 161 | margin: 19px; 162 | } 163 | .content .form .value{ 164 | width: 78px; 165 | } 166 | .content .form .butt{ 167 | margin: 0 22px; 168 | } 169 | .myalert{ 170 | z-index: 1200; 171 | position: absolute; 172 | height: 350px; 173 | width: 500px; 174 | background-color: #EEEEEE; 175 | border-radius: 5px; 176 | opacity: 0.8; 177 | /*border: 2px solid #336699;*/ 178 | box-shadow: 0 0 10px #336699; 179 | } 180 | .cover{ 181 | z-index: 1100; 182 | position: absolute; 183 | width: 100%; 184 | height: 100%; 185 | background-color: #CCCCCC; 186 | opacity: 0.6; 187 | } 188 | .cont { 189 | margin: 80px 50px; 190 | 191 | } 192 | .cont div{ 193 | margin: 20px; 194 | } 195 | .cont label,.cont input{ 196 | display: inline; 197 | margin: 0 20px; 198 | } 199 | .cont .inp label{ 200 | line-height: 40px; 201 | } 202 | .cont .inp label,.cont .inp input{ 203 | font-size: 17.5px; 204 | height: 30px; 205 | } 206 | .cont .inp img{ 207 | margin-bottom: 8px; 208 | } 209 | .cont .butt{ 210 | margin: 70px 0 0 100px; 211 | } 212 | -------------------------------------------------------------------------------- /manage/class/data.class.php: -------------------------------------------------------------------------------- 1 | mysql = new XYMysql(); 13 | } 14 | public function checkName(){ 15 | $sql = "select * from ".PRE."data where name='".$_REQUEST['name']."' and username='".$_SESSION['username']."'"; 16 | // echo $sql; 17 | $data = $this->mysql->getLine($sql); 18 | if($data){ 19 | // $data = json_encode($data); 20 | echo $_REQUEST['c']."('yes')"; 21 | }else{ 22 | echo $_REQUEST['c']."('no')"; 23 | } 24 | } 25 | public function save(){ 26 | $sql = "select * from ".PRE."data where name='".$_REQUEST['name']."' and username='".$_SESSION['username']."'"; 27 | // echo $sql.'\n'; 28 | $data = $this->mysql->getLine($sql); 29 | if($data){ 30 | $sql = "update ".PRE."data set data='".$_REQUEST['data']."' where id=".$data['id']; 31 | $this->mysql->runSql($sql); 32 | if($this->mysql->errno() != 0){ 33 | die("Error:".$this->Mysql->errmsg()); 34 | } 35 | // $data = json_encode($data); 36 | echo "'yes'"; 37 | // echo $_REQUEST['c']."('yes')"; 38 | }else{ 39 | $sql = "SELECT id from ".PRE."data order by id desc"; 40 | $n = $this->mysql->getData($sql); 41 | 42 | $sql = "insert into ".PRE."data ( id , name , username , data ) values ('".($n[0]['id']+1)."' , '".$_REQUEST['name']."' , '".$_SESSION['username']."' , '".$_REQUEST['data']."')"; 43 | // echo $sql; 44 | $this->mysql->runSql($sql); 45 | if($this->mysql->errno() != 0){ 46 | die("Error:".$this->mysql->errmsg()); 47 | } 48 | echo "'yes'"; 49 | // echo "('yes')"; 50 | // echo $_REQUEST['c']."(no)"; 51 | } 52 | } 53 | public function getFileList(){ 54 | $sql = "select name from ".PRE."data where username='".$_SESSION['username']."' order by id desc"; 55 | $data = $this->mysql->getData($sql); 56 | if($data){ 57 | $dd = json_encode($data); 58 | echo $_REQUEST['c']."(".$dd.")"; 59 | }else{ 60 | echo $_REQUEST['c']."({})"; 61 | } 62 | } 63 | public function getFile(){ 64 | $sql = "select data from ".PRE."data where name='".$_REQUEST['name']."' and username='".$_SESSION['username']."'"; 65 | $data = $this->mysql->getLine($sql); 66 | if($data){ 67 | // $dd = json_encode($data); 68 | echo $_REQUEST['c']."(".$data['data'].")"; 69 | }else{ 70 | echo $_REQUEST['c']."({})"; 71 | } 72 | } 73 | public function renameFile(){ 74 | $sql = "select * from ".PRE."data where name='".$_REQUEST['oldname']."' and username='".$_SESSION['username']."'"; 75 | // echo $sql.'\n'; 76 | $data = $this->mysql->getLine($sql); 77 | if($data){ 78 | $sql = "update ".PRE."data set name='".$_REQUEST['newname']."' where id=".$data['id']; 79 | $this->mysql->runSql($sql); 80 | if($this->mysql->errno() != 0){ 81 | die("Error:".$this->mysql->errmsg()); 82 | } 83 | // $data = json_encode($data); 84 | // echo "'yes'"; 85 | echo $_REQUEST['c']."('yes')"; 86 | }else{ 87 | $sql = "select * from ".PRE."data where name='".$_REQUEST['newname']."' and username='".$_SESSION['username']."'"; 88 | $data = $this->mysql->getLine($sql); 89 | if($data){ 90 | $sql = "update ".PRE."data set name='".$_REQUEST['newname']."' where id=".$data['id']; 91 | $this->mysql->runSql($sql); 92 | if($this->mysql->errno() != 0){ 93 | die("Error:".$this->mysql->errmsg()); 94 | } 95 | // $data = json_encode($data); 96 | // echo "'yes'"; 97 | echo $_REQUEST['c']."('yes')"; 98 | }else{ 99 | $sql = "SELECT id from ".PRE."data order by id desc"; 100 | $n = $this->mysql->getData($sql); 101 | 102 | $sql = "insert into ".PRE."data ( id , name , username , data ) values ('".($n[0]['id']+1)."' , '".$_REQUEST['newname']."' , '".$_SESSION['username']."' , '{}')"; 103 | // echo $sql; 104 | $this->mysql->runSql($sql); 105 | if($this->mysql->errno() != 0){ 106 | die("Error:".$this->mysql->errmsg()); 107 | } 108 | // echo "'yes'"; 109 | // echo "('yes')"; 110 | echo $_REQUEST['c']."('yes')"; 111 | } 112 | } 113 | } 114 | public function deleteFile(){ 115 | $sql = "delete from ".PRE."data where name='".$_REQUEST['name']."' and username='".$_SESSION['username']."'"; 116 | $this->mysql->runSql($sql); 117 | if($this->mysql->errno() != 0){ 118 | die("Error:".$this->mysql->errmsg()); 119 | } 120 | else{ 121 | echo $_REQUEST['c']."('yes')"; 122 | } 123 | } 124 | public function downloadFile(){ 125 | $sql = "select data from ".PRE."data where name='".$_REQUEST['name']."' and username='".$_SESSION['username']."'"; 126 | $data = $this->mysql->getLine($sql); 127 | if($data){ 128 | $name = $_REQUEST['name'].'.json'; 129 | // $path = 'fileTmp/'.$name; 130 | // $fp = fopen($path,'w'); 131 | // fwrite($fp , $data['data']); 132 | // fclose($fp); 133 | // $file = fopen($path,"r"); 134 | Header("Content-type: application/octet-stream"); 135 | Header("Accept-Ranges: bytes"); 136 | // Header("Accept-Length: ".filesize($path)); 137 | Header("Content-Disposition: attachment; filename=".$name); 138 | echo $data['data']; 139 | // echo fread($file, filesize($path)); 140 | // fclose($file); 141 | 142 | // $dd = json_encode($data); 143 | // echo $_REQUEST['c']."('".$name."')"; 144 | }else{ 145 | // echo ""; 146 | } 147 | } 148 | public function uploadFile(){ 149 | // header("Content-type:txt/html"); 150 | header("Content-type: text/html; charset=utf-8"); 151 | // echo $form->isMultipart(); 152 | $content = file_get_contents($_FILES['f']['tmp_name']); 153 | $name = explode(".", $_FILES['f']['name'])[0]; 154 | // var_dump(); 155 | // echo $name; 156 | $sql = "select id from ".PRE."data where name='".$name."' and username='".$_SESSION['username']."'"; 157 | // echo $sql.'\n'; 158 | $data = $this->mysql->getLine($sql); 159 | echo ''; 160 | if($data){ 161 | $sql = "update ".PRE."data set data='".$content."' where id=".$data['id']; 162 | $this->mysql->runSql($sql); 163 | if($this->mysql->errno() != 0){ 164 | die("Error:".$this->mysql->errmsg()); 165 | } 166 | // $data = json_encode($data); 167 | // echo "

上传成功

"; 168 | // echo $_REQUEST['c']."('yes')"; 169 | echo ''; 179 | }else{ 180 | $sql = "SELECT id from ".PRE."data order by id desc"; 181 | $n = $this->mysql->getData($sql); 182 | 183 | $sql = "insert into ".PRE."data ( id , name , username , data ) values ('".($n[0]['id']+1)."' , '".$name."' , '".$_SESSION['username']."' , '".$content."')"; 184 | // echo $sql; 185 | $this->mysql->runSql($sql); 186 | if($this->mysql->errno() != 0){ 187 | die("Error:".$this->mysql->errmsg()); 188 | } 189 | // echo "

上传成功

"; 190 | // echo "('yes')"; 191 | // echo $_REQUEST['c']."(no)"; 192 | echo ''; 203 | } 204 | echo '

上传成功

'; 205 | echo ''; 208 | 209 | } 210 | 211 | } 212 | 213 | 214 | 215 | ?> -------------------------------------------------------------------------------- /css/bootstrap-responsive.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap Responsive v2.2.2 3 | * 4 | * Copyright 2012 Twitter, Inc 5 | * Licensed under the Apache License v2.0 6 | * http://www.apache.org/licenses/LICENSE-2.0 7 | * 8 | * Designed and built with all the love in the world @twitter by @mdo and @fat. 9 | */@-ms-viewport{width:device-width}.clearfix{*zoom:1}.clearfix:before,.clearfix:after{display:table;line-height:0;content:""}.clearfix:after{clear:both}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.hidden{display:none;visibility:hidden}.visible-phone{display:none!important}.visible-tablet{display:none!important}.hidden-desktop{display:none!important}.visible-desktop{display:inherit!important}@media(min-width:768px) and (max-width:979px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-tablet{display:inherit!important}.hidden-tablet{display:none!important}}@media(max-width:767px){.hidden-desktop{display:inherit!important}.visible-desktop{display:none!important}.visible-phone{display:inherit!important}.hidden-phone{display:none!important}}@media(min-width:1200px){.row{margin-left:-30px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:30px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px}.span12{width:1170px}.span11{width:1070px}.span10{width:970px}.span9{width:870px}.span8{width:770px}.span7{width:670px}.span6{width:570px}.span5{width:470px}.span4{width:370px}.span3{width:270px}.span2{width:170px}.span1{width:70px}.offset12{margin-left:1230px}.offset11{margin-left:1130px}.offset10{margin-left:1030px}.offset9{margin-left:930px}.offset8{margin-left:830px}.offset7{margin-left:730px}.offset6{margin-left:630px}.offset5{margin-left:530px}.offset4{margin-left:430px}.offset3{margin-left:330px}.offset2{margin-left:230px}.offset1{margin-left:130px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%}.row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%}.row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%}.row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%}.row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%}.row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%}.row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%}.row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%}.row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%}.row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%}.row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%}.row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%}.row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%}.row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%}.row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%}.row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%}.row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%}.row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%}.row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%}.row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%}.row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%}.row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%}.row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%}.row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%}.row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%}.row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%}.row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%}.row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%}.row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%}.row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%}.row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%}.row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%}.row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%}.row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%}.row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:30px}input.span12,textarea.span12,.uneditable-input.span12{width:1156px}input.span11,textarea.span11,.uneditable-input.span11{width:1056px}input.span10,textarea.span10,.uneditable-input.span10{width:956px}input.span9,textarea.span9,.uneditable-input.span9{width:856px}input.span8,textarea.span8,.uneditable-input.span8{width:756px}input.span7,textarea.span7,.uneditable-input.span7{width:656px}input.span6,textarea.span6,.uneditable-input.span6{width:556px}input.span5,textarea.span5,.uneditable-input.span5{width:456px}input.span4,textarea.span4,.uneditable-input.span4{width:356px}input.span3,textarea.span3,.uneditable-input.span3{width:256px}input.span2,textarea.span2,.uneditable-input.span2{width:156px}input.span1,textarea.span1,.uneditable-input.span1{width:56px}.thumbnails{margin-left:-30px}.thumbnails>li{margin-left:30px}.row-fluid .thumbnails{margin-left:0}}@media(min-width:768px) and (max-width:979px){.row{margin-left:-20px;*zoom:1}.row:before,.row:after{display:table;line-height:0;content:""}.row:after{clear:both}[class*="span"]{float:left;min-height:1px;margin-left:20px}.container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:724px}.span12{width:724px}.span11{width:662px}.span10{width:600px}.span9{width:538px}.span8{width:476px}.span7{width:414px}.span6{width:352px}.span5{width:290px}.span4{width:228px}.span3{width:166px}.span2{width:104px}.span1{width:42px}.offset12{margin-left:764px}.offset11{margin-left:702px}.offset10{margin-left:640px}.offset9{margin-left:578px}.offset8{margin-left:516px}.offset7{margin-left:454px}.offset6{margin-left:392px}.offset5{margin-left:330px}.offset4{margin-left:268px}.offset3{margin-left:206px}.offset2{margin-left:144px}.offset1{margin-left:82px}.row-fluid{width:100%;*zoom:1}.row-fluid:before,.row-fluid:after{display:table;line-height:0;content:""}.row-fluid:after{clear:both}.row-fluid [class*="span"]{display:block;float:left;width:100%;min-height:30px;margin-left:2.7624309392265194%;*margin-left:2.709239449864817%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="span"]:first-child{margin-left:0}.row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.7624309392265194%}.row-fluid .span12{width:100%;*width:99.94680851063829%}.row-fluid .span11{width:91.43646408839778%;*width:91.38327259903608%}.row-fluid .span10{width:82.87292817679558%;*width:82.81973668743387%}.row-fluid .span9{width:74.30939226519337%;*width:74.25620077583166%}.row-fluid .span8{width:65.74585635359117%;*width:65.69266486422946%}.row-fluid .span7{width:57.18232044198895%;*width:57.12912895262725%}.row-fluid .span6{width:48.61878453038674%;*width:48.56559304102504%}.row-fluid .span5{width:40.05524861878453%;*width:40.00205712942283%}.row-fluid .span4{width:31.491712707182323%;*width:31.43852121782062%}.row-fluid .span3{width:22.92817679558011%;*width:22.87498530621841%}.row-fluid .span2{width:14.3646408839779%;*width:14.311449394616199%}.row-fluid .span1{width:5.801104972375691%;*width:5.747913483013988%}.row-fluid .offset12{margin-left:105.52486187845304%;*margin-left:105.41847889972962%}.row-fluid .offset12:first-child{margin-left:102.76243093922652%;*margin-left:102.6560479605031%}.row-fluid .offset11{margin-left:96.96132596685082%;*margin-left:96.8549429881274%}.row-fluid .offset11:first-child{margin-left:94.1988950276243%;*margin-left:94.09251204890089%}.row-fluid .offset10{margin-left:88.39779005524862%;*margin-left:88.2914070765252%}.row-fluid .offset10:first-child{margin-left:85.6353591160221%;*margin-left:85.52897613729868%}.row-fluid .offset9{margin-left:79.8342541436464%;*margin-left:79.72787116492299%}.row-fluid .offset9:first-child{margin-left:77.07182320441989%;*margin-left:76.96544022569647%}.row-fluid .offset8{margin-left:71.2707182320442%;*margin-left:71.16433525332079%}.row-fluid .offset8:first-child{margin-left:68.50828729281768%;*margin-left:68.40190431409427%}.row-fluid .offset7{margin-left:62.70718232044199%;*margin-left:62.600799341718584%}.row-fluid .offset7:first-child{margin-left:59.94475138121547%;*margin-left:59.838368402492065%}.row-fluid .offset6{margin-left:54.14364640883978%;*margin-left:54.037263430116376%}.row-fluid .offset6:first-child{margin-left:51.38121546961326%;*margin-left:51.27483249088986%}.row-fluid .offset5{margin-left:45.58011049723757%;*margin-left:45.47372751851417%}.row-fluid .offset5:first-child{margin-left:42.81767955801105%;*margin-left:42.71129657928765%}.row-fluid .offset4{margin-left:37.01657458563536%;*margin-left:36.91019160691196%}.row-fluid .offset4:first-child{margin-left:34.25414364640884%;*margin-left:34.14776066768544%}.row-fluid .offset3{margin-left:28.45303867403315%;*margin-left:28.346655695309746%}.row-fluid .offset3:first-child{margin-left:25.69060773480663%;*margin-left:25.584224756083227%}.row-fluid .offset2{margin-left:19.88950276243094%;*margin-left:19.783119783707537%}.row-fluid .offset2:first-child{margin-left:17.12707182320442%;*margin-left:17.02068884448102%}.row-fluid .offset1{margin-left:11.32596685082873%;*margin-left:11.219583872105325%}.row-fluid .offset1:first-child{margin-left:8.56353591160221%;*margin-left:8.457152932878806%}input,textarea,.uneditable-input{margin-left:0}.controls-row [class*="span"]+[class*="span"]{margin-left:20px}input.span12,textarea.span12,.uneditable-input.span12{width:710px}input.span11,textarea.span11,.uneditable-input.span11{width:648px}input.span10,textarea.span10,.uneditable-input.span10{width:586px}input.span9,textarea.span9,.uneditable-input.span9{width:524px}input.span8,textarea.span8,.uneditable-input.span8{width:462px}input.span7,textarea.span7,.uneditable-input.span7{width:400px}input.span6,textarea.span6,.uneditable-input.span6{width:338px}input.span5,textarea.span5,.uneditable-input.span5{width:276px}input.span4,textarea.span4,.uneditable-input.span4{width:214px}input.span3,textarea.span3,.uneditable-input.span3{width:152px}input.span2,textarea.span2,.uneditable-input.span2{width:90px}input.span1,textarea.span1,.uneditable-input.span1{width:28px}}@media(max-width:767px){body{padding-right:20px;padding-left:20px}.navbar-fixed-top,.navbar-fixed-bottom,.navbar-static-top{margin-right:-20px;margin-left:-20px}.container-fluid{padding:0}.dl-horizontal dt{float:none;width:auto;clear:none;text-align:left}.dl-horizontal dd{margin-left:0}.container{width:auto}.row-fluid{width:100%}.row,.thumbnails{margin-left:0}.thumbnails>li{float:none;margin-left:0}[class*="span"],.uneditable-input[class*="span"],.row-fluid [class*="span"]{display:block;float:none;width:100%;margin-left:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.span12,.row-fluid .span12{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.row-fluid [class*="offset"]:first-child{margin-left:0}.input-large,.input-xlarge,.input-xxlarge,input[class*="span"],select[class*="span"],textarea[class*="span"],.uneditable-input{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.input-prepend input,.input-append input,.input-prepend input[class*="span"],.input-append input[class*="span"]{display:inline-block;width:auto}.controls-row [class*="span"]+[class*="span"]{margin-left:0}.modal{position:fixed;top:20px;right:20px;left:20px;width:auto;margin:0}.modal.fade{top:-100px}.modal.fade.in{top:20px}}@media(max-width:480px){.nav-collapse{-webkit-transform:translate3d(0,0,0)}.page-header h1 small{display:block;line-height:20px}input[type="checkbox"],input[type="radio"]{border:1px solid #ccc}.form-horizontal .control-label{float:none;width:auto;padding-top:0;text-align:left}.form-horizontal .controls{margin-left:0}.form-horizontal .control-list{padding-top:0}.form-horizontal .form-actions{padding-right:10px;padding-left:10px}.media .pull-left,.media .pull-right{display:block;float:none;margin-bottom:10px}.media-object{margin-right:0;margin-left:0}.modal{top:10px;right:10px;left:10px}.modal-header .close{padding:10px;margin:-10px}.carousel-caption{position:static}}@media(max-width:979px){body{padding-top:0}.navbar-fixed-top,.navbar-fixed-bottom{position:static}.navbar-fixed-top{margin-bottom:20px}.navbar-fixed-bottom{margin-top:20px}.navbar-fixed-top .navbar-inner,.navbar-fixed-bottom .navbar-inner{padding:5px}.navbar .container{width:auto;padding:0}.navbar .brand{padding-right:10px;padding-left:10px;margin:0 0 0 -5px}.nav-collapse{clear:both}.nav-collapse .nav{float:none;margin:0 0 10px}.nav-collapse .nav>li{float:none}.nav-collapse .nav>li>a{margin-bottom:2px}.nav-collapse .nav>.divider-vertical{display:none}.nav-collapse .nav .nav-header{color:#777;text-shadow:none}.nav-collapse .nav>li>a,.nav-collapse .dropdown-menu a{padding:9px 15px;font-weight:bold;color:#777;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.nav-collapse .btn{padding:4px 10px 4px;font-weight:normal;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.nav-collapse .dropdown-menu li+li a{margin-bottom:2px}.nav-collapse .nav>li>a:hover,.nav-collapse .dropdown-menu a:hover{background-color:#f2f2f2}.navbar-inverse .nav-collapse .nav>li>a,.navbar-inverse .nav-collapse .dropdown-menu a{color:#999}.navbar-inverse .nav-collapse .nav>li>a:hover,.navbar-inverse .nav-collapse .dropdown-menu a:hover{background-color:#111}.nav-collapse.in .btn-group{padding:0;margin-top:5px}.nav-collapse .dropdown-menu{position:static;top:auto;left:auto;display:none;float:none;max-width:none;padding:0;margin:0 15px;background-color:transparent;border:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.nav-collapse .open>.dropdown-menu{display:block}.nav-collapse .dropdown-menu:before,.nav-collapse .dropdown-menu:after{display:none}.nav-collapse .dropdown-menu .divider{display:none}.nav-collapse .nav>li>.dropdown-menu:before,.nav-collapse .nav>li>.dropdown-menu:after{display:none}.nav-collapse .navbar-form,.nav-collapse .navbar-search{float:none;padding:10px 15px;margin:10px 0;border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 0 rgba(255,255,255,0.1)}.navbar-inverse .nav-collapse .navbar-form,.navbar-inverse .nav-collapse .navbar-search{border-top-color:#111;border-bottom-color:#111}.navbar .nav-collapse .nav.pull-right{float:none;margin-left:0}.nav-collapse,.nav-collapse.collapse{height:0;overflow:hidden}.navbar .btn-navbar{display:block}.navbar-static .navbar-inner{padding-right:10px;padding-left:10px}}@media(min-width:980px){.nav-collapse.collapse{height:auto!important;overflow:visible!important}} 10 | -------------------------------------------------------------------------------- /js/manage.js: -------------------------------------------------------------------------------- 1 | 2 | var m = { 3 | url: 'manage/index.php?m=' 4 | ,mAlert: function(content){ 5 | // var html = '
' 6 | // +content 7 | // +'
' 8 | // +'
'; 9 | // $('body').append(html); 10 | $('.myalert').html(content); 11 | $('.myalert')[0].style.top = $(window).height()/2-175+'px'; 12 | $('.myalert')[0].style.left = $(window).width()/2-250+'px'; 13 | $('.cover').show(); 14 | $('.myalert').show(500); 15 | } 16 | ,mAlertHide: function(){ 17 | $('.myalert').html(''); 18 | $('.myalert').hide(500); 19 | $('.cover').hide(); 20 | } 21 | ,checkuser: function(){ 22 | var that = this; 23 | $.getJSON(that.url+'cu&c=?',function(json){ 24 | // console.log(json); 25 | if(json == 'no loged!'){ 26 | that.login(); 27 | }else{ 28 | $('.top .user .info span').html(json['nickname']); 29 | that.getFileList(); 30 | } 31 | }) 32 | } 33 | ,login: function(){ 34 | var that = this; 35 | var html = '
' 36 | +'
' 37 | +'' 38 | +'' 39 | +'
' 40 | +'
' 41 | +'' 42 | +'' 43 | +'
' 44 | +'
' 45 | // +'' 46 | +'没有账号?
现在去注册->
' 47 | +'' 48 | +'
' 49 | +'
' 50 | that.mAlert(html); 51 | $('.myalert .cont .butt #login').bind('click', function(){ 52 | $.getJSON(that.url+'l&username='+$('.myalert .cont .inp #username').val()+'&password='+$('.myalert .cont .inp #password').val()+'&c=?',function(json){ 53 | // console.log('11'); 54 | if(json && json['nickname']){ 55 | that.mAlertHide(); 56 | $('.top .user .info span').html(json['nickname']); 57 | that.getFileList(); 58 | } 59 | }) 60 | }) 61 | $('.myalert .cont .butt a').bind('click', function(){ 62 | that.register(); 63 | 64 | }) 65 | } 66 | ,logout: function(){ 67 | var that = this; 68 | $.getJSON(that.url+'lo&c=?',function(json){ 69 | // console.log(json); 70 | if(json == 'Logout success!'){ 71 | flow.canvas.can.clear(); 72 | that.login(); 73 | } 74 | }) 75 | } 76 | ,register: function(){ 77 | var that = this; 78 | $('.myalert').hide(); 79 | var html = '
' 80 | +'
' 81 | +'' 82 | +'' 83 | +'
' 84 | +'
' 85 | +'' 86 | +'' 87 | +'
' 88 | +'
' 89 | +'' 90 | +'' 91 | +'
' 92 | +'
' 93 | +'' 94 | +'' 95 | +'
' 96 | +'
' 97 | +'' 98 | +'' 99 | +'
' 100 | +'
' 101 | +'' 102 | +'' 103 | +'' 104 | +'' 105 | +'' 106 | +'' 107 | +'' 108 | +'' 109 | +'
' 110 | +'
' 111 | +'' 112 | +'' 113 | +'
' 114 | +'
' 115 | // that.mAlert(html); 116 | $('.myalert').html(html); 117 | $('.myalert')[0].style.top = $(window).height()/2-290+'px'; 118 | $('.myalert')[0].style.left = $(window).width()/2-300+'px'; 119 | $('.myalert')[0].style.height = '580px'; 120 | $('.myalert')[0].style.width = '600px'; 121 | $('.myalert').show(500); 122 | $('.myalert .cont .butt #register').bind('click', function(){ 123 | if(!$('.myalert .cont .inp #username').val()){ 124 | alert('请输入用户名!'); 125 | }else if(!$('.myalert .cont .inp #password').val()){ 126 | alert('请输入密码!'); 127 | }else if(!$('.myalert .cont .inp #nickname').val()){ 128 | alert('请输入昵称!'); 129 | }else if(!$('.myalert .cont .inp #email').val()){ 130 | alert('请输入邮箱!'); 131 | }else if($('.myalert .cont .inp #password').val() != $('.myalert .cont .inp #repassword').val()){ 132 | alert('重复密码与密码不一致,请重新输入!'); 133 | }else{ 134 | $.getJSON(that.url+'rg&username='+$('.myalert .cont .inp #username').val()+'&password='+$('.myalert .cont .inp #password').val()+'&nickname='+$('.myalert .cont .inp #nickname').val()+'&email='+$('.myalert .cont .inp #email').val()+'&head='+$('.myalert .cont .inp input[name="head"]:checked').val()+'&c=?',function(json){ 135 | // console.log('11'); 136 | if(json == 'Username exit!'){ 137 | alert('用户名已经存在!') 138 | }else if(json['nickname']){ 139 | $('.myalert')[0].style.height = '350px'; 140 | $('.myalert')[0].style.width = '500px'; 141 | that.mAlertHide(); 142 | $('.top .user .info span').html(json['nickname']); 143 | that.getFileList(); 144 | } 145 | }) 146 | } 147 | }) 148 | $('.myalert .cont .butt #cancle').bind('click', function(){ 149 | $('.myalert')[0].style.height = '350px'; 150 | $('.myalert')[0].style.width = '500px'; 151 | that.mAlertHide(); 152 | that.login(); 153 | }) 154 | } 155 | ,getFileList: function(){ 156 | var that = this; 157 | $.getJSON(that.url+'fl&c=?', function(json){ 158 | flow.canvas.name = '新建流程图'+(json.length?(json.length+1):1); 159 | var html = ''; 160 | $.each(json,function(i,u){ 161 | // console.log(u) 162 | html += ''; 163 | }) 164 | $('.top .user .function .file #file').html(html); 165 | }) 166 | } 167 | // 直接存数据 168 | ,save_1: function(){ 169 | var that = this; 170 | var dd = that.getData(); 171 | $.post(that.url+'sv',{name:flow.canvas.name,data:dd},function(result){ 172 | // console.log(result); 173 | if($.trim(result) == "'yes'"){ 174 | $('.top .user .function .save input').removeAttr('disabled'); 175 | } 176 | }) 177 | } 178 | // 弹框更改名字再存 179 | ,save_2: function(){ 180 | var that = this; 181 | var html = '
' 182 | +'
' 183 | +'' 184 | +'' 185 | +'
' 186 | +'
' 187 | +'' 188 | +'' 189 | +'
' 190 | +'
' 191 | that.mAlert(html); 192 | $('.myalert .cont .butt #confirm').bind('click', function(){ 193 | var exist = 0; 194 | $('.top .user .function .file #file option').each(function(i,u){ 195 | if(u.value == $('.myalert .cont .inp #name').val()){ 196 | exist = 1; 197 | } 198 | }) 199 | if(exist == 0 || confirm('您更改的名字与您其他文件的名字重复\n是否确定覆盖之前的文件')){ 200 | flow.canvas.name = $('.myalert .cont .inp #name').val();; 201 | var dd = that.getData(); 202 | $.post(that.url+'sv',{name:flow.canvas.name,data:dd},function(result){ 203 | if($.trim(result) == "'yes'"){ 204 | $('.top .user .function .save input').removeAttr('disabled'); 205 | $('.top .user .function .file #file').find("option:selected").text($('.myalert .cont .inp #name').val()).val($('.myalert .cont .inp #name').val()); 206 | that.mAlertHide(); 207 | } 208 | }) 209 | } 210 | }) 211 | $('.myalert .cont .butt #cancle').bind('click', function(){ 212 | $('.top .user .function .save input').removeAttr('disabled'); 213 | that.mAlertHide(); 214 | }) 215 | } 216 | ,changeFile: function(name){ 217 | var that = this; 218 | $.getJSON(that.url+'gf&name='+name+'&c=?',function(json){ 219 | // console.log(json['name']) 220 | if(json){ 221 | flow.canvas.name = name; 222 | $('.top .user .function .file #file').val(name); 223 | flow.canvas.can.clear(); 224 | $.each(json,function(i,u){ 225 | if(u['type'] == 'path'){ 226 | flow.main.makeline(flow.canvas.can.getById(json[u['op']]['id']),flow.canvas.can.getById(json[u['ed']]['id']),u['path'],u['text']['name'],u['text']['description'],u['text']['condition']); 227 | }else{ 228 | var re = flow.main.makeFlow(u['origin'],u['position']['x'],u['position']['y'],u['text']['name'],u['text']['description'],u['text']['condition']); 229 | u['id'] = re.id; 230 | } 231 | }) 232 | } 233 | }) 234 | } 235 | ,rename: function(){ 236 | var that = this; 237 | var html = '
' 238 | +'
' 239 | +'' 240 | +'' 241 | +'
' 242 | +'
' 243 | +'' 244 | +'' 245 | +'
' 246 | +'
' 247 | that.mAlert(html); 248 | $('.myalert .cont .butt #confirm').bind('click', function(){ 249 | var exist = 0; 250 | $('.top .user .function .file #file option').each(function(i,u){ 251 | if(u.value == $('.myalert .cont .inp #name').val()){ 252 | exist = 1; 253 | } 254 | }) 255 | if(exist == 0 || confirm('您更改的名字与您其他文件的名字重复\n是否确定覆盖之前的文件?')){ 256 | var nm = $('.myalert .cont .inp #name').val(); 257 | $.getJSON(that.url+'rn&oldname='+flow.canvas.name+'&newname='+nm+'&c=?',function(result){ 258 | if(result == 'yes'){ 259 | $('.top .user .function .save input').removeAttr('disabled'); 260 | flow.canvas.name = $('.myalert .cont .inp #name').val(); 261 | $('.top .user .function .file #file').find("option:selected").text(flow.canvas.name).val(flow.canvas.name); 262 | that.mAlertHide(); 263 | 264 | } 265 | }) 266 | } 267 | }) 268 | $('.myalert .cont .butt #cancle').bind('click', function(){ 269 | that.mAlertHide(); 270 | }) 271 | 272 | } 273 | ,newFile: function(){ 274 | var that = this; 275 | that.save_1(); 276 | flow.canvas.name = '新建流程图'+($('.top .user .function .file #file option').length+1); 277 | $('.top .user .function .file #file').prepend(''); 278 | $('.top .user .function .file #file option')[0].selected = true; 279 | flow.canvas.can.clear(); 280 | 281 | } 282 | ,delFile: function(){ 283 | var that = this; 284 | if(confirm('您将删除此流程图所有的东西\n是否确定删除?')){ 285 | $.getJSON(that.url+'dl&name='+flow.canvas.name+'&c=?',function(json){ 286 | if(json == 'yes'){ 287 | $('.top .user .function .file #file option:selected').remove(); 288 | that.changeFile($('.top .user .function .file #file option')[0].value); 289 | } 290 | }) 291 | } 292 | } 293 | ,download: function(){ 294 | var that = this; 295 | window.location.target = '_blank'; 296 | window.location.href = that.url+'df&name='+flow.canvas.name; 297 | } 298 | ,upload: function(){ 299 | var that = this; 300 | var html = '' 302 | that.mAlert(html); 303 | $('.myalert iframe').contents().find('head').html(''); 304 | var html2 = '
' 305 | +'
' 306 | +'
' 307 | +'' 308 | +'' 309 | +'
' 310 | +'
' 311 | +'' 312 | +'' 313 | +'
' 314 | +'
' 315 | +'
'; 316 | var iframe = $('.myalert iframe').contents().find('body'); 317 | iframe.html(html2); 318 | iframe[0].style.background = 'none'; 319 | iframe.find('form .butt #confirm').bind('click', function(){ 320 | var nn = iframe.find('form .inp input[type="file"]').val().split('\\'); 321 | var name = nn[nn.length-1].split('.')[0]; 322 | $.getJSON(that.url+'cn&name='+name+'&c=?', function(json){ 323 | function sub(){ 324 | iframe.find('form').submit(); 325 | window.addEventListener('message', function(ev){ 326 | // console.log(ev.data); 327 | var json = $.parseJSON(ev.data) 328 | $.each(json,function(i,u){ 329 | if(u['type'] == 'path'){ 330 | flow.main.makeline(flow.canvas.can.getById(json[u['op']]['id']),flow.canvas.can.getById(json[u['ed']]['id']),u['path'],u['text']['name'],u['text']['description']); 331 | }else{ 332 | var re = flow.main.makeFlow(u['origin'],u['position']['x'],u['position']['y'],u['text']['name'],u['text']['description']); 333 | u['id'] = re.id; 334 | } 335 | }) 336 | 337 | }) 338 | } 339 | if(json == 'yes'){ 340 | if(confirm('您更改的名字与您其他文件的名字重复\n是否确定覆盖之前的文件?')){ 341 | sub(); 342 | } 343 | }else if(json == 'no'){ 344 | sub(); 345 | } 346 | }) 347 | 348 | }) 349 | $('.myalert .cont .butt #cancle').bind('click', function(){ 350 | that.mAlertHide(); 351 | }) 352 | } 353 | ,getData: function(){ 354 | var json = {}; 355 | // if($('.myalert .cont .inp #name')[0]){ 356 | // json['name'] = $('.myalert .cont .inp #name').val(); 357 | // }else{ 358 | // json['name'] = $('.top .user .function .file #file').val(); 359 | // } 360 | var r = flow.main.getE(['circle','rect','path']); 361 | $.each(r,function(i,u){ 362 | json[i] = {}; 363 | json[i]['type'] = u.type; 364 | json[i]['origin'] = u.origin; 365 | json[i]['text'] = {}; 366 | json[i]['text']['name'] = u.text.attr('text'); 367 | json[i]['text']['description'] = u.text.attr('description'); 368 | json[i]['text']['condition'] = {} 369 | switch(u.type){ 370 | case 'circle': 371 | json[i]['position'] = {'x':u.attr('cx'),'y':u.attr('cy')}; 372 | u.num = i; 373 | break; 374 | case 'rect': 375 | // var x = parseFloat(u.attr('x')) 376 | // ,y = parseFloat(u.attr('y')); 377 | // if(u.origin == 'branch'){ 378 | // json[i]['position'] = {'x':(y-x)/Math.SQRT2+Math.SQRT2*x,'y':(y-x)/Math.SQRT2}; 379 | // }else{ 380 | json[i]['position'] = {'x':u.attr('rex'),'y':u.attr('rey')}; 381 | // } 382 | u.num = i; 383 | break; 384 | case 'path': 385 | json[i]['path'] = $(u[0]).attr('d'); 386 | json[i]['op'] = u.op.num; 387 | json[i]['ed'] = u.ed.num; 388 | break; 389 | } 390 | for(var j in u.text.attrs.condition){ 391 | json[i]['text']['condition'][j] = u.text.attrs.condition[j] 392 | } 393 | 394 | }) 395 | return JSON.stringify(json); 396 | } 397 | ,functionBind: function(){ 398 | var that = this; 399 | 400 | //保存按钮绑定 401 | $('.top .user .function .save input').bind('click',function(){ 402 | // 验证此流程图是否已经存在 403 | $.getJSON(that.url+'cn&name='+$('.top .user .function .file #file').val()+'&c=?',function(json){ 404 | $('.top .user .function .save input').attr({'disabled':'true'}); 405 | if(json == 'yes'){ 406 | // 存在则直接保存 407 | that.save_1(); 408 | }else{ 409 | // 不存在则弹框要求更改名字 410 | that.save_2(); 411 | } 412 | }) 413 | }); 414 | // 下拉列表绑定 415 | $('.top .user .function .file #file').bind('change',function(){ 416 | // console.log($(this).val()) 417 | if(that.getData().length>2) 418 | that.save_1(); 419 | that.changeFile($(this).val()); 420 | }); 421 | 422 | $('.top .user .function .rename input').bind('click', function(){ 423 | that.rename(); 424 | }) 425 | $('.top .user .function .new input').bind('click', function(){ 426 | that.newFile(); 427 | }) 428 | $('.top .user .function .delete input').bind('click', function(){ 429 | that.delFile(); 430 | }) 431 | $('.top .user .info').bind('mouseover', function(){ 432 | $('.top .user .info .dropdown .dropdown-menu')[0].style.display = 'block'; 433 | }) 434 | $('.top .user .info').bind('mouseout', function(){ 435 | $('.top .user .info .dropdown .dropdown-menu')[0].style.display = 'none'; 436 | }) 437 | $('.top .user .info li a').bind('click',function(){ 438 | $('.top .user .info .dropdown .dropdown-menu')[0].style.display = 'none'; 439 | }) 440 | $('.top .user .info #logout').bind('click', function(){ 441 | that.logout(); 442 | }) 443 | $('.top .user .info #download').bind('click', function(){ 444 | that.download(); 445 | }) 446 | $('.top .user .info #upload').bind('click', function(){ 447 | that.upload(); 448 | }) 449 | } 450 | ,init: function(){ 451 | this.checkuser(); 452 | this.functionBind(); 453 | } 454 | } 455 | m.init(); -------------------------------------------------------------------------------- /js/flow.js: -------------------------------------------------------------------------------- 1 | var t; 2 | var flow = { 3 | 4 | //左边控制板 5 | main : { 6 | bind :function(){ 7 | var that = this; 8 | $('.drag div').draggable({ helper: "clone" }); 9 | $('.flow').droppable({drop: function(event,ui){ 10 | // console.log(ui.draggable); 11 | // q = ui.draggable; 12 | var x = ui.position.left, y = ui.position.top; 13 | 14 | var type = ui.draggable[0].className.split(' ')[0]; 15 | var name = $(ui.draggable[0]).find('span').html(); 16 | //生成图框 17 | that.makeFlow(type,x,y,name,name); 18 | 19 | 20 | }}) 21 | 22 | $('.line').bind('click', function(){ 23 | that.lineBind(); 24 | $('.handle h4').html('状态:连线中'); 25 | }) 26 | $('.choose').bind('click', function(){ 27 | that.lineUnbind(); 28 | $('.handle h4').html('状态:选择元素'); 29 | }) 30 | } 31 | ,makeFlow: function(type,x,y,name,description,condition){ 32 | var that = this; 33 | if( type == 'start'){ 34 | var re = flow.canvas.can.circle(x,y,30).attr({fill: '#E0F1D0', stroke: "#03689a", cursor: "move"}); 35 | var text = flow.canvas.can.text(x,y,name).attr({cursor:'pointer'}); 36 | }else if(type == 'end'){ 37 | var re = flow.canvas.can.circle(x,y,30).attr({fill: '#FFCCCC', stroke: "#03689a", cursor: "move"}); 38 | var text = flow.canvas.can.text(x,y,name).attr({cursor:'pointer'}); 39 | }else if(type == 'branch'){ 40 | // var re = flow.canvas.can.rect((y-x)/Math.SQRT2,(y-x)/Math.SQRT2+Math.SQRT2*x,50,50,5).attr({fill: '#F4F4CC', stroke: "#03689a", cursor: "move"}); 41 | var re = flow.canvas.can.rect(x,y,50,50,5).attr({fill: '#F4F4CC', stroke: "#03689a", cursor: "move"}); 42 | re.rotate(45); 43 | re.attrs.rex = x 44 | ,re.attrs.rey = y; 45 | var text = flow.canvas.can.text(x+25,y+25,name).attr({cursor:'pointer'}); 46 | }else{ 47 | var re = flow.canvas.can.rect(x,y,100,50,5).attr({fill: '#f6f7ff', stroke: "#03689a", cursor: "move"}); 48 | re.attrs.rex = x 49 | ,re.attrs.rey = y; 50 | var text = flow.canvas.can.text(x+50,y+25,name).attr({cursor:'pointer'}); 51 | 52 | } 53 | text.attrs.description = description||name; 54 | text.attrs.condition = condition||{}; 55 | 56 | re.origin = type; 57 | //关联文字和图框 58 | re.text = text; 59 | re.line = []; 60 | //点击显示属性图框 61 | that.focusBind(re); 62 | 63 | // flow.canvas.q.push(re); 64 | //如果是连线状态,绑定连线 65 | if($.lineFlag){ 66 | that.lineBind(); 67 | } 68 | 69 | //拖动canvas里的东西 70 | var start = function() { 71 | this.animate(); 72 | if(this.type == 'circle'){ 73 | this.ox =this.attr("cx"); 74 | this.oy =this.attr("cy"); 75 | }else{ 76 | this.ox =this.attr("x"); 77 | this.oy =this.attr("y"); 78 | } 79 | this.text.ox =this.text.attr("x"); 80 | this.text.oy =this.text.attr("y"); 81 | }, 82 | move = function(dx, dy) { 83 | // that.lineUnbind(); 84 | // console.log(this.attrs.cx); 85 | // console.log(this.ox); 86 | // console.log(this); 87 | var x = this.ox + dx, 88 | y = this.oy + dy; 89 | 90 | if(this.type == 'circle'){ 91 | this.attr({ 92 | cx: x, 93 | cy: y 94 | }); 95 | }else{ 96 | if(this.origin == 'branch'){ 97 | this.attr({ 98 | x: (dy-dx)/Math.SQRT2+Math.SQRT2*dx+this.ox, 99 | y: (dy-dx)/Math.SQRT2+this.oy 100 | }); 101 | 102 | }else{ 103 | this.attr({ 104 | x: x, 105 | y: y, 106 | }); 107 | } 108 | this.attrs.rex = x 109 | ,this.attrs.rey = y; 110 | } 111 | this.text.attr({ 112 | x: this.text.ox+dx, 113 | y: this.text.oy+dy 114 | }); 115 | 116 | x += this.getBBox().width/2; 117 | $.each(this.line, function(i,u){ 118 | if(flow.canvas.can.getById(u[1])){ 119 | that.lineReset(flow.canvas.can.getById(u[1])); 120 | } 121 | 122 | }) 123 | 124 | }, 125 | up = function() { 126 | this.animate(); 127 | // that.lineBind(); 128 | }; 129 | re.drag(move,start,up); 130 | return re; 131 | } 132 | ,lineUnbind: function(){ 133 | var that= this; 134 | var q = that.getE(['circle','rect']); 135 | $.each(q, function(i,u){ 136 | $(u[0]).unbind('click',null); 137 | $(u.text[0]).unbind('click',null); 138 | that.focusBind(u); 139 | }) 140 | $.lineFlag = 0; 141 | } 142 | ,lineBind: function(){ 143 | var that = this; 144 | $.lineStart = 0; 145 | var q = that.getE(['circle','rect']); 146 | $.each(q,function(i,u){ 147 | $(u[0]).unbind('click',null); 148 | $(u.text[0]).unbind('click',null); 149 | that.focusBind(u); 150 | $(u[0]).bind('click', bind); 151 | $(u.text[0]).bind('click',bind); 152 | function bind(){ 153 | // console.log(u); 154 | if(!$.lineStart){ 155 | // console.log(i); 156 | $.lineStart = u; 157 | }else if(u.id != $.lineStart.id){ 158 | // console.log(i) 159 | var op = $.lineStart 160 | ,ed = u; 161 | if(op.type == 'circle'){ 162 | opp = {x:op.attrs.cx, y:op.attrs.cy}; 163 | }else{ 164 | opp = {x:op.attrs.x, y:op.attrs.y}; 165 | } 166 | if(ed.type == 'circle'){ 167 | edp = {x:ed.attrs.cx, y:ed.attrs.cy}; 168 | }else{ 169 | edp = {x:ed.attrs.x, y:ed.attrs.y}; 170 | } 171 | var path = 'M'+opp.x+' '+opp.y+'L'+edp.x+' '+edp.y; 172 | var name = 'To '+ed.text.attr('text') 173 | //生成连线 174 | that.makeline(op,ed,path,name,name); 175 | 176 | $.lineStart = 0; 177 | } 178 | 179 | } 180 | }) 181 | $.lineFlag = 1; 182 | } 183 | ,makeline: function(op,ed,path,name,description,condition){ 184 | // console.log(op,ed); 185 | var that = this; 186 | var l = flow.canvas.can.path(path).attr({'stroke':'#808080','arrow-end': 'block-wide-long', 'stroke-width': '2px'}); 187 | var path = path.split('L'); 188 | var text; 189 | if(path.length>=3){ 190 | // l.text.attr({'x':parseInt(path[1].split(',')[0])+25,'y':parseInt(path[1].split(',')[1])-15}); 191 | text = flow.canvas.can.text(parseInt(path[1].split(',')[0])+25,parseInt(path[1].split(',')[1])-15,name).attr({cursor:'pointer'}); 192 | }else{ 193 | text = flow.canvas.can.text((parseInt(path[1].split(',')[0])+parseInt(path[0].split('M')[1].split(',')[0]))/2+25,(parseInt(path[1].split(',')[1])+parseInt(path[0].split(',')[1]))/2-15,name).attr({cursor:'pointer'}); 194 | } 195 | text.attrs.description = description||name; 196 | text.attrs.condition = condition||{}; 197 | l.origin = 'line' 198 | l.text = text; 199 | l.op = op; 200 | l.ed = ed; 201 | 202 | //重置直线开头和结尾的位置 203 | that.lineReset(l); 204 | //直线弯曲 205 | that.lineBend(l); 206 | //点击成为焦点 207 | that.focusBind(l); 208 | 209 | // flow.canvas.l.push(l); 210 | op.line.push(['start', l.id]); 211 | ed.line.push(['end', l.id]); 212 | } 213 | ,lineBend: function(el){ 214 | var that = this; 215 | $(el[0]).bind('click', bind); 216 | $(el.text[0]).bind('click', bind); 217 | function bind(e){ 218 | e.stopPropagation(); 219 | $.each(flow.canvas.lp, function(i,u){ 220 | u.remove(); 221 | }) 222 | var path = $(el[0]).attr('d').split('L'); 223 | // q=path;q 224 | var lp; 225 | if(path.length>=3){ 226 | lp = flow.canvas.can.rect(path[1].split(',')[0]-3,path[1].split(',')[1]-3,6,6,4).attr({fill: '#000', stroke: "#fff", 'stroke-width': '2px',cursor: "move"}); 227 | }else{ 228 | lp = flow.canvas.can.rect((parseInt(path[1].split(',')[0])+parseInt(path[0].split(',')[0].split('M')[1]))/2-3,(parseInt(path[1].split(',')[1])+parseInt(path[0].split(',')[1]))/2-3,6,6,4).attr({fill: '#000', stroke: "#fff", 'stroke-width': '2px',cursor: "move"}); 229 | } 230 | lp.origin = 'bend'; 231 | //点的拖拽绑定 232 | that.lpDrag(lp,el,path); 233 | } 234 | } 235 | ,lpDrag: function(lp,el,path){ 236 | var that = this; 237 | var start = function() { 238 | // e.stopPropagation(); 239 | // e.preventDefault(); 240 | this.ox = this.attr("x"); 241 | this.oy = this.attr("y"); 242 | this.animate(); 243 | }, 244 | move = function(dx, dy) { 245 | // e.stopPropagation(); 246 | // e.preventDefault(); 247 | var x = this.ox + dx, 248 | y = this.oy + dy; 249 | this.attr({ 250 | x: x-3, 251 | y: y-3, 252 | }); 253 | // console.log($(ll).attr('d')) 254 | 255 | $(el[0]).attr({'d':path[0]+'L'+x+','+y+'L'+path[path.length-1]}); 256 | that.lineReset(el); 257 | }, 258 | up = function() { 259 | // q=e; 260 | // e.stopPropagation(); 261 | // e.preventDefault(); 262 | this.animate(); 263 | // console.log(this.attr('x')); 264 | var lp = flow.canvas.can.rect(parseInt(this.attr('x')),parseInt(this.attr('y')),6,6,4).attr({fill: '#000', stroke: "#fff", 'stroke-width': '2px',cursor: "move"}); 265 | lp.origin = 'bend'; 266 | setTimeout(function(){ 267 | that.content(el); 268 | that.lpDrag(lp,el,path); 269 | },10); 270 | }; 271 | lp.drag(move,start,up); 272 | flow.canvas.lp.push(lp); 273 | } 274 | ,lineReset: function(l){ 275 | var path = $(l[0]).attr('d').split('L'); 276 | path[0] = path[0].split('M')[1]; 277 | //取开始和结束关联的框的8个点 278 | var s = l.op.getBBox(); 279 | var op = [ 280 | [s.x,s.y] 281 | ,[s.x+s.width/2,s.y-5] 282 | ,[s.x2,s.y] 283 | ,[s.x2+5,s.y+s.height/2] 284 | ,[s.x2,s.y2] 285 | ,[s.x+s.width/2,s.y2+5] 286 | ,[s.x,s.y2] 287 | ,[s.x-5,s.y+s.height/2] 288 | ]; 289 | var e = l.ed.getBBox(); 290 | var ed = [ 291 | [e.x,e.y] 292 | ,[e.x+e.width/2,e.y-5] 293 | ,[e.x2,e.y] 294 | ,[e.x2+5,e.y+e.height/2] 295 | ,[e.x2,e.y2] 296 | ,[e.x+e.width/2,e.y2+5] 297 | ,[e.x,e.y2] 298 | ,[e.x-5,e.y+e.height/2] 299 | ]; 300 | var distanceOP = Math.pow($(window).width(),2)+Math.pow($(window).height(),2) 301 | ,distanceED = Math.pow($(window).width(),2)+Math.pow($(window).height(),2) 302 | ,num = []; 303 | $.each(op, function(i,u){ 304 | var d = Math.pow((path[1].split(',')[0]-u[0]),2)+Math.pow((path[1].split(',')[1]-u[1]),2); 305 | if(d=3){ 318 | $(l[0]).attr({'d':'M'+op[num[0]][0]+','+op[num[0]][1]+'L'+path[1].split(',')[0]+','+path[1].split(',')[1]+'L'+ed[num[1]][0]+','+ed[num[1]][1]}); 319 | l.text.attr({'x':parseInt(path[1].split(',')[0])+25,'y':parseInt(path[1].split(',')[1])-15}); 320 | }else{ 321 | $(l[0]).attr({'d':'M'+op[num[0]][0]+','+op[num[0]][1]+'L'+ed[num[1]][0]+','+ed[num[1]][1]}); 322 | l.text.attr({'x':(op[num[0]][0]+ed[num[1]][0])/2+25,'y':(op[num[0]][1]+ed[num[1]][1])/2-15}); 323 | } 324 | 325 | } 326 | //检索特定元素集合 327 | ,getE: function(type){ 328 | var result = []; 329 | flow.canvas.can.forEach(function(el){ 330 | $.each(type, function(i,u){ 331 | if(el.type == u && el.origin && el.origin != 'bend'){ 332 | result.push(el); 333 | } 334 | }) 335 | }) 336 | return result; 337 | } 338 | // // 339 | // ,checkL: function(num){ 340 | // var w; 341 | // var q = that.getE(['circle','rect']); 342 | // $.each(q, function(i,u){ 343 | // $.each(u.line,function(ei,eu){ 344 | // if(eu[1] == num ){ 345 | // // console.log([i,ei,eu]); 346 | // w = [i,ei,eu]; 347 | // } 348 | // }) 349 | // }) 350 | // return (w||[]); 351 | // } 352 | 353 | //绑定焦点效果 354 | ,focusBind: function(el){ 355 | var that = this; 356 | if(el.origin != 'bend'){ 357 | $(el[0]).bind('click',bind); 358 | $(el.text[0]).bind('click',bind); 359 | function bind(e){ 360 | e.stopPropagation(); 361 | that.focus(el); 362 | } 363 | } 364 | } 365 | //设置图框和连线的内容 366 | ,content: function(el){ 367 | var that = this; 368 | var p = flow.canvas.can.getById(el.id); 369 | var condition = ''; 370 | if(p.type == "path"){ 371 | for(var i in p.text.attrs.condition){ 372 | condition += '
' 373 | +'' 374 | +'' 375 | +'
'; 376 | } 377 | condition +='+' 378 | +'-'; 379 | }else if(p.origin == 'branch'){ 380 | for(var i in p.text.attrs.condition){ 381 | condition += '
' 382 | +'' 383 | +'' 384 | +'
'; 385 | } 386 | condition +='+' 387 | +'-'; 388 | }else if(p.type == 'rect'){ 389 | for(var i in p.text.attrs.condition){ 390 | condition += '
' 391 | +'' 392 | +':' 393 | +'' 394 | +'
'; 395 | } 396 | condition +='+' 397 | +'-'; 398 | } 399 | var html = '
' 400 | +'

属性

' 401 | +'
' 402 | +'
' 403 | +'' 404 | +'' 405 | +'
' 406 | +'
' 407 | +'' 408 | +'' 409 | +'
' 410 | +'
' 411 | +condition 412 | +'
' 413 | +'
' 414 | +'' 415 | +'' 416 | +'
' 417 | +'
' 418 | +'' 419 | +'
' 420 | +'
' 421 | +'
'; 422 | $('body').append(html); 423 | $('.content .add').unbind('click',null); 424 | $('.content .add').bind('click',function(){ 425 | if(p.type == "path"){ 426 | var html = '
' 427 | +'' 428 | +'' 429 | +'
' 430 | $(this).before(html) 431 | }else if(p.origin == 'branch'){ 432 | var html = '
' 433 | +'' 434 | +'' 435 | +'
' 436 | $(this).before(html); 437 | }else if(p.type == 'rect'){ 438 | var html = '
' 439 | +'' 440 | +':' 441 | +'' 442 | +'
' 443 | $(this).before(html); 444 | } 445 | }); 446 | $('.content .del').unbind('click',null); 447 | $('.content .del').bind('click',function(){ 448 | $(this).prev().prev().remove(); 449 | }); 450 | $('.content #confirm').unbind('click',null); 451 | $('.content #confirm').bind('click', function(){ 452 | var text = flow.canvas.can.getById($('.content').attr('op')).text; 453 | text.attr({'text':$('.content #name').val()}); 454 | // console.log($('.content #description').val()) 455 | // console.log(flow.canvas.can.getById($('.content').attr('op')).text.attr('description')); 456 | text.attrs.description = $('.content #description').val(); 457 | // console.log(flow.canvas.can.getById($('.content').attr('op')).text.attr('description')); 458 | // $(p[0]).unbind('click',null); 459 | // if($.lineFlag){ 460 | // that.lineUnbind(); 461 | // that.lineBind(); 462 | // } 463 | // that.focusBind(p); 464 | text.attrs.condition = {}; 465 | if(p.type == "path" || p.origin == "branch"){ 466 | $('.content .condition div').each(function(i,u){ 467 | text.attrs.condition[i] = ($(u).find('input').val()); 468 | }) 469 | }else if(p.type == 'rect'){ 470 | text.attrs.condition = {}; 471 | $('.content .condition div').each(function(i,u){ 472 | text.attrs.condition[$(u).find('.key').val()] = $(u).find('.value').val(); 473 | }) 474 | } 475 | 476 | }) 477 | $('.content #cancle').unbind('click',null); 478 | $('.content #cancle').bind('click', function(){ 479 | $('.content').remove(); 480 | that.unfocus(); 481 | }) 482 | $('.content #delete').unbind('click',null); 483 | $('.content #delete').bind('click', function(){ 484 | if(confirm('删除此项后将删除该项的所有相关事物\n\n是否确定删除?')){ 485 | var p = flow.canvas.can.getById($('.content').attr('op')); 486 | if(p.type == 'path'){ 487 | $.each(p.op.line,function(ei,eu){ 488 | if(eu[1] == p.id){ 489 | p.op.line.pop(eu); 490 | } 491 | }) 492 | $.each(p.ed.line,function(ei,eu){ 493 | if(eu[1] == p.id){ 494 | p.ed.line.pop(eu); 495 | } 496 | }) 497 | }else{ 498 | //删除相关的连线几连线相关的图框的line属性里的该连线 499 | $.each(p.line, function(i,u){ 500 | var l = flow.canvas.can.getById(u[1]); 501 | if(l){ 502 | var num; 503 | if(u[0] == 'start'){ 504 | $.each(l.ed.line,function(ei,eu){ 505 | if(eu[0] == 'end' && eu[1] == l.id){ 506 | num = ei; 507 | } 508 | }) 509 | l.ed.line.pop(num); 510 | }else if(u[0] == 'end'){ 511 | $.each(l.op.line,function(ei,eu){ 512 | if(eu[0] == 'start' && eu[1] == l.id){ 513 | num = ei; 514 | } 515 | }) 516 | l.op.line.pop(num); 517 | } 518 | } 519 | l.text.remove(); 520 | l.remove(); 521 | }) 522 | } 523 | //删除点 524 | $.each(flow.canvas.lp, function(i,u){ 525 | u.remove(); 526 | }) 527 | //删除文字 528 | p.text.remove(); 529 | //删除本身 530 | p.remove(); 531 | $('.content').remove(); 532 | //将连线开始标识符置0 533 | $.lineStart = 0; 534 | } 535 | 536 | }) 537 | } 538 | ,focus: function(el){ 539 | this.unfocus(); 540 | if(el.type != 'path' && el.origin && el.origin != 'bend') 541 | el.attr({ stroke: "#FF3300" , 'stroke-width': '2px'}); 542 | this.content(el); 543 | } 544 | ,unfocus: function(){ 545 | $.each(this.getE(['circle','rect']),function(i,u){ 546 | if(u.origin != 'bend'){ 547 | $('.content').remove(); 548 | u.attr({ stroke: "#03689a" , 'stroke-width': '1px'}); 549 | } 550 | }) 551 | } 552 | //点击画布,消除path上面的点,消除属性框 553 | ,flowClick: function(){ 554 | var that = this; 555 | $('svg').bind('click', function(e){ 556 | // console.log(1) 557 | e.stopPropagation(); 558 | that.unfocus(); 559 | $.each(flow.canvas.lp, function(i,u){ 560 | u.remove(); 561 | }) 562 | 563 | flow.canvas.lp.length = 0; 564 | }) 565 | 566 | } 567 | ,init: function(){ 568 | this.bind(); 569 | this.flowClick(); 570 | } 571 | } 572 | ,canvas: { 573 | //线上面点的队列 574 | lp : [] 575 | ,init: function(){ 576 | $('.flow').width($(window).width()).height($(window).height()); 577 | var p = Raphael($('.flow')[0],$('.flow').width(),$('.flow').height()); 578 | 579 | flow.canvas.can = p; 580 | 581 | 582 | } 583 | } 584 | ,init: function(){ 585 | this.canvas.init(); 586 | this.main.init(); 587 | } 588 | } 589 | 590 | flow.init(); -------------------------------------------------------------------------------- /js/bootstrap.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap.js by @fat & @mdo 3 | * Copyright 2012 Twitter, Inc. 4 | * http://www.apache.org/licenses/LICENSE-2.0.txt 5 | */ 6 | !function($){"use strict";$(function(){$.support.transition=function(){var transitionEnd=function(){var name,el=document.createElement("bootstrap"),transEndEventNames={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(name in transEndEventNames)if(void 0!==el.style[name])return transEndEventNames[name]}();return transitionEnd&&{end:transitionEnd}}()})}(window.jQuery),!function($){"use strict";var dismiss='[data-dismiss="alert"]',Alert=function(el){$(el).on("click",dismiss,this.close)};Alert.prototype.close=function(e){function removeElement(){$parent.trigger("closed").remove()}var $parent,$this=$(this),selector=$this.attr("data-target");selector||(selector=$this.attr("href"),selector=selector&&selector.replace(/.*(?=#[^\s]*$)/,"")),$parent=$(selector),e&&e.preventDefault(),$parent.length||($parent=$this.hasClass("alert")?$this:$this.parent()),$parent.trigger(e=$.Event("close")),e.isDefaultPrevented()||($parent.removeClass("in"),$.support.transition&&$parent.hasClass("fade")?$parent.on($.support.transition.end,removeElement):removeElement())};var old=$.fn.alert;$.fn.alert=function(option){return this.each(function(){var $this=$(this),data=$this.data("alert");data||$this.data("alert",data=new Alert(this)),"string"==typeof option&&data[option].call($this)})},$.fn.alert.Constructor=Alert,$.fn.alert.noConflict=function(){return $.fn.alert=old,this},$(document).on("click.alert.data-api",dismiss,Alert.prototype.close)}(window.jQuery),!function($){"use strict";var Button=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.button.defaults,options)};Button.prototype.setState=function(state){var d="disabled",$el=this.$element,data=$el.data(),val=$el.is("input")?"val":"html";state+="Text",data.resetText||$el.data("resetText",$el[val]()),$el[val](data[state]||this.options[state]),setTimeout(function(){"loadingText"==state?$el.addClass(d).attr(d,d):$el.removeClass(d).removeAttr(d)},0)},Button.prototype.toggle=function(){var $parent=this.$element.closest('[data-toggle="buttons-radio"]');$parent&&$parent.find(".active").removeClass("active"),this.$element.toggleClass("active")};var old=$.fn.button;$.fn.button=function(option){return this.each(function(){var $this=$(this),data=$this.data("button"),options="object"==typeof option&&option;data||$this.data("button",data=new Button(this,options)),"toggle"==option?data.toggle():option&&data.setState(option)})},$.fn.button.defaults={loadingText:"loading..."},$.fn.button.Constructor=Button,$.fn.button.noConflict=function(){return $.fn.button=old,this},$(document).on("click.button.data-api","[data-toggle^=button]",function(e){var $btn=$(e.target);$btn.hasClass("btn")||($btn=$btn.closest(".btn")),$btn.button("toggle")})}(window.jQuery),!function($){"use strict";var Carousel=function(element,options){this.$element=$(element),this.options=options,"hover"==this.options.pause&&this.$element.on("mouseenter",$.proxy(this.pause,this)).on("mouseleave",$.proxy(this.cycle,this))};Carousel.prototype={cycle:function(e){return e||(this.paused=!1),this.options.interval&&!this.paused&&(this.interval=setInterval($.proxy(this.next,this),this.options.interval)),this},to:function(pos){var $active=this.$element.find(".item.active"),children=$active.parent().children(),activePos=children.index($active),that=this;if(!(pos>children.length-1||0>pos))return this.sliding?this.$element.one("slid",function(){that.to(pos)}):activePos==pos?this.pause().cycle():this.slide(pos>activePos?"next":"prev",$(children[pos]))},pause:function(e){return e||(this.paused=!0),this.$element.find(".next, .prev").length&&$.support.transition.end&&(this.$element.trigger($.support.transition.end),this.cycle()),clearInterval(this.interval),this.interval=null,this},next:function(){return this.sliding?void 0:this.slide("next")},prev:function(){return this.sliding?void 0:this.slide("prev")},slide:function(type,next){var e,$active=this.$element.find(".item.active"),$next=next||$active[type](),isCycling=this.interval,direction="next"==type?"left":"right",fallback="next"==type?"first":"last",that=this;if(this.sliding=!0,isCycling&&this.pause(),$next=$next.length?$next:this.$element.find(".item")[fallback](),e=$.Event("slide",{relatedTarget:$next[0]}),!$next.hasClass("active")){if($.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(e),e.isDefaultPrevented())return;$next.addClass(type),$next[0].offsetWidth,$active.addClass(direction),$next.addClass(direction),this.$element.one($.support.transition.end,function(){$next.removeClass([type,direction].join(" ")).addClass("active"),$active.removeClass(["active",direction].join(" ")),that.sliding=!1,setTimeout(function(){that.$element.trigger("slid")},0)})}else{if(this.$element.trigger(e),e.isDefaultPrevented())return;$active.removeClass("active"),$next.addClass("active"),this.sliding=!1,this.$element.trigger("slid")}return isCycling&&this.cycle(),this}}};var old=$.fn.carousel;$.fn.carousel=function(option){return this.each(function(){var $this=$(this),data=$this.data("carousel"),options=$.extend({},$.fn.carousel.defaults,"object"==typeof option&&option),action="string"==typeof option?option:options.slide;data||$this.data("carousel",data=new Carousel(this,options)),"number"==typeof option?data.to(option):action?data[action]():options.interval&&data.cycle()})},$.fn.carousel.defaults={interval:5e3,pause:"hover"},$.fn.carousel.Constructor=Carousel,$.fn.carousel.noConflict=function(){return $.fn.carousel=old,this},$(document).on("click.carousel.data-api","[data-slide]",function(e){var href,$this=$(this),$target=$($this.attr("data-target")||(href=$this.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,"")),options=$.extend({},$target.data(),$this.data());$target.carousel(options),e.preventDefault()})}(window.jQuery),!function($){"use strict";var Collapse=function(element,options){this.$element=$(element),this.options=$.extend({},$.fn.collapse.defaults,options),this.options.parent&&(this.$parent=$(this.options.parent)),this.options.toggle&&this.toggle()};Collapse.prototype={constructor:Collapse,dimension:function(){var hasWidth=this.$element.hasClass("width");return hasWidth?"width":"height"},show:function(){var dimension,scroll,actives,hasData;if(!this.transitioning){if(dimension=this.dimension(),scroll=$.camelCase(["scroll",dimension].join("-")),actives=this.$parent&&this.$parent.find("> .accordion-group > .in"),actives&&actives.length){if(hasData=actives.data("collapse"),hasData&&hasData.transitioning)return;actives.collapse("hide"),hasData||actives.data("collapse",null)}this.$element[dimension](0),this.transition("addClass",$.Event("show"),"shown"),$.support.transition&&this.$element[dimension](this.$element[0][scroll])}},hide:function(){var dimension;this.transitioning||(dimension=this.dimension(),this.reset(this.$element[dimension]()),this.transition("removeClass",$.Event("hide"),"hidden"),this.$element[dimension](0))},reset:function(size){var dimension=this.dimension();return this.$element.removeClass("collapse")[dimension](size||"auto")[0].offsetWidth,this.$element[null!==size?"addClass":"removeClass"]("collapse"),this},transition:function(method,startEvent,completeEvent){var that=this,complete=function(){"show"==startEvent.type&&that.reset(),that.transitioning=0,that.$element.trigger(completeEvent)};this.$element.trigger(startEvent),startEvent.isDefaultPrevented()||(this.transitioning=1,this.$element[method]("in"),$.support.transition&&this.$element.hasClass("collapse")?this.$element.one($.support.transition.end,complete):complete())},toggle:function(){this[this.$element.hasClass("in")?"hide":"show"]()}};var old=$.fn.collapse;$.fn.collapse=function(option){return this.each(function(){var $this=$(this),data=$this.data("collapse"),options="object"==typeof option&&option;data||$this.data("collapse",data=new Collapse(this,options)),"string"==typeof option&&data[option]()})},$.fn.collapse.defaults={toggle:!0},$.fn.collapse.Constructor=Collapse,$.fn.collapse.noConflict=function(){return $.fn.collapse=old,this},$(document).on("click.collapse.data-api","[data-toggle=collapse]",function(e){var href,$this=$(this),target=$this.attr("data-target")||e.preventDefault()||(href=$this.attr("href"))&&href.replace(/.*(?=#[^\s]+$)/,""),option=$(target).data("collapse")?"toggle":$this.data();$this[$(target).hasClass("in")?"addClass":"removeClass"]("collapsed"),$(target).collapse(option)})}(window.jQuery),!function($){"use strict";function clearMenus(){$(toggle).each(function(){getParent($(this)).removeClass("open")})}function getParent($this){var $parent,selector=$this.attr("data-target");return selector||(selector=$this.attr("href"),selector=selector&&/#/.test(selector)&&selector.replace(/.*(?=#[^\s]*$)/,"")),$parent=$(selector),$parent.length||($parent=$this.parent()),$parent}var toggle="[data-toggle=dropdown]",Dropdown=function(element){var $el=$(element).on("click.dropdown.data-api",this.toggle);$("html").on("click.dropdown.data-api",function(){$el.parent().removeClass("open")})};Dropdown.prototype={constructor:Dropdown,toggle:function(){var $parent,isActive,$this=$(this);if(!$this.is(".disabled, :disabled"))return $parent=getParent($this),isActive=$parent.hasClass("open"),clearMenus(),isActive||$parent.toggleClass("open"),$this.focus(),!1},keydown:function(e){var $this,$items,$parent,isActive,index;if(/(38|40|27)/.test(e.keyCode)&&($this=$(this),e.preventDefault(),e.stopPropagation(),!$this.is(".disabled, :disabled"))){if($parent=getParent($this),isActive=$parent.hasClass("open"),!isActive||isActive&&27==e.keyCode)return $this.click();$items=$("[role=menu] li:not(.divider):visible a",$parent),$items.length&&(index=$items.index($items.filter(":focus")),38==e.keyCode&&index>0&&index--,40==e.keyCode&&$items.length-1>index&&index++,~index||(index=0),$items.eq(index).focus())}}};var old=$.fn.dropdown;$.fn.dropdown=function(option){return this.each(function(){var $this=$(this),data=$this.data("dropdown");data||$this.data("dropdown",data=new Dropdown(this)),"string"==typeof option&&data[option].call($this)})},$.fn.dropdown.Constructor=Dropdown,$.fn.dropdown.noConflict=function(){return $.fn.dropdown=old,this},$(document).on("click.dropdown.data-api touchstart.dropdown.data-api",clearMenus).on("click.dropdown touchstart.dropdown.data-api",".dropdown form",function(e){e.stopPropagation()}).on("touchstart.dropdown.data-api",".dropdown-menu",function(e){e.stopPropagation()}).on("click.dropdown.data-api touchstart.dropdown.data-api",toggle,Dropdown.prototype.toggle).on("keydown.dropdown.data-api touchstart.dropdown.data-api",toggle+", [role=menu]",Dropdown.prototype.keydown)}(window.jQuery),!function($){"use strict";var Modal=function(element,options){this.options=options,this.$element=$(element).delegate('[data-dismiss="modal"]',"click.dismiss.modal",$.proxy(this.hide,this)),this.options.remote&&this.$element.find(".modal-body").load(this.options.remote)};Modal.prototype={constructor:Modal,toggle:function(){return this[this.isShown?"hide":"show"]()},show:function(){var that=this,e=$.Event("show");this.$element.trigger(e),this.isShown||e.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.backdrop(function(){var transition=$.support.transition&&that.$element.hasClass("fade");that.$element.parent().length||that.$element.appendTo(document.body),that.$element.show(),transition&&that.$element[0].offsetWidth,that.$element.addClass("in").attr("aria-hidden",!1),that.enforceFocus(),transition?that.$element.one($.support.transition.end,function(){that.$element.focus().trigger("shown")}):that.$element.focus().trigger("shown")}))},hide:function(e){e&&e.preventDefault(),e=$.Event("hide"),this.$element.trigger(e),this.isShown&&!e.isDefaultPrevented()&&(this.isShown=!1,this.escape(),$(document).off("focusin.modal"),this.$element.removeClass("in").attr("aria-hidden",!0),$.support.transition&&this.$element.hasClass("fade")?this.hideWithTransition():this.hideModal())},enforceFocus:function(){var that=this;$(document).on("focusin.modal",function(e){that.$element[0]===e.target||that.$element.has(e.target).length||that.$element.focus()})},escape:function(){var that=this;this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.modal",function(e){27==e.which&&that.hide()}):this.isShown||this.$element.off("keyup.dismiss.modal")},hideWithTransition:function(){var that=this,timeout=setTimeout(function(){that.$element.off($.support.transition.end),that.hideModal()},500);this.$element.one($.support.transition.end,function(){clearTimeout(timeout),that.hideModal()})},hideModal:function(){this.$element.hide().trigger("hidden"),this.backdrop()},removeBackdrop:function(){this.$backdrop.remove(),this.$backdrop=null},backdrop:function(callback){var animate=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var doAnimate=$.support.transition&&animate;this.$backdrop=$('