447 lines
14 KiB
Vue
447 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import moment from 'moment';
|
||
import * as echarts from 'echarts';
|
||
import { ref } from 'vue';
|
||
import { useProgram } from '@/store/modules/program';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const useStore = useProgram();
|
||
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() {
|
||
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',
|
||
valueFormatter: function (value) {
|
||
return value + f;
|
||
}
|
||
},
|
||
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(() => {
|
||
if (!JSON.parse(localStorage.getItem('detail'))) {
|
||
detail.value = useStore.details;
|
||
} else {
|
||
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>
|