Compare commits
No commits in common. "2b3dfc5034ed44dcfbf34bce4051adf475fcc6b3" and "d6fa074348d5d29043b154f986ca07e76526ac94" have entirely different histories.
2b3dfc5034
...
d6fa074348
|
|
@ -14,8 +14,7 @@ export function svgdApi(data: any) {
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// osp页面 储能曲线
|
export function buttyApi(data: any) {
|
||||||
export function buttyApi(data: any) {
|
|
||||||
return request({
|
return request({
|
||||||
// url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
|
// url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
|
||||||
// url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
|
// url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
|
||||||
|
|
@ -24,25 +23,5 @@ export function buttyApi(data: any) {
|
||||||
data,
|
data,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// osp页面 光伏曲线
|
|
||||||
export function pvApi(data: any) {
|
|
||||||
return request({
|
|
||||||
// url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
|
|
||||||
// url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
|
|
||||||
url: "/api/wwpm/biz/v1/photo_voltaic/power_curve",
|
|
||||||
method: "POST",
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
// osp页面 用户侧充电桩曲线
|
|
||||||
export function usrzApi(data: any) {
|
|
||||||
return request({
|
|
||||||
// url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
|
|
||||||
// url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
|
|
||||||
url: "/api/wwpm/biz/v1/deweller_pipe/power_curve",
|
|
||||||
method: "POST",
|
|
||||||
data,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,18 +14,16 @@
|
||||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||||
import "echarts/lib/component/dataZoom";
|
import "echarts/lib/component/dataZoom";
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
drawOneLine(props.echartArr);
|
drawOneLine();
|
||||||
});
|
});
|
||||||
const props = defineProps<{
|
|
||||||
echartArr: any[];
|
|
||||||
}>();
|
|
||||||
// 获取echart挂载的DOM节点
|
// 获取echart挂载的DOM节点
|
||||||
const OneLine: any = ref();
|
const OneLine: any = ref();
|
||||||
|
|
||||||
// 获取当前组件实例
|
// 获取当前组件实例
|
||||||
const { proxy }: any = getCurrentInstance();
|
const { proxy }: any = getCurrentInstance();
|
||||||
|
|
||||||
const drawOneLine = (arr: any) => {
|
const drawOneLine = () => {
|
||||||
let myChart = proxy.$echarts.init(OneLine.value);
|
let myChart = proxy.$echarts.init(OneLine.value);
|
||||||
|
|
||||||
myChart.clear();
|
myChart.clear();
|
||||||
|
|
@ -97,8 +95,7 @@
|
||||||
// return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
|
// return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
// 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.slice(-5)),
|
|
||||||
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
|
|
@ -152,9 +149,7 @@
|
||||||
]),
|
]),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
data: arr.map((yitem) => yitem.p),
|
data: [20, 42, 41, 24, 40, 30, 10],
|
||||||
|
|
||||||
// data: [20, 42, 41, 24, 40, 30, 10],
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,174 +1,171 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="OneLine" ref="OneLine"></div>
|
<div class="OneLine" ref="OneLine"></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
ref,
|
ref,
|
||||||
inject,
|
inject,
|
||||||
onBeforeUnmount,
|
onBeforeUnmount,
|
||||||
getCurrentInstance,
|
getCurrentInstance,
|
||||||
onMounted,
|
onMounted,
|
||||||
watchEffect,
|
watchEffect,
|
||||||
} 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";
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
drawOneLine(props.echartArr);
|
drawOneLine();
|
||||||
});
|
});
|
||||||
const props = defineProps<{
|
|
||||||
echartArr: any[];
|
// 获取echart挂载的DOM节点
|
||||||
}>();
|
const OneLine: any = ref();
|
||||||
|
|
||||||
// 获取echart挂载的DOM节点
|
// 获取当前组件实例
|
||||||
const OneLine: any = ref();
|
const { proxy }: any = getCurrentInstance();
|
||||||
|
|
||||||
// 获取当前组件实例
|
const drawOneLine = () => {
|
||||||
const { proxy }: any = getCurrentInstance();
|
let myChart = proxy.$echarts.init(OneLine.value);
|
||||||
|
|
||||||
const drawOneLine = (arr: any) => {
|
myChart.clear();
|
||||||
let myChart = proxy.$echarts.init(OneLine.value);
|
const option = {
|
||||||
|
tooltip: {
|
||||||
myChart.clear();
|
trigger: "axis",
|
||||||
const option = {
|
// axisPointer: { type: 'cross' }
|
||||||
tooltip: {
|
textStyle: {
|
||||||
trigger: "axis",
|
color: "#FFFFFF",
|
||||||
// axisPointer: { type: 'cross' }
|
},
|
||||||
textStyle: {
|
// padding: transformFontSize(15),
|
||||||
color: "#FFFFFF",
|
backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
|
||||||
},
|
borderColor: "rgba(24,178,0,.9)",
|
||||||
// padding: transformFontSize(15),
|
borderRadius: 5,
|
||||||
backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
|
|
||||||
borderColor: "rgba(24,178,0,.9)",
|
formatter: function (param: any) {
|
||||||
borderRadius: 5,
|
let str = `
|
||||||
|
|
||||||
formatter: function (param: any) {
|
|
||||||
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.split(" ")[0]
|
||||||
}</div>
|
}</div>
|
||||||
${getDom(param)}
|
${getDom(param)}
|
||||||
</div>`;
|
</div>`;
|
||||||
function getDom(param: any) {
|
function getDom(param: any) {
|
||||||
let newStr = "";
|
let newStr = "";
|
||||||
param.forEach((item: any) => {
|
param.forEach((item: any) => {
|
||||||
newStr += `<div style="display:flex;"><div>${
|
newStr += `<div style="display:flex;"><div>${
|
||||||
item.seriesName
|
item.seriesName
|
||||||
}：</div><div>${
|
}：</div><div>${
|
||||||
item.value === undefined ? "0" : item.value
|
item.value === undefined ? "0" : item.value
|
||||||
}kW</div></div>`;
|
}kW</div></div>`;
|
||||||
});
|
});
|
||||||
return newStr;
|
return newStr;
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
top: "0%",
|
|
||||||
right: "5%",
|
|
||||||
orient: "vertical",
|
|
||||||
data: ["总功率"],
|
|
||||||
itemWidth: transformFontSize(40),
|
|
||||||
itemHeight: transformFontSize(18),
|
|
||||||
itemGap: transformFontSize(8),
|
|
||||||
textStyle: {
|
|
||||||
fontSize: transformFontSize(35),
|
|
||||||
color: "#FFFFFF",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
top: "25%",
|
|
||||||
left: "8%",
|
|
||||||
right: "8%",
|
|
||||||
bottom: "13%",
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
axisTick: {
|
|
||||||
show: false,
|
|
||||||
alignWithLabel: true,
|
|
||||||
},
|
|
||||||
boundaryGap: false,
|
|
||||||
axisLabel: {
|
|
||||||
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]
|
|
||||||
// },
|
|
||||||
},
|
|
||||||
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
|
|
||||||
data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: true, //y轴轴线
|
|
||||||
},
|
|
||||||
type: "value",
|
|
||||||
name: "kW",
|
|
||||||
// min: 0,
|
|
||||||
// max: 100,
|
|
||||||
nameTextStyle: {
|
|
||||||
//y轴name的颜色
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: transformFontSize(35),
|
|
||||||
padding: [0, 40, 0, 0],
|
|
||||||
},
|
|
||||||
position: "left",
|
|
||||||
axisLabel: {
|
|
||||||
//刻度标签文字的颜色大小
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: transformFontSize(35),
|
|
||||||
formatter: "{value}",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "总功率",
|
|
||||||
type: "line",
|
|
||||||
barWidth: 2, // 柱子宽度核心代码
|
|
||||||
smooth: true,
|
|
||||||
showSymbol: false,
|
|
||||||
itemStyle: {
|
|
||||||
color: "rgba(107, 255, 130,1)",
|
|
||||||
},
|
},
|
||||||
areaStyle: {
|
},
|
||||||
normal: {
|
legend: {
|
||||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
top: "0%",
|
||||||
{
|
right: "5%",
|
||||||
offset: 0,
|
orient: "vertical",
|
||||||
color: "rgba(107, 255, 130, 0.4)",
|
data: ["总功率",],
|
||||||
},
|
itemWidth: transformFontSize(40),
|
||||||
|
itemHeight: transformFontSize(18),
|
||||||
{
|
itemGap:transformFontSize(8),
|
||||||
offset: 1,
|
textStyle: {
|
||||||
|
fontSize: transformFontSize(35),
|
||||||
color: "rgba(107, 255, 130, 0.01)",
|
color: "#FFFFFF",
|
||||||
},
|
},
|
||||||
]),
|
},
|
||||||
|
grid: {
|
||||||
|
top: "25%",
|
||||||
|
left: "8%",
|
||||||
|
right: "8%",
|
||||||
|
bottom: "13%",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
alignWithLabel: true,
|
||||||
|
},
|
||||||
|
boundaryGap: false,
|
||||||
|
axisLabel: {
|
||||||
|
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]
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
|
||||||
|
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: true, //y轴轴线
|
||||||
|
},
|
||||||
|
type: "value",
|
||||||
|
name: "kW",
|
||||||
|
// min: 0,
|
||||||
|
// max: 100,
|
||||||
|
nameTextStyle: {
|
||||||
|
//y轴name的颜色
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: transformFontSize(35),
|
||||||
|
padding: [0, 40, 0, 0],
|
||||||
|
},
|
||||||
|
position: "left",
|
||||||
|
axisLabel: {
|
||||||
|
//刻度标签文字的颜色大小
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: transformFontSize(35),
|
||||||
|
formatter: "{value}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "总功率",
|
||||||
|
type: "line",
|
||||||
|
barWidth: 2, // 柱子宽度核心代码
|
||||||
|
smooth: true,
|
||||||
|
showSymbol: false,
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(107, 255, 130,1)",
|
||||||
},
|
},
|
||||||
|
areaStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "rgba(107, 255, 130, 0.4)",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
|
||||||
|
color: "rgba(107, 255, 130, 0.01)",
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [20, 42, 41, 24, 40, 30, 10],
|
||||||
},
|
},
|
||||||
// data: [20, 42, 41, 24, 40, 30, 10],
|
],
|
||||||
data: arr.map((yitem) => yitem.p),
|
};
|
||||||
},
|
myChart.setOption(option);
|
||||||
],
|
|
||||||
|
// 根据页面大小自动响应图表大小
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
};
|
};
|
||||||
myChart.setOption(option);
|
</script>
|
||||||
|
|
||||||
// 根据页面大小自动响应图表大小
|
<style scoped>
|
||||||
window.addEventListener("resize", function () {
|
.OneLine {
|
||||||
myChart.resize();
|
height: 100%;
|
||||||
});
|
width: 100%;
|
||||||
};
|
}
|
||||||
</script>
|
</style>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.OneLine {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue