tb-terminal-list.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>设备管理-列表</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport"
  7. content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. <!-- 所有的 css & js 资源 -->
  9. <link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
  10. <link rel="stylesheet" href="../../static/sa.css">
  11. <script src="../../static/kj/vue.min.js"></script>
  12. <script src="../../static/kj/element-ui/index.js"></script>
  13. <script src="../../static/kj/httpVueLoader.js"></script>
  14. <script src="../../static/kj/jquery.min.js"></script>
  15. <script src="../../static/kj/layer/layer.js"></script>
  16. <script src="../../static/sa.js"></script>
  17. </head>
  18. <body>
  19. <div class="vue-box" style="display: none;" :style="'display: block;'">
  20. <div class="c-panel">
  21. <!-- ------------- 检索参数 ------------- -->
  22. <div class="c-title">检索参数</div>
  23. <sa-item type="text" name="名称" v-model="p.name"></sa-item>
  24. <div class="c-item">
  25. <label class="c-label">状态:</label>
  26. <el-select v-model="p.state" placeholder="请选择">
  27. <el-option label="全部" value=""></el-option>
  28. <el-option label="在线" value="在线"></el-option>
  29. <el-option label="离线" value="离线"></el-option>
  30. </el-select>
  31. </div>
  32. <el-button type="primary" icon="el-icon-search" @click="f5()">查询
  33. </el-button>
  34. <sa-item style="display: inline;" type="fast-btn" show="reset"></sa-item>
  35. <!-- ------------- 数据列表 ------------- -->
  36. <el-table class="data-table" ref="data-table" :data="dataList">
  37. <sa-td name="序号" type="index"></sa-td>
  38. <sa-td name="名称" prop="name"></sa-td>
  39. <sa-td name="IP地址" prop="ipAddress" width="140"></sa-td>
  40. <sa-td name="方向" prop="direction" type="enum" :jv="{1: '入场', 2: '离场'}"></sa-td>
  41. <sa-td name="状态" prop="state"></sa-td>
  42. <sa-td name="人员数" prop="personNum"></sa-td>
  43. <sa-td name="通道名称" prop="channelName"></sa-td>
  44. <sa-td name="创建时间" prop="createTime" width="160"></sa-td>
  45. <el-table-column label="操作" fixed="right" width="420px">
  46. <template slot-scope="s">
  47. <el-button v-if="sa.isAuth('tb-terminal-edit')" class="c-btn" type="primary"
  48. @click="update(s.row)">修改
  49. </el-button>
  50. <el-button v-if="sa.isAuth('tb-terminal-reboot')" class="c-btn" type="success"
  51. @click="restart(s.row)">重启
  52. </el-button>
  53. <el-button v-if="sa.isAuth('tb-terminal-open')" class="c-btn" type="success"
  54. @click="open(s.row)">开门
  55. </el-button>
  56. <el-button v-if="sa.isAuth('tb-terminal-sync-time')" class="c-btn" type="primary"
  57. @click="sync(s.row)">时钟同步
  58. </el-button>
  59. <el-button v-if="sa.isAuth('tb-terminal-down')" class="c-btn" type="primary"
  60. @click="down(s.row)">下发数据
  61. </el-button>
  62. <el-button v-if="sa.isAuth('tb-terminal-clear')" class="c-btn" type="danger"
  63. @click="clear(s.row)">清除
  64. </el-button>
  65. <el-button v-if="sa.isAuth('tb-terminal-unbind')&&s.row.channelId" class="c-btn"
  66. type="danger" @click="unbind(s.row)">解绑
  67. </el-button>
  68. <el-button v-if="sa.isAuth('tb-terminal-del')" class="c-btn" type="danger"
  69. @click="del(s.row)">删除
  70. </el-button>
  71. </template>
  72. </el-table-column>
  73. </el-table>
  74. <!-- ------------- 分页 ------------- -->
  75. <sa-item type="page" :curr.sync="p.pageNo" :size.sync="p.pageSize" :total="dataCount" @change="f5()">
  76. </sa-item>
  77. </div>
  78. </div>
  79. <script>
  80. var app = new Vue({
  81. components: {
  82. "sa-item": httpVueLoader('../../sa-frame/com/sa-item.vue'),
  83. "sa-td": httpVueLoader('../../sa-frame/com/sa-td.vue'),
  84. },
  85. el: '.vue-box',
  86. data: {
  87. p: { // 查询参数
  88. name: '', // 名称
  89. state: '', // 状态(0=离线,1=正常 no-add no-s)
  90. pageNo: 1, // 当前页
  91. pageSize: 15, // 页大小
  92. sortType: 0 // 排序方式
  93. },
  94. dataCount: 0,
  95. dataList: [], // 数据集合
  96. },
  97. methods: {
  98. sync(data){
  99. sa.ajax('/TbTerminal/sync-time?id=' + data.id, function(res) {
  100. sa.ok('命令已下发');
  101. }.bind(this))
  102. },
  103. down(data){
  104. sa.confirm('是否确定下发数据?', function() {
  105. sa.ajax('/TbTerminal/down?id=' + data.id, function(res) {
  106. sa.ok('命令已下发');
  107. }.bind(this))
  108. }.bind(this));
  109. },
  110. open(data) {
  111. sa.confirm('是否确定远程开门?', function() {
  112. sa.ajax('/TbTerminal/open?id=' + data.id, function(res) {
  113. sa.ok('命令已下发');
  114. }.bind(this))
  115. }.bind(this));
  116. },
  117. clear(data) {
  118. sa.confirm('是否清除设备所有数据?', function() {
  119. sa.ajax('/TbTerminal/clear?id=' + data.id, function(res) {
  120. sa.ok('命令已下发');
  121. }.bind(this))
  122. }.bind(this));
  123. },
  124. unbind(data) {
  125. sa.confirm('是否解除设备与场所关联?', function() {
  126. sa.ajax('/TbTerminal/unbind?id=' + data.id, function(res) {
  127. sa.ok('设备以解绑');
  128. this.f5();
  129. }.bind(this))
  130. }.bind(this));
  131. },
  132. restart(data) {
  133. sa.confirm('是否重启设备?', function() {
  134. sa.ajax('/TbTerminal/restart?sn=' + data.sn, function(res) {
  135. sa.ok('命令已下发');
  136. }.bind(this))
  137. }.bind(this));
  138. },
  139. // 刷新
  140. f5: function() {
  141. sa.ajax('/TbTerminal/getList', sa.removeNull(this.p), function(res) {
  142. this.dataList = res.data; // 数据
  143. this.dataCount = res.dataCount; // 数据总数
  144. sa.f5TableHeight(); // 刷新表格高度
  145. }.bind(this));
  146. },
  147. // 查看
  148. get: function(data) {
  149. sa.showIframe('数据详情', 'tb-terminal-info.html?id=' + data.id, '1050px', '90%');
  150. },
  151. // 查看 - 根据选中的
  152. getBySelect: function(data) {
  153. var selection = this.$refs['data-table'].selection;
  154. if (selection.length == 0) {
  155. return sa.msg('请选择一条数据')
  156. }
  157. this.get(selection[0]);
  158. },
  159. // 修改
  160. update: function(data) {
  161. sa.showIframe('修改数据', 'tb-terminal-add.html?id=' + data.id, '600px', '60%');
  162. },
  163. // 新增
  164. add: function(data) {
  165. sa.showIframe('新增数据', 'tb-terminal-add.html?id=-1', '1000px', '90%');
  166. },
  167. // 删除
  168. del: function(data) {
  169. sa.confirm('是否删除,此操作不可撤销', function() {
  170. sa.ajax('/TbTerminal/delete?id=' + data.id, function(res) {
  171. sa.arrayDelete(this.dataList, data);
  172. sa.ok('删除成功');
  173. sa.f5TableHeight(); // 刷新表格高度
  174. }.bind(this))
  175. }.bind(this));
  176. },
  177. // 批量删除
  178. deleteByIds: function() {
  179. // 获取选中元素的id列表
  180. let selection = this.$refs['data-table'].selection;
  181. let ids = sa.getArrayField(selection, 'id');
  182. if (selection.length == 0) {
  183. return sa.msg('请至少选择一条数据')
  184. }
  185. // 提交删除
  186. sa.confirm('是否批量删除选中数据?此操作不可撤销', function() {
  187. sa.ajax('/TbTerminal/deleteByIds', {
  188. ids: ids.join(',')
  189. }, function(res) {
  190. sa.arrayDelete(this.dataList, selection);
  191. sa.ok('删除成功');
  192. sa.f5TableHeight(); // 刷新表格高度
  193. }.bind(this))
  194. }.bind(this));
  195. },
  196. },
  197. created: function() {
  198. this.f5();
  199. sa.onInputEnter();
  200. }
  201. })
  202. </script>
  203. </body>
  204. </html>