Pārlūkot izejas kodu

执行页面修改。

jiaxiaoqiang 3 mēneši atpakaļ
vecāks
revīzija
9bf4bd9de7
1 mainītis faili ar 157 papildinājumiem un 138 dzēšanām
  1. 157 138
      src/views/modules/runTest/run-test.vue

+ 157 - 138
src/views/modules/runTest/run-test.vue

@@ -99,108 +99,109 @@ const getExcutingGlobalMachines = async () => {
 
 <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
-              v-for="item in topOnShowProList"
-              :key="item.id"
-              class="test-list-item"
-              :class="item === 2 ? 'active' : ''"
-            >
-              <!-- //后面根据状态动态修改class -->
-              <!-- //'success',合格
+    <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
+            v-for="item in topOnShowProList"
+            :key="item.id"
+            class="test-list-item"
+            :class="item === 2 ? 'active' : ''"
+          >
+            <!-- //后面根据状态动态修改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">
-                  <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">{{ item.projectName }}</div>
+            <!--  :class="['success', 'error', 'progress', 'wait']"-->
+            <div class="body" :class="['success']">
+              <div class="line"></div>
+              <div class="head">合格</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">{{ item.projectName }}</div>
             </div>
           </div>
-        </el-scrollbar>
+        </div>
+      </el-scrollbar>
+    </div>
+    <div class="content-B">
+      <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 allTestTypes"
+                :key="item.dictValue"
+                :label="item.dictLabel"
+                :value="item.dictValue"
+              />
+            </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">
-        <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">
+
+      <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
-                v-model="formLabelAlign.configName"
-                placeholder="选择测试类型"
+                class="select-item"
+                v-model="formLabelAlign.zhongduan"
+                placeholder="选择执行终端"
               >
                 <el-option
-                  v-for="item in allTestTypes"
-                  :key="item.dictValue"
-                  :label="item.dictLabel"
-                  :value="item.dictValue"
+                  v-for="item in excutingMachinesList"
+                  :key="item.id"
+                  :label="item.configName"
+                  :value="item.id"
                 />
               </el-select>
-            </el-form-item>
-            <el-form-item label="测试地点" prop="configIp">
-              <el-input v-model="formLabelAlign.configIp" />
-            </el-form-item>
-          </el-form>
+              <el-button class="test-min-btn" type="primary">
+                <svg-icon icon-class="refresh1" size="18" />
+              </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="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.zhongduan"
-                  placeholder="选择执行终端"
-                >
-                  <el-option
-                    v-for="item in excutingMachinesList"
-                    :key="item.id"
-                    :label="item.configName"
-                    :value="item.id"
-                  />
-                </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-tit">
+          <span>测试仪器</span>
+          <el-button class="test-min-btn" type="primary">
+            <svg-icon icon-class="project-config" size="18" />
+          </el-button>
+        </div>
+        <el-scrollbar class="content-B-height-2">
           <div class="csyq-list">
             <div v-for="(item, index) in 15" :key="index" class="csyq-item">
               <div>
@@ -212,24 +213,29 @@ const getExcutingGlobalMachines = async () => {
               <div>192.168.0.109</div>
             </div>
           </div>
-        </div>
-        <div class="content-B-3">
-          <titHeader icon-class="zxgcrz" tit="执行过程日志" />
+        </el-scrollbar>
+      </div>
+
+      <div class="content-B-3">
+        <titHeader icon-class="zxgcrz" tit="执行过程日志" />
+        <el-scrollbar class="content-B-height-3">
           <div class="content-log">
             开始执行,时间14:28:32 打开电源 打开射频开关
             执行增益测试,结果合格 执行杂波测试,结果合格 测试完成 电源关闭
           </div>
+        </el-scrollbar>
+      </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 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>
+        <el-scrollbar class="content-B-height-4">
           <div>
             <div class="cssj-tit">测试项目:1dB压缩点</div>
             <div v-for="(item, index) in 5" :key="index" class="cssj-row-flex">
@@ -238,43 +244,43 @@ const getExcutingGlobalMachines = async () => {
               <span>数据内容</span>
             </div>
           </div>
-        </div>
+        </el-scrollbar>
       </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 class="content-C">
+      <div class="left">
+        <div class="test-btn progress">
+          <svg-icon icon-class="project-config" />
+          全局配置
         </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>
+          <p><span>产品:</span><span>变频模块</span></p>
+          <p><span>工程类型:</span><span>变频模块</span></p>
         </div>
-        <div class="right">
-          <div>已用时:300s</div>
-          <div class="test-btn progress">
-            <svg-icon icon-class="start-test" />
-            开始测试
-          </div>
-          <div class="test-btn error">
-            <svg-icon icon-class="stop-test" />
-            停止测试
-          </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>
-    </el-scrollbar>
+      <div class="right">
+        <div>已用时:300s</div>
+        <div class="test-btn progress">
+          <svg-icon icon-class="start-test" />
+          开始测试
+        </div>
+        <div class="test-btn error">
+          <svg-icon icon-class="stop-test" />
+          停止测试
+        </div>
+      </div>
+    </div>
 
     <el-drawer v-model="drawer" direction="rtl" class="test-drawer">
       <template #header>
@@ -340,8 +346,8 @@ $color-progress: #3cbaff;
 .test-min-btn {
   margin-left: 4px;
   flex: 0 0 36px;
-  width: 36px;
-  height: 36px;
+  width: 25px;
+  height: 30px;
   text-align: center;
   line-height: 36px;
   background: #e6f1fc;
@@ -481,9 +487,10 @@ $color-progress: #3cbaff;
   }
   .content-B {
     width: 100%;
-    min-height: 300px;
-    background-color: var(--hj-bg);
-    margin-bottom: 70px;
+    //min-height: 300px;
+    height: calc(100vh - $main-header-height - 300px - 64px);
+    background-color: $hj-white-1;
+    //margin-bottom: 70px;
     display: flex;
     .content-B {
       &-1,
@@ -669,4 +676,16 @@ $color-progress: #3cbaff;
     }
   }
 }
+
+.content-B-height-2 {
+  height: calc(100vh - $main-header-height - 300px - 64px - 228px);
+}
+
+.content-B-height-3 {
+  height: calc(100vh - $main-header-height - 300px - 64px - 90px);
+}
+
+.content-B-height-4 {
+  height: calc(100vh - $main-header-height - 300px - 64px - 120px);
+}
 </style>