Commit bdd49ea6 authored by baiyanhao's avatar baiyanhao
parents 93e31b08 4f4f5973
......@@ -14,9 +14,9 @@
&-title {
color: #ffffff;
text-align: center;
font-size: 26px;
font-size: 32px;
font-family: Microsoft YaHei;
padding-top: 10px;
padding-top: 20px;
padding-right: 50px;
color: #ffffff;
font-weight: 700;
......@@ -41,16 +41,159 @@
height: 100%;
}
&-center {
margin-top: 10%;
width: 40%;
height: 100%;
background: url('../images/home/huxian.png') no-repeat;
background-size: 100% 100%;
background-size: 100% 75%;
position: relative;
.center-item-1 {
position: absolute;
left: 60px;
top: 20px;
.center-item-img {
width: 192px;
height: 192px;
}
.center-item-title {
position: absolute;
color: #3ff4ff;
font-size: 14px;
text-align: center;
top: 20px;
width: 100px;
left: 20px;
}
.center-item-number {
position: absolute;
color: #3ff4ff;
font-size: 16px;
font-weight: 700;
top: 50px;
text-align: center;
width: 100px;
left: 20px;
}
}
.center-item-2 {
position: absolute;
right: 190px;
top: -20px;
.center-item-img {
width: 192px;
height: 192px;
}
.center-item-title {
position: absolute;
color: #3ff4ff;
font-size: 14px;
text-align: center;
top: 20px;
width: 100px;
left: 70px;
}
.center-item-number {
position: absolute;
color: #3ff4ff;
font-size: 16px;
font-weight: 700;
top: 50px;
text-align: center;
width: 100px;
left: 70px;
}
}
.center-item-3 {
position: absolute;
right: 30px;
top: 220px;
.center-item-img {
width: 276px;
height: 219px;
}
.center-item-title {
position: absolute;
color: #3ff4ff;
font-size: 14px;
text-align: center;
top: 150px;
width: 100px;
left: 150px;
}
.center-item-number {
position: absolute;
color: #3ff4ff;
font-size: 16px;
font-weight: 700;
top: 170px;
text-align: center;
width: 100px;
left: 150px;
}
}
.center-item-4 {
position: absolute;
left: 280px;
top: 310px;
.center-item-img {
width: 202px;
height: 275px;
}
.center-item-title {
position: absolute;
color: #3ff4ff;
font-size: 14px;
text-align: center;
top: 210px;
width: 100px;
left: 80px;
}
.center-item-number {
position: absolute;
color: #3ff4ff;
font-size: 16px;
font-weight: 700;
top: 230px;
text-align: center;
width: 100px;
left: 80px;
}
}
.center-item-5 {
position: absolute;
left: 60px;
top: 260px;
.center-item-img {
width: 202px;
height: 275px;
}
.center-item-title {
position: absolute;
color: #3ff4ff;
font-size: 14px;
text-align: center;
top: 210px;
width: 100px;
left: 25px;
}
.center-item-number {
position: absolute;
color: #3ff4ff;
font-size: 16px;
font-weight: 700;
top: 230px;
text-align: center;
width: 100px;
left: 25px;
}
}
}
&-bottom {
position: absolute;
bottom: 0;
width: 100%;
height: 120px;
height: 180px;
background: url('../images/home/bottom.png') no-repeat;
background-size: 95% 100%;
display: flex;
......@@ -60,11 +203,12 @@
display: flex;
flex-wrap: wrap;
margin-right: 3%;
align-items: center;
}
}
}
.card-box {
height: 30%;
height: 34%;
&-header {
width: 100%;
height: 36px;
......@@ -109,10 +253,10 @@
display: flex;
align-items: center;
justify-content: flex-start;
height: 5rem;
height: 6rem;
&-img {
width: 80px;
height: 80px;
width: 100px;
height: 100px;
}
&-body {
margin-left: 10px;
......@@ -120,14 +264,14 @@
align-items: flex-start;
flex-flow: column;
&-title {
font-size: 14px;
font-size: 18px;
font-family: Microsoft YaHei, Microsoft YaHei-400;
font-weight: 400;
text-align: LEFT;
color: #b4dbfc;
}
&-number {
font-size: 28px;
margin-top: 5px;
font-size: 32px;
font-family: 'PMZDBTiTiMianFeiBan';
font-weight: 400;
text-align: LEFT;
......
<template>
<div
ref="chart"
style="width: 100%; height: 100%; display: flex; justify-content: center"
style="width: 100%; height: 10rem; display: flex; justify-content: center"
></div>
</template>
<script>
......@@ -33,9 +33,15 @@ export default {
series: [
{
type: 'liquidFill',
name: '添加',
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.6, 0.5, 0.4, 0.3],
radius: '80%',
data: [
{
name: '添加',
value: 1
}
],
radius: '65%',
// 水球颜色
color: ['#49d088', '#38b470', '#2aaf66'],
center: ['15%', '55%'],
......@@ -52,8 +58,11 @@ export default {
normal: {
// textStyle: {
color: '#49d088',
insideColor: 'yellow',
fontSize: 24
// insideColor: 'yellow',
formatter: e => {
return '添加\n\n'+ e.value.toFixed(2) * 100 + '%'
},
fontSize: 18
// }
}
},
......@@ -67,8 +76,14 @@ export default {
{
type: 'liquidFill',
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.3, 0.2, 0.1, 0.05],
radius: '80%',
data: [
{
name: '修改',
value: 0
}
],
name: '修改',
radius: '65%',
// 水球颜色
color: ['#FE5555', '#F07581', '#FB5E61'],
center: ['50%', '55%'],
......@@ -84,10 +99,13 @@ export default {
label: {
normal: {
textStyle: {
color: '#FE5555',
insideColor: 'yellow',
fontSize: 24
}
color: '#FE5555'
// insideColor: 'yellow',
},
formatter: e => {
return '修改\n\n'+ e.value.toFixed(2) * 100 + '%'
},
fontSize: 18
}
},
// 内图 背景色 边
......@@ -99,9 +117,16 @@ export default {
},
{
type: 'liquidFill',
name: '删除',
data: [
{
name: '删除',
value: 0
}
],
//data: [0.6, 0.5, 0.4, 0.3],
data: [0.1, 0.05, 0.25],
radius: '80%',
data: [0, 0, 0, 0],
radius: '65%',
// 水球颜色
color: ['#FFBF11', '#F4B30E', '#EACE36'],
center: ['85%', '55%'],
......@@ -117,10 +142,13 @@ export default {
label: {
normal: {
textStyle: {
color: '#FFBF11',
insideColor: 'yellow',
fontSize: 24
}
color: '#FFBF11'
// insideColor: 'yellow',
},
fontSize: 18,
formatter: e => {
return '删除\n\n'+ e.value.toFixed(2) * 100 + '%'
},
}
},
// 内图 背景色 边
......
<template>
<div
ref="chart"
style="width: 100%; height: 100%; display: flex; justify-content: center"
></div>
</template>
<script>
import { Left } from '@icon-park/vue'
export default {
name: 'AverageTest',
props: {
value: {
type: Number,
default: 20
}
},
data() {
return {
chart: null
}
},
mounted() {
this.init()
},
methods: {
init() {
// 2.初始化
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({}, true)
// 3.配置数据
const option = {
grid: {
top: '10%',
bottom: '20%', //也可设置left和right设置距离来控制图表的大小
left: '10%',
right: '10%'
},
xAxis: {
data: [
'信息收集',
'环境控制',
'初始访问',
'命令/脚本执行',
'持久化控制',
'权限提升',
'绕过',
'凭证获取',
'信息发现',
'横向移动'
],
axisLine: {
show: false, //隐藏X轴轴线
lineStyle: {
color: '#01FCE3'
}
},
axisTick: {
show: false //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: '#b4dbfc',
fontSize: 12 //X轴文字颜色,
}
}
},
yAxis: {
type: 'value',
nameTextStyle: {
color: '#b4dbfc'
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#FFFFFF',
fontSize: 12
}
},
axisLabel: {
show: true,
textStyle: {
color: '#b4dbfc'
}
}
},
series: [
{
name: '主营业务',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#00FFE3'
},
{
offset: 1,
color: '#4693EC'
}
])
}
},
data: [3, 6, 6, 2, 4, 5, 6, 6, 10, 5]
}
]
}
// 4.传入数据
this.chart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped></style>
......@@ -9,24 +9,24 @@
</tr>
<tr>
<td>1</td>
<td>1</td>
<td><el-tag type="warning" effect="plain">111</el-tag></td>
<td>1</td>
<td>01</td>
<td>2024.09.01</td>
<td><el-tag type="warning" effect="plain">体系审查</el-tag></td>
<td>发布第一版,V20240901</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td><el-tag type="warning" effect="plain">222</el-tag></td>
<td>2</td>
<td>02</td>
<td>2024.09.01</td>
<td><el-tag type="success" effect="plain">车型检验</el-tag></td>
<td>发布第一版,V20240901</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td><el-tag type="warning" effect="plain">111</el-tag></td>
<td>1</td>
<td>03</td>
<td>2024.09.01</td>
<td><el-tag type="warning" effect="plain">体系审查</el-tag></td>
<td>发布第一版,v20240901</td>
</tr>
</table>
<div class="desc">检验标准:汽车整车信息安全技术要求</div>
......@@ -59,7 +59,7 @@ td {
}
th,
td {
padding: 2px;
padding: 10px;
text-align: center;
border-top: rgba(255, 255, 255, 0.3);
border-bottom: rgba(255, 255, 255, 0.3);
......@@ -67,7 +67,10 @@ td {
::v-deep {
.el-tag--plain {
background: transparent;
width: 60px;
width: 100px;
height: 30px;
line-height: 30px;
font-size: 14px;
}
}
.desc {
......
......@@ -37,7 +37,21 @@
</div>
</card>
</div>
<div class="home-page-center"></div>
<div class="home-page-center">
<div
v-for="(item, key) in center"
:key="key"
:class="'center-item-' + (key + 1)"
>
<el-image :src="item.img" alt="" class="center-item-img"/>
<div class="center-item-title">
{{ item.title }}
</div>
<div class="center-item-number">
{{ item.number }}
</div>
</div>
</div>
<div class="home-page-other">
<cardRight title="变更检验内容-重点">
<table-chart></table-chart>
......@@ -47,14 +61,19 @@
</cardRight>
<cardRight title="知识库">
<div style="height: 24vh">
<planChart></planChart>
<planChart2></planChart2>
</div>
</cardRight>
</div>
</div>
<div class="home-page-bottom">
<div class="bottom-list">
<div v-for="(item, key) in bottom" :key="key" class="bottom-card" @click="$router.push(item.link)">
<div
v-for="(item, key) in bottom"
:key="key"
class="bottom-card"
@click="$router.push(item.link)"
>
<el-image :src="item.img" class="bottomd-card-img" />
<div class="bottom-card-title">
{{ item.title }}
......@@ -68,6 +87,7 @@
import card from '../components/homeComponents/card.vue'
import cardRight from '../components/homeComponents/cardRight.vue'
import planChart from '../components/homeComponents/planChart.vue'
import planChart2 from '../components/homeComponents/planChart2.vue'
import pieChart from '../components/homeComponents/pieChart.vue'
import table from '../components/homeComponents/table.vue'
export default {
......@@ -77,58 +97,59 @@ export default {
planChart,
cardRight,
pieChart,
'table-chart':table
planChart2,
'table-chart': table
},
data() {
return {
info: [
{
title: '审查要点(条)',
number: '22',
number: '47',
img: require('@/assets/images/home/card1.png')
},
{
title: '审查细则(条)',
number: '73',
number: '161',
img: require('@/assets/images/home/card2.png')
},
{
title: '审查场景(条)',
number: '22',
number: '121',
img: require('@/assets/images/home/card3.png')
},
{
title: '测试用例(条)',
number: '73',
number: '122',
img: require('@/assets/images/home/card4.png')
}
],
soft: [
{
title: '审查要点(条)',
number: '142',
number: '156',
img: require('@/assets/images/home/card5.png')
},
{
title: '审查细则(条)',
number: '345',
number: '189',
img: require('@/assets/images/home/card6.png')
},
{
title: '审查场景(条)',
number: '545',
number: '266',
img: require('@/assets/images/home/card7.png')
},
{
title: '测试用例(条)',
number: '556',
number: '39',
img: require('@/assets/images/home/card8.png')
}
],
bottom: [
{
title: '标准文本',
link:'/setting/standard',
link: '/setting/standard',
img: require('@/assets/images/home/bottom1.png')
},
{
......@@ -156,6 +177,33 @@ export default {
link: '/review/review/createReview',
img: require('@/assets/images/home/bottom6.png')
}
],
center: [
{
title: '数据抓包',
number:13,
img: require('@/assets/images/home/box1.png')
},
{
title: '访问控制',
number:9,
img: require('@/assets/images/home/box2.png')
},
{
title: '扫描漏洞',
number:9,
img: require('@/assets/images/home/box5.png')
},
{
title: '拒绝服务',
number:9,
img: require('@/assets/images/home/box4.png')
},
{
title: '非授权访问写入',
number:13,
img: require('@/assets/images/home/box3.png')
}
]
}
},
......
......@@ -248,14 +248,14 @@ export default {
let queryParams = {
inspectionTtem:this.inspectionItem,
inspectionStandardId: this.task.inspectionStandardId,
inspectionstandardName: this.task.inspectionstandardName,
inspectionstandardName: this.task.inspectionStandardName,
inspectCarCompanyName: this.task.inspectCarCompanyName,
carModel: this.task.carModel,
testorganizationName: this.task.testorganizationName,
testorganizationName: this.task.testOrganizationName,
createTime: this.task.createTime,
carExperimentRequest: {
regulationName: this.task.inspectionStandardName,
matchUseCases: this.task.useCaseNo.split(',')
matchUseCases: this.task.useCaseNo?this.task.useCaseNo.split(','):[]
}
}
console.log(queryParams)
......
......@@ -185,12 +185,17 @@ export default {
})
},
async handleConfirm() {
const res = await this.$refs.check.getValidateVaule()
this.$refs.form.validate(valid => {
this.$refs.form.validate(async valid => {
if (valid) {
let form = JSON.parse(JSON.stringify(this.form))
if(form.inspectionItem.indexOf('trfis') !== -1){
const res = await this.$refs.check.getValidateVaule()
form.specifyPlan = JSON.stringify(res.record)
form.useCaseNo = res.codes
}
form.inspectionItem = form.inspectionItem.join(',')
add(form).then(res => {
if (res.code == 200) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment