|
|
@@ -1,9 +1,30 @@
|
|
|
-<script setup lang="ts"></script>
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from "vue";
|
|
|
+import titHeader from "./components/tit-header.vue";
|
|
|
+
|
|
|
+interface VersionItem {
|
|
|
+ instrumentType: string;
|
|
|
+ configName: string;
|
|
|
+ configIp: string;
|
|
|
+}
|
|
|
+
|
|
|
+const formLabelAlign = ref<VersionItem>({
|
|
|
+ instrumentType: "",
|
|
|
+ configName: "",
|
|
|
+ configIp: "",
|
|
|
+});
|
|
|
+
|
|
|
+const drawer = ref(false);
|
|
|
+const checkList = ref(["Value selected and disabled", "Value A"]);
|
|
|
+</script>
|
|
|
|
|
|
<template>
|
|
|
<div class="runtest">
|
|
|
<el-scrollbar>
|
|
|
<div class="content-A">
|
|
|
+ <div class="drawerbtn" @click="drawer = true">
|
|
|
+ <svg-icon icon-class="project-config" />
|
|
|
+ </div>
|
|
|
<el-scrollbar height="100%">
|
|
|
<div class="test-list">
|
|
|
<div
|
|
|
@@ -12,13 +33,20 @@
|
|
|
class="test-list-item"
|
|
|
:class="item === 2 ? 'active' : ''"
|
|
|
>
|
|
|
- <div
|
|
|
- class="body"
|
|
|
- :class="['success', 'error', 'progress', 'wait']"
|
|
|
- >
|
|
|
+ <!-- //后面根据状态动态修改class -->
|
|
|
+ <!-- //'success',合格
|
|
|
+ 'error', 失败
|
|
|
+ 'progress',测试中
|
|
|
+ 'wait' 未开始-->
|
|
|
+ <!-- :class="['success', 'error', 'progress', 'wait']"-->
|
|
|
+ <div class="body" :class="['success']">
|
|
|
<div class="line"></div>
|
|
|
<div class="head">合格</div>
|
|
|
- <div class="icon">图标</div>
|
|
|
+ <div class="icon">
|
|
|
+ <svg-icon icon-class="gougou" class="svg svg-success" />
|
|
|
+ <svg-icon icon-class="chacha" class="svg svg-error" />
|
|
|
+ <svg-icon icon-class="Frame" class="svg svg-progress" />
|
|
|
+ </div>
|
|
|
<div class="name">增益测试</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -26,17 +54,218 @@
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
<div class="content-B">
|
|
|
- <div class="content-B-1"></div>
|
|
|
- <div class="content-B-2"></div>
|
|
|
- <div class="content-B-3"></div>
|
|
|
- <div class="content-B-4"></div>
|
|
|
+ <div class="content-B-1">
|
|
|
+ <titHeader icon-class="csgcxx" tit="测试工程信息" />
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="auto"
|
|
|
+ :model="formLabelAlign"
|
|
|
+ ref="ruleFormRef"
|
|
|
+ >
|
|
|
+ <el-form-item label="产品编号" prop="instrumentType">
|
|
|
+ <el-input v-model="formLabelAlign.instrumentType" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="测试类型" prop="configName">
|
|
|
+ <el-select
|
|
|
+ v-model="formLabelAlign.configName"
|
|
|
+ placeholder="选择测试类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in 3"
|
|
|
+ key="item.value"
|
|
|
+ label="item.label"
|
|
|
+ value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="测试地点" prop="configIp">
|
|
|
+ <el-input v-model="formLabelAlign.configIp" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="content-B-2">
|
|
|
+ <titHeader icon-class="zxzd-yq" tit="执行终端/仪器" />
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="auto"
|
|
|
+ :model="formLabelAlign"
|
|
|
+ style="max-width: 600px"
|
|
|
+ ref="ruleFormRef"
|
|
|
+ >
|
|
|
+ <el-form-item label="执行终端" prop="configName">
|
|
|
+ <div class="select-div">
|
|
|
+ <el-select
|
|
|
+ class="select-item"
|
|
|
+ v-model="formLabelAlign.configName"
|
|
|
+ placeholder="选择执行终端"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in 3"
|
|
|
+ key="item.value"
|
|
|
+ label="item.label"
|
|
|
+ value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-button class="test-min-btn" type="primary">
|
|
|
+ <svg-icon icon-class="refresh1" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div>
|
|
|
+ <svg-icon icon-class="gougou" class="svg-success" />
|
|
|
+ <span>192.168.0.109</span>
|
|
|
+ </div>
|
|
|
+ <div class="csyq-tit">
|
|
|
+ <span>测试仪器</span>
|
|
|
+ <el-button class="test-min-btn" type="primary">
|
|
|
+ <svg-icon icon-class="project-config" />
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="csyq-list">
|
|
|
+ <div v-for="(item, index) in 15" :key="index" class="csyq-item">
|
|
|
+ <div>
|
|
|
+ <span class="item-icon">
|
|
|
+ <svg-icon icon-class="gougou" class="svg-success" />
|
|
|
+ </span>
|
|
|
+ <span>信号源1</span>
|
|
|
+ </div>
|
|
|
+ <div>192.168.0.109</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-B-3">
|
|
|
+ <titHeader icon-class="zxgcrz" tit="执行过程日志" />
|
|
|
+ <div class="content-log">
|
|
|
+ 开始执行，时间14：28：32 打开电源 打开射频开关
|
|
|
+ 执行增益测试，结果合格 执行杂波测试，结果合格 测试完成 电源关闭
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-B-4">
|
|
|
+ <el-button class="test-min-btn" type="primary">
|
|
|
+ <svg-icon icon-class="refresh1" />
|
|
|
+ </el-button>
|
|
|
+ <titHeader icon-class="cssj" tit="测试数据" />
|
|
|
+ <div class="cssj-row-flex">
|
|
|
+ <span>序号</span>
|
|
|
+ <span>数据项</span>
|
|
|
+ <span>数据内容</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="cssj-tit">测试项目：1dB压缩点</div>
|
|
|
+ <div v-for="(item, index) in 5" :key="index" class="cssj-row-flex">
|
|
|
+ <span>{{ index }}</span>
|
|
|
+ <span>数据项</span>
|
|
|
+ <span>数据内容</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="content-C">
|
|
|
+ <div class="left">
|
|
|
+ <div class="test-btn progress">
|
|
|
+ <svg-icon icon-class="project-config" />
|
|
|
+ 全局配置
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <p><span>产品：</span><span>变频模块</span></p>
|
|
|
+ <p><span>工程类型：</span><span>变频模块</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="center">
|
|
|
+ <div class="center-item">
|
|
|
+ <div class="center-num">10</div>
|
|
|
+ <div class="center-tit">今日检测产品数量</div>
|
|
|
+ </div>
|
|
|
+ <div class="center-item">
|
|
|
+ <div class="center-num">10</div>
|
|
|
+ <div class="center-tit">历史检测产品数量</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div>已用时：300s</div>
|
|
|
+ <div class="test-btn progress">
|
|
|
+ <svg-icon icon-class="project-config" />
|
|
|
+ 开始测试
|
|
|
+ </div>
|
|
|
+ <div class="test-btn error">
|
|
|
+ <svg-icon icon-class="project-config" />
|
|
|
+ 停止测试
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="content-C"></div>
|
|
|
</el-scrollbar>
|
|
|
+
|
|
|
+ <el-drawer v-model="drawer" direction="rtl" class="test-drawer">
|
|
|
+ <template #header>
|
|
|
+ <div class="test-drawer-header">选择测试项</div>
|
|
|
+ </template>
|
|
|
+ <template #default>
|
|
|
+ <el-scrollbar>
|
|
|
+ <el-checkbox-group v-model="checkList" class="drawer-list">
|
|
|
+ <div v-for="item in 20" :key="item" class="drawer-list-item">
|
|
|
+ <el-checkbox label="" value="Value A" />
|
|
|
+ <span>增益测试</span>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-scrollbar>
|
|
|
+ </template>
|
|
|
+ <template #footer>
|
|
|
+ <div style="flex: auto">
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ <el-button type="primary">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+$color-success: #8fe200;
|
|
|
+$color-error: #f83c64;
|
|
|
+$color-progress: #3cbaff;
|
|
|
+
|
|
|
+.test-btn {
|
|
|
+ width: 130px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.progress {
|
|
|
+ background: var(--hj-bg1);
|
|
|
+}
|
|
|
+.error {
|
|
|
+ background: var(--hj-bg2);
|
|
|
+}
|
|
|
+.test-min-btn {
|
|
|
+ margin-left: 4px;
|
|
|
+ flex: 0 0 36px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36px;
|
|
|
+ background: #e6f1fc;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #a3d0fd;
|
|
|
+ font-size: var(--hj-fs-22);
|
|
|
+ color: var(--fc-color-7);
|
|
|
+}
|
|
|
+.svg-success {
|
|
|
+ color: $color-success;
|
|
|
+}
|
|
|
+.svg-error {
|
|
|
+ color: $color-error;
|
|
|
+}
|
|
|
+.svg-progress {
|
|
|
+ color: $color-progress;
|
|
|
+}
|
|
|
+
|
|
|
.runtest {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
@@ -46,9 +275,9 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
- // border: 1px solid red;
|
|
|
-
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
.content-A {
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
height: 300px;
|
|
|
background: linear-gradient(180deg, #404040 0%, #505050 100%);
|
|
|
@@ -56,6 +285,17 @@
|
|
|
::v-deep .el-scrollbar__view {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+ .drawerbtn {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ right: 10px;
|
|
|
+ top: 10px;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ font-size: var(--hj-fs-22);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
.test-list {
|
|
|
display: flex;
|
|
|
height: 100%;
|
|
|
@@ -103,6 +343,10 @@
|
|
|
height: 36px;
|
|
|
margin-top: 50px;
|
|
|
margin-bottom: 50px;
|
|
|
+ font-size: var(--hj-fs-32);
|
|
|
+ .svg {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
.name {
|
|
|
font-weight: bold;
|
|
|
@@ -113,16 +357,25 @@
|
|
|
.line {
|
|
|
background-color: #8fe200;
|
|
|
}
|
|
|
+ .svg-success {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
.body.error {
|
|
|
.line {
|
|
|
background-color: #f83c64;
|
|
|
}
|
|
|
+ .svg-error {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
.body.progress {
|
|
|
.line {
|
|
|
background-color: #3cbaff;
|
|
|
}
|
|
|
+ .svg-progress {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
}
|
|
|
.body.wait {
|
|
|
.line {
|
|
|
@@ -133,24 +386,102 @@
|
|
|
}
|
|
|
.content-B {
|
|
|
width: 100%;
|
|
|
- height: 370px;
|
|
|
+ min-height: 300px;
|
|
|
background-color: var(--hj-bg);
|
|
|
- margin-bottom: 64px;
|
|
|
+ margin-bottom: 70px;
|
|
|
display: flex;
|
|
|
- > div {
|
|
|
- border: 1px solid red;
|
|
|
+ .content-B {
|
|
|
+ &-1,
|
|
|
+ &-2,
|
|
|
+ &-3,
|
|
|
+ &-4 {
|
|
|
+ margin-top: 30px;
|
|
|
+ padding: 0 18px;
|
|
|
+ border-left: 1px solid #afb9d0;
|
|
|
+ }
|
|
|
+ &-1 {
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.content-B-1 {
|
|
|
flex: 0 0 19%;
|
|
|
}
|
|
|
- .content-B-1 {
|
|
|
+ .content-B-2 {
|
|
|
flex: 0 0 22%;
|
|
|
+ .select-div {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ .select-item {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .csyq-tit {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: var(--hj-fs-14);
|
|
|
+ font-weight: bold;
|
|
|
+ color: var(--fc-color-5);
|
|
|
+ }
|
|
|
+ .csyq-list {
|
|
|
+ .csyq-item {
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ border-bottom: 1px solid var(--fc-color-5);
|
|
|
+ .item-icon {
|
|
|
+ font-size: var(--hj-fs-22);
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .content-B-1 {
|
|
|
+ .content-B-3 {
|
|
|
flex: 0 0 19%;
|
|
|
+ .content-log {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ color: var(--fc-color-5);
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
- .content-B-1 {
|
|
|
+ .content-B-4 {
|
|
|
flex: 0 0 40%;
|
|
|
+ position: relative;
|
|
|
+ .test-min-btn {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ }
|
|
|
+ .cssj-tit {
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ color: var(--fc-color-5);
|
|
|
+ }
|
|
|
+ .cssj-row-flex {
|
|
|
+ display: flex;
|
|
|
+ height: 31px;
|
|
|
+ line-height: 31px;
|
|
|
+ border-bottom: 1px solid var(--fc-color-5);
|
|
|
+ font-size: var(--hj-fs-14);
|
|
|
+ > span:nth-of-type(1) {
|
|
|
+ flex: 0 0 13%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > span:nth-of-type(2) {
|
|
|
+ flex: 0 0 45%;
|
|
|
+ }
|
|
|
+ > span:nth-of-type(3) {
|
|
|
+ flex: 0 0 42%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.content-C {
|
|
|
@@ -159,8 +490,88 @@
|
|
|
left: 0;
|
|
|
width: 100%;
|
|
|
height: 64px;
|
|
|
- background-color: yellow;
|
|
|
+ background: linear-gradient(180deg, #434343 0%, #4f4f4f 100%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ padding: 0 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ p {
|
|
|
+ display: block;
|
|
|
+ line-height: 10px;
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ margin-left: 15px;
|
|
|
+ span {
|
|
|
+ font-size: var(--hj-fs-14);
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .center {
|
|
|
+ display: flex;
|
|
|
+ text-align: right;
|
|
|
+ align-items: center;
|
|
|
+ .center-item {
|
|
|
+ min-width: 140px;
|
|
|
+ .center-tit {
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-num {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: var(--hj-fs-18);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ line-height: 21px;
|
|
|
+ border-bottom: 1px solid var(--hj-white-1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ align-self: center;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ > div {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .test-drawer {
|
|
|
+ background: linear-gradient(180deg, #434343 0%, #4f4f4f 100%);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .test-drawer-header {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: var(--hj-fs-14);
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ line-height: 19px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ }
|
|
|
+ .drawer-list {
|
|
|
+ font-size: var(--hj-fs-12);
|
|
|
+ .drawer-list-item {
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ padding: 0 12px;
|
|
|
+ background: linear-gradient(180deg, #656565 0%, #555555 100%);
|
|
|
+ box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ color: var(--hj-white-1);
|
|
|
+ }
|
|
|
}
|
|
|
- // background-color: #fff;
|
|
|
}
|
|
|
</style>
|
wangwenhua
