content_left

master
kang luyu 2024-11-18 15:10:28 +08:00
parent f9223df2b5
commit e31fdab2a8
18 changed files with 1028 additions and 873 deletions

View File

@ -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%;
}
}

BIN
dist.zip

Binary file not shown.

View File

@ -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',

View File

@ -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,
});
}

View File

View File

@ -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;
if (width > 3000) { //高度大于1080
ratio = width / 4240; if (height > 1080) {
} else if(width>2100){ // 3840*2160 天津城南分辨率
ratio = width / 2220; if (width > 3000) {
// 宁波分辨率 ratio = width / 4240;
// ratio = width / 3220; }
}else if(width>1900){ } else {
ratio = width / 4240; //高度小于1080
if (width > 3000) {
}else{ // 3840*1080 上海院的分辨率
ratio = width / 2620; 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;

View File

@ -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>

View File

@ -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,80 +112,82 @@ 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",
// transformId: node.key,
// });
// if (res.data.energySupplyStation.length || res.data.dwellerPile.length) {
// let datanames = [];
// if (res.data.energySupplyStation.length) {
// datanames.push({
// name: `(${res.data.energySupplyStation.length})`,
// id: "chongdianzhan",
// });
// }
// if (res.data.dwellerPile.length) {
// datanames.push({
// name: `(${res.data.dwellerPile.length})`,
// id: "chongdianzhuang",
// });
// }
// resolve(datanames);
// } else {
// resolve([{ name: "", leaf: true }]);
// console.log(res); //
// }
// }
// else if (node.level === 5) {
// if (node.key === "chongdianzhan") {
// if (res.data.energySupplyStation.length) {
// resolve(
// res.data.energySupplyStation.map((item) => ({
// id: item.mrid,
// name: item.name,
// type: item.type,
// }))
// );
// }
// }
// if (node.key === "chongdianzhuang") {
// if (res.data.dwellerPile.length) {
// resolve(
// res.data.dwellerPile.map((item) => ({
// id: item.mrid,
// name: item.name,
// type: item.type,
// }))
// );
// }
// }
// resolve();
// resolve([
// {
// name: `${node.level + 1}` + +new Date(),
// id: `${+new Date()}`,
// },
// ]);
// }
else if (node.level === 3) {
let result = await carTree_api2({
orgID: "8af8470a47aad8e20147aad92e400335", orgID: "8af8470a47aad8e20147aad92e400335",
transformId: node.key, mrid: node.key,
}); });
if (res.data.energySupplyStation.length || res.data.dwellerPile.length) { resolve(result.data);
let datanames = []; } else if (node.level > 3) {
resolve(node.data.children);
if (res.data.energySupplyStation.length) {
datanames.push({
name: `充电站(${res.data.energySupplyStation.length})`,
id: "chongdianzhan",
});
}
if (res.data.dwellerPile.length) {
datanames.push({
name: `居民充电桩(${res.data.dwellerPile.length})`,
id: "chongdianzhuang",
});
}
resolve(datanames);
} else {
resolve([{ name: "暂无数据", leaf: true }]);
console.log(res); //
}
} else if (node.level === 5) {
//
let res = await treeSecond({
orgID: "8af8470a47aad8e20147aad92e400335",
transformId: node.parent.key,
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
});
if (node.key === "chongdianzhan") {
if (res.data.energySupplyStation.length) {
resolve(
res.data.energySupplyStation.map((item) => ({
id: item.mrid,
name: item.name,
type: item.type,
}))
);
}
}
if (node.key === "chongdianzhuang") {
if (res.data.dwellerPile.length) {
resolve(
res.data.dwellerPile.map((item) => ({
id: item.mrid,
name: item.name,
type: item.type,
}))
);
}
}
// resolve();
// resolve([
// {
// name: `${node.level + 1}` + +new Date(),
// id: `${+new Date()}`,
// },
// ]);
} else {
resolve([{ name: "暂无数据", leaf: true }]);
} }
}; };
@ -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>

View File

