master
“yu”
parent
8c5366c9c8
commit
be606ff614
|
|
@ -123,7 +123,7 @@
|
|||
<rateLine
|
||||
:rateDate="rateDate_cur"
|
||||
:keysv="key2"
|
||||
v-if="treeAreaId"
|
||||
v-if="rateDate_cur"
|
||||
></rateLine>
|
||||
</div>
|
||||
<div class="infotitle_box">
|
||||
|
|
@ -474,15 +474,18 @@ const getRateDate = (treeAreaId: string) => {
|
|||
}).then((res) => {
|
||||
console.log(res, "res");
|
||||
|
||||
if (res?.data.result.length) {
|
||||
if (res.data.result.length>0) {
|
||||
rateDate_cur = res?.data.result;
|
||||
// console.log(res, "res");
|
||||
} else {
|
||||
ElMessage({
|
||||
message: "Congrats, this is a success message.",
|
||||
type: "success",
|
||||
plain: true,
|
||||
});
|
||||
// ElMessage({
|
||||
|
||||
// message: "",
|
||||
// type: "success",
|
||||
// plain: true,
|
||||
// });
|
||||
console.log('暂无数据负载率');
|
||||
|
||||
}
|
||||
});
|
||||
// let rateDate = rateJSONData as any;
|
||||
|
|
|
|||
|
|
@ -1,176 +1,174 @@
|
|||
<template>
|
||||
<div class="OneLine" ref="OneLine"></div>
|
||||
</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(props.echartArr);
|
||||
});
|
||||
const props = defineProps<{
|
||||
<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();
|
||||
// 获取echart挂载的DOM节点
|
||||
const OneLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = (arr: any) => {
|
||||
let myChart = proxy.$echarts.init(OneLine.value);
|
||||
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(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
|
||||
formatter: function (param: any) {
|
||||
let str = `
|
||||
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"],
|
||||
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(18, 231, 227, 1)",
|
||||
},
|
||||
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)),
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
},
|
||||
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(18, 231, 227, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: arr.map((yitem) => yitem.p),
|
||||
|
||||
// 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],
|
||||
},
|
||||
],
|
||||
};
|
||||
</script>
|
||||
myChart.setOption(option);
|
||||
|
||||
<style scoped>
|
||||
.OneLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.OneLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="val">9999</div>
|
||||
<div class="val">{{ total_cur }}</div>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="val">9999</div>
|
||||
<div class="val">{{ power35kv }}</div>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="val">9999</div>
|
||||
<div class="val">{{ power10kv }}</div>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="val">9999</div>
|
||||
<div class="val">{{ power380V }}</div>
|
||||
<span>kWh</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
</div>
|
||||
<div class="infotitle"><span>实时发电量曲线</span></div>
|
||||
<div class="info2">
|
||||
<powerLine></powerLine>
|
||||
<powerLine :cur_pvArr="cur_pvArr" v-if="cur_pvArrFlag"></powerLine>
|
||||
</div>
|
||||
<div class="infotitle"><span>实时功率曲线</span></div>
|
||||
<div class="info3">
|
||||
|
|
@ -217,18 +217,62 @@ import timePvLine from "./timePvLine.vue";
|
|||
import { useNow, useDateFormat } from "@vueuse/core";
|
||||
import { id } from "element-plus/es/locale/index.mjs";
|
||||
import { curpower_api } from "@/api/pvPage/pvApi";
|
||||
import { pvApi } from '@/api/Osp/svgApi'
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
|
||||
let Objinput={orgID: "8af8470a47aad8e20147aad92e400335"} //全部 获取光伏实时发电量
|
||||
let Objinput = { orgID: "8af8470a47aad8e20147aad92e400335" }; //全部 获取光伏实时发电量
|
||||
getCurves(Objinput); //获取城南的接口{orgID}
|
||||
getpv() //光伏功率曲线
|
||||
});
|
||||
// 获取光伏实时发电量
|
||||
// 当日累计发电量
|
||||
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([]);
|
||||
// 获取光伏实时发电量
|
||||
const getCurves = (datares: any) => {
|
||||
curpower_api(datares).then((res) => {
|
||||
console.log("res", res);
|
||||
});
|
||||
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"];
|
||||
}
|
||||
}
|
||||
// 发电量曲线
|
||||
if(res.data.data){
|
||||
cur_pvArrFlag.value=true
|
||||
cur_pvArr=res.data.data;
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
let pvArr = reactive([]) //光伏
|
||||
let pvArrFlag = ref<boolean>(false)
|
||||
// 获取光伏功率曲线
|
||||
const getpv = () => {
|
||||
pvApi({ mrid: '03DKX-24289' }).then(res => {
|
||||
console.log(res, 'respv')
|
||||
pvArr = res.data
|
||||
if (pvArr.length > 0) {
|
||||
pvArrFlag.value = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const HMS = useDateFormat(useNow(), "HH:mm:ss"); //当前时间
|
||||
const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //当前日期
|
||||
|
|
|
|||
|
|
@ -1,229 +1,232 @@
|
|||
<template>
|
||||
<div class="ThreeLine" ref="ThreeLine"></div>
|
||||
</template>
|
||||
<div class="ThreeLine" ref="ThreeLine"></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();
|
||||
});
|
||||
<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.cur_pvArr);
|
||||
});
|
||||
const props = defineProps<{
|
||||
cur_pvArr: any;
|
||||
}>();
|
||||
|
||||
// 获取echart挂载的DOM节点
|
||||
const ThreeLine: any = ref();
|
||||
// 获取echart挂载的DOM节点
|
||||
const ThreeLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = () => {
|
||||
let myChart = proxy.$echarts.init(ThreeLine.value);
|
||||
const drawOneLine = (arr: any) => {
|
||||
let myChart = proxy.$echarts.init(ThreeLine.value);
|
||||
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
|
||||
formatter: function (param: any) {
|
||||
let str = `
|
||||
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: "5%",
|
||||
// right: "5%",
|
||||
// orient: "vertical",
|
||||
// data: ["实时发电量", "短期预测发电量", "超短期预测发电量"],
|
||||
data: ["实时发电量"],
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
// right: "5%",
|
||||
// orient: "vertical",
|
||||
// data: ["实时发电量", "短期预测发电量", "超短期预测发电量"],
|
||||
data: ["实时发电量"],
|
||||
|
||||
itemWidth: transformFontSize(35),
|
||||
itemHeight: transformFontSize(18),
|
||||
itemGap:transformFontSize(50),
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(25),
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
itemWidth: transformFontSize(35),
|
||||
itemHeight: transformFontSize(18),
|
||||
itemGap: transformFontSize(50),
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(25),
|
||||
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"],
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true, //y轴轴线
|
||||
},
|
||||
type: "value",
|
||||
name: "kWh",
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
nameTextStyle: {
|
||||
//y轴name的颜色
|
||||
color: "#fff",
|
||||
fontSize: transformFontSize(35),
|
||||
padding: [0, 50, 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(18, 231, 227, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 42, 41, 24, 40, 30, 10],
|
||||
},
|
||||
// {
|
||||
// name: "短期预测发电量",
|
||||
// type: "line",
|
||||
// barWidth: 2, // 柱子宽度核心代码
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
// itemStyle: {
|
||||
// color: "rgba(251, 187, 111, 1)",
|
||||
// },
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.4)",
|
||||
// },
|
||||
|
||||
// {
|
||||
// offset: 1,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [30, 12, 11, 24, 20, 30, 30],
|
||||
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]
|
||||
// },
|
||||
// {
|
||||
// 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,
|
||||
},
|
||||
// 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: "kWh",
|
||||
// min: 0,
|
||||
// max: 100,
|
||||
nameTextStyle: {
|
||||
//y轴name的颜色
|
||||
color: "#fff",
|
||||
fontSize: transformFontSize(35),
|
||||
padding: [0, 50, 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(18, 231, 227, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
// color: "rgba(107, 255, 130, 0.4)",
|
||||
// },
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
// {
|
||||
// offset: 1,
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
// data: [20, 42, 41, 24, 40, 30, 10],
|
||||
data: arr.map((pvdata) => pvdata.p),
|
||||
},
|
||||
// {
|
||||
// name: "短期预测发电量",
|
||||
// type: "line",
|
||||
// barWidth: 2, // 柱子宽度核心代码
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
// itemStyle: {
|
||||
// color: "rgba(251, 187, 111, 1)",
|
||||
// },
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
|
||||
// color: "rgba(107, 255, 130, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [40, 18, 19, 23, 29, 33, 31],
|
||||
// },
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
// color: "rgba(251, 187, 111, 0.4)",
|
||||
// },
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
// {
|
||||
// offset: 1,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [30, 12, 11, 24, 20, 30, 30],
|
||||
// },
|
||||
// {
|
||||
// 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: [40, 18, 19, 23, 29, 33, 31],
|
||||
// },
|
||||
],
|
||||
};
|
||||
</script>
|
||||
myChart.setOption(option);
|
||||
|
||||
<style scoped>
|
||||
.ThreeLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ThreeLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,229 +1,236 @@
|
|||
<template>
|
||||
<div class="ThreeLine" ref="ThreeLine"></div>
|
||||
</template>
|
||||
<div class="ThreeLine" ref="ThreeLine"></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();
|
||||
});
|
||||
<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();
|
||||
});
|
||||
// const props = defineProps<{
|
||||
// cur_pvArr: any;
|
||||
// }>();
|
||||
|
||||
// 获取echart挂载的DOM节点
|
||||
const ThreeLine: any = ref();
|
||||
// 获取echart挂载的DOM节点
|
||||
const ThreeLine: any = ref();
|
||||
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
// 获取当前组件实例
|
||||
const { proxy }: any = getCurrentInstance();
|
||||
|
||||
const drawOneLine = () => {
|
||||
let myChart = proxy.$echarts.init(ThreeLine.value);
|
||||
const drawOneLine = () => {
|
||||
let myChart = proxy.$echarts.init(ThreeLine.value);
|
||||
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
myChart.clear();
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
// axisPointer: { type: 'cross' }
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
// padding: transformFontSize(15),
|
||||
backgroundColor: "rgba(0,163,166,.9)", //设置自定义背景
|
||||
borderColor: "rgba(0,163,166,.9)",
|
||||
borderRadius: 5,
|
||||
|
||||
formatter: function (param: any) {
|
||||
let str = `
|
||||
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: ["实时功率", "短期预测功率", "超短期预测功率"],
|
||||
data: ["实时功率"],
|
||||
},
|
||||
legend: {
|
||||
top: "0%",
|
||||
right: "5%",
|
||||
orient: "vertical",
|
||||
// data: ["实时功率", "短期预测功率", "超短期预测功率"],
|
||||
data: ["实时功率"],
|
||||
|
||||
itemWidth: transformFontSize(35),
|
||||
itemHeight: transformFontSize(18),
|
||||
itemGap:transformFontSize(20),
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(25),
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
itemWidth: transformFontSize(35),
|
||||
itemHeight: transformFontSize(18),
|
||||
itemGap: transformFontSize(20),
|
||||
textStyle: {
|
||||
fontSize: transformFontSize(25),
|
||||
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"],
|
||||
|
||||
},
|
||||
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, 50, 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(18, 231, 227, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 42, 41, 24, 40, 30, 10],
|
||||
},
|
||||
// {
|
||||
// name: "短期预测功率",
|
||||
// type: "line",
|
||||
// barWidth: 2, // 柱子宽度核心代码
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
// itemStyle: {
|
||||
// color: "rgba(251, 187, 111, 1)",
|
||||
// },
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.4)",
|
||||
// },
|
||||
|
||||
// {
|
||||
// offset: 1,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [30, 12, 11, 24, 20, 30, 30],
|
||||
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]
|
||||
// },
|
||||
// {
|
||||
// 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,
|
||||
},
|
||||
data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
|
||||
// data: (arr.map((rtime) => rtime?.timeStamp.slice(-8))),
|
||||
|
||||
// color: "rgba(107, 255, 130, 0.4)",
|
||||
// },
|
||||
|
||||
// {
|
||||
// offset: 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, 50, 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(18, 231, 227, 1)",
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(18, 231, 227, 0.4)",
|
||||
},
|
||||
|
||||
// color: "rgba(107, 255, 130, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [40, 18, 19, 23, 29, 33, 31],
|
||||
// },
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
{
|
||||
offset: 1,
|
||||
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
color: "rgba(18, 231, 227, 0.01)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
data: [20, 42, 41, 24, 40, 30, 10],
|
||||
// data: arr.map((pvdata) => pvdata.p),
|
||||
|
||||
},
|
||||
// {
|
||||
// name: "短期预测功率",
|
||||
// type: "line",
|
||||
// barWidth: 2, // 柱子宽度核心代码
|
||||
// smooth: true,
|
||||
// showSymbol: false,
|
||||
// itemStyle: {
|
||||
// color: "rgba(251, 187, 111, 1)",
|
||||
// },
|
||||
// areaStyle: {
|
||||
// normal: {
|
||||
// color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.4)",
|
||||
// },
|
||||
|
||||
// {
|
||||
// offset: 1,
|
||||
|
||||
// color: "rgba(251, 187, 111, 0.01)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// },
|
||||
// data: [30, 12, 11, 24, 20, 30, 30],
|
||||
// },
|
||||
// {
|
||||
// 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: [40, 18, 19, 23, 29, 33, 31],
|
||||
// },
|
||||
],
|
||||
};
|
||||
</script>
|
||||
myChart.setOption(option);
|
||||
|
||||
<style scoped>
|
||||
.ThreeLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
// 根据页面大小自动响应图表大小
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ThreeLine {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue