Commit 3b1a3bbc by ningjihai

项目管理列表pageSize

发先梳理表格
发现进度
parent d1d8c7f0
......@@ -42,8 +42,7 @@ function pageList() {
// 进度数据
const progress = ref(0) // 100% 进度
const tableSum = ref(0) // 已完成表数量
const totalCount = ref(20) // 总表数量
const count = ref(0)
// 执行失败数据
const failureData = ref([
// {
......@@ -136,6 +135,7 @@ const getMonitorDataRequest = () => {
tableSum.value = statistics.tableSum
count.value = statistics.count
if(statistics.count === 0){
progress.value = 0
}else{
......@@ -172,20 +172,21 @@ const getMonitorDataRequest = () => {
<div class="app-container__body">
<div class="discovery-progress-container">
<!-- <div class="discovery-progress-container">
<div class="layout-container">
<!-- 左侧区域 -->
<div class="left-panel">
<!-- 水波纹进度图表 -->
<div class="chart-section">
<div class="chart-container">
<WaterWaveChart :usage="progress" color="#1890ff" />
</div>
<div class="complete">完成表数:{{ tableSum }}</div>
</div>
<!-- 执行失败表格 -->
<div class="failure-table-section">
<div class="section-header">
<span class="title">执行失败</span>
......@@ -204,7 +205,7 @@ const getMonitorDataRequest = () => {
</div>
</div>
<!-- 右侧区域 -->
<div class="right-panel">
<div class="completed-table-section">
<div class="section-header">
......@@ -232,8 +233,73 @@ const getMonitorDataRequest = () => {
</div>
</div>
</div>
</div> -->
<div class="statics-container flex-container align-center justify-between">
<div class="flex1 flex-container align-top">
<div class="statics-item flex-container">
<div class="statics-item-title">表数</div>
<div class="statics-item-value">{{count}}</div>
</div>
<div class="statics-item flex-container">
<div class="statics-item-title">表数</div>
<div class="statics-item-value">{{tableSum}}</div>
</div>
<div class="statics-item flex-container flex1 progress-container">
<div class="statics-item-title">发现进度</div>
<el-progress :percentage="progress" :stroke-width="12" />
</div>
</div>
<el-button color="rgba(33, 103, 217, 1)" :dark="isDark" icon="CircleCheck" @click="handleCatResult">查看结果</el-button>
</div>
<div class="flex-container">
<div class="flex1 table-one">
<div class="flex-container align-center table-title">
<div class="shuxian"></div>
<div class="title">执行失败</div>
</div>
<el-table
:data="failureData"
style="width: 100%"
height="500px"
empty-text="暂无数据"
stripe
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column prop="category" label="类别" min-width="120" fixed="left" />
<el-table-column prop="severity" label="严重性" min-width="100" />
<el-table-column prop="executeTime" label="执行时间" min-width="140" />
</el-table>
</div>
<div class="flex1 table-two">
<div class="flex-container align-center table-title">
<div class="shuxian"></div>
<div class="title">已完成</div>
</div>
<el-table
:data="completedData"
height="500px"
style="width: 100%"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
empty-text="暂无数据"
stripe
>
<el-table-column label="发现序号" width="100" align="center" fixed>
<template #default="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="dbType" label="发现表名" min-width="150" />
<el-table-column prop="dbName" label="SCHEMA" width="100" />
<el-table-column prop="createTime" label="发现时间" width="160" fixed="right"/>
</el-table>
</div>
</div>
</div>
......@@ -242,8 +308,51 @@ const getMonitorDataRequest = () => {
</template>
<style lang="scss" scoped>
.statics-container {
background: rgba(255, 255, 255, 1);
border-left: 5px solid rgba(33, 103, 217, 1);
padding: 28px 38px 28px 48px;
}
.statics-item {
flex-direction: column;
margin-left: 90px;
&:first-child {
margin-left: 0;
}
.statics-item-title {
font-size: 14px;
color: rgba(53, 64, 79, 1);
margin-bottom: 10px;
}
}
.table-one {
margin-right: 10px;
}
.table-two {
margin-left: 10px;
}
.table-title {
margin-top: 25px;
margin-bottom: 15px;
.shuxian {
width: 2.26px;
height: 14px;
opacity: 1;
border-radius: 8px;
background: rgba(33, 103, 217, 1);
}
.title {
font-size: 14px;
color: rgba(53, 64, 79, 1);
margin-left: 14px;
}
}
.progress-container {
margin-right: 150px;
}
.flex-container {
display: flex;
}
......@@ -255,10 +364,13 @@ const getMonitorDataRequest = () => {
.justify-between {
justify-content: space-between;
}
.align-top {
align-items: flex-start;
}
.flex1 {
flex: 1;
}
.flex-wrap {
flex-direction: wrap;
}
......
......@@ -418,10 +418,16 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
<el-table
:data="tableData"
border
stripe
style="width: 100%"
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
>
<el-table-column
type="index"
label="序号"
width="80"
align="center"
fixed
/>
<!-- 发现任务名称列(左侧浮动) -->
<el-table-column
prop="taskName"
......@@ -431,7 +437,7 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
fixed
>
<template #default="{ row }">
<span class="task-name">{{ row.taskName }}</span>
<span>{{ row.taskName }}</span>
</template>
</el-table-column>
......@@ -442,7 +448,7 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
min-width="120"
>
<template #default="{ row }">
<span class="result-text">{{ row.result }}</span>
<span>{{ row.result }}</span>
</template>
</el-table-column>
......@@ -475,7 +481,7 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
min-width="200"
>
<template #default="{ row }">
<span class="time-text">{{ row.createTime }}</span>
<span >{{ row.createTime }}</span>
</template>
</el-table-column>
......@@ -486,7 +492,7 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
min-width="200"
>
<template #default="{ row }">
<span class="time-text">{{ row.updateTime }}</span>
<span>{{ row.updateTime }}</span>
</template>
</el-table-column>
......@@ -497,7 +503,7 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
width="120"
>
<template #default="{ row }">
<span class="remark-text">{{ row.remark || '-' }}</span>
<span>{{ row.remark || '-' }}</span>
</template>
</el-table-column>
......@@ -553,11 +559,13 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
type="info"
size="small"
class="more-btn"
icon="MoreFilled"
>
更多
<!-- <el-icon><MoreFilled /></el-icon> -->
<!-- 更多
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</el-icon> -->
</el-button>
<template #dropdown>
<el-dropdown-menu>
......@@ -663,8 +671,9 @@ const handleAddEditConfirm = (submitData, isEditMode) =>{
}
.task-name {
font-weight: 500;
color: #303133;
font-size: 14px;
font-weight: 400;
color: rgba(53, 64, 79, 1);
}
.result-text {
......
......@@ -52,7 +52,7 @@ function handleQuery() {
const data = reactive({
queryParams: {
page: 1,
everypage: 8,
everypage: 10,
proName: '',
note: ''
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论