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

<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" width="1450px">
        <el-carousel height="600px" :autoplay="false" ref="carouselRef" indicator-position="none">
            <el-carousel-item :name="0" style="height: 100%; overflow-y: auto">
                <div class="dialog-content">
                    <el-tabs type="border-card" class="right-tabs">
                        <el-tab-pane label="检测">
                            <!-- 全局设置菜单内容 -->
                            <div style="height: 295px">
                                <el-radio-group v-model="form.subType">
                                    <el-radio
                                        v-for="item in tabChildren"
                                        :key="item"
                                        :label="item.label"
                                        :value="item.code"
                                        border
                                        style="margin: 0 0 10px 10px"
                                    />
                                    <!-- <el-radio v-for="item in tabChildren" :value="item.value" border>{{ item.label }}</el-radio> -->
                                </el-radio-group>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <el-tabs type="border-card" class="left-tabs" style="height: 100%">
                        <el-tab-pane label="输出菜单">
                            <!-- 输出菜单内容 -->
                            <el-table
                                :data="tableData"
                                style="width: 100%"
                                :style="{ height: '295px', overflow: 'hidden' }"
                                :show-header="false"
                                :span-method="arraySpanMethod"
                                :cell-style="tableStyle.cellStyle"
                                :header-cell-style="{
                                    textAlign: 'center',
                                    backgroundColor: 'var(--el-color-primary)',
                                    color: '#fff'
                                }"
                                @cell-click="handleRowClick"
                                :key="key"
                            >
                                <el-table-column prop="name" label="相别" width="60" align="center" />
                                <el-table-column prop="frequency" label="电压/电流" align="center" width="60" />
                                <el-table-column prop="L1" label="值" width="180" align="center">
                                    <template #default="{ row, $index }">
                                        <span>
                                            {{ row.type === 'V' ? '电压' : '电流' }}{{ form.channelList[$index].famp
                                            }}{{
                                                valueCode == 'Absolute' ? (row.type === 'V' ? 'V' : 'A') : '%'
                                            }}
                                            相角{{ form.channelList[$index].fphase }}°
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="85">
                                    <template #default="{ row, $index }">
                                        <!-- <el-button
                                    type="primary"
                                    v-if="$index != 4"
                                    link
                                    :icon="CopyDocument"
                                    @click="copyRow($index)"
                                >
                                    复制
                                </el-button> -->
                                        <el-dropdown placement="top-start">
                                            <el-button type="primary" link :icon="CopyDocument">复制</el-button>
                                            <template #dropdown>
                                                <el-dropdown-menu>
                                                    <div v-if="$index == 0">
                                                        <el-dropdown-item @click="copyRow(0, 2)">L2</el-dropdown-item>
                                                        <el-dropdown-item @click="copyRow(0, 4)">L3</el-dropdown-item>
                                                    </div>
                                                    <div v-if="$index == 2">
                                                        <el-dropdown-item @click="copyRow(2, 0)">L1</el-dropdown-item>
                                                        <el-dropdown-item @click="copyRow(2, 4)">L3</el-dropdown-item>
                                                    </div>
                                                    <div v-if="$index == 4">
                                                        <el-dropdown-item @click="copyRow(4, 0)">L1</el-dropdown-item>
                                                        <el-dropdown-item @click="copyRow(4, 2)">L2</el-dropdown-item>
                                                    </div>
                                                </el-dropdown-menu>
                                            </template>
                                        </el-dropdown>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" align="center">
                                    <template #default="{ row, $index }">
                                        <el-checkbox-button
                                            v-model="form.channelList[$index].channelFlag"
                                            label="通道使能"
                                            :disabled="
                                                form.channelList[$index].harmFlag ||
                                                form.channelList[$index].inHarmFlag ||
                                                form.channelList[$index].flickerFlag ||
                                                form.channelList[$index].dipFlag
                                            "
                                        />
                                        <el-checkbox-button
                                            v-model="form.channelList[$index].harmFlag"
                                            label="谐波使能"
                                            @change="handleHarmFlag($event, $index)"
                                        />
                                        <el-checkbox-button
                                            v-model="form.channelList[$index].inHarmFlag"
                                            label="间谐波使能"
                                            @change="handleHarmFlag($event, $index)"
                                        />
                                        <el-checkbox-button
                                            v-model="form.channelList[$index].flickerFlag"
                                            label="闪变使能"
                                            @change="handleHarmFlag($event, $index)"
                                        />
                                        <el-checkbox-button
                                            v-model="form.channelList[$index].dipFlag"
                                            label="暂态使能"
                                            @change="handleHarmFlag($event, $index)"
                                        />
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                    <el-tabs type="border-card" class="right-tabs" style="height: 100%">
                        <el-tab-pane label="全局设置菜单">
                            <!-- 全局设置菜单内容 -->
                            <div style="height: 295px; width: 170px">
                                <div class="form-item-container">
                                    <el-form-item label="频率：" prop="name">
                                        <div class="input-label-container">
                                            <el-input
                                                type="number"
                                                style="width: 100px"
                                                v-model="form.ffreq"
                                                onkeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
                                                @change="validateFreq"
                                            />
                                            <label>Hz</label>
                                        </div>
                                    </el-form-item>
                                </div>
                                <!-- <div class="button-label-container">
                                    <label>参考设定值列表:</label>
                                    <el-button type="primary" :icon="EditPen" @click="openDialog">编辑</el-button>
                                </div> -->
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div style="margin-top: 10px; height: 234px">
                    <el-tabs type="border-card" class="custom-tabs">
                        <el-tab-pane label="电压/电流编辑" v-if="childForm[0].channelFlag || childForm[1].channelFlag">
                            <TestScriptVolCurTab :childForm="childForm" :valueCode="valueCode" />
                        </el-tab-pane>
                        <el-tab-pane label="谐波编辑" v-if="childForm[0].harmFlag || childForm[1].harmFlag">
                            <TestScriptHarmTab :childForm="childForm" />
                        </el-tab-pane>
                        <el-tab-pane label="间谐波编辑" v-if="childForm[0].inHarmFlag || childForm[1].inHarmFlag">
                            <TestScriptInHarmTab :childForm="childForm" />
                        </el-tab-pane>
                        <el-tab-pane label="闪变编辑" v-if="childForm[0].flickerFlag || childForm[1].flickerFlag">
                            <TestScriptFlickerTab :childForm="childForm" />
                        </el-tab-pane>
                        <el-tab-pane label="暂态编辑" v-if="childForm[0].dipFlag || childForm[1].dipFlag">
                            <TestScriptDipTab :childForm="childForm" @setRetainTime="setRetainTime" />
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-carousel-item>
            <el-carousel-item :name="1" style="height: 100%; overflow-y: auto" v-if="showSetValueTable">
                <SetValueTable
                    ref="setValueTableRef"
                    :activeName="props.activeName"
                    :formContent="props.formContent"
                    :form="form"
                    :key="initial"
                    :valueCode="valueCode"
                    @recalculation="recalculation"
                />
            </el-carousel-item>
        </el-carousel>

        <template #footer>
            <div>
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="next" v-if="!showSetValueTable">下一步</el-button>
                <el-button type="primary" @click="previous" v-if="showSetValueTable">上一步</el-button>
                <el-button type="primary" @click="save" v-if="showSetValueTable">保存</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
