content_left
parent
f9223df2b5
commit
e31fdab2a8
17
README.md
17
README.md
|
|
@ -6,4 +6,19 @@ This template should help get you started developing with Vue 3 and TypeScript i
|
||||||
|
|
||||||
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
||||||
|
|
||||||
- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
|
- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking
|
||||||
|
from the command line, or for generating d.ts files for SFCs.
|
||||||
|
|
||||||
|
|
||||||
|
##分辨率
|
||||||
|
3840*2160 天津城南分辨率
|
||||||
|
1920*1080 普通电脑分辨率
|
||||||
|
3840*1080 上海院的分辨率
|
||||||
|
/* 针对3840x1080分辨率的样式 */
|
||||||
|
@media screen and (min-width: 3840px) and (max-height: 2150px) {
|
||||||
|
.main {
|
||||||
|
/* margin-top: 7.8125rem; */
|
||||||
|
flex: 1;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,13 +3,13 @@ import request from "@/utils/http/request";
|
||||||
|
|
||||||
interface idInfo {
|
interface idInfo {
|
||||||
orgID?: string,
|
orgID?: string,
|
||||||
|
mrid?:string,
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设备树 0 一级服务
|
// 设备树 0 一级服务
|
||||||
export function treeT(data: idInfo) {
|
export function treeT(data: idInfo) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/wwpm/biz/v1/device_0',
|
url: '/api/wwpm/biz/v1/er_tree',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
|
|
@ -21,9 +21,9 @@ interface treeInfo {
|
||||||
transformId: string;
|
transformId: string;
|
||||||
}
|
}
|
||||||
// 设备树 1 二级服务
|
// 设备树 1 二级服务
|
||||||
export function treeSecond(data: treeInfo) {
|
export function treeSecond(data: idInfo) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/wwpm/biz/v1/device_1',
|
url: '/api/wwpm/biz/v1/er_tree/node',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
|
|
@ -32,12 +32,22 @@ export function treeSecond(data: treeInfo) {
|
||||||
// 设备树 充电站
|
// 设备树 充电站
|
||||||
export function carTree_api(data: idInfo) {
|
export function carTree_api(data: idInfo) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/wwpm/biz/v1/car_tree',
|
url: '/api/wwpm/biz/v1/cn_tree',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 设备树 充电站
|
|
||||||
|
export function carTree_api2(data: idInfo) {
|
||||||
|
return request({
|
||||||
|
url: '/api/wwpm/biz/v1/cn_tree/node',
|
||||||
|
method: 'POST',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 设备树 光伏
|
||||||
export function pvTree_api(data: idInfo) {
|
export function pvTree_api(data: idInfo) {
|
||||||
return request({
|
return request({
|
||||||
url: '/api/wwpm/biz/v1/pv_tree',
|
url: '/api/wwpm/biz/v1/pv_tree',
|
||||||
|
|
|
||||||
|
|
@ -11,3 +11,12 @@ interface idInfo {
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
// 光伏实时信息
|
||||||
|
export function pvCurInfo_api(data: idInfo) {
|
||||||
|
return request({
|
||||||
|
url: "/api/wwpm/biz/v1/photo_voltaic/real_time/info",
|
||||||
|
method: "POST",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -4,21 +4,27 @@ const transformFontSize = (fontsize: number) => {
|
||||||
|
|
||||||
const width = window.screen.width;
|
const width = window.screen.width;
|
||||||
const height = window.screen.height;
|
const height = window.screen.height;
|
||||||
let ratio: any = 0
|
let ratio: any = 0;
|
||||||
|
//高度大于1080
|
||||||
|
if (height > 1080) {
|
||||||
|
// 3840*2160 天津城南分辨率
|
||||||
if (width > 3000) {
|
if (width > 3000) {
|
||||||
ratio = width / 4240;
|
ratio = width / 4240;
|
||||||
} else if(width>2100){
|
}
|
||||||
ratio = width / 2220;
|
|
||||||
// 宁波分辨率
|
|
||||||
// ratio = width / 3220;
|
|
||||||
}else if(width>1900){
|
|
||||||
ratio = width / 4240;
|
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
ratio = width / 2620;
|
//高度小于1080
|
||||||
|
if (width > 3000) {
|
||||||
|
// 3840*1080 上海院的分辨率
|
||||||
|
ratio = width / 11940;
|
||||||
|
} else if (width > 1900) {
|
||||||
|
// 1920*1080 普通电脑分辨率
|
||||||
|
ratio = width / 5960;
|
||||||
|
} else {
|
||||||
|
ratio = width / 3620;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 取下整
|
// 取下整
|
||||||
return parseInt(fontsize * ratio);
|
return parseInt(fontsize * ratio);
|
||||||
};
|
};
|
||||||
export default transformFontSize
|
export default transformFontSize;
|
||||||
|
|
|
||||||
|
|
@ -165,6 +165,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.header_layout {
|
.header_layout {
|
||||||
|
height: changeHeight(166);
|
||||||
/* height: 186px; */
|
/* height: 186px; */
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -215,10 +216,6 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-top: 3%;
|
margin-top: 3%;
|
||||||
}
|
}
|
||||||
// @media screen and (max-width:1920px) {
|
|
||||||
// .main {
|
|
||||||
// margin-top: 6%;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -15,11 +15,15 @@
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
empty-text="数据读取中..."
|
empty-text="数据读取中..."
|
||||||
:props="targetProps"
|
:props="targetProps"
|
||||||
:default-expanded-keys="['tongxiang']"
|
|
||||||
lazy
|
lazy
|
||||||
:load="loadNode"
|
:load="loadNode"
|
||||||
@node-click="handleTargetInfo"
|
@node-click="handleTargetInfo"
|
||||||
></el-tree>
|
>
|
||||||
|
<template v-slot:default="{ node }">
|
||||||
|
<div style=" text-overflow: ellipsis;text-align: left; white-space: nowrap;width: 82%; overflow: hidden;"
|
||||||
|
:title="node.label">{{ node.label }}</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,7 +32,7 @@
|
||||||
import { onMounted, ref, watch } from "vue";
|
import { onMounted, ref, watch } from "vue";
|
||||||
import { ElTree } from "element-plus";
|
import { ElTree } from "element-plus";
|
||||||
import treeDatas from "@/assets/json/tree-right2.json";
|
import treeDatas from "@/assets/json/tree-right2.json";
|
||||||
import { treeT, treeSecond, carTree_api } from "@/api/ajust/tree";
|
import { carTree_api, carTree_api2 } from "@/api/ajust/tree";
|
||||||
|
|
||||||
// defineProps<{
|
// defineProps<{
|
||||||
// elec_list: EList[]
|
// elec_list: EList[]
|
||||||
|
|
@ -108,70 +112,65 @@ const loadNode = async (node: any, resolve: any) => {
|
||||||
});
|
});
|
||||||
treeData = result.data;
|
treeData = result.data;
|
||||||
resolve(treeData);
|
resolve(treeData);
|
||||||
} else if (node.level > 0 && node.level < 4) {
|
} else if (node.level > 0 && node.level < 3) {
|
||||||
//默认展开的层级,需要默认几层就判断一下.
|
//默认展开的层级,需要默认几层就判断一下.
|
||||||
resolve(node.data.children);
|
resolve(node.data.children);
|
||||||
} else if (node.level === 4) {
|
}
|
||||||
|
// else if (node.level === 4) {
|
||||||
// 利用设备中的信息调用接口
|
// 利用设备中的信息调用接口
|
||||||
// ---------
|
// ---------
|
||||||
|
|
||||||
// ---------
|
// ---------
|
||||||
//懒加载
|
//懒加载
|
||||||
let res = await treeSecond({
|
// let res = await treeSecond({
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
transformId: node.key,
|
// transformId: node.key,
|
||||||
});
|
// });
|
||||||
if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
|
// if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
|
||||||
let datanames = [];
|
// let datanames = [];
|
||||||
|
|
||||||
if (res.data.energySupplyStation.length) {
|
// if (res.data.energySupplyStation.length) {
|
||||||
datanames.push({
|
// datanames.push({
|
||||||
name: `充电站(${res.data.energySupplyStation.length})`,
|
// name: `充电站(${res.data.energySupplyStation.length})`,
|
||||||
id: "chongdianzhan",
|
// id: "chongdianzhan",
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
if (res.data.dwellerPile.length) {
|
// if (res.data.dwellerPile.length) {
|
||||||
datanames.push({
|
// datanames.push({
|
||||||
name: `居民充电桩(${res.data.dwellerPile.length})`,
|
// name: `居民充电桩(${res.data.dwellerPile.length})`,
|
||||||
id: "chongdianzhuang",
|
// id: "chongdianzhuang",
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
resolve(datanames);
|
// resolve(datanames);
|
||||||
} else {
|
// } else {
|
||||||
resolve([{ name: "暂无数据", leaf: true }]);
|
// resolve([{ name: "暂无数据", leaf: true }]);
|
||||||
console.log(res); //需要将上一级的加号去掉
|
// console.log(res); //需要将上一级的加号去掉
|
||||||
}
|
// }
|
||||||
} else if (node.level === 5) {
|
// }
|
||||||
//懒加载
|
// else if (node.level === 5) {
|
||||||
let res = await treeSecond({
|
// if (node.key === "chongdianzhan") {
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
// if (res.data.energySupplyStation.length) {
|
||||||
transformId: node.parent.key,
|
// resolve(
|
||||||
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
// res.data.energySupplyStation.map((item) => ({
|
||||||
});
|
// id: item.mrid,
|
||||||
|
// name: item.name,
|
||||||
if (node.key === "chongdianzhan") {
|
// type: item.type,
|
||||||
if (res.data.energySupplyStation.length) {
|
// }))
|
||||||
resolve(
|
// );
|
||||||
res.data.energySupplyStation.map((item) => ({
|
// }
|
||||||
id: item.mrid,
|
// }
|
||||||
name: item.name,
|
// if (node.key === "chongdianzhuang") {
|
||||||
type: item.type,
|
// if (res.data.dwellerPile.length) {
|
||||||
}))
|
// resolve(
|
||||||
);
|
// res.data.dwellerPile.map((item) => ({
|
||||||
}
|
// id: item.mrid,
|
||||||
}
|
// name: item.name,
|
||||||
if (node.key === "chongdianzhuang") {
|
// type: item.type,
|
||||||
if (res.data.dwellerPile.length) {
|
// }))
|
||||||
resolve(
|
// );
|
||||||
res.data.dwellerPile.map((item) => ({
|
// }
|
||||||
id: item.mrid,
|
// }
|
||||||
name: item.name,
|
|
||||||
type: item.type,
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// resolve();
|
// resolve();
|
||||||
// resolve([
|
// resolve([
|
||||||
|
|
@ -180,8 +179,15 @@ const loadNode = async (node: any, resolve: any) => {
|
||||||
// id: `${+new Date()}`,
|
// id: `${+new Date()}`,
|
||||||
// },
|
// },
|
||||||
// ]);
|
// ]);
|
||||||
} else {
|
// }
|
||||||
resolve([{ name: "暂无数据", leaf: true }]);
|
else if (node.level === 3) {
|
||||||
|
let result = await carTree_api2({
|
||||||
|
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
|
mrid: node.key,
|
||||||
|
});
|
||||||
|
resolve(result.data);
|
||||||
|
} else if (node.level > 3) {
|
||||||
|
resolve(node.data.children);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -255,8 +261,8 @@ const handleTarget = (node: any) => {
|
||||||
|
|
||||||
.tree {
|
.tree {
|
||||||
// height: 1300px;
|
// height: 1300px;
|
||||||
height: changeHeight(980);
|
// height: changeHeight(980);
|
||||||
width: changeWidth(901.19);
|
// width: changeWidth(901.19);
|
||||||
margin-left: changeHeight(56);
|
margin-left: changeHeight(56);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -392,7 +398,12 @@ const handleTarget = (node: any) => {
|
||||||
|
|
||||||
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
||||||
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
||||||
background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(82, 127, 243, 0.8) 0%,
|
||||||
|
rgba(59, 38, 148, 0) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-tree-node__content:hover) {
|
:deep(.el-tree-node__content:hover) {
|
||||||
|
|
@ -610,4 +621,5 @@ const handleTarget = (node: any) => {
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,13 +13,19 @@
|
||||||
:data="treeData"
|
:data="treeData"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
:props="targetProps"
|
:props="targetProps"
|
||||||
:default-expanded-keys="['tongxiang']"
|
|
||||||
lazy
|
lazy
|
||||||
:load="loadNode"
|
:load="loadNode"
|
||||||
@node-click="handleTargetInfo"
|
@node-click="handleTargetInfo"
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
empty-text="数据读取中..."
|
empty-text="数据读取中..."
|
||||||
></el-tree>
|
:highlight-current="true"
|
||||||
|
:current-node-key="'id'"
|
||||||
|
>
|
||||||
|
<template v-slot:default="{ node }">
|
||||||
|
<div style=" text-overflow: ellipsis;text-align: left; white-space: nowrap;width: 82%; overflow: hidden;"
|
||||||
|
:title="node.label">{{ node.label }}</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -110,65 +116,65 @@ const loadNode = async (node: any, resolve: any) => {
|
||||||
}).then((res) => {
|
}).then((res) => {
|
||||||
resolve(res.data); //默认加载第1层
|
resolve(res.data); //默认加载第1层
|
||||||
});
|
});
|
||||||
} else if (node.level > 0 && node.level < 4) {
|
// } else if (node.level > 0 && node.level < 4) {
|
||||||
|
} else if (node.level > 0) {
|
||||||
|
|
||||||
//默认展开的层级,需要默认几层就判断一下.
|
//默认展开的层级,需要默认几层就判断一下.
|
||||||
resolve(node.data.children);
|
resolve(node.data.children);
|
||||||
} else if (node.level === 4) {
|
|
||||||
console.log(node, node.level, "4------");
|
|
||||||
|
|
||||||
//懒加载
|
|
||||||
let res = await treeSecond({
|
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
|
||||||
transformId: node.key,
|
|
||||||
});
|
|
||||||
if (
|
|
||||||
res.data.photoVoltaicUnit.length ||
|
|
||||||
res.data.energySupplyStation.length ||
|
|
||||||
res.data.batteryUnit.length
|
|
||||||
) {
|
|
||||||
let datanames = [];
|
|
||||||
|
|
||||||
if (res.data.photoVoltaicUnit.length) {
|
|
||||||
datanames.push({
|
|
||||||
name: `光伏(${res.data.photoVoltaicUnit.length})`,
|
|
||||||
id: "guangfu",
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
//设备树中插入 光伏类型
|
||||||
|
// else if (node.level === 4) {
|
||||||
|
// console.log(node, node.level, "4------");
|
||||||
|
|
||||||
resolve(datanames);
|
// //懒加载
|
||||||
} else {
|
// let res = await treeSecond({
|
||||||
resolve([{ name: "加载数据", leaf: true }]);
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
console.log(res); //需要将上一级的加号去掉
|
// transformId: node.key,
|
||||||
}
|
// });
|
||||||
} else if (node.level === 5) {
|
// if (
|
||||||
console.log(node.parent, node.level);
|
// res.data.photoVoltaicUnit.length ||
|
||||||
//懒加载
|
// res.data.energySupplyStation.length ||
|
||||||
let res = await treeSecond({
|
// res.data.batteryUnit.length
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
// ) {
|
||||||
transformId: node.parent.key,
|
// let datanames = [];
|
||||||
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
|
||||||
});
|
|
||||||
// 二级服务只挂光伏
|
|
||||||
|
|
||||||
if (res.data.photoVoltaicUnit.length) {
|
// if (res.data.photoVoltaicUnit.length) {
|
||||||
resolve(
|
// datanames.push({
|
||||||
res.data.photoVoltaicUnit.map((item) => ({
|
// name: `光伏(${res.data.photoVoltaicUnit.length})`,
|
||||||
id: item.mrid,
|
// id: "guangfu",
|
||||||
name: item.name,
|
// });
|
||||||
}))
|
// }
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// resolve();
|
// resolve(datanames);
|
||||||
// resolve([
|
// } else {
|
||||||
// {
|
// resolve([{ name: "加载数据", leaf: true }]);
|
||||||
// name: `懒加载第${node.level + 1}级` + +new Date(),
|
// console.log(res); //需要将上一级的加号去掉
|
||||||
// id: `${+new Date()}`,
|
// }
|
||||||
// },
|
// }
|
||||||
// ]);
|
// else if (node.level === 5) {
|
||||||
} else {
|
// else if (node.level === 4||node.level===5) {
|
||||||
resolve([{ name: "加载数据", leaf: true }]);
|
// console.log(node.parent, node.level);
|
||||||
}
|
// //懒加载
|
||||||
|
// let res = await treeSecond({
|
||||||
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
|
// transformId: node.parent.key,
|
||||||
|
// // transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
||||||
|
|
||||||
|
// });
|
||||||
|
// // 二级服务只挂光伏
|
||||||
|
|
||||||
|
// if (res.data.photoVoltaicUnit.length) {
|
||||||
|
// resolve(
|
||||||
|
// res.data.photoVoltaicUnit.map((item) => ({
|
||||||
|
// id: item.mrid,
|
||||||
|
// name: item.name,
|
||||||
|
// type:item.type,
|
||||||
|
// }))
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// } else {
|
||||||
|
// // resolve([{ name: "加载数据", leaf: true }]);
|
||||||
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
|
const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
|
||||||
|
|
@ -182,13 +188,8 @@ const handleTargetInfo = (data: TreeData, node: any) => {
|
||||||
// handleTarget(e);
|
// handleTarget(e);
|
||||||
// 利用设备中的信息调用接口
|
// 利用设备中的信息调用接口
|
||||||
// ---------
|
// ---------
|
||||||
// emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
//点中每一层设备树 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
||||||
|
|
||||||
if (node.level === 6) {
|
|
||||||
//点中第4层 为单个光伏时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
|
||||||
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||||
}
|
|
||||||
|
|
||||||
// ---------
|
// ---------
|
||||||
};
|
};
|
||||||
const handleTarget = (node: any) => {
|
const handleTarget = (node: any) => {
|
||||||
|
|
@ -252,8 +253,8 @@ const handleTarget = (node: any) => {
|
||||||
|
|
||||||
.tree {
|
.tree {
|
||||||
// height: 1300px;
|
// height: 1300px;
|
||||||
height: changeHeight(980);
|
// height: changeHeight(980);
|
||||||
width: changeWidth(901.19);
|
// width: changeWidth(901.19);
|
||||||
margin-left: changeHeight(56);
|
margin-left: changeHeight(56);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -389,7 +390,12 @@ const handleTarget = (node: any) => {
|
||||||
|
|
||||||
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
||||||
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
:deep(.el-tree-node:focus > .el-tree-node__content) {
|
||||||
background-color: transparent !important;
|
// background-color: transparent !important;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
rgba(82, 127, 243, 0.8) 0%,
|
||||||
|
rgba(59, 38, 148, 0) 100%
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-tree-node__content:hover) {
|
:deep(.el-tree-node__content:hover) {
|
||||||
|
|
@ -607,4 +613,5 @@ const handleTarget = (node: any) => {
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,4 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="soureTree">
|
|
||||||
<!-- <div class="source_label">
|
|
||||||
<div class="elec_box_list" v-for="(item, index) in elec_list" :key="index" @click="labelFlag(item.id)"
|
|
||||||
:class="[item.id === label_falg ? 'active' : '']">
|
|
||||||
{{ item.label }}
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
<div class="source_tree">
|
|
||||||
<div class="tree">
|
<div class="tree">
|
||||||
<el-tree
|
<el-tree
|
||||||
ref="targetTreeRef"
|
ref="targetTreeRef"
|
||||||
|
|
@ -19,7 +11,22 @@
|
||||||
@node-click="handleTargetInfo"
|
@node-click="handleTargetInfo"
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
empty-text="数据读取中..."
|
empty-text="数据读取中..."
|
||||||
></el-tree>
|
>
|
||||||
|
<template v-slot:default="{ node }">
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 82%;
|
||||||
|
overflow: hidden;
|
||||||
|
"
|
||||||
|
:title="node.label"
|
||||||
|
>
|
||||||
|
{{ node.label }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
<!-- <el-tree ref="targetTreeRef" :data="treeData" :highlight-keywords="keyword" :props="props" :load="loadNode" lazy
|
<!-- <el-tree ref="targetTreeRef" :data="treeData" :highlight-keywords="keyword" :props="props" :load="loadNode" lazy
|
||||||
node-key="ID" @node-click="handleNodeClick" :expand-on-click-node="false" empty-text="数据读取中..." v-else>
|
node-key="ID" @node-click="handleNodeClick" :expand-on-click-node="false" empty-text="数据读取中..." v-else>
|
||||||
<template v-slot:default="{ node }">
|
<template v-slot:default="{ node }">
|
||||||
|
|
@ -29,8 +36,6 @@
|
||||||
</template>
|
</template>
|
||||||
</el-tree> -->
|
</el-tree> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { onMounted, ref, watch } from "vue";
|
import { onMounted, ref, watch } from "vue";
|
||||||
|
|
@ -113,120 +118,135 @@ const loadNode = async (node: any, resolve: any) => {
|
||||||
// let res= await treeT({
|
// let res= await treeT({
|
||||||
// orgID: "8af8470a47aad8e20147aad92e400335",
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
// });
|
// });
|
||||||
treeT({
|
let treeData = [];
|
||||||
|
let result = await treeT({
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
}).then((res) => {
|
|
||||||
resolve(res.data); //默认加载第1层
|
|
||||||
});
|
});
|
||||||
|
treeData = result.data;
|
||||||
} else if (node.level > 0 && node.level < 4) {
|
resolve(treeData);
|
||||||
|
// treeT({
|
||||||
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
|
// }).then((res) => {
|
||||||
|
// resolve(res.data); //默认加载第1层
|
||||||
|
// });
|
||||||
|
} else if (node.level > 0 && node.level < 3) {
|
||||||
//默认展开的层级,需要默认几层就判断一下.
|
//默认展开的层级,需要默认几层就判断一下.
|
||||||
resolve(node.data.children);
|
resolve(node.data.children);
|
||||||
} else if (node.level === 4) {
|
} else if (node.level === 3) {
|
||||||
|
let result = await treeSecond({
|
||||||
|
|
||||||
//懒加载
|
|
||||||
let res = await treeSecond({
|
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
transformId: node.key,
|
mrid: node.key,
|
||||||
});
|
|
||||||
if (
|
|
||||||
res.data.photoVoltaicUnit.length ||
|
|
||||||
res.data.energySupplyStation.length ||
|
|
||||||
res.data.batteryUnit.length ||
|
|
||||||
res.data.dwellerPile.length
|
|
||||||
) {
|
|
||||||
let datanames = [];
|
|
||||||
if (res.data.photoVoltaicUnit.length) {
|
|
||||||
datanames.push({
|
|
||||||
name: `光伏(${res.data.photoVoltaicUnit.length})`,
|
|
||||||
id: "guanafu",
|
|
||||||
});
|
});
|
||||||
|
resolve(result.data);
|
||||||
|
} else if (node.level > 3) {
|
||||||
|
resolve(node.data.children);
|
||||||
}
|
}
|
||||||
if (res.data.energySupplyStation.length) {
|
// else if (node.level > 0 && node.level < 4) {
|
||||||
datanames.push({
|
// //默认展开的层级,需要默认几层就判断一下.
|
||||||
name: `充电站(${res.data.energySupplyStation.length})`,
|
// resolve(node.data.children);
|
||||||
id: "chongdianzhan",
|
// } else if (node.level === 4) {
|
||||||
});
|
// //懒加载
|
||||||
}
|
// let res = await treeSecond({
|
||||||
if (res.data.batteryUnit.length) {
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
datanames.push({
|
// transformId: node.key,
|
||||||
name: `储能(${res.data.batteryUnit.length})`,
|
// });
|
||||||
id: "chuneng",
|
// if (
|
||||||
});
|
// res.data.photoVoltaicUnit.length ||
|
||||||
}
|
// res.data.energySupplyStation.length ||
|
||||||
if (res.data.dwellerPile.length) {
|
// res.data.batteryUnit.length ||
|
||||||
datanames.push({
|
// res.data.dwellerPile.length
|
||||||
name: `居民充电桩(${res.data.dwellerPile.length})`,
|
// ) {
|
||||||
id: "chongdianzhuang",
|
// let datanames = [];
|
||||||
});
|
// if (res.data.photoVoltaicUnit.length) {
|
||||||
}
|
// datanames.push({
|
||||||
resolve(datanames);
|
// name: `光伏(${res.data.photoVoltaicUnit.length})`,
|
||||||
} else {
|
// id: "guanafu",
|
||||||
resolve([{ name: "加载数据", leaf: true }]);
|
// });
|
||||||
}
|
// }
|
||||||
} else if (node.level === 5) {
|
// if (res.data.energySupplyStation.length) {
|
||||||
console.log(node.parent, node.level);
|
// datanames.push({
|
||||||
//懒加载
|
// name: `充电站(${res.data.energySupplyStation.length})`,
|
||||||
let res = await treeSecond({
|
// id: "chongdianzhan",
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
// });
|
||||||
transformId: node.parent.key,
|
// }
|
||||||
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
// if (res.data.batteryUnit.length) {
|
||||||
});
|
// datanames.push({
|
||||||
console.log(node, node.parent, "父节点");
|
// name: `储能(${res.data.batteryUnit.length})`,
|
||||||
// 如果父节点为光伏 则返回数据
|
// id: "chuneng",
|
||||||
if (node.key === "guanafu") {
|
// });
|
||||||
if (res.data.photoVoltaicUnit.length) {
|
// }
|
||||||
// map转化数组
|
// if (res.data.dwellerPile.length) {
|
||||||
resolve(
|
// datanames.push({
|
||||||
res.data.photoVoltaicUnit.map((item) => ({
|
// name: `居民充电桩(${res.data.dwellerPile.length})`,
|
||||||
id: item.mrid,
|
// id: "chongdianzhuang",
|
||||||
name: item.name,
|
// });
|
||||||
}))
|
// }
|
||||||
);
|
// resolve(datanames);
|
||||||
}
|
// } else {
|
||||||
}
|
// resolve([{ name: "加载数据", leaf: true }]);
|
||||||
if (node.key === "chongdianzhan") {
|
// }
|
||||||
if (res.data.energySupplyStation.length) {
|
// } else if (node.level === 5) {
|
||||||
resolve(
|
// console.log(node.parent, node.level);
|
||||||
res.data.energySupplyStation.map((item) => ({
|
// //懒加载
|
||||||
id: item.mrid,
|
// let res = await treeSecond({
|
||||||
name: item.name,
|
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||||
}))
|
// transformId: node.parent.key,
|
||||||
);
|
// // transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
|
||||||
}
|
// });
|
||||||
}
|
// console.log(node, node.parent, "父节点");
|
||||||
if (node.key === "chongdianzhuang") {
|
// // 如果父节点为光伏 则返回数据
|
||||||
if (res.data.dwellerPile.length) {
|
// if (node.key === "guanafu") {
|
||||||
resolve(
|
// if (res.data.photoVoltaicUnit.length) {
|
||||||
res.data.dwellerPile.map((item) => ({
|
// // map转化数组
|
||||||
id: item.mrid,
|
// resolve(
|
||||||
name: item.name,
|
// res.data.photoVoltaicUnit.map((item) => ({
|
||||||
}))
|
// id: item.mrid,
|
||||||
);
|
// name: item.name,
|
||||||
}
|
// }))
|
||||||
}
|
// );
|
||||||
if (node.key === "chuneng") {
|
// }
|
||||||
if (res.data.batteryUnit.length) {
|
// }
|
||||||
resolve(
|
// if (node.key === "chongdianzhan") {
|
||||||
res.data.batteryUnit.map((item) => ({
|
// if (res.data.energySupplyStation.length) {
|
||||||
id: item.mrid,
|
// resolve(
|
||||||
name: item.name,
|
// res.data.energySupplyStation.map((item) => ({
|
||||||
}))
|
// id: item.mrid,
|
||||||
);
|
// name: item.name,
|
||||||
}
|
// }))
|
||||||
}
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// if (node.key === "chongdianzhuang") {
|
||||||
|
// if (res.data.dwellerPile.length) {
|
||||||
|
// resolve(
|
||||||
|
// res.data.dwellerPile.map((item) => ({
|
||||||
|
// id: item.mrid,
|
||||||
|
// name: item.name,
|
||||||
|
// }))
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// if (node.key === "chuneng") {
|
||||||
|
// if (res.data.batteryUnit.length) {
|
||||||
|
// resolve(
|
||||||
|
// res.data.batteryUnit.map((item) => ({
|
||||||
|
// id: item.mrid,
|
||||||
|
// name: item.name,
|
||||||
|
// }))
|
||||||
|
// );
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
// resolve();
|
// // resolve();
|
||||||
// resolve([
|
// // resolve([
|
||||||
// {
|
// // {
|
||||||
// name: `懒加载第${node.level + 1}级` + +new Date(),
|
// // name: `懒加载第${node.level + 1}级` + +new Date(),
|
||||||
// id: `${+new Date()}`,
|
// // id: `${+new Date()}`,
|
||||||
// },
|
// // },
|
||||||
// ]);
|
// // ]);
|
||||||
} else {
|
// } else {
|
||||||
resolve([{ name: "加载数据", leaf: true }]);
|
// resolve([{ name: "加载数据", leaf: true }]);
|
||||||
}
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
|
const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，子组件中触发父组件使用
|
||||||
|
|
@ -239,13 +259,12 @@ const handleTargetInfo = (data: TreeData, node: any) => {
|
||||||
console.log("点击的节点", node);
|
console.log("点击的节点", node);
|
||||||
|
|
||||||
if (node.level === 4 || node.level === 3) {
|
if (node.level === 4 || node.level === 3) {
|
||||||
console.log(node.level,'0000',node.key);
|
console.log(node.level, "0000", node.key);
|
||||||
|
|
||||||
console.log("zheshishaya");
|
console.log("zheshishaya");
|
||||||
//点中第4层 为台区时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
//点中第4层 为台区时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
||||||
// emits("update-node-key", node.key); //获取id,用于二级接口服务返回接口给可调资源列表
|
// emits("update-node-key", node.key); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||||
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const handleTarget = (node: any) => {
|
const handleTarget = (node: any) => {
|
||||||
|
|
@ -309,8 +328,8 @@ const handleTarget = (node: any) => {
|
||||||
|
|
||||||
.tree {
|
.tree {
|
||||||
// height: 1300px;
|
// height: 1300px;
|
||||||
height: changeHeight(980);
|
// height: changeHeight(980);
|
||||||
width: changeWidth(901.19);
|
// width: changeWidth(901.19);
|
||||||
margin-left: changeHeight(56);
|
margin-left: changeHeight(56);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -202,6 +202,7 @@ const styleVar = computed(() => {
|
||||||
@function changeHeight($height) {
|
@function changeHeight($height) {
|
||||||
@return calc(var(--box-height) * ($height / 2160));
|
@return calc(var(--box-height) * ($height / 2160));
|
||||||
}
|
}
|
||||||
|
// 上海院分辨率 3840*1080
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -445,4 +446,20 @@ p {
|
||||||
.nav_content .nav_list .nav_right .activeNav {
|
.nav_content .nav_list .nav_right .activeNav {
|
||||||
color: #ffe560;
|
color: #ffe560;
|
||||||
}
|
}
|
||||||
|
/* 针对3840x1080分辨率的样式 */
|
||||||
|
@media screen and (min-width: 3840px) and (max-height: 2150px) {
|
||||||
|
.header {
|
||||||
|
height: changeHeight(246);
|
||||||
|
}
|
||||||
|
.pdding_box {
|
||||||
|
height: changeHeight(186);
|
||||||
|
}
|
||||||
|
.header-logo{
|
||||||
|
.img1 {
|
||||||
|
width: changeWidth(400.84);
|
||||||
|
// height: changeHeight(64.32);
|
||||||
|
margin-left: changeWidth(72);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -181,6 +181,7 @@ const styleVar = computed(() => {
|
||||||
@return calc(var(--box-height) * ($height / 1440));
|
@return calc(var(--box-height) * ($height / 1440));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.bigscreen {
|
.bigscreen {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -207,6 +208,7 @@ const styleVar = computed(() => {
|
||||||
|
|
||||||
.header_layout {
|
.header_layout {
|
||||||
/* height: 186px; */
|
/* height: 186px; */
|
||||||
|
height: changeHeight(186);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -256,9 +258,13 @@ const styleVar = computed(() => {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-top: 4.5%;
|
margin-top: 4.5%;
|
||||||
}
|
}
|
||||||
// @media screen and (max-width:1920px) {
|
/* 针对3840x1080分辨率的样式 */
|
||||||
// .main {
|
@media screen and (min-width: 3840px) and (max-height: 2150px) {
|
||||||
// margin-top: 6%;
|
.main {
|
||||||
// }
|
/* margin-top: 7.8125rem; */
|
||||||
// }
|
flex: 1;
|
||||||
|
margin-top: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -79,10 +79,7 @@
|
||||||
|
|
||||||
<div class="info2_m">
|
<div class="info2_m">
|
||||||
<div class="top1_box">
|
<div class="top1_box">
|
||||||
<img
|
<img src="@/assets/images/v2-1/store_taiqu.png" alt="" />
|
||||||
src="@/assets/images/v2-1/store_taiqu.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="left1_box">
|
<div class="left1_box">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div class="cen">
|
<div class="cen">
|
||||||
|
|
@ -792,11 +789,11 @@ const submitForm = () => {
|
||||||
startTime: datat_start,
|
startTime: datat_start,
|
||||||
endTime: datat_end,
|
endTime: datat_end,
|
||||||
};
|
};
|
||||||
const randomDelay=getRandomInt(2000,5000)//取2000-5000ms之间的随机数
|
const randomDelay = getRandomInt(2000, 5000); //取2000-5000ms之间的随机数
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
send_Status.value=false
|
send_Status.value = false;
|
||||||
|
|
||||||
ajustCarPageFlag.value=false
|
ajustCarPageFlag.value = false;
|
||||||
|
|
||||||
ElMessage({
|
ElMessage({
|
||||||
showClose: true,
|
showClose: true,
|
||||||
|
|
@ -1132,8 +1129,9 @@ const styleVar = computed(() => {
|
||||||
.car_left_box {
|
.car_left_box {
|
||||||
margin-top: changeHeight(30);
|
margin-top: changeHeight(30);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
// width: changeHeight(961.19);
|
||||||
height: changeHeight(1679.23); //内容高度
|
height: changeHeight(1679.23); //内容高度
|
||||||
display: flex;
|
// display: flex;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
// flex-direction: column;
|
// flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -175,10 +175,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="posimg">
|
<div class="posimg">
|
||||||
<img
|
<img src="@/assets/images/v2-1/load_cdz.png" alt="" />
|
||||||
src="@/assets/images/v2-1/load_cdz.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="list_info">
|
<div class="list_info">
|
||||||
<div class="rowlist">
|
<div class="rowlist">
|
||||||
|
|
@ -298,10 +295,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name_box">
|
<div class="name_box">
|
||||||
<img
|
<img src="@/assets/images/v2-1/net_peiwang.png" alt="" />
|
||||||
src="@/assets/images/v2-1/net_peiwang.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="photovoltaic">
|
<div class="photovoltaic">
|
||||||
<div class="rowbox">
|
<div class="rowbox">
|
||||||
<div class="photovoltaic_key1">
|
<div class="photovoltaic_key1">
|
||||||
|
|
@ -365,10 +359,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name_box">
|
<div class="name_box">
|
||||||
<img
|
<img src="@/assets/images/v2-1/store_taiqu.png" alt="" />
|
||||||
src="@/assets/images/v2-1/store_taiqu.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="photovoltaic">
|
<div class="photovoltaic">
|
||||||
<div class="rowbox">
|
<div class="rowbox">
|
||||||
<div class="photovoltaic_key1">
|
<div class="photovoltaic_key1">
|
||||||
|
|
@ -546,10 +537,7 @@
|
||||||
<div class="title_info margin2">资源概况</div>
|
<div class="title_info margin2">资源概况</div>
|
||||||
<div class="content_info">
|
<div class="content_info">
|
||||||
<div class="rowlist">
|
<div class="rowlist">
|
||||||
<img
|
<img src="@/assets/images/v2-1/store_user.png" alt="" />
|
||||||
src="@/assets/images/v2-1/store_user.png"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<div class="rbox">
|
<div class="rbox">
|
||||||
<div class="key bshadow">
|
<div class="key bshadow">
|
||||||
<div class="namebg">西小站</div>
|
<div class="namebg">西小站</div>
|
||||||
|
|
@ -679,7 +667,8 @@
|
||||||
<div class="gaobottom">
|
<div class="gaobottom">
|
||||||
<div class="gao">
|
<div class="gao">
|
||||||
<!-- 接到10kV线路556调节需求30kW，时间17:00-18:00，待处理 -->
|
<!-- 接到10kV线路556调节需求30kW，时间17:00-18:00，待处理 -->
|
||||||
[编号：48776100419]台区55608（10kV 556线路）于2024-07-12 14:36:54发生功率倒送，反向负载率1.52%。
|
[编号：48776100419]台区55608（10kV 556线路）于2024-07-12
|
||||||
|
14:36:54发生功率倒送，反向负载率1.52%。
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1123,7 +1112,6 @@ let leftData = reactive<leftDataInfo>({
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
// color: "#F1BA50",
|
// color: "#F1BA50",
|
||||||
color: "#00B4F4",
|
color: "#00B4F4",
|
||||||
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -1288,10 +1276,10 @@ let storageEchart = reactive([
|
||||||
const handlestorageTabDate = (val: any) => {
|
const handlestorageTabDate = (val: any) => {
|
||||||
storagetabDateFlag.value = val.id;
|
storagetabDateFlag.value = val.id;
|
||||||
};
|
};
|
||||||
let alert_tongzhiFlag=ref(false)
|
let alert_tongzhiFlag = ref(false);
|
||||||
const alert_tongzhi = () => {
|
const alert_tongzhi = () => {
|
||||||
alert_tongzhiFlag.value=true
|
alert_tongzhiFlag.value = true;
|
||||||
}
|
};
|
||||||
// 充放点量时间选择器
|
// 充放点量时间选择器
|
||||||
let selectDateObj = ref(null);
|
let selectDateObj = ref(null);
|
||||||
// 向线型图传参数
|
// 向线型图传参数
|
||||||
|
|
@ -1598,9 +1586,7 @@ const styleVar = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-left: changeWidth(51);
|
margin-left: changeWidth(51);
|
||||||
width: changeHeight(744.74);
|
width: changeHeight(1069.5);
|
||||||
height: changeHeight(26);
|
|
||||||
width: changeWidth(1069.5);
|
|
||||||
height: changeHeight(50.11);
|
height: changeHeight(50.11);
|
||||||
font-size: changeHeight(40);
|
font-size: changeHeight(40);
|
||||||
padding-left: changeWidth(77);
|
padding-left: changeWidth(77);
|
||||||
|
|
@ -1753,15 +1739,15 @@ const styleVar = computed(() => {
|
||||||
.name_box {
|
.name_box {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: changeHeight(300);
|
height: changeHeight(300);
|
||||||
// align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
margin-top: 5%;
|
|
||||||
width: changeWidth(228.25);
|
width: changeWidth(228.25);
|
||||||
height: changeHeight(201.6);
|
height: changeHeight(201.6);
|
||||||
}
|
}
|
||||||
.photovoltaic,
|
.photovoltaic,
|
||||||
.new_energy {
|
.new_energy {
|
||||||
|
height: 100%;
|
||||||
margin-left: changeWidth(49);
|
margin-left: changeWidth(49);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -1771,7 +1757,8 @@ const styleVar = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: changeHeight(60);
|
height: changeHeight(60);
|
||||||
.photovoltaic_key1 {
|
.photovoltaic_key1 {
|
||||||
width: changeWidth(309.89);
|
// width: changeWidth(309.89);
|
||||||
|
flex: 1;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -1797,13 +1784,14 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.photovoltaic_value1 {
|
.photovoltaic_value1 {
|
||||||
margin-left: changeWidth(83.5);
|
// margin-left: changeWidth(83.5);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 2;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
line-height: changeHeight(80);
|
|
||||||
.kw,
|
.kw,
|
||||||
.hu {
|
.hu {
|
||||||
|
flex: 2;
|
||||||
font-size: changeHeight(35);
|
font-size: changeHeight(35);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
span {
|
span {
|
||||||
|
|
@ -1818,6 +1806,7 @@ const styleVar = computed(() => {
|
||||||
// }
|
// }
|
||||||
}
|
}
|
||||||
.short {
|
.short {
|
||||||
|
flex: 2;
|
||||||
margin-left: 2%;
|
margin-left: 2%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1842,15 +1831,12 @@ const styleVar = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: changeWidth(90);
|
|
||||||
.area_kw {
|
.area_kw {
|
||||||
font-size: changeHeight(50);
|
font-size: changeHeight(50);
|
||||||
|
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
height: changeHeight(75);
|
height: changeHeight(75);
|
||||||
text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
|
text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
|
||||||
.r {
|
.r {
|
||||||
|
|
@ -1864,25 +1850,19 @@ const styleVar = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: changeHeight(30);
|
font-size: changeHeight(30);
|
||||||
/* 文字 */
|
/* 文字 */
|
||||||
|
justify-content: center;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
|
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.total_load_3dEchart {
|
.total_load_3dEchart {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
// width: changeHeight(236.97);
|
|
||||||
// height: changeHeight(135.41);
|
|
||||||
|
|
||||||
width: changeWidth(506.97);
|
width: changeWidth(506.97);
|
||||||
height: changeHeight(325.41);
|
height: changeHeight(325.41);
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: changeHeight(80);
|
margin-bottom: changeHeight(80);
|
||||||
padding-left: changeWidth(120);
|
padding-left: changeWidth(120);
|
||||||
//
|
|
||||||
position: relative;
|
position: relative;
|
||||||
.title_load {
|
.title_load {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1893,14 +1873,8 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
.echarts {
|
.echarts {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: changeHeight(-100);
|
|
||||||
top: changeHeight(-20);
|
|
||||||
width: changeWidth(506.97);
|
|
||||||
height: changeHeight(325.41);
|
|
||||||
left: changeHeight(-200);
|
left: changeHeight(-200);
|
||||||
top: changeHeight(-120);
|
top: changeHeight(-120);
|
||||||
width: changeWidth(506.97);
|
|
||||||
height: changeHeight(325.41);
|
|
||||||
width: changeWidth(1006.97);
|
width: changeWidth(1006.97);
|
||||||
height: changeHeight(625.41);
|
height: changeHeight(625.41);
|
||||||
}
|
}
|
||||||
|
|
@ -1964,7 +1938,7 @@ const styleVar = computed(() => {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 38%;
|
left: 38%;
|
||||||
img {
|
img {
|
||||||
width: changeWidth(227.77);
|
width: changeHeight(227.77);
|
||||||
height: changeHeight(193.42);
|
height: changeHeight(193.42);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1983,7 +1957,6 @@ const styleVar = computed(() => {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding-left: changeWidth(90);
|
|
||||||
.area_kw {
|
.area_kw {
|
||||||
font-size: changeHeight(50);
|
font-size: changeHeight(50);
|
||||||
|
|
||||||
|
|
@ -1991,6 +1964,7 @@ const styleVar = computed(() => {
|
||||||
|
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
height: changeHeight(75);
|
height: changeHeight(75);
|
||||||
text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
|
text-shadow: 0px 0px 10px rgba(65, 171, 168, 0.6);
|
||||||
|
|
@ -2007,7 +1981,7 @@ const styleVar = computed(() => {
|
||||||
/* 文字 */
|
/* 文字 */
|
||||||
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
justify-content: center;
|
||||||
color: #cccccc;
|
color: #cccccc;
|
||||||
|
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
@ -2036,8 +2010,6 @@ const styleVar = computed(() => {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: changeHeight(-220);
|
left: changeHeight(-220);
|
||||||
top: changeHeight(-120);
|
top: changeHeight(-120);
|
||||||
width: changeWidth(506.97);
|
|
||||||
height: changeHeight(325.41);
|
|
||||||
width: changeWidth(1006.97);
|
width: changeWidth(1006.97);
|
||||||
height: changeHeight(625.41);
|
height: changeHeight(625.41);
|
||||||
}
|
}
|
||||||
|
|
@ -2080,8 +2052,8 @@ const styleVar = computed(() => {
|
||||||
background: url("@/assets/images/btnType/fontbg.png")
|
background: url("@/assets/images/btnType/fontbg.png")
|
||||||
no-repeat;
|
no-repeat;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
padding-left: changeWidth(82);
|
// padding-left: changeWidth(82);
|
||||||
padding-right: changeWidth(82);
|
// padding-right: changeWidth(82);
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
padding-bottom: changeHeight(42);
|
padding-bottom: changeHeight(42);
|
||||||
line-height: changeHeight(38);
|
line-height: changeHeight(38);
|
||||||
|
|
@ -2223,12 +2195,12 @@ const styleVar = computed(() => {
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
.rowbox {
|
.rowbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
height: changeHeight(60);
|
height: changeHeight(60);
|
||||||
line-height: changeHeight(60);
|
line-height: changeHeight(60);
|
||||||
.photovoltaic_key1 {
|
.photovoltaic_key1 {
|
||||||
width: changeWidth(409.23);
|
// width: changeWidth(409.23);
|
||||||
|
flex: 2;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -2251,16 +2223,10 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.photovoltaic_value1 {
|
.photovoltaic_value1 {
|
||||||
// background-color: red;
|
|
||||||
// margin-left: changeHeight(43.5);
|
|
||||||
// border: 1px solid red;
|
|
||||||
|
|
||||||
margin-left: changeWidth(125.5);
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 2;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
line-height: changeHeight(60);
|
justify-content: center;
|
||||||
font-size: changeHeight(35);
|
font-size: changeHeight(35);
|
||||||
span {
|
span {
|
||||||
font-size: changeHeight(30);
|
font-size: changeHeight(30);
|
||||||
|
|
@ -2268,13 +2234,11 @@ const styleVar = computed(() => {
|
||||||
color: #6ffbf7;
|
color: #6ffbf7;
|
||||||
}
|
}
|
||||||
.kw {
|
.kw {
|
||||||
// background-color: #00f0ff;
|
flex: 2;
|
||||||
flex: 3;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.hu {
|
.hu {
|
||||||
flex: 2;
|
flex: 1;
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2343,11 +2307,9 @@ const styleVar = computed(() => {
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
img {
|
img {
|
||||||
width: changeWidth(227.77);
|
|
||||||
height: changeHeight(130.17);
|
width: changeHeight(227.77);
|
||||||
width: changeWidth(227.77);
|
|
||||||
height: changeHeight(193.42);
|
height: changeHeight(193.42);
|
||||||
////----
|
|
||||||
|
|
||||||
margin-top: 15%;
|
margin-top: 15%;
|
||||||
}
|
}
|
||||||
|
|
@ -3358,4 +3320,40 @@ const styleVar = computed(() => {
|
||||||
height: changeHeight(933);
|
height: changeHeight(933);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media screen and (min-width: 3840px) and (max-height: 2150px) {
|
||||||
|
.content_left {
|
||||||
|
width: changeWidth(646) !important;
|
||||||
|
.source {
|
||||||
|
.echarts {
|
||||||
|
left: changeHeight(-220);
|
||||||
|
top: changeHeight(-120);
|
||||||
|
width: changeWidth(556.97) !important;
|
||||||
|
height: changeHeight(625.41) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.load {
|
||||||
|
.echarts {
|
||||||
|
width: changeWidth(556.97) !important;
|
||||||
|
height: changeHeight(625.41) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content_right {
|
||||||
|
width: changeWidth(646) !important;
|
||||||
|
}
|
||||||
|
.content_info {
|
||||||
|
.name_box {
|
||||||
|
img {
|
||||||
|
width: changeWidth(120) !important;
|
||||||
|
height: changeWidth(120) !important;
|
||||||
|
}
|
||||||
|
.photovoltaic_key1 {
|
||||||
|
img {
|
||||||
|
width: changeHeight(40) !important;
|
||||||
|
height: changeHeight(40) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<!-- 光伏页面 -->
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<!-- 光伏页面 -->
|
||||||
<div class="pvPage_container" :style="styleVar">
|
<div class="pvPage_container" :style="styleVar">
|
||||||
<div class="content_left">
|
<div class="content_left">
|
||||||
<div
|
<div
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
<div class="tree_box content_bg">
|
<div class="tree_box content_bg">
|
||||||
<tree
|
<tree
|
||||||
@update:nodeValue="updatePvechart"
|
@update:nodeValue="updatePvechart"
|
||||||
v-mode="tree_node"
|
v-model="tree_node"
|
||||||
@update-node-key="getTreeNode"
|
@update-node-key="getTreeNode"
|
||||||
></tree>
|
></tree>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,23 +142,38 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="infotitle"><span>实时发电量曲线</span></div>
|
<div class="infotitle">
|
||||||
|
<span>实时发电量曲线</span>
|
||||||
|
<div class="timeBox">
|
||||||
|
<el-date-picker
|
||||||
|
class="customPicker"
|
||||||
|
popper-class="customDatePicker"
|
||||||
|
type="date"
|
||||||
|
v-model="selectDataCurves"
|
||||||
|
@change="selectDateCurvesChange"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="info2">
|
<div class="info2">
|
||||||
<powerLine
|
<powerLine
|
||||||
:cur_pvArr="cur_pvArr"
|
:cur_pvArr="cur_pvArr"
|
||||||
v-if="cur_pvArrFlag"
|
v-if="cur_pvArrFlag"
|
||||||
:key="refreshkey"
|
:key="refreshkey_Curves"
|
||||||
></powerLine>
|
></powerLine>
|
||||||
</div>
|
</div>
|
||||||
<div class="infotitle">
|
<div class="infotitle">
|
||||||
<span>实时功率曲线</span>
|
<span>实时功率曲线</span>
|
||||||
<div class="timeBox">
|
<div class="timeBox">
|
||||||
<el-date-picker
|
<el-date-picker
|
||||||
|
class="customPicker"
|
||||||
v-model="value1"
|
popper-class="customDatePicker"
|
||||||
type="date"
|
type="date"
|
||||||
placeholder="Pick a date"
|
v-model="selectDataPv"
|
||||||
:default-value="new Date(2010, 9, 1)"
|
@change="selectDatePvChange"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -175,7 +190,7 @@
|
||||||
</div> -->
|
</div> -->
|
||||||
<rateLine
|
<rateLine
|
||||||
:pvArr="pvArr"
|
:pvArr="pvArr"
|
||||||
v-if="pvArrFlag"
|
v-if="refreshkey_pv"
|
||||||
:key="refreshkey"
|
:key="refreshkey"
|
||||||
></rateLine>
|
></rateLine>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -231,6 +246,7 @@ import {
|
||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
inject,
|
inject,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
|
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import { getColorFun } from "@/hooks/getColorFun/index";
|
import { getColorFun } from "@/hooks/getColorFun/index";
|
||||||
import { app_load, api_send, api_register } from "@/ue4Player/app";
|
import { app_load, api_send, api_register } from "@/ue4Player/app";
|
||||||
|
|
@ -238,84 +254,120 @@ import tree from "@/views/commonPage/pvTree.vue";
|
||||||
import powerLine from "./powerLine.vue";
|
import powerLine from "./powerLine.vue";
|
||||||
import rateLine from "./rateLine.vue";
|
import rateLine from "./rateLine.vue";
|
||||||
import timePvLine from "./timePvLine.vue";
|
import timePvLine from "./timePvLine.vue";
|
||||||
|
import { getNowDate } from "@/hooks/getDate";
|
||||||
import { useNow, useDateFormat } from "@vueuse/core";
|
import { useNow, useDateFormat } from "@vueuse/core";
|
||||||
import { id } from "element-plus/es/locale/index.mjs";
|
import { id } from "element-plus/es/locale/index.mjs";
|
||||||
import { curpower_api } from "@/api/pvPage/pvApi";
|
import { curpower_api, pvCurInfo_api } from "@/api/pvPage/pvApi";
|
||||||
import { pvApi } from "@/api/Osp/svgApi";
|
import { pvApi } from "@/api/Osp/svgApi";
|
||||||
|
import { log } from "echarts/types/src/util/log.js";
|
||||||
|
let citySourceId = "8af8470a47aad8e20147aad92e400335";
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
let Objinput = { orgID: "8af8470a47aad8e20147aad92e400335" }; //全部 获取光伏实时发电量
|
getpvCurInfo({ orgID: citySourceId }) //获取光伏信息 有城南id可得
|
||||||
getCurves(Objinput); //获取城南的接口{orgID}
|
getCurves({ orgID: citySourceId }); //获取光伏的接口发电量 有城南id可得
|
||||||
let inputdata = { mrid: "03DKX-24289" };
|
getpv({ orgID: citySourceId }); //光伏功率曲线 有城南id可得
|
||||||
getpv(inputdata); //光伏功率曲线
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const getTreeNode = (treeNode: any) => {
|
|
||||||
let Objinput = {
|
|
||||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
|
||||||
mrid: treeNode.key,
|
|
||||||
}; //全部 获取光伏实时发电量
|
|
||||||
|
|
||||||
getCurves(Objinput); //获取光伏的接口发电量
|
let treeNodeId:any=ref(null) //节点id
|
||||||
let inputdata = { mrid: treeNode.key };
|
//设备树节点操作模块
|
||||||
getpv(inputdata);
|
const getTreeNode = (treeNode: any) => {
|
||||||
|
// console.log('设备树的节点',treeNode)
|
||||||
|
treeNodeId.value=treeNode.data //将设备树节点保存起来
|
||||||
|
|
||||||
};
|
};
|
||||||
// 当日累计发电量
|
watch(() => treeNodeId.value,()=>{
|
||||||
|
refreshkey_pv.value+=1
|
||||||
|
refreshkey_Curves.value += 1;
|
||||||
|
console.log('设备树节点修改后监听事件',treeNodeId.value);
|
||||||
|
//通过设备树节点id获取数据
|
||||||
|
let apipv={ orgID: citySourceId,type:treeNodeId.value.type,mrid:treeNodeId.value.id }
|
||||||
|
getpvCurInfo(apipv) //获取光伏信息 入参orgID、type和id
|
||||||
|
getCurves(apipv); //获取光伏的接口发电量
|
||||||
|
getpv(apipv);//光伏功率曲线
|
||||||
|
})
|
||||||
|
|
||||||
|
// 模块1 光伏实时信息
|
||||||
|
const getpvCurInfo = (datares: any) => {
|
||||||
|
console.log(datares,'pv');
|
||||||
|
|
||||||
|
pvCurInfo_api(datares)
|
||||||
|
.then((res) => {
|
||||||
|
//实时量测信息
|
||||||
|
if (res.data) {
|
||||||
|
if (res.data.total) {
|
||||||
|
total_cur.value = Number(res.data.total).toFixed(2);
|
||||||
|
}
|
||||||
|
if (res.data["380V"]) {
|
||||||
|
power380V.value = Number(res.data["380V"]).toFixed(2);
|
||||||
|
}
|
||||||
|
if (res.data["35kV"]) {
|
||||||
|
power35kv.value = Number(res.data["35kV"]).toFixed(2);
|
||||||
|
}
|
||||||
|
if (res.data["10kV"]) {
|
||||||
|
power10kv.value = Number(res.data["10kV"]).toFixed(2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch();
|
||||||
|
};
|
||||||
|
|
||||||
|
//模块2 当日累计发电量
|
||||||
let total_cur = ref("0");
|
let total_cur = ref("0");
|
||||||
let power35kv = ref("0");
|
let power35kv = ref("0");
|
||||||
let power10kv = ref("0");
|
let power10kv = ref("0");
|
||||||
let power380V = ref("0");
|
let power380V = ref("0");
|
||||||
let cur_pvArrFlag = ref(false);
|
let cur_pvArrFlag = ref(false);
|
||||||
let cur_pvArr = reactive([]);
|
let cur_pvArr = reactive([]);
|
||||||
|
let selectDataCurves = ref(getNowDate()); //发电量曲线日期框绑定值
|
||||||
|
let refreshkey_Curves=ref(0)
|
||||||
// 获取光伏实时发电量
|
// 获取光伏实时发电量
|
||||||
const getCurves = (datares: any) => {
|
const getCurves = (datares: any) => {
|
||||||
curpower_api(datares)
|
curpower_api(datares)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
console.log("res", res);
|
refreshkey_Curves.value += 1;
|
||||||
//实时量测信息
|
|
||||||
if (res.data) {
|
|
||||||
if (res.data.total) {
|
|
||||||
total_cur.value = res.data.total;
|
|
||||||
}
|
|
||||||
if (res.data["380V"]) {
|
|
||||||
power380V.value = res.data["380V"];
|
|
||||||
}
|
|
||||||
if (res.data["35kV"]) {
|
|
||||||
power35kv.value = res.data["35kV"];
|
|
||||||
}
|
|
||||||
if (res.data["10kV"]) {
|
|
||||||
power10kv.value = res.data["10kV"];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 发电量曲线
|
// 发电量曲线
|
||||||
if (res.data.data) {
|
if (res.data) {
|
||||||
cur_pvArrFlag.value = true;
|
cur_pvArrFlag.value = true;
|
||||||
cur_pvArr = res.data.data;
|
cur_pvArr = res.data;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) => {
|
.catch((error) => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
//发电量按日期历史查询功能
|
||||||
|
const selectDateCurvesChange = (val: any) => {
|
||||||
|
// selectDataCurves.value = val;
|
||||||
|
getCurves({ orgID: citySourceId,date:val }); //获取光伏的接口发电量
|
||||||
|
};
|
||||||
|
|
||||||
let pvArr = reactive([]); //光伏
|
let pvArr = reactive([]); //光伏
|
||||||
let pvArrFlag = ref<boolean>(false);
|
let pvArrFlag = ref<boolean>(false);
|
||||||
// 获取光伏功率曲线
|
let selectDataPv = ref(getNowDate()); //功率曲线日期框绑定值
|
||||||
// let refreshkey=ref(1)
|
|
||||||
|
//模块3 获取光伏功率曲线
|
||||||
|
let refreshkey_pv=ref(1)
|
||||||
const getpv = (inputdata: any) => {
|
const getpv = (inputdata: any) => {
|
||||||
pvApi(inputdata).then((res) => {
|
pvApi(inputdata).then((res) => {
|
||||||
console.log(res, "respv");
|
|
||||||
pvArr = res.data;
|
pvArr = res.data;
|
||||||
console.log(pvArr, "pvArr");
|
|
||||||
refreshkey.value += 1;
|
refreshkey.value += 1;
|
||||||
if (pvArr.length > 0) {
|
if (pvArr.length > 0) {
|
||||||
pvArrFlag.value = true;
|
pvArrFlag.value = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
//光伏按日期历史查询功能
|
||||||
|
const selectDatePvChange = (val: any) => {
|
||||||
|
console.log(val, "日期框修改值");
|
||||||
|
refreshkey_pv.value+=1
|
||||||
|
getpv({ orgID: citySourceId,data: val })
|
||||||
|
};
|
||||||
|
|
||||||
const HMS = useDateFormat(useNow(), "HH:mm:ss"); //当前时间
|
const HMS = useDateFormat(useNow(), "HH:mm:ss"); //当前时间
|
||||||
const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //当前日期
|
const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //当前日期
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 左侧------------------------------------------------
|
// 左侧------------------------------------------------
|
||||||
|
|
||||||
// 设备树标识
|
// 设备树标识
|
||||||
|
|
@ -721,9 +773,8 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
.timeBox {
|
.timeBox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 2%;
|
right: 3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.info1 {
|
.info1 {
|
||||||
height: changeHeight(359);
|
height: changeHeight(359);
|
||||||
|
|
@ -828,6 +879,7 @@ const styleVar = computed(() => {
|
||||||
.info3 {
|
.info3 {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: changeHeight(600);
|
height: changeHeight(600);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
.btnList {
|
.btnList {
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
|
|
@ -988,5 +1040,9 @@ const styleVar = computed(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
:deep(.el-input__wrapper) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: 0 0 0 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import {
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||||
import "echarts/lib/component/dataZoom";
|
import "echarts/lib/component/dataZoom";
|
||||||
|
import { pa } from "element-plus/es/locales.mjs";
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
drawOneLine(props.cur_pvArr);
|
drawOneLine(props.cur_pvArr);
|
||||||
});
|
});
|
||||||
|
|
@ -46,7 +47,7 @@ const drawOneLine = (arr: any) => {
|
||||||
let str = `
|
let str = `
|
||||||
<div style="width:100%:height:100%">
|
<div style="width:100%:height:100%">
|
||||||
<div style="display:flex;justify-content:space-between;"> ${
|
<div style="display:flex;justify-content:space-between;"> ${
|
||||||
param[0].name.split(" ")[0]
|
param[0].name
|
||||||
}</div>
|
}</div>
|
||||||
${getDom(param)}
|
${getDom(param)}
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
@ -80,7 +81,7 @@ const drawOneLine = (arr: any) => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "25%",
|
top: "15%",
|
||||||
left: "8%",
|
left: "8%",
|
||||||
right: "8%",
|
right: "8%",
|
||||||
bottom: "13%",
|
bottom: "13%",
|
||||||
|
|
@ -96,9 +97,10 @@ const drawOneLine = (arr: any) => {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: transformFontSize(35),
|
fontSize: transformFontSize(35),
|
||||||
padding: [0, 0, 0, 30],
|
padding: [0, 0, 0, 30],
|
||||||
// formatter: function (param: any) {
|
formatter: function (param: any) {
|
||||||
// return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
|
let paramspit=param.split(' ')
|
||||||
// },
|
return paramspit[0] + "\n" + paramspit[1]; // 双行显示，\n 换行
|
||||||
|
},
|
||||||
},
|
},
|
||||||
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
|
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
|
||||||
data: arr.map((rtime) => rtime?.timeStamp),
|
data: arr.map((rtime) => rtime?.timeStamp),
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,7 @@ const drawOneLine = (arr:any) => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
top: "0%",
|
top: "5%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
orient: "vertical",
|
orient: "vertical",
|
||||||
// data: ["实时功率", "短期预测功率", "超短期预测功率"],
|
// data: ["实时功率", "短期预测功率", "超短期预测功率"],
|
||||||
|
|
@ -80,7 +80,7 @@ const drawOneLine = (arr:any) => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: "25%",
|
top: "15%",
|
||||||
left: "8%",
|
left: "8%",
|
||||||
right: "8%",
|
right: "8%",
|
||||||
bottom: "13%",
|
bottom: "13%",
|
||||||
|
|
|
||||||
|
|
@ -90,8 +90,9 @@ export default defineConfig({
|
||||||
"/api": {
|
"/api": {
|
||||||
// target: "http://192.168.43.48:8080",
|
// target: "http://192.168.43.48:8080",
|
||||||
// 测试地址 gu
|
// 测试地址 gu
|
||||||
target: "http://192.168.18.109:8080",
|
// target: "http://192.168.18.105:8080",
|
||||||
|
// target: "http://127.0.0.1:5173",
|
||||||
|
target: "http://localhost:18082",
|
||||||
// 天津地址
|
// 天津地址
|
||||||
// target:"http://192.168.5.102:18801",
|
// target:"http://192.168.5.102:18801",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|
@ -101,9 +102,10 @@ export default defineConfig({
|
||||||
secure: false,
|
secure: false,
|
||||||
},
|
},
|
||||||
"/api-svg": {
|
"/api-svg": {
|
||||||
// target: "http://127.0.0.1:19081",
|
// target: "http://127.0.0.1:5173",
|
||||||
|
target: "http://localhost:18082",
|
||||||
// 测试地址 gu
|
// 测试地址 gu
|
||||||
target: "http://192.168.18.109:8080",
|
// target: "http://192.168.18.105:8080",
|
||||||
// 天津地址
|
// 天津地址
|
||||||
// target:"http://192.168.5.102:18801",
|
// target:"http://192.168.5.102:18801",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|
@ -113,9 +115,10 @@ export default defineConfig({
|
||||||
secure: false,
|
secure: false,
|
||||||
},
|
},
|
||||||
"/api_car": {
|
"/api_car": {
|
||||||
// target: "http://127.0.0.1:16091",
|
// target: "http://127.0.0.1:5173",
|
||||||
|
target: "http://localhost:18082",
|
||||||
// 测试地址 gu
|
// 测试地址 gu
|
||||||
target: "http://192.168.18.109:8080",
|
// target: "http://192.168.18.105:8080",
|
||||||
// 天津地址
|
// 天津地址
|
||||||
// target:"http://192.168.5.102:18801",
|
// target:"http://192.168.5.102:18801",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|
@ -125,7 +128,7 @@ export default defineConfig({
|
||||||
secure: false,
|
secure: false,
|
||||||
},
|
},
|
||||||
// "/ba-api": {
|
// "/ba-api": {
|
||||||
// // target: "http://localhost:8080",
|
// target: "http://localhost:8080",
|
||||||
// // 桐乡地址
|
// // 桐乡地址
|
||||||
// // target:"http://localhost:8999",
|
// // target:"http://localhost:8999",
|
||||||
// // 局域网工作站地址
|
// // 局域网工作站地址
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue