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
|
||||
|
||||
- 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 {
|
||||
orgID?: string,
|
||||
|
||||
mrid?:string,
|
||||
}
|
||||
|
||||
// 设备树 0 一级服务
|
||||
export function treeT(data: idInfo) {
|
||||
return request({
|
||||
url: '/api/wwpm/biz/v1/device_0',
|
||||
url: '/api/wwpm/biz/v1/er_tree',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
|
|
@ -21,9 +21,9 @@ interface treeInfo {
|
|||
transformId: string;
|
||||
}
|
||||
// 设备树 1 二级服务
|
||||
export function treeSecond(data: treeInfo) {
|
||||
export function treeSecond(data: idInfo) {
|
||||
return request({
|
||||
url: '/api/wwpm/biz/v1/device_1',
|
||||
url: '/api/wwpm/biz/v1/er_tree/node',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
|
|
@ -32,12 +32,22 @@ export function treeSecond(data: treeInfo) {
|
|||
// 设备树 充电站
|
||||
export function carTree_api(data: idInfo) {
|
||||
return request({
|
||||
url: '/api/wwpm/biz/v1/car_tree',
|
||||
url: '/api/wwpm/biz/v1/cn_tree',
|
||||
method: 'POST',
|
||||
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) {
|
||||
return request({
|
||||
url: '/api/wwpm/biz/v1/pv_tree',
|
||||
|
|
|
|||
|
|
@ -11,3 +11,12 @@ interface idInfo {
|
|||
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 height = window.screen.height;
|
||||
let ratio: any = 0
|
||||
if (width > 3000) {
|
||||
ratio = width / 4240;
|
||||
} else if(width>2100){
|
||||
ratio = width / 2220;
|
||||
// 宁波分辨率
|
||||
// ratio = width / 3220;
|
||||
}else if(width>1900){
|
||||
ratio = width / 4240;
|
||||
|
||||
}else{
|
||||
ratio = width / 2620;
|
||||
let ratio: any = 0;
|
||||
//高度大于1080
|
||||
if (height > 1080) {
|
||||
// 3840*2160 天津城南分辨率
|
||||
if (width > 3000) {
|
||||
ratio = width / 4240;
|
||||
}
|
||||
} else {
|
||||
//高度小于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);
|
||||
};
|
||||
export default transformFontSize
|
||||
export default transformFontSize;
|
||||
|
|
|
|||
|
|
@ -165,6 +165,7 @@
|
|||
}
|
||||
|
||||
.header_layout {
|
||||
height: changeHeight(166);
|
||||
/* height: 186px; */
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -215,10 +216,6 @@
|
|||
flex: 1;
|
||||
margin-top: 3%;
|
||||
}
|
||||
// @media screen and (max-width:1920px) {
|
||||
// .main {
|
||||
// margin-top: 6%;
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -15,11 +15,15 @@
|
|||
:expand-on-click-node="false"
|
||||
empty-text="数据读取中..."
|
||||
:props="targetProps"
|
||||
:default-expanded-keys="['tongxiang']"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
@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>
|
||||
|
|
@ -28,7 +32,7 @@
|
|||
import { onMounted, ref, watch } from "vue";
|
||||
import { ElTree } from "element-plus";
|
||||
import treeDatas from "@/assets/json/tree-right2.json";
|
||||
import { treeT, treeSecond, carTree_api } from "@/api/ajust/tree";
|
||||
import { carTree_api, carTree_api2 } from "@/api/ajust/tree";
|
||||
|
||||
// defineProps<{
|
||||
// elec_list: EList[]
|
||||
|
|
@ -108,80 +112,82 @@ const loadNode = async (node: any, resolve: any) => {
|
|||
});
|
||||
treeData = result.data;
|
||||
resolve(treeData);
|
||||
} else if (node.level > 0 && node.level < 4) {
|
||||
} else if (node.level > 0 && node.level < 3) {
|
||||
//默认展开的层级,需要默认几层就判断一下.
|
||||
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",
|
||||
transformId: node.key,
|
||||
mrid: 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) {
|
||||
//懒加载
|
||||
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 }]);
|
||||
resolve(result.data);
|
||||
} else if (node.level > 3) {
|
||||
resolve(node.data.children);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -255,8 +261,8 @@ const handleTarget = (node: any) => {
|
|||
|
||||
.tree {
|
||||
// height: 1300px;
|
||||
height: changeHeight(980);
|
||||
width: changeWidth(901.19);
|
||||
// height: changeHeight(980);
|
||||
// width: changeWidth(901.19);
|
||||
margin-left: changeHeight(56);
|
||||
}
|
||||
|
||||
|
|
@ -392,7 +398,12 @@ const handleTarget = (node: any) => {
|
|||
|
||||
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
||||
: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) {
|
||||
|
|
@ -610,4 +621,5 @@ const handleTarget = (node: any) => {
|
|||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,19 @@
|
|||
:data="treeData"
|
||||
node-key="id"
|
||||
:props="targetProps"
|
||||
:default-expanded-keys="['tongxiang']"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
@node-click="handleTargetInfo"
|
||||
:expand-on-click-node="false"
|
||||
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>
|
||||
|
|
@ -28,7 +34,7 @@
|
|||
import { onMounted, ref, watch } from "vue";
|
||||
import { ElTree } from "element-plus";
|
||||
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<{
|
||||
// elec_list: EList[]
|
||||
|
|
@ -110,65 +116,65 @@ const loadNode = async (node: any, resolve: any) => {
|
|||
}).then((res) => {
|
||||
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);
|
||||
} 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"]); ////接收父组件的事件，子组件中触发父组件使用
|
||||
|
|
@ -182,13 +188,8 @@ const handleTargetInfo = (data: TreeData, node: any) => {
|
|||
// handleTarget(e);
|
||||
// 利用设备中的信息调用接口
|
||||
// ---------
|
||||
// emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||
|
||||
if (node.level === 6) {
|
||||
//点中第4层 为单个光伏时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
||||
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||
}
|
||||
|
||||
//点中每一层设备树 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
||||
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||
// ---------
|
||||
};
|
||||
const handleTarget = (node: any) => {
|
||||
|
|
@ -252,8 +253,8 @@ const handleTarget = (node: any) => {
|
|||
|
||||
.tree {
|
||||
// height: 1300px;
|
||||
height: changeHeight(980);
|
||||
width: changeWidth(901.19);
|
||||
// height: changeHeight(980);
|
||||
// width: changeWidth(901.19);
|
||||
margin-left: changeHeight(56);
|
||||
}
|
||||
|
||||
|
|
@ -389,7 +390,12 @@ const handleTarget = (node: any) => {
|
|||
|
||||
// 修改鼠标点击时的颜色以及节点失去焦点时的背景色
|
||||
: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) {
|
||||
|
|
@ -607,4 +613,5 @@ const handleTarget = (node: any) => {
|
|||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,33 @@
|
|||
<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">
|
||||
<el-tree
|
||||
ref="targetTreeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:props="targetProps"
|
||||
:default-expanded-keys="['tongxiang']"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
@node-click="handleTargetInfo"
|
||||
:expand-on-click-node="false"
|
||||
empty-text="数据读取中..."
|
||||
></el-tree>
|
||||
<!-- <el-tree ref="targetTreeRef" :data="treeData" :highlight-keywords="keyword" :props="props" :load="loadNode" lazy
|
||||
<div class="tree">
|
||||
<el-tree
|
||||
ref="targetTreeRef"
|
||||
:data="treeData"
|
||||
node-key="id"
|
||||
:props="targetProps"
|
||||
:default-expanded-keys="['tongxiang']"
|
||||
lazy
|
||||
:load="loadNode"
|
||||
@node-click="handleTargetInfo"
|
||||
:expand-on-click-node="false"
|
||||
empty-text="数据读取中..."
|
||||
>
|
||||
<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
|
||||
node-key="ID" @node-click="handleNodeClick" :expand-on-click-node="false" empty-text="数据读取中..." v-else>
|
||||
<template v-slot:default="{ node }">
|
||||
<div :class="`${renderContentColor(node)} cusIcon`"></div>
|
||||
|
|
@ -28,8 +35,6 @@
|
|||
:title="node.label">{{ node.label }}</div>
|
||||
</template>
|
||||
</el-tree> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
|
@ -113,139 +118,153 @@ const loadNode = async (node: any, resolve: any) => {
|
|||
// let res= await treeT({
|
||||
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
// });
|
||||
treeT({
|
||||
let treeData = [];
|
||||
let result = await treeT({
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
}).then((res) => {
|
||||
resolve(res.data); //默认加载第1层
|
||||
});
|
||||
|
||||
} else if (node.level > 0 && node.level < 4) {
|
||||
treeData = result.data;
|
||||
resolve(treeData);
|
||||
// treeT({
|
||||
// orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
// }).then((res) => {
|
||||
// resolve(res.data); //默认加载第1层
|
||||
// });
|
||||
} else if (node.level > 0 && node.level < 3) {
|
||||
//默认展开的层级,需要默认几层就判断一下.
|
||||
resolve(node.data.children);
|
||||
} else if (node.level === 4) {
|
||||
|
||||
|
||||
//懒加载
|
||||
let res = await treeSecond({
|
||||
} else if (node.level === 3) {
|
||||
let result = await treeSecond({
|
||||
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",
|
||||
});
|
||||
}
|
||||
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 }]);
|
||||
resolve(result.data);
|
||||
} else if (node.level > 3) {
|
||||
resolve(node.data.children);
|
||||
}
|
||||
// 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"]); ////接收父组件的事件，子组件中触发父组件使用
|
||||
|
||||
// 点击树节点
|
||||
// 处理选中target数据，最终得到由高层到底层的数组
|
||||
const handleTargetInfo = (data: TreeData, node: any) => {
|
||||
const handleTargetInfo = (data: TreeData, node: any) => {
|
||||
// targetInfo.resultArr = [];
|
||||
|
||||
console.log("点击的节点",node);
|
||||
console.log("点击的节点", node);
|
||||
|
||||
if (node.level === 4||node.level===3) {
|
||||
console.log(node.level,'0000',node.key);
|
||||
if (node.level === 4 || node.level === 3) {
|
||||
console.log(node.level, "0000", node.key);
|
||||
|
||||
console.log("zheshishaya");
|
||||
//点中第4层 为台区时 去返回id到父组件 并让父组件获取可调资源的相关信息和表格
|
||||
// emits("update-node-key", node.key); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||
emits("update-node-key", node); //获取id,用于二级接口服务返回接口给可调资源列表
|
||||
|
||||
}
|
||||
};
|
||||
const handleTarget = (node: any) => {
|
||||
|
|
@ -309,8 +328,8 @@ const handleTarget = (node: any) => {
|
|||
|
||||
.tree {
|
||||
// height: 1300px;
|
||||
height: changeHeight(980);
|
||||
width: changeWidth(901.19);
|
||||
// height: changeHeight(980);
|
||||
// width: changeWidth(901.19);
|
||||
margin-left: changeHeight(56);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -202,6 +202,7 @@ const styleVar = computed(() => {
|
|||
@function changeHeight($height) {
|
||||
@return calc(var(--box-height) * ($height / 2160));
|
||||
}
|
||||
// 上海院分辨率 3840*1080
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
|
|
@ -445,4 +446,20 @@ p {
|
|||
.nav_content .nav_list .nav_right .activeNav {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -181,6 +181,7 @@ const styleVar = computed(() => {
|
|||
@return calc(var(--box-height) * ($height / 1440));
|
||||
}
|
||||
|
||||
|
||||
.bigscreen {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
|
@ -207,6 +208,7 @@ const styleVar = computed(() => {
|
|||
|
||||
.header_layout {
|
||||
/* height: 186px; */
|
||||
height: changeHeight(186);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -256,9 +258,13 @@ const styleVar = computed(() => {
|
|||
flex: 1;
|
||||
margin-top: 4.5%;
|
||||
}
|
||||
// @media screen and (max-width:1920px) {
|
||||
// .main {
|
||||
// margin-top: 6%;
|
||||
// }
|
||||
// }
|
||||
/* 针对3840x1080分辨率的样式 */
|
||||
@media screen and (min-width: 3840px) and (max-height: 2150px) {
|
||||
.main {
|
||||
/* margin-top: 7.8125rem; */
|
||||
flex: 1;
|
||||
margin-top: 3%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -79,10 +79,7 @@
|
|||
|
||||
<div class="info2_m">
|
||||
<div class="top1_box">
|
||||
<img
|
||||
src="@/assets/images/v2-1/store_taiqu.png"
|
||||
alt=""
|
||||
/>
|
||||
<img src="@/assets/images/v2-1/store_taiqu.png" alt="" />
|
||||
<div class="left1_box">
|
||||
<div class="name">
|
||||
<div class="cen">
|
||||
|
|
@ -792,11 +789,11 @@ const submitForm = () => {
|
|||
startTime: datat_start,
|
||||
endTime: datat_end,
|
||||
};
|
||||
const randomDelay=getRandomInt(2000,5000)//取2000-5000ms之间的随机数
|
||||
const randomDelay = getRandomInt(2000, 5000); //取2000-5000ms之间的随机数
|
||||
setTimeout(() => {
|
||||
send_Status.value=false
|
||||
send_Status.value = false;
|
||||
|
||||
ajustCarPageFlag.value=false
|
||||
ajustCarPageFlag.value = false;
|
||||
|
||||
ElMessage({
|
||||
showClose: true,
|
||||
|
|
@ -1132,8 +1129,9 @@ const styleVar = computed(() => {
|
|||
.car_left_box {
|
||||
margin-top: changeHeight(30);
|
||||
width: 100%;
|
||||
// width: changeHeight(961.19);
|
||||
height: changeHeight(1679.23); //内容高度
|
||||
display: flex;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// flex-direction: column;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,6 @@
|
|||
<!-- 光伏页面 -->
|
||||
|
||||
<template>
|
||||
<!-- 光伏页面 -->
|
||||
<div class="pvPage_container" :style="styleVar">
|
||||
<div class="content_left">
|
||||
<div
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<div class="tree_box content_bg">
|
||||
<tree
|
||||
@update:nodeValue="updatePvechart"
|
||||
v-mode="tree_node"
|
||||
v-model="tree_node"
|
||||
@update-node-key="getTreeNode"
|
||||
></tree>
|
||||
</div>
|
||||
|
|
@ -142,23 +142,38 @@
|
|||
</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">
|
||||
<powerLine
|
||||
:cur_pvArr="cur_pvArr"
|
||||
v-if="cur_pvArrFlag"
|
||||
:key="refreshkey"
|
||||
:key="refreshkey_Curves"
|
||||
></powerLine>
|
||||
</div>
|
||||
<div class="infotitle">
|
||||
<span>实时功率曲线</span>
|
||||
<div class="timeBox">
|
||||
<el-date-picker
|
||||
|
||||
v-model="value1"
|
||||
class="customPicker"
|
||||
popper-class="customDatePicker"
|
||||
type="date"
|
||||
placeholder="Pick a date"
|
||||
:default-value="new Date(2010, 9, 1)"
|
||||
v-model="selectDataPv"
|
||||
@change="selectDatePvChange"
|
||||
format="YYYY-MM-DD"
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -175,7 +190,7 @@
|
|||
</div> -->
|
||||
<rateLine
|
||||
:pvArr="pvArr"
|
||||
v-if="pvArrFlag"
|
||||
v-if="refreshkey_pv"
|
||||
:key="refreshkey"
|
||||
></rateLine>
|
||||
</div>
|
||||
|
|
@ -231,6 +246,7 @@ import {
|
|||
getCurrentInstance,
|
||||
inject,
|
||||
} from "vue";
|
||||
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getColorFun } from "@/hooks/getColorFun/index";
|
||||
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 rateLine from "./rateLine.vue";
|
||||
import timePvLine from "./timePvLine.vue";
|
||||
import { getNowDate } from "@/hooks/getDate";
|
||||
import { useNow, useDateFormat } from "@vueuse/core";
|
||||
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 { log } from "echarts/types/src/util/log.js";
|
||||
let citySourceId = "8af8470a47aad8e20147aad92e400335";
|
||||
onMounted(() => {
|
||||
let Objinput = { orgID: "8af8470a47aad8e20147aad92e400335" }; //全部 获取光伏实时发电量
|
||||
getCurves(Objinput); //获取城南的接口{orgID}
|
||||
let inputdata = { mrid: "03DKX-24289" };
|
||||
getpv(inputdata); //光伏功率曲线
|
||||
getpvCurInfo({ orgID: citySourceId }) //获取光伏信息 有城南id可得
|
||||
getCurves({ orgID: citySourceId }); //获取光伏的接口发电量 有城南id可得
|
||||
getpv({ orgID: citySourceId }); //光伏功率曲线 有城南id可得
|
||||
});
|
||||
|
||||
const getTreeNode = (treeNode: any) => {
|
||||
let Objinput = {
|
||||
orgID: "8af8470a47aad8e20147aad92e400335",
|
||||
mrid: treeNode.key,
|
||||
}; //全部 获取光伏实时发电量
|
||||
|
||||
getCurves(Objinput); //获取光伏的接口发电量
|
||||
let inputdata = { mrid: treeNode.key };
|
||||
getpv(inputdata);
|
||||
let treeNodeId:any=ref(null) //节点id
|
||||
//设备树节点操作模块
|
||||
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 power35kv = ref("0");
|
||||
let power10kv = ref("0");
|
||||
let power380V = ref("0");
|
||||
let cur_pvArrFlag = ref(false);
|
||||
let cur_pvArr = reactive([]);
|
||||
let selectDataCurves = ref(getNowDate()); //发电量曲线日期框绑定值
|
||||
let refreshkey_Curves=ref(0)
|
||||
// 获取光伏实时发电量
|
||||
const getCurves = (datares: any) => {
|
||||
curpower_api(datares)
|
||||
.then((res) => {
|
||||
console.log("res", res);
|
||||
//实时量测信息
|
||||
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"];
|
||||
}
|
||||
}
|
||||
refreshkey_Curves.value += 1;
|
||||
// 发电量曲线
|
||||
if (res.data.data) {
|
||||
if (res.data) {
|
||||
cur_pvArrFlag.value = true;
|
||||
cur_pvArr = res.data.data;
|
||||
cur_pvArr = res.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
//发电量按日期历史查询功能
|
||||
const selectDateCurvesChange = (val: any) => {
|
||||
// selectDataCurves.value = val;
|
||||
getCurves({ orgID: citySourceId,date:val }); //获取光伏的接口发电量
|
||||
};
|
||||
|
||||
let pvArr = reactive([]); //光伏
|
||||
let pvArrFlag = ref<boolean>(false);
|
||||
// 获取光伏功率曲线
|
||||
// let refreshkey=ref(1)
|
||||
let selectDataPv = ref(getNowDate()); //功率曲线日期框绑定值
|
||||
|
||||
//模块3 获取光伏功率曲线
|
||||
let refreshkey_pv=ref(1)
|
||||
const getpv = (inputdata: any) => {
|
||||
pvApi(inputdata).then((res) => {
|
||||
console.log(res, "respv");
|
||||
pvArr = res.data;
|
||||
console.log(pvArr, "pvArr");
|
||||
refreshkey.value += 1;
|
||||
if (pvArr.length > 0) {
|
||||
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 YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //当前日期
|
||||
|
||||
|
||||
|
||||
// 左侧------------------------------------------------
|
||||
|
||||
// 设备树标识
|
||||
|
|
@ -719,11 +771,10 @@ const styleVar = computed(() => {
|
|||
span {
|
||||
margin-left: 7%;
|
||||
}
|
||||
.timeBox{
|
||||
.timeBox {
|
||||
position: absolute;
|
||||
right: 2%;
|
||||
right: 3%;
|
||||
}
|
||||
|
||||
}
|
||||
.info1 {
|
||||
height: changeHeight(359);
|
||||
|
|
@ -828,6 +879,7 @@ const styleVar = computed(() => {
|
|||
.info3 {
|
||||
width: 90%;
|
||||
height: changeHeight(600);
|
||||
|
||||
position: relative;
|
||||
.btnList {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {
|
|||
} from "vue";
|
||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||
import "echarts/lib/component/dataZoom";
|
||||
import { pa } from "element-plus/es/locales.mjs";
|
||||
onMounted(() => {
|
||||
drawOneLine(props.cur_pvArr);
|
||||
});
|
||||
|
|
@ -46,7 +47,7 @@ const drawOneLine = (arr: any) => {
|
|||
let str = `
|
||||
<div style="width:100%:height:100%">
|
||||
<div style="display:flex;justify-content:space-between;"> ${
|
||||
param[0].name.split(" ")[0]
|
||||
param[0].name
|
||||
}</div>
|
||||
${getDom(param)}
|
||||
</div>`;
|
||||
|
|
@ -80,7 +81,7 @@ const drawOneLine = (arr: any) => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
top: "15%",
|
||||
left: "8%",
|
||||
right: "8%",
|
||||
bottom: "13%",
|
||||
|
|
@ -96,9 +97,10 @@ const drawOneLine = (arr: any) => {
|
|||
color: "#fff",
|
||||
fontSize: transformFontSize(35),
|
||||
padding: [0, 0, 0, 30],
|
||||
// formatter: function (param: any) {
|
||||
// return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
|
||||
// },
|
||||
formatter: function (param: any) {
|
||||
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: arr.map((rtime) => rtime?.timeStamp),
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ const drawOneLine = (arr:any) => {
|
|||
},
|
||||
},
|
||||
legend: {
|
||||
top: "0%",
|
||||
top: "5%",
|
||||
right: "5%",
|
||||
orient: "vertical",
|
||||
// data: ["实时功率", "短期预测功率", "超短期预测功率"],
|
||||
|
|
@ -80,7 +80,7 @@ const drawOneLine = (arr:any) => {
|
|||
},
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
top: "15%",
|
||||
left: "8%",
|
||||
right: "8%",
|
||||
bottom: "13%",
|
||||
|
|
|
|||
|
|
@ -90,8 +90,9 @@ export default defineConfig({
|
|||
"/api": {
|
||||
// target: "http://192.168.43.48:8080",
|
||||
// 测试地址 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",
|
||||
changeOrigin: true,
|
||||
|
|
@ -101,9 +102,10 @@ export default defineConfig({
|
|||
secure: false,
|
||||
},
|
||||
"/api-svg": {
|
||||
// target: "http://127.0.0.1:19081",
|
||||
// target: "http://127.0.0.1:5173",
|
||||
target: "http://localhost:18082",
|
||||
// 测试地址 gu
|
||||
target: "http://192.168.18.109:8080",
|
||||
// target: "http://192.168.18.105:8080",
|
||||
// 天津地址
|
||||
// target:"http://192.168.5.102:18801",
|
||||
changeOrigin: true,
|
||||
|
|
@ -113,9 +115,10 @@ export default defineConfig({
|
|||
secure: false,
|
||||
},
|
||||
"/api_car": {
|
||||
// target: "http://127.0.0.1:16091",
|
||||
// target: "http://127.0.0.1:5173",
|
||||
target: "http://localhost:18082",
|
||||
// 测试地址 gu
|
||||
target: "http://192.168.18.109:8080",
|
||||
// target: "http://192.168.18.105:8080",
|
||||
// 天津地址
|
||||
// target:"http://192.168.5.102:18801",
|
||||
changeOrigin: true,
|
||||
|
|
@ -125,7 +128,7 @@ export default defineConfig({
|
|||
secure: false,
|
||||
},
|
||||
// "/ba-api": {
|
||||
// // target: "http://localhost:8080",
|
||||
// target: "http://localhost:8080",
|
||||
// // 桐乡地址
|
||||
// // target:"http://localhost:8999",
|
||||
// // 局域网工作站地址
|
||||
|
|
|
|||
Loading…
Reference in New Issue