import { onMounted, reactive, ref } from 'vue'
import SetValueTable from '@/views/machine/testScript/components/setValueTable.vue'
import { EditPen, ArrowDown, Bottom, CopyDocument } from '@element-plus/icons-vue'
import { type TabsInstance } from 'element-plus'
import TestScriptVolCurTab from '@/views/machine/testScript/components/testScriptVolCurTab.vue'
import TestScriptHarmTab from '@/views/machine/testScript/components/testScriptHarmTab.vue'
import TestScriptInHarmTab from '@/views/machine/testScript/components/testScriptInHarmTab.vue'
import TestScriptFlickerTab from '@/views/machine/testScript/components/testScriptFlickerTab.vue'
import TestScriptDipTab from '@/views/machine/testScript/components/testScriptDipTab.vue'
import { useDictStore } from '@/stores/modules/dict'
import { addScriptDtls } from '@/api/device/testScript'
import scriptForm from './scriptForm'
import { on } from 'events'

const emit = defineEmits(['addTab', 'close', 'getCommunication'])
const dictStore = useDictStore()
const props = defineProps({
    options: {
        type: [Array, Object],
        required: true
    },
    activeName: {
        type: String,
        required: true
    },
    childActiveName: {
        type: String,
        required: true
    },
    formContent: {
        type: [Object, Array],
        required: true
    },
    communicationList: {
        type: Array,
        required: true
    }
})
const copyRowList = ref({})
const key = ref(0)
// let  valueType
const showSetValueTable = ref(false)
const form: any = ref(JSON.parse(JSON.stringify(scriptForm)))
const childForm: any = ref([])
const ScriptValueType = ref('')
const initial = ref(0) //轮播图索引
const carouselRef = ref()
const setValueTableRef = ref()
const dialogVisible = ref(false)
const dialogTitle = ref()
const valueCode = ref('') //Absolute绝对值

