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

<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>
            </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="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>
      </div>
    </div>
  </el-dialog>

</template>
<script setup lang='ts'>
import {dialogBig} from '@/utils/elementBind'
import {reactive, ref, watch} 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";

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


const checkStore = useCheckStore()

const visible = ref(false)
const treeRef = ref()
const searchValue = ref<string>('')
const pqErrorList = reactive<{ id: string; name: string; }[]>([])
const activeTab = ref('resultTab')
const currentCheckItem = ref<any>()

watch(searchValue, (val) => {
  treeRef.value!.filter(val)
})

// 表单数据
const formContent = reactive<CheckData.DataCheck>({
  scriptName: '',
  errorSysId: '',
  dataRule: '',
  deviceName: '',
  chnNum: '',
})

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


// 当前检测项目名称
const currentScriptTypeName = ref('')
// 检测结果表格数据
const checkResultData = reactive<CheckData.CheckResult[]>([])

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


const open = async (_deviceId: string, chnNum: string, _scriptType: string | null) => {
  visible.value = true;

  // 设置默认选中第一个选项
  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 options = [
  {
    value: 'guide',
    label: '谐波电压',
    children: [
      {
        value: 'disciplines',
        label: '2次',
      },
      {
        value: 'disciplines',
        label: '3次',
      },
    ],
  },

]


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

        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;
      }
    }
  }
}
</style>