pqs-9100_client/frontend/src/views/machine/testScript/components/testScriptDetail.vue

<template>
    <div>
        <div class="divider-container">
            <el-divider style="width: 300px" content-position="left">检测脚本信息</el-divider>
            <el-divider style="width: 400px" content-position="left">通讯脚本</el-divider>
            <el-divider style="flex: 1" content-position="left">检测项目概要信息</el-divider>
        </div>
        <div class="data-check-content">
            <div class="content-tree">
                <Tree :treeData="treeData" />
            </div>
            <div class="content-tree" style="width: 400px">
                <Commun :options="props.options" />
            </div>

            <div class="content-right-Tabs" style="height: calc(100vh - 335px); width: 100px">
                <el-tabs type="border-card" style="height: 100%" v-model="activeName" @tab-change="tabChange">
                    <el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
                        <div class="dialog-footer">
                            <el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
                            <!-- <el-button :icon="CirclePlus" type="primary" @click="openAddDialog()">保存测试项</el-button> -->
                        </div>
                        <!-- 频率tab -->
                        <!-- {{ tab.children }} -->
                        <el-tabs type="border-card" v-model="childActiveName" @tab-change="inquireTable">
                            <el-tab-pane
                                v-for="subTab in tab.children || []"
                                :key="subTab.value"
                                :label="subTab.label"
                                :name="subTab.value"
                            >
                                <div class="table-container">
                                    <el-table
                                        :data="tableData"
                                        :header-cell-style="{
                                            textAlign: 'center',
                                            backgroundColor: '#003078',
                                            color: '#fff'
                                        }"
                                        stripe
                                        :cell-style="{ textAlign: 'center' }"
                                        height="calc(100vh - 515px)"
                                    >
                                        <el-table-column type="index" label="组次" width="60" />
                                        <el-table-column prop="ffreq" label="频率(Hz)" width="100" />
                                        <el-table-column :label="item.label" v-for="item in column" :key="item.label">
                                            <template #default="{ row }">
                                                <table class="tableL">
                                                    <tr>
                                                        <td class="theFirst">V</td>
                                                        <td>
                                                            {{
                                                                row.channelList[item.num]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[item.num]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[item.num]?.fphase
                                                                    ? '电流=' + row.channelList[item.num]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="theFirst">I</td>
                                                        <td>
                                                            {{
                                                                row.channelList[item.num + 1]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[item.num + 1]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[item.num + 1]?.fphase
                                                                    ? '电流=' +
                                                                      row.channelList[item.num + 1]?.fphase +
                                                                      '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </template>
                                        </el-table-column>
                                        <!-- <el-table-column label="L1">
                                            <template #default="{ row }">
                                                <table class="tableL">
                                                    <tr>
                                                        <td class="theFirst">V</td>
                                                        <td>
                                                            {{
                                                                row.channelList[0]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[0]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[0]?.fphase
                                                                    ? '电流=' + row.channelList[0]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="theFirst">I</td>
                                                        <td>
                                                            {{
                                                                row.channelList[1]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[1]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[1]?.fphase
                                                                    ? '电流=' + row.channelList[1]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="L2">
                                            <template #default="{ row }">
                                                <table class="tableL">
                                                    <tr>
                                                        <td class="theFirst">V</td>
                                                        <td>
                                                            {{
                                                                row.channelList[2]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[2]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[2]?.fphase
                                                                    ? '电流=' + row.channelList[2]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="theFirst">I</td>
                                                        <td>
                                                            {{
                                                                row.channelList[3]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[3]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[3]?.fphase
                                                                    ? '电流=' + row.channelList[3]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="L3" label="L3">
                                            <template #default="{ row }">
                                                <table class="tableL">
                                                    <tr>
                                                        <td class="theFirst">V</td>
                                                        <td>
                                                            {{
                                                                row.channelList[4]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[4]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[4]?.fphase
                                                                    ? '电流=' + row.channelList[4]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="theFirst">I</td>
                                                        <td>
                                                            {{
                                                                row.channelList[5]?.famp
                                                                    ? '电压=' +
                                                                      row.channelList[5]?.famp +
                                                                      (valueCode == 'Absolute' ? 'V' : '%')
                                                                    : '/'
                                                            }}
                                                        </td>
                                                        <td>
                                                            {{
                                                                row.channelList[5]?.fphase
                                                                    ? '电流=' + row.channelList[5]?.fphase + '°'
                                                                    : '/'
                                                            }}
                                                        </td>
                                                    </tr>
                                                </table>
                                            </template>
                                        </el-table-column> -->
                                        <el-table-column label="操作" width="210">
                                            <template #default="{ row }">
                                                <el-button
                                                    type="primary"
                                                    link
                                                    :icon="CopyDocument"
                                                    @click="copyRow(row)"
                                                >
                                                    复制
                                                </el-button>
                                                <el-button
                                                    type="primary"
                                                    link
                                                    :icon="CopyDocument"
                                                    @click="openAddDialog('edit', row)"
                                                >
                                                    编辑
                                                </el-button>
                                                <el-button type="primary" link :icon="Delete" @click="deleteRow(row)">
                                                    删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <TestProjectPopup
            ref="testProjectPopupRef"
            :options="props.options"
            :activeName="activeName"
            @addTab="addTab"
            :formContent="props.formContent"
        />
    </div>
</template>

<script setup lang="ts">
import { type PropType, ref, nextTick } from 'vue'
import Tree from './tree.vue'
import Commun from './communication.vue'
import type { CascaderOption } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import { CirclePlus, Delete, EditPen, CopyDocument } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
interface TabOption {
    label?: string
    name?: string
    value?: string
    code?: string
    children?: TabOption[]
}
const treeData = ref<CheckData.TreeItem[]>([])
const valueCode = ref('') //Absolute绝对值
const props = defineProps({
    options: {
        type: Array as PropType<TabOption[]>,
        required: true
    },
    formContent: {
        type: Object,
        required: true
    }
})
const dictStore = useDictStore()
const activeName = ref('')
const childActiveName = ref('')
const testProjectPopupRef = ref()
const tableData: any = ref([])
const tabData: any = ref([])
const column = ref([
    {
        label: 'L1',
        num: 0
    },
    {
        label: 'L2',
        num: 2
    },
    {
        label: 'L3',
        num: 4
    }
])
// 获取树
const getTree = () => {
    getTreeData({
        scriptId: props.formContent.id
    }).then(res => {
        if (res.code === 'A0000') {
            treeData.value = res.data
            // 添加tab子项
            props.options.forEach((k: any, i: number) => {
                tabData.value[i].children = []
                treeData.value.forEach((item: any) => {
                    if (k.value == item.scriptTypeCode) {
                        item.children.forEach((s: any) => {
                            k.children.forEach((P: any) => {
                                if (P.code == s.scriptTypeCode) {
                                    tabData.value[i].children.push({
                                        label: P.label,
                                        value: P.code,
                                        children: []
                                    })
                                } else {
                                    s.children.forEach((j: any) => {
                                        if (j.scriptTypeCode == P.code) {
                                            tabData.value[i].children.push({
                                                label: P.label,
                                                value: P.code,
                                                children: []
                                            })
                                        }
                                    })
                                }
                            })
                        })
                    }
                })
            })
            tabChange()
        }
    })
}
const copyActiveName = ref('')

// 切换大tab控制小tab
const tabChange = () => {
    if (copyActiveName.value != activeName.value) {
        copyActiveName.value == activeName.value
        childActiveName.value = ''
        childActiveName.value =
            tabData.value.filter(item => item.value == activeName.value)[0]?.children[0]?.value || ''
    }
    inquireTable()
}
//根据脚本id查询检测脚本详情
const inquireTable = () => {
    const sortOrder = ['Ua', 'Ia', 'Ub', 'Ib', 'Uc', 'Ic']
    dlsDetails({
        scriptId: props.formContent.id,
        scriptType: activeName.value,
        scriptSubType: childActiveName.value
    }).then((res: any) => {
        if (res.code === 'A0000') {
            res.data.forEach((item: any) => {
                item.channelList = item.channelList.sort((a, b) => {
                    const indexA = sortOrder.indexOf(a.channelType)
                    const indexB = sortOrder.indexOf(b.channelType)
                    return indexA - indexB
                })
            })
      
            tableData.value = res.data
        }
    })
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
    if (titleType == 'add') {
    }
    testProjectPopupRef.value?.open(titleType, row)
}
// 获取左边树数据
// 新增保存
const addTab = (row: any) => {
    getTree()
    // let data = JSON.parse(JSON.stringify(row))
    // let flag = true
    // let list: any = {}
    // let childrenList: any = {}
    // tabData.value.forEach(item => {
    //     if (item.value == activeName.value) {
    //         // item.children.push(JSON.parse(JSON.stringify(row)))
    //         list = item
    //         item.children.forEach(k => {
    //             if (k.value == row.value) {
    //                 flag = false
    //                 childrenList = k
    //             }
    //         })
    //     }
    // })
    // if (flag) {
    //     list.children.push(data)
    // } else {
    //     childrenList.children.push(data)
    // }
}
onMounted(() => {
    console.log('🚀 ~ onMounted ~ props.options:', props.options)
    getTree()
    props.options.forEach((item: any) => {
        tabData.value.push({
            label: item.label.replace(/准确度|检测/g, ''),
            value: item.value,
            code: item.code,
            children: []
        })
    })
    activeName.value = tabData.value[0].value
    valueCode.value = dictStore
        .getDictData('Script_Value_Type')
        .filter(item => item.id == props.formContent.valueType)[0].code
})
</script>
<style lang="scss" scoped>
.data-check-content {
    display: flex;
    gap: 10px;
}

.content-tree {
    width: 300px;
    height: calc(100vh - 335px);
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-right: 10px;
    overflow: auto; /* 同时启用垂直和水平滚动 */
    overflow-x: hidden;
}

/* 确保 el-tree 内容可以超出容器宽度 */
.el-tree {
    width: fit-content; /* 根据内容自适应宽度 */
}

.content-right-Tabs {
    flex: 1; /* 根据需要调整宽度比例 */
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.divider-container {
    display: flex;
}

.divider-container .el-divider {
    margin-right: 30px; /* 根据需要调整间距 */
}
:deep(.el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell) {
    padding: 3px 11px;
}
:deep(.el-loading-mask) {
    z-index: 3000;
}
.tableL {
    border-collapse: collapse;
    width: 100%;

    td {
        border: 1px solid #ccc;
        padding: 5px;
        width: 45%;
    }
    .theFirst {
        background-color: #003078;
        color: #fff;
        width: 20px !important;
    }
}
</style>