const tableData = [
    { name: 'L1', frequency: 'Ua', type: 'V', electricity: 0, fphase: 0, sort: 0 },
    { name: 'L1', frequency: 'Ia', type: 'I', electricity: 0, fphase: 0, sort: 0 },
    { name: 'L2', frequency: 'Ub', type: 'V', electricity: 0, fphase: 0, sort: 1 },
    { name: 'L2', frequency: 'Ib', type: 'I', electricity: 0, fphase: 0, sort: 1 },
    { name: 'L3', frequency: 'Uc', type: 'V', electricity: 0, fphase: 0, sort: 2 },
    { name: 'L3', frequency: 'Ic', type: 'I', electricity: 0, fphase: 0, sort: 2 }
]

const tabChildren: any = ref([])
// 定义 span-method 逻辑
const arraySpanMethod = ({ rowIndex, columnIndex }: { rowIndex: number; columnIndex: number }) => {
    if (columnIndex === 0 || columnIndex === 3) {
        // 第一列
        if (rowIndex % 2 === 0) {
            return {
                rowspan: 2,
                colspan: 1
            }
        } else {
            return {
                rowspan: 0,
                colspan: 0
            }
        }
    }
}
const selectedRow = ref('')
const tableStyle = {
    cellStyle: ({ row }: { row: any }) => {
        return row.name === selectedRow.value
            ? { backgroundColor: '#dcdcdc' } // 设置选中行的背景颜色
            : {}
    }
}
const handleRowClick = async (row: any, column: any) => {
    if (column.label == '相别' || column.label == '操作') {
        childForm.value = []
        selectedRow.value = row.name
        childForm.value.push(form.value.channelList[row.sort * 2])
        childForm.value.push(form.value.channelList[row.sort * 2 + 1])
        console.log('🚀 ~ handleRowClick ~  childForm.value:', childForm.value)
    }

    // childForm.value = row
}

// 关闭弹窗
const close = () => {
    dialogVisible.value = false
    emit('close')
}
// 设置持续时间
const setRetainTime = (val: any) => {
    form.value.channelList.forEach((item: any) => {
        item.dipData.retainTime = val
    })
}

