zhaoqiang 2024-07-15 14:15:05 +08:00
commit 938256e828
10 changed files with 278 additions and 31 deletions

View File

@ -60,7 +60,15 @@ export function strategyApi(data: any) {
} }
// 全部的能量调节页面的接口 // 全部的能量调节页面的接口-统计可调资源
export function sourcIngoApi(data: any) {
return request({
url: '/wwpm/biz/v1/device_all',
method: 'POST',
data
})
}

View File

@ -66,7 +66,7 @@
<div class="c-four"> <div class="c-four">
<img src="@/assets/images/login/top/icon_user.png" alt="" /> <img src="@/assets/images/login/top/icon_user.png" alt="" />
<p>{{ departname ? departname : "未登录" }}</p> <p>{{ departname ? departname : "管理员" }}</p>
</div> </div>
<div class="c-five" @click="exit()"> <div class="c-five" @click="exit()">
<img src="@/assets/images/login/exit.png" alt="" /> <img src="@/assets/images/login/exit.png" alt="" />

View File

@ -32,7 +32,7 @@
<div class="rightBox"> <div class="rightBox">
<img src="@/assets/images/login/tianjin.png" alt=""> <img src="@/assets/images/login/tianjin.png" alt="">
<div class="container"> <div class="container">
<div class="title">下午好, 欢迎登录!!!</div> <div class="title"> 欢迎登录</div>
<div class="bg-input"> <div class="bg-input">
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px"
class="demo-ruleForm"> class="demo-ruleForm">
@ -334,6 +334,7 @@ const styleVar = computed(() => {
color: #3877F2; color: #3877F2;
text-align: right; text-align: right;
padding-right: changeHeight(5); padding-right: changeHeight(5);
font-size: changeHeight(35);
} }
.login-btn { .login-btn {

View File

@ -328,7 +328,7 @@ import 'echarts/lib/component/dataZoom'
import loadingPage from '@/views/commonPage/loading.vue' import loadingPage from '@/views/commonPage/loading.vue'
import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi' import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi'
import { SVG, extend as SVGextend, Element as SVGElement, Box, Matrix } from '@svgdotjs/svg.js' import { SVG, extend as SVGextend, Element as SVGElement, Box, Matrix } from '@svgdotjs/svg.js'
import { log } from 'console'
onMounted(() => { onMounted(() => {
getbatrry() //线 getbatrry() //线

View File

@ -0,0 +1,196 @@
<!-- 最完整的echarts配置 -->
<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";
import { dateEquals, progressProps } from "element-plus";
onMounted(() => {
drawOneLine(props.echartArr);
});
const props=defineProps<{
echartArr: any;
}>();
// echartDOM
const OneLine: any = ref(null);
//
const { proxy }: any = getCurrentInstance();
const drawOneLine = (arr:any) => {
let myChart = null;
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,
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;
},
},
legend: {
top: "12%",
right: "8%",
orient: "vertical",
data: ["负荷"],
itemWidth: transformFontSize(20),
itemHeight: transformFontSize(8),
itemGap: transformFontSize(8),
textStyle: {
fontSize: transformFontSize(30),
color: "#FFFFFF",
},
},
//
grid: {
top: "25%",
left: "10%",
right: "8%",
bottom: "13%",
//
// containLabel:true,
},
// x
xAxis: {
type: "category",
//
// max: function (value:any) {
// return value.max *1.3;
// },
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]
// },
},
offset:transformFontSize(15),
//
data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
// inverse:true,
// data:props.data.map((item)=>item.time)
// data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00","16:00", "18:00", "20:00", "22:00", "24:00"],
},
// y
yAxis: {
splitLine: {
show: false,
},
axisLine: {
show: true, //y线
},
type: "value",
name: "kW",
// min: -30,
// max: 40,
nameTextStyle: {
//yname
color: "#fff",
fontSize: transformFontSize(35),
padding: [0, 40, 10, 0],
},
position: "left",
offset:transformFontSize(15),//线
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: arr.map((pvdata) => pvdata.p*2.5),
// data:props.data.map((item)=>{name:item.name,value:item.value})
// data: [0, 42, 41, 24, -30, 33, 0],
// data: [0, 0,0,0,0, 40, 40,0,0,-30,-30,-30],
},
],
};
myChart.setOption(option);
//
window.addEventListener("resize", function () {
myChart.resize();
});
};
</script>
<style scoped>
.OneLine {
height: 100%;
width: 100%;
}
</style>

View File

