onlineStatistics.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="renderer" content="webkit">
  6. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  8. <meta http-equiv="pragma" content="no-cache">
  9. <meta http-equiv="Cache" content="no-cache">
  10. <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  11. <meta http-equiv="expires" content="0">
  12. <meta name="viewport"
  13. content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  14. <title>在线统计</title>
  15. <link rel="stylesheet" href="../css/index.css">
  16. <link rel="stylesheet" href="../css/style.css">
  17. <link rel="stylesheet" href="../css/iconfont.css">
  18. <script src="../js/vue.min.js"></script>
  19. <script src="../js/index.js"></script>
  20. <script src="../js/jquery.min.js"></script>
  21. <script type="text/javascript">
  22. document.write('<script src="../assets/init.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  23. document.write('<script src="../assets/ajax.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  24. </script>
  25. <script>
  26. checkLogin();
  27. </script>
  28. <style>
  29. .el-table,.el-table__expanded-cell {
  30. color: #b4b4b4;
  31. background-color: rgba(255,255,255,0) !important;
  32. }
  33. .el-table td.el-table__cell,.el-table th.el-table__cell.is-leaf{
  34. border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  35. }
  36. .el-table--border .el-table__cell{
  37. border-right: 1px solid rgba(255, 255, 255, 0.2);
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div id="app" class="padding-xs">
  43. <el-form :model="queryParem" ref="queryRef" :inline="true" class="margin-bottom-xs">
  44. <el-form-item style="margin: 0px;" label="类型:">
  45. <el-select v-model="queryParem.type" clearable placeholder="请选择" size="small" @change="changeType">
  46. <el-option
  47. v-for="item in typeOption"
  48. :key="item.value"
  49. :label="item.label"
  50. :value="item.value">
  51. </el-option>
  52. </el-select>
  53. </el-form-item>
  54. <el-form-item style="margin: 0px;" label="日期:">
  55. <el-date-picker
  56. v-model="queryParem.beginTime"
  57. type="date"
  58. size="small"
  59. value-format="yyyy-MM-dd"
  60. placeholder="选择日期">
  61. </el-date-picker>
  62. </el-form-item>
  63. <el-form-item style="margin: 0px;">
  64. <el-button type="primary" icon="el-icon-search" @click="searchQuery" size="small">查询</el-button>
  65. <el-button size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
  66. <el-button size="small" icon="el-icon-setting" type="success" plain @click="getHBInfo">配置设置</el-button>
  67. </el-form-item>
  68. </el-form>
  69. <div>
  70. <el-table :data="onlineData"
  71. ref="singleTable"
  72. highlight-current-row
  73. :row-style="{ background: 'transparent' }"
  74. :cell-style="{ background: 'transparent' }"
  75. cell-class-name="text-sm"
  76. :header-cell-style="{ background: '#4461be',color: 'var(--white)' }"
  77. header-cell-class-name="text-black text-bold">
  78. <el-table-column align="center" prop="type" label="上发类型">
  79. <template #default="scope">
  80. <span v-if="scope.row.type == 1">心跳</span>
  81. <span v-if="scope.row.type == 2">掉线</span>
  82. <span v-if="scope.row.type == 3">重连</span>
  83. </template>
  84. </el-table-column>
  85. <el-table-column align="center" prop="createTime" label="接收时间"></el-table-column>
  86. </el-table>
  87. <div class="margin-tb-sm padding-xs">
  88. <el-pagination
  89. @current-change="handleCurrentChange"
  90. :current-page="queryParem.pageNum"
  91. background
  92. :page-size="queryParem.pageSize"
  93. layout="total, prev, pager, next, jumper"
  94. :total="allTotal">
  95. </el-pagination>
  96. </div>
  97. </div>
  98. <el-dialog
  99. title="配置设置"
  100. :visible.sync="dialogVisible"
  101. width="40%">
  102. <el-form :model="setupForm" :rules="setupRules" label-width="120px">
  103. <el-form-item label="心跳接收间隔:" prop="insertInterval">
  104. <el-input placeholder="请输入" type="number" min="0" v-model="setupForm.insertInterval">
  105. <template slot="append">秒</template>
  106. </el-input>
  107. </el-form-item>
  108. <el-form-item label="心跳检测间隔:" prop="cheakInterval">
  109. <el-input placeholder="请输入" type="number" min="0" v-model="setupForm.cheakInterval">
  110. <template slot="append">秒</template>
  111. </el-input>
  112. </el-form-item>
  113. <el-form-item>
  114. <el-button size="small" @click="dialogVisible = false">取 消</el-button>
  115. <el-button size="small" type="primary" @click="updateHBInfo">确 定</el-button>
  116. </el-form-item>
  117. </el-form>
  118. </el-dialog>
  119. </div>
  120. <script type="text/javascript">
  121. document.write('<script src="../assets/fileApi.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  122. document.write('<script src="../assets/onlineStatistics.js?id='+(new Date().getTime())+'" type="text/javascript" charset="utf-8"><\/script>');
  123. </script>
  124. </body>
  125. </html>