123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <template>
- <div>
- <div class="bigBox">
- <el-dialog v-loading="loading" v-model="dialogVisible" title="选择模型" width="30%" @close="sureclose" :close-on-click-modal="false">
- <el-tree ref="treeRef" :data="treeData" style="height: calc(100vh - 500px);overflow-y: auto;" show-checkbox
- node-key="id" @check-change="handleCheckChange" :check-strictly="true" default-expand-all
- :expand-on-click-node="false" :props="defaultProps" />
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="cleanBox">取消</el-button>
- <el-button type="primary" @click="sureArr">
- 确认
- </el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- <div id="lord" v-loading="loading" element-loading-text="加载数据中"
- style="width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;z-index: 3000;">
- </div>
- </div>
- </template>
- <script>
- import { ref, onMounted, toRefs, watch } from 'vue';
- import litLine from '@/api/litLine';
- import systemRow from '@/api/systemRow';
- import { ElLoading } from 'element-plus';
- export default {
- props: {
- treeMool: {
- type: Boolean,
- required: true
- },
- treeNeed: {
- type: Array,
- required: true,
- }
- },
- setup(props, { emit }) {
- let loading = ref(true)
- let treeData = ref([
- ])
- let defaultProps = ref({
- label: "model_name",
- children: "children",
- id: "id"
- })
- let result = props.treeMool
- let mdId = ref([])//模型id
- let mdName = ref([])
- let { cleanBox, sureArr } = toRefs(props)
- let dialogVisible = ref(false)
- let checkKey = ref([])//默认选中的key
- let treeRef = ref(null)
- watch(() => props.treeNeed, (newVal) => {
- checkKey.value = newVal
- })
- function reload() {
- if (props.treeNeed&&treeRef.value) {
- checkKey.value = props.treeNeed
- }
- }
- function getLine() {
- let lord = document.getElementById("lord")
- loading.value = true
- let level = [] // 电压等级
- let line = [] // 接线方式
- let mine = [] // 所有模型
- dialogVisible.value = result
- // 用 Promise.all 等待所有异步操作完成
- Promise.all([
- litLine.getAllLine({ pageno: 1, pagesize: 30 }),
- litLine.getAllm({ pageno: 1, pagesize: 100 }),
- systemRow.getChildren({ code: "voltage_level" })
- ]).then(([lineRes, mineRes, levelRes]) => {
- line = lineRes.data
- mine = mineRes.data
- level = levelRes.data
- if (level.length > 0 && line.length > 0 && mine.length > 0) {
- let a = level.map(item => {
- let filteredLine = line.filter(param => item.name === param.vol_level_name);
- if (filteredLine.length > 0) {
- let children = filteredLine.map(filteredItem => {
- let filteredMine = mine.filter(mineItem => mineItem.line_link_style_name === filteredItem.name);
- return {
- model_name: filteredItem.name,
- children: filteredMine
- };
- });
- return {
- model_name: item.name,
- children
- };
- }
- return null;
- }).filter(item => item !== null);
- treeData.value = a
- loading.value = false
- lord.style.display = 'none'
- }
- }).catch(error => {
- // 处理错误
- console.error("Error:", error);
- });
- }
- function handleCheckChange(e) {
- const id = e.id;
- const model_name = e.model_name;
- if (!mdId.value.includes(id)) {
- mdId.value.push(id);
- mdName.value.push(model_name);
- } else {
- const idIndex = mdId.value.indexOf(id);
- mdId.value.splice(idIndex, 1);
- mdName.value.splice(idIndex, 1);
- }
- emit("treeNum", mdId.value, mdName.value);
- }
- function getBack() {
- dialogVisible.value = false
- emit("treeBack", dialogVisible.value)
- }
- function nowBack() {
- dialogVisible.value = false
- emit("treeBack", dialogVisible.value)
- }
- function sureclose() {
- dialogVisible.value = false
- emit("treeBack", dialogVisible.value)
- }
- onMounted(() => {
- getLine()
- reload()
- })
- return {
- treeData,
- dialogVisible,
- cleanBox: getBack,
- sureArr: nowBack,
- sureclose,
- getLine,
- result,
- defaultProps,
- handleCheckChange,
- mdName,
- loading,
- checkKey,
- treeRef,
- }
- }
- }
- </script>
- <style scoped>
- .is-penultimate>.el-tree-node__content {
- color: #626aef;
- }
- .el-tree-node.is-expanded.is-penultimate>.el-tree-node__children {
- display: flex;
- flex-direction: row;
- }
- .is-penultimate>.el-tree-node__children>div {
- width: 25%;
- }
- /* :deep(.el-tree-node.is-expanded>.el-tree-node__children) {
- display: flex;
- flex-wrap: wrap;
- } */
- </style>
|