diff --git a/src/api/ajust/tree.ts b/src/api/ajust/tree.ts index 19aec08..bd89dc5 100644 --- a/src/api/ajust/tree.ts +++ b/src/api/ajust/tree.ts @@ -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 + }) +} + diff --git a/src/views/layout/header.vue b/src/views/layout/header.vue index 574f493..f2cd62d 100644 --- a/src/views/layout/header.vue +++ b/src/views/layout/header.vue @@ -66,7 +66,7 @@ <div class="c-four"> <img src="@/assets/images/login/top/icon_user.png" alt="" /> - <p>{{ departname ? departname : "未登录" }}</p> + <p>{{ departname ? departname : "管理员" }}</p> </div> <div class="c-five" @click="exit()"> <img src="@/assets/images/login/exit.png" alt="" /> diff --git a/src/views/login/index.vue b/src/views/login/index.vue index c0c4c48..f0e975e 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -32,7 +32,7 @@ <div class="rightBox"> <img src="@/assets/images/login/tianjin.png" alt=""> <div class="container"> - <div class="title">下午好, 欢迎登录!!!</div> + <div class="title"> 欢迎登录</div> <div class="bg-input"> <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="80px" class="demo-ruleForm"> @@ -334,6 +334,7 @@ const styleVar = computed(() => { color: #3877F2; text-align: right; padding-right: changeHeight(5); + font-size: changeHeight(35); } .login-btn { diff --git a/src/views/pages/OpticalStoragePage/index.vue b/src/views/pages/OpticalStoragePage/index.vue index 6282bb2..bbb8f72 100644 --- a/src/views/pages/OpticalStoragePage/index.vue +++ b/src/views/pages/OpticalStoragePage/index.vue @@ -328,7 +328,7 @@ import 'echarts/lib/component/dataZoom' import loadingPage from '@/views/commonPage/loading.vue' import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi' import { SVG, extend as SVGextend, Element as SVGElement, Box, Matrix } from '@svgdotjs/svg.js' -import { log } from 'console' + onMounted(() => { getbatrry() //储能功率曲线 diff --git a/src/views/pages/homePage/SourceoneLine.vue b/src/views/pages/homePage/SourceoneLine.vue new file mode 100644 index 0000000..56bb942 --- /dev/null +++ b/src/views/pages/homePage/SourceoneLine.vue @@ -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; +}>(); + +// 获取echart挂载的DOM节点 +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: { + //y轴name的颜色 + 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> diff --git a/src/views/pages/homePage/index.vue b/src/views/pages/homePage/index.vue index 35a0db1..a954c3e 100644 --- a/src/views/pages/homePage/index.vue +++ b/src/views/pages/homePage/index.vue @@ -108,7 +108,7 @@ {{ unit380lowarrLength }}<span> kW</span> </div> <div class="hu"> - {{ unit380lowarrCount }} <span>座</span> + {{ unit380lowarrCount }} <span>户</span> </div> </div> </div> @@ -187,14 +187,14 @@ <div class="total_load_key"> <div class="area_kw"> <span>{{ sumLoadrateds }}</span> - <div class="r"> kw</div> + <div class="r"> kW</div> </div> <p>地区总额定负荷</p> </div> <div class="total_load_3dEchart"> <div class="title_load fs40">负荷户数比例</div> <div class="echarts"> - <threeEchart></threeEchart> + <threeEchart ></threeEchart> </div> <!-- <threeDPie :threeDPieData="leftData.threeDPieData"></threeDPie> --> @@ -770,6 +770,7 @@ import { getCurrentInstance, inject, } from "vue"; + import { ArrowDown } from "@element-plus/icons-vue"; import { ElMessage } from "element-plus"; import { getColorFun } from "@/hooks/getColorFun/index"; @@ -783,6 +784,7 @@ import load_echart from "./oneLine.vue"; import storage_echart from "./oneLine.vue"; import threeEchart from "./3Dechart.vue"; import runListenPage from "./runListenPage.vue"; + import { statInfo_api } from "@/api/homePage/SoureceApi.ts"; import { count } from "console"; onMounted(() => { diff --git a/src/views/pages/homePage/oneLine.vue b/src/views/pages/homePage/oneLine.vue index dbf6ab6..8271704 100644 --- a/src/views/pages/homePage/oneLine.vue +++ b/src/views/pages/homePage/oneLine.vue @@ -111,6 +111,8 @@ const drawOneLine = () => { // 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"], + + // data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"], }, // y轴的展示数据 yAxis: { @@ -122,8 +124,8 @@ const drawOneLine = () => { }, type: "value", name: "kW", - min: -30, - max: 40, + // min: -50, + // max: 50, nameTextStyle: { //y轴name的颜色 color: "#fff", @@ -167,8 +169,8 @@ const drawOneLine = () => { }, }, // 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], + // data: [20, 42, 41, 24, 40, 30, 10], + data: [0, 0,0,0,0, 40, 40,0,0,-30,-30,-30], }, ], }; diff --git a/src/views/pages/homePage/oneLine_load.vue b/src/views/pages/homePage/oneLine_load.vue index 251bf8c..fec4df3 100644 --- a/src/views/pages/homePage/oneLine_load.vue +++ b/src/views/pages/homePage/oneLine_load.vue @@ -16,16 +16,19 @@ import transformFontSize from "@/hooks/transFormSize.ts"; import "echarts/lib/component/dataZoom"; import { dateEquals, progressProps } from "element-plus"; onMounted(() => { - drawOneLine(); + drawOneLine(props.echartArr); + }); // 获取echart挂载的DOM节点 const OneLine: any = ref(null); - +const props=defineProps<{ + echartArr: any; +}>(); // 获取当前组件实例 const { proxy }: any = getCurrentInstance(); -const drawOneLine = () => { +const drawOneLine = (arr:any) => { let myChart = null; myChart = proxy.$echarts.init(OneLine.value); @@ -109,8 +112,10 @@ const drawOneLine = () => { offset:transformFontSize(15), // 数据 // inverse:true, + data: arr.map((rtime) => rtime?.timeStamp.slice(-5)), + // 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轴的展示数据 yAxis: { @@ -122,8 +127,8 @@ const drawOneLine = () => { }, type: "value", name: "kW", - // min: -50, - // max: 50, + // min: -30, + // max: 40, nameTextStyle: { //y轴name的颜色 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: [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], }, ], }; diff --git a/src/views/pages/homePage/runListenPage.vue b/src/views/pages/homePage/runListenPage.vue index 662e3cc..c48bcb8 100644 --- a/src/views/pages/homePage/runListenPage.vue +++ b/src/views/pages/homePage/runListenPage.vue @@ -25,7 +25,7 @@ <div class="title_info margin1">功率曲线</div> <div class="source_echart"> <div class="tabDate"> - <div + <!-- <div :class="[ sourcetabDateFlagOne === item.id ? 'tab_active' @@ -37,17 +37,18 @@ :key="index" > {{ item.name }} - </div> + </div> --> </div> <div class="source_echart_box"> <!--光伏曲线 --> - <source_Photovoltaic_echart + <!-- <source_Photovoltaic_echart v-if="sourcetabDateFlagOne === 1" - ></source_Photovoltaic_echart> + ></source_Photovoltaic_echart> --> <!-- 厂站曲线 --> - <source_factoryStation_echart + <!-- <source_factoryStation_echart v-else - ></source_factoryStation_echart> + ></source_factoryStation_echart> --> + <SourceoneLine :echartArr="pvArr" v-if="pvArrFlag"></SourceoneLine> </div> <!-- <div class="ratebox"> <div class="rate"> @@ -98,7 +99,7 @@ <div class="content"> <div class="title_info margin2">功率曲线</div> <div class="load_echart"> - <div class="tabDate"> + <!-- <div class="tabDate"> <div :class="[ loadtabDateFlag === item.id @@ -111,11 +112,13 @@ > {{ item.name }} </div> - </div> + </div> --> <div class="load_echart_box"> - <oneLine_load v-if="loadtabDateFlag === 1"></oneLine_load> - <oneLine_load v-if="loadtabDateFlag === 2"></oneLine_load> - <oneLine_load v-if="loadtabDateFlag === 3"></oneLine_load> + <oneLine_load :echartArr="userzArr" v-if="userzFlag"></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 class="ratebox"> <div class="rate"> @@ -468,6 +471,7 @@ import oneLine_load from "./oneLine_load.vue"; import load_echart from "./oneLine.vue"; import storage_echart from "./oneLine.vue"; import threeEchart from "./3Dechart.vue"; +import SourceoneLine from "./SourceoneLine.vue"; import { alert_api, @@ -475,6 +479,7 @@ import { runAlarm_api, } from "@/api/homePage/SoureceApi"; import { handleEchartsData } from "@/hooks/handleFun"; +import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi' onMounted(() => { getStatInfo(); @@ -486,8 +491,31 @@ onMounted(() => { handeleTable(); // 获取运行监视---重过载告警统计 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); // 荷页面标识 @@ -923,10 +951,12 @@ let networkEchart = reactive([ }, ]); const netsourcehandleTabDate = (val: any) => { + sourcetabDateFlagOne.value = val.id; }; const sourcehandleTabDate = (val: any) => { sourcetabDateFlag.value = val.id; + networktabDateFlag.value=val.id }; // 荷 let loadtabDateFlag = ref(1); diff --git a/src/views/pages/homePage/threeLine_Line.vue b/src/views/pages/homePage/threeLine_Line.vue index 3c94740..8fa1153 100644 --- a/src/views/pages/homePage/threeLine_Line.vue +++ b/src/views/pages/homePage/threeLine_Line.vue @@ -122,7 +122,7 @@ const drawOneLine = () => { show: true //y轴轴线 }, type: 'value', - name: '%', + name: '百分比', min: 0, max: 100, nameTextStyle: { @@ -132,7 +132,7 @@ const drawOneLine = () => { padding: [0, 40, 10, 0] }, position: 'left', - offset: transformFontSize(15), + // offset: transformFontSize(15), axisLabel: { //刻度标签文字的颜色大小 color: '#fff',