xiongqin/zm_OM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xq commit:"修改了逆变器历史详情"

Browse Source
This commit is contained in:
xiongqin
2025-07-16 17:15:55 +08:00
parent f21eadbf90
commit 8186f91408
7 changed files with 504 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

439
src/views/historyDetail/historyDetail.vue Normal file
View File

@ -0,0 +1,439 @@
<script setup lang="ts">
import moment from 'moment';
import * as echarts from 'echarts';
import { ref } from 'vue';
const route = useRoute();
const router = useRouter();
const detail = ref();
const activeName = ref();
const myChart1 = ref(null);
const myChart2 = ref(null);
const myChart3 = ref(null);
const myChart4 = ref(null);
const myChart5 = ref(null);
const myChart6 = ref(null);
function dealData() {
console.info(detail.value);
detail.value = {
...detail.value,
dataTimestamp: moment(Number(detail.value.dataTimestamp)).format('YYYY-MM-DD HH:mm:ss'),
stateChinese: detail.value.state === 1 ? '在线' : detail.value.state === 2 ? '离线' : '报警',
warningInfoData: detail.value.warningInfoData === 0 ? '无' : detail.value.state === 1 ? '异常' : '报警',
updateShelfEndTime: moment(Number(detail.value.updateShelfEndTime)).format('YYYY-MM-DD HH:mm:ss')
};
}
function initChart(a: any, b: any, c: any, d: any, e?: any, f?: any) {
const instance = echarts.getInstanceByDom(c);
if (instance) {
echarts.dispose(instance);
}
const chart1 = echarts.init(c);
const option = {
tooltip: {
trigger: 'axis'
},
dataZoom: [
{
type: 'slider', // 滑动条
show: true,
xAxisIndex: [0], // 控制哪个x轴
start: 0, // 初始显示范围的起始百分比
end: 100, // 初始显示范围的结束百分比
handleIcon:
'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2,
height: 10
},
labelFormatter: function (value) {
return value;
},
// 阻止事件冒泡
handleMove: function (params) {
if (params.event.event) {
params.event.event.stopPropagation();
}
},
bottom: '8%',
height: 10
},
{
type: 'inside', // 内置型dataZoom组件，允许用户通过鼠标滚轮或触控缩放
xAxisIndex: [0],
start: 0,
end: 100
}
],
grid: {
left: '7%',
right: '10%',
bottom: '-100%',
top: '5%',
height: '82%'
},
xAxis: {
type: 'category',
data: b,
boundaryGap: true, // 坐标轴两边留白策略
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: d + '(单位' + f + ')',
nameTextStyle: {
padding: [0, 0, e, 0],
verticalAlign: 'bottom'
},
nameLocation: 'center'
},
series: [
{
data: a,
type: 'bar',
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#ff7f50' }, // 0% 处的颜色
{ offset: 1, color: '#87cefa' } // 100% 处的颜色
],
global: false // 缺省为 false
}
}
}
]
};
chart1 && chart1.setOption(option);
}
function handleClick(a) {
const nv = a.props.name;
if (nv === 'first') {
setTimeout(() => {
initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
}, 500);
} else if (nv === 'second') {
setTimeout(() => {
initChart(detail.value.chart2Value, detail.value.chart2Index, myChart2.value, '直流电压参数', 25, 'V');
}, 500);
} else if (nv === 'third') {
setTimeout(() => {
initChart(detail.value.chart3Value, detail.value.chart3Index, myChart3.value, '直流功率参数', 25, 'kwh');
}, 500);
} else if (nv === 'fourth') {
setTimeout(() => {
initChart(detail.value.chart4Value, detail.value.chart4Index, myChart4.value, 'mppt电流参数', 25, 'A');
}, 500);
} else if (nv === 'fifth') {
setTimeout(() => {
initChart(detail.value.chart5Value, detail.value.chart5Index, myChart5.value, 'mppt电压参数', 25, 'V');
}, 500);
} else if (nv === 'sixth') {
setTimeout(() => {
initChart(detail.value.chart6Value, detail.value.chart6Index, myChart6.value, 'mppt功率参数', 25, 'kwh');
}, 500);
}
}
watch(
activeName,
(nv) => {
if (nv === 'first') {
setTimeout(() => {
initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
}, 500);
}
},
{ immediate: false }
);
onBeforeMount(() => {
localStorage.setItem('detail', route.query.detail);
detail.value = JSON.parse(localStorage.getItem('detail'));
dealData();
activeName.value = 'first';
});
onBeforeUnmount(() => {
localStorage.removeItem('detail');
});
</script>
<template>
<div class="container">
<div class="head flex-c">
<div class="row1 flex-a">
<div class="nbqName">{{ detail.name }}</div>
<div class="stationId">电站ID：{{ detail.stationId }}</div>
<el-button icon="RefreshRight"></el-button>
</div>
<div class="row2">数据上报时间:{{ detail.dataTimestamp }}</div>
</div>
<el-card class="base-info">
<div class="title">基本信息</div>
<el-form style="margin-left: 20px">
<el-row>
<el-col :span="8">
<el-form-item label="名称：" prop="name">
<div>{{ detail.name }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="SN：" prop="sn">
<div>{{ detail.sn }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态：" prop="stateChinese">
<div class="dot dot-g" v-if="detail.stateChinese === '在线'"></div>
<div class="dot dot-r" v-if="detail.stateChinese === '报警'"></div>
<div class="dot dot-o" v-if="detail.stateChinese === '离线'"></div>
<div>{{ detail.stateChinese }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item :prop="detail.model" label="型号：">
<div>{{ detail.model }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="detail.stationName" label="所属电站：">
<div>{{ detail.stationName }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="detail.updateShelfEndTime" label="质保结束时间：">
<div>{{ detail.updateShelfEndTime }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item :prop="detail.type" label="逆变器类型：">
<div>{{ detail.type || '暂无' }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="detail.nationalStandardstr" label="国家标准：">
<div>{{ detail.nationalStandardstr }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :prop="detail.collectorId" label="所属采集器：">
<div>{{ detail.collectorId }}</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<div class="block-2 flex">
<el-card class="in-time">
<div class="title">实时数据</div>
<el-form label-position="top" class="intime-form">
<el-row>
<el-col :span="12">
<el-form-item label="实时功率" prop="pac">
<div>{{ detail.pac }}{{ detail.pacStr }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="当日能量" prop="eToday">
<div>{{ detail.eToday }}{{ detail.eTodayStr }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="满发小时数" prop="fullHour">
<div>{{ detail.fullHour }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="当月能量" prop="eMonth">
<div>{{ detail.eMonth }}{{ detail.eMonthStr }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="报警信息" prop="warningInfoData">
<div>{{ detail.warningInfoData }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="当年能量" prop="eYear">
<div>{{ detail.eYear }}{{ detail.eYearStr }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="逆变器温度" prop="inverterTemperature">
<div>{{ detail.inverterTemperature }}</div>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总能量" prop="eTotal">
<div>{{ detail.eTotal }}{{ detail.eTotalStr }}</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
<el-card class="in-time">
<div class="title">功率数据</div>
<el-form label-position="top" class="intime-form">
<el-row>
<el-col :span="8">
<el-form-item label="逆变器无功功率" prop="reactivePower">
<div>{{ detail.reactivePower }}{{ detail.reactivePowerStr }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="逆变器视在功率" prop="apparentPower">
<div>{{ detail.apparentPower }}{{ detail.apparentPowerStr }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="逆变器总直流输入功率" prop="dcPac">
<div>{{ detail.dcPac }}{{ detail.dcPacStr }}</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="电网总有功功率" prop="pSum">
<div>{{ detail.psum }}{{ detail.psumStr }}</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="功率百分比" prop="pacPec">
<div>{{ detail.pacPec }}%</div>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
<el-card class="chart-block">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<el-tab-pane label="直流电流参数" name="first">
<div class="chartDom" ref="myChart1"></div>
</el-tab-pane>
<el-tab-pane label="直流电压参数" name="second">
<div class="chartDom" ref="myChart2"></div>
</el-tab-pane>
<el-tab-pane label="直流功率参数" name="third">
<div class="chartDom" ref="myChart3"></div>
</el-tab-pane>
<el-tab-pane label="mppt电流参数" name="fourth">
<div class="chartDom" ref="myChart4"></div>
</el-tab-pane>
<el-tab-pane label="mppt电压参数" name="fifth">
<div class="chartDom" ref="myChart5"></div>
</el-tab-pane>
<el-tab-pane label="mppt功率参数" name="sixth">
<div class="chartDom" ref="myChart6"></div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
<style scoped lang="scss">
.container {
.head {
margin-top: 10px;
margin-left: 40px;
font-size: 16px;
.row1 {
.stationId {
margin-left: 10px;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
}
.el-button {
width: 30px;
height: 30px;
margin-left: 10px;
}
}
}
.base-info {
width: 100%;
min-height: 100px;
margin-left: 40px;
margin-top: 10px;
.title {
margin-bottom: 10px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 100%;
margin-right: 5px;
&-g {
background-color: #1ab394;
}
&-r {
background-color: red;
}
&-o {
background-color: gray;
}
}
}
.block-2 {
width: 100%;
height: 280px;
margin-left: 40px;
margin-top: 10px;
justify-content: space-between;
.el-card {
width: 49.7%;
height: 100%;
}
.in-time {
.title {
margin-bottom: 15px;
}
:deep(.intime-form) {
margin-left: 20px;
.el-form-item {
.el-form-item__label {
margin-bottom: 0;
}
.el-form-item__content {
height: 12px;
}
}
}
}
}
.chart-block {
width: 50%;
height: 280px;
margin-left: 40px;
margin-top: 10px;
.chartDom {
width: 800px;
height: 200px;
}
}
}
</style>