联调 正式检测结果页面

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

@@ -1,248 +1,311 @@
 <template>
-  <el-dialog :append-to-body="appendToBody" class="dialog" title="数据查询" :model-value='visible' @close="close"
-             v-bind="dialogBig" :draggable="false" width="1400px">
-    <div class="data-check-dialog">
-      <div >
-        <el-form :model='formContent' label-width="auto" class="form-three ">
-          <el-form-item label="误差体系">
-            <el-select :disabled="checkStore.showDetailType===2 || checkStore.showDetailType===0" v-model="formContent.errorSysId" placeholder="请选择误差体系" autocomplete="off"
-                       @change="handleErrorSysChange">
-              <el-option
-                  v-for="(option) in pqErrorList"
-                  :key="option.id"
-                  :label="option.name"
-                  :value="option.id"/>
-            </el-select>
-          </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.chnNum">
-              <el-option v-for="item in chnList" :key="item.value" :label="item.label" :value="item.value"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item v-if="checkStore.showDetailType===1">
-            <el-button type="primary" :icon="Postcard" >报告生成</el-button>
-          </el-form-item>
-          <el-form-item v-if="checkStore.showDetailType===0">
-            <el-button type="primary" :icon="Histogram" >重新计算</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <div class="data-check-body">
-        <div class="content-right">
-          <div class="content-right-title">
-            <div style="width: 840px;">
-              <span class="content-right-title-text">当前检测项目：</span>
-              <span style="color: var(--el-color-primary);">频率</span>
+    <el-dialog
+        :append-to-body="appendToBody"
+        class="dialog"
+        title="数据查询"
+        :model-value="visible"
+        @close="close"
+        v-bind="dialogBig"
+        :draggable="false"
+        width="1400px"
+    >
+        <div class="data-check-dialog">
+            <div>
+                <el-form :model="formContent" label-width="auto" class="form-three">
+                    <el-form-item label="误差体系">
+                        <el-select
+                            :disabled="checkStore.showDetailType === 2 || checkStore.showDetailType === 0"
+                            v-model="formContent.errorSysId"
+                            placeholder="请选择误差体系"
+                            autocomplete="off"
+                        >
+                            <el-option
+                                v-for="option in pqErrorList"
+                                :key="option.id"
+                                :label="option.name"
+                                :value="option.id"
+                            />
+                        </el-select>
+                    </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.chnNum">
+                            <el-option v-for="item in chnList" :key="item" :label="item" :value="item" />
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item v-if="checkStore.showDetailType === 1">
+                        <el-button type="primary" :icon="Postcard">报告生成</el-button>
+                    </el-form-item>
+                    <el-form-item v-if="checkStore.showDetailType === 0">
+                        <el-button type="primary" :icon="Histogram">重新计算</el-button>
+                    </el-form-item>
+                </el-form>
             </div>
-            <el-form-item style="margin-left: 280px;margin-bottom:0px !important;width: 280px;"  label='测试项'>
-              <el-cascader v-model="currentCheckItem" :options="options" clearable />
-            </el-form-item>
-          </div>
+            <div class="data-check-body">
+                <div class="content-right">
+                    <div class="content-right-title">
+                        <div style="width: 840px">
+                            <span class="content-right-title-text">当前检测项目：</span>
+                            <span style="color: var(--el-color-primary)">{{ rowList.scriptName }}</span>
+                        </div>
+                        <el-form-item
+                            style="margin-left: 280px; margin-bottom: 0px !important; width: 280px"
+                            label="测试项"
+                        >
+                            <el-select v-model="currentCheckItem">
+                                <el-option
+                                    v-for="item in tesList"
+                                    :key="item"
+                                    :label="item.replace(/\.0$/, '')"
+                                    :value="item"
+                                />
+                            </el-select>
+                        </el-form-item>
+                    </div>
 
-          <div class="content-right-Tabs">
-            <el-tabs type="border-card" v-model="activeTab">
-              <el-tab-pane label="检测结果" name="resultTab">
-                <CompareDataCheckResultTable :tableData="checkResultData" :currentScriptTypeName="currentScriptTypeName"/>
-              </el-tab-pane>
-              <el-tab-pane label="原始数据" name="rawDataTab">
-                <CompareDataCheckRawDataTable :tableData="rawTableData" :currentScriptTypeName="currentScriptTypeName" @exportRawDataHandler="exportRawDataHandler"/>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
+                    <div class="content-right-Tabs">
+                        <el-tabs type="border-card" v-model="activeTab">
+                            <el-tab-pane label="检测结果" name="resultTab">
+                                <CompareDataCheckResultTable
+                                    :tableData="currentCheckResultData"
+                                    :currentScriptTypeName="currentScriptTypeName"
+                                />
+                            </el-tab-pane>
+                            <el-tab-pane label="原始数据" name="rawDataTab">
+                                <CompareDataCheckRawDataTable
+                                    :tableData="rawTableData[currentCheckItem]"
+                                    :currentScriptTypeName="currentScriptTypeName"
+                                    @exportRawDataHandler="exportRawDataHandler"
+                                />
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </el-dialog>
-
+    </el-dialog>
 </template>
