|
@@ -1,11 +1,97 @@
|
|
|
<template>
|
|
|
<div id="service-monitor" class="page-list">
|
|
|
- 服务监控
|
|
|
+ <ListHeader title="服务监控" @search="val=>handleSearch(val)"/>
|
|
|
+ <div class="list-main">
|
|
|
+ <el-table :data="tableData.value" ref="table" class="table-default" id="table-list" stripe>
|
|
|
+ <el-table-column type="index" :index="indexCreate" label="序号" min-width="50"/>
|
|
|
+ <el-table-column label="服务名称" min-width="100" prop="serviceName" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="服务类型" min-width="100" prop="serviceTypeName" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="服务状态" min-width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <span
|
|
|
+ class="table-column-state"
|
|
|
+ :class="{
|
|
|
+ 'state-green':scope.row.stateName==='正常',
|
|
|
+ 'state-red':scope.row.stateName==='故障',
|
|
|
+ }">
|
|
|
+ {{ scope.row.stateName }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="使用用户数" min-width="100" prop="person" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="平均响应时间" min-width="100" prop="response" show-overflow-tooltip/>
|
|
|
+ <el-table-column label="最新调用时间" min-width="100" prop="newTime" show-overflow-tooltip/>
|
|
|
+ </el-table>
|
|
|
+ <Pagination :total="tableTotal" :page-size="pageSize" @pageChange="pagi_changePage"/>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
+
|
|
|
+ import {onMounted, reactive, ref} from "vue";
|
|
|
+ import {ServiceMonitorList} from "../../service/serviceMonitor";
|
|
|
+
|
|
|
+ const tableData = reactive({
|
|
|
+ value: []
|
|
|
+ })
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ let tableH = document.getElementById('table-list').getElementsByClassName('el-table__body-wrapper')[0].clientHeight
|
|
|
+ let rowH = 60 / 1920 * document.body.clientWidth
|
|
|
+ pageSize.value = Math.floor(tableH / rowH)
|
|
|
+ getData(currentPage.value, pageSize.value)
|
|
|
+ })
|
|
|
+
|
|
|
+ const currentPage = ref(1)
|
|
|
+ const pageSize = ref(10)
|
|
|
+ const quickSearch = reactive({serviceName:''})
|
|
|
+ const tableTotal = ref(20)
|
|
|
+
|
|
|
+ function pagi_changePage(page) {
|
|
|
+ currentPage.value = page
|
|
|
+ getData(currentPage.value, pageSize.value, quickSearch.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ function indexCreate(index) {
|
|
|
+ return index + 1 + pageSize.value * (currentPage.value - 1)
|
|
|
+ }
|
|
|
+ //搜索
|
|
|
+ function handleSearch (val){
|
|
|
+ quickSearch.serviceName=val
|
|
|
+ getData()
|
|
|
+ }
|
|
|
+ function getData() {
|
|
|
+ ServiceMonitorList(currentPage.value, pageSize.value, quickSearch).then(res => {
|
|
|
+ tableData.value = res.data.records
|
|
|
+ tableTotal.value = res.data.total
|
|
|
+ for (let data of tableData.value) {
|
|
|
+ switch (data.status) {
|
|
|
+ case '1':
|
|
|
+ data.stateName = '正常'
|
|
|
+ break
|
|
|
+ case '2':
|
|
|
+ data.stateName = '故障'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ switch (data.serviceType) {
|
|
|
+ case '0':
|
|
|
+ data.serviceTypeName = '栅格切片'
|
|
|
+ break
|
|
|
+ case '1':
|
|
|
+ data.serviceTypeName = '三维服务'
|
|
|
+ break
|
|
|
+ case '2':
|
|
|
+ data.serviceTypeName = '要素服务'
|
|
|
+ break
|
|
|
+ case '3':
|
|
|
+ data.serviceTypeName = '动态服务'
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|