pqs-9100_client/frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue

<template>
  <el-dialog :append-to-body="appendToBody" class="dialog" title="数据查询" :model-value='visible' @close="close"
             v-bind="dialogBig" :draggable="false" style="margin-left: 20%;">
    <div class="data-check-dialog">
      <div class="data-check-head">
        <el-form :model='formContent' label-width="auto" class="form-three ">
          <el-form-item label="检测脚本">
            <el-input v-model='formContent.scriptName' :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.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="harmNumList.length" label='谐波次数'>
            <el-select v-model="currentHarmNum">
              <el-option v-for="item in harmNumList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <div class="data-check-body">
        <div class="content-left-tree">
          <div>
            <el-radio-group v-model="switchItem" @change="handleSwitchChange">
              <el-radio-button label="不符合测试项" :value="0"/>
              <el-radio-button label="全部测试项" :value="1"/>
            </el-radio-group>
          </div>
          <div class="content-tree">
            <el-tree v-if="switchItem === 0" :default-expanded-keys="defaultExpandedKeys" node-key="index"
                     :data="treeDataUnqualified" :props="defaultProps" @node-click="handleNodeClick"
                     class="custom-tree">
              <template #default="{ node, data }">
                <span class="custom-tree-node">{{ data.scriptTypeName }}</span>
              </template>
            </el-tree>
            <el-tree v-if="switchItem === 1" :default-expanded-keys="defaultExpandedKeys" node-key="index"
                     :data="treeDataAll" :props="defaultProps" @node-click="handleNodeClick" class="custom-tree">
              <template #default="{ node, data }">
                <span class="custom-tree-node">{{ data.scriptTypeName }}</span>
              </template>
            </el-tree>
          </div>
        </div>

        <div class="content-right">
          <div class="content-right-title">
            <span class="content-right-title-text">当前检测项目：</span>
            <el-popover trigger="hover" :content="currentDesc? currentDesc : '无'" popper-class="popover-class"
                        width="32%" placement="right-start">
              <template #reference>
                <el-button type="text" style="font-size: 16px;">
                  {{ currentScriptTypeName ? currentScriptTypeName : '无' }}
                </el-button>
              </template>
            </el-popover>
            <!--            <el-divider>当前检测项目</el-divider>-->
            <!--            <div class="content-right-title-desc">-->
            <!--              {{ currentDesc ? currentDesc : "无" }}-->
            <!--            </div>-->
          </div>
          <div class="content-right-Tabs">
            <el-tabs type="border-card" v-model="activeTab">
              <el-tab-pane label="检测结果" name="resultTab">
                <DataCheckResultTable :tableData="checkResultData" :info="infoMsg"/>
              </el-tab-pane>
              <el-tab-pane label="原始数据" name="rawDataTab">
                <DataCheckRawDataTable :tableData="rawTableData"/>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>

</template>
<script setup lang='ts'>
import {dialogBig} from '@/utils/elementBind'
import {reactive, ref} from 'vue'
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
import {CheckData} from "@/api/check/interface";
import {useDictStore} from "@/stores/modules/dict";
import {useCheckStore} from "@/stores/modules/check";
import {getFormData, getTreeData} from "@/api/check/test";

const {appendToBody} = withDefaults(defineProps<{
  appendToBody: boolean
}>(), {appendToBody: true})

const defaultProps = {
  label: "scriptTypeName",
  children: "children",
};

const dictStore = useDictStore()
const checkStore = useCheckStore()

const visible = ref(false)

// 格式化数字
const fixed = 4;

// 表单数据
const formContent = reactive<CheckData.DataCheck>({
  scriptName: '',
  errorSysName: '',
  dataRule: '',
  deviceName: '',
  chnNum: '',
})
// 当前选中的谐波次数
const currentHarmNum = ref<string>("-1")
// 谐波次数列表
const harmNumList = reactive([])

let deviceId: string = ''
let scriptType: string | null = null

