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.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" @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="['0', '0-2']" 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>({
  testScriptName: 'Q/GDW 10650.4-2021 模拟式',
  errorSysName: 'Q/GDW 10650.2-2021',
  dataRule: '所有值',
  deviceName: '被检设备1',
  monitorIdx: '1',
})

const activeName = ref('resultTab')

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

const monitorIdxList = [
  {
    value: '1',
  },
  {
    value: '2 （不合格）',
  },
  {
    value: '3',
  },
  {
    value: '4 （不合格）',
  },
]

// 改变通道号下拉框触发事件
const handleChnNumChange = (data: any) => {
  console.log(data);
}

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

  } else {

  }
}

// 点击左侧树节点触发事件
const handleNodeClick = (data: any) => {
  console.log(data);
};

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 resultTableRef = ref()
const rawDataTableRef = ref()

const visible = ref(false)

const close = () => {
  //数据清空

  activeName.value = 'rawDataTab'

  visible.value = false;
};

const open = (checkItemId: string, deviceId: string, chnNum?: number) => {
  console.log(checkItemId, deviceId, chnNum);
  // 发起后端请求，查询详细信息
  //const result = await getCheckItemDetail({checkItemId,deviceId, chnNum})

  // 数据处理
  // checkResultTableData=[];
  //formContent.value = ...

  visible.value = true;
}

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>