-<script setup lang='ts'>
-import {dialogBig} from '@/utils/elementBind'
-import {reactive, ref, watch} from 'vue'
+<script setup lang="ts">
+import { dialogBig } from '@/utils/elementBind'
+import { reactive, ref, watch, computed } from 'vue'
 import CompareDataCheckResultTable from './compareDataCheckResultTable.vue'
 import CompareDataCheckRawDataTable from './compareDataCheckRawDataTable.vue'
-import {CheckData} from "@/api/check/interface";
-import {useCheckStore} from "@/stores/modules/check";
-import {Histogram, Postcard} from "@element-plus/icons-vue";
-import {getPqErrSysList} from '@/api/plan/plan'
-import { getFormData} from "@/api/check/test";
-
-const {appendToBody} = withDefaults(defineProps<{
-  appendToBody: boolean
-}>(), {appendToBody: true})
+import { CheckData } from '@/api/check/interface'
+import { useCheckStore } from '@/stores/modules/check'
+import { Histogram, Postcard } from '@element-plus/icons-vue'
+import { getPqErrSysList } from '@/api/plan/plan'
+import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
+import { useDictStore } from '@/stores/modules/dict'
+import { getContrastFormContent, getContrastResult, getBigTestItem } from '@/api/check/test'
 
+const { appendToBody } = withDefaults(
+    defineProps<{
+        appendToBody: boolean
+    }>(),
+    { appendToBody: true }
+)
 
 const checkStore = useCheckStore()
-
+const modeStore = useModeStore()
+const dictStore = useDictStore()
 const visible = ref(false)
 const treeRef = ref()
 const searchValue = ref<string>('')
-const pqErrorList = reactive<{ id: string; name: string; }[]>([])
+const pqErrorList = reactive<{ id: string; name: string }[]>([])
 const activeTab = ref('resultTab')
 const currentCheckItem = ref<any>()
-let deviceId: string = ''
+const rowList: any = ref([])
 let scriptType: string | null = null
 