// 通道下拉列表
let chnList: any[] = []

// 不符合测试项、全部测试项切换
let switchItem = 0

// 左侧树数据
let treeDataUnqualified: CheckData.TreeItem[] = []
let treeDataAll: CheckData.TreeItem[] = []


// 左侧树被选中的叶子节点id
const checkIndex = ref<string>('')

// 当前检测项目名称
const currentScriptTypeName = ref('')
// 当前检测项目描述
const currentDesc = ref('');
// 右侧Tab选中项
const activeTab = ref<string>('resultTab')

//存放相应的表格数据
let resTableData: { resultData: Map<string, any>, rawData: Map<string, any> } = {}

// 检测结果表格数据
const checkResultData = reactive<CheckData.CheckResult[]>([])

const infoMsg = reactive<{ title: string, name: string }[]>([])

// 原始数据表格数据
const rawTableData = reactive<CheckData.RawDataItem[]>([])

// 左侧树默认展开节点id
let defaultExpandedKeys: string[] = []

// 点击左侧树节点触发事件
const handleNodeClick = async (data: any) => {
  if (!data.children) {
    checkIndex.value = data.index
    currentScriptTypeName.value = data.scriptTypeName
    currentDesc.value = data.sourceDesc

    if (checkIndex.value) {
      await updateTableData()
    }
  }
};

watch(() => formContent.chnNum, async (newVal, oldVal) => {
  console.log("通道号", newVal);

  if (newVal) {
    // 发起请求，查询该测试项的检测结果
    const {data: resTreeDataTemp}: { data: CheckData.TreeItem[] } = await getTreeData({
      scriptId: checkStore.scriptId,
      devId: deviceId,
      devNum: formContent.chnNum + '',
      scriptType: null,
      code: checkStore.planCode
    })
    treeDataAll = resTreeDataTemp
    // treeDataAll = [
    //   {
    //     scriptTypeName: "频率准确度检测",
    //     sourceDesc: null,
    //     harmNum: null,
    //     index: null,
    //     fly: null,
    //     children: [
    //       {
    //         scriptTypeName: "额定条件下频率准确度测试",
    //         sourceDesc: null,
    //         harmNum: null,
    //         index: null,
    //         fly: null,
    //         children: [
    //           {
    //             scriptTypeName: "频率=42.5Hz",
    //             sourceDesc: "频率=42.5Hz",
    //             harmNum: null,
    //             index: 11,
    //             fly: 1,
    //             children: null
    //           },
    //           {
    //             scriptTypeName: "频率=50Hz",
    //             sourceDesc: "频率=50Hz",
    //             harmNum: null,
    //             index: 12,
    //             fly: 1,
    //             children: null
    //           },
    //           {
    //             scriptTypeName: "频率=50.05Hz",
    //             sourceDesc: "频率=50.05Hz",
    //             harmNum: null,
    //             index: 13,
    //             fly: 1,
    //             children: null
    //           },
    //           {
    //             scriptTypeName: "频率=57.5Hz",
    //             sourceDesc: "频率=57.5Hz",
    //             harmNum: null,
    //             index: 14,
    //             fly: 1,
    //             children: null
    //           }
    //         ]
    //       },
    //       {
    //         scriptTypeName: "单影响量下频率准确度测试",
    //         sourceDesc: null,
    //         harmNum: null,
    //         index: null,
    //         fly: null,
    //         children: [
    //           {
    //             scriptTypeName: "电压幅值对频率测量的影响",
    //             sourceDesc: null,
    //             harmNum: null,
    //             index: null,
    //             fly: null,
    //             children: [
    //               {
    //                 scriptTypeName: "10%Un对频率=50.05Hz的影响",
    //                 sourceDesc: "10%Un对频率=50.05Hz的影响",
    //                 harmNum: null,
    //                 index: 15,
    //                 fly: 2,
    //                 children: null
    //               }
    //             ]
    //           },
    //           {
    //             scriptTypeName: "谐波对频率测量的影响",
    //             sourceDesc: null,
    //             harmNum: null,
    //             index: null,
    //             fly: null,
    //             children: [
    //               {
    //                 scriptTypeName: "叠加多次谐波对频率=50.05Hz的影响",
    //                 sourceDesc: "叠加多次谐波对频率=50.05Hz的影响",
    //                 harmNum: null,
    //                 index: 16,
    //                 fly: 1,
    //                 children: null
    //               }
    //             ]
    //           }
    //         ]
    //       },
    //     ]
    //   }
    // ]

    let treeDataTemp = JSON.parse(JSON.stringify(treeDataAll))
    filterTree(treeDataTemp, 2)
    treeDataUnqualified = treeDataTemp

    switchItem = 0
    await handleSwitchChange(0)
  }
})

