Compare commits
2 Commits
d6fa074348
...
2b3dfc5034
| Author | SHA1 | Date |
|---|---|---|
“yu”
|
2b3dfc5034 | |
|
“yu”
|
25500ee8f5 |
|
|
@ -14,7 +14,8 @@ export function svgdApi(data: any) {
|
|||
data,
|
||||
});
|
||||
}
|
||||
export function buttyApi(data: any) {
|
||||
// osp页面 储能曲线
|
||||
export function buttyApi(data: any) {
|
||||
return request({
|
||||
// url: "http://10.120.75.248:19081/algoService/feederPowerFlowResult",
|
||||
// url: "http://127.0.0.1:19081/algoService/feederPowerFlowResult",
|
||||
|
|
@ -23,5 +24,25 @@ export function buttyApi(data: any) {
|
|||
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,16 +14,18 @@
|
|||
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||
import "echarts/lib/component/dataZoom";
|
||||
onMounted(() => {
|
||||
drawOneLine();
|
||||
drawOneLine(props.echartArr);
|
||||
});
|
||||
|
||||
const props = defineProps<{
|
||||
echartArr: any[];
|
||||
}>();
|
||||
// 获取echart挂载的DOM节点
|
||||
const OneLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = () => {
|
||||
const drawOneLine = (arr: any) => {
|
||||
let myChart = proxy.$echarts.init(OneLine.value);
|
||||
|
||||
myChart.clear();
|
||||
|
|
@ -95,7 +97,8 @@
|
|||
// 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: {
|
||||
|
|
@ -149,7 +152,9 @@
|
|||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 42, 41, 24, 40, 30, 10],
|
||||
data: arr.map((yitem) => yitem.p),
|
||||
|
||||
// data: [20, 42, 41, 24, 40, 30, 10],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,171 +1,174 @@
|
|||
<template>
|
||||
<div class="OneLine" ref="OneLine"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
inject,
|
||||
onBeforeUnmount,
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
watchEffect,
|
||||
} from "vue";
|
||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||
import "echarts/lib/component/dataZoom";
|
||||
onMounted(() => {
|
||||
drawOneLine();
|
||||
});
|
||||
|
||||
// 获取echart挂载的DOM节点
|
||||
const OneLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = () => {
|
||||
let myChart = proxy.$echarts.init(OneLine.value);
|
||||
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
|
||||
borderColor: "rgba(24,178,0,.9)",
|
||||
borderRadius: 5,
|
||||
|
||||
formatter: function (param: any) {
|
||||
let str = `
|
||||
<div class="OneLine" ref="OneLine"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ref,
|
||||
inject,
|
||||
onBeforeUnmount,
|
||||
getCurrentInstance,
|
||||
onMounted,
|
||||
watchEffect,
|
||||
} from "vue";
|
||||
import transformFontSize from "@/hooks/transFormSize.ts";
|
||||
import "echarts/lib/component/dataZoom";
|
||||
onMounted(() => {
|
||||
drawOneLine(props.echartArr);
|
||||
});
|
||||
const props = defineProps<{
|
||||
echartArr: any[];
|
||||
}>();
|
||||
|
||||
// 获取echart挂载的DOM节点
|
||||
const OneLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = (arr: any) => {
|
||||
let myChart = proxy.$echarts.init(OneLine.value);
|
||||
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(24,178,0,.9)", //设置自定义背景
|
||||
borderColor: "rgba(24,178,0,.9)",
|
||||
borderRadius: 5,
|
||||
|
||||
formatter: function (param: any) {
|
||||
let str = `
|
||||
<div style="width:100%:height:100%">
|
||||
<div style="display:flex;justify-content:space-between;"> ${
|
||||
param[0].name.split(" ")[0]
|
||||
}</div>
|
||||
${getDom(param)}
|
||||
</div>`;
|
||||
function getDom(param: any) {
|
||||
let newStr = "";
|
||||
param.forEach((item: any) => {
|
||||
newStr += `<div style="display:flex;"><div>${
|
||||
item.seriesName
|
||||
}：</div><div>${
|
||||
item.value === undefined ? "0" : item.value
|
||||
}kW</div></div>`;
|
||||
});
|
||||
return newStr;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
function getDom(param: any) {
|
||||
let newStr = "";
|
||||
param.forEach((item: any) => {
|
||||
newStr += `<div style="display:flex;"><div>${
|
||||
item.seriesName
|
||||
}：</div><div>${
|
||||
item.value === undefined ? "0" : item.value
|
||||
}kW</div></div>`;
|
||||
});
|
||||
return newStr;
|
||||
}
|
||||
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",
|
||||
},
|
||||
},
|
||||
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%",
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
left: "8%",
|
||||
right: "8%",
|
||||
bottom: "13%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false,
|
||||
alignWithLabel: true,
|
||||
},
|
||||
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"],
|
||||
|
||||
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]
|
||||
// },
|
||||
},
|
||||
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}",
|
||||
},
|
||||
// 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,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "总功率",
|
||||
type: "line",
|
||||
barWidth: 2, // 柱子宽度核心代码
|
||||
smooth: true,
|
||||
showSymbol: false,
|
||||
itemStyle: {
|
||||
color: "rgba(107, 255, 130,1)",
|
||||
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)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
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],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
// data: [20, 42, 41, 24, 40, 30, 10],
|
||||
data: arr.map((yitem) => yitem.p),
|
||||
},
|
||||
],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.OneLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
myChart.setOption(option);
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.OneLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue