rubick

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="http://www.baidu.com/favicon.ico"> <title>MTC录制回放工具</title>  <link href="/static/css/bootstrap.min.css" rel="stylesheet">  <link href="/static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">  <link href="/static/css/jumbotron-narrow.css" rel="stylesheet"> <link href="/static/css/base.css" rel="stylesheet">   <script src="/static/js/ie-emulation-modes-warning.js"></script>   </head> <body> <div id="app" class="container"> <div class="header clearfix"> <nav> <ul class="nav nav-pills pull-right"> <div class="nav-op-btn" v-on:click="compile()" v-show="!compiling"> 编译 </div> <div class="nav-op-btn" v-show="compiling"> 编译中 </div> <div class="nav-op-btn" data-toggle="modal" data-target="#codeModal"> 代码 </div> <div class="nav-op-btn" data-toggle="modal" data-target="#settingModal"> 高级设置 </div> </ul> </nav> <h3 class="text-muted">Rubick</h3> </div> <div class="row" style="margin-bottom: 10px;"> <div class="col-lg-5"> <div class="content-screen" id="content-screen" v-bind:style="screenWrapStyle"> <section id="screen" v-bind:style="screenStyle"> <canvas id="fgCanvas" class="canvas-fg" style="width:324px;height:576px;" v-show="showFg"></canvas> <canvas id="bgCanvas" class="canvas-bg" style="width:324px;height:576px;"></canvas> </section> <section id="footer"> <button class="btn" :disabled="!deviceConnected" @click="homeOperation()"><i class="fa fa-home"></i>Home</button> <button class="btn" :disabled="!deviceConnected" @click="backOperation()">Back</button> <button class="btn" :disabled="!deviceConnected" @click="menuOperation()">Menu</button> </section> </div> </div> <div class="col-lg-7"> <div class="dropdown-wrap clearfix"> <div class="float-left-label">请上传APP：</div> <div class="file-upload-wrap"> <div class="file-upload-display-btn">上传</div> <input class="file-upload-btn" id="fileupload" type="file" name="case_file" multiple> </div> <div class="float-right-label"> <span>当前应用：</span> <span>{{storeData.appData.packageName}}</span> </div> <div class="float-right-label" v-show="installing"> 正在安装... </div> </div> <div class="dropdown-wrap clearfix" style="margin-top: 10px;"> <div class="float-left-label">请选择模式：</div> <div class="dropdown" style="float: left;"> <button class="btn btn-default dropdown-toggle" type="button" id="method-select-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> {{currentMode}} <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="method-select-menu"> <li><a href="#" @click="initMode()">普通模式</a></li> <li><a href="#" @click="startDrag()">拖拽模式</a></li> <li><a href="#" @click="startCvAction()">图像识别模式</a></li> </ul> </div> <button class="float-right-btn" @click="initMode()">退出当前模式</button> </div>        <div class="input-group-wrap"> <div class="float-left-label">操作描述：</div> <div class="input-group"> <input type="text" class="form-control" placeholder="" v-model="currentCodeBlock.title"> <span class="input-group-addon addon-btn" id="basic-addon2" @click="mergeCodeGen()" style="border-left: none;">合入</span> <span class="input-group-addon addon-btn" id="basic-addon3" data-toggle="modal" data-target="#inputModal" style="border-left: none;">输入文字</span> <span class="input-group-addon addon-btn" id="basic-addon1" data-toggle="modal" data-target="#localCodeModal">查看代码</span> </div> </div>  <div class="content-step"> <div class="code-content"> <div class="code-content-list"> <div class="code-content-item" v-for="item in codeList"> <div class="code-content-value"> {{item.id}}：{{ item.title }} </div> <div class="code-content-op"> <span @click="moveUpCode(item.id)" class="op-item">上移</span> <span @click="moveDownCode(item.id)" class="op-item">下移</span> <span @click="editCode(item.id)" class="op-item">编辑</span> <span @click="assertCode(item.id)" class="op-item" v-if="showAssert(item)">判定</span> <span @click="assertCode(item.id)" class="op-item" v-if="showAssertCancel(item)">取消判定</span> <span @click="deleteCode(item.id)" class="op-item">删除</span> </div> </div> </div> <div style="height: 5px"></div> </div> </div> </div> </div> <div class="modal fade" id="inputModal" tabindex="-1" role="dialog" aria-labelledby="inputModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="inputModalLabel">输入文字</h4> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <div class="input-group" style="margin: 0 20px;"> <input type="text" class="form-control" placeholder="请输入" v-model="inputItem" aria-describedby="basic-addon4"> <span class="input-group-addon" id="basic-addon4" @click="sendInputItem()" style="cursor:pointer;">确认</span> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-labelledby="settingModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="settingModalLabel">其他设置</h4> </div> <div class="modal-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">设置分辨率</label> <div class="col-sm-4"> <input type="text" id="screen-width" placeholder="宽度" class="form-control" v-model="storeData.screenData.canvasSize.width"> </div> <div class="col-sm-4"> <input type="text" id="screen-height" placeholder="高度" class="form-control" v-model="storeData.screenData.canvasSize.height"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">设置超时</label> <div class="col-sm-8"> <input type="text" id="step-default-timeout" placeholder="超时" class="form-control" v-model="defaultTimeout"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">直接操作手机</label> <div class="col-sm-8"> <input style="height:25px;" type="checkbox" id="control-device-checkbox" v-model="screenOperate"> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">用例操作</label> <div class="col-sm-8 clearfix"> <div class="case-edit-btn" @click="downloadCase()">导出用例</div> <div class="case-edit-btn"> 导入用例 <input class="file-upload-btn" id="case-file-upload" type="file" name="case_file" multiple> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="codeModal" tabindex="-1" role="dialog" aria-labelledby="codeModalLabel"> <div class="modal-dialog" role="document" style="width: 1110px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="codeModalLabel">查看代码</h4> </div> <div class="modal-body" style="overflow: auto;"> <textarea class="form-control" rows="16" v-model="codeContent"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="localCodeModal" tabindex="-1" role="dialog" aria-labelledby="localCodeModalLabel"> <div class="modal-dialog" role="document" style="width: 1110px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="localCodeModalLabel">查看当前操作代码</h4> </div> <div class="modal-body" style="overflow: auto;"> <textarea class="form-control" rows="16" v-model="currentCodeBlock.code"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="screenModal" tabindex="-1" role="dialog" aria-labelledby="screenModalLabel"> <div class="modal-dialog" role="document" style="width: 1110px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="screenModalLabel">手机全屏</h4> </div> <div class="modal-body" style="overflow: auto;"> <canvas id="origin-screen-canvas" class="canvas-origin"></canvas> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="edit-code-modal" tabindex="-1" role="dialog" aria-labelledby="edit-code-modal"> <div class="modal-dialog" role="document" style="width: 1110px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="edit-code-modal-label">用例编辑</h4> </div> <div class="modal-body" style="overflow: auto;"> <div class="form-horizontal"> <div class="form-group"><label class="col-sm-3 control-label">步骤ID</label> <div class="col-sm-8"> <input type="text" class="form-control" v-model="currentEditCode.id"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">步骤名称</label> <div class="col-sm-8"> <input type="text" placeholder="请输入名称" class="form-control" v-model="currentEditCode.title"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">步骤代码</label> <div class="col-sm-8"> <input type="text" placeholder="请输入步骤代码" class="form-control" v-model="currentEditCode.code"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">插入等待</label> <div class="col-sm-8"> <input type="text" class="form-control" placeholder="请输入" v-model="waitTime" aria-describedby="basic-addon4"> <span class="input-group-addon" id="basic-addon5" @click="addWaitTime()" style="cursor:pointer;">确认</span> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" v-on:click="confirmCodeEdit()">确认</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <div class="modal fade" id="crop-image-preview-modal" tabindex="-1" role="dialog" aria-labelledby="crop-image-preview-modal"> <div class="modal-dialog" role="document" style="width: 1110px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="crop-image-preview-modal-label">截图</h4> </div> <div class="modal-body" style="overflow: auto;"> <div class="form-horizontal"> <div class="form-group"><label class="col-sm-3 control-label">步骤描述</label> <div class="col-sm-8"> <input type="text" id="preview-image-desc" placeholder="请输入步骤描述" class="form-control" v-model="previewImageDesc"> </div> </div> <div class="form-group"><label class="col-sm-3 control-label">截图预览</label> <div class="col-sm-8"> <canvas id="crop-image-preview" style="overflow:hidden;"></canvas> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" v-on:click="confirmCrop()">确认</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> <footer class="footer"> <p>© 2016 Company, Inc.</p> </footer> </div>   <script src="./static/js/ie10-viewport-bug-workaround.js"></script> <script src="/static/js/vue.js"></script> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/fileupload/vendor/jquery.ui.widget.js"></script> <script src="/static/js/fileupload/jquery.fileupload.js"></script> <script src="/static/js/jquery.Jcrop.min.js"></script> <script src="/static/js/bootstrap.min.js"></script> <script src="/static/js/jquery.form.js"></script> <script type="text/x-template" id="node-element"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.element.xpath}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span> </div> <ul v-show="open" v-if="isFolder"> <item class="item" v-for="model in model.children" :model="model"> </item> </ul> </li> </script> <script> $(document).ready(function() { $('#fileupload').fileupload({ url: BASE_URL + 'apk/analysis', dataType: 'json', autoUpload: true, done: function (e, data) { console.log(data.result.data); if (data.result.data.packageName != null && data.result.data.packageName !== '') { store.appData.packageName = data.result.data.packageName; store.appData.appFile = data.result.data.fileName; store.appData.appInstallStatus = 'ready'; console.log(store); } }, progressall: function (e, data) { let progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }); $('#case-file-upload').fileupload({ url: BASE_URL + 'case/import', dataType: 'json', autoUpload: true, done: function (e, data) { console.log(data.result.data); if (data.result.data != null && data.result.data !== '') { let codeList = JSON.parse(data.result.data); if (codeList.length > 0) { store.codeData = codeList; } console.log(store); } }, progressall: function (e, data) { let progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .progress-bar').css( 'width', progress + '%' ); } }); }); let store = { caseList: [], codeData: [], screenData: { originSize: { width: 1080, height: 1920, }, canvasSize: { width: 324, height: 576, }, radio: 0.4, captureRadio: { left: 0, top: 0, right: 1, bottom: 1 } }, appData: { appFile: '', appInstallStatus: '', packageName: '' } }; </script> <script src="/static/js/app.js"></script> </body> </html>