新加接口2

src/router/index.js

@@ -102,7 +102,7 @@ const router = createRouter({
           meta: { menuName: '全生命周期监控' },
         },
         {
-          path: 'lifeCycleDetail',
+          path: 'lifeCycleDetail/:id?',
           name: 'LifeCycleDetail',
           component: () => import('../views/lifeCycle/Detail.vue'),
           meta: { menuName: '全生命周期监控' },

src/services/lifeCycle.js

@@ -0,0 +1,18 @@
+import request from "./index";
+
+export function PageListByResource(page,limit,quickSearch) {
+    return request({
+        url: '/service/lifeCycle/pageListByResource',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}
+
+
+export function PageListByResourceId(page,limit,quickSearch) {
+    return request({
+        url: '/service/lifeCycle/pageListByResourceId',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}

src/views/lifeCycle/Detail.vue

@@ -1,35 +1,45 @@
 <template>
-  <div  id="life-cycle" class="page-list">
-    <ListHeader title="全生命周期监控详情"/>
-    <div class="list-main">
-      <el-table :data="tableData.value" 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="startTime" show-overflow-tooltip/>
-        <el-table-column label="结束时间" min-width="100" prop="endTime" show-overflow-tooltip/>
-        <el-table-column label="归集数据量" min-width="100" prop="collectedDataVolume" show-overflow-tooltip/>
-        <el-table-column label="质检不通过" min-width="100" prop="qualityInspectionFailed" show-overflow-tooltip/>
-        <el-table-column label="质检通过" min-width="100" prop="qualityInspectionPassed" show-overflow-tooltip/>
-        <el-table-column label="入库数据量" min-width="100" prop="amountOfInboundData" show-overflow-tooltip/>
-        <el-table-column fixed="right" label="操作" min-width="120">
-          <template #default="scope">
-            <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :total="tableTotal" :page-size="pageSize" :current-page="currentPage" @pageChange="pagi_changePage" />
+  <div  id="life-cycle" class="detail-default">
+    <div class="detail-header">
+      <div class="d-title">
+        <span>全生命周期监控详情</span>
+      </div>
+      <div class="d-btns">
+        <el-button class="btn-default" @click="handleClose">关闭</el-button>
+      </div>
+    </div>
+    <div class="page-list">
+
+      <div class="list-main">
+        <el-table :data="tableData.value" 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="beginTime" show-overflow-tooltip/>
+          <el-table-column label="结束时间" min-width="100" prop="endTime" show-overflow-tooltip/>
+          <el-table-column label="归集数据量" min-width="100" prop="numImport" show-overflow-tooltip/>
+          <el-table-column label="质检不通过" min-width="100" prop="numTestNoPass" show-overflow-tooltip/>
+          <el-table-column label="质检通过" min-width="100" prop="numTestPass" show-overflow-tooltip/>
+          <el-table-column label="入库数据量" min-width="100" prop="numInput" show-overflow-tooltip/>
+          <el-table-column fixed="right" label="操作" min-width="120">
+            <template #default="scope">
+              <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination :total="tableTotal" :page-size="pageSize" :current-page="currentPage" @pageChange="pagi_changePage" />
+      </div>
+      <el-dialog v-model="detailTableVisible" title=" 详情的详情弹窗" width="55%" draggable>
+        <el-table :data="dialogData.value" height="400" class="table-style">
+          <el-table-column prop="id1" label="ID" width="110" />
+          <el-table-column prop="id2" label="ID" width="110" />
+          <el-table-column prop="id3" label="ID"  width="110"/>
+          <el-table-column prop="id4" label="ID" width="110" />
+          <el-table-column prop="id5" label="ID" width="110" />
+          <el-table-column prop="id6" label="ID"  width ="110"/>
+          <el-table-column prop="id7" label="ID" width="110" />
+          <el-table-column prop="remark" label="备注" width="110" />
+        </el-table>
+      </el-dialog>
     </div>
-    <el-dialog v-model="detailTableVisible" title=" 详情的详情弹窗" width="55%" draggable>
-      <el-table :data="dialogData.value" height="400" class="table-style">
-        <el-table-column prop="id1" label="ID" width="110" />
-        <el-table-column prop="id2" label="ID" width="110" />
-        <el-table-column prop="id3" label="ID"  width="110"/>
-        <el-table-column prop="id4" label="ID" width="110" />
-        <el-table-column prop="id5" label="ID" width="110" />
-        <el-table-column prop="id6" label="ID"  width ="110"/>
-        <el-table-column prop="id7" label="ID" width="110" />
-        <el-table-column prop="remark" label="备注" width="110" />
-      </el-table>
-    </el-dialog>
     <el-drawer
             v-model="detailDrawerVisible"
             title="数据生命周期"
@@ -63,25 +73,30 @@
 
 
   import {reactive, ref} from "vue";
-  import createEnum from "../../utils/data/create-enum";
-  const pageSize = ref(10)
+  import {onBeforeMount} from "@vue/runtime-core";
+  import {useRoute, useRouter} from "vue-router";
+  import {PageListByResource, PageListByResourceId} from "../../services/lifeCycle";
+  const route = useRoute()
+  const router = useRouter()
+
   const tableTotal = ref(8)
-  const currentPage = ref(1)
   const detailTableVisible = ref(false)
   const detailDrawerVisible = ref(false)
+
+  function handleClose() {
+    router.push({
+      name: 'LifeCycle'
+    })
+  }
+
   function indexCreate(index) {
     return index + 1 + pageSize.value * (currentPage.value - 1)
   }
-  const tableData = reactive({value: [
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-      {  startTime: '2022-06-02 11:23', endTime: '2022-06-02 11:23', collectedDataVolume: '23452', qualityInspectionFailed: '23452', qualityInspectionPassed: '23452',amountOfInboundData: '23452'},
-    ]})
+  function pagi_changePage(page) {
+    currentPage.value = page
+    getData(currentPage.value, pageSize.value, quickSearch.value)
+  }
+  const tableData = reactive({value: []})
 
   const dialogData = reactive({value: [
       {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
@@ -105,6 +120,27 @@
     detailTableVisible.value = true
     detailDrawerVisible.value =true
   }
+
+  const currentPage = ref(1)
+  const pageSize = ref(10)
+  const quickSearch = reactive({resourceId:''})
+
+  onBeforeMount(()=> {
+    quickSearch.resourceId=route.params.id
+    getData(currentPage.value, pageSize.value, quickSearch.value)
+  })
+
+  function getData() {
+    PageListByResourceId(currentPage.value, pageSize.value, quickSearch).then(res => {
+      if (res.code === 'SUCCESS') {
+        tableData.value = res.data.records
+        tableTotal.value = res.data.total
+      } else {
+        ElMessage({type: 'error', message: '查询失败'})
+      }
+    })
+  }
+
 </script>
 
 <style scoped lang="scss">

src/views/lifeCycle/Index.vue

@@ -1,25 +1,26 @@
 <template>
   <div  id="life-cycle" class="page-list">
-    <ListHeader title="全生命周期监控"/>
+    <ListHeader title="全生命周期监控"  @search="val=>handleSearch(val)"/>
     <div class="list-main">
       <el-table :data="tableData.value" class="table-default" id="table-list" stripe>
         <el-table-column type="index" :index="indexCreate" label="序号" min-width="50"/>
-        <el-table-column label="资源名称" min-width="150" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="共享方式" min-width="150" prop="sharingMethod" show-overflow-tooltip/>
-        <el-table-column label="所属部门" min-width="100" prop="department" show-overflow-tooltip/>
+        <el-table-column label="资源名称" min-width="150" prop="tresourceName" show-overflow-tooltip/>
+        <el-table-column label="共享方式" min-width="150" prop="tresourceShareType" show-overflow-tooltip/>
+        <el-table-column label="所属部门" min-width="100" prop="tunitName" show-overflow-tooltip/>
         <el-table-column label="最新任务状态" min-width="100">
           <template #default="scope">
             <span
                     class="table-column-state"
                     :class="{
-                      'green':scope.row.latestTaskStatus==='已完成',
-                      'gray':scope.row.latestTaskStatus==='未配置',
-                      'red':scope.row.latestTaskStatus==='异常',
+                      'green':scope.row.stateName==='已完成' || scope.row.stateName==='正在运行',
+                      'gray':scope.row.stateName==='未配置',
+                      'red':scope.row.stateName==='异常',
+                      'blue':scope.row.stateName==='已配置',
                     }"
-            >{{ scope.row.latestTaskStatus }}</span>
+            >{{ scope.row.stateName }}</span>
           </template>
         </el-table-column>
-        <el-table-column label="最新更新时间" min-width="150" prop="latestUpdateTime" show-overflow-tooltip/>
+        <el-table-column label="最新更新时间" min-width="150" prop="endTime" show-overflow-tooltip/>
         <el-table-column fixed="right" label="操作" min-width="120">
           <template #default="scope">
             <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
@@ -36,30 +37,74 @@
 
   import {reactive, ref} from "vue";
   import {useRouter} from "vue-router";
+  import {onMounted} from "@vue/runtime-core";
+  import {PageListByResource} from "../../services/lifeCycle";
 
   const router = useRouter()
 
+
+  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)
+  })
+
+
   function indexCreate(index) {
     return index + 1 + pageSize.value * (currentPage.value - 1)
   }
-  const pageSize = ref(10)
-  const tableTotal = ref(4)
+  const tableData = reactive({
+    value: []
+  })
   const currentPage = ref(1)
-  const tableData = reactive({value: [
-      {  resourceName: '普陀区给水管线设施面', sharingMethod: '有条件共享', department: '住建委', latestTaskStatus: '未配置', latestUpdateTime: '2023-04-18'},
-      {  resourceName: '普陀区给水管线设施面', sharingMethod: '有条件共享', department: '住建委', latestTaskStatus: '已完成', latestUpdateTime: '2023-04-18'},
-      {  resourceName: '普陀区给水管线设施面', sharingMethod: '有条件共享', department: '住建委', latestTaskStatus: '异常', latestUpdateTime: '2023-04-18'},
-      {  resourceName: '普陀区给水管线设施面', sharingMethod: '有条件共享', department: '住建委', latestTaskStatus: '异常', latestUpdateTime: '2023-04-18'},
-    ]})
+  const pageSize = ref(10)
+  const quickSearch = reactive({tResourceName:''})
+  const tableTotal = ref(20)
+
+  function pagi_changePage(page) {
+    currentPage.value = page
+    getData(currentPage.value, pageSize.value, quickSearch.value)
+  }
 
+  function handleSearch (val){
+    quickSearch.tResourceName=val
+    getData()
+  }
+  function getData() {
+    PageListByResource(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
+          case '4':
+            data.stateName = '停止'
+            break
+          case '5':
+            data.stateName = '异常'
+            break
+        }
+      }
+    })
+  }
   function toDetail(row) {
     router.push({
       name: "LifeCycleDetail",
       params: {
-
+        id: row.resourceId
       },
     })
   }
+
 </script>
 
 <style scoped lang="scss">