scd_tools_ui/src/pages/system/components/LineTree.vue

<template>
    <div>
        <div class="traBox">
            <span
                style="line-height: 22px;height: 22px;float: left;width: 92%;margin: 4%;font-weight: bold;border-bottom: 1px solid #e4e2e2;">
                <img style="width: 20px;height: 20px;margin-right: 5px;float: left;" src="../../../assets/icon/pice_set.png"
                    alt="">
                <span style="float: left;">接线方式</span>
            </span>
            <el-tree v-if="vif" node-key="id" style="float: left;width: 100%;margin: 0 auto;background-color: #F7F8FB;"
                :data="lineData" :props="defaultProps" @node-click="handleNodeClick" />
            <el-tree v-else node-key="id" style="float: left;width: 100%;margin: 0 auto;background-color: #F7F8FB;"
                :data="lineData" :props="defaultProps" @node-click="handleModelNodeClick" ref="tree2">
                <template #default="{ node, data }">
                    <span>
                        <!-- 正常情况 -->
                        <span v-if="data.datatype == 'linkstyle'"><img
                                style="width: 20px;height: 20px;margin-right: 5px;float: left;"
                                src="../../../assets/icon/pice_set.png" alt="" /></span>
                        <span>
                            {{ node.label }}
                        </span>
                    </span>
                </template>
            </el-tree>
            <!--
            <p v-else v-for="(item,index) in pList" :class="selectIndex == index?'result':'chooseP'" @click="pClick(item,index)">
                    {{ item.name }}
            </p>
            -->
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue'
import litLine from '@/api/litLine'
import systemRow from '@/api/systemRow';
import LitLine from './LitLine.vue';
import { ElMessage } from 'element-plus';
export default {
    props: {
        selectIndex: {
            type: Number,
            required: true
        }
    },
    setup(props, { emit }) {
        let lineData = ref([])//树形数据
        let defaultProps = ref({
            children: "children",
            label: "name",
            id: 'id'
        })
        let pushList = ref([])
        let result = ref(0)
        let pList = ref([])
        let selectIndex = ref(null)
        let vif = ref(true)
        let loading = ref(false)
        watch(() => props.selectIndex, (newVal) => {
            result.value = newVal
            searchFlashLel()
        })
        function searchLine() {
            if (props.selectIndex == 0) {
                litLine.getLineModel({ pageno: 1, pagesize: 99999 }).then(res => {
                    // console.log(res, '987res');
                })
            }
        }
        function searchFlashLel() {//拿到电压等级
            systemRow.getChildren({ code: "voltage_level" }).then(res => {
                vif.value = true
                if (props.selectIndex == 1) {
                    vif.value = false
                    // 获取每个电压等级下的接线方式
                    litLine.getAllLine({ pageno: 1, pagesize: 99999 }).then(res2 => {
                        for (let i = 0; i < res2.data.length; i++) {
                            const vol_level_id = res2.data[i].vol_level_id
                            res.data.filter((item) => {
                                if (item.id == vol_level_id) {
                                    res2.data[i]['datatype'] = 'linkstyle'
                                    item['children'] == null ? item['children'] = [res2.data[i]] : item['children'].push(res2.data[i])
                                    return item
                                }
                            })
                        }
                        lineData.value = res.data
                    })
                } else {
                    lineData.value = res.data
                }
            })
        }
        function handleNodeClick(e) {
            litLine.getAllLine({ pageno: 1, pagesize: 99999, vol_id: e.id - 0 }).then(res => {
                // console.log(res, 'asdasdasd');
                if (res.code == 0) {
                    loading.value = true
                    emit("lineBack", loading.value)
                    pushList.value = res.data
                    emit("listBack", res.data)
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function handleModelNodeClick(e) {
            // 模型管理       
            if (e.datatype === 'linkstyle') {
                // 接线方式
                litLine.getAllm({ pageno: 1, pagesize: 99999, line_link_style: e.id }).then(res => {
                    if (res.code == 0) {
                        loading.value = true
                        emit("lineBack", loading.value)
                        emit("listBack", res.data, e.id)
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            } else {
                // 电压等级
                litLine.getAllm({ pageno: 1, pagesize: 99999, vol_id: e.id }).then(res => {
                    if (res.code == 0) {
                        loading.value = true
                        emit("lineBack", loading.value)
                        emit("volBack", res.data, e.id)
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: "error"
                        })
                    }
                })
            }
        }
        function pClick(row, num) {
            selectIndex.value = num
            litLine.getAllLine({ pageno: 1, pagesize: 99999, vol_id: row.id - 0 }).then(res => {
                if (res.code == 0) {
                    pushList.value = res.data
                    emit("listBack", pushList.value, row.id)
                }
            })
        }
        onMounted(() => {
            searchLine()
            searchFlashLel()
        })
        return {
            lineData,//树形数据
            searchLine,//获取数据
            defaultProps,
            searchFlashLel,
            handleNodeClick,
            handleModelNodeClick,
            pushList,
            result,
            pList,
            selectIndex,
            pClick,
            vif,
            loading,
        }
    },
    components: {
        LitLine
    }
}
</script>

<style scoped>
.traBox {
    text-align: center;
}

.result {
    font-size: 12px;
    color: #5D7FDA;
}

.chooseP {
    font-size: 12px;
}

.el-tree {
    --el-tree-node-content-height: 32px;
    --el-tree-node-hover-bg-color: #b2b4ef80 !important;
}

.el-tree-node:hover {
    background-color: #b2b4ef80 !important;
    color: #fff;
}

.is-current {
    background: #b2b4ef !important;
    color: #fff !important;
    font-weight: bold;
}
</style>