@ -108,7 +108,7 @@
{{ unit380lowarrLength }}<span> kW</span> {{ unit380lowarrLength }}<span> kW</span>
</div> </div>
<div class="hu"> <div class="hu">
{{ unit380lowarrCount }} <span></span> {{ unit380lowarrCount }} <span></span>
</div> </div>
</div> </div>
</div> </div>
@ -187,14 +187,14 @@
<div class="total_load_key"> <div class="total_load_key">
<div class="area_kw"> <div class="area_kw">
<span>{{ sumLoadrateds }}</span> <span>{{ sumLoadrateds }}</span>
<div class="r">&nbsp;kw</div> <div class="r">&nbsp;kW</div>
</div> </div>
<p>地区总额定负荷</p> <p>地区总额定负荷</p>
</div> </div>
<div class="total_load_3dEchart"> <div class="total_load_3dEchart">
<div class="title_load fs40">负荷户数比例</div> <div class="title_load fs40">负荷户数比例</div>
<div class="echarts"> <div class="echarts">
<threeEchart></threeEchart> <threeEchart ></threeEchart>
</div> </div>
<!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> --> <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> -->
@ -770,6 +770,7 @@ import {
getCurrentInstance, getCurrentInstance,
inject, inject,
} from "vue"; } from "vue";
import { ArrowDown } from "@element-plus/icons-vue"; import { ArrowDown } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { getColorFun } from "@/hooks/getColorFun/index"; import { getColorFun } from "@/hooks/getColorFun/index";
@ -783,6 +784,7 @@ import load_echart from "./oneLine.vue";
import storage_echart from "./oneLine.vue"; import storage_echart from "./oneLine.vue";
import threeEchart from "./3Dechart.vue"; import threeEchart from "./3Dechart.vue";
import runListenPage from "./runListenPage.vue"; import runListenPage from "./runListenPage.vue";
import { statInfo_api } from "@/api/homePage/SoureceApi.ts"; import { statInfo_api } from "@/api/homePage/SoureceApi.ts";
import { count } from "console"; import { count } from "console";
onMounted(() => { onMounted(() => {

View File

@ -111,6 +111,8 @@ const drawOneLine = () => {
// inverse:true, // inverse:true,
// data:props.data.map((item)=>item.time) // data:props.data.map((item)=>item.time)
data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00","16:00", "18:00", "20:00", "22:00", "24:00"], data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00","16:00", "18:00", "20:00", "22:00", "24:00"],
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
}, },
// y // y
yAxis: { yAxis: {
@ -122,8 +124,8 @@ const drawOneLine = () => {
}, },
type: "value", type: "value",
name: "kW", name: "kW",
min: -30, // min: -50,
max: 40, // max: 50,
nameTextStyle: { nameTextStyle: {
//yname //yname
color: "#fff", color: "#fff",
@ -167,7 +169,7 @@ const drawOneLine = () => {
}, },
}, },
// data:props.data.map((item)=>{name:item.name,value:item.value}) // data:props.data.map((item)=>{name:item.name,value:item.value})
// data: [0, 42, 41, 24, -30, 33, 0], // data: [20, 42, 41, 24, 40, 30, 10],
data: [0, 0,0,0,0, 40, 40,0,0,-30,-30,-30], data: [0, 0,0,0,0, 40, 40,0,0,-30,-30,-30],
}, },
], ],

View File

@ -16,16 +16,19 @@ import transformFontSize from "@/hooks/transFormSize.ts";
import "echarts/lib/component/dataZoom"; import "echarts/lib/component/dataZoom";
import { dateEquals, progressProps } from "element-plus"; import { dateEquals, progressProps } from "element-plus";
onMounted(() => { onMounted(() => {
drawOneLine(); drawOneLine(props.echartArr);
}); });
// echartDOM // echartDOM
const OneLine: any = ref(null); const OneLine: any = ref(null);
const props=defineProps<{
echartArr: any;
}>();
// //
const { proxy }: any = getCurrentInstance(); const { proxy }: any = getCurrentInstance();
const drawOneLine = () => { const drawOneLine = (arr:any) => {
let myChart = null; let myChart = null;
myChart = proxy.$echarts.init(OneLine.value); myChart = proxy.$echarts.init(OneLine.value);
@ -109,8 +112,10 @@ const drawOneLine = () => {
offset:transformFontSize(15), offset:transformFontSize(15),
// //
// inverse:true, // inverse:true,
data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
// data:props.data.map((item)=>item.time) // data:props.data.map((item)=>item.time)
data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"], // data: ["02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00","16:00", "18:00", "20:00", "22:00", "24:00"],
}, },
// y // y
yAxis: { yAxis: {
@ -122,8 +127,8 @@ const drawOneLine = () => {
}, },
type: "value", type: "value",
name: "kW", name: "kW",
// min: -50, // min: -30,
// max: 50, // max: 40,
nameTextStyle: { nameTextStyle: {
//yname //yname
color: "#fff", color: "#fff",
@ -166,8 +171,11 @@ const drawOneLine = () => {
]), ]),
}, },
}, },
data: arr.map((pvdata) => pvdata.p*1.8),
// data:props.data.map((item)=>{name:item.name,value:item.value}) // data:props.data.map((item)=>{name:item.name,value:item.value})
data: [20, 42, 41, 24, 40, 30, 10], // data: [0, 42, 41, 24, -30, 33, 0],
// data: [0, 0,0,0,0, 40, 40,0,0,-30,-30,-30],
}, },
], ],
}; };

View File