// 保存数据
const save = () => {
    let copyForm = handleHarmData()
    copyForm.checkDataList = setValueTableRef.value?.getTableData()
    if (copyForm.checkDataList.some(item => item.value === null || item.value === '')) {
        return ElMessage.warning({
            message: '请填写所有参考设定值',
            type: 'warning'
        })
    }
    addScriptDtls({ ...copyForm, scriptId: props.formContent.id, scriptType: props.activeName }).then(res => {
        if (res.code === 'A0000') {
            ElMessage.success({
                message: dialogTitle.value == '新增检测项目信息' ? '添加检测脚本成功!' : '编辑检测脚本成功!',
                type: 'success'
            })
            dialogVisible.value = false
            emit('addTab', form.value)
        }
    })
    // emit('addTab', form.value)
}
// 上一步
const previous = () => {
    carouselRef.value.setActiveItem(0)
    showSetValueTable.value = false
}
// 下一步
const next = () => {
    emit('getCommunication')
    setTimeout(() => {
        // 判断通讯脚本
        if (form.value.ffreq == '') {
            ElMessage.warning({
                message: '请填写频率!',
                type: 'warning'
            })
            return
        }
        let { flag, message } = checkFlags()
        // // 判断勾选通道
        if (!flag) {
            ElMessage.warning({
                message: message,
                type: 'warning'
            })
            return
        }

        showSetValueTable.value = true
        setTimeout(() => {
            setValueTableRef.value?.open(props.communicationList, copyRowList.value)

            carouselRef.value.setActiveItem(1)
        }, 100)
    }, 100)
    // 切换轮播图
}
// 重新计算
const recalculation = () => {
    setValueTableRef.value?.open(props.communicationList, {})
}

