zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'master' of http://58.87.70.254/zhaoqiang/v3tianjin

master
zhaoqiang 2024-07-15 14:15:05 +08:00
parent f5735f6038 fb9a7f1412
commit 938256e828
10 changed files with 278 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/ajust/tree.ts
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
})
}

2
src/views/layout/header.vue
View File

@ -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="" />

3
src/views/login/index.vue
View File

@ -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 {

2
src/views/pages/OpticalStoragePage/index.vue
View File

@ -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() //储能功率曲线

196
src/views/pages/homePage/SourceoneLine.vue Normal file
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;
}>();
// 获取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>

8
src/views/pages/homePage/index.vue
View File

@ -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">&nbsp;kw</div>
<div class="r">&nbsp;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(() => {

8
src/views/pages/homePage/oneLine.vue
View File

@ -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,7 +169,7 @@ const drawOneLine = () => {
},
},
// 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],
},
],

22
src/views/pages/homePage/oneLine_load.vue
View File

@ -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],
},
],
};

52
src/views/pages/homePage/runListenPage.vue
View File

@ -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);

4
src/views/pages/homePage/threeLine_Line.vue
View File

@ -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',