watch(currentHarmNum, (newVal, oldVal) => {
  console.log("谐波次数", newVal);
  if(newVal !== '-1'){
    let resCheckResult: CheckData.ResCheckResult = resTableData.resultData.get(newVal.toString())
    setCheckResultData(resCheckResult)
  }
})

const handleSwitchChange = async (data: any) => {
  console.log("切换不合格测试项、全部测试项", data);

  defaultOperate()
  await updateTableData()
}

// 默认操作
const defaultOperate = () => {
  let node = null
  if (switchItem === 0) {
    node = getDefaultNode(treeDataUnqualified)
  } else {
    node = getDefaultNode(treeDataAll)
  }
  if (node) {
    currentScriptTypeName.value = node.scriptTypeName
    currentDesc.value = node.sourceDesc
    checkIndex.value = node.index
    defaultExpandedKeys = [node.index]
  } else {
    currentScriptTypeName.value = ''
    currentDesc.value = ''
    checkIndex.value = ''
    defaultExpandedKeys = []
  }
}

const updateTableData = async () => {
  console.log("左侧树被选中的叶子节点checkIndex", checkIndex.value);
  if (checkIndex.value) {
    console.log("更新表格数据");
    // 发起请求，查询该测试项的检测结果
    // const {data} = await getTableData({checkStore.scriptId,deviceId, formContent.chnNum, scriptType,checkIndex})
    // resTableData =data

    let resultData = new Map()
    // resultData.set("频率", [{
    //   dataT: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   dataB: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   dataC: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   radius: 0.05774,
    //   isData: '符合',
    // }])

    // resultData.set('3', [{
    //   dataA: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   dataB: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   dataC: {
    //     data: 57.7401,
    //     resultData: 57.7301,
    //   },
    //   radius: 0.05774,
    //   isData: '符合',
    // }])
    // resultData.set('5', [{
    //   dataA: {
    //     data: 57.7402,
    //     resultData: 57.7301,
    //   },
    //   dataB: {
    //     data: 57.7402,
    //     resultData: 57.7301,
    //   },
    //   dataC: {
    //     data: 57.7402,
    //     resultData: 57.7301,
    //   },
    //   radius: 0.05774,
    //   isData: '符合',
    // }])
    // resultData.set('7', [{
    //   dataA: {
    //     data: 57.7403,
    //     resultData: 57.7301,
    //   },
    //   dataB: {
    //     data: 57.7403,
    //     resultData: 57.7301,
    //   },
    //   dataC: {
    //     data: 57.7403,
    //     resultData: 57.7301,
    //   },
    //   radius: 0.05774,
    //   isData: '符合',
    // }])

    resultData.set("电压幅值", [{
      dataT: {
        data: 57.7401,
        resultData: 57.7301,
      },
      radius: 0.05774,
      isData: '符合',
    }])
    resultData.set("持续时间", [{
      dataT: {
        data: 57.7402,
        resultData: 57.7302,
      },
      radius: 0.05774,
      isData: '符合',
    }])

    let rawData = new Map()

    resTableData = {
      resultData: resultData,
      rawData: rawData
    }

    let resCheckResult: CheckData.ResCheckResult = []
    let tempInfoMsg: { title: string, name: string } = []

    if (resTableData.resultData.size === 1) {
      resCheckResult = resTableData.resultData.values().next().value
      Object.assign(harmNumList, [])
      currentHarmNum.value = '-1'

      setCheckResultData(resCheckResult)
    } else {
      if (resTableData.resultData.get('电压幅值') || resTableData.resultData.get('持续时间')) {
        if (resTableData.resultData.get('电压幅值')) {
          tempInfoMsg.push({title: '电压幅值', name: 'Voltage'})
          resCheckResult.push(...resTableData.resultData.get('电压幅值'))
        }
        if (resTableData.resultData.get('持续时间')) {
          tempInfoMsg.push({title: '持续时间', name: 'Duration'})
          resCheckResult.push(...resTableData.resultData.get('持续时间'))
        }
        Object.assign(harmNumList, [])
        currentHarmNum.value = '-1'

        Object.assign(infoMsg, tempInfoMsg)

        setCheckResultData(resCheckResult)
      } else {
        let tempHarmNumList = []
        resTableData.resultData.forEach((value, key) => {
          tempHarmNumList.push({
            value: key,
            label: key
          })
        })
        Object.assign(harmNumList, tempHarmNumList)
        currentHarmNum.value = harmNumList[0].value
      }
    }

    // setCheckResultData(resCheckResult)

    Object.assign(rawTableData, [
      {
        updateTime: "2024-10-10 09:30:00",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:03",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:06",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:09",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:12",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:15",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:18",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:21",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:24",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:27",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:30",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:33",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:36",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:39",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:42",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:45",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:48",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:51",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:54",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      },
      {
        updateTime: "2024-10-10 09:30:57",
        A: 57.73,
        B: 57.73,
        C: 57.73,
      }
    ])
  }
}

