四个页面

src/router/index.js

@@ -76,13 +76,13 @@ const router = createRouter({
         {
           path: 'serviceMonitorApi',
           name: 'ServiceMonitorApi',
-          component: () => import('../views/serviceMonitor/Index.vue'),
+          component: () => import('../views/serviceMonitorApi/Index.vue'),
           meta: { menuId: 'api_fwjk' },
         },
         {
           path: 'requestLogApi',
           name: 'RequestLogApi',
-          component: () => import('../views/requestLog/Index.vue'),
+          component: () => import('../views/requestLogApi/Index.vue'),
           meta: { menuId: 'api_qqjk' },
         },
 

src/service/requestLog.js

@@ -0,0 +1,9 @@
+import request from "./index";
+
+export function RequestLogList(page,limit,quickSearch) {
+    return request({
+        url: '/service/dataService/listForRequest',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}

src/service/requestLogApi.js

@@ -0,0 +1,9 @@
+import request from "./index";
+
+export function RequestLogApiList(page,limit,quickSearch) {
+    return request({
+        url: '/service/tApiService/listForRequest',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}

src/service/serviceMonitor.js

@@ -0,0 +1,9 @@
+import request from "./index";
+
+export function ServiceMonitorList(page,limit,quickSearch) {
+    return request({
+        url: '/service/dataService/listForMonitor',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}

src/service/serviceMonitorApi.js

@@ -0,0 +1,9 @@
+import request from "./index";
+
+export function ServiceMonitorApiList(page,limit,quickSearch) {
+    return request({
+        url: '/service/tApiService/listForMonitor',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}

src/views/requestLog/Index.vue

@@ -1,11 +1,85 @@
 <template>
   <div id="request-log" 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="username" show-overflow-tooltip/>
+        <el-table-column label="用户IP" min-width="100" prop="userip" show-overflow-tooltip/>
+        <el-table-column label="响应时间（ms)" min-width="100" prop="response" 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==='拦截',
+              'state-orange':scope.row.stateName==='异常',
+            }">
+                {{ scope.row.stateName }}
+            </span>
+          </template>
+        </el-table-column>
+        <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 {RequestLogList} from "../../service/requestLog";
 
+  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() {
+    RequestLogList(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
+          case '3':
+            data.stateName = '拦截'
+            break
+        }
+      }
+    })
+  }
 </script>
 
 <style scoped lang="scss">

src/views/requestLogApi/Index.vue

@@ -0,0 +1,90 @@
+<template>
+    <div id="request-log-Api" 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="apiName" show-overflow-tooltip/>
+                <el-table-column label="用户名" min-width="100" prop="username" show-overflow-tooltip/>
+                <el-table-column label="用户IP" min-width="100" prop="userip" show-overflow-tooltip/>
+                <el-table-column label="响应时间（ms)" min-width="100" prop="response" 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==='拦截',
+              'state-orange':scope.row.stateName==='异常',
+            }">
+                {{ scope.row.stateName }}
+            </span>
+                    </template>
+                </el-table-column>
+                <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 {RequestLogApiList} from "../../service/requestLogApi";
+
+    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({apiName:''})
+    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.apiName=val
+        getData()
+    }
+    function getData() {
+        RequestLogApiList(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
+                    case '3':
+                        data.stateName = '拦截'
+                        break
+                }
+            }
+        })
+    }
+</script>
+
+<style scoped lang="scss">
+    #request-log-Api {
+
+    }
+
+</style>

src/views/serviceMonitor/Index.vue

@@ -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">

src/views/serviceMonitorApi/Index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div id="service-monitor-Api" 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="apiName" show-overflow-tooltip/>
+        <el-table-column label="服务类型" min-width="100" prop="apiType" 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="平均响应时间（ms)" 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 {ServiceMonitorApiList} from "../../service/ServiceMonitorApi";
+
+  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({apiName:''})
+  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.apiName=val
+    getData()
+  }
+  function getData() {
+    ServiceMonitorApiList(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
+        }
+      }
+    })
+  }
+</script>
+
+<style scoped lang="scss">
+#service-monitor-Api {
+  
+}
+  
+</style>