生命周期静态页面

src/router/index.js

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

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

@@ -3,12 +3,13 @@
     <ListHeader title="全生命周期监控详情"/>
     <div class="list-main">
       <el-table :data="tableData.value" class="table-default" id="table-list" stripe>
-        <el-table-column label="开始时间" min-width="100" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="结束时间" min-width="100" prop="createUnit" show-overflow-tooltip/>
-        <el-table-column label="归集数据量" min-width="100" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="质检不通过" min-width="100" prop="createUnit" show-overflow-tooltip/>
-        <el-table-column label="质检通过" min-width="100" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="入库数据量" min-width="100" prop="resourceName" show-overflow-tooltip/>
+        <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>
@@ -17,6 +18,44 @@
       </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>
 
@@ -24,23 +63,91 @@
 
 
   import {reactive, ref} from "vue";
-
+  import createEnum from "../../utils/data/create-enum";
   const pageSize = ref(10)
-  const tableTotal = ref(0)
+  const tableTotal = ref(8)
   const currentPage = ref(1)
-  const tableData = reactive({value: []})
+  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) {
-    router.push({
-      name: "AggregateTask",
-      params: {
-        id: row.resourceId
-      },
-    })
+    detailTableVisible.value = true
+    detailDrawerVisible.value =true
   }
 </script>
 
 <style scoped lang="scss">
-#life-cycle {}
-  
+#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

@@ -3,11 +3,23 @@
     <ListHeader title="全生命周期监控"/>
     <div class="list-main">
       <el-table :data="tableData.value" class="table-default" id="table-list" stripe>
-        <el-table-column label="资源名称" min-width="100" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="共享方式" min-width="100" prop="createUnit" show-overflow-tooltip/>
-        <el-table-column label="所属部门" min-width="100" prop="resourceName" show-overflow-tooltip/>
-        <el-table-column label="最新任务状态" min-width="100" prop="createUnit" show-overflow-tooltip/>
-        <el-table-column label="最新更新时间" min-width="100" prop="resourceName" show-overflow-tooltip/>
+        <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>
@@ -23,17 +35,28 @@
 
 
   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(0)
+  const tableTotal = ref(4)
   const currentPage = ref(1)
-  const tableData = reactive({value: []})
+  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: {
-        id: row.resourceId
+
       },
     })
   }