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.monitorIdx" @change="handleChnNumChange">
              <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>
            <el-radio-group v-model="checkItemSwitch" @change="handleCheckItemSwitch">
              <el-radio-button label="不符合测试项" :value="0"/>
              <el-radio-button label="全部测试项" :value="1"/>
            </el-radio-group>
          </div>
          <div class="content-tree">
            <el-tree :default-expanded-keys="['1-1-1']" node-key="id" :data="treeData"
                     :props="defaultProps" @node-click="handleNodeClick"/>
          </div>
        </div>

        <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 {reactive, ref} from 'vue'
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
import {CheckData} from "@/api/check/interface";
import {data as treeData} from "@/api/plan/autoTest.json";

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

const formContent = reactive<CheckData.DataCheck>({
  scriptName: '',
  errorSysName: '',
  dataRule: '',
  deviceName: '',
  monitorIdx: '',
})

const activeName = ref('resultTab')
// 左侧树被选中的叶子节点id
const checkedScriptId = ref('')

const checkItemSwitch = 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",
};

let monitorIdxList: any[] = []
// 检测结果表格数据
const checkResultTableData = reactive<CheckData.CheckResult[]>([
  {
    chnNum: '1',
    standardValue: 57.74,
    L1: 57.73,
    L1_errValue: 0.01,
    L2: 57.73,
    L2_errValue: 0.01,
    L3: 57.73,
    L3_errValue: 0.01,
    maxErrVaule: 0.05774,
    result: '合格',
  }
])
// 原始数据表格数据
const rawTableData = reactive<CheckData.RawDataItem[]>([
  {
    updateTime: "2024-10-10 09:30:00",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:03",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:06",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:09",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:12",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:15",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:18",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:21",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:24",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:27",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:30",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:33",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:36",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:39",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:42",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:45",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:48",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:51",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:54",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  },
  {
    updateTime: "2024-10-10 09:30:57",
    L1: 57.73,
    L2: 57.73,
    L3: 57.73,
  }
])

const defaultExpandedKeys = computed(() => {

})

// 切换不合格测试项、全部测试项 触发事件
const handleCheckItemSwitch = (data: any) => {
  // 0 不合格测试项、1 全部测试项
  if (data === 0) {

  } else {

  }
}

// 改变通道号下拉框触发事件
const handleChnNumChange = (data: any) => {
  formContent.monitorIdx = data.value
}
watch(() => formContent.monitorIdx, (newVal, oldVal) => {
  if (newVal) {
    console.log("通道号下拉框", newVal, oldVal);
  }
})

// 点击左侧树节点触发事件
const handleNodeClick = (data: any) => {
  if (!data.children) {
    checkedScriptId.value = data.id
  }
};
watch(checkedScriptId, (newVal, oldVal) => {
  if (newVal) {
    console.log("左侧树被选中的叶子节点id", newVal, oldVal);
    // checkResultTableData
  }
})


const resultTableRef = ref()
const rawDataTableRef = ref()

const visible = ref(false)

const close = () => {
  //数据清空
  Object.assign(formContent, {
    scriptName: '',
    errorSysName: '',
    dataRule: '',
    deviceName: '',
    monitorIdx: '',
  })
  checkedScriptId.value = ''
  activeName.value = 'rawDataTab'

  visible.value = false;
};

const open = async (deviceId: string, chnNum: number, checkItemId?: string) => {
  // 发起后端请求，查询详细信息
  // 当checkItemId为空时，默认显示全部测试项、全部不合格测试项
  // 当checkItemId不为空时，默认显示当前checkItemId的测试项、属于当前checkItemId的不合格测试项
  checkItemId = checkItemId ?? ''
  console.log(deviceId, chnNum, checkItemId);
  //const result = await getCheckItemDetail({deviceId, chnNum, checkItemId})


  // 数据处理
  monitorIdxList = [
    {value: '1',},
    {
      value: '2 （不合格）',
    },
    {
      value: '3',
    },
    {
      value: '4 （不合格）',
    },]
  Object.assign(formContent, {
    scriptName: 'Q/GDW 10650.4-2021 模拟式',
    errorSysName: 'Q/GDW 10650.2-2021',
    dataRule: '所有值',
    deviceName: '被检设备1',
    monitorIdx: monitorIdxList[0].value,
  })
  checkedScriptId.value = treeData[0].children[0].children[0].id
  // checkResultTableData=[];

  visible.value = true;
}

const getDefaultLeafNodeId = (treeData: any[]): string => {
  let leafNodeId = ''
  if (treeData.length > 0) {
    const firstNode = treeData[0]
  }
  return leafNodeId
}

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;

    .data-check-head {
      display: flex;
      flex-direction: row;
      width: 100%;
    }

    .data-check-body {
      width: 100%;
      display: flex;
      flex-direction: row;

      .content-left-tree {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-height: 473px;

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

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

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

        .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>