| | |
| | | <div class="flex_Box"> |
| | | <div style="width: 100%; height: 20px"> |
| | | <div class="image1"></div> |
| | | <div class="imageTitle">内存监控</div> |
| | | <div class="imageTitle"> |
| | | {{ $t('operatManage.systemMonitoringObj.memoryMonitoring') }} |
| | | </div> |
| | | </div> |
| | | <div class="top_Box1"> |
| | | <div class="top_box_left"> |
| | |
| | | <p>{{ memInfo.use }}</p> |
| | | </div> |
| | | <div class="height_title"> |
| | | <label>使用率</label> |
| | | <label> |
| | | {{ |
| | | $t('operatManage.systemMonitoringObj.usageRate') |
| | | }}</label |
| | | > |
| | | <p>{{ memInfo.usage }}</p> |
| | | </div> |
| | | </div> |
| | |
| | | <p>{{ memInfo.totalMem }}</p> |
| | | </div> |
| | | <div class="height_title"> |
| | | <label>剩余内存</label> |
| | | <label> |
| | | {{ |
| | | $t('operatManage.systemMonitoringObj.remainingMemory') |
| | | }}</label |
| | | > |
| | | <p>{{ memInfo.remainMem }}</p> |
| | | </div> |
| | | </div> |
| | |
| | | <div class="flex_Box"> |
| | | <div> |
| | | <div class="image2"></div> |
| | | <div style="line-height: 32px" class="imageTitle">CPU监控</div> |
| | | <div style="line-height: 32px" class="imageTitle"> |
| | | {{ $t('operatManage.systemMonitoringObj.cpuMonitoring') }} |
| | | </div> |
| | | </div> |
| | | <div |
| | | id="Sys_cpu_chart" |
| | |
| | | <div class="flex_Box"> |
| | | <div style="width: 100%; height: 34px"> |
| | | <div class="image3"></div> |
| | | <div style="line-height: 32px" class="imageTitle">异常数</div> |
| | | <div style="line-height: 32px" class="imageTitle"> |
| | | {{ $t('operatManage.systemMonitoringObj.heteroconstant') }} |
| | | </div> |
| | | </div> |
| | | <div class="ycsBox"> |
| | | <div class="ycTltle">{{ resInfoCount }}</div> |
| | | <div |
| | | style=" |
| | | width: 110px; |
| | | height: 16px; |
| | | font-size: 16px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 300; |
| | | color: #ffffff; |
| | | line-height: 49px; |
| | | margin-left: 51px; |
| | | margin-top: 20px; |
| | | " |
| | | > |
| | | 系统异常个数 |
| | | <div class="heteroTitle"> |
| | | {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | > |
| | | </el-table-column> </el-table |
| | | ></el-tab-pane> |
| | | <el-tab-pane label="服务资源状态" name="second"> |
| | | <el-tab-pane |
| | | :label=" |
| | | $t('operatManage.systemMonitoringObj.serviceResourceStatus') |
| | | " |
| | | name="second" |
| | | > |
| | | <div id="resUseChart" style="width: 995px; height: 310px"></div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="用户登录状态" name="third"> |
| | | <el-tab-pane |
| | | :label="$t('operatManage.systemMonitoringObj.userloginStatus')" |
| | | name="third" |
| | | > |
| | | <div |
| | | id="userLoginChart" |
| | | style="width: 995px; height: 310px" |
| | | ></div> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="资源操作状态" name="fourth" |
| | | <el-tab-pane |
| | | :label=" |
| | | $t('operatManage.systemMonitoringObj.resourceOperationStatus') |
| | | " |
| | | name="fourth" |
| | | ><div |
| | | id="operateCountChart" |
| | | style="width: 995px; height: 310px" |
| | |
| | | </div> |
| | | <div class="flex_Box"> |
| | | <div> |
| | | <div style="line-height: 32px" class="imageTitle">在线人员</div> |
| | | <div style="line-height: 32px" class="imageTitle"> |
| | | {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }} |
| | | </div> |
| | | </div> |
| | | <el-table :data="tableData" style="width: 100%" height="90%"> |
| | | <el-table-column |
| | |
| | | margin-top: 61px; |
| | | margin-left: 88px; |
| | | } |
| | | .heteroTitle { |
| | | width: 100%; |
| | | height: 16px; |
| | | font-size: 16px; |
| | | font-family: Microsoft YaHei; |
| | | font-weight: 300; |
| | | color: #ffffff; |
| | | line-height: 49px; |
| | | |
| | | margin-top: 20px; |
| | | |
| | | text-align: center; |
| | | } |
| | | } |
| | | .imageTitle { |
| | | float: left; |