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

<template>
    <el-dialog title="数据查询" :model-value='visible' @close="handleCancel" width="1065px" draggable>
        <div class="data-check-dialog">
            <div class="data-check-title">
                <el-form :model='formContent' label-width="auto" class="form-three ">
                    <el-form-item label="检测脚本">
                        <el-input v-model='testScriptName' :disabled="true" />
                    </el-form-item>
                    <el-form-item label="误差体系">
                        <el-input v-model='errorSysName' :disabled="true" />
                    </el-form-item>
                    <el-form-item label="数据原则">
                        <el-input v-model='dataRule' :disabled="true" />
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-input v-model='deviceName' :disabled="true" />
                    </el-form-item>

                    <!-- <el-col :span="8">
                                <el-form-item label='复检次数:'>
                                    <el-select v-model="reCheckIdx">
                                        <el-option
                                        v-for="item in reCheckList"
                                        :key="item.value"
                                        :label="item.value"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>       
                            </el-col> -->
                    <el-form-item label='通道号'>
                        <el-select v-model="monitorIdx">
                            <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-content">
                <div class="content-left-tree">
                    <div class="content-left-tree-switch">
                        <!-- <el-switch
                            v-model="scriptSwitch"
                            class="ml-2"
                            inline-prompt
                            style="--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #5a79a9"
                            active-text="不合格测试项"
                            inactive-text="全部测试项"
                        /> -->
                        <el-radio-group v-model="scriptSwitch">
                            <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-1', '0-2', '0-3', '1']" node-key="id" :data="data"
                            :props="defaultProps" @node-click="handleNodeClick" />
                    </div>
                </div>
                <div class="content-right">
                    <div class="content-right-title">
                        <!-- <el-divider>当前检测项目：</el-divider> -->
                        <div>
                            当前检测项目
                        </div>
                        <span>{{ currentScriptDsc }}</span>
                    </div>
                    <div class="content-right-Tabs">
                        <el-tabs type="border-card" v-model="activeName">
                            <el-tab-pane label="检测结果" name="resultTab">
                                <DataCheckResultTable></DataCheckResultTable>
                            </el-tab-pane>
                            <el-tab-pane label="原始数据" name="rawDataTab">
                                <DataCheckRawDataTable></DataCheckRawDataTable>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>

</template>
<script setup lang='ts'>

import IPAddress from '@/components/IpAddress/index.vue'
import { dialogBig } from '@/utils/elementBind'
import { type Device } from '@/api/device/interface/device'
import { ElMessage, type FormItemRule } from 'element-plus'
import { addPqDev, updatePqDev } from '@/api/device/device'
import { computed, reactive, type Ref, ref } from 'vue'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
// 使用 dayjs 库格式化
import dayjs from 'dayjs'
import { getPqMonList } from '@/api/device/monitor'
import { type ColumnProps } from '@/components/ProTable/interface'
import { type Monitor } from '@/api/device/interface/monitor'
import { data } from "@/api/plan/autoTest.json";
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
const formContent = ref({})
const activeName = ref('rawDataTab')
const deviceName = ref('240001');
const monitorIdx = ref('1');
const reCheckIdx = ref('3');
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
const errorSysName = ref('Q/GDW 10650.2-2021');
const dataRule = ref('所有值');
const scriptSwitch = 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 reCheckList = [
    {
        value: '0',
    },
    {
        value: '1',
    },
    {
        value: '2',
    },
    {
        value: '3',
    },
]
const monitorIdxList = [
    {
        value: '1',
    },
    {
        value: '2 （不合格）',
    },
    {
        value: '3',
    },
    {
        value: '4 （不合格）',
    },
]
const handleNodeClick = (data) => {
   // console.log(data);
};
const MonIsShow = ref(false)
const DevIsShow = ref(false)
const IsPasswordShow = ref(false)
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

const props = defineProps<{
    visible: boolean;
}>();

const emit = defineEmits<{
    (e: 'update:visible', value: boolean): void;
    (e: 'submit', data: any): void;
}>();

const handleCancel = () => {
    emit('update:visible', false); // 关闭对话框
};
</script>
<style scoped>
.data-check-dialog {
    display: flex;
    flex-direction: column;
    max-height: 580px;
}

.data-check-title {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
}

.data-check-content {
    display: flex;
    /* flex-direction: row; */
}

.content-left-tree {
    width: 240px;
    max-height: 445px;
    /* overflow-y: auto; */
    padding: 10px 0;
    border: 1px solid #ccc;
    /* background-color: gray; */
}

.content-tree {
    max-height: 405px;
    margin-top: 10px;
    overflow-y: auto;
}

.content-left-tree-switch {
    text-align: right;
    margin-right: 10px;
}

.content-right {
    margin-left: 10px;
    flex: 1;
}

.content-right-Tabs {
    margin-top: 15px;
}

:deep(.el-divider--horizontal) {
    margin: 15px 0;
}
.content-right-title{
    div{
        font-size: 16px;
        font-weight: 600;    
    }
}
</style>