@ -25,7 +25,7 @@
<div class="title_info margin1">功率曲线</div> <div class="title_info margin1">功率曲线</div>
<div class="source_echart"> <div class="source_echart">
<div class="tabDate"> <div class="tabDate">
<div <!-- <div
:class="[ :class="[
sourcetabDateFlagOne === item.id sourcetabDateFlagOne === item.id
? 'tab_active' ? 'tab_active'
@ -37,17 +37,18 @@
:key="index" :key="index"
> >
{{ item.name }} {{ item.name }}
</div> </div> -->
</div> </div>
<div class="source_echart_box"> <div class="source_echart_box">
<!--光伏曲线 --> <!--光伏曲线 -->
<source_Photovoltaic_echart <!-- <source_Photovoltaic_echart
v-if="sourcetabDateFlagOne === 1" v-if="sourcetabDateFlagOne === 1"
></source_Photovoltaic_echart> ></source_Photovoltaic_echart> -->
<!-- 厂站曲线 --> <!-- 厂站曲线 -->
<source_factoryStation_echart <!-- <source_factoryStation_echart
v-else v-else
></source_factoryStation_echart> ></source_factoryStation_echart> -->
<SourceoneLine :echartArr="pvArr" v-if="pvArrFlag"></SourceoneLine>
</div> </div>
<!-- <div class="ratebox"> <!-- <div class="ratebox">
<div class="rate"> <div class="rate">
@ -98,7 +99,7 @@
<div class="content"> <div class="content">
<div class="title_info margin2">功率曲线</div> <div class="title_info margin2">功率曲线</div>
<div class="load_echart"> <div class="load_echart">
<div class="tabDate"> <!-- <div class="tabDate">
<div <div
:class="[ :class="[
loadtabDateFlag === item.id loadtabDateFlag === item.id
@ -111,11 +112,13 @@
> >
{{ item.name }} {{ item.name }}
</div> </div>
</div> </div> -->
<div class="load_echart_box"> <div class="load_echart_box">
<oneLine_load v-if="loadtabDateFlag === 1"></oneLine_load> <oneLine_load :echartArr="userzArr" v-if="userzFlag"></oneLine_load>
<oneLine_load v-if="loadtabDateFlag === 2"></oneLine_load>
<oneLine_load v-if="loadtabDateFlag === 3"></oneLine_load> <!-- <oneLine_load v-if="loadtabDateFlag === 1"></oneLine_load> -->
<!-- <oneLine_load v-if="loadtabDateFlag === 2"></oneLine_load>
<oneLine_load v-if="loadtabDateFlag === 3"></oneLine_load> -->
</div> </div>
<!-- <div class="ratebox"> <!-- <div class="ratebox">
<div class="rate"> <div class="rate">
@ -468,6 +471,7 @@ import oneLine_load from "./oneLine_load.vue";
import load_echart from "./oneLine.vue"; import load_echart from "./oneLine.vue";
import storage_echart from "./oneLine.vue"; import storage_echart from "./oneLine.vue";
import threeEchart from "./3Dechart.vue"; import threeEchart from "./3Dechart.vue";
import SourceoneLine from "./SourceoneLine.vue";
import { import {
alert_api, alert_api,
@ -475,6 +479,7 @@ import {
runAlarm_api, runAlarm_api,
} from "@/api/homePage/SoureceApi"; } from "@/api/homePage/SoureceApi";
import { handleEchartsData } from "@/hooks/handleFun"; import { handleEchartsData } from "@/hooks/handleFun";
import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi'
onMounted(() => { onMounted(() => {
getStatInfo(); getStatInfo();
@ -486,8 +491,31 @@ onMounted(() => {
handeleTable(); handeleTable();
// --- // ---
getRunAlarm(); getRunAlarm();
getpv() //线
getuser() //线
}); });
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
}
})
}
let userzArr = reactive([]) //
let userzFlag = ref<boolean>(false)
const getuser = () => {
usrzApi({ mrid: '03DKX-24289' }).then(res => {
userzArr = res.data
if (userzArr.length > 0) {
userzFlag.value = true
}
})
}
// //
let sourceFlag = ref(true); let sourceFlag = ref(true);
// //
@ -923,10 +951,12 @@ let networkEchart = reactive([
}, },
]); ]);
const netsourcehandleTabDate = (val: any) => { const netsourcehandleTabDate = (val: any) => {
sourcetabDateFlagOne.value = val.id; sourcetabDateFlagOne.value = val.id;
}; };
const sourcehandleTabDate = (val: any) => { const sourcehandleTabDate = (val: any) => {
sourcetabDateFlag.value = val.id; sourcetabDateFlag.value = val.id;
networktabDateFlag.value=val.id
}; };
// //
let loadtabDateFlag = ref(1); let loadtabDateFlag = ref(1);

View File

@ -122,7 +122,7 @@ const drawOneLine = () => {
show: true //y线 show: true //y线
}, },
type: 'value', type: 'value',
name: '%', name: '百分比',
min: 0, min: 0,
max: 100, max: 100,
nameTextStyle: { nameTextStyle: {
@ -132,7 +132,7 @@ const drawOneLine = () => {
padding: [0, 40, 10, 0] padding: [0, 40, 10, 0]
}, },
position: 'left', position: 'left',
offset: transformFontSize(15), // offset: transformFontSize(15),
axisLabel: { axisLabel: {
// //
color: '#fff', color: '#fff',