scd_tools_ui/src/pages/netStructPicture/components/CidTree.vue

<template>
    <div>
        <div class="bigBox">
            <div class="tagBox">
                <div style="display: flex;justify-content: flex-start;align-items: center;">
                    <div>
                        <img style="width: 20px;height: 20px;" src="../../../assets/icon/HardDrives.png" alt="">
                    </div>
                    <div>
                        <h3>装置列表</h3>
                    </div>
                </div>
                <p :class="tagChoose == index ? 'result' : 'tagP'" v-for="(item, index) in tagList"
                    @click="tagClick(item, index)">
                    {{ item.desc }}
                </p>
            </div>
            <div class="setting">
                <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
        </div>
    </div>
</template>

<script>
import { ref, onMounted, toRefs, watch } from 'vue';
import cid from "@/api/cid/cid"
import scdCheck from '@/api/scdCheck/scdCheck';
import { stringify } from 'uuid';
export default {
    props: {
        nowScdId: {
            type: Number || String,
            required: true
        }
    },
    setup(props, { emit }) {
        let tagList = ref([])
        let tagChoose = ref(0)
        let treeData = ref([
            {
                label: "通信参数部分",
                children: [
                    {
                        label: "站控层通信参数"
                    },
                    {
                        label: "GOOSE通信参数"
                    },
                    {
                        label: "SV通信参数"
                    }
                ]
            }, {
                label: "测点信息部分",
                children: [
                    {
                        label: "信息部分-1"
                    }
                ]
            }, {
                label: "回路配置",
                children: [
                    {
                        label: "回路配置-1"
                    }
                ]
            }, {
                label: "建模信息",
                children: [
                    {
                        label: "建模信息-1"
                    }
                ]
            }
        ])
        let needName = ref('')
        let defaultProps = ref({
            label: "label",
            children: "children"
        })
        let scdId = ref("")//传递的scdid
        watch(() => props.nowScdId, (newVal) => {
            scdId.value = newVal
        })
        function reload() {
            scdId.value = props.nowScdId
            cid.getAll({ scd_id: scdId.value - 0, ied_name: "" }).then(res => {
                tagList.value = res.data
            })
        }
        function tagClick(row, num) {
            tagChoose.value = num
            cid.findFile({
                scd_id: scdId.value - 0,
                ied_name: row.desc,
                pageno: 1,
                pagesize: 10,
                station_id: 861
            }).then(res => {
                console.log(res, '文件');
            })
            scdCheck.lookCheck({
                pageindex: 1,
                pagesize: 10,
                station_id: 861,
                scd_id: scdId.value - 0,
                is_checkin: 2,
                ied_name: row.ied_name
            }).then(res => {
                let a = res.data.filter(item => item.type_name == 'CID')
                if (a.length > 0) {
                    needName.value = a[0].file_name
                    emit('treeBack', needName.value, a[0].id)
                }
            })
        }
        function handleNodeClick(e) {
            console.log(e, 'eee');
        }
        onMounted(() => {
            reload()
        })
        return {
            tagList,//标签数据
            tagChoose,//标签点击事件
            treeData,//树形数据
            tagClick,//tag点击事件
            defaultProps,//树形默认展示
            handleNodeClick,//树形点击事件
            needName,//返回父组件的名称
            scdId,//传递的scdid
        }
    }
}
</script>

<style scoped>
p,
h3 {
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 100%;
    height: calc(100vh - 270px);
    border: 1px solid #A3ADE0;
    cursor: pointer;
    /* margin-left: 25px; */
}

.tagBox {
    width: 95%;
    height: calc(100vh - 550px);
    /* border: 1px solid green; */
    border-bottom: 1px solid #A3ADE0;
    margin: 0 auto;
    overflow-y: auto;
}

.tagP {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 5px;
    font-size: 16px;
}

.result {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* background-color: #A3ADE0; */
    color: #255CE7;
    margin-top: 5px;
    font-size: 16px;
}

.setting {
    width: 95%;
    height: calc(100vh - 670px);
    /* border: 1px solid skyblue; */
    margin: 2px auto;
}
</style>