src/router/index.js

@@ -101,6 +101,12 @@ const router = createRouter({
           component: () => import('../views/lifeCycle/Index.vue'),
           meta: { menuName: '全生命周期监控' },
         },
+        {
+          path: 'lifeCycleDetail',
+          name: 'LifeCycleDetail',
+          component: () => import('../views/lifeCycle/Detail.vue'),
+          meta: { menuName: '全生命周期监控' },
+        },
         {
           path: 'relationAnalysis',
           name: 'RelationAnalysis',

src/views/home/HomeView.vue

@@ -133,7 +133,7 @@ const currentActive = computed(() => {
     height: 80px;
     background: var(--bg-color-1);
     transition: 300ms ease-in-out all;
-    z-index: 9;
+    z-index: 2;
     user-select: none;
     
     &.collapse {
@@ -325,7 +325,7 @@ const currentActive = computed(() => {
     width: 100vw;
     height: 100vh;
     padding: 80px 0 0 240px;
-    z-index: 1;
+    z-index: 3;
     transition: 300ms ease-in-out all;
 
     &.collapse {

src/views/lifeCycle/Detail.vue

@@ -0,0 +1,153 @@
+<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>
+    <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="数据生命周期"
+            direction="rtl"
+            size="20%"
+    >
+        <el-timeline direction="vertical" :active="1">
+          <el-timeline-item
+                            v-for="activity in approvalProcess"
+                            :key="index"
+                            :icon ="activity.icon"
+                            :type="activity.type"
+                            :size="activity.size"
+                            :color="activity.color"
+                            :hollow="activity.hollow"
+                            :timestamp="activity.timestamp"
+                            >
+            <dev class="card-descriptions">
+              <el-card shadow="never">
+                <h4> {{ activity.content }}</h4>
+                <p style="color:#909399"> {{ activity.text }}</p>
+              </el-card>
+            </dev>
+          </el-timeline-item>
+        </el-timeline>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup>
+
+
+  import {reactive, ref} from "vue";
+  import createEnum from "../../utils/data/create-enum";
+  const pageSize = ref(10)
+  const tableTotal = ref(8)
+  const currentPage = ref(1)
+  const detailTableVisible = ref(false)
+  const detailDrawerVisible = ref(false)
+  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'},
+    ]})
+
+  const dialogData = reactive({value: [
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+      {  id1: 'M1231341331', id2: 'M1231341331', id3: 'M1231341331', id4: 'M1231341331', id5: 'M1231341331',id6: 'M1231341331',id7: 'M1231341331',remark: '数据重复',},
+
+    ]})
+
+  const approvalProcess =[
+    {content: '数据汇聚', timestamp: '汇聚数量：123442', color: '#86dbde', type: 'primary', hollow: true, text: '2022-01-01 18:30'},
+    {content: '数据质检', timestamp: '质检通过：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
+    {content: '数据清洗', timestamp: '清洗数量：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
+    {content: '数据入库', timestamp: '入库数量：1232212', color: '#86dbde', type: 'primary', hollow: true,text: '2022-01-01 18:30'},
+  ]
+  function toDetail(row) {
+    detailTableVisible.value = true
+    detailDrawerVisible.value =true
+  }
+</script>
+
+<style scoped lang="scss">
+#life-cycle {
+  :deep(.el-drawer){
+    .el-drawer__header{
+      color: #000000;
+    }
+    .el-drawer__body{
+      border-top: 1px solid black;
+    }
+  }
+  .el-timeline-item__node--primary {
+    border-color: #07a9fa
+  }
+  :deep(.el-timeline) {
+    font-size: var(--el-font-extra-large);
+    .el-timeline-item{
+      .el-timeline-item__tail {
+        border-left: 0.1852vh solid #666666;
+      }
+      .el-timeline-item__node{
+        left: -1mm;
+        width: 1.88vh;
+        height: 1.88vh;
+      }
+    }
+  }
+}
+:deep(.card-descriptions) {
+  .el-card {
+    border: none;
+    .el-card__body{
+      padding:0;
+    }
+  }
+}
+:deep(.table-style){
+    .el-table__row{
+      height: 2.5pc;
+      tr{
+        font-size: 2vh;
+      }
+    }
+}
+</style>

src/views/lifeCycle/Index.vue

@@ -1,11 +1,65 @@
 <template>
-  <div id="life-cycle">
-    全生命周期监控
+  <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="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="100">
+          <template #default="scope">
+            <span
+                    class="table-column-state"
+                    :class="{
+                      'green':scope.row.latestTaskStatus==='已完成',
+                      'gray':scope.row.latestTaskStatus==='未配置',
+                      'red':scope.row.latestTaskStatus==='异常',
+                    }"
+            >{{ scope.row.latestTaskStatus }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="最新更新时间" min-width="150" prop="latestUpdateTime" 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>
   </div>
 </template>
 
 <script setup>
 
+
+  import {reactive, ref} from "vue";
+  import {useRouter} from "vue-router";
+
+  const router = useRouter()
+
+  function indexCreate(index) {
+    return index + 1 + pageSize.value * (currentPage.value - 1)
+  }
+  const pageSize = ref(10)
+  const tableTotal = ref(4)
+  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'},
+    ]})
+
+  function toDetail(row) {
+    router.push({
+      name: "LifeCycleDetail",
+      params: {
+
+      },
+    })
+  }
 </script>
 
 <style scoped lang="scss">