| | |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
|---|
| | | <script src="../static/js/ng/tb-2.0.js"></script> |
|---|
| | | <script src="../js/main.js"></script> |
|---|
| | | <style type="text/css"> |
|---|
| | | <style> |
|---|
| | | .el-table .warning-row { |
|---|
| | | background: oldlace; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .el-table .success-row { |
|---|
| | | background: oldlace; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | |
|---|
| | | </style> |
|---|
| | | <title>Insert title here</title> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <div id="tab" style="display:width:100%"> |
|---|
| | | </div> |
|---|
| | | <% |
|---|
| | | String a=null; |
|---|
| | | try{ |
|---|
| | | a=Manager.getDevice().toString(); |
|---|
| | | } |
|---|
| | | catch(Exception e){ |
|---|
| | | a="[{}]"; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | %> |
|---|
| | | <div id="app" style="width:100%"> |
|---|
| | | <el-table border |
|---|
| | | :data="machine" |
|---|
| | | height='100%' |
|---|
| | | style="width: 100%;" |
|---|
| | | :cell-class-name="tableRowClassName" |
|---|
| | | > |
|---|
| | | <el-table-column |
|---|
| | | prop="name" |
|---|
| | | label="设备"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="ip" |
|---|
| | | label="IP"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="port" |
|---|
| | | label="port"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="st" |
|---|
| | | label="状态"> |
|---|
| | | </el-table-column> |
|---|
| | | <el-table-column |
|---|
| | | prop="count" |
|---|
| | | label="调用次数"> |
|---|
| | | </el-table-column> |
|---|
| | | </el-table> |
|---|
| | | </div> |
|---|
| | | <script type="text/javascript"> |
|---|
| | | var a= |
|---|
| | | <% |
|---|
| | | // Manager.appStart(null); |
|---|
| | | out.print( Manager.getDevice().toString()); |
|---|
| | | |
|---|
| | | %>; |
|---|
| | | |
|---|
| | | |
|---|
| | | |
|---|
| | | var opt={ |
|---|
| | | table:{ |
|---|
| | | trStyles:["background-color:none","background-color:lightblue"], |
|---|
| | | style:"width:100%", |
|---|
| | | border:1, |
|---|
| | | notify:function(message){ |
|---|
| | | if(message.data.st!="已连接"){ |
|---|
| | | |
|---|
| | | message.tr.children[3].style["color"]="red"; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | columns:[ |
|---|
| | | { |
|---|
| | | name:"设备名", |
|---|
| | | binding:"name" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | { |
|---|
| | | name:"IP", |
|---|
| | | binding:"ip" |
|---|
| | | |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name:"port", |
|---|
| | | binding:"port", |
|---|
| | | } |
|---|
| | | |
|---|
| | | , |
|---|
| | | { |
|---|
| | | name:"状态", |
|---|
| | | binding:"st" |
|---|
| | | } |
|---|
| | | , |
|---|
| | | { |
|---|
| | | name:"调用次数", |
|---|
| | | binding:"count" |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | ] |
|---|
| | | }; |
|---|
| | | |
|---|
| | | var tab=createTable(document.getElementById("tab"),opt); |
|---|
| | | tab.update(a); |
|---|
| | | tab.notify(); |
|---|
| | | Vue.prototype.$echarts = echarts |
|---|
| | | let app =new Vue({ |
|---|
| | | el: '#app', |
|---|
| | | mixins:[mixin], |
|---|
| | | data:{ |
|---|
| | | machine:<%= a%>, |
|---|
| | | }, |
|---|
| | | methods:{ |
|---|
| | | tableRowClassName({row,column,rowIndex,columnIndex}) { |
|---|
| | | |
|---|
| | | if (row['st'] == '未连接' && columnIndex==3 ) { |
|---|
| | | return 'success-row'; |
|---|
| | | }else{ |
|---|
| | | return ''; |
|---|
| | | } |
|---|
| | | |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | // console.log(app.$data.machine); |
|---|
| | | </script> |
|---|
| | | </body> |
|---|
| | | </html> |
|---|
