master
“yu”
parent
b822d3f3a8
commit
b21c6ec18e
|
|
@ -8,16 +8,27 @@
|
|||
</div> -->
|
||||
<div class="source_tree">
|
||||
<div class="tree">
|
||||
<el-tree ref="targetTreeRef" :data="treeData" node-key="id" :props="targetProps" :default-expanded-keys="['tongxiang']" lazy :load="loadNode" @node-click="handleTargetInfo"></el-tree>
|
||||
<el-tree
|
||||
ref="targetTreeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="false"
|
||||
empty-text="数据读取中..."
|
||||
:props="targetProps"
|
||||
:default-expanded-keys="['tongxiang']"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
@node-click="handleTargetInfo"
|
||||
></el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { ElTree } from 'element-plus'
|
||||
import treeDatas from '@/assets/json/tree-right2.json'
|
||||
import { treeT, treeSecond, carTree_api } from '@/api/ajust/tree'
|
||||
import { onMounted, ref, watch } from "vue";
|
||||
import { ElTree } from "element-plus";
|
||||
import treeDatas from "@/assets/json/tree-right2.json";
|
||||
import { treeT, treeSecond, carTree_api } from "@/api/ajust/tree";
|
||||
|
||||
// defineProps<{
|
||||
// elec_list: EList[]
|
||||
|
|
@ -29,55 +40,55 @@ import { treeT, treeSecond, carTree_api } from '@/api/ajust/tree'
|
|||
|
||||
// idflag样式
|
||||
// let idFlag = ref<number>(1)
|
||||
const label_falg = ref<number>(1)
|
||||
const label_falg = ref<number>(1);
|
||||
//通过判断(源网荷储的小标题)的labelFlag值调不同的树数据
|
||||
const labelFlag = (id: number) => {
|
||||
label_falg.value = id
|
||||
label_falg.value = id;
|
||||
if (id == 1) {
|
||||
} else if (id == 2) {
|
||||
} else if (id == 3) {
|
||||
} else {
|
||||
}
|
||||
}
|
||||
};
|
||||
// el-tree相关配置
|
||||
// 默认展开节点id
|
||||
// let defaultExpanded = ref<string[]>(['tongxiang'])
|
||||
// 默认展开指定数据
|
||||
// label childern等数据的配置
|
||||
const targetProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
isLeaf: 'leaf'
|
||||
}
|
||||
children: "children",
|
||||
label: "name",
|
||||
isLeaf: "leaf",
|
||||
};
|
||||
// tree数据处理
|
||||
interface Tree {
|
||||
baseVoltageMrid?: string
|
||||
name?: string
|
||||
leaf?: boolean
|
||||
children?: Tree[]
|
||||
baseVoltageMrid?: string;
|
||||
name?: string;
|
||||
leaf?: boolean;
|
||||
children?: Tree[];
|
||||
}
|
||||
|
||||
// json数据
|
||||
interface TreeData {
|
||||
name: string
|
||||
key?: string
|
||||
leaf?: boolean
|
||||
children?: TreeData[]
|
||||
[otherProps: string]: any
|
||||
name: string;
|
||||
key?: string;
|
||||
leaf?: boolean;
|
||||
children?: TreeData[];
|
||||
[otherProps: string]: any;
|
||||
}
|
||||
let treeDate = ref<Tree[]>([
|
||||
{
|
||||
baseVoltageMrid: '',
|
||||
name: '',
|
||||
children: []
|
||||
}
|
||||
])
|
||||
baseVoltageMrid: "",
|
||||
name: "",
|
||||
children: [],
|
||||
},
|
||||
]);
|
||||
|
||||
// 判断是否有该节点
|
||||
onMounted(() => {
|
||||
// initTreeAPI();
|
||||
})
|
||||
let treeData = ref<any>([])
|
||||
});
|
||||
let treeData = ref<any>([]);
|
||||
// let initTreeDate: any = [];
|
||||
// // 初始化设备树的层级
|
||||
// const initTreeAPI = async () => {
|
||||
|
|
@ -91,15 +102,15 @@ let treeData = ref<any>([])
|
|||
const loadNode = async (node: any, resolve: any) => {
|
||||
//默认加载的节点
|
||||
if (node.level === 0) {
|
||||
let treeData = []
|
||||
let treeData = [];
|
||||
let result = await carTree_api({
|
||||
orgID: '8af8470a47aad8e20147aad92e400335'
|
||||
})
|
||||
treeData = result.data
|
||||
resolve(treeData)
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
});
|
||||
treeData = result.data;
|
||||
resolve(treeData);
|
||||
} else if (node.level > 0 && node.level < 4) {
|
||||
//默认展开的层级,需要默认几层就判断一下.
|
||||
resolve(node.data.children)
|
||||
resolve(node.data.children);
|
||||
} else if (node.level === 4) {
|
||||
// 利用设备中的信息调用接口
|
||||
// ---------
|
||||
|
|
@ -107,58 +118,58 @@ const loadNode = async (node: any, resolve: any) => {
|
|||
// ---------
|
||||
//懒加载
|
||||
let res = await treeSecond({
|
||||
orgID: '8af8470a47aad8e20147aad92e400335',
|
||||
transformId: node.key
|
||||
})
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
transformId: node.key,
|
||||
});
|
||||
if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
|
||||
let datanames = []
|
||||
let datanames = [];
|
||||
|
||||
if (res.data.energySupplyStation.length) {
|
||||
datanames.push({
|
||||
name: `充电站(${res.data.energySupplyStation.length})`,
|
||||
id: 'chongdianzhan'
|
||||
})
|
||||
id: "chongdianzhan",
|
||||
});
|
||||
}
|
||||
|
||||
if (res.data.dwellerPile.length) {
|
||||
datanames.push({
|
||||
name: `居民充电桩(${res.data.dwellerPile.length})`,
|
||||
id: 'chongdianzhuang'
|
||||
})
|
||||
id: "chongdianzhuang",
|
||||
});
|
||||
}
|
||||
resolve(datanames)
|
||||
resolve(datanames);
|
||||
} else {
|
||||
resolve([{ name: '暂无数据', leaf: true }])
|
||||
console.log(res) //需要将上一级的加号去掉
|
||||
resolve([{ name: "暂无数据", leaf: true }]);
|
||||
console.log(res); //需要将上一级的加号去掉
|
||||
}
|
||||
} else if (node.level === 5) {
|
||||
//懒加载
|
||||
let res = await treeSecond({
|
||||
orgID: '8af8470a47aad8e20147aad92e400335',
|
||||
transformId: node.parent.key
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
transformId: node.parent.key,
|
||||
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
||||
})
|
||||
});
|
||||
|
||||
if (node.key === 'chongdianzhan') {
|
||||
if (node.key === "chongdianzhan") {
|
||||
if (res.data.energySupplyStation.length) {
|
||||
resolve(
|
||||
res.data.energySupplyStation.map(item => ({
|
||||
res.data.energySupplyStation.map((item) => ({
|
||||
id: item.mrid,
|
||||
name: item.name,
|
||||
type: item.type
|
||||
type: item.type,
|
||||
}))
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
if (node.key === 'chongdianzhuang') {
|
||||
if (node.key === "chongdianzhuang") {
|
||||
if (res.data.dwellerPile.length) {
|
||||
resolve(
|
||||
res.data.dwellerPile.map(item => ({
|
||||
res.data.dwellerPile.map((item) => ({
|
||||
id: item.mrid,
|
||||
name: item.name,
|
||||
type: item.type
|
||||
type: item.type,
|
||||
}))
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -170,26 +181,26 @@ const loadNode = async (node: any, resolve: any) => {
|
|||
// },
|
||||
// ]);
|
||||
} else {
|
||||
resolve([{ name: '暂无数据', leaf: true }])
|
||||
resolve([{ name: "暂无数据", leaf: true }]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const emits = defineEmits(['update-node-key']) ////接收父组件的事件，子组件中触发父组件使用
|
||||
const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
|
||||
|
||||
// 点击树节点
|
||||
// 处理选中target数据，最终得到由高层到底层的数组
|
||||
const handleTargetInfo = (data: TreeData, node: any) => {
|
||||
console.log(node, 'node')
|
||||
console.log(node, "node");
|
||||
|
||||
emits('update-node-key', node)
|
||||
}
|
||||
emits("update-node-key", node);
|
||||
};
|
||||
const handleTarget = (node: any) => {
|
||||
// 递归得到target结果数组
|
||||
if (!node.parent) return
|
||||
if (!node.parent) return;
|
||||
|
||||
// targetInfo.resultArr.unshift(node.data);
|
||||
// handleTarget(node.parent);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@function changeWidth($width) {
|
||||
|
|
@ -313,9 +324,9 @@ const handleTarget = (node: any) => {
|
|||
// el-input中图标设置大小
|
||||
/* //有子节点 且未展开 */
|
||||
:deep(.el-tree .el-tree-node.is-focusable .el-tree-node__expand-icon:before) {
|
||||
background: url('@/assets/images/tree/icon_off.png') no-repeat 0 3px;
|
||||
background: url("@/assets/images/tree/icon_off.png") no-repeat 0 3px;
|
||||
// background: url("@/assets/images/tree/icon_off.png") no-repeat 0 changeHeight(15);
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
// width: 80px;
|
||||
// height: 80px;
|
||||
|
|
@ -337,8 +348,8 @@ const handleTarget = (node: any) => {
|
|||
|
||||
/* //有子节点 且已展开 */
|
||||
:deep(.el-tree .is-expanded .el-tree-node__expand-icon.expanded:before) {
|
||||
background: url('@/assets/images/tree/icon_on.png') no-repeat 0 3px;
|
||||
content: '';
|
||||
background: url("@/assets/images/tree/icon_on.png") no-repeat 0 3px;
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
// padding-right: 18px;
|
||||
|
|
@ -387,10 +398,18 @@ const handleTarget = (node: any) => {
|
|||
:deep(.el-tree-node__content:hover) {
|
||||
// background-color: transparent;
|
||||
|
||||
background: linear-gradient(90deg, rgba(82, 127, 243, 0.2) 0%, rgba(48, 74, 141, 0) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(82, 127, 243, 0.2) 0%,
|
||||
rgba(48, 74, 141, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||
:deep(
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content
|
||||
) {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -93,7 +93,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="source_list">
|
||||
<div class="table_box">
|
||||
<el-table
|
||||
|
|
@ -151,10 +150,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info3">
|
||||
<!-- <rateLine_will :rateDate="rateDate_will"></rateLine_will> -->
|
||||
<!-- -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="capAjust_box content_bg" v-else>
|
||||
|
|
@ -169,21 +165,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="info11">
|
||||
<div>
|
||||
<div class="yuan"></div>
|
||||
可调节裕度 (<span class="colorf">-30</span>~<span
|
||||
class="colorf"
|
||||
>50</span
|
||||
>) kW
|
||||
</div>
|
||||
<div>
|
||||
（<span class="colorf">2024-06-08 12:00</span>~<span
|
||||
class="colorf"
|
||||
>2024-06-08 12:00</span
|
||||
>）
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="source_list">
|
||||
<div class="table_box">
|
||||
<el-table
|
||||
|
|
@ -204,6 +185,13 @@
|
|||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="装机容量/额定功率" align="center">
|
||||
<template #default="scope">
|
||||
<span style="margin-left: 10px">{{
|
||||
scope.row.rated_s
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -216,21 +204,10 @@
|
|||
v-if="rateDate_curFlag"
|
||||
:key="refreshkey"
|
||||
></rateLine>
|
||||
<!-- <rateLine
|
||||
:rateDate="rateDate_cur"
|
||||
|
||||
v-if="keyechart"
|
||||
|
||||
></rateLine> -->
|
||||
</div>
|
||||
<div class="infotitle_box">
|
||||
<div class="infotitle_short">
|
||||
<div class="bg"></div>
|
||||
<!-- <img
|
||||
src="@/assets/images/common/title_yuanicon.png"
|
||||
alt=""
|
||||
class="yuan"
|
||||
/> -->
|
||||
<span>负载率预测</span>
|
||||
<div class="btns">
|
||||
<div class="btnbg fs35" @click="handleClickPC">策略配置</div>
|
||||
|
|
@ -252,16 +229,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="infotitle_box">
|
||||
<div class="infotitle_short">
|
||||
<div class="yuan"></div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<span>负载率预测</span>
|
||||
|
||||
</div> -->
|
||||
<div class="info3">
|
||||
|
||||
<rateLine_will
|
||||
v-if="rateDate_willFlag"
|
||||
:rateDate="rateDate_will"
|
||||
|
|
@ -961,7 +929,7 @@ const handleSaveDate = () => {
|
|||
});
|
||||
console.log(adjustTableData, "adjustTableData");
|
||||
refreshkey.value += 1;
|
||||
rateDate_will=[]
|
||||
rateDate_will = [];
|
||||
//保存后要进行负载率预测
|
||||
forceRateApi({
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
|
|
@ -970,7 +938,7 @@ const handleSaveDate = () => {
|
|||
}).then((res) => {
|
||||
console.log(res, "1------------res");
|
||||
rateDate_will = res.data.result;
|
||||
if(res.data.result.length>0){
|
||||
if (res.data.result.length > 0) {
|
||||
rateDate_willFlag.value = true;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ const drawOneLine = (rateArr: RateDateInfo[]) => {
|
|||
item.seriesName
|
||||
}：</div><div>${
|
||||
item.value === undefined ? "0" : item.value
|
||||
}kW</div></div>`;
|
||||
}%</div></div>`;
|
||||
});
|
||||
return newStr;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue