<script setup>
|
import { ref, reactive, onMounted, computed, onActivated } from "vue";
|
import YcTree from "./ycTree.vue";
|
import getQueryString from "@/utils/getQueryString";
|
import pinyinMatch from 'pinyin-match';
|
|
import {
|
getStationTree,
|
} from '@/api/station.js';
|
|
import getTreeDataByKey from "@/utils/getTreeDataByKey";
|
|
const emit = defineEmits(["leaf-click"]);
|
const flag = ref(Math.random());
|
const treeFlag = ref(0);
|
const defaultExpandedKeys = ref([
|
getQueryString("stationId"),
|
]);
|
|
|
|
const currentNodeKey = ref(getQueryString("battgroupId") || getQueryString("powerId") || "");
|
const expanded = ref([]);
|
const currentKey = ref('');
|
|
const filterText = ref("");
|
const treeData = ref([]);
|
const siteList = ref([]);
|
const siteListCopy = ref([]);
|
const treeRef = ref(null);
|
|
const getCurrentKey = computed(() => {
|
return currentNodeKey.value ? currentNodeKey.value : currentKey.value;
|
});
|
|
const expandedKeys = computed(() => {
|
// let parentKey = defaultExpandedKeys.value.join('-');
|
let parentKey = defaultExpandedKeys.value[0];
|
if (parentKey) {
|
return [parentKey];
|
} else {
|
let _expanded = expanded.value;
|
return _expanded;
|
}
|
});
|
|
function filterMethod(val) {
|
if (val) {
|
siteList.value = siteListCopy.value.filter((item) => {
|
return pinyinMatch.match(item, val);
|
});
|
} else {
|
siteList.value = siteListCopy.value;
|
}
|
}
|
|
const hideFlag = ref(false);
|
|
function toggleChange() {
|
// emit("toggleChange");
|
hideFlag.value = !hideFlag.value;
|
}
|
|
function filterChange(val) {
|
if (val) {
|
let homeInfo = siteListCopy.value.filter(v => v.id == val);
|
|
if (homeInfo.length) {
|
let item = homeInfo[0];
|
defaultExpandedKeys.value = [item.id];
|
|
let expandedNode = getTreeDataByKey(expandedKeys.value[0], treeData.value, 'key');
|
if (expandedNode != -1) {
|
expanded.value = [expandedNode.key];
|
currentNodeKey.value = expandedNode.children[0].isleaf ? expandedNode.children[0].key : expandedNode.children[0].children[0].key;
|
leafClick(expandedNode.children[0].isleaf ? expandedNode.children[0] : expandedNode.children[0].children[0]);
|
}
|
}
|
}
|
}
|
|
function nodeClick(data) {
|
// console.log('nodeClick', data, '=============');
|
|
}
|
|
function leafClick(data) {
|
console.log('leafClick', data, '=============');
|
emit('leaf-click', data);
|
}
|
|
async function getSiteList() {
|
let { code, data, data2 } = await getStationTree();
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
formatData(list);
|
|
}
|
|
function formatData(list) {
|
let sites = [];
|
list.forEach(v => {
|
let pro = v.provice;
|
let citys = v.cityList;
|
v.label = pro;
|
v.key = pro;
|
v.children = citys;
|
citys.forEach(v1 => {
|
let city = v1.city;
|
let countries = v1.countryList;
|
v1.label = city;
|
v1.key = city;
|
v1.children = countries;
|
|
countries.forEach(v2 => {
|
let country = v2.country;
|
let _list = v2.stationList;
|
v2.label = country;
|
v2.key = country;
|
v2.children = _list;
|
_list.forEach(v3 => {
|
v3.label = v3.stationName;
|
v3.key = v3.stationId;
|
let powerList = v3.pinflist;
|
v3.children = powerList;
|
sites.push({
|
label: `${pro}-${city}-${country}-${v3.stationName}`,
|
id: v3.stationId,
|
data: {
|
provice: pro,
|
city: city,
|
country: country,
|
stationName: v3.stationName,
|
children: powerList
|
}
|
});
|
powerList.forEach(v4 => {
|
v4.label = v4.powerName;
|
v4.key = `${v4.stationId}-${v4.powerId}`;
|
v4.children = v4.battList;
|
v4.isleaf = !v4.battList.length;
|
|
v4.battList.forEach(v5 => {
|
v5.label = `${v5.devName}-${v5.battgroupName}`;
|
v5.key = `${v5.stationId}-${v5.powerId}-${v5.devId}-${v5.battgroupId}`;
|
v5.isleaf = true;
|
});
|
});
|
});
|
});
|
});
|
});
|
|
siteListCopy.value = sites.map(v => v);
|
treeData.value = list;
|
if (sites.length) {
|
let expandedNode = getTreeDataByKey(sites[0].id, treeData.value, 'key');
|
if (expandedNode != -1) {
|
expanded.value = [expandedNode.key];
|
let selectKey = expandedNode.children[0].isleaf ? expandedNode.children[0].key : expandedNode.children[0].children[0].key;
|
currentNodeKey.value = selectKey;
|
let res = getTreeDataByKey(selectKey, treeData.value, 'key');
|
|
leafClick(res);
|
// leafClick(expandedNode.children[0].isleaf ? expandedNode.children[0] : expandedNode.children[0].children[0]);
|
}
|
}
|
}
|
|
function updateSelect() {
|
let stationId = getQueryString("stationId");
|
let powerId = getQueryString("powerId");
|
let battgroupId = getQueryString("battgroupId");
|
let devId = getQueryString("devId");
|
if (stationId) {
|
let expandedNode = getTreeDataByKey(stationId, treeData.value, 'key');
|
console.log('expandedNode', expandedNode, '=============');
|
|
if (expandedNode != -1) {
|
expanded.value = [expandedNode.key];
|
// 根据不同情况选中要打开的叶子节点
|
// 如果只有stationId 则打开stationId的第一个powerId 或下面的 的第一个battgroupId
|
// 如果有powerId 1,电源是叶子节点 则打开这个对应的电源 2,电源不是叶子节点 a,如果只有设备id 则打开电源childern的第一个等于则设备id的电池组 b,如果有battgroupId 则打开这个对应的电池组 c,如果有devId 则打开电源下第一个电池组
|
let selectKey = '';
|
if (powerId) {
|
// 电源节点
|
let powerNode = getTreeDataByKey(`${stationId}-${powerId}`, treeData.value, 'key');
|
if (powerNode.isleaf) {
|
selectKey = powerNode.key;
|
} else {
|
if (battgroupId) {
|
selectKey = `${stationId}-${powerId}-${devId}-${battgroupId}`;
|
} else if (devId) {
|
selectKey = powerNode.children.filter(v => v.devId == devId)[0].key;
|
} else {
|
selectKey = powerNode.children[0].key;
|
}
|
}
|
} else {
|
selectKey = expandedNode.children[0].isleaf ? expandedNode.children[0].key : expandedNode.children[0].children[0].key;
|
}
|
currentNodeKey.value = selectKey;
|
|
// console.log('currentKey', currentKey.value, 'expanded', expanded.value, 'getCurrentKey', getCurrentKey.value, '=============');
|
treeFlag.value = Math.random();
|
let res = getTreeDataByKey(selectKey, treeData.value, 'key');
|
// console.log('res', res, '=============');
|
|
|
leafClick(res);
|
}
|
}
|
}
|
|
onActivated(async () => {
|
if (!treeData.value.length) {
|
await getSiteList();
|
}
|
let pageFlag = getQueryString("pageFlag");
|
console.log('pageFlag', pageFlag, flag.value, '=============');
|
|
if (pageFlag &&pageFlag != flag.value) {
|
updateSelect();
|
flag.value = pageFlag;
|
}
|
});
|
|
|
onMounted(() => {
|
getSiteList();
|
});
|
|
</script>
|
|
<template>
|
<card
|
title="站点列表"
|
:class="['site-list', { 'hide': hideFlag }]"
|
>
|
<flex-layout>
|
<template v-slot:header>
|
<el-select
|
size="small"
|
v-model="filterText"
|
class="search"
|
filterable
|
clearable
|
:filter-method="filterMethod"
|
placeholder="请选择"
|
@change="filterChange"
|
>
|
<el-option
|
v-for="(item, idx) in siteList"
|
:key="'site_' + idx"
|
:label="item.label"
|
:value="item.id"
|
/>
|
</el-select>
|
</template>
|
<yc-tree
|
ref="treeRef"
|
:data="treeData"
|
:key="treeFlag"
|
:default-expand-keys="expandedKeys"
|
:current-node-key="getCurrentKey"
|
@node-click="nodeClick"
|
@leaf-click="leafClick"
|
></yc-tree>
|
</flex-layout>
|
<div class="btn" @click="toggleChange">
|
<svg-icon icon-class="arrow"></svg-icon>
|
</div>
|
</card>
|
</template>
|
|
<style scoped lang="less">
|
.site-list {
|
width: 320px;
|
position: relative;
|
transition: all 0.5s ease;
|
.btn {
|
display: flex;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
width: 30px;
|
height: 80px;
|
background: rgba(0, 0, 0, 0.5);
|
cursor: pointer;
|
transform: translateY(-50%) rotate(180deg);
|
transform-origin: center center;
|
transition: all 0.5s ease;
|
align-items: center;
|
justify-content: center;
|
|
}
|
&.hide {
|
transform: translate(-100%, 0);
|
margin-right: -320px;
|
.btn {
|
right: -8px;
|
transform: translate(100%, -50%) rotate(0deg);
|
}
|
}
|
:deep(.flex-layout-header) {
|
padding: 6px 10px;
|
}
|
}
|
</style>
|