const open = async (_deviceId: string, chnNum: string, _scriptType: string | null) => {
  // console.log(checkStore.scriptId, _deviceId, chnNum, _scriptType);
  deviceId = _deviceId
  scriptType = _scriptType

  // 发起后端请求，查询详细信息 当chnNum为-1时，查询所有通道号
  const {data: resFormContent}: { data: any } = await getFormData({
    planId: checkStore.planId,
    deviceId,
    chnNum,
    scriptType
  })

  // 数据处理
  // let resFormContent = {
  //   scriptName: 'Q/GDW 10650.4-2021 模拟式',
  //   errorSysName: 'Q/GDW 10650.2-2021',
  //   dataRule: '505f063f9f91ab108d895a9fe96b5dce',
  //   deviceName: '被检设备1',
  //   chnList: [
  //     {value: '1', label: '1'},
  //     {value: '2', label: '0'},
  //     {value: '3', label: '1'},
  //     {value: '4', label: '0'}],
  // }

  chnList = resFormContent.chnList.map((item: { value: string, label: string }) => ({
    value: item.value,
    label: item.label == '1' ? `${item.value}` : `${item.value}（不符合）`
  }))

  let dataRuleName = dictStore.getDictData('Data_Rule').find(item => item.id == resFormContent.dataRule)?.name

  Object.assign(formContent, {
    ...resFormContent,
    dataRule: dataRuleName,
    chnNum: chnList.length > 0 ? chnList[0].value : '',
  })


  visible.value = true;
}

const close = () => {
  //数据清空
  Object.assign(formContent, {
    scriptName: '',
    errorSysName: '',
    dataRule: '',
    deviceName: '',
    chnNum: '',
  })
  treeDataUnqualified = []
  treeDataAll = []
  Object.assign(treeDataUnqualified, [])
  Object.assign(treeDataAll, [])
  Object.assign(harmNumList, [])
  currentHarmNum.value = '-1'
  Object.assign(checkResultData, [])
  Object.assign(infoMsg, [])
  Object.assign(rawTableData, [])
  defaultExpandedKeys = []
  checkIndex.value = ''
  activeTab.value = 'resultTab'
  currentScriptTypeName.value = ''
  currentDesc.value = ''
  switchItem = 0

  visible.value = false;
};