-watch(searchValue, (val) => {
-  treeRef.value!.filter(val)
+watch(searchValue, val => {
+    treeRef.value!.filter(val)
 })
 
 // 表单数据
 const formContent = reactive<CheckData.DataCheck>({
-  scriptName: '',
-  errorSysId: '',
-  dataRule: '',
-  deviceName: '',
-  chnNum: '',
+    scriptName: '',
+    errorSysId: '',
+    dataRule: '',
+    deviceName: '',
+    chnNum: '',
+    deviceId: '',
+    num: null
 })
 
 // 通道下拉列表
-let chnList: any[] = []
-
+const chnList: any = ref([])
 
 // 当前检测项目名称
 const currentScriptTypeName = ref('')
 // 检测结果表格数据
-const checkResultData = reactive<CheckData.CheckResult[]>([])
+const checkResultData = ref<CheckData.CheckResult[]>([])
 
 // 原始数据表格数据
-const rawTableData = reactive<CheckData.RawDataItem[]>([])
-
-
-const open = async (_deviceId: string, chnNum: string, _scriptType: string | null) => {
-  visible.value = true;
-  deviceId = _deviceId
-  scriptType = null
-  // 设置默认选中第一个选项
-  if (options.length > 0) {
-    const firstOption = options[0];
-    currentCheckItem.value = [firstOption.value];
-    
-    // 如果第一个选项有子选项，默认也选中第一个子选项
-    if (firstOption.children && firstOption.children.length > 0) {
-      currentCheckItem.value.push(firstOption.children[0].value);
+const rawTableData = ref<CheckData.RawDataItem[]>([])
+const tesList: any = ref([])
+// 检测结果
+const currentCheckResultData = computed(() => {
+    const data = checkResultData.value[currentCheckItem.value]
+    return Array.isArray(data) ? data : []
+})
+const open = async (row: any, chnNum: string, deviceId: string | null, source: number) => {
+    if (source == 1) {
+        // 正式检测进入页面
+        rowList.value = row
+        formContent.chnNum = chnNum
+        formContent.deviceId = deviceId || ''
     }
-  }
+    visible.value = true
 
+    scriptType = null
 
-
-
-  formContent.errorSysId = checkStore.plan.errorSysId
-
-  pqErrorList.length = 0
-  let {data: resPqErrorList} = await getPqErrSysList()
-  Object.assign(pqErrorList, resPqErrorList)
+    formContent.errorSysId = checkStore.plan.errorSysId
+    pqErrorList.length = 0
+    // 获取误差体系
+    let { data: resPqErrorList } = await getPqErrSysList()
+    Object.assign(pqErrorList, resPqErrorList)
+    // 获取基本信息
+    await getBasicInformation()
+    await getTestItem()
+    await getResults()
+}
+//获取基本信息
+const getBasicInformation = async () => {
+    getContrastFormContent({
+        planId: checkStore.plan.id,
+        scriptType: rowList.value.scriptType,
+        deviceId: formContent.deviceId,
+        chnNum: formContent.chnNum,
+        num: formContent.num ?? null
+    }).then((res: any) => {
+        formContent.dataRule = res.data.dataRule
+        formContent.deviceName = res.data.deviceName
+        formContent.errorSysId = res.data.errorSysId
+        let chnMap: string[] = []
+        for (let key in res.data.chnMap) {
+            chnMap.push(key)
+        }
+        chnList.value = chnMap
+    })
+}
+// 获取测试项
+const getTestItem = async () => {
+    getBigTestItem({
+        reCheckType: 1,
+        planId: checkStore.plan.id,
+        devIds: [formContent.deviceId],
+        patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
+    }).then((res: any) => {})
+}
+// 获取结果
+const getResults = async () => {
+    getContrastResult({
+        planId: checkStore.plan.id,
+        scriptType: rowList.value.scriptType,
+        deviceId: formContent.deviceId,
+        chnNum: formContent.chnNum,
+        num: formContent.num ?? null
+    }).then((res: any) => {
+        let list: string[] = []
+        for (let key in res.data.resultMap) {
+            list.push(key)
+        }
+        currentCheckItem.value = list[0]
+        tesList.value = list
+        checkResultData.value = res.data.resultMap
+        rawTableData.value = res.data.rawDataMap
+    })
 }
 
 const close = () => {
-  visible.value = false;
-  // 可以在这里添加其他清理逻辑
+    visible.value = false
+    // 可以在这里添加其他清理逻辑
 }
 
-const options = [
-  {
-    value: 'guide',
-    label: '谐波电压',
-    children: [
-      {
-        value: 'disciplines',
-        label: '2次',
-      },
-      {
-        value: 'disciplines',
-        label: '3次',
-      },
-    ],
-  },
-
-]
-
-
 defineExpose({
-  open
+    open
 })
 </script>
 
 <style lang="scss" scoped>
 .dialog {
-  display: flex;
-  flex-direction: column;
-  overflow-y: hidden;
-  overflow-x: hidden;
-
-
-  .data-check-dialog {
     display: flex;
     flex-direction: column;
     overflow-y: hidden;
+    overflow-x: hidden;
 
-    .data-check-head {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-    }
-
-    .data-check-body {
-      height: 500px;
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-
-      .content-left-tree {
-        width: 18%;
+    .data-check-dialog {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        max-height: 495px;
+        overflow-y: hidden;
 
-        padding: 10px 0.5% 0px 0.5%;
-        border: 1px solid #ccc;
-        overflow-y: auto;
-        overflow-x: auto;
-
-        .content-tree {
-          width: 100%;
-          height: 100%;
-          margin-top: 10px;
-
-          .custom-tree-node {
-            overflow-x: hidden !important;
-            white-space: nowrap !important;
-            text-overflow: ellipsis !important;
-          }
+        .data-check-head {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
         }
-      }
 
-      .content-right {
-        width: 82%;
-        margin-left: 10px;
-        flex: 1;
+        .data-check-body {
+            height: 500px;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
 
-        .content-right-title {
-          display: flex;
-          padding: 10px 0;
-          margin-top: 0px;
-          line-height: 1.5;
+            .content-left-tree {
+                width: 18%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                max-height: 495px;
 
-          .content-right-title-text {
-            font-size: 14px;
-            font-weight: bold;
-          }
+                padding: 10px 0.5% 0px 0.5%;
+                border: 1px solid #ccc;
+                overflow-y: auto;
+                overflow-x: auto;
+
+                .content-tree {
+                    width: 100%;
+                    height: 100%;
+                    margin-top: 10px;
+
+                    .custom-tree-node {
+                        overflow-x: hidden !important;
+                        white-space: nowrap !important;
+                        text-overflow: ellipsis !important;
+                    }
+                }
+            }
+
+            .content-right {
+                width: 82%;
+                margin-left: 10px;
+                flex: 1;
+
+                .content-right-title {
+                    display: flex;
+                    padding: 10px 0;
+                    margin-top: 0px;
+                    line-height: 1.5;
+
+                    .content-right-title-text {
+                        font-size: 14px;
+                        font-weight: bold;
+                    }
+                }
+            }
+
+            .content-right-Tabs {
+                box-sizing: border-box;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                max-height: 400px;
+            }
         }
-      }
-
-      .content-right-Tabs {
-        box-sizing: border-box;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        max-height: 400px;
-      }
     }
-  }
 }
 </style>