// 判断勾选通道
const checkFlags = () => {
    let list: any = []
    let flag = true
    let message = ''
    props.communicationList.forEach((item: any) => {
        list.push(...item.children.filter((item: any) => item.enable != 0 || item.errorFlag != 0))
    })

    for (const item of list) {
        switch (item.pname) {
            case '频率':
                flag = form.value.channelList.some(item => item.channelFlag == true)
                message = '请选择通道使能'
                break
            case '电压':
                if (
                    form.value.channelList[0].channelFlag == false &&
                    form.value.channelList[2].channelFlag == false &&
                    form.value.channelList[4].channelFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了电压,请选择电压通道使能' }

                break
            case '谐波电压':
                if (
                    form.value.channelList[0].harmFlag == false &&
                    form.value.channelList[2].harmFlag == false &&
                    form.value.channelList[4].harmFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了谐波电压,请选择谐波电压通道使能' }
                break
            case '谐波电流':
                if (
                    form.value.channelList[1].harmFlag == false &&
                    form.value.channelList[3].harmFlag == false &&
                    form.value.channelList[5].harmFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了谐波电流,请选择谐波电流通道使能' }
                break
            case '谐波有功功率':
                if (
                    form.value.channelList[0].harmFlag == false &&
                    form.value.channelList[1].harmFlag == false &&
                    form.value.channelList[2].harmFlag == false &&
                    form.value.channelList[3].harmFlag == false &&
                    form.value.channelList[4].harmFlag == false &&
                    form.value.channelList[5].harmFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了谐波有功功率,请选择间电压、电流谐波通道使能' }
                break
            case '间谐波电压':
                if (
                    form.value.channelList[0].inHarmFlag == false &&
                    form.value.channelList[2].inHarmFlag == false &&
                    form.value.channelList[4].inHarmFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了间谐波电压,请选择间谐波电压通道使能' }
                break
            case '间谐波电流':
                if (
                    form.value.channelList[1].inHarmFlag == false &&
                    form.value.channelList[3].inHarmFlag == false &&
                    form.value.channelList[5].inHarmFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了间谐波电流,请选择间谐波电流通道使能' }
                break
            case '暂态':
                if (
                    form.value.channelList[0].dipFlag == false &&
                    form.value.channelList[2].dipFlag == false &&
                    form.value.channelList[4].dipFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了暂态,请选择电压暂态通道使能' }
                break
            case '电流':
                if (
                    form.value.channelList[1].channelFlag == false &&
                    form.value.channelList[3].channelFlag == false &&
                    form.value.channelList[5].channelFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了电流,请选择电流通道使能' }
                break
            case '三相电压不平衡度':
                if (
                    form.value.channelList[0].channelFlag == false ||
                    form.value.channelList[2].channelFlag == false ||
                    form.value.channelList[4].channelFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了三相电压不平衡度,请选择电压A、B、C通道使能' }
                break
            case '三相电流不平衡度':
                if (
                    form.value.channelList[1].channelFlag == false ||
                    form.value.channelList[3].channelFlag == false ||
                    form.value.channelList[5].channelFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了三相电流不平衡度,请选择电流A、B、C通道使能' }
                break
            case '闪变':
                if (
                    form.value.channelList[0].flickerFlag == false &&
                    form.value.channelList[2].flickerFlag == false &&
                    form.value.channelList[4].flickerFlag == false
                )
                    return { flag: false, message: '通讯脚本中勾选了闪变,请选择电压闪变通道使能' }
                break
        }
    }

    for (let index = 0; index < form.value.channelList.length; index++) {
        const item = form.value.channelList[index]
        const result = checkChannelValues(item, index)

        if (!result.flag) {
            flag = result.flag
            message = result.message
            break // 如果发现错误，直接退出循环
        }
    }

    return { flag, message }
}
// 判断通道值
const checkChannelValues = (item: any, index: number) => {
    const channelNames = ['L1/Ua', 'L1/Ia', 'L2/Ub', 'L2/Ib', 'L3/Uc', 'L3/Ic']
    const channelName = channelNames[index] || ''

    // 检查通道使能
    if (item.channelFlag === false && (item.harmFlag || item.inHarmFlag || item.flickerFlag || item.dipFlag)) {
        return { flag: false, message: `请选择${channelName}通道使能` }
    }

    // 检查通道使能值
    if (item.channelFlag === true && (item.famp === '' || item.fphase === '')) {
        return { flag: false, message: '请填写通道使能值' }
    }

    // 检查谐波使能值
    if (item.harmFlag === true && item.harmList.filter(harm => harm.famp != 0 || harm.fphase != 0).length == 0) {
        return { flag: false, message: '请填写谐波使能值' }
    }

    // 检查间谐波使能值
    if (
        item.inHarmFlag === true &&
        item.inharmList.filter(harm => harm.inharm !== '' || harm.famp !== 0 || harm.fphase !== 0).length === 0
    ) {
        return { flag: false, message: '请填写间谐波使能值' }
    }

    // 检查闪变使能值
    if (
        item.flickerFlag === true &&
        (item.flickerData.fchagFre === '' || item.flickerData.fchagValue === '') &&
        index != 1 &&
        index != 3 &&
        index != 5
    ) {
        return { flag: false, message: '请填写闪变使能值' }
    }

    // 检查暂态使能值
    if (
        item.dipFlag === true &&
        (item.dipData.ftransValue === '' || item.dipData.retainTime === '') &&
        index != 1 &&
        index != 3 &&
        index != 5
    ) {
        return { flag: false, message: '请填写暂态使能值' }
    }

    return { flag: true, message: '' }
}
//处理谐波数据
const handleHarmData = () => {
    let copyForm = JSON.parse(JSON.stringify(form.value))

    copyForm.channelList.forEach((channel: any) => {
        // 筛选出 famp 和 fphase 不同时为 0 的对象
        channel.harmList = channel.harmList.filter((item: any) => item.famp != 0 || item.fphase != 0)
        channel.inharmList = channel.inharmList.filter(
            (item: any) => item.inharm !== '' || item.famp !== 0 || item.fphase !== 0
        )
    })
    return copyForm
}

// 打开弹窗，可能是新增，也可能是编辑
const open = (sign: string, row: any) => {
    dialogVisible.value = true
    valueCode.value = dictStore
        .getDictData('Script_Value_Type')
        .filter(item => item.id == props.formContent.valueType)[0].code
    dialogTitle.value = sign === 'add' ? '新增检测项目信息' : '编辑检测项目信息'
    // 添加选择检测项目
    tabChildren.value = JSON.parse(
        JSON.stringify(props.options.filter(item => item.value == props.activeName)[0].children || [])
    )

    // 判断是否存在 code 在 targetCodes 中
    const hasTargetCode = tabChildren.value.some(item =>
        ['Base_0_10', 'Base_20_85', 'Base_110_200'].includes(item.code)
    )
    if (hasTargetCode) {
        tabChildren.value.unshift({
            code: 'Base',
            label: '额定工作条件下的检测',
            value: '999999999999999999'
        })
        tabChildren.value = tabChildren.value.filter(
            item => item.code !== 'Base_0_10' && item.code !== 'Base_20_85' && item.code !== 'Base_110_200'
        )
    }

    // subType.value = tabChildren.value[0].code || ''
    if (sign == 'add') {
        form.value.subType =
            props.childActiveName == ''
                ? JSON.parse(JSON.stringify(tabChildren.value[0].code)) || ''
                : JSON.parse(JSON.stringify(props.childActiveName))

        if (valueCode.value == 'Absolute') {
            form.value.channelList.forEach((item: any) => {
                item.famp = 0
                item.fphase = 0
            })
        }
    } else {
        form.value = JSON.parse(JSON.stringify(row))
        copyRowList.value = JSON.parse(JSON.stringify(row))
    }
    if (['Base_0_10', 'Base_20_85', 'Base_110_200'].includes(form.value.subType)) {
        form.value.subType = 'Base'
    }

    handleRowClick({ name: 'L1', sort: 0 }, { label: '相别' })
    dictStore.getDictData('Script_Value_Type')
    //console.log('🚀 ~ open ~ tabChildren.value:', tabChildren.value)
}

// 判断后台没有谐波，简谐波值 用于回显

const setharmList = (row: any) => {
    row.channelList.forEach((item: any) => {
        if (item.inharmList.length == 0) {
            item.inharmList.push({ inharm: '', famp: 0, fphase: 0 })
        }
    })

    return row
}
// 复制
const copyRow = (num: number, index: number) => {
    form.value.channelList[index] = JSON.parse(JSON.stringify(form.value.channelList[num]))
    form.value.channelList[index + 1] = JSON.parse(JSON.stringify(form.value.channelList[num + 1]))
    form.value.channelList[0].channelType = 'Ua'
    form.value.channelList[1].channelType = 'Ia'
    form.value.channelList[2].channelType = 'Ub'
    form.value.channelList[3].channelType = 'Ib'
    form.value.channelList[4].channelType = 'Uc'
    form.value.channelList[5].channelType = 'Ic'
    key.value += 1
    ElMessage.success({
        message: '复制成功!',
        type: 'success'
    })
}

const validateFreq = () => {
    if (form.value.ffreq < 40) {
        ElMessage.warning('频率不能低于40Hz')
        form.value.ffreq = 40
    } else if (form.value.ffreq > 60) {
        ElMessage.warning('频率不能高于60Hz')
        form.value.ffreq = 60
    }
}
// 点击使能按钮
const handleHarmFlag = (e: boolean, i: number) => {
    if (e) {
        form.value.channelList[i].channelFlag = true
    }
}

// 打开 drawer(新增、编辑)
const openDialog = () => {}

// 对外映射
defineExpose({ open })
</script>

<style scoped>
.dialog-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

.tabs-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.left-tabs {
    width: 900px;
    margin: 0 10px; /* 可选：添加间距 */
}

.right-tabs {
    flex: 1;
}

.form-item-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    margin-bottom: 10px; /* 可选：添加间距 */
}

.button-label-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.button-label-container label {
    margin-right: 10px; /* 按钮和文字之间的距离 */
}
.input-label-container {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
}

.input-label-container label {
    margin-left: 5px; /* 添加标签与输入框之间的间距 */
}
:deep(.el-carousel__indicators) {
    display: none !important;
}
:deep(.el-carousel__arrow) {
    display: none !important;
}
:deep(.el-tabs--border-card > .el-tabs__content) {
    padding: 10px;
}
:deep(.el-table__body) {
    border-top: var(--el-table-border);
}
:deep(.el-checkbox-button.is-disabled .el-checkbox-button__inner) {
    background-color: var(--el-color-primary);
    color: var(--el-color-white);
}
</style>