const setCheckResultData = (data: CheckData.ResCheckResult[]) => {
  let result: CheckData.CheckResult[] = []
  data.forEach((item: CheckData.ResCheckResult) => {
    let temp: CheckData.CheckResult = {
      aStd: item.dataA?.resultData,
      aData: item.dataA?.data,
      aError: Math.abs(item.dataA?.data - item.dataA?.resultData).toFixed(fixed),
      bStd: item.dataB?.resultData,
      bData: item.dataB?.data,
      bError: Math.abs(item.dataB?.data - item.dataB?.resultData).toFixed(fixed),
      cStd: item.dataC?.resultData,
      cData: item.dataC?.data,
      cError: Math.abs(item.dataC?.data - item.dataC?.resultData).toFixed(fixed),
      tStd: item.dataT?.resultData,
      tData: item.dataT?.data,
      tError: Math.abs(item.dataT?.data - item.dataT?.resultData).toFixed(fixed),

      maxError: item.radius,
      result: item.isData,
    }
    result.push(temp)
  })
  Object.assign(checkResultData, result)
}

// const toFixed = (num: number, pow: number): string => {
//   return Math.floor(num * Math.pow(10, pow)) / Math.pow(10, pow)
// }
const findFirstLeafNode = (node: any): any => {
  if (!node.children || node.children.length === 0) {
    return node;
  }

  return findFirstLeafNode(node.children[0]);
}
const getDefaultNode = (data: any[]) => {
  if (!data || data.length === 0) {
    return null;
  }

  const firstElement = data[0];

  return findFirstLeafNode(firstElement);
}

// fly: 1合格 2不合格 4数据错误
const filterTree = (treeData: any[], fly: number): any[] => {
  if (!treeData || treeData.length === 0) {
    return []
  }
  filter(treeData, fly)
  return treeData
}

const filter = (treeData: any[], fly: number) => {
  for (let i = treeData.length - 1; i >= 0; i--) {
    let node = treeData[i]
    if (node.fly !== fly) {
      if (node.children && node.children.length > 0) {
        filter(node.children, fly)
        // 检查 children 是否被全部移除
        if (node.children.length === 0) {
          treeData.splice(i, 1);
        }
      } else {
        treeData.splice(i, 1)
      }
    }
  }
}

defineExpose({
  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;

    .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: 22%;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-height: 473px;

        padding: 10px 0;
        border: 1px solid #ccc;
        overflow-y: auto;

        .content-tree {
          width: 100%;
          height: 100%;
          max-height: 100%;
          margin-top: 10px;

          .custom-tree-node {
            overflow-x: hidden !important; // 溢出部分隐藏
            white-space: nowrap !important; //禁止自动换行
            text-overflow: ellipsis !important; // 使溢出部分以省略号显示
          }
        }
      }

      .content-right {
        width: 78%;
        margin-left: 10px;
        flex: 1;

        .content-right-title {
          margin-top: 10px;
          line-height: 1.5;

          .content-right-title-text {
            font-size: 16px;
            font-weight: bold;
          }
        }

        //.el-divider--horizontal {
        //  //margin-top: 0px;
        //  margin-bottom: 5px;
        //  height: 20px;
        //}

        //.content-right-title-desc {
        //  font-size: 16px;
        //  height: 48px;
        //  max-height: 48px;
        //  overflow-y: auto;
        //}
      }

      .content-right-Tabs {
        box-sizing: border-box;
        margin-top: 10px;
        margin-bottom: 10px;
        max-height: 400px;
      }
    }
  }
}
</style>
<!--<style lang="scss">-->
<!--.el-popover.popover-class {-->
<!--  .el-popover__title {-->
<!--    color: #fff;-->
<!--    background-color: #003078 !important;-->
<!--  }-->
<!--}-->
<!--</style>-->