348 lines
9.8 KiB
Vue
348 lines
9.8 KiB
Vue
<template>
|
|
<div class="home_page">
|
|
<div class="car_container">
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">测试任务总数</div>
|
|
<div class="number">1248</div>
|
|
<div class="compare">较昨日 +128 ↑</div>
|
|
</div>
|
|
</div>
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">今日执行任务</div>
|
|
<div class="number">86</div>
|
|
<div class="compare">较昨日 +16 ↑</div>
|
|
</div>
|
|
</div>
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">在线设备数</div>
|
|
<div class="number">128</div>
|
|
<div class="compare">较昨日 +8 ↑</div>
|
|
</div>
|
|
</div>
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">异常告警数</div>
|
|
<div class="number">23</div>
|
|
<div class="compare">较昨日 -5 ↓</div>
|
|
</div>
|
|
</div>
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">测试通过率</div>
|
|
<div class="number">96.37%</div>
|
|
<div class="compare">较昨日 +1.28% ↑</div>
|
|
</div>
|
|
</div>
|
|
<div class="car_item">
|
|
<div>图标</div>
|
|
<div>
|
|
<div class="title">本周执行时长</div>
|
|
<div class="number">268.5h</div>
|
|
<div class="compare">较昨日 +23.6h ↑</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart_container">
|
|
<div class="lineChart-box">
|
|
<LineChart :series="lineSeries" />
|
|
</div>
|
|
<div class="barChart-box"><BarChart :series="barSeries" /></div>
|
|
<div class="info-box">
|
|
<div class="info-item">
|
|
<div class="item-title">待处理事项</div>
|
|
<div class="item-context">
|
|
<div>待审核用例</div>
|
|
<div>待处理异常</div>
|
|
<div>待分配任务</div>
|
|
<div>待生成报告</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="item-title">告警信息</div>
|
|
<div class="item-context">
|
|
<div class="item" v-for="alarm in alarmList">
|
|
<div class="status-box">
|
|
<div class="status" :class="alarm.status">{{ statusList[alarm.status] }}</div>
|
|
<div class="context">{{ alarm.context }}</div>
|
|
</div>
|
|
<div class="time">{{ alarm.time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table_container">
|
|
<div>最近测试任务</div>
|
|
<el-table
|
|
v-loading="loading"
|
|
:data="tableList"
|
|
row-key="id"
|
|
>
|
|
<el-table-column prop="deptName" label="任务名称"></el-table-column>
|
|
<el-table-column prop="orderNum" label="执行对象"></el-table-column>
|
|
<el-table-column prop="orderNum" label="测试类型"></el-table-column>
|
|
<el-table-column prop="status" label="状态" width="100">
|
|
<template #default="scope">
|
|
<dict-tag :options="sys_normal_disable" :value="scope.row.status" />
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="orderNum" label="合格率"></el-table-column>
|
|
<el-table-column label="创建时间" align="center" prop="createTime" width="200">
|
|
<template #default="scope">
|
|
<span>{{ parseTime(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import LineChart from './components/LineChart.vue';
|
|
import BarChart from './components/BarChart.vue';
|
|
import * as echarts from 'echarts';
|
|
|
|
const lineSeries = ref([
|
|
{
|
|
name: '执行任务数',
|
|
type: 'line',
|
|
color: '#3e95d8',
|
|
data: [120, 122, 101, 114, 90, 130, 110],
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#3e95d8'
|
|
},
|
|
{
|
|
offset: 0.2,
|
|
color: '#d1efed'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#fff'
|
|
}
|
|
])
|
|
},
|
|
},
|
|
{
|
|
name: '通过率',
|
|
type: 'line',
|
|
color: '#5becde',
|
|
data: [96.5, 97.3, 92.8, 95.8, 98.7, 96.8, 97.9],
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#5becde'
|
|
},
|
|
{
|
|
offset: 0.3,
|
|
color: '#d1efed'
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#fff'
|
|
}
|
|
])
|
|
},
|
|
}
|
|
])
|
|
|
|
const barSeries = ref([
|
|
{
|
|
name: '已完成',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
color: '#53dbca',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [30, 32, 30, 34, 39, 30, 30]
|
|
},
|
|
{
|
|
name: '运行中',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
color: '#5becde',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [27, 32, 30, 34, 39, 30, 30]
|
|
},
|
|
{
|
|
name: '暂停中',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
color: '#d1efed',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [10, 32, 30, 34, 39, 30, 30]
|
|
},
|
|
{
|
|
name: '异常',
|
|
type: 'bar',
|
|
stack: 'Ad',
|
|
color: '#3e95d8',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
data: [5, 32, 30, 34, 39, 30, 30]
|
|
}
|
|
])
|
|
|
|
const statusList = {
|
|
'urgent': '紧急',
|
|
'important': '重要',
|
|
'ordinary': '一般'
|
|
}
|
|
|
|
const alarmList = ref([
|
|
{
|
|
status: 'urgent',
|
|
context: '手机设备AIMA-TEST-015离线',
|
|
time: '10:32'
|
|
}, {
|
|
status: 'important',
|
|
context: '测试任务AIMA-00123执行异常',
|
|
time: '10:15'
|
|
}, {
|
|
status: 'ordinary',
|
|
context: '存储空间使用率超过80%',
|
|
time: '10:15'
|
|
}
|
|
])
|
|
|
|
const tableList = ref([])
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.home_page {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.car_container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 20px;
|
|
|
|
.car_item {
|
|
flex: 1;
|
|
box-shadow: 0 0 0 1px #dddddd;
|
|
border-radius: 8px;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
background: #fff;
|
|
|
|
.title {
|
|
font-size: 16px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.number {
|
|
font-size: 30px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.compare {
|
|
font-size: 14px;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart_container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
gap: 20px;
|
|
|
|
.lineChart-box {
|
|
flex: 1;
|
|
height: 300px;
|
|
box-shadow: 0 0 0 1px #dddddd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.barChart-box {
|
|
flex: 1;
|
|
height: 300px;
|
|
box-shadow: 0 0 0 1px #dddddd;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.info-box {
|
|
flex: 1;
|
|
height: 300px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
|
|
.info-item {
|
|
box-shadow: 0 0 0 1px #dddddd;
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
flex: 1;
|
|
|
|
|
|
.item-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.item-context {
|
|
padding: 0 20px;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 8px;
|
|
|
|
.status-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.status {
|
|
padding: 2px 10px;
|
|
border-radius: 5px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.urgent {
|
|
background: #51dcbe;
|
|
}
|
|
|
|
.important {
|
|
background: #51dcb9;
|
|
}
|
|
|
|
.ordinary {
|
|
background: #4595dc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table_container {
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
</style> |