正式检测页面修改

frontend/src/api/check/interface/index.ts

@@ -1,3 +1,11 @@
+export interface DataCheck{
+    testScriptName: string,
+    errorSysName: string,
+    dataRule: string,
+    deviceName: string,
+    monitorIdx: string,
+}
+
 /**
  * 用于定义 查看（设备）通道检测结果 类型
  */
@@ -30,4 +38,4 @@ export interface RawDataItem {
 export interface RawData {
     chnNum: string,
     rawDataItems: RawDataItem[]
-}
+}

frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue

@@ -1,107 +1,112 @@
 <template>
-    <el-dialog  title="数据查询" :model-value='visible' @close="close" v-bind="dialogBig">
+  <el-dialog title="数据查询" :model-value='visible' @close="close" v-bind="dialogBig" draggable style="height: 100%;">
-        <div class="data-check-dialog">
+    <div class="data-check-dialog">
-            <div class="data-check-title">
+      <div class="data-check-head">
+        <el-form :model='formContent' label-width="auto" class="form-three ">
+          <el-form-item label="检测脚本">
+            <el-input v-model='formContent.testScriptName' :disabled="true"/>
+          </el-form-item>
+          <el-form-item label="误差体系">
+            <el-input v-model='formContent.errorSysName' :disabled="true"/>
+          </el-form-item>
+          <el-form-item label="数据原则">
+            <el-input v-model='formContent.dataRule' :disabled="true"/>
+          </el-form-item>
+          <el-form-item label="设备名称">
+            <el-input v-model='formContent.deviceName' :disabled="true"/>
+          </el-form-item>
+          <el-form-item label='通道号'>
+            <el-select v-model="formContent.monitorIdx">
+              <el-option v-for="item in monitorIdxList" :key="item.value" :label="item.value"
+                         :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
 
- 
+      <div class="data-check-body">
-                
+        <div class="content-left-tree">
-                
+          <div class="content-left-tree-switch">
-
+            <el-radio-group v-model="scriptSwitch">
-                <!-- <el-form-item label='通道号:'>
+              <el-radio-button label="不合格测试项" value="0"/>
-                <el-select v-model="monitorIdx">
+              <el-radio-button label="全部测试项" value="1"/>
-                    <el-option
+            </el-radio-group>
-                    v-for="item in monitorIdxList"
+          </div>
-                    :key="item.value"
+          <div class="content-tree">
-                    :label="item.value"
+            <el-tree :default-expanded-keys="['0', '0-1', '0-2', '0-3', '1']" node-key="id" :data="treeData"
-                    :value="item.value"
+                     :props="defaultProps" @node-click="handleNodeClick"/>
-                    />
+          </div>
-                </el-select>
-                </el-form-item> -->
-            </div>
-            <div class="data-check-content">
-                <div class="content-right">
-                    <div class="content-right-title">
-                        <el-divider >当前检测项目</el-divider>
-                        <span>{{currentScriptDsc}}</span>
-                    </div>
-                    <div class="content-right-Tabs">
-                        <el-tabs type="border-card" v-model="activeName">
-                            <el-tab-pane label="检测结果" name="resultTab">
-                                <DataCheckResultTable :tableData="checkResultTableData" ref="resultTableRef"/>
-                            </el-tab-pane>
-                            <el-tab-pane label="原始数据" name="rawDataTab">
-                                <DataCheckRawDataTable :tableData="rawTableData" ref="rawDataTableRef"/>
-                            </el-tab-pane>
-                        </el-tabs>
-                    </div>
-                </div>
-            </div>
         </div>
-    </el-dialog>
+
+        <div class="content-right">
+          <div class="content-right-title">
+            <el-divider>当前检测项目</el-divider>
+            <span>{{ currentScriptDsc }}</span>
+          </div>
+          <div class="content-right-Tabs">
+            <el-tabs type="border-card" v-model="activeName">
+              <el-tab-pane label="检测结果" name="resultTab">
+                <DataCheckResultTable :tableData="checkResultTableData" ref="resultTableRef"/>
+              </el-tab-pane>
+              <el-tab-pane label="原始数据" name="rawDataTab">
+                <DataCheckRawDataTable :tableData="rawTableData" ref="rawDataTableRef"/>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
 
 </template>
 <script setup lang='ts'>
-
+import {dialogBig} from '@/utils/elementBind'
-import IPAddress from '@/components/IpAddress/index.vue'
+import {reactive, ref} from 'vue'
-import {dialogBig, dialogMiddle} from '@/utils/elementBind'
-import { type Device } from '@/api/device/interface/device'
-import { ElMessage, type FormItemRule } from 'element-plus'
-import { addPqDev, updatePqDev } from '@/api/device/device'
-import { computed, reactive, type Ref, ref } from 'vue'
-import { useDictStore } from '@/stores/modules/dict'
-import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
-// 使用 dayjs 库格式化
-import dayjs from 'dayjs'
-import { getPqMonList } from '@/api/device/monitor'
-import { type ColumnProps } from '@/components/ProTable/interface'
-import { type Monitor } from '@/api/device/interface/monitor'
-import { data } from "@/api/plan/autoTest.json";
 import DataCheckResultTable from './dataCheckResultTable.vue'
 import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