@ -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>
@ -28,7 +34,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,pvTree_api } from "@/api/ajust/tree"; import { treeT, treeSecond, pvTree_api } from "@/api/ajust/tree";
// defineProps<{ // defineProps<{
// elec_list: EList[] // elec_list: EList[]
@ -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",
});
}
resolve(datanames);
} else {
resolve([{ name: "加载数据", leaf: true }]);
console.log(res); //
}
} else if (node.level === 5) {
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,
}))
);
}
// resolve();
// resolve([
// {
// name: `${node.level + 1}` + +new Date(),
// id: `${+new Date()}`,
// },
// ]);
} else {
resolve([{ name: "加载数据", leaf: true }]);
} }
//
// 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",
// });
// }
// resolve(datanames);
// } else {
// resolve([{ name: "", leaf: true }]);
// console.log(res); //
// }
// }
// else if (node.level === 5) {
// else if (node.level === 4||node.level===5) {
// 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
emits("update-node-key", node); //id,
if (node.level === 6) {
//4 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>

View File

@ -1,26 +1,33 @@
<template> <template>
<div class="soureTree"> <div class="tree">
<!-- <div class="source_label"> <el-tree
<div class="elec_box_list" v-for="(item, index) in elec_list" :key="index" @click="labelFlag(item.id)" ref="targetTreeRef"
:class="[item.id === label_falg ? 'active' : '']"> :data="treeData"
{{ item.label }} node-key="id"
</div> :props="targetProps"
</div> --> :default-expanded-keys="['tongxiang']"
<div class="source_tree"> lazy
<div class="tree"> :load="loadNode"
<el-tree @node-click="handleTargetInfo"
ref="targetTreeRef" :expand-on-click-node="false"
:data="treeData" empty-text="数据读取中..."
node-key="id" >
:props="targetProps" <template v-slot:default="{ node }">
:default-expanded-keys="['tongxiang']" <div
lazy style="
:load="loadNode" text-overflow: ellipsis;
@node-click="handleTargetInfo" text-align: left;
:expand-on-click-node="false" white-space: nowrap;
empty-text="数据读取中..." width: 82%;
></el-tree> overflow: hidden;
<!-- <el-tree ref="targetTreeRef" :data="treeData" :highlight-keywords="keyword" :props="props" :load="loadNode" lazy "
:title="node.label"
>
{{ node.label }}
</div>
</template>
</el-tree>
<!-- <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 }">
<div :class="`${renderContentColor(node)} cusIcon`"></div> <div :class="`${renderContentColor(node)} cusIcon`"></div>
@ -28,8 +35,6 @@
:title="node.label">{{ node.label }}</div> :title="node.label">{{ node.label }}</div>
</template> </template>
</el-tree> --> </el-tree> -->
</div>
</div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -113,139 +118,153 @@ 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 ( resolve(result.data);
res.data.photoVoltaicUnit.length || } else if (node.level > 3) {
res.data.energySupplyStation.length || resolve(node.data.children);
res.data.batteryUnit.length ||
res.data.dwellerPile.length
) {
let datanames = [];
if (res.data.photoVoltaicUnit.length) {
datanames.push({
name: `光伏(${res.data.photoVoltaicUnit.length})`,
id: "guanafu",
});
}
if (res.data.energySupplyStation.length) {
datanames.push({
name: `充电站(${res.data.energySupplyStation.length})`,
id: "chongdianzhan",
});
}
if (res.data.batteryUnit.length) {
datanames.push({
name: `储能(${res.data.batteryUnit.length})`,
id: "chuneng",
});
}
if (res.data.dwellerPile.length) {
datanames.push({
name: `居民充电桩(${res.data.dwellerPile.length})`,
id: "chongdianzhuang",
});
}
resolve(datanames);
} else {
resolve([{ name: "加载数据", leaf: true }]);
}
} else if (node.level === 5) {
console.log(node.parent, node.level);
//
let res = await treeSecond({
orgID: "8af8470a47aad8e20147aad92e400335",
transformId: node.parent.key,
// transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
});
console.log(node, node.parent, "父节点");
//
if (node.key === "guanafu") {
if (res.data.photoVoltaicUnit.length) {
// map
resolve(
res.data.photoVoltaicUnit.map((item) => ({
id: item.mrid,
name: item.name,
}))
);
}
}
if (node.key === "chongdianzhan") {
if (res.data.energySupplyStation.length) {
resolve(
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([
// {
// name: `${node.level + 1}` + +new Date(),
// id: `${+new Date()}`,
// },
// ]);
} else {
resolve([{ name: "加载数据", leaf: true }]);
} }
// else if (node.level > 0 && node.level < 4) {
// //,.
// resolve(node.data.children);
// } else if (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 ||
// res.data.dwellerPile.length
// ) {
// let datanames = [];
// if (res.data.photoVoltaicUnit.length) {
// datanames.push({
// name: `(${res.data.photoVoltaicUnit.length})`,
// id: "guanafu",
// });
// }
// if (res.data.energySupplyStation.length) {
// datanames.push({
// name: `(${res.data.energySupplyStation.length})`,
// id: "chongdianzhan",
// });
// }
// if (res.data.batteryUnit.length) {
// datanames.push({
// name: `(${res.data.batteryUnit.length})`,
// id: "chuneng",
// });
// }
// if (res.data.dwellerPile.length) {
// datanames.push({
// name: `(${res.data.dwellerPile.length})`,
// id: "chongdianzhuang",
// });
// }
// resolve(datanames);
// } else {
// resolve([{ name: "", leaf: true }]);
// }
// } else if (node.level === 5) {
// console.log(node.parent, node.level);
// //
// let res = await treeSecond({
// orgID: "8af8470a47aad8e20147aad92e400335",
// transformId: node.parent.key,
// // transformId: "ed7d892d4f8af8514b6dc01fde016ded55e58",
// });
// console.log(node, node.parent, "");
// //
// if (node.key === "guanafu") {
// if (res.data.photoVoltaicUnit.length) {
// // map
// resolve(
// res.data.photoVoltaicUnit.map((item) => ({
// id: item.mrid,
// name: item.name,
// }))
// );
// }
// }
// if (node.key === "chongdianzhan") {
// if (res.data.energySupplyStation.length) {
// resolve(
// 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([
// // {
// // name: `${node.level + 1}` + +new Date(),
// // id: `${+new Date()}`,
// // },
// // ]);
// } else {
// resolve([{ name: "", leaf: true }]);
// }
}; };
const emits = defineEmits(["update-node-key"]); ////使 const emits = defineEmits(["update-node-key"]); ////使
// //
// target // target
const handleTargetInfo = (data: TreeData, node: any) => { const handleTargetInfo = (data: TreeData, node: any) => {
// targetInfo.resultArr = []; // targetInfo.resultArr = [];
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);
} }

View File

@ -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>

View File

@ -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>

View File

@ -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;
} }

File diff suppressed because it is too large Load Diff

View File

@ -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) // orgIDtypeid
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"); //
// ------------------------------------------------ // ------------------------------------------------
// //
@ -719,11 +771,10 @@ const styleVar = computed(() => {
span { span {
margin-left: 7%; margin-left: 7%;
} }
.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>

View File

@ -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),

View File

@ -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%",

View File

@ -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",
// // 局域网工作站地址 // // 局域网工作站地址