<template>
|
<div class="fa-card-a" style="max-height: calc(100vh - 130px);overflow-y: auto">
|
<el-form ref="form" :inline="true" :model="form" label-width="120px" class="confirmFormAuto">
|
<div class="DConfirmForm">
|
<el-form-item label-width="60px" label="编号:" style="width: 99%">
|
<span>{{ form.code }}</span>
|
</el-form-item>
|
</div>
|
<div class="confirmDAuto DConfirmForm">
|
<el-form-item label="专业实验室名称" style="width: 49%">
|
<el-input v-model="form.name" placeholder="请输入编号名称"></el-input>
|
</el-form-item>
|
<el-form-item label="测试地点" style="width: 49%">
|
<el-input v-model="form.place" placeholder="请输入编号名称"></el-input>
|
</el-form-item>
|
<el-form-item label="被测软件" style="width: 49%">
|
<el-input v-model="form.software" placeholder="请输入编号名称"></el-input>
|
</el-form-item>
|
<el-form-item label="版本" style="width: 49%">
|
<el-input v-model="form.versions" placeholder="请输入编号名称"></el-input>
|
</el-form-item>
|
<div class="el-flex el-form-border">
|
<div class="DFormWidth DAlign DHold">
|
硬软件资源
|
</div>
|
<div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
|
<div style="padding: 5px">软件资源：</div>
|
<div class="table-container">
|
<el-table style="position:relative;" class="el-software el-margin-top-bot" height="150" border
|
:data="form.softwareData"
|
stripe>
|
<el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
|
<el-table-column prop="name" min-width="300" label="软件项名称">
|
|
</el-table-column>
|
<el-table-column prop="versions" align="center" width="180" label="版本">
|
|
</el-table-column>
|
<el-table-column prop="use" align="center" width="180" label="用途">
|
|
</el-table-column>
|
<el-table-column prop="unit" label="提供单位" width="180" align="center">
|
|
</el-table-column>
|
</el-table>
|
<div class="icon-container" @click="addRow()">
|
<!-- 放置固定的图标 -->
|
<i class="el-icon-plus"></i>
|
</div>
|
</div>
|
<div style="padding: 5px">硬件资源：</div>
|
<el-table class="el-software el-margin-top-bot" height="150" border :data="form.hardwareData"
|
stripe>
|
<el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
|
<el-table-column prop="name" min-width="300" label="硬件和固件项目名称"></el-table-column>
|
<el-table-column prop="use" align="center" width="180" label="用途"></el-table-column>
|
<el-table-column prop="number" align="center" width="80" label="数量"></el-table-column>
|
<el-table-column prop="state" align="center" width="120" label="状态"></el-table-column>
|
<el-table-column prop="unit" align="center" width="180" label="提供单位"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="el-flex el-B-border">
|
<div class="DFormWidth DAlign DHold">
|
动态测试环境图
|
</div>
|
<div style="width: calc(100% - 120px);">
|
<div style="height:150px" class="el-wt-border-left">
|
</div>
|
</div>
|
</div>
|
<div class="el-flex el-B-border">
|
<div class="DFormWidth DAlign DHold">
|
环境差异性分析
|
</div>
|
<div class="el-wt-border-left" style="padding-left:5px;width: calc(100% - 130px)">
|
<el-table class="el-software el-margin-top-bot" height="150" border :data="form.analyzeData"
|
stripe>
|
<el-table-column prop="code" align="center" width="80" label="序号"></el-table-column>
|
<el-table-column prop="realEnvironment" min-width="300" label="真实环境"></el-table-column>
|
<el-table-column prop="testEnvironment" align="center" width="100" label="测试环境"></el-table-column>
|
<el-table-column prop="environmentalDifference" align="center" width="100"
|
label="环境差异"></el-table-column>
|
<el-table-column prop="influence" align="center" width="160" label="对测试结果影响"></el-table-column>
|
<el-table-column prop="measure" align="center" width="180" label="措施"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
<div class="el-flex el-B-border">
|
<div class="DFormWidth DAlign DHold">
|
环境建立
|
</div>
|
<div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
|
<el-form-item label="人员" style="width: 49%">
|
<el-input v-model="form.buildPersonnel" placeholder="请输入单位名称"></el-input>
|
</el-form-item>
|
<el-form-item label="日期" style="width: 48%">
|
<el-input v-model="form.buildDate" placeholder="请输入联系人"></el-input>
|
</el-form-item>
|
<el-form-item label-width="160px" class="isKill" label="是否进行环境病毒查杀" style="width: 49%">
|
<el-radio-group v-model="form.isKill">
|
<el-radio :label="0">是</el-radio>
|
<el-radio :label="1">否</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="病毒库版本" style="width: 48%">
|
<el-input v-model="form.VirusLibraryVersion" placeholder="请输入病毒库版本"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
<div class="el-flex">
|
<div class="DFormWidth DAlign DHold">
|
环境确认
|
</div>
|
<div style="width: calc(100% - 120px)" class="DConfirmForm el-wt-border-left">
|
<!-- 单位名称 -->
|
<el-form-item label="人员" style="width: 49%">
|
<el-input v-model="form.verifyPersonnel" placeholder="请输入单位名称"></el-input>
|
</el-form-item>
|
<!-- 联系人 -->
|
<el-form-item label="日期" style="width: 48%">
|
<el-input v-model="form.verifyDate" placeholder="请输入联系人"></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'confirmForm',
|
data() {
|
return {
|
form: {
|
code: '719G19804/P3A-09-20XX-00X',
|
name: '',
|
place: '',
|
software: '',
|
versions: '',
|
buildPersonnel: '',
|
buildDate: '',
|
isKill: 1,
|
VirusLibraryVersion: '',
|
verifyPersonnel: '',
|
verifyDate: '',
|
checkList: [1, 0],
|
softwareData: [
|
{code: '1', name: 'awdas', versions: '1.3.1', use: '奥迪', unit: '单位1'},
|
{code: '2', name: '阿尔法', versions: '1.3.1', use: '奥迪', unit: '单位2'},
|
{code: '3', name: 'awed', versions: '1.3.1', use: '奥迪', unit: '单位3'},
|
{code: '4', name: '国土部', versions: '1.3.1', use: '奥迪', unit: '单位4'},
|
],
|
hardwareData: [
|
{code: '1', name: 'awdas', use: '车上', number: '2', state: '21', unit: '单位1'},
|
{code: '2', name: 'qe', use: '515', number: '1', state: '21', unit: '单位2'},
|
{code: '3', name: '123', use: '1234', number: '42', state: '11', unit: '单位4'},
|
{code: '4', name: '1515', use: '123', number: '1', state: '21', unit: '单位51'},
|
],
|
analyzeData: [
|
{
|
code: '1',
|
realEnvironment: '真实环境1',
|
testEnvironment: '测试环境1',
|
environmentalDifference: '123',
|
influence: 'wu',
|
measure: '12'
|
},
|
{
|
code: '1',
|
realEnvironment: '真实环境1',
|
testEnvironment: '测试环境1',
|
environmentalDifference: '123',
|
influence: 'wu',
|
measure: '14'
|
},
|
{
|
code: '1',
|
realEnvironment: '真实环境1',
|
testEnvironment: '测试环境1',
|
environmentalDifference: '123',
|
influence: 'wu',
|
measure: '15'
|
},
|
{
|
code: '1',
|
realEnvironment: '真实环境1',
|
testEnvironment: '测试环境1',
|
environmentalDifference: '123',
|
influence: 'wu',
|
measure: '16'
|
},
|
],
|
},
|
}
|
},
|
methods:{
|
addRow(){
|
|
}
|
},
|
}
|
</script>
|
|
<style>
|
.confirmFormAuto {
|
width: 70%;
|
margin: 0 auto;
|
}
|
|
.confirmDAuto {
|
border: 1px solid;
|
}
|
|
.el-flex {
|
display: flex;
|
align-items: center;
|
}
|
|
.DFormWidth {
|
width: 120px;
|
}
|
|
.DAlign {
|
text-align: center;
|
}
|
|
.DConfirmForm {
|
/*border-left: 1px solid;*/
|
width: 100%;
|
}
|
|
.DConfirmForm > .el-form-item > .el-form-item__content {
|
width: calc(100% - 120px);
|
}
|
|
.DConfirmForm > .el-form-item.isKill > .el-form-item__content {
|
width: calc(100% - 160px);
|
}
|
|
.el-form-border {
|
border-top: 1px solid;
|
border-bottom: 1px solid;
|
}
|
|
.el-B-border {
|
border-bottom: 1px solid;
|
}
|
|
.el-margin-top-bot {
|
margin-top: 5px;
|
margin-bottom: 5px;
|
}
|
|
.el-wt-border-left {
|
border-left: 1px solid;
|
}
|
|
.zt .el-table.el-software th {
|
background: transparent;
|
}
|
|
.zt .el-table.el-software th > .cell {
|
font-weight: 500;
|
}
|
|
.DHold {
|
font-weight: 600;
|
}
|
|
.zt .el-table.el-software {
|
font-size: 14px;
|
}
|
|
.table-container {
|
position: relative;
|
}
|
|
.icon-container {
|
position: absolute;
|
bottom: -30px;
|
left: 50%;
|
width: 40px;
|
height: 30px;
|
text-align: center;
|
line-height: 30px;
|
transform: translateX(-50%);
|
border: 1px solid #EBEEF5;
|
background-color: #fafafa;
|
box-shadow: 0 3px 6px 0 rgba(72, 119, 232, 0.14);
|
border-radius: 2px;
|
}
|
</style>
|