-import type {CheckResult, RawData} from "@/api/check/interface";
+import type {CheckResult, DataCheck, RawData} from "@/api/check/interface";
-  
+import {data as treeData} from "@/api/plan/autoTest.json";
-const activeName = ref('rawDataTab')
 
-const deviceName = ref('被检设备1');
+const formContent = reactive<DataCheck>({
-  const monitorIdx = ref('1');
+  testScriptName: 'Q/GDW 10650.4-2021 模拟式',
-  const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
+  errorSysName: 'Q/GDW 10650.2-2021',
-  const errorSysName = ref('Q/GDW 10650.2-2021');
+  dataRule: '所有值',
-  const dataRule = ref('所有值');
+  deviceName: '被检设备1',
-  const scriptSwitch = ref(true);
+  monitorIdx: '1',
-  const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');
+})
-  const defaultProps = {
+
+const activeName = ref('resultTab')
+
+const scriptSwitch = ref('0');
+
+const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');
+
+const defaultProps = {
   children: "children",
   label: "name",
   pid: "pid",
 };
 
-// const monitorIdxList = [
+const monitorIdxList = [
-//   {
+  {
-//     value: '1',
+    value: '1',
-//   },
+  },
-//   {
+  {
-//     value: '2',
+    value: '2 （不合格）',
-//   },
+  },
-//   {
+  {
-//     value: '3',
+    value: '3',
-//   },
+  },
-//   {
+  {
-//     value: '4',
+    value: '4 （不合格）',
-//   },
+  },
-// ]
+]
 
-// const handleNodeClick = (data) => {
+
-//   console.log(data);
+// 点击左侧树节点触发事件
-// };
+const handleNodeClick = (data) => {
-// const MonIsShow = ref(false)
+  console.log(data);
-// const DevIsShow = ref(false)
+};
-// const IsPasswordShow = ref(false)
-// const dictStore = useDictStore()
-// 定义弹出组件元信息
-// const dialogFormRef = ref()
-// const disabledDate = (time: Date) => {
-//   return time.getTime() > Date.now()
-// }
 
 const checkResultTableData = reactive<CheckResult[]>([
   {
@@ -129,6 +134,7 @@ const checkResultTableData = reactive<CheckResult[]>([
     result: '合格',
   }
 ])
+
 const rawTableData = reactive<RawData[]>([
   {
     chnNum: '1',
@@ -507,7 +513,7 @@ const rawTableData = reactive<RawData[]>([
   }
 ])
 
-const resultTableRef=ref()
+const resultTableRef = ref()
 const rawDataTableRef = ref()
 
 const visible = ref(false)
@@ -521,13 +527,13 @@ const close = () => {
   visible.value = false;
 };
 
-const open = (deviceItem:any,chnNum:number) => {
+const open = (deviceItem: any, chnNum: number) => {
   // 发起后端请求，查询详细信息
   // const deviceItem = await getDetail(planId,checkItemId,deviceItem.id, chnNum)
 
   // 数据处理
   // checkResultTableData=[];
-
+  //formContent.value = ...
 
   visible.value = true;
 }
@@ -536,39 +542,57 @@ defineExpose({
   open
 })
 </script>
-<style scoped>
 
-.data-check-dialog{
+<style lang="scss" scoped>
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-}
 
-.data-check-title{
+.data-check-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .data-check-head {
     display: flex;
     flex-direction: row;
-    margin-top: 5px;
+    margin-top: 10px;
-    width: 100%;
+  }
-}
 
-.data-check-content{
+  .data-check-body {
     display: flex;
     flex-direction: row;
     width: 100%;
-}
 
-.content-right{
+    .content-left-tree {
-    width: 100%;
+      width: 240px;
-}
+      max-height: 445px;
+      padding: 10px 0;
+      border: 1px solid #ccc;
 
-.content-right-title{
+      .content-left-tree-switch {
-    margin-bottom: 10px;
+        text-align: right;
-}
+        margin-right: 10px;
+      }
+    }
 
-.content-right-Tabs{
+    .content-right {
-    box-sizing: border-box;
+      margin-left: 10px;
-    margin-top: 20px;
+      flex: 1;
-    margin-bottom: 10px;
+
-    max-height: 400px;
+      .content-right-title {
+        /*margin-bottom: 10px;*/
+        div {
+          font-size: 16px;
+          font-weight: 600;
+        }
+      }
+
+      .content-right-Tabs {
+        box-sizing: border-box;
+        margin-top: 20px;
+        margin-bottom: 10px;
+        max-height: 400px;
+      }
+
+    }
+  }
 }
 </style>