“yu” 2024-07-14 23:33:51 +08:00
parent 8c5366c9c8
commit be606ff614
5 changed files with 664 additions and 609 deletions

View File

@ -123,7 +123,7 @@
<rateLine <rateLine
:rateDate="rateDate_cur" :rateDate="rateDate_cur"
:keysv="key2" :keysv="key2"
v-if="treeAreaId" v-if="rateDate_cur"
></rateLine> ></rateLine>
</div> </div>
<div class="infotitle_box"> <div class="infotitle_box">
@ -474,15 +474,18 @@ const getRateDate = (treeAreaId: string) => {
}).then((res) => { }).then((res) => {
console.log(res, "res"); console.log(res, "res");
if (res?.data.result.length) { if (res.data.result.length>0) {
rateDate_cur = res?.data.result; rateDate_cur = res?.data.result;
// console.log(res, "res"); // console.log(res, "res");
} else { } else {
ElMessage({ // ElMessage({
message: "Congrats, this is a success message.",
type: "success", // message: "",
plain: true, // type: "success",
}); // plain: true,
// });
console.log('暂无数据负载率');
} }
}); });
// let rateDate = rateJSONData as any; // let rateDate = rateJSONData as any;

View File

@ -1,31 +1,31 @@
<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(props.echartArr);
}); });
const props = defineProps<{ const props = defineProps<{
echartArr: any[]; echartArr: any[];
}>(); }>();
// echartDOM // echartDOM
const OneLine: any = ref(); const OneLine: any = ref();
// //
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
const drawOneLine = (arr: any) => { const drawOneLine = (arr: any) => {
let myChart = proxy.$echarts.init(OneLine.value); let myChart = proxy.$echarts.init(OneLine.value);
myChart.clear(); myChart.clear();
@ -67,10 +67,10 @@
top: "0%", top: "0%",
right: "5%", right: "5%",
orient: "vertical", orient: "vertical",
data: ["总功率",], data: ["总功率"],
itemWidth: transformFontSize(40), itemWidth: transformFontSize(40),
itemHeight: transformFontSize(18), itemHeight: transformFontSize(18),
itemGap:transformFontSize(8), itemGap: transformFontSize(8),
textStyle: { textStyle: {
fontSize: transformFontSize(35), fontSize: transformFontSize(35),
color: "#FFFFFF", color: "#FFFFFF",
@ -99,7 +99,6 @@
}, },
// 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)), data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
}, },
yAxis: { yAxis: {
splitLine: { splitLine: {
@ -164,13 +163,12 @@
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
}; };
</script> </script>
<style scoped> <style scoped>
.OneLine { .OneLine {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

View File

@ -81,7 +81,7 @@
/> />
</div> </div>
<div class="right"> <div class="right">
<div class="val">9999</div> <div class="val">{{ total_cur }}</div>
<span>kWh</span> <span>kWh</span>
</div> </div>
</div> </div>
@ -98,7 +98,7 @@
/> />
</div> </div>
<div class="right"> <div class="right">
<div class="val">9999</div> <div class="val">{{ power35kv }}</div>
<span>kWh</span> <span>kWh</span>
</div> </div>
</div> </div>
@ -115,7 +115,7 @@
/> />
</div> </div>
<div class="right"> <div class="right">
<div class="val">9999</div> <div class="val">{{ power10kv }}</div>
<span>kWh</span> <span>kWh</span>
</div> </div>
</div> </div>
@ -132,7 +132,7 @@
/> />
</div> </div>
<div class="right"> <div class="right">
<div class="val">9999</div> <div class="val">{{ power380V }}</div>
<span>kWh</span> <span>kWh</span>
</div> </div>
</div> </div>
@ -140,7 +140,7 @@
</div> </div>
<div class="infotitle"><span>实时发电量曲线</span></div> <div class="infotitle"><span>实时发电量曲线</span></div>
<div class="info2"> <div class="info2">
<powerLine></powerLine> <powerLine :cur_pvArr="cur_pvArr" v-if="cur_pvArrFlag"></powerLine>
</div> </div>
<div class="infotitle"><span>实时功率曲线</span></div> <div class="infotitle"><span>实时功率曲线</span></div>
<div class="info3"> <div class="info3">
@ -217,18 +217,62 @@ import timePvLine from "./timePvLine.vue";
import { useNow, useDateFormat } from "@vueuse/core"; import { useNow, useDateFormat } from "@vueuse/core";
import { id } from "element-plus/es/locale/index.mjs"; import { id } from "element-plus/es/locale/index.mjs";
import { curpower_api } from "@/api/pvPage/pvApi"; import { curpower_api } from "@/api/pvPage/pvApi";
import { pvApi } from '@/api/Osp/svgApi'
onMounted(() => { onMounted(() => {
let Objinput = { orgID: "8af8470a47aad8e20147aad92e400335" }; //
let Objinput={orgID: "8af8470a47aad8e20147aad92e400335"} //
getCurves(Objinput); //{orgID} 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) => { const getCurves = (datares: any) => {
curpower_api(datares).then((res) => { curpower_api(datares)
.then((res) => {
console.log("res", 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 HMS = useDateFormat(useNow(), "HH:mm:ss"); //
const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); // const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //

View File

@ -1,29 +1,32 @@
<template> <template>
<div class="ThreeLine" ref="ThreeLine"></div> <div class="ThreeLine" ref="ThreeLine"></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(); drawOneLine(props.cur_pvArr);
}); });
const props = defineProps<{
cur_pvArr: any;
}>();
// echartDOM // echartDOM
const ThreeLine: any = ref(); const ThreeLine: any = ref();
// //
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
const drawOneLine = () => { const drawOneLine = (arr: any) => {
let myChart = proxy.$echarts.init(ThreeLine.value); let myChart = proxy.$echarts.init(ThreeLine.value);
myChart.clear(); myChart.clear();
@ -70,7 +73,7 @@
itemWidth: transformFontSize(35), itemWidth: transformFontSize(35),
itemHeight: transformFontSize(18), itemHeight: transformFontSize(18),
itemGap:transformFontSize(50), itemGap: transformFontSize(50),
textStyle: { textStyle: {
fontSize: transformFontSize(25), fontSize: transformFontSize(25),
color: "#FFFFFF", color: "#FFFFFF",
@ -97,8 +100,8 @@
// 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: {
splitLine: { splitLine: {
@ -151,7 +154,8 @@
]), ]),
}, },
}, },
data: [20, 42, 41, 24, 40, 30, 10], // data: [20, 42, 41, 24, 40, 30, 10],
data: arr.map((pvdata) => pvdata.p),
}, },
// { // {
// name: "", // name: "",
@ -217,13 +221,12 @@
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
}; };
</script> </script>
<style scoped> <style scoped>
.ThreeLine { .ThreeLine {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

View File

@ -1,29 +1,32 @@
<template> <template>
<div class="ThreeLine" ref="ThreeLine"></div> <div class="ThreeLine" ref="ThreeLine"></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(); drawOneLine();
}); });
// const props = defineProps<{
// cur_pvArr: any;
// }>();
// echartDOM // echartDOM
const ThreeLine: any = ref(); const ThreeLine: any = ref();
// //
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
const drawOneLine = () => { const drawOneLine = () => {
let myChart = proxy.$echarts.init(ThreeLine.value); let myChart = proxy.$echarts.init(ThreeLine.value);
myChart.clear(); myChart.clear();
@ -70,7 +73,7 @@
itemWidth: transformFontSize(35), itemWidth: transformFontSize(35),
itemHeight: transformFontSize(18), itemHeight: transformFontSize(18),
itemGap:transformFontSize(20), itemGap: transformFontSize(20),
textStyle: { textStyle: {
fontSize: transformFontSize(25), fontSize: transformFontSize(25),
color: "#FFFFFF", color: "#FFFFFF",
@ -98,7 +101,10 @@
// }, // },
}, },
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(-8))),
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
}, },
yAxis: { yAxis: {
splitLine: { splitLine: {
@ -152,6 +158,8 @@
}, },
}, },
data: [20, 42, 41, 24, 40, 30, 10], data: [20, 42, 41, 24, 40, 30, 10],
// data: arr.map((pvdata) => pvdata.p),
}, },
// { // {
// name: "", // name: "",
@ -217,13 +225,12 @@
window.addEventListener("resize", function () { window.addEventListener("resize", function () {
myChart.resize(); myChart.resize();
}); });
}; };
</script> </script>
<style scoped> <style scoped>
.ThreeLine { .ThreeLine {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>